[YUNIKORN-2957] Improve visual in dashboard page (#221)

Closes: #221 Signed-off-by: Craig Condit <[email protected]>
apache · Nov 12, 2024 · d082b14 · d082b14
1 parent 3d47c5d
commit d082b14
Show file tree

Hide file tree

Showing 25 changed files with 344 additions and 90 deletions.
diff --git 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
@@ -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
diff --git 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
@@ -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
@@ -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>
diff --git 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>
diff --git a/src/app/components/app-status/app-status.component.scss b/src/app/components/app-status/app-status.component.scss
@@ -18,14 +18,15 @@
 
 .status-wrapper {
   align-items: center;
-  gap: 8px;
+  gap: 12px;
   height: 220px;
 }
 .chart-wrapper {
   max-width: 220px;
   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
@@ -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/card/card.component.html b/src/app/components/card/card.component.html
@@ -0,0 +1,26 @@
+<!--
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ -->
+
+<div class="card-wrapper">
+  <div class="header">
+    <ng-content select="[header]"></ng-content>
+  </div>
+  <div class="body">
+    <ng-content></ng-content>
+  </div>
+</div>
diff --git a/src/app/components/card/card.component.scss b/src/app/components/card/card.component.scss
@@ -0,0 +1,37 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.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;
+}