Merge pull request #889 from sgratch/overview-metrics-tab-change-metrics

Create a new Metrics tab - part 3
kubev2v · Feb 7, 2024 · ca2ac5e · ca2ac5e
2 parents 5cce537 + ba51f40
commit ca2ac5e
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 22 deletions.
diff --git a/packages/forklift-console-plugin/locales/en/plugin__forklift-console-plugin.json b/packages/forklift-console-plugin/locales/en/plugin__forklift-console-plugin.json
@@ -1,7 +1,7 @@
 {
   "{{Canceled}} canceled": "{{Canceled}} canceled",
   "{{dateLabel}} Failed: {{value}}": "{{dateLabel}} Failed: {{value}}",
-  "{{dateLabel}} Started: {{value}}": "{{dateLabel}} Started: {{value}}",
+  "{{dateLabel}} Running: {{value}}": "{{dateLabel}} Running: {{value}}",
   "{{dateLabel}} Succeeded: {{value}}": "{{dateLabel}} Succeeded: {{value}}",
   "{{groupCount}} Groups": "{{groupCount}} Groups",
   "{{name}} Details": "{{name}} Details",
@@ -334,6 +334,7 @@
   "Return to the providers list page": "Return to the providers list page",
   "Reveal values": "Reveal values",
   "Run the migration plan.": "Run the migration plan.",
+  "Running": "Running",
   "Running - performing incremental data copies": "Running - performing incremental data copies",
   "Running - preparing for cutover": "Running - preparing for cutover",
   "Running - preparing for incremental data copies": "Running - preparing for incremental data copies",
@@ -417,7 +418,6 @@
   "To troubleshoot, check the Forklift controller pod logs.": "To troubleshoot, check the Forklift controller pod logs.",
   "To troubleshoot, view the provider status available in the provider details page\n          and check the Forklift controller pod logs.": "To troubleshoot, view the provider status available in the provider details page\n          and check the Forklift controller pod logs.",
   "Token": "Token",
-  "Total": "Total",
   "Total: {{length}}": "Total: {{length}}",
   "True": "True",
   "Type": "Type",

diff --git a/...lift-console-plugin/src/modules/Overview/views/overview/tabs/Metrics/cards/ChartsCard.tsx b/...lift-console-plugin/src/modules/Overview/views/overview/tabs/Metrics/cards/ChartsCard.tsx
@@ -27,7 +27,7 @@ interface MigrationDataPoint {
   value: number;
 }
 
-const toTotal = (m: V1beta1Migration): string => m.metadata?.creationTimestamp;
+const toStarted = (m: V1beta1Migration): string => m.status.started;
 const toFinished = (m: V1beta1Migration): string => m.status.completed;
 const hasTimestamp = (timestamp: string) => timestamp && DateTime.fromISO(timestamp).isValid;
 const toDateTime = (timestamp: string): DateTime => DateTime.fromISO(timestamp);
@@ -81,27 +81,31 @@ export const ChartsCard: React.FC<MigrationsCardProps> = () => {
     isList: true,
   });
   const migrationsDataPoints: {
-    total: MigrationDataPoint[];
+    running: MigrationDataPoint[];
     failed: MigrationDataPoint[];
     succeeded: MigrationDataPoint[];
   } = {
-    total: toDataPoints(migrations, toTotal, isDaysViewSelected),
-    succeeded: toDataPoints(
-      migrations.filter((m) => m?.status?.conditions?.find((it) => it?.type === 'Succeeded')),
-      toFinished,
+    running: toDataPoints(
+      migrations.filter((m) => m?.status?.conditions?.find((it) => it?.type === 'Running')),
+      toStarted,
       isDaysViewSelected,
     ),
     failed: toDataPoints(
       migrations.filter((m) => m?.status?.conditions?.find((it) => it?.type === 'Failed')),
       toFinished,
       isDaysViewSelected,
     ),
+    succeeded: toDataPoints(
+      migrations.filter((m) => m?.status?.conditions?.find((it) => it?.type === 'Succeeded')),
+      toFinished,
+      isDaysViewSelected,
+    ),
   };
 
   const maxMigrationValue = Math.max(
-    ...migrationsDataPoints.total.map((m) => m.value),
-    ...migrationsDataPoints.succeeded.map((m) => m.value),
+    ...migrationsDataPoints.running.map((m) => m.value),
     ...migrationsDataPoints.failed.map((m) => m.value),
+    ...migrationsDataPoints.succeeded.map((m) => m.value),
   );
 
   return (
@@ -144,15 +148,15 @@ export const ChartsCard: React.FC<MigrationsCardProps> = () => {
             ariaDesc="Bar chart with migration statistics"
             colorScale={[
               chart_color_blue_200.var,
-              chart_color_green_400.var,
               chart_color_red_100.var,
+              chart_color_green_400.var,
             ]}
             domainPadding={{ x: [30, 25] }}
             maxDomain={{ y: maxMigrationValue ? undefined : 5 }}
             legendData={[
-              { name: t('Total'), symbol: { fill: chart_color_blue_200.var } },
-              { name: t('Succeeded'), symbol: { fill: chart_color_green_400.var } },
+              { name: t('Running'), symbol: { fill: chart_color_blue_200.var } },
               { name: t('Failed'), symbol: { fill: chart_color_red_100.var } },
+              { name: t('Succeeded'), symbol: { fill: chart_color_green_400.var } },
             ]}
             legendPosition="bottom"
             height={400}
@@ -168,29 +172,29 @@ export const ChartsCard: React.FC<MigrationsCardProps> = () => {
             <ChartAxis dependentAxis showGrid />
             <ChartGroup offset={11} horizontal={false}>
               <ChartBar
-                data={migrationsDataPoints.total.map(({ dateLabel, value }) => ({
+                data={migrationsDataPoints.running.map(({ dateLabel, value }) => ({
                   x: dateLabel,
                   y: value,
-                  name: t('Total'),
-                  label: t('{{dateLabel}} Started: {{value}}', { dateLabel, value }),
+                  name: t('Running'),
+                  label: t('{{dateLabel}} Running: {{value}}', { dateLabel, value }),
                 }))}
                 labelComponent={<ChartTooltip constrainToVisibleArea />}
               />
               <ChartBar
-                data={migrationsDataPoints.succeeded.map(({ dateLabel, value }) => ({
+                data={migrationsDataPoints.failed.map(({ dateLabel, value }) => ({
                   x: dateLabel,
                   y: value,
-                  name: 'Succeeded',
-                  label: t('{{dateLabel}} Succeeded: {{value}}', { dateLabel, value }),
+                  name: t('Failed'),
+                  label: t('{{dateLabel}} Failed: {{value}}', { dateLabel, value }),
                 }))}
                 labelComponent={<ChartTooltip constrainToVisibleArea />}
               />
               <ChartBar
-                data={migrationsDataPoints.failed.map(({ dateLabel, value }) => ({
+                data={migrationsDataPoints.succeeded.map(({ dateLabel, value }) => ({
                   x: dateLabel,
                   y: value,
-                  name: t('Failed'),
-                  label: t('{{dateLabel}} Failed: {{value}}', { dateLabel, value }),
+                  name: 'Succeeded',
+                  label: t('{{dateLabel}} Succeeded: {{value}}', { dateLabel, value }),
                 }))}
                 labelComponent={<ChartTooltip constrainToVisibleArea />}
               />