diff --git a/webapp/frontend/src/app/layout/common/dashboard-device/dashboard-device.component.html b/webapp/frontend/src/app/layout/common/dashboard-device/dashboard-device.component.html index d54a64c..e7b0ffd 100644 --- a/webapp/frontend/src/app/layout/common/dashboard-device/dashboard-device.component.html +++ b/webapp/frontend/src/app/layout/common/dashboard-device/dashboard-device.component.html @@ -15,7 +15,7 @@
{{deviceTitle(deviceSummary.device)}} + class="font-bold text-md text-secondary uppercase tracking-wider">{{deviceSummary.device | deviceTitle:config.dashboardDisplay}}
Last Updated on {{deviceSummary.smart.collector_date | date:'MMMM dd, yyyy - HH:mm' }}
diff --git a/webapp/frontend/src/app/layout/common/dashboard-device/dashboard-device.component.ts b/webapp/frontend/src/app/layout/common/dashboard-device/dashboard-device.component.ts index 5639eb8..7f18083 100644 --- a/webapp/frontend/src/app/layout/common/dashboard-device/dashboard-device.component.ts +++ b/webapp/frontend/src/app/layout/common/dashboard-device/dashboard-device.component.ts @@ -7,6 +7,7 @@ import {Subject} from "rxjs"; import humanizeDuration from 'humanize-duration' import {MatDialog} from '@angular/material/dialog'; import {DashboardDeviceDeleteDialogComponent} from "app/layout/common/dashboard-device-delete-dialog/dashboard-device-delete-dialog.component"; +import {DeviceTitlePipe} from "app/shared/device-title.pipe"; @Component({ selector: 'app-dashboard-device', @@ -64,18 +65,6 @@ export class DashboardDeviceComponent implements OnInit { } } - deviceTitle(disk){ - - console.log(`Displaying Device ${disk.wwn} with: ${this.config.dashboardDisplay}`) - let titleParts = [] - if (disk.host_id) titleParts.push(disk.host_id) - - //add device identifier (fallback to generated device name) - titleParts.push(deviceDisplayTitle(disk, this.config.dashboardDisplay) || deviceDisplayTitle(disk, 'name')) - - return titleParts.join(' - ') - } - deviceStatusString(deviceStatus){ if(deviceStatus == 0){ return "passed" @@ -91,7 +80,7 @@ export class DashboardDeviceComponent implements OnInit { openDeleteDialog(): void { const dialogRef = this.dialog.open(DashboardDeviceDeleteDialogComponent, { // width: '250px', - data: {wwn: this.deviceWWN, title: this.deviceTitle(this.deviceSummary.device)} + data: {wwn: this.deviceWWN, title: DeviceTitlePipe.deviceTitleWithFallback(this.deviceSummary.device, this.config.dashboardDisplay)} }); dialogRef.afterClosed().subscribe(result => { @@ -102,33 +91,3 @@ export class DashboardDeviceComponent implements OnInit { }); } } - -export function deviceDisplayTitle(disk, titleType: string){ - let titleParts = [] - switch(titleType){ - case 'name': - titleParts.push(`/dev/${disk.device_name}`) - if (disk.device_type && disk.device_type != 'scsi' && disk.device_type != 'ata'){ - titleParts.push(disk.device_type) - } - titleParts.push(disk.model_name) - - break; - case 'serial_id': - if(!disk.device_serial_id) return '' - titleParts.push(`/by-id/${disk.device_serial_id}`) - break; - case 'uuid': - if(!disk.device_uuid) return '' - titleParts.push(`/by-uuid/${disk.device_uuid}`) - break; - case 'label': - if(disk.label){ - titleParts.push(disk.label) - } else if(disk.device_label){ - titleParts.push(`/by-label/${disk.device_label}`) - } - break; - } - return titleParts.join(' - ') -} diff --git a/webapp/frontend/src/app/modules/dashboard/dashboard.component.ts b/webapp/frontend/src/app/modules/dashboard/dashboard.component.ts index 3a9b246..f501f9f 100644 --- a/webapp/frontend/src/app/modules/dashboard/dashboard.component.ts +++ b/webapp/frontend/src/app/modules/dashboard/dashboard.component.ts @@ -7,11 +7,11 @@ import {ApexOptions, ChartComponent} from 'ng-apexcharts'; import { DashboardService } from 'app/modules/dashboard/dashboard.service'; import {MatDialog} from '@angular/material/dialog'; import { DashboardSettingsComponent } from 'app/layout/common/dashboard-settings/dashboard-settings.component'; -import {deviceDisplayTitle} from "app/layout/common/dashboard-device/dashboard-device.component"; import {AppConfig} from "app/core/config/app.config"; import {TreoConfigService} from "@treo/services/config"; import {Router} from "@angular/router"; -import {TemperaturePipe} from "../../shared/temperature.pipe"; +import {TemperaturePipe} from "app/shared/temperature.pipe"; +import {DeviceTitlePipe} from "app/shared/device-title.pipe"; @Component({ selector : 'example', @@ -140,7 +140,7 @@ export class DashboardComponent implements OnInit, AfterViewInit, OnDestroy continue } - let deviceName = this.deviceTitle(deviceSummary.device) + let deviceName = DeviceTitlePipe.deviceTitleWithFallback(deviceSummary.device, this.config.dashboardDisplay) var deviceSeriesMetadata = { name: deviceName, @@ -216,18 +216,6 @@ export class DashboardComponent implements OnInit, AfterViewInit, OnDestroy // @ Public methods // ----------------------------------------------------------------------------------------------------- - deviceTitle(disk){ - - console.log(`Displaying Device ${disk.wwn} with: ${this.config.dashboardDisplay}`) - let titleParts = [] - if (disk.host_id) titleParts.push(disk.host_id) - - //add device identifier (fallback to generated device name) - titleParts.push(deviceDisplayTitle(disk, this.config.dashboardDisplay) || deviceDisplayTitle(disk, 'name')) - - return titleParts.join(' - ') - } - deviceSummariesForHostGroup(hostGroupWWNs: string[]) { let deviceSummaries = [] for(let wwn of hostGroupWWNs){ diff --git a/webapp/frontend/src/app/modules/detail/detail.component.html b/webapp/frontend/src/app/modules/detail/detail.component.html index 72da181..e5e7d9a 100644 --- a/webapp/frontend/src/app/modules/detail/detail.component.html +++ b/webapp/frontend/src/app/modules/detail/detail.component.html @@ -4,7 +4,7 @@
-

Drive Details

+

Drive Details - {{device | deviceTitle:config.dashboardDisplay}}

Dive into S.M.A.R.T data
@@ -51,11 +51,8 @@
- -
-
/dev/{{device?.device_name}}
-
-
+ +
- {{device?.device_status == 0 ? 'passed' : 'failed'}} + {{device?.device_status | deviceStatus}}
Status
diff --git a/webapp/frontend/src/app/shared/device-sort.pipe.ts b/webapp/frontend/src/app/shared/device-sort.pipe.ts index b04a0bf..74cdc96 100644 --- a/webapp/frontend/src/app/shared/device-sort.pipe.ts +++ b/webapp/frontend/src/app/shared/device-sort.pipe.ts @@ -1,5 +1,5 @@ import { Pipe, PipeTransform } from '@angular/core'; -import {deviceDisplayTitle} from "app/layout/common/dashboard-device/dashboard-device.component"; +import {DeviceTitlePipe} from "./device-title.pipe"; @Pipe({ name: 'deviceSort' @@ -26,8 +26,8 @@ export class DeviceSortPipe implements PipeTransform { titleCompareFn(dashboardDisplay: string) { return function (a: any, b: any){ let _dashboardDisplay = dashboardDisplay - let left = deviceDisplayTitle(a.device, _dashboardDisplay) || deviceDisplayTitle(a.device, 'name') - let right = deviceDisplayTitle(b.device, _dashboardDisplay) || deviceDisplayTitle(b.device, 'name') + let left = DeviceTitlePipe.deviceTitleForType(a.device, _dashboardDisplay) || DeviceTitlePipe.deviceTitleForType(a.device, 'name') + let right = DeviceTitlePipe.deviceTitleForType(b.device, _dashboardDisplay) || DeviceTitlePipe.deviceTitleForType(b.device, 'name') if( left < right ) return -1; @@ -47,8 +47,8 @@ export class DeviceSortPipe implements PipeTransform { } - transform(deviceSummaries: Array, sortBy = 'status', dashboardDisplay = "name"): Array { - let compareFn = undefined + transform(deviceSummaries: Array, sortBy = 'status', dashboardDisplay = 'name'): Array { + let compareFn: any switch (sortBy) { case 'status': compareFn = this.statusCompareFn diff --git a/webapp/frontend/src/app/shared/device-status.pipe.spec.ts b/webapp/frontend/src/app/shared/device-status.pipe.spec.ts new file mode 100644 index 0000000..23bc958 --- /dev/null +++ b/webapp/frontend/src/app/shared/device-status.pipe.spec.ts @@ -0,0 +1,8 @@ +import { DeviceStatusPipe } from './device-status.pipe'; + +describe('DeviceStatusPipe', () => { + it('create an instance', () => { + const pipe = new DeviceStatusPipe(); + expect(pipe).toBeTruthy(); + }); +}); diff --git a/webapp/frontend/src/app/shared/device-status.pipe.ts b/webapp/frontend/src/app/shared/device-status.pipe.ts new file mode 100644 index 0000000..42261c6 --- /dev/null +++ b/webapp/frontend/src/app/shared/device-status.pipe.ts @@ -0,0 +1,21 @@ +import { Pipe, PipeTransform } from '@angular/core'; + +@Pipe({ + name: 'deviceStatus' +}) +export class DeviceStatusPipe implements PipeTransform { + + transform(deviceStatusFlag: number): string { + if(deviceStatusFlag === 0){ + return 'passed' + } else if(deviceStatusFlag === 3){ + return 'failed: both' + } else if(deviceStatusFlag === 2) { + return 'failed: scrutiny' + } else if(deviceStatusFlag === 1) { + return 'failed: smart' + } + return 'unknown' + } + +} diff --git a/webapp/frontend/src/app/shared/device-title.pipe.spec.ts b/webapp/frontend/src/app/shared/device-title.pipe.spec.ts new file mode 100644 index 0000000..1d64103 --- /dev/null +++ b/webapp/frontend/src/app/shared/device-title.pipe.spec.ts @@ -0,0 +1,8 @@ +import { DeviceTitlePipe } from './device-title.pipe'; + +describe('DeviceTitlePipe', () => { + it('create an instance', () => { + const pipe = new DeviceTitlePipe(); + expect(pipe).toBeTruthy(); + }); +}); diff --git a/webapp/frontend/src/app/shared/device-title.pipe.ts b/webapp/frontend/src/app/shared/device-title.pipe.ts new file mode 100644 index 0000000..1196fb8 --- /dev/null +++ b/webapp/frontend/src/app/shared/device-title.pipe.ts @@ -0,0 +1,54 @@ +import { Pipe, PipeTransform } from '@angular/core'; + +@Pipe({ + name: 'deviceTitle' +}) +export class DeviceTitlePipe implements PipeTransform { + + static deviceTitleForType(device: any, titleType: string): string { + const titleParts = [] + switch(titleType){ + case 'name': + titleParts.push(`/dev/${device.device_name}`) + if (device.device_type && device.device_type !== 'scsi' && device.device_type !== 'ata'){ + titleParts.push(device.device_type) + } + titleParts.push(device.model_name) + + break; + case 'serial_id': + if(!device.device_serial_id) return '' + titleParts.push(`/by-id/${device.device_serial_id}`) + break; + case 'uuid': + if(!device.device_uuid) return '' + titleParts.push(`/by-uuid/${device.device_uuid}`) + break; + case 'label': + if(device.label){ + titleParts.push(device.label) + } else if(device.device_label){ + titleParts.push(`/by-label/${device.device_label}`) + } + break; + } + return titleParts.join(' - ') + } + + static deviceTitleWithFallback(device, titleType: string): string { + console.log(`Displaying Device ${device.wwn} with: ${titleType}`) + const titleParts = [] + if (device.host_id) titleParts.push(device.host_id) + + // add device identifier (fallback to generated device name) + titleParts.push(DeviceTitlePipe.deviceTitleForType(device, titleType) || DeviceTitlePipe.deviceTitleForType(device, 'name')) + + return titleParts.join(' - ') + } + + + transform(device: any, titleType: string = 'name'): string { + return DeviceTitlePipe.deviceTitleWithFallback(device, titleType) + } + +} diff --git a/webapp/frontend/src/app/shared/shared.module.ts b/webapp/frontend/src/app/shared/shared.module.ts index a5357f1..c22fdb2 100644 --- a/webapp/frontend/src/app/shared/shared.module.ts +++ b/webapp/frontend/src/app/shared/shared.module.ts @@ -4,12 +4,16 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import {FileSizePipe} from './file-size.pipe'; import { DeviceSortPipe } from './device-sort.pipe'; import { TemperaturePipe } from './temperature.pipe'; +import { DeviceTitlePipe } from './device-title.pipe'; +import { DeviceStatusPipe } from './device-status.pipe'; @NgModule({ declarations: [ FileSizePipe, DeviceSortPipe, - TemperaturePipe + TemperaturePipe, + DeviceTitlePipe, + DeviceStatusPipe ], imports: [ CommonModule, @@ -22,6 +26,8 @@ import { TemperaturePipe } from './temperature.pipe'; ReactiveFormsModule, FileSizePipe, DeviceSortPipe, + DeviceTitlePipe, + DeviceStatusPipe, TemperaturePipe ] })