From dbccc56c68098c0f196726726c235f7b9a1bc22d Mon Sep 17 00:00:00 2001
From: Aviv Turgeman <aturgema@redhat.com>
Date: Tue, 24 Sep 2024 14:53:47 +0300
Subject: [PATCH] CNV-45253: No color in the virtual machine migration graph
 legend

Signed-off-by: Aviv Turgeman <aturgema@redhat.com>
---
 .../MigrationsChartDonut/MigrationChartLegend.tsx      | 10 ++++++----
 .../MigrationsChartDonut/MigrationsChartDonut.tsx      |  5 +++--
 .../components/MigrationsChartDonut/constants.ts       |  1 +
 3 files changed, 10 insertions(+), 6 deletions(-)
 create mode 100644 src/views/clusteroverview/MigrationsTab/components/MigrationsChartDonut/constants.ts

diff --git a/src/views/clusteroverview/MigrationsTab/components/MigrationsChartDonut/MigrationChartLegend.tsx b/src/views/clusteroverview/MigrationsTab/components/MigrationsChartDonut/MigrationChartLegend.tsx
index 8a3db8d6c..3cab431b4 100644
--- a/src/views/clusteroverview/MigrationsTab/components/MigrationsChartDonut/MigrationChartLegend.tsx
+++ b/src/views/clusteroverview/MigrationsTab/components/MigrationsChartDonut/MigrationChartLegend.tsx
@@ -4,8 +4,7 @@ import { Link } from 'react-router-dom-v5-compat';
 import { OnFilterChange } from '@openshift-console/dynamic-plugin-sdk';
 import { CardFooter, Grid, GridItem } from '@patternfly/react-core';
 
-import './MigrationChartLegend';
-
+import { colorScale } from './constants';
 import { ChartDataItem } from './MigrationsChartDonut';
 
 type MigrationChartLegendProps = {
@@ -17,11 +16,14 @@ const MigrationChartLegend: FC<MigrationChartLegendProps> = ({ legendItems, onFi
   return (
     <CardFooter>
       <Grid>
-        {legendItems?.map((item) => {
+        {legendItems?.map((item, index) => {
           const { x: status, y: statusCount } = item || {};
           return (
             <GridItem key={status} span={2}>
-              <i className="fas fa-square" />{' '}
+              <i
+                className="fas fa-square"
+                style={{ color: colorScale[index % colorScale.length] }}
+              />{' '}
               <Link
                 onClick={() => {
                   onFilterChange('status', { all: [status], selected: [status] });
diff --git a/src/views/clusteroverview/MigrationsTab/components/MigrationsChartDonut/MigrationsChartDonut.tsx b/src/views/clusteroverview/MigrationsTab/components/MigrationsChartDonut/MigrationsChartDonut.tsx
index 1527df117..3946e167d 100644
--- a/src/views/clusteroverview/MigrationsTab/components/MigrationsChartDonut/MigrationsChartDonut.tsx
+++ b/src/views/clusteroverview/MigrationsTab/components/MigrationsChartDonut/MigrationsChartDonut.tsx
@@ -3,8 +3,9 @@ import React, { FC } from 'react';
 import { V1VirtualMachineInstanceMigration } from '@kubevirt-ui/kubevirt-api/kubevirt';
 import { useKubevirtTranslation } from '@kubevirt-utils/hooks/useKubevirtTranslation';
 import { OnFilterChange } from '@openshift-console/dynamic-plugin-sdk';
-import { ChartDonut, ChartThemeColor } from '@patternfly/react-charts';
+import { ChartDonut } from '@patternfly/react-charts';
 
+import { colorScale } from './constants';
 import MigrationChartLegend from './MigrationChartLegend';
 
 type MigrationsChartDonutProps = {
@@ -42,6 +43,7 @@ const MigrationsChartDonut: FC<MigrationsChartDonutProps> = ({ onFilterChange, v
       <ChartDonut
         ariaDesc={t('Cluster scope migrations')}
         ariaTitle={t('Migrations')}
+        colorScale={colorScale}
         constrainToVisibleArea
         data={chartData}
         height={220}
@@ -49,7 +51,6 @@ const MigrationsChartDonut: FC<MigrationsChartDonutProps> = ({ onFilterChange, v
         legendPosition="bottom"
         padding={20}
         subTitle={t('Migrations')}
-        themeColor={ChartThemeColor.multiOrdered}
         title={vmims?.length.toString()}
         width={600}
       />
diff --git a/src/views/clusteroverview/MigrationsTab/components/MigrationsChartDonut/constants.ts b/src/views/clusteroverview/MigrationsTab/components/MigrationsChartDonut/constants.ts
new file mode 100644
index 000000000..614688bf2
--- /dev/null
+++ b/src/views/clusteroverview/MigrationsTab/components/MigrationsChartDonut/constants.ts
@@ -0,0 +1 @@
+export const colorScale = ['#2B9AF3', '#3E8635', '#C9190B', '#F0AB00', '#40199A'];