Jason Kulatunga
94594db20a
update the frontend to persist settings to the database. Using ScrutinyConfigService instead of TreoConfigService. Using snake case settings in frontend. Make sure we're using AppConfig type where possible.
119 lines
6.2 KiB
HTML
119 lines
6.2 KiB
HTML
|
|
<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>
|