adding device protocl and type to the. Adding class for parsing smartctl --scan json output, for device detection. added an example/test file for smartctl -x -j added a placeholder settings panel. moved dashboard & details compoonent out of "Admin" directory.

2020-09-16 08:09:50 -07:00
parent 98415e625d
commit 5101a37964
27 changed files with 1957 additions and 25 deletions
@@ -0,0 +1,197 @@
+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 { ApexOptions } from 'ng-apexcharts';
+import { DashboardService } from 'app/modules/dashboard/dashboard.service';
+import * as moment from "moment";
+import {MatDialog} from '@angular/material/dialog';
+import { DashboardSettingsComponent } from 'app/layout/common/dashboard-settings/dashboard-settings.component';
+
+@Component({
+    selector       : 'example',
+    templateUrl    : './dashboard.component.html',
+    styleUrls      : ['./dashboard.component.scss'],
+    encapsulation  : ViewEncapsulation.None,
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class DashboardComponent implements OnInit, AfterViewInit, OnDestroy
+{
+    data: any;
+    temperatureOptions: ApexOptions;
+
+    // Private
+    private _unsubscribeAll: Subject<any>;
+
+    /**
+     * Constructor
+     *
+     * @param {SmartService} _smartService
+     */
+    constructor(
+        private _smartService: DashboardService,
+        public dialog: MatDialog
+    )
+    {
+        // Set the private defaults
+        this._unsubscribeAll = new Subject();
+
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Lifecycle hooks
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * On init
+     */
+    ngOnInit(): void
+    {
+        // Get the data
+        this._smartService.data$
+            .pipe(takeUntil(this._unsubscribeAll))
+            .subscribe((data) => {
+
+                // Store the data
+                this.data = data;
+
+                // Prepare the chart data
+                this._prepareChartData();
+            });
+    }
+
+    /**
+     * After view init
+     */
+    ngAfterViewInit(): void
+    {}
+
+    /**
+     * On destroy
+     */
+    ngOnDestroy(): void
+    {
+        // Unsubscribe from all subscriptions
+        this._unsubscribeAll.next();
+        this._unsubscribeAll.complete();
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Private methods
+    // -----------------------------------------------------------------------------------------------------
+    private _deviceDataTemperatureSeries() {
+        var deviceTemperatureSeries = []
+
+        for(let device of this.data.data){
+            var deviceSeriesMetadata = {
+                name: `/dev/${device.device_name}`,
+                data: []
+            }
+            for(let smartResults of device.smart_results){
+                let newDate = new Date(smartResults.CreatedAt);
+                deviceSeriesMetadata.data.push({
+                    x: newDate,
+                    y: smartResults.temp
+                })
+            }
+            deviceTemperatureSeries.push(deviceSeriesMetadata)
+        }
+        return deviceTemperatureSeries
+    }
+    /**
+     * Prepare the chart data from the data
+     *
+     * @private
+     */
+    private _prepareChartData(): void
+    {
+        // Account balance
+        this.temperatureOptions = {
+            chart  : {
+                animations: {
+                    speed           : 400,
+                    animateGradually: {
+                        enabled: false
+                    }
+                },
+                fontFamily: 'inherit',
+                foreColor : 'inherit',
+                width     : '100%',
+                height    : '100%',
+                type      : 'area',
+                sparkline : {
+                    enabled: true
+                }
+            },
+            colors : ['#A3BFFA', '#667EEA'],
+            fill   : {
+                colors : ['#CED9FB', '#AECDFD'],
+                opacity: 0.5,
+                type   : 'solid'
+            },
+            series : this._deviceDataTemperatureSeries(),
+            stroke : {
+                curve: 'straight',
+                width: 2
+            },
+            tooltip: {
+                theme: 'dark',
+                x    : {
+                    format: 'MMM dd, yyyy hh:mm:ss'
+                },
+                y    : {
+                    formatter: (value) => {
+                        return value + '°C';
+                    }
+                }
+            },
+            xaxis  : {
+                type: 'datetime'
+            }
+        };
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Public methods
+    // -----------------------------------------------------------------------------------------------------
+
+    openDialog() {
+        const dialogRef = this.dialog.open(DashboardSettingsComponent);
+
+        dialogRef.afterClosed().subscribe(result => {
+            console.log(`Dialog result: ${result}`);
+        });
+    }
+
+    /**
+     * Track by function for ngFor loops
+     *
+     * @param index
+     * @param item
+     */
+    trackByFn(index: number, item: any): any
+    {
+        return item.id || index;
+    }
+
+    humanizeHours(hours: number): string {
+        if(!hours){
+            return '--'
+        }
+
+        var value: number
+        let unit = ""
+        if(hours > (24*365)){ //more than a year
+            value = Math.round((hours/(24*365)) * 10)/10
+            unit = "years"
+        } else if (hours > 24){
+            value = Math.round((hours/24) *10 )/10
+            unit = "days"
+        } else{
+            value = hours
+            unit = "hours"
+        }
+        return `${value} ${unit}`
+    }
+}