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

started working on Dashboard UI sorting and naming

Browse Source
This commit is contained in:
Jason Kulatunga
2022-05-12 07:35:38 -07:00
parent 3b137964fc
commit 5899bf2026
5 changed files with 124 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
webapp/frontend/src/app/core/config/app.config.ts
+9 -1
View File
@@ -11,6 +11,11 @@ export interface AppConfig
{
theme: Theme;
layout: Layout;
// Dashboard options
dashboardDisplay: string;
dashboardSort: string;
}
/**
@@ -23,6 +28,9 @@ export interface AppConfig
*/
export const appConfig: AppConfig = {
theme : "light",
layout: "material"
layout: "material",
dashboardDisplay: "name",
dashboardSort: "status",
};
webapp/frontend/src/app/data/mock/summary/data.ts
+21
View File
@@ -11,6 +11,9 @@ export const summary = {
"DeletedAt": null,
"wwn": "0x5000c500673e6b5f",
"device_name": "sdg",
"device_label": "14TB-WD-DRIVE2",
"device_uuid": "",
"device_serial_id": "ata-ST6000DX000-1H217Z-Z4DXXXXX",
"manufacturer": "ATA",
"model_name": "ST6000DX000-1H217Z",
"interface_type": "SCSI",
@@ -35,6 +38,9 @@ export const summary = {
"DeletedAt": null,
"wwn": "0x5000cca252c859cc",
"device_name": "sdd",
"device_label": "14TB-WD-DRIVE1",
"device_uuid": "806cf4bc-d160-4d96-8ee9-3ab7cf2a2e1f",
"device_serial_id": "ata-WDC_WD80EFAX-68LHPN0-7SGLXXXXX",
"manufacturer": "ATA",
"model_name": "WDC_WD80EFAX-68LHPN0",
"interface_type": "SCSI",
@@ -68,6 +74,9 @@ export const summary = {
"DeletedAt": null,
"wwn": "0x5000cca264eb01d7",
"device_name": "sdb",
"device_label": "14TB-WD-DRIVE5",
"device_uuid": "8125ec6d-a7e4-4950-ac84-72d6a4d67128",
"device_serial_id": "ata-WDC_WD140EDFZ-11A0VA0-9RK1XXXXX",
"manufacturer": "ATA",
"model_name": "WDC_WD140EDFZ-11A0VA0",
"interface_type": "SCSI",
@@ -101,6 +110,9 @@ export const summary = {
"DeletedAt": null,
"wwn": "0x5000cca264ebc248",
"device_name": "sde",
"device_label": "14TB-WD-DRIVE3",
"device_uuid": "9eb60cde-d6d0-4172-b520-b241a6a5477f",
"device_serial_id": "ata-WDC_WD140EDFZ-11A0VA0-9RK3XXXXX",
"manufacturer": "ATA",
"model_name": "WDC_WD140EDFZ-11A0VA0",
"interface_type": "SCSI",
@@ -125,6 +137,9 @@ export const summary = {
"DeletedAt": null,
"wwn": "0x5000cca264ec3183",
"device_name": "sdc",
"device_label": "14TB-WD-DRIVE6",
"device_uuid": "e1378723-7861-49b9-8e01-0bd063f0ecdd",
"device_serial_id": "ata-WDC_WD140EDFZ-11A0VA0-9RK4XXXXX",
"manufacturer": "ATA",
"model_name": "WDC_WD140EDFZ-11A0VA0",
"interface_type": "SCSI",
@@ -542,6 +557,9 @@ export const summary = {
"DeletedAt": null,
"wwn": "0x50014ee20b2a72a9",
"device_name": "sdf",
"device_label": "8.0TB-WD-4",
"device_uuid": "fc684dcc-aa2f-44f3-a958-d302dc7dd46d",
"device_serial_id": "ata-WDC_WD60EFRX-68MYMN1-WXL1HXXXXX",
"manufacturer": "ATA",
"model_name": "WDC_WD60EFRX-68MYMN1",
"interface_type": "SCSI",
@@ -566,6 +584,9 @@ export const summary = {
"DeletedAt": null,
"wwn": "0x5002538e40a22954",
"device_name": "sda",
"device_label": "",
"device_uuid": "",
"device_serial_id": "ata-Samsung_SSD_860_EVO_500GB-S3YZNB0KBXXXXXX",
"manufacturer": "ATA",
"model_name": "Samsung_SSD_860_EVO_500GB",
"interface_type": "SCSI",
webapp/frontend/src/app/layout/common/dashboard-settings/dashboard-settings.component.html
+17 -5
View File
@@ -2,12 +2,24 @@
<mat-dialog-content class="mat-typography">
<form class="flex flex-col p-8 pb-0 overflow-hidden">
<div class="flex flex-col gt-xs:flex-row">
<mat-form-field class="flex-auto gt-xs:pr-3">
<div class="flex flex-col mt-5 gt-md:flex-row">
<mat-form-field class="flex-auto gt-xs:pr-3 gt-md:pr-3">
<mat-label>Display</mat-label>
<mat-select [value]="dashboardDisplay">
<mat-option value="name">Name</mat-option>
<mat-option value="serial_id">Serial ID</mat-option>
<mat-option value="uuid">UUID</mat-option>
<mat-option value="label">Label</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field class="flex-auto gt-xs:pr-3 gt-md:pl-3">
<mat-label>Sort By</mat-label>
<mat-select [value]="'status'">
<mat-option value="status">Status</mat-option>
<mat-select [value]="dashboardSort">
<mat-option value="status">Status</mat-option>
<mat-option value="name" disabled>Name</mat-option>
<mat-option value="serial_id" disabled>Serial ID</mat-option>
<mat-option value="uuid" disabled>UUID</mat-option>
<mat-option value="label" disabled>Label</mat-option>
</mat-select>
</mat-form-field>
@@ -73,5 +85,5 @@
</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>
<button mat-button mat-dialog-close (click)="saveSettings()" cdkFocusInitial>Save</button>
</mat-dialog-actions>
webapp/frontend/src/app/layout/common/dashboard-settings/dashboard-settings.component.ts
+34 -1
View File
@@ -1,4 +1,8 @@
import { Component, OnInit } from '@angular/core';
import {AppConfig} from 'app/core/config/app.config';
import { TreoConfigService } from '@treo/services/config';
import {Subject} from "rxjs";
import {takeUntil} from "rxjs/operators";
@Component({
selector: 'app-dashboard-settings',
@@ -7,10 +11,39 @@ import { Component, OnInit } from '@angular/core';
})
export class DashboardSettingsComponent implements OnInit {
constructor() { }
dashboardDisplay: string;
dashboardSort: string;
// Private
private _unsubscribeAll: Subject<any>;
constructor(
private _configService: TreoConfigService,
) {
// Set the private defaults
this._unsubscribeAll = new Subject();
}
ngOnInit(): void {
// Subscribe to config changes
this._configService.config$
.pipe(takeUntil(this._unsubscribeAll))
.subscribe((config: AppConfig) => {
// Store the config
this.dashboardDisplay = config.dashboardDisplay;
this.dashboardSort = config.dashboardSort;
});
}
saveSettings(): void {
this._configService.config = {
dashboardDisplay: this.dashboardDisplay,
dashboardSort: this.dashboardSort
}
}
formatLabel(value: number) {
return value;
}
webapp/frontend/src/app/modules/dashboard/dashboard.component.ts
+43 -7
View File
@@ -5,10 +5,12 @@ import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { ApexOptions } from 'ng-apexcharts';
import { DashboardService } from 'app/modules/dashboard/dashboard.service';
import * as moment from "moment";
import * as moment from 'moment';
import {MatDialog} from '@angular/material/dialog';
import { DashboardSettingsComponent } from 'app/layout/common/dashboard-settings/dashboard-settings.component';
import humanizeDuration from 'humanize-duration'
import {AppConfig} from 'app/core/config/app.config';
import { TreoConfigService } from '@treo/services/config';
@Component({
selector : 'example',
@@ -21,6 +23,7 @@ export class DashboardComponent implements OnInit, AfterViewInit, OnDestroy
{
data: any;
temperatureOptions: ApexOptions;
config: AppConfig;
// Private
private _unsubscribeAll: Subject<any>;
@@ -32,7 +35,8 @@ export class DashboardComponent implements OnInit, AfterViewInit, OnDestroy
*/
constructor(
private _smartService: DashboardService,
public dialog: MatDialog
public dialog: MatDialog,
private _configService: TreoConfigService,
)
{
// Set the private defaults
@@ -49,6 +53,16 @@ export class DashboardComponent implements OnInit, AfterViewInit, OnDestroy
*/
ngOnInit(): void
{
// Subscribe to config changes
this._configService.config$
.pipe(takeUntil(this._unsubscribeAll))
.subscribe((config: AppConfig) => {
console.log('Configuration updated...')
// Store the config
this.config = config;
});
// Get the data
this._smartService.data$
.pipe(takeUntil(this._unsubscribeAll))
@@ -180,16 +194,38 @@ export class DashboardComponent implements OnInit, AfterViewInit, OnDestroy
deviceTitle(disk){
let title = []
let showModelName = false
if (disk.host_id) title.push(disk.host_id)
title.push(`/dev/${disk.device_name}`)
let deviceDisplay = ''
switch(this.config.dashboardDisplay){
case 'name':
deviceDisplay = `/dev/${disk.device_name}`
if (disk.device_type && disk.device_type != 'scsi' && disk.device_type != 'ata'){
title.push(disk.device_type)
}
showModelName = true
if (disk.device_type && disk.device_type != 'scsi' && disk.device_type != 'ata'){
title.push(disk.device_type)
break;
case 'serial_id':
deviceDisplay = disk.device_serial_id
break;
case 'uuid':
deviceDisplay = disk.device_uuid
break;
case 'label':
deviceDisplay = disk.label || disk.device_label
}
title.push(disk.model_name)
if(!deviceDisplay) {
// fallback
deviceDisplay = `/dev/${disk.device_name}`
}
title.push(deviceDisplay)
if(showModelName){
title.push(disk.model_name)
}
return title.join(' - ')
}