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

   1 <!-- Toolbar Component -->
   2 <div>
   3     <app-toolbar></app-toolbar>
   4 </div>
   5
   6 <div class="main">
   7     <div class="row chart  ">
   8         <!-- Deployment Status Chart -->
   9         <div class="col-xl-6 col-lg-6">
  10             <div class="card shadow mb-4 ">
  11                 <div class="card-header py-3 d-flex flex-row align-items-center justify-content-center">
  12                     <h6 class="m-0 font-weight-bold text-dark">Deployment Success / Failed / Pending</h6>
  13                 </div>
  14                 <div class="card-body">
  15                     <canvas mdbChart [chartType]="appChartType" [datasets]="appChartDatasets" [labels]="appChartLabels"
  16                         [colors]="appChartColors" [options]="appChartOptions" [legend]="true"
  17                         (chartHover)="appChartHovered($event)" (chartClick)="appChartClicked($event)">
  18                     </canvas>
  19                 </div>
  20             </div>
  21         </div>
  22
  23         <!-- Pods/Nods/Services Chart -->
  24         <div class="col-xl-6 col-lg-6">
  25             <div class="card shadow mb-4">
  26                 <div class="card-header py-3 d-flex flex-row align-items-center justify-content-center">
  27                     <h6 class="m-0 font-weight-bold text-dark">Pods / Nods stability & Services Running</h6>
  28                 </div>
  29                 <div class="card-body">
  30                     <canvas mdbChart [chartType]="podsNodesChartType" [datasets]="podsNodesChartDatasets"
  31                         [labels]="podsNodesChartLabels" [colors]="podsNodesChartColors"
  32                         [options]="podsNodesChartOptions" [legend]="true" (chartHover)="podsNodesChartHovered($event)"
  33                         (chartClick)="podsNodesChartClicked($event)">
  34                     </canvas>
  35                 </div>
  36             </div>
  37         </div>
  38     </div>
  39
  40
  41     <div class="row chart">
  42
  43         <!-- Successful Deployments Chart-->
  44         <div class="col-xl-7 col-lg-6">
  45             <div class="card shadow mb-4">
  46                 <div class="card-header py-3 d-flex flex-row align-items-center justify-content-center">
  47                     <h6 class="m-0 font-weight-bold text-dark">Successful Deployment Dataset</h6>
  48                 </div>
  49
  50                 <div class="success-deploy-card-body">
  51                     <canvas mdbChart [chartType]="historyChartType" [datasets]="historyChartDatasets"
  52                         [labels]="historyChartLabels" [colors]="historyChartColors" [options]="historyChartOptions"
  53                         [legend]="true" (chartHover)="historyChartHovered($event)"
  54                         (chartClick)="historyChartClicked($event)">
  55                     </canvas>
  56                 </div>
  57             </div>
  58         </div>
  59         <!-- New Application Deployment Plus Icon -->
  60         <div class="col-xl-5 col-lg-6">
  61             <div class="card shadow mb-4">
  62                 <div class="card-header py-3 d-flex flex-row align-items-center justify-content-center">
  63                     <h6 class="m-0 font-weight-bold text-dark">New Application / Package (csar) Deployment</h6>
  64                 </div>
  65
  66                 <div class="new-app-card-body">
  67                     <div class="chart-pie pt-4 pb-2">
  68                         <div class="col d-flex justify-content-center">
  69                             <img src="./../../assets/images/plus-1.png" height="180" [routerLink]="'/deployments'"
  70                                 class="mat-elevation-z8">
  71                         </div>
  72                     </div>
  73                 </div>
  74             </div>
  75         </div>
  76     </div>
  77 </div>