From 3da1d896fe857c909b36386e1f6f6caa46575743 Mon Sep 17 00:00:00 2001 From: mbensass Date: Sat, 5 Jun 2021 16:54:15 +0200 Subject: [PATCH] add-dashboard --- package.json | 6 +- src/app/app.module.ts | 3 - src/app/interfaces/functions.ts | 1 + src/app/interfaces/metrics.ts | 34 ++ src/app/interfaces/namespace.ts | 1 + src/app/layout/layout.routes.ts | 1 + src/app/layout/sidebar/sidebar.template.html | 14 +- src/app/layout/utils/pipes/cpu.pipe.ts | 19 +- src/app/pages/cluster/cluster.service.ts | 38 +- src/app/pages/dashboard/IChart.ts | 8 + .../pages/dashboard/dashboard.component.html | 111 ++++++ .../pages/dashboard/dashboard.component.scss | 359 ++++++++++++++++++ .../dashboard/dashboard.component.spec.ts | 25 ++ .../pages/dashboard/dashboard.component.ts | 276 ++++++++++++++ src/app/pages/dashboard/dashboard.module.ts | 34 ++ .../main-chart/main-chart.component.ts | 153 ++++++++ .../main-chart/main-chart.template.html | 11 + .../functions/metrics => }/metrics.service.ts | 27 +- .../namespace/create/namespace.component.ts | 1 - src/app/pages/namespace/function.service.ts | 9 +- .../functions/details/details.component.ts | 3 +- .../functions/metrics/metrics.component.ts | 4 +- src/app/pages/namespace/namespace.module.ts | 5 +- src/app/pages/namespace/namespace.service.ts | 27 +- src/app/shared/helper.ts | 2 +- src/app/utils/convertMemory.ts | 11 + src/index.html | 1 - yarn.lock | 150 +++++++- 28 files changed, 1248 insertions(+), 86 deletions(-) create mode 100644 src/app/interfaces/metrics.ts create mode 100644 src/app/pages/dashboard/IChart.ts create mode 100644 src/app/pages/dashboard/dashboard.component.html create mode 100644 src/app/pages/dashboard/dashboard.component.scss create mode 100644 src/app/pages/dashboard/dashboard.component.spec.ts create mode 100644 src/app/pages/dashboard/dashboard.component.ts create mode 100644 src/app/pages/dashboard/dashboard.module.ts create mode 100644 src/app/pages/dashboard/main-chart/main-chart.component.ts create mode 100644 src/app/pages/dashboard/main-chart/main-chart.template.html rename src/app/pages/{namespace/functions/metrics => }/metrics.service.ts (76%) diff --git a/package.json b/package.json index f9fc92a..dd94739 100644 --- a/package.json +++ b/package.json @@ -34,6 +34,7 @@ "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", @@ -41,7 +42,8 @@ "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", diff --git a/src/app/app.module.ts b/src/app/app.module.ts index ff407d6..471de72 100644 --- a/src/app/app.module.ts +++ b/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, diff --git a/src/app/interfaces/functions.ts b/src/app/interfaces/functions.ts index b1bb406..b07113d 100644 --- a/src/app/interfaces/functions.ts +++ b/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; diff --git a/src/app/interfaces/metrics.ts b/src/app/interfaces/metrics.ts new file mode 100644 index 0000000..13e7649 --- /dev/null +++ b/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[]; + }; +} diff --git a/src/app/interfaces/namespace.ts b/src/app/interfaces/namespace.ts index 9e05cbf..25e1f67 100644 --- a/src/app/interfaces/namespace.ts +++ b/src/app/interfaces/namespace.ts @@ -10,6 +10,7 @@ export interface Namespace { apiKey: string; status: Status; clusterName: string; + idCluster:string; host: { host:string }; diff --git a/src/app/layout/layout.routes.ts b/src/app/layout/layout.routes.ts index 74aab8b..7af60bc 100644 --- a/src/app/layout/layout.routes.ts +++ b/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'}, ] } ]; diff --git a/src/app/layout/sidebar/sidebar.template.html b/src/app/layout/sidebar/sidebar.template.html index 06e107f..2225021 100644 --- a/src/app/layout/sidebar/sidebar.template.html +++ b/src/app/layout/sidebar/sidebar.template.html @@ -1,6 +1,6 @@