gilles/scrutiny
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Jason Kulatunga
2020-09-16 17:30:28 -07:00
parent 5101a37964
commit e6eeaf7e31
19 changed files with 13972 additions and 12530 deletions
Download Patch File Download Diff File Expand all files Collapse all files
webapp/frontend/src/app/data/mock/device/details/data.ts
-10436
View File
File diff suppressed because it is too large Load Diff
webapp/frontend/src/app/data/mock/device/details/index.ts
+47 -9
View File
@@ -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/data/mock/device/details/sda.ts
+1568
View File
File diff suppressed because it is too large Load Diff
webapp/frontend/src/app/data/mock/device/details/sdb.ts
+5606
View File
File diff suppressed because it is too large Load Diff
webapp/frontend/src/app/data/mock/device/details/sdc.ts
+3326
View File
File diff suppressed because it is too large Load Diff
webapp/frontend/src/app/data/mock/device/details/sdd.ts
+1240
View File
File diff suppressed because it is too large Load Diff
webapp/frontend/src/app/data/mock/device/details/sde.ts
+1240
View File
File diff suppressed because it is too large Load Diff
webapp/frontend/src/app/data/mock/summary/data.ts
+798 -2065
View File
File diff suppressed because it is too large Load Diff
webapp/frontend/src/app/layout/common/dashboard-settings/dashboard-settings.component.html
+10 -15
View File
@@ -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-option value="option1">Status</mat-option>
<mat-option value="option2" disabled>Name</mat-option>
<mat-option value="option3" disabled>Label</mat-option>
<mat-select [value]="'status'">
<mat-option value="status">Status</mat-option>
<mat-option value="name" disabled>Name</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
+2
View File
@@ -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
+30
View File
@@ -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.scss
View File
webapp/frontend/src/app/layout/common/detail-settings/detail-settings.component.spec.ts
+25
View File
@@ -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
+15
View File
@@ -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
+46
View File
@@ -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
+1 -1
View File
@@ -16,7 +16,7 @@ const modules = [
@NgModule({
declarations: [
LayoutComponent
LayoutComponent,
],
imports : [
TreoDrawerModule,
webapp/frontend/src/app/modules/detail/detail.component.html
+2 -2
View File
@@ -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
+14 -1
View File
@@ -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
+2 -1
View File
@@ -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