blueprints/common/eliot-ui/frontend-src/src/app/dashboard/dashboard.component.ts

   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';
   5
   6 @Component({
   7   selector: 'app-dashboard',
   8   templateUrl: './dashboard.component.html',
   9   styleUrls: ['./dashboard.component.scss']
  10 })
  11 export class DashboardComponent implements OnInit {
  12
  13   /**chart properties of dashboard */
  14
  15   public appChartType: string = 'doughnut';
  16   public podsNodesChartType: string = 'doughnut';
  17   public historyChartType: string = 'line';
  18
  19   public appChartDatasets: Array<any> = [
  20     { data: [], label: 'My First dataset' }
  21   ];
  22
  23   public podsNodesChartDatasets: Array<any> = [
  24     { data: [], label: 'My Firstfe dataset' }
  25   ];
  26
  27   public historyChartDatasets: Array<any> = [
  28     {
  29       data: [],
  30       label: 'Successful Deployment Dataset'
  31     }
  32   ];
  33
  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> = [];
  40
  41   public appChartColors: Array<any> = [
  42     {
  43       backgroundColor: ['#46BFBD', '#F7464A', '#FDB45C'],
  44       hoverBackgroundColor: ['#5AD3D1', '#FF5A5E', '#FFC870'],
  45       borderWidth: 2,
  46     }
  47   ];
  48   public podsNodesChartColors: Array<any> = [
  49     {
  50       backgroundColor: ['#58bf28', '#ed5807', '#FDB45C', '#ede613', '#13f2ce'],
  51       hoverBackgroundColor: ['#63d62d', '#ff5a00', '#FFC870', '#fff714', '#17ffd9'],
  52       borderWidth: 2,
  53     }
  54   ];
  55   public historyChartColors: Array<any> = [
  56     {
  57       backgroundColor: 'rgba(255, 88, 33, .2)',
  58       borderColor: 'rgba(200, 99, 132, .7)',
  59       borderWidth: 2,
  60     }
  61   ];
  62
  63   dashInfo = {} as dashboardInfo;
  64   appStatus = {} as appDeployStatus;
  65   stableStatus = {} as stabilityStatus;
  66   historyCountStatus = {} as historyStatus;
  67
  68   constructor(private serviceobj:EliotserviceService) { }
  69
  70   ngOnInit() {
  71     this.getDashboardStatus();
  72   }
  73
  74   /* Chart properties of dashboard */
  75
  76   public appChartOptions: any = {
  77     responsive: true
  78   };
  79   public podsNodesChartOptions: any = {
  80     responsive: true
  81   };
  82   public historyChartOptions: any = {
  83     responsive: true
  84   };
  85
  86   /* Chart functions of dashboard */
  87
  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 { }
  94
  95
  96   // getNodes() {
  97   //   this.serviceobj.getNodesArray()
  98   //      .subscribe(data => {
  99   //       debugger;
 100   //       console.log(data);
 101   //       this.nodewise = data;
 102   //       this.nodesArray = this.nodewise.nodesArray;
 103   //      },
 104   //      error => console.log(error));
 105   // }
 106
 107   getDashboardStatus() {
 108
 109     this.serviceobj.getDashboardData()
 110     .subscribe(data => {
 111       console.log(data);
 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(
 117       //   (data)=> {
 118
 119       //   }
 120       // )
 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);
 127       debugger;
 128     },
 129     error => console.log(error));
 130   }
 131
 132 }