mgr/dashboard_v2: add sparkline component

This also adds a template in the table component.

Signed-off-by: Tiago Melo <tmelo@suse.com>

diff --git a/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/components/components.module.ts b/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/components/components.module.ts
index fea298f6d506283e6ff00cb3d00bc16b9d4f91ff..fe65bea599bb1523e529891d1121b15902150e2a 100644 (file)
--- a/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/components/components.module.ts
+++ b/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/components/components.module.ts
@@ -4,6 +4,7 @@ import { NgModule } from '@angular/core';
 import { ChartsModule } from 'ng2-charts/ng2-charts';
 import { AlertModule } from 'ngx-bootstrap';
 
+import { SparklineComponent } from './sparkline/sparkline.component';
 import { ViewCacheComponent } from './view-cache/view-cache.component';
 
 @NgModule({
@@ -12,10 +13,14 @@ import { ViewCacheComponent } from './view-cache/view-cache.component';
     AlertModule.forRoot(),
     ChartsModule
   ],
-  declarations: [ViewCacheComponent],
+  declarations: [
+    ViewCacheComponent,
+    SparklineComponent
+  ],
   providers: [],
   exports: [
-    ViewCacheComponent
+    ViewCacheComponent,
+    SparklineComponent
   ]
 })
 export class ComponentsModule { }

diff --git a/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/components/sparkline/sparkline.component.html b/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/components/sparkline/sparkline.component.html
new file mode 100644 (file)
index 0000000..91f0d73
--- /dev/null
+++ b/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/components/sparkline/sparkline.component.html
@@ -0,0 +1,10 @@
+<div class="chart-container"
+     [ngStyle]="style">
+  <canvas baseChart
+          [labels]="labels"
+          [datasets]="datasets"
+          [options]="options"
+          [colors]="colors"
+          [chartType]="'line'">
+  </canvas>
+</div>

diff --git a/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/components/sparkline/sparkline.component.scss b/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/components/sparkline/sparkline.component.scss
new file mode 100644 (file)
index 0000000..ba8a8eb
--- /dev/null
+++ b/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/components/sparkline/sparkline.component.scss
@@ -0,0 +1,4 @@
+.chart-container {
+  position: relative;
+  margin: auto;
+}

