update source to Ceph Pacific 16.2.2

[ceph.git] / ceph / src / pybind / mgr / dashboard / frontend / src / app / ceph / dashboard / health-pie / health-pie.component.ts

diff --git a/ceph/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health-pie/health-pie.component.ts b/ceph/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health-pie/health-pie.component.ts
index 0c08973da8a4fae9de950d8cb9a948a20e1abbf3..7cce5ff5f386b17fe5ecfec9510240b182f1ceba 100644 (file)
--- a/ceph/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health-pie/health-pie.component.ts
+++ b/ceph/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health-pie/health-pie.component.ts
@@ -10,12 +10,13 @@ import {
 } from '@angular/core';
 
 import * as Chart from 'chart.js';
-import * as _ from 'lodash';
+import _ from 'lodash';
 import { PluginServiceGlobalRegistrationAndOptions } from 'ng2-charts';
 
-import { ChartTooltip } from '../../../shared/models/chart-tooltip';
-import { DimlessBinaryPipe } from '../../../shared/pipes/dimless-binary.pipe';
-import { DimlessPipe } from '../../../shared/pipes/dimless.pipe';
+import { ChartTooltip } from '~/app/shared/models/chart-tooltip';
+import { DimlessBinaryPipe } from '~/app/shared/pipes/dimless-binary.pipe';
+import { DimlessPipe } from '~/app/shared/pipes/dimless.pipe';
+import styles from '~/styles.scss';
 
 @Component({
   selector: 'cd-health-pie',
@@ -52,11 +53,11 @@ export class HealthPieComponent implements OnChanges, OnInit {
     colors: [
       {
         backgroundColor: [
-          '--color-green',
-          '--color-yellow',
-          '--color-orange',
-          '--color-red',
-          '--color-blue'
+          styles.chartHealthColorGreen,
+          styles.chartHealthColorYellow,
+          styles.chartHealthColorOrange,
+          styles.chartHealthColorRed,
+          styles.chartHealthColorBlue
         ]
       }
     ],
@@ -77,7 +78,7 @@ export class HealthPieComponent implements OnChanges, OnInit {
       tooltips: {
         enabled: true,
         displayColors: false,
-        backgroundColor: 'rgba(0,0,0,0.8)',
+        backgroundColor: styles.chartHealthTootlipBgColor,
         cornerRadius: 0,
         bodyFontSize: 14,
         bodyFontStyle: '600',
@@ -104,8 +105,6 @@ export class HealthPieComponent implements OnChanges, OnInit {
     {
       id: 'center_text',
       beforeDraw(chart: Chart) {
-        const defaultFontColorA = '#151515';
-        const defaultFontColorB = '#72767B';
         const defaultFontFamily = 'Helvetica Neue, Helvetica, Arial, sans-serif';
         Chart.defaults.global.defaultFontFamily = defaultFontFamily;
         const ctx = chart.ctx;
@@ -122,12 +121,12 @@ export class HealthPieComponent implements OnChanges, OnInit {
         ctx.textBaseline = 'middle';
 
         ctx.font = `24px ${defaultFontFamily}`;
-        ctx.fillStyle = defaultFontColorA;
+        ctx.fillStyle = styles.chartHealthCenterTextColor;
         ctx.fillText(label[0], centerX, centerY - 10);
 
         if (label.length > 1) {
           ctx.font = `14px ${defaultFontFamily}`;
-          ctx.fillStyle = defaultFontColorB;
+          ctx.fillStyle = styles.chartHealthCenterTextDescriptionColor;
           ctx.fillText(label[1], centerX, centerY + 10);
         }
         ctx.restore();
@@ -159,8 +158,6 @@ export class HealthPieComponent implements OnChanges, OnInit {
 
     _.merge(this.chartConfig, this.config);
 
-    this.setColorsFromCssVars();
-
     this.prepareFn.emit([this.chartConfig, this.data]);
   }
 
@@ -169,24 +166,6 @@ export class HealthPieComponent implements OnChanges, OnInit {
     this.setChartSliceBorderWidth();
   }
 
-  private setColorsFromCssVars() {
-    this.chartConfig.colors.forEach(
-      (colorEl: { backgroundColor: string[] }, colorIndex: number) => {
-        colorEl.backgroundColor.forEach((bgColor: string, bgColorIndex: number) => {
-          if (bgColor.startsWith('--')) {
-            this.chartConfig.colors[colorIndex].backgroundColor[bgColorIndex] = this.getCssVar(
-              bgColor
-            );
-          }
-        });
-      }
-    );
-  }
-
-  private getCssVar(name: string): string {
-    return getComputedStyle(document.querySelector('.chart-container')).getPropertyValue(name);
-  }
-
   private getChartTooltipBody(body: string[]) {
     const bodySplit = body[0].split(': ');