This is an automated email from the ASF dual-hosted git repository.
ccondit pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/yunikorn-web.git
The following commit(s) were added to refs/heads/master by this push:
new d082b14 [YUNIKORN-2957] Improve visual in dashboard page (#221)
d082b14 is described below
commit d082b140ca0d0a76304921299dfbf22301f6f277
Author: SP12893678 <[email protected]>
AuthorDate: Tue Nov 12 14:03:16 2024 -0600
[YUNIKORN-2957] Improve visual in dashboard page (#221)
Closes: #221
Signed-off-by: Craig Condit <[email protected]>
---
angular.json | 1 +
package.json | 2 +
pnpm-lock.yaml | 54 ++++++++++++++++++++++
src/app/app.component.scss | 5 +-
src/app/app.module.ts | 2 +
.../app-history/app-history.component.html | 19 ++++----
.../app-status/app-status.component.html | 33 +++++++------
.../app-status/app-status.component.scss | 3 +-
.../components/area-chart/area-chart.component.ts | 43 +++++++++++++++--
.../card.component.html} | 11 +++--
.../card.component.scss} | 21 +++++++--
.../card.component.ts} | 14 ++++--
.../container-history.component.html | 19 ++++----
.../container-status.component.html | 33 +++++++------
.../container-status.component.scss | 3 +-
.../components/dashboard/dashboard.component.html | 2 +-
.../components/dashboard/dashboard.component.scss | 6 +++
.../components/dashboard/dashboard.component.ts | 26 +++++------
.../donut-chart/donut-chart.component.html | 6 ++-
.../donut-chart/donut-chart.component.scss | 28 +++++++++++
.../donut-chart/donut-chart.component.ts | 6 +++
.../components/queue-v2/queues-v2.component.html | 2 +-
src/app/models/app-status.model.ts | 16 +++++++
src/app/models/partition-info.model.ts | 14 +-----
src/app/utils/constants.ts | 18 ++++++++
25 files changed, 288 insertions(+), 99 deletions(-)
diff --git a/angular.json b/angular.json
index 9fce7aa..31c1b82 100644
--- a/angular.json
+++ b/angular.json
@@ -34,6 +34,7 @@
"styles": [
"src/styles.scss",
"node_modules/@fontsource/roboto/index.css",
+ "node_modules/@fontsource/roboto/300.css",
"node_modules/@fontsource/roboto/500.css",
"node_modules/@fortawesome/fontawesome-free/css/all.css"
],
diff --git a/package.json b/package.json
index c541154..5a2dcff 100644
--- a/package.json
+++ b/package.json
@@ -49,6 +49,7 @@
"angular-material-expansion-panel": "^0.7.2",
"chart.js": "^4.4.4",
"chartjs-adapter-date-fns": "^3.0.0",
+ "color": "^4.2.3",
"d3-flextree": "^2.1.2",
"d3-hierarchy": "^3.1.2",
"d3-selection": "^3.0.0",
@@ -66,6 +67,7 @@
"@angular-devkit/build-angular": "^18.2.6",
"@angular/cli": "^18.2.6",
"@angular/compiler-cli": "^18.2.6",
+ "@types/color": "^4.2.0",
"@types/jasmine": "~5.1.4",
"@types/node": "^20.16.9",
"husky": "^8.0.3",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index b8b9ef9..49f3be3 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -71,6 +71,9 @@ importers:
chartjs-adapter-date-fns:
specifier: ^3.0.0
version: 3.0.0([email protected])([email protected])
+ color:
+ specifier: ^4.2.3
+ version: 4.2.3
d3-flextree:
specifier: ^2.1.2
version: 2.1.2
@@ -117,6 +120,9 @@ importers:
'@angular/compiler-cli':
specifier: ^18.2.6
version:
18.2.6(@angular/[email protected](@angular/[email protected]([email protected])([email protected])))([email protected])
+ '@types/color':
+ specifier: ^4.2.0
+ version: 4.2.0
'@types/jasmine':
specifier: ~5.1.4
version: 5.1.4
@@ -1721,6 +1727,15 @@ packages:
'@types/[email protected]':
resolution: {integrity:
sha512-z9fJ5Im06zvUL548KvYNecEVlA7cVDkGUi6kZusb04mpyEFKCIZJvloCcmpmLaIahDpOQGHaHmG6imtPMmPXGQ==}
+ '@types/[email protected]':
+ resolution: {integrity:
sha512-Ub1MmDdyZ7mX//g25uBAoH/mWGd9swVbt8BseymnaE18SU4po/PjmCrHxqIIRjBo3hV/vh1KGr0eMxUhp+t+dQ==}
+
+ '@types/[email protected]':
+ resolution: {integrity:
sha512-j2K5UJqGTxeesj6oQuGpMgifpT5k9HprgQd8D1Y0lOFqKHl3PJu5GMeS4Y5EgjS55AE6OQxf8mPED9uaGbf4Cg==}
+
+ '@types/[email protected]':
+ resolution: {integrity:
sha512-6+xrIRImMtGAL2X3qYkd02Mgs+gFGs+WsK0b7VVMaO4mYRISwyTjcqNrO0mNSmYEoq++rSLDB2F5HDNmqfOe+A==}
+
'@types/[email protected]':
resolution: {integrity:
sha512-n6Cr2xS1h4uAulPRdlw6Jl6s1oG8KrVilPN2yUITEs+K48EzMJJ3W1xy8K5eWuFvjp3R74AOIGSmp2UfBJ8HFw==}
@@ -2265,6 +2280,13 @@ packages:
[email protected]:
resolution: {integrity:
sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==}
+ [email protected]:
+ resolution: {integrity:
sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==}
+
+ [email protected]:
+ resolution: {integrity:
sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==}
+ engines: {node: '>=12.5.0'}
+
[email protected]:
resolution: {integrity:
sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==}
@@ -3091,6 +3113,9 @@ packages:
[email protected]:
resolution: {integrity:
sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==}
+ [email protected]:
+ resolution: {integrity:
sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==}
+
[email protected]:
resolution: {integrity:
sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==}
engines: {node: '>=8'}
@@ -4328,6 +4353,9 @@ packages:
resolution: {integrity:
sha512-8G+/XDU8wNsJOQS5ysDVO0Etg9/2uA5gR9l4ZwijjlwxBcrU6RPfwi2+jJmbP+Ap1Hlp/nVAaEO4Fj22/SL2gQ==}
engines: {node: ^16.14.0 || >=18.0.0}
+ [email protected]:
+ resolution: {integrity:
sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==}
+
[email protected]:
resolution: {integrity:
sha512-ZA6oR3T/pEyuqwMgAKT0/hAv8oAXckzbkmR0UkUosQ+Mc4RxGoJkRmwHgHufaenlyAgE1Mxgpdcrf75y6XcnDg==}
engines: {node: '>=14.16'}
@@ -6599,6 +6627,16 @@ snapshots:
dependencies:
'@types/node': 20.16.9
+ '@types/[email protected]':
+ dependencies:
+ '@types/color-name': 1.1.5
+
+ '@types/[email protected]': {}
+
+ '@types/[email protected]':
+ dependencies:
+ '@types/color-convert': 2.0.4
+
'@types/[email protected]':
dependencies:
'@types/express-serve-static-core': 5.0.0
@@ -7220,6 +7258,16 @@ snapshots:
[email protected]: {}
+ [email protected]:
+ dependencies:
+ color-name: 1.1.4
+ simple-swizzle: 0.2.2
+
+ [email protected]:
+ dependencies:
+ color-convert: 2.0.1
+ color-string: 1.9.1
+
[email protected]: {}
[email protected]: {}
@@ -8122,6 +8170,8 @@ snapshots:
[email protected]: {}
+ [email protected]: {}
+
[email protected]:
dependencies:
binary-extensions: 2.3.0
@@ -9509,6 +9559,10 @@ snapshots:
transitivePeerDependencies:
- supports-color
+ [email protected]:
+ dependencies:
+ is-arrayish: 0.3.2
+
[email protected]: {}
[email protected]:
diff --git a/src/app/app.component.scss b/src/app/app.component.scss
index cbf78fa..614e8e1 100644
--- a/src/app/app.component.scss
+++ b/src/app/app.component.scss
@@ -318,5 +318,8 @@ ul.breadcrumb a.back:after {
.content-wrapper {
padding: 20px;
- height: calc(100vh - $header-height);
+
+ &:has(.container-fluid) {
+ height: calc(100vh - $header-height);
+ }
}
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 413394b..dd3bc6e 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -63,6 +63,7 @@ import { HealthchecksComponent } from
'@app/components/healthchecks/healthchecks
import { AppNodeUtilizationsComponent } from
'@app/components/app-node-utilizations/app-node-utilizations.component';
import { VerticalBarChartComponent } from
'@app/components/vertical-bar-chart/vertical-bar-chart.component';
import { LicensesModalComponent } from
'@app/components/licenses-modal/licenses-modal.component';
+import { CardComponent } from './components/card/card.component';
@NgModule({
declarations: [
@@ -85,6 +86,7 @@ import { LicensesModalComponent } from
'@app/components/licenses-modal/licenses-
AppNodeUtilizationsComponent,
VerticalBarChartComponent,
LicensesModalComponent,
+ CardComponent,
],
imports: [
BrowserModule,
diff --git a/src/app/components/app-history/app-history.component.html
b/src/app/components/app-history/app-history.component.html
index 10f8f01..ba1d640 100644
--- a/src/app/components/app-history/app-history.component.html
+++ b/src/app/components/app-history/app-history.component.html
@@ -16,13 +16,12 @@
* limitations under the License.
-->
-<mat-card appearance="outlined" class="box-card">
- <mat-card-header>
- <mat-card-title>Application History</mat-card-title>
- </mat-card-header>
- <mat-card-content>
- <div class="history-wrapper">
- <app-area-chart [data]="chartData" tooltipLabel="Running
Applications"></app-area-chart>
- </div>
- </mat-card-content>
-</mat-card>
+<app-card>
+ <ng-container header>
+ <i class="fa fa-area-chart" aria-hidden="true"></i>
+ Application History
+ </ng-container>
+ <div class="history-wrapper">
+ <app-area-chart [data]="chartData" tooltipLabel="Running
Applications"></app-area-chart>
+ </div>
+</app-card>
\ No newline at end of file
diff --git a/src/app/components/app-status/app-status.component.html
b/src/app/components/app-status/app-status.component.html
index 032eff3..d254797 100644
--- a/src/app/components/app-status/app-status.component.html
+++ b/src/app/components/app-status/app-status.component.html
@@ -16,22 +16,21 @@
* limitations under the License.
-->
-<mat-card appearance="outlined" class="box-card">
- <mat-card-header>
- <mat-card-title>Application Status</mat-card-title>
- </mat-card-header>
- <mat-card-content class="thin-card-content">
- <div class="status-wrapper flex-grid">
- <div class="chart-wrapper flex-primary">
- <app-donut-chart [data]="chartData"></app-donut-chart>
- </div>
- <div class="chart-legend flex-primary">
- <div *ngFor="let data of chartData">
- <span class="fa fa-circle" [style.color]="data.color"></span>
- <span class="legend-label">{{ data.name }}</span>
- <span class="legend-value">{{ data.value }}</span>
- </div>
+<app-card>
+ <ng-container header>
+ <i class="fa fa-pie-chart" aria-hidden="true"></i>
+ Application Status
+ </ng-container>
+ <div class="status-wrapper flex-grid">
+ <div class="chart-wrapper flex-primary">
+ <app-donut-chart [data]="chartData"></app-donut-chart>
+ </div>
+ <div class="chart-legend flex-primary">
+ <div *ngFor="let data of chartData">
+ <span class="fa fa-circle" [style.color]="data.color"></span>
+ <span class="legend-label">{{ data.name }}</span>
+ <span class="legend-value">{{ data.value }}</span>
</div>
</div>
- </mat-card-content>
-</mat-card>
+ </div>
+</app-card>
\ No newline at end of file
diff --git a/src/app/components/app-status/app-status.component.scss
b/src/app/components/app-status/app-status.component.scss
index e2229c6..13ed57f 100644
--- a/src/app/components/app-status/app-status.component.scss
+++ b/src/app/components/app-status/app-status.component.scss
@@ -18,7 +18,7 @@
.status-wrapper {
align-items: center;
- gap: 8px;
+ gap: 12px;
height: 220px;
}
.chart-wrapper {
@@ -26,6 +26,7 @@
z-index: 1;
}
.chart-legend {
+ min-width: 140px;
max-width: 200px;
max-height: 220px;
overflow: auto;
diff --git a/src/app/components/area-chart/area-chart.component.ts
b/src/app/components/area-chart/area-chart.component.ts
index 0b4f6ca..e978592 100644
--- a/src/app/components/area-chart/area-chart.component.ts
+++ b/src/app/components/area-chart/area-chart.component.ts
@@ -44,6 +44,8 @@ import 'chartjs-adapter-date-fns';
import { CommonUtil } from '@app/utils/common.util';
import { AreaDataItem } from '@app/models/area-data.model';
import { EventBusService, EventMap } from
'@app/services/event-bus/event-bus.service';
+import { APP_STATUS_COLOR_MAP } from '@app/utils/constants';
+import * as Color from 'color';
Chart.register(
LineElement,
@@ -128,12 +130,21 @@ export class AreaChartComponent implements OnInit,
AfterViewInit, OnChanges, OnD
datasets: [
{
data: chartData,
- backgroundColor: 'rgba(114, 189, 215, 0.5)',
- borderColor: 'rgb(114, 189, 215)',
+ backgroundColor: (context) => {
+ const { ctx, chartArea } = context.chart;
+ if (!ctx || !chartArea) return;
+ const gradient = ctx.createLinearGradient(0, chartArea.top, 0,
chartArea.bottom * 1.2);
+
+ gradient.addColorStop(0,
Color(APP_STATUS_COLOR_MAP['Running']).alpha(0.4).string());
+ gradient.addColorStop(1, 'rgba(255, 255, 255, 0)');
+
+ return gradient;
+ },
+ borderColor: APP_STATUS_COLOR_MAP['Running'],
label: this.tooltipLabel,
fill: 'start',
- pointBackgroundColor: 'rgb(114, 189, 215)',
- pointHoverRadius: 5,
+ pointBackgroundColor: APP_STATUS_COLOR_MAP['Running'],
+ pointHoverRadius: 10,
},
],
},
@@ -152,6 +163,12 @@ export class AreaChartComponent implements OnInit,
AfterViewInit, OnChanges, OnD
},
legend: {
display: true,
+ labels: {
+ color: '#666',
+ font: {
+ weight: 500
+ }
+ }
},
title: {
display: false,
@@ -167,11 +184,29 @@ export class AreaChartComponent implements OnInit,
AfterViewInit, OnChanges, OnD
time: {
unit: 'minute',
},
+ grid: {
+ display: false,
+ },
+ ticks: {
+ color: '#666'
+ },
+ border: {
+ display: false,
+ }
},
y: {
ticks: {
stepSize: 1,
+ color: '#666',
+ },
+ grid: {
+ color: '#ccc',
+ tickWidth: 0
},
+ border: {
+ display: false,
+ dash: [6, 6]
+ }
},
},
},
diff --git a/src/app/components/donut-chart/donut-chart.component.html
b/src/app/components/card/card.component.html
similarity index 82%
copy from src/app/components/donut-chart/donut-chart.component.html
copy to src/app/components/card/card.component.html
index 0666148..5994cd3 100644
--- a/src/app/components/donut-chart/donut-chart.component.html
+++ b/src/app/components/card/card.component.html
@@ -16,6 +16,11 @@
* limitations under the License.
-->
-<div style="width: 100%; height: 100%">
- <canvas class="donut-chart" id="{{ chartContainerId }}"></canvas>
-</div>
+<div class="card-wrapper">
+ <div class="header">
+ <ng-content select="[header]"></ng-content>
+ </div>
+ <div class="body">
+ <ng-content></ng-content>
+ </div>
+</div>
\ No newline at end of file
diff --git a/src/app/components/donut-chart/donut-chart.component.scss
b/src/app/components/card/card.component.scss
similarity index 75%
copy from src/app/components/donut-chart/donut-chart.component.scss
copy to src/app/components/card/card.component.scss
index 9be1f6b..c26d3a3 100644
--- a/src/app/components/donut-chart/donut-chart.component.scss
+++ b/src/app/components/card/card.component.scss
@@ -16,7 +16,22 @@
* limitations under the License.
*/
-.donut-chart {
- width: 100%;
- height: 100%;
+.card-wrapper {
+ border: 2px solid #d5d9e4;
+ border-radius: 8px;
+ background-color: #eee;
+ padding: 16px;
}
+
+.header {
+ color: #172940;
+ font-weight: 600;
+ font-size: 20px;
+ display: flex;
+ align-items: center;
+ gap: 8px;
+}
+
+.body {
+ padding-top: 12px;
+}
\ No newline at end of file
diff --git a/src/app/components/donut-chart/donut-chart.component.scss
b/src/app/components/card/card.component.ts
similarity index 75%
copy from src/app/components/donut-chart/donut-chart.component.scss
copy to src/app/components/card/card.component.ts
index 9be1f6b..eb20fa5 100644
--- a/src/app/components/donut-chart/donut-chart.component.scss
+++ b/src/app/components/card/card.component.ts
@@ -16,7 +16,15 @@
* limitations under the License.
*/
-.donut-chart {
- width: 100%;
- height: 100%;
+import { Component, OnInit, Input } from '@angular/core';
+
+@Component({
+ selector: 'app-card',
+ templateUrl: './card.component.html',
+ styleUrls: ['./card.component.scss'],
+})
+export class CardComponent implements OnInit {
+ constructor() {}
+
+ ngOnInit() {}
}
diff --git
a/src/app/components/container-history/container-history.component.html
b/src/app/components/container-history/container-history.component.html
index 9a4c5ff..f57b612 100644
--- a/src/app/components/container-history/container-history.component.html
+++ b/src/app/components/container-history/container-history.component.html
@@ -16,13 +16,12 @@
* limitations under the License.
-->
-<mat-card appearance="outlined" class="box-card">
- <mat-card-header>
- <mat-card-title>Container History</mat-card-title>
- </mat-card-header>
- <mat-card-content>
- <div class="history-wrapper">
- <app-area-chart [data]="chartData" tooltipLabel="Running
Containers"></app-area-chart>
- </div>
- </mat-card-content>
-</mat-card>
+<app-card>
+ <ng-container header>
+ <i class="fa fa-area-chart" aria-hidden="true"></i>
+ Container History
+ </ng-container>
+ <div class="history-wrapper">
+ <app-area-chart [data]="chartData" tooltipLabel="Running
Containers"></app-area-chart>
+ </div>
+</app-card>
\ No newline at end of file
diff --git
a/src/app/components/container-status/container-status.component.html
b/src/app/components/container-status/container-status.component.html
index f49723d..8b40a7c 100644
--- a/src/app/components/container-status/container-status.component.html
+++ b/src/app/components/container-status/container-status.component.html
@@ -16,22 +16,21 @@
* limitations under the License.
-->
-<mat-card appearance="outlined" class="box-card">
- <mat-card-header>
- <mat-card-title>Container Status</mat-card-title>
- </mat-card-header>
- <mat-card-content class="thin-card-content">
- <div class="status-wrapper flex-grid">
- <div class="chart-wrapper flex-primary">
- <app-donut-chart [data]="chartData"></app-donut-chart>
- </div>
- <div class="chart-legend flex-primary">
- <div *ngFor="let data of chartData">
- <span class="fa fa-circle" [style.color]="data.color"></span>
- <span class="legend-label">{{ data.name }}</span>
- <span class="legend-value">{{ data.value }}</span>
- </div>
+<app-card>
+ <ng-container header>
+ <i class="fa fa-pie-chart" aria-hidden="true"></i>
+ Container Status
+ </ng-container>
+ <div class="status-wrapper flex-grid">
+ <div class="chart-wrapper flex-primary">
+ <app-donut-chart [data]="chartData"></app-donut-chart>
+ </div>
+ <div class="chart-legend flex-primary">
+ <div *ngFor="let data of chartData">
+ <span class="fa fa-circle" [style.color]="data.color"></span>
+ <span class="legend-label">{{ data.name }}</span>
+ <span class="legend-value">{{ data.value }}</span>
</div>
</div>
- </mat-card-content>
-</mat-card>
+ </div>
+</app-card>
\ No newline at end of file
diff --git
a/src/app/components/container-status/container-status.component.scss
b/src/app/components/container-status/container-status.component.scss
index 07ca78d..f147808 100644
--- a/src/app/components/container-status/container-status.component.scss
+++ b/src/app/components/container-status/container-status.component.scss
@@ -18,13 +18,14 @@
.status-wrapper {
align-items: center;
- gap: 8px;
+ gap: 12px;
height: 220px;
}
.chart-wrapper {
max-width: 220px;
}
.chart-legend {
+ min-width: 140px;
max-width: 200px;
margin: 0 auto;
font-size: 0.8em;
diff --git a/src/app/components/dashboard/dashboard.component.html
b/src/app/components/dashboard/dashboard.component.html
index 2ea3792..8195fce 100644
--- a/src/app/components/dashboard/dashboard.component.html
+++ b/src/app/components/dashboard/dashboard.component.html
@@ -16,7 +16,7 @@
* limitations under the License.
-->
-<mat-card appearance="outlined" *ngIf="clusterInfo">
+<mat-card appearance="outlined" *ngIf="clusterInfo" class="top-info">
<div class="flex-grid align-center">
<div class="flex-primary">
<div class="info-label text-uppercase light-text">Name</div>
diff --git a/src/app/components/dashboard/dashboard.component.scss
b/src/app/components/dashboard/dashboard.component.scss
index 2f10123..0e66d7c 100644
--- a/src/app/components/dashboard/dashboard.component.scss
+++ b/src/app/components/dashboard/dashboard.component.scss
@@ -21,6 +21,11 @@
margin-bottom: 20px;
}
+.top-info {
+ border-radius: 8px;
+ box-shadow: rgba(100, 100, 111, 0.1) 0px 2px 12px 0px;
+}
+
.info-label {
font-size: 14px;
line-height: 19px;
@@ -39,6 +44,7 @@
width: 35%;
max-width: 35%;
margin-right: 30px;
+ min-width: 320px;
}
.right-col {
width: 65%;
diff --git a/src/app/components/dashboard/dashboard.component.ts
b/src/app/components/dashboard/dashboard.component.ts
index 063fbb3..42905ce 100644
--- a/src/app/components/dashboard/dashboard.component.ts
+++ b/src/app/components/dashboard/dashboard.component.ts
@@ -26,7 +26,7 @@ import { AreaDataItem } from '@app/models/area-data.model';
import { HistoryInfo } from '@app/models/history-info.model';
import { Applications, Partition } from '@app/models/partition-info.model';
import { EventBusService, EventMap } from
'@app/services/event-bus/event-bus.service';
-import { NOT_AVAILABLE } from '@app/utils/constants';
+import { APP_STATUS_COLOR_MAP, APP_STATUSES, NOT_AVAILABLE } from
'@app/utils/constants';
@Component({
selector: 'app-dashboard',
@@ -121,23 +121,21 @@ export class DashboardComponent implements OnInit {
}
updateAppStatusData(applications: Applications) {
- this.appStatusData = []
- if (applications.New) this.appStatusData.push(new ChartDataItem('New',
applications.New, '#facc54'))
- if (applications.Accepted) this.appStatusData.push(new
ChartDataItem('Accepted', applications.Accepted, '#f4b400'))
- if (applications.Starting) this.appStatusData.push(new
ChartDataItem('Starting', applications.Starting, '#26bbf0'))
- if (applications.Running) this.appStatusData.push(new
ChartDataItem('Running', applications.Running, '#4285f4'))
- if (applications.Completing) this.appStatusData.push(new
ChartDataItem('Completing', applications.Completing, '#60cea5'))
- if (applications.Completed) this.appStatusData.push(new
ChartDataItem('Completed', applications.Completed, '#0f9d58'))
- if (applications.Rejected) this.appStatusData.push(new
ChartDataItem('Rejected', applications.Rejected, '#ff6d00'))
- if (applications.Failing) this.appStatusData.push(new
ChartDataItem('Failing', applications.Failing, '#cc6164'))
- if (applications.Failed) this.appStatusData.push(new
ChartDataItem('Failed', applications.Failed, '#db4437'))
- if (applications.Expired) this.appStatusData.push(new
ChartDataItem('Expired', applications.Expired, '#3949ab'))
- if (applications.Resuming) this.appStatusData.push(new
ChartDataItem('Resuming', applications.Resuming, '#694cb5'))
+ this.appStatusData = [];
+ APP_STATUSES.forEach(appStatus => {
+ if (applications[appStatus]) this.appStatusData.push(
+ new ChartDataItem(
+ appStatus,
+ applications[appStatus],
+ APP_STATUS_COLOR_MAP[appStatus]
+ )
+ );
+ })
}
updateContainerStatusData(info: Partition) {
this.containerStatusData = [
- new ChartDataItem('Running', +info.totalContainers, '#26bbf0'),
+ new ChartDataItem('Running', +info.totalContainers,
APP_STATUS_COLOR_MAP['Running']),
];
}
diff --git a/src/app/components/donut-chart/donut-chart.component.html
b/src/app/components/donut-chart/donut-chart.component.html
index 0666148..2f9ac32 100644
--- a/src/app/components/donut-chart/donut-chart.component.html
+++ b/src/app/components/donut-chart/donut-chart.component.html
@@ -16,6 +16,10 @@
* limitations under the License.
-->
-<div style="width: 100%; height: 100%">
+<div class="donut-chart-wrapper">
<canvas class="donut-chart" id="{{ chartContainerId }}"></canvas>
+ <div class="total-count">
+ <label class="label">Total</label>
+ <h4 class="value">{{ totalCount }}</h4>
+ </div>
</div>
diff --git a/src/app/components/donut-chart/donut-chart.component.scss
b/src/app/components/donut-chart/donut-chart.component.scss
index 9be1f6b..8b75840 100644
--- a/src/app/components/donut-chart/donut-chart.component.scss
+++ b/src/app/components/donut-chart/donut-chart.component.scss
@@ -16,7 +16,35 @@
* limitations under the License.
*/
+.donut-chart-wrapper {
+ position: relative;
+ width: 100%;
+ height: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
.donut-chart {
width: 100%;
height: 100%;
}
+
+.total-count {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ text-align: center;
+
+ .label {
+ font-size: 14px;
+ font-weight: 300;
+ }
+
+ .value {
+ font-size: 28px;
+ font-weight: 500;
+ margin: 4px 0px;
+ }
+}
diff --git a/src/app/components/donut-chart/donut-chart.component.ts
b/src/app/components/donut-chart/donut-chart.component.ts
index 17c0d35..0dce254 100644
--- a/src/app/components/donut-chart/donut-chart.component.ts
+++ b/src/app/components/donut-chart/donut-chart.component.ts
@@ -49,6 +49,10 @@ export class DonutChartComponent implements OnInit,
AfterViewInit, OnChanges, On
constructor(private eventBus: EventBusService) {}
+ get totalCount(): number {
+ return this.data.reduce((acc, item) => acc + item.value, 0);
+ }
+
ngOnInit() {
this.chartContainerId = CommonUtil.createUniqId('donut_chart_');
@@ -104,6 +108,7 @@ export class DonutChartComponent implements OnInit,
AfterViewInit, OnChanges, On
{
data: dataValues,
backgroundColor: colors,
+ borderWidth: 0,
},
],
},
@@ -125,6 +130,7 @@ export class DonutChartComponent implements OnInit,
AfterViewInit, OnChanges, On
position: 'nearest',
},
},
+ cutout: '70%',
},
});
diff --git a/src/app/components/queue-v2/queues-v2.component.html
b/src/app/components/queue-v2/queues-v2.component.html
index cfa6fc9..9b6fbc0 100644
--- a/src/app/components/queue-v2/queues-v2.component.html
+++ b/src/app/components/queue-v2/queues-v2.component.html
@@ -16,7 +16,7 @@
* limitations under the License.
-->
- <div class="queue-container">
+ <div class="queue-container container-fluid">
<div class="queue-content-box">
<div class="header">
<div class="title-group">
diff --git a/src/app/models/app-status.model.ts
b/src/app/models/app-status.model.ts
new file mode 100644
index 0000000..9055a3b
--- /dev/null
+++ b/src/app/models/app-status.model.ts
@@ -0,0 +1,16 @@
+export type AppStatus =
+ | 'New'
+ | 'Accepted'
+ | 'Starting'
+ | 'Running'
+ | 'Rejected'
+ | 'Completing'
+ | 'Completed'
+ | 'Failing'
+ | 'Failed'
+ | 'Expired'
+ | 'Resuming';
+
+export type AppStatusColors = {
+ [K in AppStatus]: string;
+}
\ No newline at end of file
diff --git a/src/app/models/partition-info.model.ts
b/src/app/models/partition-info.model.ts
index c18c8b1..fa98c86 100644
--- a/src/app/models/partition-info.model.ts
+++ b/src/app/models/partition-info.model.ts
@@ -15,6 +15,7 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
+import { AppStatus } from './app-status.model'
export class PartitionInfo {
name: string;
@@ -43,18 +44,7 @@ export interface Capacity {
usedCapacity: string;
}
-export interface Applications {
- New: number;
- Accepted: number;
- Starting: number;
- Running: number;
- Rejected: number;
- Completing: number;
- Completed: number;
- Failing: number;
- Failed: number;
- Expired: number;
- Resuming: number;
+export interface Applications extends Record<AppStatus, number> {
total: number;
}
diff --git a/src/app/utils/constants.ts b/src/app/utils/constants.ts
index da3d13d..be82a4c 100644
--- a/src/app/utils/constants.ts
+++ b/src/app/utils/constants.ts
@@ -16,9 +16,27 @@
* limitations under the License.
*/
+import { AppStatus, AppStatusColors } from "@app/models/app-status.model";
+
export const DEFAULT_PARTITION_VALUE = '';
export const DEFAULT_PROTOCOL = 'http:';
export const NOT_AVAILABLE = 'n/a';
export const PARTITION_DEFAULT = 'default';
export const DEFAULT_BAR_COLOR = 'rgba(66, 133, 244, 1)';
export const CHART_COLORS = ['rgba(66, 133, 244, 1)', 'rgb(219, 68, 55, 1)',
'rgb(244, 180, 0, 1)', 'rgb(15, 157, 88, 1)', 'rgb(255, 109, 0, 1)', 'rgb(57,
73, 171, 1)', 'rgb(250, 204, 84, 1)', 'rgb(38, 187, 240, 1)', 'rgb(204, 97,
100, 1)', 'rgb(96, 206, 165, 1)']
+
+export const APP_STATUSES: AppStatus[] = ['New', 'Accepted', 'Starting',
'Running', 'Rejected', 'Completing', 'Completed', 'Failing', 'Failed',
'Expired', 'Resuming'];
+
+export const APP_STATUS_COLOR_MAP: AppStatusColors = {
+ New: "#facc54",
+ Accepted: "#f4b400",
+ Starting: "#26bbf0",
+ Running: "#234378",
+ Completing: "#60cea5",
+ Completed: "#0f9d58",
+ Rejected: "#ff6d00",
+ Failing: "#cc6164",
+ Failed: "#db4437",
+ Expired: "#3949ab",
+ Resuming: "#694cb5"
+}
\ No newline at end of file
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
