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

adding typescript interfaces for type hinting and testing

Browse Source 
some code reformatting
adding tests for services and components.
cleanup of unused dependencies in components.
refactor dashboard service so that wrapper is removed before data is passed to component. (no more this.data.data...).
refactored components so that variable names are consistent (dashboardService vs smartService).
ensure argument and return types are specified everywhere.
adding tests for pipes.

adding ng test to ci steps.

change dir before running npm install.

trying to install nodejs in continer.

test frontend separately.

upload coverage for frontend and backend.

upload coverage for frontend and backend.

testing coverage file locations.

retry file upload.
This commit is contained in:
Jason Kulatunga
2022-07-08 18:19:07 -07:00
parent 0e2fec4e93
commit b71d6660a6
37 changed files with 1893 additions and 445 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.github/workflows/ci.yaml
+40 -7
View File
@@ -3,11 +3,25 @@ name: CI
on: [pull_request]
jobs:
test:
name: Test
test-frontend:
name: Test Frontend
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v2
- name: Test Frontend
run: |
make binary-frontend-test-coverage
- name: Upload coverage
uses: actions/upload-artifact@v3
with:
name: coverage
path: ${{ github.workspace }}/webapp/frontend/coverage/lcov.info
retention-days: 1
test-backend:
name: Test Backend
runs-on: ubuntu-latest
container: ghcr.io/packagrio/packagr:latest-golang
# Service containers to run with `build` (Required for end-to-end testing)
services:
influxdb:
@@ -22,7 +36,6 @@ jobs:
ports:
- 8086:8086
env:
PROJECT_PATH: /go/src/github.com/analogj/scrutiny
STATIC: true
steps:
- name: Git
@@ -32,16 +45,36 @@ jobs:
git --version
- name: Checkout
uses: actions/checkout@v2
- name: Test
- name: Test Backend
run: |
make binary-clean binary-test-coverage
- name: Generate coverage report
- name: Upload coverage
uses: actions/upload-artifact@v3
with:
name: coverage
path: ${{ github.workspace }}/coverage.txt
retention-days: 1
test-coverage:
name: Test Coverage Upload
needs:
- test-backend
- test-frontend
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v2
- name: Download coverage reports
uses: actions/download-artifact@v3
with:
name: coverage
- name: Upload coverage reports
uses: codecov/codecov-action@v2
with:
files: ${{ github.workspace }}/coverage.txt
files: ${{ github.workspace }}/coverage.txt,${{ github.workspace }}/lcov.info
flags: unittests
fail_ci_if_error: true
verbose: true
build:
name: Build ${{ matrix.cfg.goos }}/${{ matrix.cfg.goarch }}
runs-on: ${{ matrix.cfg.on }}
Makefile
+10
View File
@@ -89,6 +89,10 @@ ifneq ($(OS),Windows_NT)
./$(WEB_BINARY_NAME) || true
endif
########################################################################################################################
# Binary
########################################################################################################################
.PHONY: binary-frontend
# reduce logging, disable angular-cli analytics for ci environment
binary-frontend: export NPM_CONFIG_LOGLEVEL = warn
@@ -100,6 +104,12 @@ binary-frontend:
npm ci
npm run build:prod -- --output-path=$(CURDIR)/dist
.PHONY: binary-frontend-test-coverage
# reduce logging, disable angular-cli analytics for ci environment
binary-frontend-test-coverage:
cd webapp/frontend
npm ci
npx ng test --watch=false --browsers=ChromeHeadless --code-coverage
########################################################################################################################
# Docker
webapp/backend/pkg/web/handler/get_devices_summary.go
+1
View File
@@ -18,6 +18,7 @@ func GetDevicesSummary(c *gin.Context) {
return
}
//this must match DeviceSummaryWrapper (webapp/backend/pkg/models/device_summary.go)
c.JSON(http.StatusOK, gin.H{
"success": true,
"data": map[string]interface{}{
webapp/frontend/.gitignore
+2
View File
@@ -46,3 +46,5 @@ testem.log
Thumbs.db
/dist
/coverage
webapp/frontend/karma.conf.js
+2 -2
View File
@@ -17,8 +17,8 @@ module.exports = function (config)
clearContext: false // leave Jasmine Spec Runner output visible in browser
},
coverageIstanbulReporter: {
dir : require('path').join(__dirname, './coverage/treo'),
reports : ['html', 'lcovonly', 'text-summary'],
dir: require('path').join(__dirname, './coverage'),
reports: ['html', 'lcovonly', 'text-summary'],
fixWebpackSourcePaths: true
},
reporters : ['progress', 'kjhtml'],
webapp/frontend/src/app/core/config/app.config.ts
+12 -6
View File
@@ -1,22 +1,28 @@
import { Layout } from 'app/layout/layout.types';
import {Layout} from 'app/layout/layout.types';
// Theme type
export type Theme = 'light' | 'dark' | 'system';
// Device title to display on the dashboard
export type DashboardDisplay = 'name' | 'serial_id' | 'uuid' | 'label'
export type DashboardSort = 'status' | 'title' | 'age'
export type TemperatureUnit = 'celsius' | 'fahrenheit'
/**
* AppConfig interface. Update this interface to strictly type your config
* object.
*/
export interface AppConfig
{
export interface AppConfig {
theme: Theme;
layout: Layout;
// Dashboard options
dashboardDisplay: string;
dashboardSort: string;
dashboardDisplay: DashboardDisplay;
dashboardSort: DashboardSort;
temperatureUnit: string;
temperatureUnit: TemperatureUnit;
}
/**
webapp/frontend/src/app/core/models/device-details-response-wrapper.ts
+14
View File
@@ -0,0 +1,14 @@
import {DeviceModel} from 'app/core/models/device-model';
import {SmartModel} from 'app/core/models/measurements/smart-model';
import {AttributeMetadataModel} from 'app/core/models/thresholds/attribute-metadata-model';
// maps to webapp/backend/pkg/models/device_summary.go
export interface DeviceDetailsResponseWrapper {
success: boolean;
errors?: any[];
data: {
device: DeviceModel;
smart_results: SmartModel[];
},
metadata: { [key: string]: AttributeMetadataModel } | { [key: number]: AttributeMetadataModel };
}
webapp/frontend/src/app/core/models/device-model.ts
+4 -4
View File
@@ -1,10 +1,10 @@
// maps to webapp/backend/pkg/models/device.go
export interface DeviceModel {
wwn: string;
device_name: string;
device_uuid: string;
device_serial_id: string;
device_label: string;
device_name?: string;
device_uuid?: string;
device_serial_id?: string;
device_label?: string;
manufacturer: string;
model_name: string;
webapp/frontend/src/app/core/models/device-summary-model.ts
+16
View File
@@ -0,0 +1,16 @@
import {DeviceModel} from 'app/core/models/device-model';
import {SmartTemperatureModel} from 'app/core/models/measurements/smart-temperature-model';
// maps to webapp/backend/pkg/models/device_summary.go
export interface DeviceSummaryModel {
device: DeviceModel;
smart?: SmartSummary;
temp_history?: SmartTemperatureModel[];
}
export interface SmartSummary {
collector_date?: string,
temp?: number
power_on_hours?: number
}
webapp/frontend/src/app/core/models/device-summary-response-wrapper.ts
+10
View File
@@ -0,0 +1,10 @@
import {DeviceSummaryModel} from 'app/core/models/device-summary-model';
// maps to webapp/backend/pkg/models/device_summary.go
export interface DeviceSummaryResponseWrapper {
success: boolean;
errors: any[];
data: {
summary: { [key: string]: DeviceSummaryModel }
}
}
webapp/frontend/src/app/core/models/device-summary-temp-response-wrapper.ts
+9
View File
@@ -0,0 +1,9 @@
import {SmartTemperatureModel} from './measurements/smart-temperature-model';
export interface DeviceSummaryTempResponseWrapper {
success: boolean;
errors: any[];
data: {
temp_history: { [key: string]: SmartTemperatureModel[]; }
}
}
webapp/frontend/src/app/core/models/measurements/smart-attribute-model.ts
+19
View File
@@ -0,0 +1,19 @@
// maps to webapp/backend/pkg/models/measurements/smart_ata_attribute.go
// maps to webapp/backend/pkg/models/measurements/smart_nvme_attribute.go
// maps to webapp/backend/pkg/models/measurements/smart_scsi_attribute.go
export interface SmartAttributeModel {
attribute_id: number | string
value: number
thresh: number
worst?: number
raw_value?: number
raw_string?: string
when_failed?: string
transformed_value: number
status: number
status_reason?: string
failure_rate?: number
chartData?: any[]
}
webapp/frontend/src/app/core/models/measurements/smart-model.ts
+13
View File
@@ -0,0 +1,13 @@
// maps to webapp/backend/pkg/models/measurements/smart.go
import {SmartAttributeModel} from './smart-attribute-model';
export interface SmartModel {
date: string;
device_wwn: string;
device_protocol: string;
temp: number;
power_on_hours: number;
power_cycle_count: number
attrs: { [key: string]: SmartAttributeModel }
}
webapp/frontend/src/app/core/models/measurements/smart-temperature-model.ts
+6
View File
@@ -0,0 +1,6 @@
// maps to webapp/backend/pkg/models/measurements/smart_temperature.go
export interface SmartTemperatureModel {
date: string;
temp: number;
}
webapp/frontend/src/app/core/models/thresholds/attribute-metadata-model.ts
+13
View File
@@ -0,0 +1,13 @@
// map to webapp/backend/pkg/thresholds/ata_attribute_metadata.go
// map to webapp/backend/pkg/thresholds/nvme_attribute_metadata.go
// map to webapp/backend/pkg/thresholds/scsi_attribute_metadata.go
export interface AttributeMetadataModel {
display_name: string
ideal: string
critical: boolean
description: string
transform_value_unit?: string
observed_thresholds?: any[]
display_type: string
}
webapp/frontend/src/app/data/mock/summary/temp_history.ts
+1200
View File
File diff suppressed because it is too large Load Diff
webapp/frontend/src/app/layout/common/dashboard-device-delete-dialog/dashboard-device-delete-dialog.component.spec.ts
+43 -4
View File
@@ -1,16 +1,39 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import {async, ComponentFixture, TestBed} from '@angular/core/testing';
import {DashboardDeviceDeleteDialogComponent} from './dashboard-device-delete-dialog.component';
import {HttpClientModule} from '@angular/common/http';
import {MAT_DIALOG_DATA, MatDialogModule, MatDialogRef} from '@angular/material/dialog';
import {MatButtonModule} from '@angular/material/button';
import {MatIconModule} from '@angular/material/icon';
import {SharedModule} from '../../../shared/shared.module';
import {DashboardDeviceDeleteDialogService} from './dashboard-device-delete-dialog.service';
import {of} from 'rxjs';
import { DashboardDeviceDeleteDialogComponent } from './dashboard-device-delete-dialog.component';
describe('DashboardDeviceDeleteDialogComponent', () => {
let component: DashboardDeviceDeleteDialogComponent;
let fixture: ComponentFixture<DashboardDeviceDeleteDialogComponent>;
const matDialogRefSpy = jasmine.createSpyObj('MatDialogRef', ['closeDialog', 'close']);
const dashboardDeviceDeleteDialogServiceSpy = jasmine.createSpyObj('DashboardDeviceDeleteDialogService', ['deleteDevice']);
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ DashboardDeviceDeleteDialogComponent ]
imports: [
HttpClientModule,
MatDialogModule,
MatButtonModule,
MatIconModule,
SharedModule,
],
providers: [
{provide: MatDialogRef, useValue: matDialogRefSpy},
{provide: MAT_DIALOG_DATA, useValue: {wwn: 'test-wwn', title: 'my-test-device-title'}},
{provide: DashboardDeviceDeleteDialogService, useValue: dashboardDeviceDeleteDialogServiceSpy}
],
declarations: [DashboardDeviceDeleteDialogComponent]
})
.compileComponents();
.compileComponents()
}));
beforeEach(() => {
@@ -22,4 +45,20 @@ describe('DashboardDeviceDeleteDialogComponent', () => {
it('should create', () => {
expect(component).toBeTruthy();
});
it('should close the component if cancel is clicked', () => {
matDialogRefSpy.closeDialog.calls.reset();
matDialogRefSpy.closeDialog()
expect(matDialogRefSpy.closeDialog).toHaveBeenCalled();
});
it('should attempt to delete device if delete is clicked', () => {
dashboardDeviceDeleteDialogServiceSpy.deleteDevice.and.returnValue(of({'success': true}));
component.onDeleteClick()
expect(dashboardDeviceDeleteDialogServiceSpy.deleteDevice).toHaveBeenCalledWith('test-wwn');
expect(dashboardDeviceDeleteDialogServiceSpy.deleteDevice.calls.count())
.withContext('one call')
.toBe(1);
});
});
webapp/frontend/src/app/layout/common/dashboard-device-delete-dialog/dashboard-device-delete-dialog.component.ts
+1 -2
View File
@@ -1,7 +1,6 @@
import { Component, OnInit, Inject } from '@angular/core';
import {Component, Inject, OnInit} from '@angular/core';
import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material/dialog';
import {DashboardDeviceDeleteDialogService} from 'app/layout/common/dashboard-device-delete-dialog/dashboard-device-delete-dialog.service';
import {Subject} from 'rxjs';
@Component({
selector: 'app-dashboard-device-delete-dialog',
webapp/frontend/src/app/layout/common/dashboard-device-delete-dialog/dashboard-device-delete-dialog.module.ts
+7 -30
View File
@@ -1,44 +1,21 @@
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 {NgModule} from '@angular/core';
import {RouterModule} from '@angular/router';
import {MatButtonModule} from '@angular/material/button';
import {MatIconModule} from '@angular/material/icon';
import {SharedModule} from 'app/shared/shared.module';
import {DashboardDeviceDeleteDialogComponent} from 'app/layout/common/dashboard-device-delete-dialog/dashboard-device-delete-dialog.component'
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';
import {dashboardRoutes} from 'app/modules/dashboard/dashboard.routing';
import {MatDividerModule} from '@angular/material/divider';
import {MatMenuModule} from '@angular/material/menu';
import {MatProgressBarModule} from '@angular/material/progress-bar';
import {MatSortModule} from '@angular/material/sort';
import {MatTableModule} from '@angular/material/table';
import {NgApexchartsModule} from 'ng-apexcharts';
import { MatDialogModule } from '@angular/material/dialog';
import {MatDialogModule} from '@angular/material/dialog';
@NgModule({
declarations: [
DashboardDeviceDeleteDialogComponent
],
imports : [
imports: [
RouterModule.forChild([]),
RouterModule.forChild(dashboardRoutes),
MatButtonModule,
MatDividerModule,
MatTooltipModule,
MatIconModule,
MatMenuModule,
MatProgressBarModule,
MatSortModule,
MatTableModule,
NgApexchartsModule,
SharedModule,
MatDialogModule
],
webapp/frontend/src/app/layout/common/dashboard-device/dashboard-device.component.spec.ts
+84 -4
View File
@@ -1,25 +1,105 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import {async, ComponentFixture, TestBed} from '@angular/core/testing';
import { DashboardDeviceComponent } from './dashboard-device.component';
import {DashboardDeviceComponent} from './dashboard-device.component';
import {MatDialog} from '@angular/material/dialog';
import {MatButtonModule} from '@angular/material/button';
import {MatIconModule} from '@angular/material/icon';
import {SharedModule} from 'app/shared/shared.module';
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';
describe('DashboardDeviceComponent', () => {
let component: DashboardDeviceComponent;
let fixture: ComponentFixture<DashboardDeviceComponent>;
const matDialogSpy = jasmine.createSpyObj('MatDialog', ['open']);
// const configServiceSpy = jasmine.createSpyObj('TreoConfigService', ['config$']);
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ DashboardDeviceComponent ]
imports: [
MatButtonModule,
MatIconModule,
MatMenuModule,
SharedModule,
],
providers: [
{provide: MatDialog, useValue: matDialogSpy},
{provide: TREO_APP_CONFIG, useValue: {dashboardDisplay: 'name'}}
],
declarations: [DashboardDeviceComponent]
})
.compileComponents();
}));
beforeEach(() => {
// configServiceSpy.config$.and.returnValue(of({'success': true}));
fixture = TestBed.createComponent(DashboardDeviceComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
describe('#classDeviceLastUpdatedOn()', () => {
it('if non-zero device status, should be red', () => {
// component.deviceSummary = summary.data.summary['0x5000c500673e6b5f'] as DeviceSummaryModel
expect(component.classDeviceLastUpdatedOn({
device: {
device_status: 2
}
} as DeviceSummaryModel)).toBe('text-red')
});
it('if non-zero device status, should be red', () => {
// component.deviceSummary = summary.data.summary['0x5000c500673e6b5f'] as DeviceSummaryModel
expect(component.classDeviceLastUpdatedOn({
device: {
device_status: 2
}
} as DeviceSummaryModel)).toBe('text-red')
});
it('if healthy device status and updated in the last two weeks, should be green', () => {
// component.deviceSummary = summary.data.summary['0x5000c500673e6b5f'] as DeviceSummaryModel
expect(component.classDeviceLastUpdatedOn({
device: {
device_status: 0
},
smart: {
collector_date: moment().subtract(13, 'days').toISOString()
}
} as DeviceSummaryModel)).toBe('text-green')
});
it('if healthy device status and updated more than two weeks ago, but less than 1 month, should be yellow', () => {
// component.deviceSummary = summary.data.summary['0x5000c500673e6b5f'] as DeviceSummaryModel
expect(component.classDeviceLastUpdatedOn({
device: {
device_status: 0
},
smart: {
collector_date: moment().subtract(3, 'weeks').toISOString()
}
} as DeviceSummaryModel)).toBe('text-yellow')
});
it('if healthy device status and updated more 1 month ago, should be red', () => {
// component.deviceSummary = summary.data.summary['0x5000c500673e6b5f'] as DeviceSummaryModel
expect(component.classDeviceLastUpdatedOn({
device: {
device_status: 0
},
smart: {
collector_date: moment().subtract(5, 'weeks').toISOString()
}
} as DeviceSummaryModel)).toBe('text-red')
});
})
});
webapp/frontend/src/app/layout/common/dashboard-device/dashboard-device.component.ts
+16 -13
View File
@@ -1,4 +1,4 @@
import { Component, Input, Output, OnInit, EventEmitter} from '@angular/core';
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';
@@ -8,6 +8,7 @@ import humanizeDuration from 'humanize-duration'
import {MatDialog} from '@angular/material/dialog';
import {DashboardDeviceDeleteDialogComponent} from 'app/layout/common/dashboard-device-delete-dialog/dashboard-device-delete-dialog.component';
import {DeviceTitlePipe} from 'app/shared/device-title.pipe';
import {DeviceSummaryModel} from 'app/core/models/device-summary-model';
@Component({
selector: 'app-dashboard-device',
@@ -23,7 +24,8 @@ export class DashboardDeviceComponent implements OnInit {
// Set the private defaults
this._unsubscribeAll = new Subject();
}
@Input() deviceSummary: any;
@Input() deviceSummary: DeviceSummaryModel;
@Input() deviceWWN: string;
@Output() deviceDeleted = new EventEmitter<string>();
@@ -47,28 +49,27 @@ export class DashboardDeviceComponent implements OnInit {
// @ Public methods
// -----------------------------------------------------------------------------------------------------
classDeviceLastUpdatedOn(deviceSummary): string {
classDeviceLastUpdatedOn(deviceSummary: DeviceSummaryModel): string {
if (deviceSummary.device.device_status !== 0) {
return 'text-red' // if the device has failed, always highlight in red
} else if(deviceSummary.device.device_status === 0 && deviceSummary.smart){
if(moment().subtract(14, 'd').isBefore(deviceSummary.smart.collector_date)){
} else if (deviceSummary.device.device_status === 0 && deviceSummary.smart) {
if (moment().subtract(14, 'days').isBefore(deviceSummary.smart.collector_date)) {
// this device was updated in the last 2 weeks.
return 'text-green'
} else if(moment().subtract(1, 'm').isBefore(deviceSummary.smart.collector_date)){
} else if (moment().subtract(1, 'months').isBefore(deviceSummary.smart.collector_date)) {
// this device was updated in the last month
return 'text-yellow'
} else{
} else {
// last updated more than a month ago.
return 'text-red'
}
} else {
return ''
}
}
deviceStatusString(deviceStatus): string {
if(deviceStatus === 0){
deviceStatusString(deviceStatus: number): string {
if (deviceStatus === 0) {
return 'passed'
} else {
return 'failed'
@@ -76,16 +77,18 @@ export class DashboardDeviceComponent implements OnInit {
}
openDeleteDialog(): void {
const dialogRef = this.dialog.open(DashboardDeviceDeleteDialogComponent, {
// width: '250px',
data: {wwn: this.deviceWWN, title: DeviceTitlePipe.deviceTitleWithFallback(this.deviceSummary.device, this.config.dashboardDisplay)}
data: {
wwn: this.deviceWWN,
title: DeviceTitlePipe.deviceTitleWithFallback(this.deviceSummary.device, this.config.dashboardDisplay)
}
});
dialogRef.afterClosed().subscribe(result => {
console.log('The dialog was closed', result);
if(result.success){
if (result.success) {
this.deviceDeleted.emit(this.deviceWWN)
}
});
webapp/frontend/src/app/layout/common/dashboard-device/dashboard-device.module.ts
+9 -32
View File
@@ -1,53 +1,30 @@
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 {NgModule} from '@angular/core';
import {RouterModule} from '@angular/router';
import {MatButtonModule} from '@angular/material/button';
import {MatIconModule} from '@angular/material/icon';
import {SharedModule} from 'app/shared/shared.module';
import {DashboardDeviceComponent} from 'app/layout/common/dashboard-device/dashboard-device.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';
import {dashboardRoutes} from '../../../modules/dashboard/dashboard.routing';
import {MatDividerModule} from '@angular/material/divider';
import {MatMenuModule} from '@angular/material/menu';
import {MatProgressBarModule} from '@angular/material/progress-bar';
import {MatSortModule} from '@angular/material/sort';
import {MatTableModule} from '@angular/material/table';
import {NgApexchartsModule} from 'ng-apexcharts';
import {DashboardDeviceDeleteDialogModule} from 'app/layout/common/dashboard-device-delete-dialog/dashboard-device-delete-dialog.module';
@NgModule({
declarations: [
DashboardDeviceComponent
],
imports : [
imports: [
RouterModule.forChild([]),
RouterModule.forChild(dashboardRoutes),
MatButtonModule,
MatDividerModule,
MatTooltipModule,
MatIconModule,
MatMenuModule,
MatProgressBarModule,
MatSortModule,
MatTableModule,
NgApexchartsModule,
SharedModule,
DashboardDeviceDeleteDialogModule
],
exports : [
exports: [
DashboardDeviceComponent,
],
providers : []
providers: []
})
export class DashboardDeviceModule
{
export class DashboardDeviceModule {
}
webapp/frontend/src/app/layout/common/dashboard-settings/dashboard-settings.component.spec.ts
-25
View File
@@ -1,25 +0,0 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { DashboardSettingsComponent } from './dashboard-settings.component';
describe('DashboardSettingsComponent', () => {
let component: DashboardSettingsComponent;
let fixture: ComponentFixture<DashboardSettingsComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ DashboardSettingsComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(DashboardSettingsComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
webapp/frontend/src/app/layout/common/dashboard-settings/dashboard-settings.component.ts
+2 -4
View File
@@ -1,6 +1,6 @@
import { Component, OnInit } from '@angular/core';
import {Component, OnInit} from '@angular/core';
import {AppConfig} from 'app/core/config/app.config';
import { TreoConfigService } from '@treo/services/config';
import {TreoConfigService} from '@treo/services/config';
import {Subject} from 'rxjs';
import {takeUntil} from 'rxjs/operators';
@@ -43,8 +43,6 @@ export class DashboardSettingsComponent implements OnInit {
}
saveSettings(): void {
const newSettings = {
dashboardDisplay: this.dashboardDisplay,
dashboardSort: this.dashboardSort,
webapp/frontend/src/app/layout/common/detail-settings/detail-settings.module.ts
+15 -17
View File
@@ -1,16 +1,15 @@
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 {NgModule} from '@angular/core';
import {RouterModule} from '@angular/router';
import {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 {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';
@@ -20,7 +19,7 @@ import {MatTooltipModule} from '@angular/material/tooltip';
declarations: [
DetailSettingsComponent
],
imports : [
imports: [
RouterModule.forChild([]),
MatAutocompleteModule,
MatDialogModule,
@@ -36,11 +35,10 @@ import {MatTooltipModule} from '@angular/material/tooltip';
MatSlideToggleModule,
SharedModule
],
exports : [
exports: [
DetailSettingsComponent
],
providers : []
providers: []
})
export class DetailSettingsModule
{
export class DetailSettingsModule {
}
webapp/frontend/src/app/modules/dashboard/dashboard.component.html
+1 -1
View File
@@ -1,5 +1,5 @@
<div *ngIf="data && data.data && data.data.summary; else emptyDashboard">
<div *ngIf="summaryData; else emptyDashboard">
<div class="flex flex-col flex-auto w-full p-8 xs:p-2">
<div class="flex flex-wrap w-full">
webapp/frontend/src/app/modules/dashboard/dashboard.component.ts
+40 -30
View File
@@ -1,17 +1,24 @@
import { AfterViewInit, ChangeDetectionStrategy, Component, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
import { MatSort } from '@angular/material/sort';
import { MatTableDataSource } from '@angular/material/table';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import {
AfterViewInit,
ChangeDetectionStrategy,
Component,
OnDestroy,
OnInit,
ViewChild,
ViewEncapsulation
} from '@angular/core';
import {Subject} from 'rxjs';
import {takeUntil} from 'rxjs/operators';
import {ApexOptions, ChartComponent} from 'ng-apexcharts';
import { DashboardService } from 'app/modules/dashboard/dashboard.service';
import {DashboardService} from 'app/modules/dashboard/dashboard.service';
import {MatDialog} from '@angular/material/dialog';
import { DashboardSettingsComponent } from 'app/layout/common/dashboard-settings/dashboard-settings.component';
import {DashboardSettingsComponent} from 'app/layout/common/dashboard-settings/dashboard-settings.component';
import {AppConfig} from 'app/core/config/app.config';
import {TreoConfigService} from '@treo/services/config';
import {Router} from '@angular/router';
import {TemperaturePipe} from 'app/shared/temperature.pipe';
import {DeviceTitlePipe} from 'app/shared/device-title.pipe';
import {DeviceSummaryModel} from 'app/core/models/device-summary-model';
@Component({
selector : 'example',
@@ -22,7 +29,7 @@ import {DeviceTitlePipe} from 'app/shared/device-title.pipe';
})
export class DashboardComponent implements OnInit, AfterViewInit, OnDestroy
{
data: any;
summaryData: { [key: string]: DeviceSummaryModel };
hostGroups: { [hostId: string]: string[] } = {}
temperatureOptions: ApexOptions;
tempDurationKey = 'forever'
@@ -35,10 +42,13 @@ export class DashboardComponent implements OnInit, AfterViewInit, OnDestroy
/**
* Constructor
*
* @param {SmartService} _smartService
* @param {DashboardService} _dashboardService
* @param {TreoConfigService} _configService
* @param {MatDialog} dialog
* @param {Router} router
*/
constructor(
private _smartService: DashboardService,
private _dashboardService: DashboardService,
private _configService: TreoConfigService,
public dialog: MatDialog,
private router: Router,
@@ -81,16 +91,16 @@ export class DashboardComponent implements OnInit, AfterViewInit, OnDestroy
});
// Get the data
this._smartService.data$
this._dashboardService.data$
.pipe(takeUntil(this._unsubscribeAll))
.subscribe((data) => {
// Store the data
this.data = data;
this.summaryData = data;
// generate group data.
for(const wwn in this.data.data.summary){
const hostid = this.data.data.summary[wwn].device.host_id
for (const wwn in this.summaryData) {
const hostid = this.summaryData[wwn].device.host_id
const hostDeviceList = this.hostGroups[hostid] || []
hostDeviceList.push(wwn)
this.hostGroups[hostid] = hostDeviceList
@@ -132,11 +142,11 @@ export class DashboardComponent implements OnInit, AfterViewInit, OnDestroy
private _deviceDataTemperatureSeries(): any[] {
const deviceTemperatureSeries = []
console.log('DEVICE DATA SUMMARY', this.data)
console.log('DEVICE DATA SUMMARY', this.summaryData)
for(const wwn in this.data.data.summary){
const deviceSummary = this.data.data.summary[wwn]
if (!deviceSummary.temp_history){
for (const wwn in this.summaryData) {
const deviceSummary = this.summaryData[wwn]
if (!deviceSummary.temp_history) {
continue
}
@@ -206,7 +216,7 @@ export class DashboardComponent implements OnInit, AfterViewInit, OnDestroy
}
}
},
xaxis : {
xaxis: {
type: 'datetime'
}
};
@@ -216,11 +226,11 @@ export class DashboardComponent implements OnInit, AfterViewInit, OnDestroy
// @ Public methods
// -----------------------------------------------------------------------------------------------------
deviceSummariesForHostGroup(hostGroupWWNs: string[]): any[] {
const deviceSummaries = []
for(const wwn of hostGroupWWNs){
if(this.data.data.summary[wwn]){
deviceSummaries.push(this.data.data.summary[wwn])
deviceSummariesForHostGroup(hostGroupWWNs: string[]): DeviceSummaryModel[] {
const deviceSummaries: DeviceSummaryModel[] = []
for (const wwn of hostGroupWWNs) {
if (this.summaryData[wwn]) {
deviceSummaries.push(this.summaryData[wwn])
}
}
return deviceSummaries
@@ -235,7 +245,7 @@ export class DashboardComponent implements OnInit, AfterViewInit, OnDestroy
}
onDeviceDeleted(wwn: string): void {
delete this.data.data.summary[wwn] // remove the device from the summary list.
delete this.summaryData[wwn] // remove the device from the summary list.
}
/*
@@ -246,16 +256,16 @@ export class DashboardComponent implements OnInit, AfterViewInit, OnDestroy
DURATION_KEY_FOREVER = "forever"
*/
changeSummaryTempDuration(durationKey: string){
changeSummaryTempDuration(durationKey: string): void {
this.tempDurationKey = durationKey
this._smartService.getSummaryTempData(durationKey)
.subscribe((data) => {
this._dashboardService.getSummaryTempData(durationKey)
.subscribe((tempHistoryData) => {
// given a list of device temp history, override the data in the "summary" object.
for(const wwn in this.data.data.summary) {
for (const wwn in this.summaryData) {
// console.log(`Updating ${wwn}, length: ${this.data.data.summary[wwn].temp_history.length}`)
this.data.data.summary[wwn].temp_history = data.data.temp_history[wwn] || []
this.summaryData[wwn].temp_history = tempHistoryData[wwn] || []
}
// Prepare the chart series data
webapp/frontend/src/app/modules/dashboard/dashboard.resolvers.ts
+7 -8
View File
@@ -1,13 +1,13 @@
import { Injectable } from '@angular/core';
import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from '@angular/router';
import { Observable } from 'rxjs';
import { DashboardService } from 'app/modules/dashboard/dashboard.service';
import {Injectable} from '@angular/core';
import {ActivatedRouteSnapshot, Resolve, RouterStateSnapshot} from '@angular/router';
import {Observable} from 'rxjs';
import {DashboardService} from 'app/modules/dashboard/dashboard.service';
import {DeviceSummaryModel} from 'app/core/models/device-summary-model';
@Injectable({
providedIn: 'root'
})
export class DashboardResolver implements Resolve<any>
{
export class DashboardResolver implements Resolve<any> {
/**
* Constructor
*
@@ -29,8 +29,7 @@ export class DashboardResolver implements Resolve<any>
* @param route
* @param state
*/
resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<any>
{
resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<{ [p: string]: DeviceSummaryModel }> {
return this._dashboardService.getSummaryData();
}
}
webapp/frontend/src/app/modules/dashboard/dashboard.service.spec.ts
+44
View File
@@ -0,0 +1,44 @@
import {HttpClient} from '@angular/common/http';
import {DashboardService} from './dashboard.service';
import {of} from 'rxjs';
import {summary} from 'app/data/mock/summary/data'
import {temp_history} from 'app/data/mock/summary/temp_history'
import {DeviceSummaryModel} from 'app/core/models/device-summary-model';
import {SmartTemperatureModel} from 'app/core/models/measurements/smart-temperature-model';
describe('DashboardService', () => {
let service: DashboardService;
let httpClientSpy: jasmine.SpyObj<HttpClient>;
beforeEach(() => {
httpClientSpy = jasmine.createSpyObj('HttpClient', ['get']);
service = new DashboardService(httpClientSpy);
});
it('should unwrap and return getSummaryData() (HttpClient called once)', (done: DoneFn) => {
httpClientSpy.get.and.returnValue(of(summary));
service.getSummaryData().subscribe(value => {
expect(value).toBe(summary.data.summary as { [key: string]: DeviceSummaryModel });
done();
});
expect(httpClientSpy.get.calls.count())
.withContext('one call')
.toBe(1);
});
it('should unwrap and return getSummaryTempData() (HttpClient called once)', (done: DoneFn) => {
// const expectedHeroes: any[] =
// [{ id: 1, name: 'A' }, { id: 2, name: 'B' }];
httpClientSpy.get.and.returnValue(of(temp_history));
service.getSummaryTempData('weekly').subscribe(value => {
expect(value).toBe(temp_history.data.temp_history as { [key: string]: SmartTemperatureModel[] });
done();
});
expect(httpClientSpy.get.calls.count())
.withContext('one call')
.toBe(1);
});
});
webapp/frontend/src/app/modules/dashboard/dashboard.service.ts
+25 -17
View File
@@ -1,16 +1,19 @@
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { BehaviorSubject, Observable } from 'rxjs';
import { tap } from 'rxjs/operators';
import { getBasePath } from 'app/app.routing';
import {Injectable} from '@angular/core';
import {HttpClient} from '@angular/common/http';
import {BehaviorSubject, Observable} from 'rxjs';
import {map, tap} from 'rxjs/operators';
import {getBasePath} from 'app/app.routing';
import {DeviceSummaryResponseWrapper} from 'app/core/models/device-summary-response-wrapper';
import {DeviceSummaryModel} from 'app/core/models/device-summary-model';
import {SmartTemperatureModel} from 'app/core/models/measurements/smart-temperature-model';
import {DeviceSummaryTempResponseWrapper} from 'app/core/models/device-summary-temp-response-wrapper';
@Injectable({
providedIn: 'root'
})
export class DashboardService
{
export class DashboardService {
// Observables
private _data: BehaviorSubject<any>;
private _data: BehaviorSubject<{ [p: string]: DeviceSummaryModel }>;
/**
* Constructor
@@ -32,8 +35,7 @@ export class DashboardService
/**
* Getter for data
*/
get data$(): Observable<any>
{
get data$(): Observable<{ [p: string]: DeviceSummaryModel }> {
return this._data.asObservable();
}
@@ -44,22 +46,28 @@ export class DashboardService
/**
* Get data
*/
getSummaryData(): Observable<any>
{
getSummaryData(): Observable<{ [key: string]: DeviceSummaryModel }> {
return this._httpClient.get(getBasePath() + '/api/summary').pipe(
tap((response: any) => {
map((response: DeviceSummaryResponseWrapper) => {
// console.log("FILTERING=----", response.data.summary)
return response.data.summary
}),
tap((response: { [key: string]: DeviceSummaryModel }) => {
this._data.next(response);
})
);
}
getSummaryTempData(durationKey: string): Observable<any>
{
getSummaryTempData(durationKey: string): Observable<{ [key: string]: SmartTemperatureModel[] }> {
const params = {}
if(durationKey){
if (durationKey) {
params['duration_key'] = durationKey
}
return this._httpClient.get(getBasePath() + '/api/summary/temp', {params: params});
return this._httpClient.get(getBasePath() + '/api/summary/temp', {params: params}).pipe(
map((response: DeviceSummaryTempResponseWrapper) => {
return response.data.temp_history
})
);
}
}
webapp/frontend/src/app/modules/detail/detail.component.spec.ts
-38
View File
@@ -1,38 +0,0 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { HttpClientModule } from '@angular/common/http';
import { DetailComponent } from './detail.component';
import {TreoConfigService} from '@treo/services/config';
import { TREO_APP_CONFIG } from '@treo/services/config/config.constants';
const TREO_APP_CONFIG_PROVIDER = [ { provide: TREO_APP_CONFIG, useValue: TreoConfigService } ];
import { MatDialogModule } from '@angular/material/dialog';
import {DeviceTitlePipe} from 'app/shared/device-title.pipe';
describe('DetailComponent', () => {
let component: DetailComponent;
let fixture: ComponentFixture<DetailComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [
HttpClientModule,
MatDialogModule
],
declarations: [ DetailComponent, DeviceTitlePipe ],
providers: [ TREO_APP_CONFIG_PROVIDER ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(DetailComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
webapp/frontend/src/app/modules/detail/detail.component.ts
+119 -115
View File
@@ -1,18 +1,21 @@
import {AfterViewInit, Component, OnDestroy, OnInit, ViewChild} from '@angular/core';
import humanizeDuration from 'humanize-duration';
import {AfterViewInit, Component, Inject, LOCALE_ID, OnDestroy, OnInit, ViewChild} from '@angular/core';
import {ApexOptions} from 'ng-apexcharts';
import {MatTableDataSource} from '@angular/material/table';
import {MatSort} from '@angular/material/sort';
import {Subject} from 'rxjs';
import {AppConfig} from 'app/core/config/app.config';
import {DetailService} from './detail.service';
import {takeUntil} from 'rxjs/operators';
import {DetailSettingsComponent} from 'app/layout/common/detail-settings/detail-settings.component';
import {MatDialog} from '@angular/material/dialog';
import humanizeDuration from 'humanize-duration';
import {MatSort} from '@angular/material/sort';
import {MatTableDataSource} from '@angular/material/table';
import {Subject} from 'rxjs';
import {TreoConfigService} from '@treo/services/config';
import {AppConfig} from 'app/core/config/app.config';
import {animate, state, style, transition, trigger} from '@angular/animations';
import {formatDate} from '@angular/common';
import { LOCALE_ID, Inject } from '@angular/core';
import {takeUntil} from 'rxjs/operators';
import {DeviceModel} from 'app/core/models/device-model';
import {SmartModel} from 'app/core/models/measurements/smart-model';
import {SmartAttributeModel} from 'app/core/models/measurements/smart-attribute-model';
import {AttributeMetadataModel} from 'app/core/models/thresholds/attribute-metadata-model';
// from Constants.go - these must match
const AttributeStatusPassed = 0
@@ -40,22 +43,23 @@ export class DetailComponent implements OnInit, AfterViewInit, OnDestroy {
* Constructor
*
* @param {DetailService} _detailService
* @param {MatDialog} dialog
* @param {TreoConfigService} _configService
* @param {string} locale
*/
constructor(
private _detailService: DetailService,
public dialog: MatDialog,
private _configService: TreoConfigService,
@Inject(LOCALE_ID) public locale: string
)
{
) {
// Set the private defaults
this._unsubscribeAll = new Subject();
// Set the defaults
this.smartAttributeDataSource = new MatTableDataSource();
// this.recentTransactionsTableColumns = ['status', 'id', 'name', 'value', 'worst', 'thresh'];
this.smartAttributeTableColumns = ['status', 'id', 'name', 'value', 'worst', 'thresh','ideal', 'failure', 'history'];
this.smartAttributeTableColumns = ['status', 'id', 'name', 'value', 'worst', 'thresh', 'ideal', 'failure', 'history'];
this.systemPrefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
@@ -65,14 +69,15 @@ export class DetailComponent implements OnInit, AfterViewInit, OnDestroy {
onlyCritical = true;
// data: any;
expandedAttribute: any | null;
expandedAttribute: SmartAttributeModel | null;
metadata: any;
device: any;
smart_results: any[];
metadata: { [p: string]: AttributeMetadataModel } | { [p: number]: AttributeMetadataModel };
device: DeviceModel;
// tslint:disable-next-line:variable-name
smart_results: SmartModel[];
commonSparklineOptions: Partial<ApexOptions>;
smartAttributeDataSource: MatTableDataSource<any>;
smartAttributeDataSource: MatTableDataSource<SmartAttributeModel>;
smartAttributeTableColumns: string[];
@ViewChild('smartAttributeTable', {read: MatSort})
@@ -91,8 +96,7 @@ export class DetailComponent implements OnInit, AfterViewInit, OnDestroy {
/**
* On init
*/
ngOnInit(): void
{
ngOnInit(): void {
// Subscribe to config changes
this._configService.config$
.pipe(takeUntil(this._unsubscribeAll))
@@ -104,13 +108,13 @@ export class DetailComponent implements OnInit, AfterViewInit, OnDestroy {
// Get the data
this._detailService.data$
.pipe(takeUntil(this._unsubscribeAll))
.subscribe((data) => {
.subscribe((respWrapper) => {
// Store the data
// this.data = data;
this.device = data.data.device;
this.smart_results = data.data.smart_results
this.metadata = data.metadata;
this.device = respWrapper.data.device;
this.smart_results = respWrapper.data.smart_results
this.metadata = respWrapper.metadata;
// Store the table data
@@ -124,8 +128,7 @@ export class DetailComponent implements OnInit, AfterViewInit, OnDestroy {
/**
* After view init
*/
ngAfterViewInit(): void
{
ngAfterViewInit(): void {
// Make the data source sortable
this.smartAttributeDataSource.sort = this.smartAttributeTableMatSort;
}
@@ -133,8 +136,7 @@ export class DetailComponent implements OnInit, AfterViewInit, OnDestroy {
/**
* On destroy
*/
ngOnDestroy(): void
{
ngOnDestroy(): void {
// Unsubscribe from all subscriptions
this._unsubscribeAll.next();
this._unsubscribeAll.complete();
@@ -147,22 +149,23 @@ export class DetailComponent implements OnInit, AfterViewInit, OnDestroy {
getAttributeStatusName(attributeStatus: number): string {
// tslint:disable:no-bitwise
if(attributeStatus === AttributeStatusPassed){
if (attributeStatus === AttributeStatusPassed) {
return 'passed'
} else if ((attributeStatus & AttributeStatusFailedScrutiny) !== 0 || (attributeStatus & AttributeStatusFailedSmart) !== 0 ){
} else if ((attributeStatus & AttributeStatusFailedScrutiny) !== 0 || (attributeStatus & AttributeStatusFailedSmart) !== 0) {
return 'failed'
} else if ((attributeStatus & AttributeStatusWarningScrutiny) !== 0){
} else if ((attributeStatus & AttributeStatusWarningScrutiny) !== 0) {
return 'warn'
}
return ''
// tslint:enable:no-bitwise
}
getAttributeScrutinyStatusName(attributeStatus: number): string {
// tslint:disable:no-bitwise
if ((attributeStatus & AttributeStatusFailedScrutiny) !== 0){
if ((attributeStatus & AttributeStatusFailedScrutiny) !== 0) {
return 'failed'
} else if ((attributeStatus & AttributeStatusWarningScrutiny) !== 0){
} else if ((attributeStatus & AttributeStatusWarningScrutiny) !== 0) {
return 'warn'
} else {
return 'passed'
@@ -172,7 +175,7 @@ export class DetailComponent implements OnInit, AfterViewInit, OnDestroy {
getAttributeSmartStatusName(attributeStatus: number): string {
// tslint:disable:no-bitwise
if ((attributeStatus & AttributeStatusFailedSmart) !== 0){
if ((attributeStatus & AttributeStatusFailedSmart) !== 0) {
return 'failed'
} else {
return 'passed'
@@ -181,138 +184,140 @@ export class DetailComponent implements OnInit, AfterViewInit, OnDestroy {
}
getAttributeName(attribute_data): string {
const attribute_metadata = this.metadata[attribute_data.attribute_id]
if(!attribute_metadata){
getAttributeName(attributeData: SmartAttributeModel): string {
const attributeMetadata = this.metadata[attributeData.attribute_id]
if (!attributeMetadata) {
return 'Unknown Attribute Name'
} else {
return attribute_metadata.display_name
return attributeMetadata.display_name
}
}
getAttributeDescription(attribute_data){
const attribute_metadata = this.metadata[attribute_data.attribute_id]
if(!attribute_metadata){
getAttributeDescription(attributeData: SmartAttributeModel): string {
const attributeMetadata = this.metadata[attributeData.attribute_id]
if (!attributeMetadata) {
return 'Unknown'
} else {
return attribute_metadata.description
return attributeMetadata.description
}
return
}
getAttributeValue(attribute_data){
if(this.isAta()) {
const attribute_metadata = this.metadata[attribute_data.attribute_id]
if(!attribute_metadata){
return attribute_data.value
} else if (attribute_metadata.display_type == 'raw') {
return attribute_data.raw_value
} else if (attribute_metadata.display_type == 'transformed' && attribute_data.transformed_value) {
return attribute_data.transformed_value
getAttributeValue(attributeData: SmartAttributeModel): number {
if (this.isAta()) {
const attributeMetadata = this.metadata[attributeData.attribute_id]
if (!attributeMetadata) {
return attributeData.value
} else if (attributeMetadata.display_type === 'raw') {
return attributeData.raw_value
} else if (attributeMetadata.display_type === 'transformed' && attributeData.transformed_value) {
return attributeData.transformed_value
} else {
return attribute_data.value
return attributeData.value
}
}
else{
return attribute_data.value
} else {
return attributeData.value
}
}
getAttributeValueType(attribute_data){
if(this.isAta()) {
const attribute_metadata = this.metadata[attribute_data.attribute_id]
if(!attribute_metadata){
getAttributeValueType(attributeData: SmartAttributeModel): string {
if (this.isAta()) {
const attributeMetadata = this.metadata[attributeData.attribute_id]
if (!attributeMetadata) {
return ''
} else {
return attribute_metadata.display_type
return attributeMetadata.display_type
}
} else {
return ''
}
}
getAttributeIdeal(attribute_data){
if(this.isAta()){
return this.metadata[attribute_data.attribute_id]?.display_type == 'raw' ? this.metadata[attribute_data.attribute_id]?.ideal : ''
getAttributeIdeal(attributeData: SmartAttributeModel): string {
if (this.isAta()) {
return this.metadata[attributeData.attribute_id]?.display_type === 'raw' ? this.metadata[attributeData.attribute_id]?.ideal : ''
} else {
return this.metadata[attribute_data.attribute_id]?.ideal
return this.metadata[attributeData.attribute_id]?.ideal
}
}
getAttributeWorst(attribute_data){
const attribute_metadata = this.metadata[attribute_data.attribute_id]
if(!attribute_metadata){
return attribute_data.worst
getAttributeWorst(attributeData: SmartAttributeModel): number | string {
const attributeMetadata = this.metadata[attributeData.attribute_id]
if (!attributeMetadata) {
return attributeData.worst
} else {
return attribute_metadata?.display_type == 'normalized' ? attribute_data.worst : ''
return attributeMetadata?.display_type === 'normalized' ? attributeData.worst : ''
}
}
getAttributeThreshold(attribute_data){
if(this.isAta()){
const attribute_metadata = this.metadata[attribute_data.attribute_id]
if(!attribute_metadata || attribute_metadata.display_type == 'normalized'){
return attribute_data.thresh
getAttributeThreshold(attributeData: SmartAttributeModel): number | string {
if (this.isAta()) {
const attributeMetadata = this.metadata[attributeData.attribute_id]
if (!attributeMetadata || attributeMetadata.display_type === 'normalized') {
return attributeData.thresh
} else {
// if(this.data.metadata[attribute_data.attribute_id].observed_thresholds){
//
// } else {
// }
// return ''
return attribute_data.thresh
return attributeData.thresh
}
} else {
return (attribute_data.thresh == -1 ? '' : attribute_data.thresh )
return (attributeData.thresh === -1 ? '' : attributeData.thresh)
}
}
getAttributeCritical(attribute_data){
return this.metadata[attribute_data.attribute_id]?.critical
getAttributeCritical(attributeData: SmartAttributeModel): boolean {
return this.metadata[attributeData.attribute_id]?.critical
}
getHiddenAttributes(){
if (!this.smart_results || this.smart_results.length == 0) {
getHiddenAttributes(): number {
if (!this.smart_results || this.smart_results.length === 0) {
return 0
}
let attributes_length = 0
let attributesLength = 0
const attributes = this.smart_results[0]?.attrs
if (attributes) {
attributes_length = Object.keys(attributes).length
attributesLength = Object.keys(attributes).length
}
return attributes_length - this.smartAttributeDataSource.data.length
return attributesLength - this.smartAttributeDataSource.data.length
}
isAta(): boolean {
return this.device.device_protocol == 'ATA'
return this.device.device_protocol === 'ATA'
}
isScsi(): boolean {
return this.device.device_protocol == 'SCSI'
return this.device.device_protocol === 'SCSI'
}
isNvme(): boolean {
return this.device.device_protocol == 'NVMe'
return this.device.device_protocol === 'NVMe'
}
private _generateSmartAttributeTableDataSource(smart_results){
const smartAttributeDataSource = [];
private _generateSmartAttributeTableDataSource(smartResults: SmartModel[]): SmartAttributeModel[] {
const smartAttributeDataSource: SmartAttributeModel[] = [];
if(smart_results.length == 0){
if (smartResults.length === 0) {
return smartAttributeDataSource
}
const latest_smart_result = smart_results[0];
let attributes = {}
if(this.isScsi()) {
const latestSmartResult = smartResults[0];
let attributes: { [p: string]: SmartAttributeModel } = {}
if (this.isScsi()) {
this.smartAttributeTableColumns = ['status', 'name', 'value', 'thresh', 'history'];
attributes = latest_smart_result.attrs
} else if(this.isNvme()){
attributes = latestSmartResult.attrs
} else if (this.isNvme()) {
this.smartAttributeTableColumns = ['status', 'name', 'value', 'thresh', 'ideal', 'history'];
attributes = latest_smart_result.attrs
attributes = latestSmartResult.attrs
} else {
// ATA
attributes = latest_smart_result.attrs
this.smartAttributeTableColumns = ['status', 'id', 'name', 'value', 'thresh','ideal', 'failure', 'history'];
attributes = latestSmartResult.attrs
this.smartAttributeTableColumns = ['status', 'id', 'name', 'value', 'thresh', 'ideal', 'failure', 'history'];
}
for(const attrId in attributes){
for (const attrId in attributes) {
const attr = attributes[attrId]
// chart history data
@@ -320,18 +325,18 @@ export class DetailComponent implements OnInit, AfterViewInit, OnDestroy {
const attrHistory = []
for (const smart_result of smart_results){
for (const smartResult of smartResults) {
// attrHistory.push(this.getAttributeValue(smart_result.attrs[attrId]))
const chartDatapoint = {
x: formatDate(smart_result.date, 'MMMM dd, yyyy - HH:mm', this.locale),
y: this.getAttributeValue(smart_result.attrs[attrId])
x: formatDate(smartResult.date, 'MMMM dd, yyyy - HH:mm', this.locale),
y: this.getAttributeValue(smartResult.attrs[attrId])
}
const attributeStatusName = this.getAttributeStatusName(smart_result.attrs[attrId].status)
if(attributeStatusName === 'failed') {
const attributeStatusName = this.getAttributeStatusName(smartResult.attrs[attrId].status)
if (attributeStatusName === 'failed') {
chartDatapoint['strokeColor'] = '#F05252'
chartDatapoint['fillColor'] = '#F05252'
} else if (attributeStatusName === 'warn'){
} else if (attributeStatusName === 'warn') {
chartDatapoint['strokeColor'] = '#C27803'
chartDatapoint['fillColor'] = '#C27803'
}
@@ -350,7 +355,7 @@ export class DetailComponent implements OnInit, AfterViewInit, OnDestroy {
}
// determine when to include the attributes in table.
if(!this.onlyCritical || this.onlyCritical && this.metadata[attr.attribute_id]?.critical || attr.value < attr.thresh){
if (!this.onlyCritical || this.onlyCritical && this.metadata[attr.attribute_id]?.critical || attr.value < attr.thresh) {
smartAttributeDataSource.push(attr)
}
}
@@ -362,8 +367,7 @@ export class DetailComponent implements OnInit, AfterViewInit, OnDestroy {
*
* @private
*/
private _prepareChartData(): void
{
private _prepareChartData(): void {
// Account balance
this.commonSparklineOptions = {
@@ -392,7 +396,7 @@ export class DetailComponent implements OnInit, AfterViewInit, OnDestroy {
},
y: {
title: {
formatter: function(seriesName) {
formatter: (seriesName) => {
return '';
}
}
@@ -410,27 +414,28 @@ export class DetailComponent implements OnInit, AfterViewInit, OnDestroy {
};
}
private determineTheme(config:AppConfig): string {
private determineTheme(config: AppConfig): string {
if (config.theme === 'system') {
return this.systemPrefersDark ? 'dark' : 'light'
} else {
return config.theme
}
}
// -----------------------------------------------------------------------------------------------------
// @ Public methods
// -----------------------------------------------------------------------------------------------------
toHex(decimalNumb){
toHex(decimalNumb: number | string): string {
return '0x' + Number(decimalNumb).toString(16).padStart(2, '0').toUpperCase()
}
toggleOnlyCritical(){
toggleOnlyCritical(): void {
this.onlyCritical = !this.onlyCritical
this.smartAttributeDataSource.data = this._generateSmartAttributeTableDataSource(this.smart_results);
}
openDialog() {
openDialog(): void {
const dialogRef = this.dialog.open(DetailSettingsComponent);
dialogRef.afterClosed().subscribe(result => {
@@ -444,8 +449,7 @@ export class DetailComponent implements OnInit, AfterViewInit, OnDestroy {
* @param index
* @param item
*/
trackByFn(index: number, item: any): any
{
trackByFn(index: number, item: any): any {
return index;
// return item.id || index;
}
webapp/frontend/src/app/modules/detail/detail.resolvers.ts
+7 -8
View File
@@ -1,13 +1,13 @@
import { Injectable } from '@angular/core';
import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from '@angular/router';
import { Observable } from 'rxjs';
import { DetailService } from 'app/modules/detail/detail.service';
import {Injectable} from '@angular/core';
import {ActivatedRouteSnapshot, Resolve, RouterStateSnapshot} from '@angular/router';
import {Observable} from 'rxjs';
import {DetailService} from 'app/modules/detail/detail.service';
import {DeviceDetailsResponseWrapper} from 'app/core/models/device-details-response-wrapper';
@Injectable({
providedIn: 'root'
})
export class DetailResolver implements Resolve<any>
{
export class DetailResolver implements Resolve<any> {
/**
* Constructor
*
@@ -29,8 +29,7 @@ export class DetailResolver implements Resolve<any>
* @param route
* @param state
*/
resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<any>
{
resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<DeviceDetailsResponseWrapper> {
return this._detailService.getData(route.params.wwn);
}
}
webapp/frontend/src/app/modules/detail/detail.service.spec.ts
+28
View File
@@ -0,0 +1,28 @@
import {HttpClient} from '@angular/common/http';
import {DetailService} from './detail.service';
import {of} from 'rxjs';
import {sda} from 'app/data/mock/device/details/sda'
import {DeviceDetailsResponseWrapper} from 'app/core/models/device-details-response-wrapper';
describe('DetailService', () => {
describe('#getData', () => {
let service: DetailService;
let httpClientSpy: jasmine.SpyObj<HttpClient>;
beforeEach(() => {
httpClientSpy = jasmine.createSpyObj('HttpClient', ['get']);
service = new DetailService(httpClientSpy);
});
it('should return getData() (HttpClient called once)', (done: DoneFn) => {
httpClientSpy.get.and.returnValue(of(sda));
service.getData('test').subscribe(value => {
expect(value).toBe(sda as DeviceDetailsResponseWrapper);
done();
});
expect(httpClientSpy.get.calls.count())
.withContext('one call')
.toBe(1);
});
})
});
webapp/frontend/src/app/modules/detail/detail.service.ts
+12 -15
View File
@@ -1,16 +1,16 @@
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { BehaviorSubject, Observable } from 'rxjs';
import { tap } from 'rxjs/operators';
import { getBasePath } from 'app/app.routing';
import {Injectable} from '@angular/core';
import {HttpClient} from '@angular/common/http';
import {BehaviorSubject, Observable} from 'rxjs';
import {tap} from 'rxjs/operators';
import {getBasePath} from 'app/app.routing';
import {DeviceDetailsResponseWrapper} from 'app/core/models/device-details-response-wrapper';
@Injectable({
providedIn: 'root'
})
export class DetailService
{
export class DetailService {
// Observables
private _data: BehaviorSubject<any>;
private _data: BehaviorSubject<DeviceDetailsResponseWrapper>;
/**
* Constructor
@@ -19,8 +19,7 @@ export class DetailService
*/
constructor(
private _httpClient: HttpClient
)
{
) {
// Set the private defaults
this._data = new BehaviorSubject(null);
}
@@ -32,8 +31,7 @@ export class DetailService
/**
* Getter for data
*/
get data$(): Observable<any>
{
get data$(): Observable<DeviceDetailsResponseWrapper> {
return this._data.asObservable();
}
@@ -44,10 +42,9 @@ export class DetailService
/**
* Get data
*/
getData(wwn): Observable<any>
{
getData(wwn): Observable<DeviceDetailsResponseWrapper> {
return this._httpClient.get(getBasePath() + `/api/device/${wwn}/details`).pipe(
tap((response: any) => {
tap((response: DeviceDetailsResponseWrapper) => {
this._data.next(response);
})
);
webapp/frontend/src/app/shared/device-title.pipe.spec.ts
+3 -4
View File
@@ -1,6 +1,5 @@
import { DeviceTitlePipe } from './device-title.pipe';
import {FileSizePipe} from "./file-size.pipe";
import {DeviceModel} from "../core/models/device-model";
import {DeviceTitlePipe} from './device-title.pipe';
import {DeviceModel} from 'app/core/models/device-model';
describe('DeviceTitlePipe', () => {
it('create an instance', () => {
@@ -8,7 +7,7 @@ describe('DeviceTitlePipe', () => {
expect(pipe).toBeTruthy();
});
describe('#deviceTitleForType',() => {
describe('#deviceTitleForType', () => {
const testCases = [
{
'device': {
webapp/frontend/src/app/shared/device-title.pipe.ts
+3 -3
View File
@@ -1,4 +1,4 @@
import { Pipe, PipeTransform } from '@angular/core';
import {Pipe, PipeTransform} from '@angular/core';
import {DeviceModel} from 'app/core/models/device-model';
@Pipe({
@@ -36,7 +36,7 @@ export class DeviceTitlePipe implements PipeTransform {
return titleParts.join(' - ')
}
static deviceTitleWithFallback(device, titleType: string): string {
static deviceTitleWithFallback(device: DeviceModel, titleType: string): string {
console.log(`Displaying Device ${device.wwn} with: ${titleType}`)
const titleParts = []
if (device.host_id) titleParts.push(device.host_id)
@@ -48,7 +48,7 @@ export class DeviceTitlePipe implements PipeTransform {
}
transform(device: any, titleType: string = 'name'): string {
transform(device: DeviceModel, titleType: string = 'name'): string {
return DeviceTitlePipe.deviceTitleWithFallback(device, titleType)
}