fixed UI issues related to deleting (component is now correctly removed from the dashboard device list).

fixes #69

webapp/frontend/src/app/layout/common/dashboard-device/dashboard-device.component.html

@@ -1,4 +1,4 @@
-<div *ngIf="!deleted" [ngClass]="{ 'border-green': deviceSummary.device.device_status == 0 && deviceSummary.smart,
+<div [ngClass]="{ 'border-green': deviceSummary.device.device_status == 0 && deviceSummary.smart,
                                 'border-red': deviceSummary.device.device_status != 0 }"
      class="relative flex flex-col flex-auto p-6 pr-3 pb-3 bg-card rounded border-l-4 shadow-md overflow-hidden">
     <div class="absolute bottom-0 right-0 w-24 h-24 -m-6">

webapp/frontend/src/app/layout/common/dashboard-device/dashboard-device.component.ts

@@ -1,4 +1,4 @@
-import {ChangeDetectorRef, Component, Input, OnInit} from '@angular/core';
+import { Component, Input, Output, OnInit, EventEmitter} from '@angular/core';
 import * as moment from "moment";
 import {takeUntil} from "rxjs/operators";
 import {AppConfig} from "app/core/config/app.config";
@@ -16,7 +16,7 @@ import {DashboardDeviceDeleteDialogComponent} from "app/layout/common/dashboard-
 export class DashboardDeviceComponent implements OnInit {
     @Input() deviceSummary: any;
     @Input() deviceWWN: string;
-    deleted = false;
+    @Output() deviceDeleted = new EventEmitter<string>();
 
     config: AppConfig;
 
@@ -25,7 +25,6 @@ export class DashboardDeviceComponent implements OnInit {
     constructor(
         private _configService: TreoConfigService,
         public dialog: MatDialog,
-        private cdRef: ChangeDetectorRef,
     ) {
         // Set the private defaults
         this._unsubscribeAll = new Subject();
@@ -97,8 +96,9 @@ export class DashboardDeviceComponent implements OnInit {
 
         dialogRef.afterClosed().subscribe(result => {
             console.log('The dialog was closed', result);
-            this.deleted = result.success
+            if(result.success){
-            this.cdRef.detectChanges()
+                this.deviceDeleted.emit(this.deviceWWN)
+            }
         });
     }
 }

webapp/frontend/src/app/modules/dashboard/dashboard.component.html

@@ -51,7 +51,7 @@
             <div class="flex flex-wrap w-full" *ngFor="let hostId of hostGroups | keyvalue">
                 <h3 class="ml-4" *ngIf="hostId.key">{{hostId.key}}</h3>
                 <div class="flex flex-wrap w-full">
-                    <app-dashboard-device class="flex gt-sm:w-1/2 min-w-80 p-4" *ngFor="let deviceSummary of (deviceSummariesForHostGroup(hostId.value) | deviceSort:config.dashboardSort:config.dashboardDisplay )" [deviceWWN]="deviceSummary.device.wwn" [deviceSummary]="deviceSummary"></app-dashboard-device>
+                    <app-dashboard-device (deviceDeleted)="onDeviceDeleted($event)" class="flex gt-sm:w-1/2 min-w-80 p-4" *ngFor="let deviceSummary of (deviceSummariesForHostGroup(hostId.value) | deviceSort:config.dashboardSort:config.dashboardDisplay )" [deviceWWN]="deviceSummary.device.wwn" [deviceSummary]="deviceSummary"></app-dashboard-device>
                 </div>
             </div>
 

webapp/frontend/src/app/modules/dashboard/dashboard.component.ts

@@ -229,8 +229,10 @@ export class DashboardComponent implements OnInit, AfterViewInit, OnDestroy
     deviceSummariesForHostGroup(hostGroupWWNs: string[]) {
         let deviceSummaries = []
         for(let wwn of hostGroupWWNs){
+            if(this.data.data.summary[wwn]){
                 deviceSummaries.push(this.data.data.summary[wwn])
             }
+        }
         return deviceSummaries
     }
 
@@ -242,6 +244,10 @@ export class DashboardComponent implements OnInit, AfterViewInit, OnDestroy
         });
     }
 
+    onDeviceDeleted(wwn: string) {
+        delete this.data.data.summary[wwn] // remove the device from the summary list.
+    }
+
     /*
 
     DURATION_KEY_WEEK    = "week"