1 import { Component, OnInit } from '@angular/core';
2 import { EliotserviceService } from '../eliotservice.service';
3 import { dashboardInfo,appDeployStatus,stabilityStatus,historyStatus } from '../datainterface';
4 import { debug } from 'util';
7 selector: 'app-dashboard',
8 templateUrl: './dashboard.component.html',
9 styleUrls: ['./dashboard.component.scss']
11 export class DashboardComponent implements OnInit {
13 /**chart properties of dashboard */
15 public appChartType: string = 'doughnut';
16 public podsNodesChartType: string = 'doughnut';
17 public historyChartType: string = 'line';
19 public appChartDatasets: Array<any> = [
20 { data: [], label: 'My First dataset' }
23 public podsNodesChartDatasets: Array<any> = [
24 { data: [], label: 'My Firstfe dataset' }
27 public historyChartDatasets: Array<any> = [
30 label: 'Successful Deployment Dataset'
34 // public podsNodesChartLabels: Array<any> = ['Pods-stable', 'Pods-unstable', 'nods-stable', 'nodes-unstable', 'services-running'];
35 // public appChartLabels: Array<any> = ['Deployed-Successful', 'Deployment-Failed', 'Deployment-pending'];
36 // public historyChartLabels: Array<any> = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November','December'];
37 public podsNodesChartLabels: Array<any> = []
38 public appChartLabels: Array<any> = [];
39 public historyChartLabels: Array<any> = [];
41 public appChartColors: Array<any> = [
43 backgroundColor: ['#46BFBD', '#F7464A', '#FDB45C'],
44 hoverBackgroundColor: ['#5AD3D1', '#FF5A5E', '#FFC870'],
48 public podsNodesChartColors: Array<any> = [
50 backgroundColor: ['#58bf28', '#ed5807', '#FDB45C', '#ede613', '#13f2ce'],
51 hoverBackgroundColor: ['#63d62d', '#ff5a00', '#FFC870', '#fff714', '#17ffd9'],
55 public historyChartColors: Array<any> = [
57 backgroundColor: 'rgba(255, 88, 33, .2)',
58 borderColor: 'rgba(200, 99, 132, .7)',
63 dashInfo = {} as dashboardInfo;
64 appStatus = {} as appDeployStatus;
65 stableStatus = {} as stabilityStatus;
66 historyCountStatus = {} as historyStatus;
68 constructor(private serviceobj:EliotserviceService) { }
71 this.getDashboardStatus();
74 /* Chart properties of dashboard */
76 public appChartOptions: any = {
79 public podsNodesChartOptions: any = {
82 public historyChartOptions: any = {
86 /* Chart functions of dashboard */
88 public appChartClicked(e: any): void { }
89 public podsNodesChartClicked(e: any): void { }
90 public appChartHovered(e: any): void { }
91 public podsNodesChartHovered(e: any): void { }
92 public historyChartClicked(e: any): void { }
93 public historyChartHovered(e: any): void { }
97 // this.serviceobj.getNodesArray()
98 // .subscribe(data => {
100 // console.log(data);
101 // this.nodewise = data;
102 // this.nodesArray = this.nodewise.nodesArray;
104 // error => console.log(error));
107 getDashboardStatus() {
109 this.serviceobj.getDashboardData()
112 this.appChartLabels = Object.keys(data.appDeployStatus);
113 this.historyChartLabels = Object.keys(data.historyStatus);
114 this.podsNodesChartLabels = Object.keys(data.stabilityStatus);
115 console.log(this.podsNodesChartDatasets);
116 // this.podsNodesChartDatasets.forEach(
121 this.podsNodesChartDatasets[0].data=Object.values(data.stabilityStatus);
122 this.appChartDatasets[0].data=Object.values(data.appDeployStatus);
123 this.historyChartDatasets[0].data=Object.values(data.historyStatus);
124 Object.values(data.appDeployStatus);
125 Object.values(data.historyStatus);
126 Object.values(data.stabilityStatus);
129 error => console.log(error));