From 5e5bdc4c8c1efec578e35621802f4169c388af9f Mon Sep 17 00:00:00 2001
From: Tristan Bastian <tristan.bastian@softwareag.com>
Date: Thu, 2 Dec 2021 18:26:46 +0100
Subject: [PATCH] link firmware statistics to device lookup

---
 .../device-lookup/device-lookup.component.ts  | 54 +++++++++++--
 .../device-table-datasource.service.ts        | 20 ++++-
 .../firmware-statistics.component.html        |  2 +-
 .../firmware-statistics.component.ts          | 76 +++++++++++++++----
 .../pie-chart/pie-chart.component.html        |  1 +
 .../pie-chart/pie-chart.component.ts          |  9 ++-
 src/services/device-details.service.ts        | 56 +++++++++-----
 7 files changed, 170 insertions(+), 48 deletions(-)

diff --git a/src/modules/lookup/device-lookup/device-lookup.component.ts b/src/modules/lookup/device-lookup/device-lookup.component.ts
index 90736c8..4753cf8 100644
--- a/src/modules/lookup/device-lookup/device-lookup.component.ts
+++ b/src/modules/lookup/device-lookup/device-lookup.component.ts
@@ -1,11 +1,19 @@
-import { Component } from '@angular/core';
+import { Component, OnDestroy, ViewChild } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
 import { IManagedObject } from '@c8y/client';
-import { AlertService, BulkActionControl, Column, ColumnDataType, ModalService } from '@c8y/ngx-components';
+import {
+  AlertService,
+  BulkActionControl,
+  Column,
+  ColumnDataType,
+  DataGridComponent,
+  ModalService
+} from '@c8y/ngx-components';
 import { DeviceAction } from '@models/extensions';
 import { TenantSpecificDetails } from '@models/tenant-specific-details';
 import { FakeMicroserviceService } from '@services/fake-microservice.service';
 import { BsModalService } from 'ngx-bootstrap/modal';
-import { Subject } from 'rxjs';
+import { Subject, Subscription } from 'rxjs';
 import { filter, take } from 'rxjs/operators';
 import { ConfigurationUpdateModalComponent } from '../modals/configuration-update-modal/configuration-update-modal.component';
 import { CustomFirmwareUpdateModalComponent } from '../modals/custom-firmware-update-modal/custom-firmware-update-modal.component';
@@ -17,7 +25,8 @@ import { DeviceTableDatasourceService } from './device-table-datasource.service'
   selector: 'ps-device-lookup',
   templateUrl: './device-lookup.component.html'
 })
