adding mocked detail data for frontend viewing. placeholders for settings panels. Add dialog panel for Details setings.

webapp/frontend/src/app/data/mock/device/details/index.ts

@@ -2,7 +2,11 @@ import { Injectable } from '@angular/core';
 import * as _ from 'lodash';
 import { TreoMockApi } from '@treo/lib/mock-api/mock-api.interfaces';
 import { TreoMockApiService } from '@treo/lib/mock-api/mock-api.service';
-import { details as detailsData } from 'app/data/mock/device/details/data';
+import { sda } from 'app/data/mock/device/details/sda';
+import { sdb } from 'app/data/mock/device/details/sdb';
+import { sdc } from 'app/data/mock/device/details/sdc';
+import { sdd } from 'app/data/mock/device/details/sdd';
+import { sde } from 'app/data/mock/device/details/sde';
 
 @Injectable({
     providedIn: 'root'
@@ -21,9 +25,6 @@ export class DetailsMockApi implements TreoMockApi
         private _treoMockApiService: TreoMockApiService
     )
     {
-        // Set the data
-        this._details = detailsData;
-
         // Register the API endpoints
         this.register();
     }
@@ -37,16 +38,53 @@ export class DetailsMockApi implements TreoMockApi
      */
     register(): void
     {
-        // -----------------------------------------------------------------------------------------------------
-        // @ Sales - GET
-        // -----------------------------------------------------------------------------------------------------
         this._treoMockApiService
-            .onGet('/api/device/:wwn/details')
+            .onGet('/api/device/0x5002538e40a22954/details')
             .reply(() => {
 
                 return [
                     200,
-                    _.cloneDeep(this._details)
+                    _.cloneDeep(sda)
+                ];
+            });
+
+        this._treoMockApiService
+            .onGet('/api/device/0x5000cca264eb01d7/details')
+            .reply(() => {
+
+                return [
+                    200,
+                    _.cloneDeep(sdb)
+                ];
+            });
+
+        this._treoMockApiService
+            .onGet('/api/device/0x5000cca264ec3183/details')
+            .reply(() => {
+
+                return [
+                    200,
+                    _.cloneDeep(sdc)
+                ];
+            });
+
+        this._treoMockApiService
+            .onGet('/api/device/0x5000cca252c859cc/details')
+            .reply(() => {
+
+                return [
+                    200,
+                    _.cloneDeep(sdd)
+                ];
+            });
+
+        this._treoMockApiService
+            .onGet('/api/device/0x5000cca264ebc248/details')
+            .reply(() => {
+
+                return [
+                    200,
+                    _.cloneDeep(sde)
                 ];
             });
     }

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

@@ -5,10 +5,10 @@
         <div class="flex flex-col gt-xs:flex-row">
             <mat-form-field class="flex-auto gt-xs:pr-3">
                 <mat-label>Sort By</mat-label>
-                <mat-select>
+                <mat-select [value]="'status'">
-                    <mat-option  value="option1">Status</mat-option>
+                    <mat-option  value="status">Status</mat-option>
-                    <mat-option value="option2" disabled>Name</mat-option>
+                    <mat-option value="name" disabled>Name</mat-option>
-                    <mat-option value="option3" disabled>Label</mat-option>
+                    <mat-option value="label" disabled>Label</mat-option>
                 </mat-select>
             </mat-form-field>
         </div>
@@ -20,7 +20,7 @@
                     <div class="flex flex-col mt-5 gt-md:flex-row">
                         <mat-form-field class="flex-auto gt-md:pr-3">
                             <mat-label>Critical Error Threshold</mat-label>
-                            <input matInput>
+                            <input matInput [value]="'10%'">
                         </mat-form-field>
                         <mat-form-field class="flex-auto gt-md:pl-3">
                             <mat-label>Critical Warning Threshold</mat-label>
@@ -31,11 +31,11 @@
                     <div class="flex flex-col gt-md:flex-row">
                         <mat-form-field class="flex-auto gt-md:pr-3">
                             <mat-label>Error Threshold</mat-label>
-                            <input matInput>
+                            <input matInput [value]="'20%'">
                         </mat-form-field>
                         <mat-form-field class="flex-auto gt-md:pl-3">
                             <mat-label>Warning Threshold</mat-label>
-                            <input matInput>
+                            <input matInput [value]="'10%'">
                         </mat-form-field>
                     </div>
 
@@ -45,7 +45,7 @@
                     <div class="flex flex-col mt-5 gt-md:flex-row">
                         <mat-form-field class="flex-auto gt-md:pr-3">
                             <mat-label>Critical Error Threshold</mat-label>
-                            <input matInput>
+                            <input matInput [value]="'enabled'">
                         </mat-form-field>
                         <mat-form-field class="flex-auto gt-md:pl-3">
                             <mat-label>Critical Warning Threshold</mat-label>
@@ -58,7 +58,7 @@
                     <div class="flex flex-col mt-5 gt-md:flex-row">
                         <mat-form-field class="flex-auto gt-md:pr-3">
                             <mat-label>Critical Error Threshold</mat-label>
-                            <input matInput>
+                            <input matInput [value]="'enabled'">
                         </mat-form-field>
                         <mat-form-field class="flex-auto gt-md:pl-3">
                             <mat-label>Critical Warning Threshold</mat-label>
@@ -73,10 +73,5 @@
 </mat-dialog-content>
 <mat-dialog-actions align="end">
     <button mat-button mat-dialog-close>Cancel</button>
-    <button mat-button [mat-dialog-close]="true" cdkFocusInitial>Save</button>
+    <button mat-button matTooltip="not yet implemented" [mat-dialog-close]="true" cdkFocusInitial>Save</button>
 </mat-dialog-actions>
-
-
-<!-- Copyright 2020 Google LLC. All Rights Reserved.
-    Use of this source code is governed by an MIT-style license that
-    can be found in the LICENSE file at http://angular.io/license -->

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

@@ -14,6 +14,7 @@ import { MatButtonToggleModule} from "@angular/material/button-toggle";
 import {MatTabsModule} from "@angular/material/tabs";
 import {MatSliderModule} from "@angular/material/slider";
 import {MatSlideToggleModule} from "@angular/material/slide-toggle";
+import {MatTooltipModule} from "@angular/material/tooltip";
 
 @NgModule({
     declarations: [
@@ -30,6 +31,7 @@ import {MatSlideToggleModule} from "@angular/material/slide-toggle";
         MatInputModule,
         MatButtonToggleModule,
         MatTabsModule,
+        MatTooltipModule,
         MatSliderModule,
         MatSlideToggleModule,
         SharedModule

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

@@ -0,0 +1,30 @@
+<h2 mat-dialog-title>Scrutiny Settings</h2>
+<mat-dialog-content class="mat-typography">
+
+    <form class="flex flex-col p-8 pb-0 ">
+        <div class="flex flex-col gt-xs:flex-row">
+            <mat-form-field class="flex-auto gt-xs:pr-3">
+                <mat-label>Threshold Data</mat-label>
+                <mat-select [value]="'scrutiny'">
+                    <mat-option  value="scrutiny">Scrutiny</mat-option>
+                    <mat-option value="name" disabled>Manufacturer</mat-option>
+                </mat-select>
+            </mat-form-field>
+        </div>
+
+        <div class="flex flex-col gt-xs:flex-row">
+            <mat-form-field class="flex-auto gt-xs:pr-3">
+                <mat-label>Notifications</mat-label>
+                <mat-select [value]="'enable'">
+                    <mat-option  value="enable">Enabled</mat-option>
+                    <mat-option value="disable" disabled>Disabled</mat-option>
+                </mat-select>
+            </mat-form-field>
+        </div>
+    </form>
+
+</mat-dialog-content>
+<mat-dialog-actions align="end">
+    <button mat-button mat-dialog-close>Cancel</button>
+    <button mat-button matTooltip="not yet implemented" [mat-dialog-close]="true" cdkFocusInitial>Save</button>
+</mat-dialog-actions>

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

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DetailSettingsComponent } from './detail-settings.component';
+
+describe('DetailSettingsComponent', () => {
+  let component: DetailSettingsComponent;
+  let fixture: ComponentFixture<DetailSettingsComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ DetailSettingsComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DetailSettingsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-detail-settings',
+  templateUrl: './detail-settings.component.html',
+  styleUrls: ['./detail-settings.component.scss']
+})
+export class DetailSettingsComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

webapp/frontend/src/app/layout/common/detail-settings/detail-settings.module.ts

@@ -0,0 +1,46 @@
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { Overlay } from '@angular/cdk/overlay';
+import { MAT_AUTOCOMPLETE_SCROLL_STRATEGY, MatAutocompleteModule } from '@angular/material/autocomplete';
+import { MatButtonModule } from '@angular/material/button';
+import { MatSelectModule } from '@angular/material/select';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { SharedModule } from 'app/shared/shared.module';
+import {DetailSettingsComponent} from 'app/layout/common/detail-settings/detail-settings.component'
+import { MatDialogModule } from "@angular/material/dialog";
+import { MatButtonToggleModule} from "@angular/material/button-toggle";
+import {MatTabsModule} from "@angular/material/tabs";
+import {MatSliderModule} from "@angular/material/slider";
+import {MatSlideToggleModule} from "@angular/material/slide-toggle";
+import {MatTooltipModule} from "@angular/material/tooltip";
+
+@NgModule({
+    declarations: [
+        DetailSettingsComponent
+    ],
+    imports     : [
+        RouterModule.forChild([]),
+        MatAutocompleteModule,
+        MatDialogModule,
+        MatButtonModule,
+        MatSelectModule,
+        MatFormFieldModule,
+        MatIconModule,
+        MatInputModule,
+        MatButtonToggleModule,
+        MatTabsModule,
+        MatTooltipModule,
+        MatSliderModule,
+        MatSlideToggleModule,
+        SharedModule
+    ],
+    exports     : [
+        DetailSettingsComponent
+    ],
+    providers   : []
+})
+export class DetailSettingsModule
+{
+}

webapp/frontend/src/app/layout/layout.module.ts

@@ -16,7 +16,7 @@ const modules = [
 
 @NgModule({
     declarations: [
-        LayoutComponent
+        LayoutComponent,
     ],
     imports     : [
         TreoDrawerModule,

webapp/frontend/src/app/modules/detail/detail.component.html

@@ -17,7 +17,7 @@
                     <span class="ml-2">Export</span>
                 </button>
                 <button class="ml-2 xs:hidden"
-                        matTooltip="not yet implemented"
+                        (click)="openDialog()"
                         mat-stroked-button>
                     <mat-icon class="icon-size-20 rotate-90 mirror"
                               [svgIcon]="'tune'"></mat-icon>
@@ -38,7 +38,7 @@
                             <span class="ml-2">Export</span>
                         </button>
                         <button mat-menu-item
-                                matTooltip="not yet implemented">
+                                (click)="openDialog()">
                             <mat-icon class="icon-size-20 rotate-90 mirror"
                                       [svgIcon]="'tune'"></mat-icon>
                             <span class="ml-2">Settings</span>

webapp/frontend/src/app/modules/detail/detail.component.ts

@@ -6,6 +6,8 @@ import {Subject} from "rxjs";
 import {DetailService} from "./detail.service";
 import {takeUntil} from "rxjs/operators";
 import {fadeOut} from "../../../@treo/animations/fade";
+import {DetailSettingsComponent} from "app/layout/common/detail-settings/detail-settings.component";
+import {MatDialog} from "@angular/material/dialog";
 
 @Component({
   selector: 'detail',
@@ -34,7 +36,9 @@ export class DetailComponent implements OnInit, AfterViewInit, OnDestroy {
      * @param {DetailService} _detailService
      */
     constructor(
-        private _detailService: DetailService
+        private _detailService: DetailService,
+        public dialog: MatDialog
+
     )
     {
         // Set the private defaults
@@ -277,6 +281,15 @@ export class DetailComponent implements OnInit, AfterViewInit, OnDestroy {
         this.smartAttributeDataSource.data = this._generateSmartAttributeTableDataSource(this.data.data.smart_results);
 
     }
+
+    openDialog() {
+        const dialogRef = this.dialog.open(DetailSettingsComponent);
+
+        dialogRef.afterClosed().subscribe(result => {
+            console.log(`Dialog result: ${result}`);
+        });
+    }
+
     /**
      * Track by function for ngFor loops
      *

webapp/frontend/src/app/modules/detail/detail.module.ts

@@ -13,6 +13,7 @@ import { MatTableModule } from '@angular/material/table';
 import { MatTooltipModule } from '@angular/material/tooltip'
 import { NgApexchartsModule } from 'ng-apexcharts';
 import { TreoCardModule } from '@treo/components/card';
+import {DetailSettingsModule} from "app/layout/common/detail-settings/detail-settings.module";
 
 @NgModule({
     declarations: [
@@ -31,7 +32,7 @@ import { TreoCardModule } from '@treo/components/card';
         NgApexchartsModule,
         TreoCardModule,
         SharedModule,
-
+        DetailSettingsModule,
     ]
 })
 export class DetailModule