You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
119 lines
6.2 KiB
119 lines
6.2 KiB
|
|
<div *ngIf="summaryData; else emptyDashboard">
|
|
<div class="flex flex-col flex-auto w-full p-8 xs:p-2">
|
|
|
|
<div class="flex flex-wrap w-full">
|
|
|
|
<div class="flex items-center justify-between w-full my-4 px-4 xs:pr-0">
|
|
<div class="mr-6">
|
|
<h2 class="m-0">Dashboard</h2>
|
|
<div class="text-secondary tracking-tight">Drive health at a glance</div>
|
|
</div>
|
|
<!-- Action buttons -->
|
|
<div class="flex items-center">
|
|
<button matTooltip="not yet implemented" class="xs:hidden" mat-stroked-button>
|
|
<mat-icon class="icon-size-20"
|
|
[svgIcon]="'save'"></mat-icon>
|
|
<span class="ml-2">Export</span>
|
|
</button>
|
|
<button class="ml-2 xs:hidden"
|
|
(click)="openDialog()"
|
|
mat-stroked-button>
|
|
<mat-icon class="icon-size-20 rotate-90 mirror"
|
|
[svgIcon]="'tune'"></mat-icon>
|
|
<span class="ml-2">Settings</span>
|
|
</button>
|
|
|
|
<!-- Actions menu (visible on xs) -->
|
|
<div class="hidden xs:flex">
|
|
<button [matMenuTriggerFor]="actionsMenu"
|
|
mat-icon-button>
|
|
<mat-icon [svgIcon]="'more_vert'"></mat-icon>
|
|
</button>
|
|
<mat-menu #actionsMenu="matMenu">
|
|
<button mat-menu-item
|
|
matTooltip="not yet implemented">
|
|
<mat-icon class="icon-size-20"
|
|
[svgIcon]="'save'"></mat-icon>
|
|
<span class="ml-2">Export</span>
|
|
</button>
|
|
<button mat-menu-item (click)="openDialog()">
|
|
<mat-icon class="icon-size-20 rotate-90 mirror"
|
|
[svgIcon]="'tune'"></mat-icon>
|
|
<span class="ml-2">Settings</span>
|
|
</button>
|
|
</mat-menu>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="flex flex-wrap w-full" *ngFor="let hostId of hostGroups | keyvalue">
|
|
<h3 class="ml-4" *ngIf="hostId.key">{{hostId.key}}</h3>
|
|
<div class="flex flex-wrap w-full">
|
|
<app-dashboard-device (deviceDeleted)="onDeviceDeleted($event)"
|
|
class="flex gt-sm:w-1/2 min-w-80 p-4"
|
|
*ngFor="let deviceSummary of (deviceSummariesForHostGroup(hostId.value) | deviceSort:config.dashboard_sort:config.dashboard_display )"
|
|
[deviceWWN]="deviceSummary.device.wwn"
|
|
[deviceSummary]="deviceSummary"></app-dashboard-device>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!-- Drive Temperatures -->
|
|
<div class="flex flex-auto w-full min-w-80 h-90 p-4">
|
|
<div class="flex flex-col flex-auto bg-card shadow-md rounded overflow-hidden">
|
|
<div class="flex flex-col p-6 pr-4 pb-4">
|
|
<div class="flex items-center justify-between">
|
|
<div class="flex flex-col">
|
|
<div class="font-bold text-md text-secondary uppercase tracking-wider mr-4">Temperature</div>
|
|
<div class="text-sm text-hint font-medium">Temperature history for each device </div>
|
|
</div>
|
|
<div>
|
|
<button class="h-8 min-h-8 px-2"
|
|
mat-button
|
|
[matMenuTriggerFor]="tempRangeMenu">
|
|
<span class="font-medium text-sm text-hint">{{tempDurationKey}}</span>
|
|
</button>
|
|
<mat-menu #tempRangeMenu="matMenu">
|
|
<button (click)="changeSummaryTempDuration('forever')" mat-menu-item>forever</button>
|
|
<button (click)="changeSummaryTempDuration('year')" mat-menu-item>year</button>
|
|
<button (click)="changeSummaryTempDuration('month')" mat-menu-item>month</button>
|
|
<button (click)="changeSummaryTempDuration('week')" mat-menu-item>week</button>
|
|
</mat-menu>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="flex flex-col flex-auto">
|
|
<apx-chart #tempChart *ngIf="temperatureOptions" class="flex-auto w-full h-full"
|
|
[chart]="temperatureOptions.chart"
|
|
[colors]="temperatureOptions.colors"
|
|
[fill]="temperatureOptions.fill"
|
|
[series]="temperatureOptions.series"
|
|
[stroke]="temperatureOptions.stroke"
|
|
[tooltip]="temperatureOptions.tooltip"
|
|
[xaxis]="temperatureOptions.xaxis"></apx-chart>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<ng-template #emptyDashboard>
|
|
<div class="dashboard-placeholder content-layout fullwidth-basic-content-scroll">
|
|
<img class="image"
|
|
src="assets/images/dashboard-placeholder.png">
|
|
|
|
<h1>No Devices Detected!</h1>
|
|
<p style="max-width:700px;">Scrutiny includes a Collector agent that you must run on all of your systems. The Collector is responsible for detecting connected storage devices and collecting S.M.A.R.T data on a configurable schedule.</p>
|
|
|
|
<p><br/>You can trigger the Collector manually by running the following command, then refreshing this page:</p>
|
|
<code>scrutiny-collector-metrics run</code>
|
|
|
|
</div>
|
|
</ng-template>
|