-export class DeviceLookupComponent {
+export class DeviceLookupComponent implements OnDestroy {
+  @ViewChild(DataGridComponent, { static: true }) dataGrid: DataGridComponent;
   columns: Column[];
   bulkActionControls: BulkActionControl[] = [
     {
@@ -35,15 +44,46 @@ export class DeviceLookupComponent {
         this.updateFirmware(selectedItemIds as any as { tenant: string; id: string }[])
     }
   ];
+  private queryParamSub: Subscription;
 
   constructor(
     private credService: FakeMicroserviceService,
     private c8yModalService: ModalService,
     private modalService: BsModalService,
     private alertService: AlertService,
-    public datasource: DeviceTableDatasourceService
+    public datasource: DeviceTableDatasourceService,
+    private route: ActivatedRoute
   ) {
     this.columns = this.getDefaultColumns();
+    this.queryParamSub = this.route.queryParams.subscribe((params) => {
+      const columns = this.dataGrid ? this.dataGrid.columns : this.columns;
+      if (params && this.columns && this.columns.length) {
+        const paramKeys = Object.keys(params);
+        let paramChanged = false;
+        columns.forEach((col) => {
+          if (paramKeys.includes(col.name)) {
+            if (col.filterPredicate !== params[col.name]) {
+              paramChanged = true;
+              col.filterPredicate = params[col.name];
+            }
+          } else {
+            if (col.filterPredicate) {
+              paramChanged = true;
+              col.filterPredicate = undefined;
+            }
+          }
+        });
+        if (paramChanged && this.dataGrid) {
+          this.dataGrid.reload();
+        }
+      }
+    });
+  }
+
+  ngOnDestroy(): void {
+    if (this.queryParamSub) {
+      this.queryParamSub.unsubscribe();
+    }
   }
 
   getDefaultColumns(): Column[] {
@@ -92,7 +132,7 @@ export class DeviceLookupComponent {
         visible: false
       },
       {
-        name: 'firmware_name',
+        name: 'firmwareName',
         header: 'Firmware Name',
         path: 'data.c8y_Firmware.name',
         dataType: ColumnDataType.TextShort,
@@ -101,7 +141,7 @@ export class DeviceLookupComponent {
         visible: false
       },
       {
-        name: 'firmware_version',
+        name: 'firmwareVersion',
         header: 'Firmware Version',
         path: 'data.c8y_Firmware.version',
         dataType: ColumnDataType.TextShort,
diff --git a/src/modules/lookup/device-lookup/device-table-datasource.service.ts b/src/modules/lookup/device-lookup/device-table-datasource.service.ts
index b0f33a7..9628c35 100644
--- a/src/modules/lookup/device-lookup/device-table-datasource.service.ts
+++ b/src/modules/lookup/device-lookup/device-table-datasource.service.ts
@@ -1,4 +1,5 @@
 import { Inject, Injectable, Optional } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
 import { QueriesUtil, IResultList, IManagedObject, Client } from '@c8y/client';
 import { ServerSideDataResult, Column, Pagination, DataSourceModifier } from '@c8y/ngx-components';
 import { DeviceActionsFactory, HOOK_DEVICE_ACTION_FACTORY } from '@models/extensions';
@@ -34,7 +35,9 @@ export class DeviceTableDatasourceService {
   constructor(
     private credService: FakeMicroserviceService,
     private deviceDetailsService: DeviceDetailsService,
-    private extensionService: ExtensionsService
+    private extensionService: ExtensionsService,
+    private router: Router,
+    private activatedRoute: ActivatedRoute
   ) {
     this.deviceActionFactories = this.extensionService.getDeviceActionFactories();
     this.serverSideDataCallback = this.onDataSourceModifier.bind(this);
@@ -42,16 +45,27 @@ export class DeviceTableDatasourceService {
 
   async onDataSourceModifier(dataSourceModifier: DataSourceModifier): Promise<ServerSideDataResult> {
     this.columns = [...(dataSourceModifier.columns || [])];
+    const queryParams = {};
+    this.columns.forEach((col) => {
+      if (col.filterPredicate) {
+        queryParams[col.name] = col.filterPredicate;
+      }
+    });
+
+    this.router.navigate([], {
+      relativeTo: this.activatedRoute,
+      queryParams
+    });
     const credentials = await this.credService.prepareCachedDummyMicroserviceForAllSubtenants();
     let clients = this.credService.createClients(credentials);
+    const columnsCopy = dataSourceModifier.columns.map((tmp) => Object.assign({}, tmp));
     let tenantFilter = '';
-    const tenantIdCol = dataSourceModifier.columns.find((tmp) => tmp.path === 'tenantId');
+    const tenantIdCol = columnsCopy.find((tmp) => tmp.path === 'tenantId');
     if (tenantIdCol && tenantIdCol.filterPredicate) {
       clients = clients.filter((tmp) => tmp.core.tenant.includes(tenantIdCol.filterPredicate as string));
       tenantFilter = tenantIdCol.filterPredicate as string;
       tenantIdCol.filterPredicate = undefined;
     }
-    const columnsCopy = dataSourceModifier.columns.map((tmp) => Object.assign({}, tmp));
 
     columnsCopy.forEach((entry) => {
       if (entry && entry.path) {
diff --git a/src/modules/statistics/firmware-statistics/firmware-statistics.component.html b/src/modules/statistics/firmware-statistics/firmware-statistics.component.html
index 28a3cd5..5ad93ab 100644
--- a/src/modules/statistics/firmware-statistics/firmware-statistics.component.html
+++ b/src/modules/statistics/firmware-statistics/firmware-statistics.component.html
@@ -28,7 +28,7 @@ <h3>{{ "No device/firmware combination selected." | translate }}</h3>
         <h4 class="card-title">{{ currentChart.label }}</h4>
       </div>
         <div class="card-block flex-grow">
-          <ps-pie-chart [pieChartLabels]="currentChart.labels" [pieChartData]="currentChart.values"></ps-pie-chart>
+          <ps-pie-chart [pieChartLabels]="currentChart.labels" [pieChartData]="currentChart.values" (indexClicked)="pieChartClicked($event)"></ps-pie-chart>
 
         </div>
       <!-- <div class="card-footer separator text-center">
diff --git a/src/modules/statistics/firmware-statistics/firmware-statistics.component.ts b/src/modules/statistics/firmware-statistics/firmware-statistics.component.ts
index ed4b503..eac4671 100644
--- a/src/modules/statistics/firmware-statistics/firmware-statistics.component.ts
+++ b/src/modules/statistics/firmware-statistics/firmware-statistics.component.ts
@@ -1,6 +1,8 @@
 import { Component } from '@angular/core';
+import { Router } from '@angular/router';
 import { DeviceDetailsService } from '@services/device-details.service';
 import { FakeMicroserviceService } from '@services/fake-microservice.service';
+import { flatten } from 'lodash-es';
 
 @Component({
   selector: 'ps-firmware-statistics',
@@ -10,16 +12,24 @@ export class FirmwareStatisticsComponent {
   isLoading = true;
   charts: {
     label: string;
+    type: string;
+    firmwareName: string;
     labels: string[];
     values: number[];
   }[] = [];
   currentChart: {
     label: string;
+    type: string;
+    firmwareName: string;
     labels: string[];
     values: number[];
   };
 
-  constructor(private credService: FakeMicroserviceService, private deviceDetailsService: DeviceDetailsService) {
+  constructor(
+    private credService: FakeMicroserviceService,
+    private deviceDetailsService: DeviceDetailsService,
+    private router: Router
+  ) {
     this.loadData();
   }
 
@@ -30,6 +40,8 @@ export class FirmwareStatisticsComponent {
         this.charts = result.map((tmp) => {
           return {
             label: tmp.label,
+            type: tmp.type,
+            firmwareName: tmp.firmwareName,
             labels: tmp.entries.map((entry) => entry.version),
             values: tmp.entries.map((entry) => entry.count)
           };
@@ -47,13 +59,21 @@ export class FirmwareStatisticsComponent {
     );
   }
 
-  public selectChart(chart: { label: string; labels: string[]; values: number[] }): void {
+  public selectChart(chart: {
+    label: string;
+    type: string;
+    firmwareName: string;
+    labels: string[];
+    values: number[];
+  }): void {
     this.currentChart = chart;
   }
 
   private async fetchForPage(): Promise<
     {
       label: string;
+      type: string;
+      firmwareName: string;
       entries: {
         version: string;
         count: number;
@@ -63,20 +83,44 @@ export class FirmwareStatisticsComponent {
     const credentials = await this.credService.prepareCachedDummyMicroserviceForAllSubtenants();
     const clients = this.credService.createClients(credentials);
     const result = await this.deviceDetailsService.getFirmwareStatisticsOfTenants(clients);
-    const mappedResult = Array.from(result.entries()).map(([key, value]) => {
-      const childEntries = Array.from(value.entries())
-        .map(([key2, value2]) => {
-          return {
-            version: key2,
-            count: value2
-          };
-        })
-        .sort((a, b) => b.count - a.count);
-      return {
-        label: key,
-        entries: childEntries
-      };
+    const mappedResult = Array.from(result.entries()).map(([type, value]) => {
+      return Array.from(value.entries()).map(([firmwareName, value2]) => {
+        const childEntries = Array.from(value2.entries())
+          .map(([key2, value3]) => {
+            return {
+              version: key2,
+              count: value3
+            };
+          })
+          .sort((a, b) => b.count - a.count);
+        return {
+          label: `${type} - ${firmwareName}`,
+          type,
+          firmwareName,
+          entries: childEntries
+        };
+      });
     });
-    return mappedResult;
+    return flatten(mappedResult);
+  }
+
+  pieChartClicked(index: number): void {
+    const lookupPath = 'lookup';
+    const devicePath = 'device';
+    const config = this.router.config;
+    const lookupConfig = config.find((tmp) => tmp.path === lookupPath);
+    if (lookupConfig && lookupConfig.children && lookupConfig.children.find((tmp) => tmp.path === devicePath)) {
+      const firmwareVersion = this.currentChart.labels[index];
+      const type = this.currentChart.type;
+      const firmwareName = this.currentChart.firmwareName;
+
+      this.router.navigate([lookupPath, devicePath], {
+        queryParams: {
+          firmwareVersion,
+          type,
+          firmwareName
+        }
+      });
+    }
   }
 }
diff --git a/src/modules/statistics/pie-chart/pie-chart.component.html b/src/modules/statistics/pie-chart/pie-chart.component.html
index 6894f80..b11d5ad 100644
--- a/src/modules/statistics/pie-chart/pie-chart.component.html
+++ b/src/modules/statistics/pie-chart/pie-chart.component.html
@@ -6,5 +6,6 @@
     [colors]="pieChartColors"
     [legend]="pieChartLegend"
     [plugins]="pieChartPlugins"
+    (chartClick)="onChartClick($event)"
 >
 </canvas>
\ No newline at end of file
diff --git a/src/modules/statistics/pie-chart/pie-chart.component.ts b/src/modules/statistics/pie-chart/pie-chart.component.ts
index ccffe44..8de0ae7 100644
--- a/src/modules/statistics/pie-chart/pie-chart.component.ts
+++ b/src/modules/statistics/pie-chart/pie-chart.component.ts
@@ -1,4 +1,4 @@
-import { Component, Input } from '@angular/core';
+import { Component, EventEmitter, Input, Output } from '@angular/core';
 import { ChartOptions, ChartType } from 'chart.js';
 import { Color, Label } from 'ng2-charts';
 import * as pluginDataLabels from 'chartjs-plugin-datalabels';
@@ -10,6 +10,7 @@ import * as pluginDataLabels from 'chartjs-plugin-datalabels';
 })
 export class PieChartComponent {
   @Input() pieChartData: number[];
+  @Output() indexClicked = new EventEmitter<number>();
   public pieChartOptions: ChartOptions = {
     responsive: true,
     // legend: {
@@ -95,4 +96,10 @@ export class PieChartComponent {
   constructor() {
     this.pieChartColors = [];
   }
+
+  onChartClick(event: any): void {
+    if (event && event.active && event.active.length) {
+      this.indexClicked.emit(event.active[0]._index);
+    }
+  }
 }
diff --git a/src/services/device-details.service.ts b/src/services/device-details.service.ts
index 158869a..eb06501 100644
--- a/src/services/device-details.service.ts
+++ b/src/services/device-details.service.ts
@@ -6,8 +6,8 @@ import { TenantSpecificDetails } from '@models/tenant-specific-details';
   providedIn: 'root'
 })
 export class DeviceDetailsService {
-  public async getFirmwareStatistics(client: Client): Promise<Map<string, Map<string, number>>> {
-    const firmwareCounterMap = new Map<string, Map<string, number>>();
+  public async getFirmwareStatistics(client: Client): Promise<Map<string, Map<string, Map<string, number>>>> {
+    const firmwareCounterMap = new Map<string, Map<string, Map<string, number>>>();
     const filter = {
       q: '$filter=(has(c8y_Firmware))',
       pageSize: 2000
@@ -21,18 +21,24 @@ export class DeviceDetailsService {
             const version = mo.c8y_Firmware.version;
             const firmwareIdent = `${version}`;
             const type = mo.type;
-            const deviceIdent = `${type} - ${name}`;
-            let currentDeviceType = firmwareCounterMap.get(deviceIdent);
+            let currentDeviceType = firmwareCounterMap.get(type);
             if (!currentDeviceType) {
-              currentDeviceType = new Map<string, number>();
-              currentDeviceType.set(firmwareIdent, 1);
-              firmwareCounterMap.set(deviceIdent, currentDeviceType);
+              currentDeviceType = new Map<string, Map<string, number>>();
+              const currentFirmwareName = new Map<string, number>();
+              currentFirmwareName.set(firmwareIdent, 1);
+              currentDeviceType.set(name, currentFirmwareName);
+              firmwareCounterMap.set(type, currentDeviceType);
             } else {
-              const currentCount = currentDeviceType.get(firmwareIdent);
+              let currentFirmwareName = currentDeviceType.get(name);
+              if (!currentFirmwareName) {
+                currentFirmwareName = new Map<string, number>();
+                currentDeviceType.set(name, currentFirmwareName);
+              }
+              const currentCount = currentFirmwareName.get(firmwareIdent);
               if (!currentCount) {
-                currentDeviceType.set(firmwareIdent, 1);
+                currentFirmwareName.set(firmwareIdent, 1);
               } else {
-                currentDeviceType.set(firmwareIdent, currentCount + 1);
+                currentFirmwareName.set(firmwareIdent, currentCount + 1);
               }
             }
           }
@@ -47,25 +53,35 @@ export class DeviceDetailsService {
     return firmwareCounterMap;
   }
 
-  public async getFirmwareStatisticsOfTenants(clients: Client[]): Promise<Map<string, Map<string, number>>> {
-    const firmwareCounterMap = new Map<string, Map<string, number>>();
+  public async getFirmwareStatisticsOfTenants(
+    clients: Client[]
+  ): Promise<Map<string, Map<string, Map<string, number>>>> {
+    const firmwareCounterMap = new Map<string, Map<string, Map<string, number>>>();
     const promArray = clients.map((client) => this.getFirmwareStatistics(client));
     await Promise.all(promArray).then((resArr) => {
       resArr.forEach((tmp) => {
         tmp.forEach((value, key) => {
           let currentDeviceType = firmwareCounterMap.get(key);
           if (!currentDeviceType) {
-            currentDeviceType = new Map<string, number>();
+            currentDeviceType = new Map<string, Map<string, number>>();
             firmwareCounterMap.set(key, currentDeviceType);
           }
-          value.forEach((entry, key2) => {
-            let currentCount = currentDeviceType.get(key2);
-            if (currentCount) {
-              currentCount = currentCount + entry;
-            } else {
-              currentCount = entry;
+          value.forEach((value2, key2) => {
+            let currentFirmwareName = currentDeviceType.get(key2);
+            if (!currentFirmwareName) {
+              currentFirmwareName = new Map<string, number>();
+              currentDeviceType.set(key2, currentFirmwareName);
             }
-            currentDeviceType.set(key2, currentCount);
+
+            value2.forEach((value3, key3) => {
+              let currentCount = currentFirmwareName.get(key3);
+              if (currentCount) {
+                currentCount = currentCount + value3;
+              } else {
+                currentCount = value3;
+              }
+              currentFirmwareName.set(key3, currentCount);
+            });
           });
         });
       });