Skip to content

Commit

Permalink
started working on Dashboard UI sorting and naming
Browse files Browse the repository at this point in the history
  • Loading branch information
@AnalogJ
AnalogJ committed May 21, 2022
1 parent 3b13796 commit 5899bf2
Show file tree
Hide file tree
Showing 5 changed files with 124 additions and 14 deletions.
10 changes: 9 additions & 1 deletion webapp/frontend/src/app/core/config/app.config.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,11 @@ export interface AppConfig
{
theme: Theme;
layout: Layout;

// Dashboard options
dashboardDisplay: string;
dashboardSort: string;

}

/**
Expand All @@ -23,6 +28,9 @@ export interface AppConfig
*/
export const appConfig: AppConfig = {
theme : "light",
layout: "material"
layout: "material",

dashboardDisplay: "name",
dashboardSort: "status",
};

21 changes: 21 additions & 0 deletions webapp/frontend/src/app/data/mock/summary/data.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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",
Expand Down Expand Up @@ -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",
Expand Down Expand Up @@ -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",
Expand All @@ -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",
Expand Down Expand Up @@ -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",
Expand All @@ -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",
Expand Down
22 changes: 17 additions & 5 deletions webapp/frontend/src/app/layout/common/dashboard-settings/dashboard-settings.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,24 @@ <h2 mat-dialog-title>Scrutiny Settings</h2>
<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>
Expand Down Expand Up @@ -73,5 +85,5 @@ <h2 mat-dialog-title>Scrutiny Settings</h2>
</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>
35 changes: 34 additions & 1 deletion webapp/frontend/src/app/layout/common/dashboard-settings/dashboard-settings.component.ts
View file
Original file line number Diff line number Diff line change
@@ -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',
Expand All @@ -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;
}
Expand Down
50 changes: 43 additions & 7 deletions webapp/frontend/src/app/modules/dashboard/dashboard.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand All @@ -21,6 +23,7 @@ export class DashboardComponent implements OnInit, AfterViewInit, OnDestroy
{
data: any;
temperatureOptions: ApexOptions;
config: AppConfig;

// Private
private _unsubscribeAll: Subject<any>;
Expand All @@ -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
Expand All @@ -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))
Expand Down Expand Up @@ -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

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
}

if (disk.device_type && disk.device_type != 'scsi' && disk.device_type != 'ata'){
title.push(disk.device_type)
if(!deviceDisplay) {
// fallback
deviceDisplay = `/dev/${disk.device_name}`
}

title.push(disk.model_name)
title.push(deviceDisplay)
if(showModelName){
title.push(disk.model_name)
}

return title.join(' - ')
}
Expand Down

0 comments on commit 5899bf2

Please sign in to comment.