add-dashboard

package.json

@@ -34,14 +34,16 @@
     "angular2-text-mask": "8.0.5",
     "animate.css": "3.5.2",
     "ansi_up": "^4.0.4",
+    "apexcharts": "^3.26.3",
     "awesome-bootstrap-checkbox": "1.0.1",
     "bootstrap": "4.3.1",
     "bootstrap-colorpicker": "2.5.3",
     "bootstrap-datepicker": "1.7.1",
     "bootstrap-markdown": "2.10.0",
     "bootstrap-select": "1.12.4",
     "bootstrap-slider": "9.8.1",
-    "core-js": "2.4.1",
+    "chart.js": "2.9.3",
+    "core-js": "^2.0.0",
     "cron-validator": "^1.2.1",
     "d3": "3.5.17",
     "dropzone": "5.1.1",
@@ -65,6 +67,8 @@
     "markdown": "0.5.0",
     "moment": "^2.25.3",
     "morris.js": "0.5.0",
+    "ng-apexcharts": "^1.5.10",
+    "ng2-charts": "^2.4.2",
     "ng2-select2": "^1.0.0-beta.11",
     "ng5-slider": "^1.2.4",
     "ngx-bootstrap": "5.0.0",

src/app/app.module.ts

@@ -18,8 +18,6 @@ import {MicroFunctionService} from './shared/services/micro-function.service';
 import {LoaderModule} from './components/loader/loader.module';
 import {LoaderAppComponent} from './pages/loader/loader.component';
 
