fix: fix cluster resource pie chart color mapping [DET-3861] (#1094)

determined-ai · Aug 17, 2020 · 2318ea0 · 2318ea0
1 parent cc9a7c1
commit 2318ea0
Show file tree

Hide file tree

Showing 5 changed files with 64 additions and 35 deletions.
diff --git a/webui/react/src/components/Badge.tsx b/webui/react/src/components/Badge.tsx
@@ -1,7 +1,7 @@
 import { Tooltip } from 'antd';
 import React, { CSSProperties, PropsWithChildren } from 'react';
 
-import { getStateColor } from 'themes';
+import { getStateColorCssVar } from 'themes';
 import { CommandState, RunState } from 'types';
 import { stateToLabel } from 'utils/types';
 
@@ -30,7 +30,7 @@ const Badge: React.FC<Props> = ({
 
   if (type === BadgeType.State) {
     classes.push(css.state);
-    style.backgroundColor = getStateColor(state);
+    style.backgroundColor = getStateColorCssVar(state);
   } else if (type === BadgeType.Id) {
     classes.push(css.id);
   }

diff --git a/webui/react/src/components/ProgressBar.tsx b/webui/react/src/components/ProgressBar.tsx
@@ -1,7 +1,7 @@
 import { Tooltip } from 'antd';
 import React from 'react';
 
-import { getStateColor } from 'themes';
+import { getStateColorCssVar } from 'themes';
 import { CommandState, RunState } from 'types';
 import { floatToPercent } from 'utils/string';
 
@@ -20,7 +20,7 @@ const defaultProps = {
 const ProgressBar: React.FC<Props> = ({ barOnly, percent, state }: Props) => {
   const classes = [ css.base ];
   const style = {
-    backgroundColor: getStateColor(state),
+    backgroundColor: getStateColorCssVar(state),
     width: `${percent}%`,
   };
 

diff --git a/webui/react/src/components/ResourceChart.stories.tsx b/webui/react/src/components/ResourceChart.stories.tsx
@@ -45,4 +45,24 @@ export const HalfHalf = (): React.ReactNode => <ResourceChart resources={[
   { container: { state: ResourceState.Running } },
 ] as Resource[]} title="GPUs" />;
 
+export const MostlyStarting = (): React.ReactNode => <ResourceChart resources={[
+  { container: undefined },
+  { container: undefined },
+  { container: { state: ResourceState.Running } },
+  { container: { state: ResourceState.Starting } },
+  { container: { state: ResourceState.Starting } },
+  { container: { state: ResourceState.Starting } },
+  { container: { state: ResourceState.Starting } },
+] as Resource[]} title="GPUs" />;
+
+export const MostlyRunning = (): React.ReactNode => <ResourceChart resources={[
+  { container: undefined },
+  { container: undefined },
+  { container: { state: ResourceState.Starting } },
+  { container: { state: ResourceState.Running } },
+  { container: { state: ResourceState.Running } },
+  { container: { state: ResourceState.Running } },
+  { container: { state: ResourceState.Running } },
+] as Resource[]} title="GPUs" />;
+
 export const Empty = (): React.ReactNode => <ResourceChart resources={[]} title="DPUs" />;
diff --git a/webui/react/src/components/ResourceChart.tsx b/webui/react/src/components/ResourceChart.tsx
@@ -42,11 +42,7 @@ const genPlotInfo = (title: string, resources: Resource[]): PlotInfo | null => {
     if (rsValue === 0) return;
     labels.push(rsState);
     values.push(rsValue);
-    if (rsState === ResourceState.Free) {
-      colors.push(lightTheme.colors.states.inactive);
-    } else {
-      colors.push(getStateColor(rsState as CommandState));
-    }
+    colors.push(getStateColor(rsState as CommandState));
   });
 
   const data: Data[] = [ {

diff --git a/webui/react/src/themes.ts b/webui/react/src/themes.ts
@@ -1,4 +1,4 @@
-import { CommandState, RunState } from 'types';
+import { CommandState, ResourceState, RunState } from 'types';
 
 export enum ShirtSize {
   micro = 'micro',
@@ -12,6 +12,14 @@ export enum ShirtSize {
   giant = 'giant',
 }
 
+enum StateColors {
+  active = 'active',
+  failed = 'failed',
+  inactive = 'inactive',
+  success = 'success',
+  suspended = 'suspended',
+}
+
 export interface Theme {
   colors: {
     core: {
@@ -21,13 +29,7 @@ export interface Theme {
       tertiary: string;
     };
     monochrome: string[];
-    states: {
-      active: string;
-      failed: string;
-      inactive: string;
-      success: string;
-      suspended: string;
-    };
+    states: Record<StateColors, string>;
   };
   focus: {
     shadow: string;
@@ -154,26 +156,37 @@ export const lightTheme: Theme = {
 };
 
 const stateColorMapping = {
-  [RunState.Active]: 'var(--theme-colors-states-active)',
-  [RunState.Canceled]: 'var(--theme-colors-states-inactive)',
-  [RunState.Completed]: 'var(--theme-colors-states-success)',
-  [RunState.Deleted]: 'var(--theme-colors-states-failed)',
-  [RunState.Errored]: 'var(--theme-colors-states-failed)',
-  [RunState.Paused]: 'var(--theme-colors-states-suspended)',
-  [RunState.StoppingCanceled]: 'var(--theme-colors-states-inactive)',
-  [RunState.StoppingCompleted]: 'var(--theme-colors-states-success)',
-  [RunState.StoppingError]: 'var(--theme-colors-states-failed)',
-  [CommandState.Pending]: 'var(--theme-colors-states-suspended)',
-  [CommandState.Assigned]: 'var(--theme-colors-states-suspended)',
-  [CommandState.Pulling]: 'var(--theme-colors-states-active)',
-  [CommandState.Starting]: 'var(--theme-colors-states-active)',
-  [CommandState.Running]: 'var(--theme-colors-states-active)',
-  [CommandState.Terminating]: 'var(--theme-colors-states-inactive)',
-  [CommandState.Terminated]: 'var(--theme-colors-states-inactive)',
+  [RunState.Active]: 'active',
+  [RunState.Canceled]: 'inactive',
+  [RunState.Completed]: 'success',
+  [RunState.Deleted]: 'failed',
+  [RunState.Errored]: 'failed',
+  [RunState.Paused]: 'suspended',
+  [RunState.StoppingCanceled]: 'inactive',
+  [RunState.StoppingCompleted]: 'success',
+  [RunState.StoppingError]: 'failed',
+  [CommandState.Pending]: 'suspended',
+  [CommandState.Assigned]: 'suspended',
+  [CommandState.Pulling]: 'active',
+  [CommandState.Starting]: 'active',
+  [CommandState.Running]: 'active',
+  [CommandState.Terminating]: 'inactive',
+  [CommandState.Terminated]: 'inactive',
+  [ResourceState.Free]: 'inactive',
+};
+
+export const getStateColorCssVar = (
+  state: RunState | CommandState | ResourceState | undefined,
+): string => {
+  const name = state ? stateColorMapping[state] : 'active';
+  return `var(--theme-colors-states-${name})`;
 };
 
-export const getStateColor = (state: RunState | CommandState | undefined): string => {
-  return stateColorMapping[state || RunState.Active];
+export const getStateColor = (
+  state: RunState | CommandState | ResourceState,
+): string => {
+  const name = state ? stateColorMapping[state] : 'active';
+  return window.getComputedStyle(document.body).getPropertyValue(`--theme-colors-states-${name}`);
 };
 
 export enum ThemeId {