Sam
600cd153e0
- Add archived to device type & db - Add archive/unarchive handlers to webapp backend - Add archive toggle & styling to webapp frontend
83 lines
5.8 KiB
HTML
83 lines
5.8 KiB
HTML
<div
|
|
[ngClass]="{ 'border-green': deviceStatusForModelWithThreshold(deviceSummary.device, !!deviceSummary.smart, config.metrics.status_threshold) == 'passed',
|
|
'border-red': deviceStatusForModelWithThreshold(deviceSummary.device, !!deviceSummary.smart, config.metrics.status_threshold) == 'failed',
|
|
'text-disabled': deviceSummary.device.archived }"
|
|
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="deviceStatusForModelWithThreshold(deviceSummary.device, !!deviceSummary.smart, config.metrics.status_threshold) == 'passed'"
|
|
[svgIcon]="'heroicons_outline:check-circle'"></mat-icon>
|
|
<mat-icon class="icon-size-96 opacity-12 text-red"
|
|
*ngIf="deviceStatusForModelWithThreshold(deviceSummary.device, !!deviceSummary.smart, config.metrics.status_threshold) == 'failed'"
|
|
[svgIcon]="'heroicons_outline:exclamation-circle'"></mat-icon>
|
|
<mat-icon class="icon-size-96 opacity-12 text-yellow"
|
|
*ngIf="deviceStatusForModelWithThreshold(deviceSummary.device, !!deviceSummary.smart, config.metrics.status_threshold) == 'unknown'"
|
|
[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">{{deviceSummary.device | deviceTitle:config.dashboard_display}}</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">
|
|
<mat-icon *ngIf="deviceSummary.device.archived"
|
|
[svgIcon]="'archive'"></mat-icon>
|
|
<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]="'assessment'"></mat-icon>
|
|
<span>View Details</span>
|
|
</span>
|
|
</a>
|
|
<a mat-menu-item
|
|
(click)="openArchiveDialog()">
|
|
<span class="flex items-center">
|
|
<mat-icon class="icon-size-20 mr-3"
|
|
[svgIcon]="deviceSummary.device.archived ? 'unarchive':'archive'"></mat-icon>
|
|
<span>{{deviceSummary.device.archived ? "Unarchive" : "Archive"}} Device</span>
|
|
</span>
|
|
</a>
|
|
<a mat-menu-item (click)="openDeleteDialog()">
|
|
<span class="flex items-center">
|
|
<mat-icon class="icon-size-20 mr-3"
|
|
[svgIcon]="'delete_forever'"></mat-icon>
|
|
<span>Delete Device</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">{{ deviceStatusForModelWithThreshold(deviceSummary.device, !!deviceSummary.smart, config.metrics.status_threshold) | 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 | temperature:config.temperature_unit:true }}</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:config.file_size_si_units}}</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">{{ deviceSummary.smart?.power_on_hours | deviceHours:config.powered_on_hours_unit:{ 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>
|