-
-
 const APP_PROVIDERS = [
   AppConfig,
   LoginService,
@@ -34,7 +32,6 @@ const APP_PROVIDERS = [
     LoaderAppComponent,
   ],
   imports: [
-    BrowserModule,
     BrowserAnimationsModule,
     FormsModule,
     HttpClientModule,

src/app/interfaces/functions.ts

@@ -4,6 +4,7 @@ import {Status} from './status';
 export interface Functions {
 
   idFunctions: string;
+  id: string;
   name: string;
   allocated: boolean;
   memory: string;

src/app/interfaces/metrics.ts

@@ -0,0 +1,34 @@
+export interface IMetricsResult {
+  metric: {
+    [name: string]: string;
+    instance: string;
+    node?: string;
+    pod?: string;
+    kubernetes?: string;
+    kubernetes_node?: string;
+    kubernetes_namespace?: string;
+  };
+  values: [number, string][];
+  lastPoints: number;
+}
+
+export interface IMetricsCluster {
+  memoryUsage?: any,
+  memoryRequests?: any,
+  memoryLimits?: any,
+  memoryCapacity?: any,
+  cpuUsage?: any,
+  cpuRequests?: any,
+  cpuLimits?: any,
+  cpuCapacity?: any,
+  podUsage?: any,
+  podCapacity?: any,
+}
+
+export interface IMetrics {
+  status: string;
+  data: {
+    resultType: string;
+    result: IMetricsResult[];
+  };
+}

src/app/interfaces/namespace.ts

@@ -10,6 +10,7 @@ export interface Namespace {
   apiKey: string;
   status: Status;
   clusterName: string;
+  idCluster:string;
   host: { host:string };
 
 

src/app/layout/layout.routes.ts

@@ -9,6 +9,7 @@ const routes: Routes = [
       {path: 'cli', loadChildren: '../pages/cli/cli.module#CliModule'},
       {path: 'cluster', loadChildren: '../pages/cluster/cluster.module#ClusterModule'},
       {path: 'settings', loadChildren: '../pages/settings/settings.module#SettingsModule'},
+      {path: 'dashboard', loadChildren: '../pages/dashboard/dashboard.module#DashboardModule'},
     ]
   }
 ];

src/app/layout/sidebar/sidebar.template.html

@@ -1,6 +1,6 @@
 <div class="js-sidebar-content">
   <header class="logo">
-    <a href="index.html"><strong>Micro<i class="fa fa-flash"></i></strong>Function</a>
+    <a href="index.html"><strong>Micro<i class="fa fa-flash"></i></strong>Functions</a>
   </header>
     <div class="sidebar-status d-md-none dropdown" dropdown [autoClose]="false"
        (isOpenChange)="toggleSidebarOverflow($event)"
@@ -10,16 +10,12 @@
   <!-- main notification links are placed inside of .sidebar-nav -->
   <ul class="sidebar-nav">
     <li routerLinkActive="active">
-      <a class="collapsed" data-target="#sidebar-dashboard" data-toggle="collapse" data-parent="#sidebar">
-        <span class="icon">
-          <i class="fi flaticon-home"></i>
-        </span>
+      <a [routerLink]=" ['dashboard'] " class="collapsed">
+     <span class="icon">
+       <i class="fa fa-dashboard"></i>
+     </span>
         Dashboard
-        <i class="toggle fa fa-angle-down"></i>
       </a>
-      <ul id="sidebar-dashboard" class="collapse">
-        is coming
-      </ul>
     </li>
     <li routerLinkActive="active" class="active" tooltip="Creating a new namespace.">
       <a [routerLink]=" ['namespace'] " class="collapsed">

src/app/layout/utils/pipes/cpu.pipe.ts

@@ -15,17 +15,14 @@ export class CpuPipe implements PipeTransform {
 
 }
 
-const formateCpu = (value) => {
+export const formateCpu = (value) => {
 
-  if (value === 0) {
-    return 0;
-  }
-  if (value < 10) {
-    return value.toFixed(3);
-  }
-  if (value < 100) {
-    return value.toFixed(2);
-  }
-  return value.toFixed(1);
+  const float = parseFloat(`${value}`);
+
+  if (float == 0) return "0";
+  if (float < 10) return float.toFixed(3);
+  if (float < 100) return float.toFixed(2);
+
+  return float.toFixed(1);
 
 };

src/app/pages/cluster/cluster.service.ts

@@ -1,11 +1,9 @@
-import { Injectable } from '@angular/core';
+import {Injectable} from '@angular/core';
 import {MicroFunctionService} from '../../shared/services/micro-function.service';
 import {Observable, throwError} from 'rxjs';
-
 import {catchError, map} from 'rxjs/operators';
-import {Cluster, SupportVersion} from '../../interfaces/cluster';
+import {Cluster} from '../../interfaces/cluster';
 import {VisibilityCluster} from '../../enums/visibility.cluster';
-import {StatusHist} from '../../interfaces/status.hist';
 import {Response} from "../../interfaces/response";
 
 @Injectable({
@@ -17,8 +15,6 @@ export class ClusterService extends MicroFunctionService {
   };
 
 
-
-
   public addCluster(name: string, config: string, visibility: VisibilityCluster): Observable<any> {
     const url: string = this.urls.cluster;
     return this.http.post<Response>(url, {name, config, visibility}).pipe(catchError((err: any) => {
@@ -32,9 +28,9 @@ export class ClusterService extends MicroFunctionService {
     return this.http.get<Response>(url).pipe(
       map((response: Response) => response.data),
       catchError((err: any) => {
-      this.toastr.error(err);
-      return throwError('error');
-    }));
+        this.toastr.error(err);
+        return throwError('error');
+      }));
   }
 
   deleteClusterById(id: any) {
@@ -52,6 +48,7 @@ export class ClusterService extends MicroFunctionService {
       return throwError('error');
     }));
   }
+
   uninstallClusterById(id: any) {
     const url: string = `${this.urls.cluster}${id}/uninstall`;
     return this.http.get<string>(url).pipe(catchError((err: any) => {
@@ -65,17 +62,28 @@ export class ClusterService extends MicroFunctionService {
     return this.http.get<Response>(url).pipe(
       map((response: Response) => response.data),
       catchError((err: any) => {
-      this.toastr.error(err);
-      return throwError('error');
-    }));
+        this.toastr.error(err);
+        return throwError('error');
+      }));
+  }
+
+  getMetrics(idCluster: any, range?: string) {
+    const url: string = `${this.urls.cluster}${idCluster}/metrics`;
+    return this.http.get<Response>(url,range ? {params:{'range':range}} :{}).pipe(
+      map((response: Response) => response.data),
+      catchError((err: any) => {
+        this.toastr.error(err);
+        return throwError('error');
+      }));
   }
+
   listSupportVersion() {
     const url: string = `${this.urls.cluster}support-version`;
     return this.http.get<Response>(url).pipe(
       map((response: Response) => response.data),
       catchError((err: any) => {
-      this.toastr.error(err);
-      return throwError('error');
-    }));
+        this.toastr.error(err);
+        return throwError('error');
+      }));
   }
 }

src/app/pages/dashboard/IChart.ts

@@ -0,0 +1,8 @@
+export interface IMainChart {
+  name: string,
+  data: number[],
+  categories: string[],
+  min?: number;
+  max?: number;
+  type:'CPU' | 'MEMORY'
+};

src/app/pages/dashboard/dashboard.component.html

@@ -0,0 +1,111 @@
+<div class="analytics-page">
+
+
+  <div class="row">
+    <div class="col-xs-6 col-sm-offset-3"><h1>Analytics Cluster : </h1></div>
+    <div class="col-xs-6 col-sm-offset-3">
+      <select2 id="clusters-select"
+               (valueChanged)="clustersChanged($event)" [width]="250"
+               [data]="clustersSelected" [options]="select2Options"></select2>
+    </div>
+    <div class="col-xs-6 col-sm-2">
+      <select2 id="namespace-select"
+               (valueChanged)="namespacesChanged($event)" [width]="250"
+               [data]="namespaceSelected" [options]="select2Options"></select2>
+    </div>
+    <div class="col-xs-3 col-sm-2">
+      <select2 id="functions-select"
+                [width]="250" (valueChanged)="functionsChanged($event)"
+               [data]="functionsSelected" [options]="select2Options"></select2>
+    </div>
+  </div>
+
+
+  <div class="sidesWrapper">
+    <div class="analyticsSide">
+      <div class="row">
+        <div class="col-12 col-sm-6 col-lg-3">
+          <div class="pb-5 h-100">
+            <widget class="h-100 mb-0"
+                    [title]="'CPU'"
+                    [close]="true"
+            >
+              <h6>Usage: {{metricsCluster?.cpuUsage | CpuPipe}}</h6>
+              <progressbar class="mb-1 progress-xs"
+                           [value]="(metricsCluster?.cpuUsage *  100) / metricsCluster?.cpuCapacity"
+                           type="primary"></progressbar>
+              <h6>Requests: {{metricsCluster?.cpuRequests | CpuPipe}}</h6>
+              <progressbar class="mb-1 progress-xs"
+                           [value]="(metricsCluster?.cpuRequests *  100) / metricsCluster?.cpuCapacity"
+                           type="primary"></progressbar>
+              <h6>Limits: {{metricsCluster?.cpuLimits | CpuPipe}}</h6>
+              <progressbar class="mb-1 progress-xs"
+                           [value]="(metricsCluster?.cpuLimits *  100) / metricsCluster?.cpuCapacity"
+                           type="primary"></progressbar>
+              <h6>Capacity: {{metricsCluster?.cpuCapacity }}</h6>
+            </widget>
+          </div>
+        </div>
+        <div class="col-12 col-sm-6 col-lg-3">
+          <div class="pb-5 h-100">
+            <widget class="h-100 mb-0"
+                    [title]="'Memory'"
+                    [close]="true"
+                    [fetchingData]="false"
+            >
+              <h6>Usage: {{metricsCluster?.memoryUsage | MemoryPipe}}</h6>
+              <progressbar class="mb-1 progress-xs"
+                           [value]="(metricsCluster?.memoryUsage *  100) / metricsCluster?.memoryCapacity"
+                           type="primary"></progressbar>
+              <h6>Requests: {{metricsCluster?.memoryRequests | MemoryPipe}}</h6>
+              <progressbar class="mb-1 progress-xs"
+                           [value]="(metricsCluster?.memoryRequests *  100) / metricsCluster?.memoryCapacity"
+                           type="primary"></progressbar>
+              <h6>Limits: {{metricsCluster?.memoryLimits | MemoryPipe}}</h6>
+              <progressbar class="mb-1 progress-xs"
+                           [value]="(metricsCluster?.memoryLimits *  100) / metricsCluster?.memoryCapacity"
+                           type="primary"></progressbar>
+              <h6>Capacity: {{metricsCluster?.memoryCapacity | MemoryPipe}}</h6>
+            </widget>
+          </div>
+        </div>
+        <div class="col-12 col-sm-6 col-lg-3">
+          <div class="pb-5 h-100">
+            <widget class="h-100 mb-0"
+                    [title]="'Pods'"
+                    [close]="true"
+            >
+              <h6>Usage: {{metricsCluster?.podUsage }}</h6>
+              <progressbar class="mb-1 progress-xs"
+                           [value]="(metricsCluster?.podUsage *  100) / metricsCluster?.podCapacity"
+                           type="primary"></progressbar>
+              <h6>Capacity: {{metricsCluster?.podCapacity }}</h6>
+            </widget>
+          </div>
+        </div>
+        <div class="col-12  ">
+          <widget class="mb-12" id="main-chart"
+                  [customHeader]="true"
+                  [collapse]="true"
+                  [close]="true"
+                  [fetchingData]="isReceiving"
+                  [bodyClass]="'mt-3'"
+          >
+            <div class="btn-group">
+              <button class="btn btn-default width-100 mb-xs active" [ngClass]="{'active':chartSelected === 'CPU'}"
+                      role="button" (click)="chartSelectedAction('CPU')">
+                CPU
+              </button>
+              <button class="btn btn-default width-100 mb-xs" role="button"
+                      [ngClass]="{'active':chartSelected === 'MEMORY'}" (click)="chartSelectedAction('MEMORY')">
+                Memory
+              </button>
+            </div>
+            <main-chart [data]="data" [isReceiving]="isReceiving"></main-chart>
+          </widget>
+        </div>
+      </div>
+    </div>
+  </div>
+
+</div>