mgr/dashboard: Updated colors in PG Status chart

* For consistency:
  Set 'Clean' status color to 'HEALTH_OK' color
  (Cluster Status card).

  Set 'Warning' status color to 'HEALTH_WARN' color.

  'Working' (blue) & 'Unknown' (red) are kept due to
  previous consensus about these complementary colors
  in doughnut/pie charts.

* Renamed Health Pie colors for the sake of clarity.

Signed-off-by: Alfonso Martínez <almartin@redhat.com>

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health-pie/health-pie-color.enum.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health-pie/health-pie-color.enum.ts
index ce6e931c5a1936ae0b3fefec39d2cd7dc778be49..fbeadcc2d3f89e6acd537473cc127acdf9452df1 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health-pie/health-pie-color.enum.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health-pie/health-pie-color.enum.ts
@@ -1,8 +1,7 @@
 export enum HealthPieColor {
-  // Names inspired by https://encycolorpedia.com
-  MEDIUM_LIGHT_SHADE_PINK_RED = '#ff7592',
-  MEDIUM_DARK_SHADE_CYAN_BLUE = '#1d699d',
-  LIGHT_SHADE_BROWN = '#fcd0a1',
-  MEDIUM_DARK_SHADE_BLUE_MAGENTA = '#564d65',
-  SHADE_GREEN_CYAN = '#2cda9d'
+  DEFAULT_RED = '#ff7592',
+  DEFAULT_BLUE = '#1d699d',
+  DEFAULT_ORANGE = '#ffa500',
+  DEFAULT_MAGENTA = '#564d65',
+  DEFAULT_GREEN = '#00bb00'
 }

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health-pie/health-pie.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health-pie/health-pie.component.ts
index e346e3933ccb68843f188ed0f78b8e3bdd82a062..94daabbb8e74cf9c6677a6e1c9395c640ffb0d97 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health-pie/health-pie.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health-pie/health-pie.component.ts
@@ -126,11 +126,11 @@ export class HealthPieComponent implements OnChanges, OnInit {
     this.chartConfig.colors = [
       {
         backgroundColor: [
-          HealthPieColor.MEDIUM_LIGHT_SHADE_PINK_RED,
-          HealthPieColor.MEDIUM_DARK_SHADE_CYAN_BLUE,
-          HealthPieColor.LIGHT_SHADE_BROWN,
-          HealthPieColor.SHADE_GREEN_CYAN,
-          HealthPieColor.MEDIUM_DARK_SHADE_BLUE_MAGENTA
+          HealthPieColor.DEFAULT_RED,
+          HealthPieColor.DEFAULT_BLUE,
+          HealthPieColor.DEFAULT_ORANGE,
+          HealthPieColor.DEFAULT_GREEN,
+          HealthPieColor.DEFAULT_MAGENTA
         ]
       }
     ];

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health/health.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health/health.component.spec.ts
index 150aa22fa2354619861f1a4e46f3895bf3b036fd..aee287159ec8ca04fa22b7b28c6d0baf4c9de390 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health/health.component.spec.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health/health.component.spec.ts
@@ -214,10 +214,10 @@ describe('HealthComponent', () => {
       colors: [
         {
           backgroundColor: [
-            HealthPieColor.SHADE_GREEN_CYAN,
-            HealthPieColor.MEDIUM_DARK_SHADE_CYAN_BLUE,
-            HealthPieColor.LIGHT_SHADE_BROWN,
-            HealthPieColor.MEDIUM_LIGHT_SHADE_PINK_RED
+            HealthPieColor.DEFAULT_GREEN,
+            HealthPieColor.DEFAULT_BLUE,
+            HealthPieColor.DEFAULT_ORANGE,
+            HealthPieColor.DEFAULT_RED
           ]
         }
       ],

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health/health.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health/health.component.ts
index dbdeeb669eb715d20c9d41f8b7388fcd2c12b0dc..9d42bc90f5a5572977ac675ea406e0842efb4d9a 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health/health.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health/health.component.ts
@@ -90,10 +90,10 @@ export class HealthComponent implements OnInit, OnDestroy {
     chart.colors = [
       {
         backgroundColor: [
-          HealthPieColor.SHADE_GREEN_CYAN,
-          HealthPieColor.MEDIUM_DARK_SHADE_CYAN_BLUE,
-          HealthPieColor.LIGHT_SHADE_BROWN,
-          HealthPieColor.MEDIUM_LIGHT_SHADE_PINK_RED
+          HealthPieColor.DEFAULT_GREEN,
+          HealthPieColor.DEFAULT_BLUE,
+          HealthPieColor.DEFAULT_ORANGE,
+          HealthPieColor.DEFAULT_RED
         ]
       }
     ];