import { Component , OnDestroy , OnInit } from '@angular/core' ; import { MatDialog , MatDialogConfig , MatDialogRef , MatSnackBar } from '@angular/material' ; import { ActivatedRoute } from '@angular/router' ; import { Subscription } from 'rxjs' ; import { map } from 'rxjs/operators' ; import { Breakpoints , BreakpointObserver , BreakpointState } from '@angular/cdk/layout' ; import { MonitorService , ProjectService } from '@core/services/index.service' ; import { DialogConfirmationComponent } from '@shared/dialog/confirmation/dialog-confirmation.component' ; import { BreadCrumbModel , MonitorModel , ProjectModel } from '@shared/models/index.model' ; /**
 * Monitor list component
 */ @ Component ( { selector : 'dashboard-monitors-list' , templateUrl : './monitors-list.component.html' , styleUrls : [ './monitors-list.component.scss' ] , } ) export class MonitorsListComponent implements OnInit , OnDestroy { private dialogRef : MatDialogRef < DialogConfirmationComponent > ; private monitorSubscription : Subscription ; private saveMonitorSubscription : Subscription ; public monitors : MonitorModel [ ] = [ ] ; public project : ProjectModel ; public projectUid : string ; public manualPing : boolean = false ; public displayedColumns : string [ ] ; public typeIcon : string ; public breadCrumb : BreadCrumbModel [ ] ; param dialog param monitorService param projectService param route param snackBar param breakpointObserver constructor ( private dialog , private monitorService , private projectService , private route , private snackBar , private breakpointObserver ) { } /**
     * Life cycle init method
     */ ngOnInit ( ) { this . projectUid = this . route . snapshot . paramMap . get ( 'projectUid' ) ; this . route . data . pipe ( map ( ( data ) => data . project ) ) . subscribe ( ( project ) => { this . project = project ; this . monitors = project . monitors ? project . monitors : [ ] ; this . breadCrumb = [ { link : `/projects/${ this . project . uid }` , title : this . project . title } ] ; } ) ; this . monitorSubscription = this . projectService . findOneById ( this . projectUid ) . subscribe ( ( project ) => this . monitors = project . monitors ? project . monitors : [ ] ) ; this . breakpointObserver . observe ( [ Breakpoints . XSmall ] ) . subscribe ( ( state ) => { if ( state . matches ) { this . displayedColumns = [ 'name' , 'code' , 'action' ] ; } else { this . displayedColumns = [ 'name' , 'method' , 'code' , 'text' , 'ping' , 'action' ] ; } } ) ; } param uid delete ( monitorUid ) { let dialogConfig = new MatDialogConfig ( ) ; dialogConfig = { width : '500px' , data : { title : 'Delete Monitor' , content : 'Are you sure you want to delete?' , } , } ; this . dialogRef = this . dialog . open ( DialogConfirmationComponent , dialogConfig ) ; this . dialogRef . afterClosed ( ) . subscribe ( ( result ) => { if ( result === true ) { this . saveMonitorSubscription = this . monitorService . delete ( this . projectUid , monitorUid ) . subscribe ( ( ) => this . monitorService . deletePingsByMonitor ( this . projectUid , monitorUid ) , ( error ) : any => this . snackBar . open ( error . message , undefined , { duration : 5000 } ) ) ; } } ) ; } param monitorUid public pingMonitor ( monitorUid ) { this . manualPing = true ; this . monitorService . pingMonitor ( this . projectUid , monitorUid , 'manual' ) . subscribe ( ( ) => setTimeout ( ( ) => this . manualPing = false , 10000 ) ) ; } /**
     * Life cycle On destroy method
     */ ngOnDestroy ( ) { this . monitorSubscription . unsubscribe ( ) ; if ( this . saveMonitorSubscription ) { this . saveMonitorSubscription . unsubscribe ( ) ; } } }