diff --git a/webapp/frontend/src/app/core/config/app.config.ts b/webapp/frontend/src/app/core/config/app.config.ts index e996c1c..6dedd42 100644 --- a/webapp/frontend/src/app/core/config/app.config.ts +++ b/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", }; diff --git a/webapp/frontend/src/app/data/mock/summary/data.ts b/webapp/frontend/src/app/data/mock/summary/data.ts index 801497d..e5f39bb 100644 --- a/webapp/frontend/src/app/data/mock/summary/data.ts +++ b/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", diff --git a/webapp/frontend/src/app/layout/common/dashboard-settings/dashboard-settings.component.html b/webapp/frontend/src/app/layout/common/dashboard-settings/dashboard-settings.component.html index dddab9b..773ed26 100644 --- a/webapp/frontend/src/app/layout/common/dashboard-settings/dashboard-settings.component.html +++ b/webapp/frontend/src/app/layout/common/dashboard-settings/dashboard-settings.component.html @@ -2,12 +2,24 @@
-
- +
+ + Display + + Name + Serial ID + UUID + Label + + + + Sort By - - Status + + Status Name + Serial ID + UUID Label @@ -73,5 +85,5 @@ - + diff --git a/webapp/frontend/src/app/layout/common/dashboard-settings/dashboard-settings.component.ts b/webapp/frontend/src/app/layout/common/dashboard-settings/dashboard-settings.component.ts index 4e1529d..dab49f7 100644 --- a/webapp/frontend/src/app/layout/common/dashboard-settings/dashboard-settings.component.ts +++ b/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; + + 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; } diff --git a/webapp/frontend/src/app/modules/dashboard/dashboard.component.ts b/webapp/frontend/src/app/modules/dashboard/dashboard.component.ts index 2fdbf0b..4cc9b0a 100644 --- a/webapp/frontend/src/app/modules/dashboard/dashboard.component.ts +++ b/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; @@ -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 (disk.device_type && disk.device_type != 'scsi' && disk.device_type != 'ata'){ - title.push(disk.device_type) + if(!deviceDisplay) { + // fallback + deviceDisplay = `/dev/${disk.device_name}` } - title.push(disk.model_name) + title.push(deviceDisplay) + if(showModelName){ + title.push(disk.model_name) + } return title.join(' - ') }