1- import { AfterViewInit , Component , NgZone , OnDestroy , OnInit /* ViewChild*/ } from "@angular/core" ;
1+ import { Component , NgZone , OnDestroy , OnInit , ViewChild } from "@angular/core" ;
22import { Router } from "@angular/router" ;
33import { HttpTransportType , HubConnectionBuilder } from "@aspnet/signalr" ;
44
55import { CheckResultStatus } from "../app.enums" ;
66import { ICheck , ICheckGroup , ICheckType , IEnvironment , ISettings } from "../app.interfaces" ;
77import { RunCheckComponent } from "../components" ;
88import { AppService , MessageService } from "../services" ;
9+ import { MatTableDataSource , MatSort } from "@angular/material" ;
910
1011interface IChart {
1112 name : string ;
@@ -21,7 +22,7 @@ interface IChart {
2122 templateUrl : "./dashboard.template.html" ,
2223 styleUrls : [ "./dashboard.style.scss" ] ,
2324} )
24- export class DashboardComponent implements AfterViewInit , OnInit , OnDestroy {
25+ export class DashboardComponent implements OnInit , OnDestroy {
2526 public chartColors = {
2627 domain : [ "#5AA454" , "#FBC02D" , "#A10A28" , "#E0E0E0" ] ,
2728 } ;
@@ -36,32 +37,18 @@ export class DashboardComponent implements AfterViewInit, OnInit, OnDestroy {
3637 } ] ,
3738 } ] ;
3839 public checks : ICheck [ ] = [ ] ;
39- //public activeOptions: SelectItem[] = [
40- // { label: "Yes", value: true },
41- // { label: "No", value: false },
42- // { label: "All", value: null },
43- //];
44- //public resultOptions: SelectItem[] = [
45- // { label: "All", value: null },
46- // { label: "Successful", value: CheckResultStatus.Success },
47- // { label: "Warning", value: CheckResultStatus.Warning },
48- // { label: "Failed", value: CheckResultStatus.Failed },
49- // { label: "Not run", value: CheckResultStatus.NotRun },
50- //];
51- public activeOption : boolean | null = true ;
52- public resultOption : CheckResultStatus | null = null ;
53- //public environmentOptions: SelectItem[] = [];
54- public environmentOption : number | null = null ;
40+ public dataSource : MatTableDataSource < ICheck > ;
41+ public displayedColumns = [ "name" , "active" , "group" , "environment" , "type" , "lastResultStatus" , "options" ] ;
42+ @ViewChild ( "sort" ) public sort : MatSort ;
43+
44+ public filter : string ;
45+ public activeOnly : boolean = true ;
5546 public environmentLookup : {
5647 [ key : string ] : IEnvironment ;
5748 } ;
58- //public checkGroupOptions: SelectItem[] = [];
59- public checkGroupOption : number | null = null ;
6049 public checkGroupLookup : {
6150 [ key : string ] : ICheckGroup ;
6251 } ;
63- //public typeOptions: SelectItem[] = [];
64- public typeOption : number | null = null ;
6552 public typeLookup : {
6653 [ key : string ] : ICheckType ;
6754 } ;
@@ -75,7 +62,6 @@ export class DashboardComponent implements AfterViewInit, OnInit, OnDestroy {
7562 Global : { } ,
7663 } ;
7764 public types : ICheckType [ ] = [ ] ;
78- //@ViewChild ("dt") private dataTable: DataTable;
7965 private hub = new HubConnectionBuilder ( )
8066 . withUrl ( "hub/dashboard" , { transport : HttpTransportType . WebSockets } )
8167 . build ( ) ;
@@ -99,45 +85,64 @@ export class DashboardComponent implements AfterViewInit, OnInit, OnDestroy {
9985 delete this . types ;
10086 this . types = await this . appService . getTypes ( ) ;
10187
102- //delete this.environmentLookup;
103- //this.environmentLookup = {};
104- //delete this.environmentOptions;
105- //this.environmentOptions = [{ label: "All", value: null }];
106- //this.settings.Environments.map(x => {
107- // this.environmentLookup[x.ID] = x;
108- // this.environmentOptions.push({ label: x.Name, value: x.ID });
109- //});
88+ delete this . environmentLookup ;
89+ this . environmentLookup = { } ;
90+ this . settings . Environments . map ( x => {
91+ this . environmentLookup [ x . ID ] = x ;
92+ } ) ;
11093
111- //delete this.typeLookup;
112- //this.typeLookup = {};
113- //delete this.typeOptions;
114- //this.typeOptions = [{ label: "All", value: null }];
115- //this.types.map(x => {
116- // this.typeLookup[x.ID] = x;
117- // this.typeOptions.push({ label: x.Name, value: x.ID });
118- //});
94+ delete this . typeLookup ;
95+ this . typeLookup = { } ;
96+ this . types . map ( x => {
97+ this . typeLookup [ x . ID ] = x ;
98+ } ) ;
11999
120- //delete this.checkGroupLookup;
121- //this.checkGroupLookup = {};
122- //delete this.checkGroupOptions;
123- //this.checkGroupOptions = [{ label: "All", value: null }];
124- //this.settings.CheckGroups.map(x => {
125- // this.checkGroupLookup[x.ID] = x;
126- // this.checkGroupOptions.push({ label: x.Name, value: x.ID });
127- //});
100+ delete this . checkGroupLookup ;
101+ this . checkGroupLookup = { } ;
102+ this . settings . CheckGroups . map ( x => {
103+ this . checkGroupLookup [ x . ID ] = x ;
104+ } ) ;
128105
129106 delete this . checks ;
130107 this . checks = await this . appService . getAll ( true ) ;
108+ this . dataSource = new MatTableDataSource ( this . checks ) ;
109+ this . dataSource . sort = this . sort ;
110+ console . log ( this . sort ) ;
111+ this . dataSource . filterPredicate = ( check , value ) => {
112+ return `${ check . Name }
113+ ${ check . Active ? "Yes" : "No" }
114+ ${ check . GroupID ? this . checkGroupLookup [ check . GroupID ] . Name : "None" }
115+ ${ this . environmentLookup [ check . EnvironmentID ! ] . Name }
116+ ${ this . typeLookup [ check . TypeID ! ] . Name }
117+ ${ CheckResultStatus [ check . LastResultStatus ! ] }
118+ ` . toLowerCase ( ) . includes ( value ) ;
119+ } ;
120+ this . dataSource . sortingDataAccessor = ( check , header ) => {
121+ console . log ( header ) ;
122+ switch ( header ) {
123+ case "name" :
124+ return check . Name ;
125+ case "active" :
126+ return check . Active ? "Yes" : "No" ;
127+ case "group" :
128+ return check . GroupID ? this . checkGroupLookup [ check . GroupID ] . Name : "None" ;
129+ case "environment" :
130+ return this . environmentLookup [ check . EnvironmentID ! ] . Name
131+ case "type" :
132+ return this . typeLookup [ check . TypeID ! ] . Name
133+ case "lastResultStatus" :
134+ return CheckResultStatus [ check . LastResultStatus ! ]
135+ default :
136+ return check [ header ] ;
137+ }
138+ } ;
131139 this . updateCharts ( ) ;
132140 } catch ( e ) {
133141 this . messageService . error ( "Failed to load checks" , e . toString ( ) ) ;
134142 } finally {
135143 this . loading = false ;
136144 }
137145 }
138- public ngAfterViewInit ( ) {
139- setImmediate ( ( ) => this . updateActiveFilter ( ) ) ;
140- }
141146 public async ngOnInit ( ) {
142147 await this . loadChecks ( ) ;
143148 await this . hub . start ( ) ;
@@ -148,10 +153,8 @@ export class DashboardComponent implements AfterViewInit, OnInit, OnDestroy {
148153 this . hub . stop ( ) ;
149154 }
150155 }
151- public updateActiveFilter ( ) {
152- //const col = this.dataTable.columns.find(x => x.header === "Active")!;
153- //this.dataTable.filter(this.activeOption, col.field, col.filterMatchMode);
154- this . updateCharts ( ) ;
156+ public applyFilter ( ) {
157+ this . dataSource . filter = this . filter . replace ( / / g, "" ) . toLowerCase ( ) ;
155158 }
156159 public async run ( check : ICheck ) {
157160 await this . appService . run ( RunCheckComponent , check ) ;
@@ -163,7 +166,7 @@ export class DashboardComponent implements AfterViewInit, OnInit, OnDestroy {
163166 let warning = 0 ;
164167 let failed = 0 ;
165168 let notRun = 0 ;
166- this . checks . filter ( y => y . EnvironmentID === x . ID && ( this . activeOption === null || this . activeOption === y . Active ) ) . forEach ( x => {
169+ this . checks . filter ( y => y . EnvironmentID === x . ID && ( this . activeOnly === false || y . Active ) ) . forEach ( x => {
167170 const status = x . LastResultStatus ;
168171 switch ( status ) {
169172 case CheckResultStatus . Success :
@@ -208,39 +211,19 @@ export class DashboardComponent implements AfterViewInit, OnInit, OnDestroy {
208211 } ;
209212 } ) ;
210213 }
211- //public updateResultFilter() {
212- // const col = this.dataTable.columns.find(x => x.header === "Last Result Status")!;
213- // this.dataTable.filter(this.resultOption, col.field, col.filterMatchMode);
214- //}
215- //public updateEnvironmentFilter() {
216- // const col = this.dataTable.columns.find(x => x.header === "Environment")!;
217- // this.dataTable.filter(this.environmentOption, col.field, col.filterMatchMode);
218- //}
219- //public updateTypeFilter() {
220- // const col = this.dataTable.columns.find(x => x.header === "Type")!;
221- // this.dataTable.filter(this.typeOption, col.field, col.filterMatchMode);
222- //}
223- //public updateCheckGroupFilter() {
224- // const col = this.dataTable.columns.find(x => x.header === "Group")!;
225- // this.dataTable.filter(this.checkGroupOption, col.field, col.filterMatchMode);
226- //}
227214 public onChartSelect ( results : IChart , event : { name : string , value : number } ) {
228215 const selected = results . results . find ( x => x . name === event . name ) ;
229216 if ( selected ) {
230- this . resultOption = selected . type ;
231- this . environmentOption = results . environmentID ;
232- //this.updateResultFilter();
233- //this.updateEnvironmentFilter();
217+ this . filter = `${ this . environmentLookup [ results . environmentID ] . Name } ${ CheckResultStatus [ selected . type ! ] } ;
218+ this . applyFilter ( ) ;
234219 }
235220 }
236221 public onCheckSelected ( event : { data : ICheck } ) {
237222 this . router . navigate ( [ "/details" , event . data . ID ] ) ;
238223 }
239224 public setEnvironment ( id : number ) {
240- this . environmentOption = id ;
241- this . resultOption = null ;
242- //this.updateEnvironmentFilter();
243- //this.updateResultFilter();
225+ this . filter = this . environmentLookup [ id ] . Name ;
226+ this . applyFilter ( ) ;
244227 }
245228 public trackChart ( index : number , chart : IChart ) {
246229 return chart ? chart . environmentID : undefined ;
0 commit comments