on settings save, return the new settings.

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.

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

@@ -15,7 +15,7 @@
     <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.dashboardDisplay}}</a>
+               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>
@@ -51,7 +51,8 @@
         </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.temperatureUnit:true }}</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">

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

@@ -9,13 +9,14 @@ import {MatMenuModule} from '@angular/material/menu';
 import {TREO_APP_CONFIG} from '@treo/services/config/config.constants';
 import {DeviceSummaryModel} from 'app/core/models/device-summary-model';
 import * as moment from 'moment';
+import {HttpClientTestingModule} from '@angular/common/http/testing';
 
 describe('DashboardDeviceComponent', () => {
     let component: DashboardDeviceComponent;
     let fixture: ComponentFixture<DashboardDeviceComponent>;
 
     const matDialogSpy = jasmine.createSpyObj('MatDialog', ['open']);
-    // const configServiceSpy = jasmine.createSpyObj('TreoConfigService', ['config$']);
+    // const configServiceSpy = jasmine.createSpyObj('ScrutinyConfigService', ['config$']);
 
 
     beforeEach(async(() => {
@@ -25,10 +26,11 @@ describe('DashboardDeviceComponent', () => {
                 MatIconModule,
                 MatMenuModule,
                 SharedModule,
+                HttpClientTestingModule,
             ],
             providers: [
                 {provide: MatDialog, useValue: matDialogSpy},
-                {provide: TREO_APP_CONFIG, useValue: {dashboardDisplay: 'name'}}
+                {provide: TREO_APP_CONFIG, useValue: {dashboard_display: 'name'}}
             ],
             declarations: [DashboardDeviceComponent]
         })

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

@@ -2,7 +2,7 @@ import {Component, EventEmitter, Input, OnInit, Output} 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 {ScrutinyConfigService} from 'app/core/config/scrutiny-config.service';
 import {Subject} from 'rxjs';
 import humanizeDuration from 'humanize-duration'
 import {MatDialog} from '@angular/material/dialog';
@@ -18,7 +18,7 @@ import {DeviceSummaryModel} from 'app/core/models/device-summary-model';
 export class DashboardDeviceComponent implements OnInit {
 
     constructor(
-        private _configService: TreoConfigService,
+        private _configService: ScrutinyConfigService,
         public dialog: MatDialog,
     ) {
         // Set the private defaults
@@ -82,7 +82,7 @@ export class DashboardDeviceComponent implements OnInit {
             // width: '250px',
             data: {
                 wwn: this.deviceWWN,
-                title: DeviceTitlePipe.deviceTitleWithFallback(this.deviceSummary.device, this.config.dashboardDisplay)
+                title: DeviceTitlePipe.deviceTitleWithFallback(this.deviceSummary.device, this.config.dashboard_display)
             }
         });
 

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

@@ -1,6 +1,6 @@
 import {Component, OnInit} from '@angular/core';
-import {AppConfig} from 'app/core/config/app.config';
-import {TreoConfigService} from '@treo/services/config';
+import {AppConfig, DashboardDisplay, DashboardSort, 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';
 
@@ -20,7 +20,7 @@ export class DashboardSettingsComponent implements OnInit {
     private _unsubscribeAll: Subject<any>;
 
     constructor(
-        private _configService: TreoConfigService,
+        private _configService: ScrutinyConfigService,
     ) {
         // Set the private defaults
         this._unsubscribeAll = new Subject();
@@ -33,9 +33,9 @@ export class DashboardSettingsComponent implements OnInit {
             .subscribe((config: AppConfig) => {
 
                 // Store the config
-                this.dashboardDisplay = config.dashboardDisplay;
-                this.dashboardSort = config.dashboardSort;
-                this.temperatureUnit = config.temperatureUnit;
+                this.dashboardDisplay = config.dashboard_display;
+                this.dashboardSort = config.dashboard_sort;
+                this.temperatureUnit = config.temperature_unit;
                 this.theme = config.theme;
 
             });
@@ -43,11 +43,11 @@ export class DashboardSettingsComponent implements OnInit {
     }
 
     saveSettings(): void {
-        const newSettings = {
-            dashboardDisplay: this.dashboardDisplay,
-            dashboardSort: this.dashboardSort,
-            temperatureUnit: this.temperatureUnit,
-            theme: this.theme
+        const newSettings: AppConfig = {
+            dashboard_display: this.dashboardDisplay as DashboardDisplay,
+            dashboard_sort: this.dashboardSort as DashboardSort,
+            temperature_unit: this.temperatureUnit as TemperatureUnit,
+            theme: this.theme as Theme
         }
         this._configService.config = newSettings
         console.log(`Saved Settings: ${JSON.stringify(newSettings)}`)