diff --git a/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/components/sparkline/sparkline.component.spec.ts b/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/components/sparkline/sparkline.component.spec.ts
new file mode 100644 (file)
index 0000000..4a879c3
--- /dev/null
+++ b/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/components/sparkline/sparkline.component.spec.ts
@@ -0,0 +1,27 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AppModule } from '../../../app.module';
+import { SparklineComponent } from './sparkline.component';
+
+describe('SparklineComponent', () => {
+  let component: SparklineComponent;
+  let fixture: ComponentFixture<SparklineComponent>;
+
+  beforeEach(
+    async(() => {
+      TestBed.configureTestingModule({
+        imports: [AppModule]
+      }).compileComponents();
+    })
+  );
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SparklineComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

diff --git a/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/components/sparkline/sparkline.component.ts b/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/components/sparkline/sparkline.component.ts
new file mode 100644 (file)
index 0000000..35b3d91
--- /dev/null
+++ b/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/components/sparkline/sparkline.component.ts
@@ -0,0 +1,76 @@
+import { Component, OnChanges, OnInit, SimpleChanges } from '@angular/core';
+import { Input } from '@angular/core';
+
+@Component({
+  selector: 'cd-sparkline',
+  templateUrl: './sparkline.component.html',
+  styleUrls: ['./sparkline.component.scss']
+})
+export class SparklineComponent implements OnInit, OnChanges {
+  @Input() data: any;
+  @Input()
+  style = {
+    height: '30px',
+    width: '100px'
+  };
+
+  public colors: Array<any> = [
+    {
+      backgroundColor: 'rgba(40,140,234,0.2)',
+      borderColor: 'rgba(40,140,234,1)',
+      pointBackgroundColor: 'rgba(40,140,234,1)',
+      pointBorderColor: '#fff',
+      pointHoverBackgroundColor: '#fff',
+      pointHoverBorderColor: 'rgba(40,140,234,0.8)'
+    }
+  ];
+
+  options = {
+    animation: {
+      duration: 0
+    },
+    responsive: true,
+    maintainAspectRatio: false,
+    legend: {
+      display: false
+    },
+    elements: {
+      line: {
+        borderWidth: 1
+      }
+    },
+    tooltips: {
+      enabled: true
+    },
+    scales: {
+      yAxes: [
+        {
+          display: false
+        }
+      ],
+      xAxes: [
+        {
+          display: false
+        }
+      ]
+    }
+  };
+
+  public datasets: Array<any> = [
+    {
+      data: []
+    }
+  ];
+
+  public labels: Array<any> = [];
+
+  constructor() {}
+
+  ngOnInit() {}
+
+  ngOnChanges(changes: SimpleChanges) {
+    this.datasets[0].data = changes['data'].currentValue;
+    this.datasets = [...this.datasets];
+    this.labels = [...Array(changes['data'].currentValue.length)];
+  }
+}

diff --git a/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/datatable/table-key-value/table-key-value.component.spec.ts b/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/datatable/table-key-value/table-key-value.component.spec.ts
index a11686601288e85b56483fdbb1150303f336ae14..12f3893b6144e85143129e61d62e7a3013420bd8 100644 (file)
--- a/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/datatable/table-key-value/table-key-value.component.spec.ts
+++ b/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/datatable/table-key-value/table-key-value.component.spec.ts
@@ -3,6 +3,7 @@ import { FormsModule } from '@angular/forms';
 
 import { NgxDatatableModule } from '@swimlane/ngx-datatable';
 
+import { ComponentsModule } from '../../components/components.module';
 import { TableComponent } from '../table/table.component';
 import { TableKeyValueComponent } from './table-key-value.component';
 
@@ -13,7 +14,7 @@ describe('TableKeyValueComponent', () => {
   beforeEach(async(() => {
     TestBed.configureTestingModule({
       declarations: [ TableComponent, TableKeyValueComponent ],
-      imports: [ FormsModule, NgxDatatableModule ]
+      imports: [ FormsModule, NgxDatatableModule, ComponentsModule ]
     })
     .compileComponents();
   }));

diff --git a/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/datatable/table/table.component.html b/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/datatable/table/table.component.html
index f51aa6f33af67da7886677ac04b1c127560fea2c..8779c937baf9425941659240a89eaadf4d21441e 100644 (file)
--- a/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/datatable/table/table.component.html
+++ b/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/datatable/table/table.component.html
@@ -3,7 +3,7 @@
        *ngIf="toolHeader">
     <!-- actions -->
     <div class="oadatatableactions">
-        <ng-content select="table-actions"></ng-content>
+      <ng-content select="table-actions"></ng-content>
     </div>
     <!-- end actions -->
 
@@ -68,9 +68,15 @@
   </ngx-datatable>
 </div>
 <ng-template cdTableDetails></ng-template>
+
 <!-- cell templates that can be accessed from outside -->
 <ng-template #tableCellBoldTpl
              let-row="row"
              let-value="value">
   <strong>{{ value }}</strong>
 </ng-template>
+
+<ng-template #sparklineTpl
+             let-value="value">
+  <cd-sparkline [data]="value"></cd-sparkline>
+</ng-template>

diff --git a/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/datatable/table/table.component.spec.ts b/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/datatable/table/table.component.spec.ts
index 07a1825d86aea68173a732a59973870d7dda5bd0..37b204ddf658a96b7ff41a042088ce62b7cc911d 100644 (file)
--- a/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/datatable/table/table.component.spec.ts
+++ b/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/datatable/table/table.component.spec.ts
@@ -3,6 +3,7 @@ import { FormsModule } from '@angular/forms';
 
 import { NgxDatatableModule, TableColumn } from '@swimlane/ngx-datatable';
 
+import { ComponentsModule } from '../../components/components.module';
 import { TableComponent } from './table.component';
 
 describe('TableComponent', () => {
@@ -25,7 +26,7 @@ describe('TableComponent', () => {
     async(() => {
       TestBed.configureTestingModule({
         declarations: [TableComponent],
-        imports: [NgxDatatableModule, FormsModule]
+        imports: [NgxDatatableModule, FormsModule, ComponentsModule]
       }).compileComponents();
     })
   );

diff --git a/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/datatable/table/table.component.ts b/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/datatable/table/table.component.ts
index ddbe24f4e90ab57c9bcf98e910e35fbda8b659ee..2cb66623ad93d0192ef41522c2c9baeb9394ee38 100644 (file)
--- a/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/datatable/table/table.component.ts
+++ b/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/datatable/table/table.component.ts
@@ -27,6 +27,7 @@ export class TableComponent implements AfterContentChecked, OnInit, OnChanges {
   @ViewChild(DatatableComponent) table: DatatableComponent;
   @ViewChild(TableDetailsDirective) detailTemplate: TableDetailsDirective;
   @ViewChild('tableCellBoldTpl') tableCellBoldTpl: TemplateRef<any>;
+  @ViewChild('sparklineTpl') sparklineTpl: TemplateRef<any>;
 
   // This is the array with the items to be shown.
   @Input() data: any[];
@@ -100,6 +101,7 @@ export class TableComponent implements AfterContentChecked, OnInit, OnChanges {
 
   _addTemplates () {
     this.cellTemplates.bold = this.tableCellBoldTpl;
+    this.cellTemplates.sparkline = this.sparklineTpl;
   }
 
   ngOnChanges(changes) {

diff --git a/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/enum/cell-template.enum.ts b/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/enum/cell-template.enum.ts
index 19f37c5858aaa0846956c3914a899f1149e27030..88959e0bad8148607c5016ba2761ddf6a2b62e7e 100644 (file)
--- a/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/enum/cell-template.enum.ts
+++ b/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/enum/cell-template.enum.ts
@@ -1,3 +1,4 @@
 export enum CellTemplate {
-  bold = 'bold'
+  bold = 'bold',
+  sparkline = 'sparkline'
 }