Jason Kulatunga
3 years ago
parent
4190f9a633
commit
85fa3b1f8f
@ -0,0 +1,61 @@
|
|||||||
|
<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">
|
||||||
|
<mat-icon class="icon-size-96 opacity-12 text-green"
|
||||||
|
*ngIf="deviceSummary.device.device_status == 0 && deviceSummary.smart"
|
||||||
|
[svgIcon]="'heroicons_outline:check-circle'"></mat-icon>
|
||||||
|
<mat-icon class="icon-size-96 opacity-12 text-red"
|
||||||
|
*ngIf="deviceSummary.device.device_status != 0"
|
||||||
|
[svgIcon]="'heroicons_outline:exclamation-circle'"></mat-icon>
|
||||||
|
<mat-icon class="icon-size-96 opacity-12 text-yellow"
|
||||||
|
*ngIf="!deviceSummary.smart"
|
||||||
|
[svgIcon]="'heroicons_outline:question-mark-circle'"></mat-icon>
|
||||||
|
</div>
|
||||||
|
<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>
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
<div class="ml-auto" *ngIf="deviceSummary.device">
|
||||||
|
<button mat-icon-button
|
||||||
|
[matMenuTriggerFor]="previousStatementMenu">
|
||||||
|
<mat-icon [svgIcon]="'more_vert'"></mat-icon>
|
||||||
|
</button>
|
||||||
|
<mat-menu #previousStatementMenu="matMenu">
|
||||||
|
<a mat-menu-item [routerLink]="'/device/'+ deviceSummary.device.wwn">
|
||||||
|
<span class="flex items-center">
|
||||||
|
<mat-icon class="icon-size-20 mr-3"
|
||||||
|
[svgIcon]="'payment'"></mat-icon>
|
||||||
|
<span>View Details</span>
|
||||||
|
</span>
|
||||||
|
</a>
|
||||||
|
</mat-menu>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-row flex-wrap mt-4 -mx-6">
|
||||||
|
<div class="flex flex-col mx-6 my-3 xs:w-full">
|
||||||
|
<div class="font-semibold text-xs text-hint uppercase tracking-wider leading-none">Status</div>
|
||||||
|
<div class="mt-2 font-medium text-3xl leading-none" *ngIf="deviceSummary.smart?.collector_date; else unknownStatus">{{ deviceStatusString(deviceSummary.device.device_status) | titlecase}}</div>
|
||||||
|
<ng-template #unknownStatus><div class="mt-2 font-medium text-3xl leading-none">No Data</div></ng-template>
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-col mx-6 my-3 xs:w-full">
|
||||||
|
<div class="font-semibold text-xs text-hint uppercase tracking-wider leading-none">Temperature</div>
|
||||||
|
<div class="mt-2 font-medium text-3xl leading-none" *ngIf="deviceSummary.smart?.collector_date; else unknownTemp">{{ deviceSummary.smart?.temp }}°C</div>
|
||||||
|
<ng-template #unknownTemp><div class="mt-2 font-medium text-3xl leading-none">--</div></ng-template>
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-col mx-6 my-3 xs:w-full">
|
||||||
|
<div class="font-semibold text-xs text-hint uppercase tracking-wider leading-none">Capacity</div>
|
||||||
|
<div class="mt-2 font-medium text-3xl leading-none">{{ deviceSummary.device.capacity | fileSize}}</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-col mx-6 my-3 xs:w-full">
|
||||||
|
<div class="font-semibold text-xs text-hint uppercase tracking-wider leading-none">Powered On</div>
|
||||||
|
<div class="mt-2 font-medium text-3xl leading-none" *ngIf="deviceSummary.smart?.power_on_hours; else unknownPoweredOn">{{ humanizeDuration(deviceSummary.smart?.power_on_hours * 60 * 60 * 1000, { round: true, largest: 1, units: ['y', 'd', 'h'] }) }}</div>
|
||||||
|
<ng-template #unknownPoweredOn><div class="mt-2 font-medium text-3xl leading-none">--</div></ng-template>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
@ -0,0 +1,25 @@
|
|||||||
|
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||||
|
|
||||||
|
import { DashboardDeviceComponent } from './dashboard-device.component';
|
||||||
|
|
||||||
|
describe('DashboardDeviceComponent', () => {
|
||||||
|
let component: DashboardDeviceComponent;
|
||||||
|
let fixture: ComponentFixture<DashboardDeviceComponent>;
|
||||||
|
|
||||||
|
beforeEach(async(() => {
|
||||||
|
TestBed.configureTestingModule({
|
||||||
|
declarations: [ DashboardDeviceComponent ]
|
||||||
|
})
|
||||||
|
.compileComponents();
|
||||||
|
}));
|
||||||
|
|
||||||
|
beforeEach(() => {
|
||||||
|
fixture = TestBed.createComponent(DashboardDeviceComponent);
|
||||||
|
component = fixture.componentInstance;
|
||||||
|
fixture.detectChanges();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should create', () => {
|
||||||
|
expect(component).toBeTruthy();
|
||||||
|
});
|
||||||
|
});
|
||||||
@ -0,0 +1,115 @@
|
|||||||
|
import {Component, Input, OnInit} from '@angular/core';
|
||||||
|
import * as moment from "moment";
|
||||||
|
import {takeUntil} from "rxjs/operators";
|
||||||
|
import {AppConfig} from "app/core/config/app.config";
|
||||||
|
import {TreoConfigService} from "@treo/services/config";
|
||||||
|
import {Subject} from "rxjs";
|
||||||
|
import humanizeDuration from 'humanize-duration'
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-dashboard-device',
|
||||||
|
templateUrl: './dashboard-device.component.html',
|
||||||
|
styleUrls: ['./dashboard-device.component.scss']
|
||||||
|
})
|
||||||
|
export class DashboardDeviceComponent implements OnInit {
|
||||||
|
@Input() deviceSummary: any;
|
||||||
|
@Input() deviceWWN: string;
|
||||||
|
|
||||||
|
config: AppConfig;
|
||||||
|
|
||||||
|
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) => {
|
||||||
|
this.config = config;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// -----------------------------------------------------------------------------------------------------
|
||||||
|
// @ Public methods
|
||||||
|
// -----------------------------------------------------------------------------------------------------
|
||||||
|
|
||||||
|
classDeviceLastUpdatedOn(deviceSummary){
|
||||||
|
if (deviceSummary.device.device_status !== 0) {
|
||||||
|
return 'text-red' // if the device has failed, always highlight in red
|
||||||
|
} else if(deviceSummary.device.device_status === 0 && deviceSummary.smart){
|
||||||
|
if(moment().subtract(14, 'd').isBefore(deviceSummary.smart.collector_date)){
|
||||||
|
// this device was updated in the last 2 weeks.
|
||||||
|
return 'text-green'
|
||||||
|
} else if(moment().subtract(1, 'm').isBefore(deviceSummary.smart.collector_date)){
|
||||||
|
// this device was updated in the last month
|
||||||
|
return 'text-yellow'
|
||||||
|
} else{
|
||||||
|
// last updated more than a month ago.
|
||||||
|
return 'text-red'
|
||||||
|
}
|
||||||
|
|
||||||
|
} else {
|
||||||
|
return ''
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
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"
|
||||||
|
} else {
|
||||||
|
return "failed"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
readonly humanizeDuration = humanizeDuration;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
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(' - ')
|
||||||
|
}
|
||||||
@ -0,0 +1,52 @@
|
|||||||
|
import { NgModule } from '@angular/core';
|
||||||
|
import { RouterModule } from '@angular/router';
|
||||||
|
import { Overlay } from '@angular/cdk/overlay';
|
||||||
|
import { MAT_AUTOCOMPLETE_SCROLL_STRATEGY, MatAutocompleteModule } from '@angular/material/autocomplete';
|
||||||
|
import { MatButtonModule } from '@angular/material/button';
|
||||||
|
import { MatSelectModule } from '@angular/material/select';
|
||||||
|
import { MatFormFieldModule } from '@angular/material/form-field';
|
||||||
|
import { MatIconModule } from '@angular/material/icon';
|
||||||
|
import { MatInputModule } from '@angular/material/input';
|
||||||
|
import { SharedModule } from 'app/shared/shared.module';
|
||||||
|
import {DashboardDeviceComponent} from 'app/layout/common/dashboard-device/dashboard-device.component'
|
||||||
|
import { MatDialogModule } from "@angular/material/dialog";
|
||||||
|
import { MatButtonToggleModule} from "@angular/material/button-toggle";
|
||||||
|
import {MatTabsModule} from "@angular/material/tabs";
|
||||||
|
import {MatSliderModule} from "@angular/material/slider";
|
||||||
|
import {MatSlideToggleModule} from "@angular/material/slide-toggle";
|
||||||
|
import {MatTooltipModule} from "@angular/material/tooltip";
|
||||||
|
import {dashboardRoutes} from "../../../modules/dashboard/dashboard.routing";
|
||||||
|
import {MatDividerModule} from "@angular/material/divider";
|
||||||
|
import {MatMenuModule} from "@angular/material/menu";
|
||||||
|
import {MatProgressBarModule} from "@angular/material/progress-bar";
|
||||||
|
import {MatSortModule} from "@angular/material/sort";
|
||||||
|
import {MatTableModule} from "@angular/material/table";
|
||||||
|
import {NgApexchartsModule} from "ng-apexcharts";
|
||||||
|
import {DashboardSettingsModule} from "../dashboard-settings/dashboard-settings.module";
|
||||||
|
|
||||||
|
@NgModule({
|
||||||
|
declarations: [
|
||||||
|
DashboardDeviceComponent
|
||||||
|
],
|
||||||
|
imports : [
|
||||||
|
RouterModule.forChild([]),
|
||||||
|
RouterModule.forChild(dashboardRoutes),
|
||||||
|
MatButtonModule,
|
||||||
|
MatDividerModule,
|
||||||
|
MatTooltipModule,
|
||||||
|
MatIconModule,
|
||||||
|
MatMenuModule,
|
||||||
|
MatProgressBarModule,
|
||||||
|
MatSortModule,
|
||||||
|
MatTableModule,
|
||||||
|
NgApexchartsModule,
|
||||||
|
SharedModule,
|
||||||
|
],
|
||||||
|
exports : [
|
||||||
|
DashboardDeviceComponent,
|
||||||
|
],
|
||||||
|
providers : []
|
||||||
|
})
|
||||||
|
export class DashboardDeviceModule
|
||||||
|
{
|
||||||
|
}
|
||||||
Loading…
Reference in new issue