started working on Dashboard UI sorting and naming

webapp/frontend/src/app/core/config/app.config.ts

@@ -11,6 +11,11 @@ export interface AppConfig
 {
     theme: Theme;
     layout: Layout;
+
+    // Dashboard options
+    dashboardDisplay: string;
+    dashboardSort: string;
+
 }
 
 /**
@@ -23,6 +28,9 @@ export interface AppConfig
  */
 export const appConfig: AppConfig = {
     theme : "light",
-    layout: "material"
+    layout: "material",
+
+    dashboardDisplay: "name",
+    dashboardSort: "status",
 };
 

webapp/frontend/src/app/data/mock/summary/data.ts

@@ -11,6 +11,9 @@ export const summary = {
                     "DeletedAt": null,
                     "wwn": "0x5000c500673e6b5f",
                     "device_name": "sdg",
+                    "device_label": "14TB-WD-DRIVE2",
+                    "device_uuid": "",
+                    "device_serial_id": "ata-ST6000DX000-1H217Z-Z4DXXXXX",
                     "manufacturer": "ATA",
                     "model_name": "ST6000DX000-1H217Z",
                     "interface_type": "SCSI",
@@ -35,6 +38,9 @@ export const summary = {
                     "DeletedAt": null,
                     "wwn": "0x5000cca252c859cc",
                     "device_name": "sdd",
+                    "device_label": "14TB-WD-DRIVE1",
+                    "device_uuid": "806cf4bc-d160-4d96-8ee9-3ab7cf2a2e1f",
+                    "device_serial_id": "ata-WDC_WD80EFAX-68LHPN0-7SGLXXXXX",
                     "manufacturer": "ATA",
                     "model_name": "WDC_WD80EFAX-68LHPN0",
                     "interface_type": "SCSI",
@@ -68,6 +74,9 @@ export const summary = {
                     "DeletedAt": null,
                     "wwn": "0x5000cca264eb01d7",
                     "device_name": "sdb",
+                    "device_label": "14TB-WD-DRIVE5",
+                    "device_uuid": "8125ec6d-a7e4-4950-ac84-72d6a4d67128",
+                    "device_serial_id": "ata-WDC_WD140EDFZ-11A0VA0-9RK1XXXXX",
                     "manufacturer": "ATA",
                     "model_name": "WDC_WD140EDFZ-11A0VA0",
                     "interface_type": "SCSI",
@@ -101,6 +110,9 @@ export const summary = {
                     "DeletedAt": null,
                     "wwn": "0x5000cca264ebc248",
                     "device_name": "sde",
+                    "device_label": "14TB-WD-DRIVE3",
+                    "device_uuid": "9eb60cde-d6d0-4172-b520-b241a6a5477f",
+                    "device_serial_id": "ata-WDC_WD140EDFZ-11A0VA0-9RK3XXXXX",
                     "manufacturer": "ATA",
                     "model_name": "WDC_WD140EDFZ-11A0VA0",
                     "interface_type": "SCSI",
@@ -125,6 +137,9 @@ export const summary = {
                     "DeletedAt": null,
                     "wwn": "0x5000cca264ec3183",
                     "device_name": "sdc",
+                    "device_label": "14TB-WD-DRIVE6",
+                    "device_uuid": "e1378723-7861-49b9-8e01-0bd063f0ecdd",
+                    "device_serial_id": "ata-WDC_WD140EDFZ-11A0VA0-9RK4XXXXX",
                     "manufacturer": "ATA",
                     "model_name": "WDC_WD140EDFZ-11A0VA0",
                     "interface_type": "SCSI",
@@ -542,6 +557,9 @@ export const summary = {
                     "DeletedAt": null,
                     "wwn": "0x50014ee20b2a72a9",
                     "device_name": "sdf",
+                    "device_label": "8.0TB-WD-4",
+                    "device_uuid": "fc684dcc-aa2f-44f3-a958-d302dc7dd46d",
+                    "device_serial_id": "ata-WDC_WD60EFRX-68MYMN1-WXL1HXXXXX",
                     "manufacturer": "ATA",
                     "model_name": "WDC_WD60EFRX-68MYMN1",
                     "interface_type": "SCSI",
@@ -566,6 +584,9 @@ export const summary = {
                     "DeletedAt": null,
                     "wwn": "0x5002538e40a22954",
                     "device_name": "sda",
+                    "device_label": "",
+                    "device_uuid": "",
+                    "device_serial_id": "ata-Samsung_SSD_860_EVO_500GB-S3YZNB0KBXXXXXX",
                     "manufacturer": "ATA",
                     "model_name": "Samsung_SSD_860_EVO_500GB",
                     "interface_type": "SCSI",

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

@@ -2,12 +2,24 @@
 <mat-dialog-content class="mat-typography">
 
     <form class="flex flex-col p-8 pb-0 overflow-hidden">
-        <div class="flex flex-col gt-xs:flex-row">
+        <div class="flex flex-col mt-5 gt-md:flex-row">
-            <mat-form-field class="flex-auto gt-xs:pr-3">
+            <mat-form-field class="flex-auto gt-xs:pr-3 gt-md:pr-3">
+                <mat-label>Display</mat-label>
+                <mat-select [value]="dashboardDisplay">
+                    <mat-option value="name">Name</mat-option>
+                    <mat-option value="serial_id">Serial ID</mat-option>
+                    <mat-option value="uuid">UUID</mat-option>
+                    <mat-option value="label">Label</mat-option>
+                </mat-select>
+            </mat-form-field>
+
+            <mat-form-field class="flex-auto gt-xs:pr-3 gt-md:pl-3">
                 <mat-label>Sort By</mat-label>
-                <mat-select [value]="'status'">
+                <mat-select [value]="dashboardSort">
                     <mat-option value="status">Status</mat-option>
                     <mat-option value="name" disabled>Name</mat-option>
+                    <mat-option value="serial_id" disabled>Serial ID</mat-option>
+                    <mat-option value="uuid" disabled>UUID</mat-option>
                     <mat-option value="label" disabled>Label</mat-option>
                 </mat-select>
             </mat-form-field>
@@ -73,5 +85,5 @@
 </mat-dialog-content>
 <mat-dialog-actions align="end">
     <button mat-button mat-dialog-close>Cancel</button>
-    <button mat-button matTooltip="not yet implemented" [mat-dialog-close]="true" cdkFocusInitial>Save</button>
+    <button mat-button mat-dialog-close (click)="saveSettings()" cdkFocusInitial>Save</button>
 </mat-dialog-actions>

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

@@ -1,4 +1,8 @@
 import { Component, OnInit } from '@angular/core';
+import {AppConfig} from 'app/core/config/app.config';
+import { TreoConfigService } from '@treo/services/config';
+import {Subject} from "rxjs";
+import {takeUntil} from "rxjs/operators";
 
 @Component({
   selector: 'app-dashboard-settings',
@@ -7,10 +11,39 @@ import { Component, OnInit } from '@angular/core';
 })
 export class DashboardSettingsComponent implements OnInit {
 
-  constructor() { }
+    dashboardDisplay: string;
+    dashboardSort: string;
+
+    // Private
+    private _unsubscribeAll: Subject<any>;
+
+    constructor(
+        private _configService: TreoConfigService,
+    ) {
+        // Set the private defaults
+        this._unsubscribeAll = new Subject();
+    }
 
   ngOnInit(): void {
+      // Subscribe to config changes
+      this._configService.config$
+          .pipe(takeUntil(this._unsubscribeAll))
+          .subscribe((config: AppConfig) => {
+
+              // Store the config
+              this.dashboardDisplay = config.dashboardDisplay;
+              this.dashboardSort = config.dashboardSort;
+
+          });
   }
+
+  saveSettings(): void {
+        this._configService.config = {
+            dashboardDisplay: this.dashboardDisplay,
+            dashboardSort: this.dashboardSort
+        }
+  }
+
     formatLabel(value: number) {
         return value;
     }

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

@@ -5,10 +5,12 @@ import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 import { ApexOptions } from 'ng-apexcharts';
 import { DashboardService } from 'app/modules/dashboard/dashboard.service';
-import * as moment from "moment";
+import * as moment from 'moment';
 import {MatDialog} from '@angular/material/dialog';
 import { DashboardSettingsComponent } from 'app/layout/common/dashboard-settings/dashboard-settings.component';
 import  humanizeDuration from 'humanize-duration'
+import {AppConfig} from 'app/core/config/app.config';
+import { TreoConfigService } from '@treo/services/config';
 
 @Component({
     selector       : 'example',
@@ -21,6 +23,7 @@ export class DashboardComponent implements OnInit, AfterViewInit, OnDestroy
 {
     data: any;
     temperatureOptions: ApexOptions;
+    config: AppConfig;
 
     // Private
     private _unsubscribeAll: Subject<any>;
@@ -32,7 +35,8 @@ export class DashboardComponent implements OnInit, AfterViewInit, OnDestroy
      */
     constructor(
         private _smartService: DashboardService,
-        public dialog: MatDialog
+        public dialog: MatDialog,
+        private _configService: TreoConfigService,
     )
     {
         // Set the private defaults
@@ -49,6 +53,16 @@ export class DashboardComponent implements OnInit, AfterViewInit, OnDestroy
      */
     ngOnInit(): void
     {
+        // Subscribe to config changes
+        this._configService.config$
+            .pipe(takeUntil(this._unsubscribeAll))
+            .subscribe((config: AppConfig) => {
+                console.log('Configuration updated...')
+                // Store the config
+                this.config = config;
+
+            });
+
         // Get the data
         this._smartService.data$
             .pipe(takeUntil(this._unsubscribeAll))
@@ -180,16 +194,38 @@ export class DashboardComponent implements OnInit, AfterViewInit, OnDestroy
 
     deviceTitle(disk){
         let title = []
-
+        let showModelName = false
         if (disk.host_id) title.push(disk.host_id)
 
-        title.push(`/dev/${disk.device_name}`)
+        let deviceDisplay = ''
-
+        switch(this.config.dashboardDisplay){
+            case 'name':
+                deviceDisplay = `/dev/${disk.device_name}`
                 if (disk.device_type && disk.device_type != 'scsi' && disk.device_type != 'ata'){
                     title.push(disk.device_type)
                 }
+                showModelName = true
 
+                break;
+            case 'serial_id':
+                deviceDisplay = disk.device_serial_id
+                break;
+            case 'uuid':
+                deviceDisplay = disk.device_uuid
+                break;
+            case 'label':
+                deviceDisplay = disk.label || disk.device_label
+        }
+
+        if(!deviceDisplay) {
+            // fallback
+            deviceDisplay = `/dev/${disk.device_name}`
+        }
+
+        title.push(deviceDisplay)
+        if(showModelName){
             title.push(disk.model_name)
+        }
 
         return title.join(' - ')
     }