Skip to content

Commit

Permalink
using device title pipe to consistently set the device name based on …
Browse files Browse the repository at this point in the history
…configuration setting.

adding device status pipe to set the device status in a more readable way.
  • Loading branch information
AnalogJ committed May 27, 2022
1 parent e1e1d32 commit 4aa1485
Show file tree
Hide file tree
Showing 10 changed files with 113 additions and 72 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
<div class="flex items-center">
<div class="flex flex-col">
<a [routerLink]="'/device/'+ deviceSummary.device.wwn"
class="font-bold text-md text-secondary uppercase tracking-wider">{{deviceTitle(deviceSummary.device)}}</a>
class="font-bold text-md text-secondary uppercase tracking-wider">{{deviceSummary.device | deviceTitle:config.dashboardDisplay}}</a>
<div [ngClass]="classDeviceLastUpdatedOn(deviceSummary)" class="font-medium text-sm" *ngIf="deviceSummary.smart">
Last Updated on {{deviceSummary.smart.collector_date | date:'MMMM dd, yyyy - HH:mm' }}
</div>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down Expand Up @@ -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"
Expand All @@ -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 => {
Expand All @@ -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(' - ')
}
18 changes: 3 additions & 15 deletions webapp/frontend/src/app/modules/dashboard/dashboard.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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){
Expand Down
11 changes: 4 additions & 7 deletions webapp/frontend/src/app/modules/detail/detail.component.html
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@

<div class="flex items-center justify-between w-full my-4 px-4 xs:pr-0">
<div class="mr-6">
<h2 class="m-0">Drive Details</h2>
<h2 class="m-0">Drive Details - {{device | deviceTitle:config.dashboardDisplay}} </h2>
<div class="text-secondary tracking-tight">Dive into S.M.A.R.T data</div>
</div>
<!-- Action buttons -->
Expand Down Expand Up @@ -51,11 +51,8 @@ <h2 class="m-0">Drive Details</h2>

<!-- Card -->
<div class="flex flex-auto w-1/4 p-4 lt-md:w-full">
<treo-card class="flex flex-auto p-4 pt-6 flex-col flex-auto filter-list">
<div class="flex items-center justify-between">
<div class="text-2xl font-semibold leading-tight">/dev/{{device?.device_name}}</div>
</div>
<div class="flex flex-col my-2 grid grid-cols-2">
<treo-card class="flex flex-auto p-4 flex-col flex-auto filter-list">
<div class="flex flex-col grid grid-cols-2">
<div *ngIf="device" class="my-2 col-span-2 lt-md:col-span-1">
<div>
<span class="inline-flex items-center font-bold text-xs px-2 py-2px rounded-full tracking-wide uppercase"
Expand All @@ -64,7 +61,7 @@ <h2 class="m-0">Drive Details</h2>
<span class="w-2 h-2 rounded-full mr-2"
[ngClass]="{'bg-red': device?.device_status != 0,
'bg-green': device?.device_status == 0}"></span>
<span class="pr-2px leading-relaxed whitespace-no-wrap">{{device?.device_status == 0 ? 'passed' : 'failed'}}</span>
<span class="pr-2px leading-relaxed whitespace-no-wrap">{{device?.device_status | deviceStatus}}</span>
</span>
</div>
<div class="text-secondary text-md">Status</div>
Expand Down
10 changes: 5 additions & 5 deletions webapp/frontend/src/app/shared/device-sort.pipe.ts
Original file line number Diff line number Diff line change
@@ -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'
Expand All @@ -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;
Expand All @@ -47,8 +47,8 @@ export class DeviceSortPipe implements PipeTransform {
}


transform(deviceSummaries: Array<unknown>, sortBy = 'status', dashboardDisplay = "name"): Array<unknown> {
let compareFn = undefined
transform(deviceSummaries: Array<unknown>, sortBy = 'status', dashboardDisplay = 'name'): Array<unknown> {
let compareFn: any
switch (sortBy) {
case 'status':
compareFn = this.statusCompareFn
Expand Down
8 changes: 8 additions & 0 deletions webapp/frontend/src/app/shared/device-status.pipe.spec.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
import { DeviceStatusPipe } from './device-status.pipe';

describe('DeviceStatusPipe', () => {
it('create an instance', () => {
const pipe = new DeviceStatusPipe();
expect(pipe).toBeTruthy();
});
});
21 changes: 21 additions & 0 deletions webapp/frontend/src/app/shared/device-status.pipe.ts
Original file line number Diff line number Diff line change
@@ -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'
}

}
8 changes: 8 additions & 0 deletions webapp/frontend/src/app/shared/device-title.pipe.spec.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
import { DeviceTitlePipe } from './device-title.pipe';

describe('DeviceTitlePipe', () => {
it('create an instance', () => {
const pipe = new DeviceTitlePipe();
expect(pipe).toBeTruthy();
});
});
54 changes: 54 additions & 0 deletions webapp/frontend/src/app/shared/device-title.pipe.ts
Original file line number Diff line number Diff line change
@@ -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)
}

}
8 changes: 7 additions & 1 deletion webapp/frontend/src/app/shared/shared.module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -22,6 +26,8 @@ import { TemperaturePipe } from './temperature.pipe';
ReactiveFormsModule,
FileSizePipe,
DeviceSortPipe,
DeviceTitlePipe,
DeviceStatusPipe,
TemperaturePipe
]
})
Expand Down

0 comments on commit 4aa1485

Please sign in to comment.