frontend, determine the device status by checking against the configured thresholds.

webapp/frontend/src/app/core/config/app.config.ts

@@ -11,17 +11,17 @@ export type DashboardSort = 'status' | 'title' | 'age'
 export type TemperatureUnit = 'celsius' | 'fahrenheit'
 
 
-enum MetricsNotifyLevel {
+export enum MetricsNotifyLevel {
     Warn = 1,
     Fail = 2
 }
 
-enum MetricsStatusFilterAttributes {
+export enum MetricsStatusFilterAttributes {
     All = 0,
     Critical = 1
 }
 
-enum MetricsStatusThreshold {
+export enum MetricsStatusThreshold {
     Smart = 1,
     Scrutiny = 2,
 

webapp/frontend/src/app/layout/common/dashboard-device/dashboard-device.component.html

@@ -1,15 +1,15 @@
-<div [ngClass]="{ 'border-green': deviceSummary.device.device_status == 0 && deviceSummary.smart,
+<div [ngClass]="{ 'border-green': deviceStatusString(deviceSummary) == 'passed',
-                                'border-red': deviceSummary.device.device_status != 0 }"
+                                'border-red': deviceStatusString(deviceSummary) == 'failed' }"
      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"
+                  *ngIf="deviceStatusString(deviceSummary) == 'passed'"
                   [svgIcon]="'heroicons_outline:check-circle'"></mat-icon>
         <mat-icon class="icon-size-96 opacity-12 text-red"
-                  *ngIf="deviceSummary.device.device_status != 0"
+                  *ngIf="deviceStatusString(deviceSummary) == 'failed'"
                   [svgIcon]="'heroicons_outline:exclamation-circle'"></mat-icon>
         <mat-icon class="icon-size-96 opacity-12 text-yellow"
-                  *ngIf="!deviceSummary.smart"
+                  *ngIf="deviceStatusString(deviceSummary) == 'unknown'"
                   [svgIcon]="'heroicons_outline:question-mark-circle'"></mat-icon>
     </div>
     <div class="flex items-center">
@@ -46,7 +46,8 @@
     <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>
+            <div class="mt-2 font-medium text-3xl leading-none"
+                 *ngIf="deviceSummary.smart?.collector_date; else unknownStatus">{{ deviceStatusString(deviceSummary) | 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">

webapp/frontend/src/app/layout/common/dashboard-device/dashboard-device.component.ts

@@ -68,7 +68,15 @@ export class DashboardDeviceComponent implements OnInit {
         }
     }
 
-    deviceStatusString(deviceStatus: number): string {
+    deviceStatusString(deviceSummary: DeviceSummaryModel): string {
+        // no smart data, so treat the device status as unknown
+        if (!deviceSummary.smart) {
+            return 'unknown'
+        }
+
+        // determine the device status, by comparing it against the allowed threshold
+        // tslint:disable-next-line:no-bitwise
+        const deviceStatus = deviceSummary.device.device_status & this.config.metrics.status_threshold
         if (deviceStatus === 0) {
             return 'passed'
         } else {

webapp/frontend/src/app/layout/common/dashboard-settings/dashboard-settings.component.html

@@ -43,63 +43,27 @@
                     <mat-option value="fahrenheit">Fahrenheit</mat-option>
                 </mat-select>
             </mat-form-field>
-
         </div>
 
-        <div class="flex">
+        <div class="flex flex-col mt-5 gt-md:flex-row">
-            <mat-tab-group mat-align-tabs="start">
+            <mat-form-field class="flex-auto gt-xs:pr-3 gt-md:pr-3">
-                <mat-tab label="Ata">
+                <mat-label>Device Status - Filter Attributes</mat-label>
+                <mat-select [(ngModel)]=statusFilterAttributes>
+                    <mat-option [value]=0>All</mat-option>
+                    <mat-option [value]=1>Critical</mat-option>
+                </mat-select>
+            </mat-form-field>
+        </div>
 
-                    <div matTooltip="not yet implemented" class="flex flex-col mt-5 gt-md:flex-row">
+        <div class="flex flex-col mt-5 gt-md:flex-row">
-                        <mat-form-field class="flex-auto gt-md:pr-3">
+            <mat-form-field class="flex-auto gt-xs:pr-3 gt-md:pr-3">
-                            <mat-label class="text-hint">Critical Error Threshold</mat-label>
+                <mat-label>Device Status - Thresholds</mat-label>
-                            <input disabled matInput [value]="'10%'">
+                <mat-select [(ngModel)]=statusThreshold>
-                        </mat-form-field>
+                    <mat-option [value]=1>Smart</mat-option>
-                        <mat-form-field class="flex-auto gt-md:pl-3">
+                    <mat-option [value]=2>Scrutiny</mat-option>
-                            <mat-label class="text-hint">Critical Warning Threshold</mat-label>
+                    <mat-option [value]=3>Both</mat-option>
-                            <input disabled matInput>
+                </mat-select>
-                        </mat-form-field>
+            </mat-form-field>
-                    </div>
-
-                    <div matTooltip="not yet implemented" class="flex flex-col gt-md:flex-row">
-                        <mat-form-field class="flex-auto gt-md:pr-3">
-                            <mat-label class="text-hint">Error Threshold</mat-label>
-                            <input disabled matInput [value]="'20%'">
-                        </mat-form-field>
-                        <mat-form-field class="flex-auto gt-md:pl-3">
-                            <mat-label class="text-hint">Warning Threshold</mat-label>
-                            <input disabled matInput [value]="'10%'">
-                        </mat-form-field>
-                    </div>
-
-                </mat-tab>
-                <mat-tab label="NVMe">
-
-                    <div matTooltip="not yet implemented" class="flex flex-col mt-5 gt-md:flex-row">
-                        <mat-form-field class="flex-auto gt-md:pr-3">
-                            <mat-label class="text-hint">Critical Error Threshold</mat-label>
-                            <input disabled matInput [value]="'enabled'">
-                        </mat-form-field>
-                        <mat-form-field class="flex-auto gt-md:pl-3">
-                            <mat-label class="text-hint">Critical Warning Threshold</mat-label>
-                            <input disabled matInput>
-                        </mat-form-field>
-                    </div>
-
-                </mat-tab>
-                <mat-tab label="SCSI">
-                    <div matTooltip="not yet implemented" class="flex flex-col mt-5 gt-md:flex-row">
-                        <mat-form-field class="flex-auto gt-md:pr-3">
-                            <mat-label class="text-hint">Critical Error Threshold</mat-label>
-                            <input disabled matInput [value]="'enabled'">
-                        </mat-form-field>
-                        <mat-form-field class="flex-auto gt-md:pl-3">
-                            <mat-label class="text-hint">Critical Warning Threshold</mat-label>
-                            <input disabled matInput>
-                        </mat-form-field>
-                    </div>
-                </mat-tab>
-            </mat-tab-group>
         </div>
     </div>
 

webapp/frontend/src/app/layout/common/dashboard-settings/dashboard-settings.component.ts

@@ -1,5 +1,13 @@
 import {Component, OnInit} from '@angular/core';
-import {AppConfig, DashboardDisplay, DashboardSort, TemperatureUnit, Theme} from 'app/core/config/app.config';
+import {
+    AppConfig,
+    DashboardDisplay,
+    DashboardSort,
+    MetricsStatusFilterAttributes,
+    MetricsStatusThreshold,
+    TemperatureUnit,
+    Theme
+} from 'app/core/config/app.config';
 import {ScrutinyConfigService} from 'app/core/config/scrutiny-config.service';
 import {Subject} from 'rxjs';
 import {takeUntil} from 'rxjs/operators';
@@ -15,6 +23,8 @@ export class DashboardSettingsComponent implements OnInit {
     dashboardSort: string;
     temperatureUnit: string;
     theme: string;
+    statusThreshold: number;
+    statusFilterAttributes: number;
 
     // Private
     private _unsubscribeAll: Subject<any>;
@@ -38,6 +48,9 @@ export class DashboardSettingsComponent implements OnInit {
                 this.temperatureUnit = config.temperature_unit;
                 this.theme = config.theme;
 
+                this.statusFilterAttributes = config.metrics.status_filter_attributes;
+                this.statusThreshold = config.metrics.status_threshold;
+
             });
 
     }
@@ -47,7 +60,11 @@ export class DashboardSettingsComponent implements OnInit {
             dashboard_display: this.dashboardDisplay as DashboardDisplay,
             dashboard_sort: this.dashboardSort as DashboardSort,
             temperature_unit: this.temperatureUnit as TemperatureUnit,
-            theme: this.theme as Theme
+            theme: this.theme as Theme,
+            metrics: {
+                status_filter_attributes: this.statusFilterAttributes as MetricsStatusFilterAttributes,
+                status_threshold: this.statusThreshold as MetricsStatusThreshold
+            }
         }
         this._configService.config = newSettings
         console.log(`Saved Settings: ${JSON.stringify(newSettings)}`)