feat(pulse): store parameters for pulse

Darya Baklanova · web-flow · commit 0bfe8a033620 · 2017-08-23T08:38:51.000+07:00
store parameters for pulse in the LocalStorage
diff --git a/src/app/pulse/charts/aggregation-selector.component.ts b/src/app/pulse/charts/aggregation-selector.component.ts
@@ -3,9 +3,7 @@ import {
   Component,
   EventEmitter,
   Input,
-  OnChanges,
   Output,
-  SimpleChanges,
   ViewChild,
   ViewEncapsulation
 } from '@angular/core';
@@ -17,24 +15,24 @@ import * as debounce from 'lodash/debounce';
   selector: 'cs-aggregation-selector',
   templateUrl: 'aggregation-selector.component.html',
   styles: [
+      `
+      .aggregation-select {
+        margin: 30px 10px 20px;
+      }
+
+      .shift-input {
+        width: 55px;
+      }
+
+      .shift-select {
+        width: 100px;
+      }
     `
-    .aggregation-select {
-      margin: 30px 10px 20px;
-    }
-
-    .shift-input {
-      width: 55px;
-    }
-
-    .shift-select {
-      width: 100px;
-    }
-  `
   ],
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class AggregationSelectorComponent implements OnChanges {
+export class AggregationSelectorComponent {
   @Input() permittedIntervals: any;
   @Output() scaleChange = new EventEmitter();
   @Output() aggregationsChange = new EventEmitter<MdOptionSelectionChange>();
@@ -52,17 +50,6 @@ export class AggregationSelectorComponent implements OnChanges {
     this.emitShiftChange = debounce(this.emitShiftChange, 300);
   }
 
-  public ngOnChanges(changes: SimpleChanges) {
-    if ('permittedIntervals' in changes) {
-      if (this.permittedIntervals) {
-        setTimeout(() => {
-          this.selectedShift = this.permittedIntervals.shifts[0];
-          this.shiftChange.emit(this.selectedShift);
-        });
-      }
-    }
-  }
-
   @Input()
   public get scale() {
     return this.selectedScale;
diff --git a/src/app/pulse/charts/pulse-chart.ts b/src/app/pulse/charts/pulse-chart.ts
@@ -26,30 +26,44 @@ export const defaultChartOptions = {
   maintainAspectRatio: false,
   layout: {
     padding: {
-      left: 20,
-      right: 10
+      left: 80,
+      right: 40
     }
   },
   tooltips: {
     intersect: false,
     mode: 'x'
   },
   scales: {
-    xAxes: [{
-      type: 'time',
-      position: 'bottom',
-      time: {
-        tooltipFormat: 'llll',
-        displayFormats: {
-          second: 'LTS',
-          minute: 'LT',
-          hour: 'LT'
+    xAxes: [
+      {
+        type: 'time',
+        position: 'bottom',
+        time: {
+          tooltipFormat: 'llll',
+          displayFormats: {
+            second: 'LTS',
+            minute: 'LT',
+            hour: 'LT'
+          }
         }
       }
-    }],
-    yAxes: [{
-      ticks: { suggestedMin: 0 }
-    }]
+    ],
+    yAxes: [
+      {
+        ticks: {
+          autoSkip: false,
+          padding: 40,
+          mirror: true,
+          suggestedMin: 0,
+          userCallback(val) {
+            if (val % 1 === 0) {
+              return val;
+            }
+          }
+        }
+      }
+    ]
   }
 };
 
@@ -65,7 +79,7 @@ export const defaultChartConfig = {
 export function getChart(config: Array<any>) {
   return config.map(_ => {
     const options = Object.assign({}, defaultChartOptions, _.options);
-    return Object.assign({}, defaultChartConfig, { ..._, options })
+    return Object.assign({}, defaultChartConfig, { ..._, options });
   });
 }
 
@@ -81,7 +95,8 @@ export abstract class PulseChartComponent {
   public loading = false;
   public error = false;
 
-  constructor(protected pulse: PulseService, protected cd: ChangeDetectorRef) {}
+  constructor(protected pulse: PulseService, protected cd: ChangeDetectorRef) {
+  }
 
   protected setLoading(loading = true) {
     this.loading = loading;
diff --git a/src/app/pulse/charts/pulse-cpu-ram-chart/pulse-cpu-ram-chart.component.ts b/src/app/pulse/charts/pulse-cpu-ram-chart/pulse-cpu-ram-chart.component.ts
@@ -19,6 +19,8 @@ export class PulseCpuRamChartComponent extends PulseChartComponent
             ...defaultChartOptions.scales,
             yAxes: [{
               ticks: {
+                padding: 40,
+                mirror: true,
                 suggestedMin: 0,
                 suggestedMax: 100,
                 userCallback(val) {
@@ -37,6 +39,8 @@ export class PulseCpuRamChartComponent extends PulseChartComponent
             ...defaultChartOptions.scales,
             yAxes: [{
               ticks: {
+                padding: 40,
+                mirror: true,
                 suggestedMin: 0,
                 userCallback(val) {
                   return humanReadableSize(val * 1024);
diff --git a/src/app/pulse/charts/pulse-disk-chart/pulse-disk-chart.component.ts b/src/app/pulse/charts/pulse-disk-chart/pulse-disk-chart.component.ts
@@ -45,9 +45,13 @@ export class PulseDiskChartComponent extends PulseChartComponent implements OnIn
             yAxes: [
               {
                 ticks: {
+                  padding: 40,
+                  mirror: true,
                   suggestedMin: 0,
                   userCallback(val) {
-                    return `${humanReadableSize(val, true)}/s`;
+                    return !!humanReadableSize(val, true)
+                      ? `${humanReadableSize(val, true)}/s`
+                      : null;
                   }
                 }
               }
@@ -133,10 +137,12 @@ export class PulseDiskChartComponent extends PulseChartComponent implements OnIn
           sets.iops.push(readIops, writeIops);
 
 
-          this.charts[2].labels = res.map(_ => new Date(_.time)); // TODO
           const errors = {
-            data: res.map(_ => +_.ioErrors),
-            label: `${this.translations['PULSE.LABELS.DISK_IO_ERRORS']} ${aggregation}`
+            data: res.map(_ => ({
+              x: new Date(_.time),
+              y: +_.ioErrors
+            })),
+            label: `${this.translations['DISK_IO_ERRORS']} ${aggregation}`
           };
           sets.errors.push(errors);
         });
diff --git a/src/app/pulse/charts/pulse-network-chart/pulse-network-chart.component.ts b/src/app/pulse/charts/pulse-network-chart/pulse-network-chart.component.ts
@@ -45,9 +45,13 @@ export class PulseNetworkChartComponent extends PulseChartComponent implements O
             yAxes: [
               {
                 ticks: {
+                  mirror: true,
+                  padding: 40,
                   suggestedMin: 0,
                   userCallback(val) {
-                    return `${humanReadableSizeInBits(val)}/s`;
+                    return !!humanReadableSizeInBits(val)
+                      ? `${humanReadableSizeInBits(val)}/s`
+                      : null;
                   }
                 }
               }
@@ -132,25 +136,35 @@ export class PulseNetworkChartComponent extends PulseChartComponent implements O
           sets.packets.push(readPackets, writePackets);
 
           const readDrops = {
-            data: res.map(_ => +_.readDrops),
+            data: res.map(_ => ({
+              x: new Date(_.time),
+              y: +_.readDrops
+            })),
             label: `${this.translations['PULSE.LABELS.NETWORK_READ_DROPS']} ${aggregation}`
           };
           const writeDrops = {
-            data: res.map(_ => +_.writeDrops),
+            data: res.map(_ => ({
+              x: new Date(_.time),
+              y: +_.writeDrops
+            })),
             label: `${this.translations['PULSE.LABELS.NETWORK_WRITE_DROPS']} ${aggregation}`
           };
-          this.charts[2].labels = res.map(_ => new Date(_.time));
           sets.drops.push(readDrops, writeDrops);
 
           const readErrors = {
-            data: res.map(_ => +_.readErrors),
+            data: res.map(_ => ({
+              x: new Date(_.time),
+              y: +_.readErrors
+            })),
             label: `${this.translations['PULSE.LABELS.NETWORK_READ_ERRORS']} ${aggregation}`
           };
           const writeErrors = {
-            data: res.map(_ => +_.writeErrors),
+            data: res.map(_ => ({
+              x: new Date(_.time),
+              y: +_.writeErrors,
+            })),
             label: `${this.translations['PULSE.LABELS.NETWORK_WRITE_ERRORS']} ${aggregation}`
           };
-          this.charts[3].labels = res.map(_ => new Date(_.time));
           sets.errors.push(readErrors, writeErrors);
         });
 
diff --git a/src/app/pulse/unitsUtils.ts b/src/app/pulse/unitsUtils.ts
@@ -16,7 +16,10 @@ function getSize(size: number, units: Array<string>, kB: number) {
   let u = 0;
 
   if (Math.abs(size) < kB) {
-    return `${size} ${units[u]}`;
+    if (Math.abs(size) <= 1) {
+      return (Math.abs(size) % 1 === 0) ? `${size.toFixed(0)} ${units[u]}` : null;
+    }
+    return `${size.toFixed(1)} ${units[u]}`;
   }
   do {
     size /= kB;
diff --git a/src/app/pulse/vm-pulse/vm-pulse.component.ts b/src/app/pulse/vm-pulse/vm-pulse.component.ts
