Merge branch '19715-preserve-url-autologout' into main. Closes #19715

[arvados-workbench2.git] / src / store / processes / process.ts

diff --git a/src/store/processes/process.ts b/src/store/processes/process.ts
index 37cdd2b34668a0dc45bbb34941662a6bd6811edb..2a81669cc7ad55772b9695c4e20d77cfca130412 100644 (file)
--- a/src/store/processes/process.ts
+++ b/src/store/processes/process.ts
@@ -73,55 +73,86 @@ export const getProcessRuntime = ({ container }: Process) => {
     }
 };
 
-export const getProcessStatusColor = (status: string, { customs }: ArvadosTheme) => {
+
+export const getProcessStatusStyles = (status: string, theme: ArvadosTheme): React.CSSProperties => {
+    let color = theme.customs.colors.grey500;
+    let running = false;
     switch (status) {
         case ProcessStatus.RUNNING:
-            return customs.colors.blue500;
+            color = theme.customs.colors.green800;
+            running = true;
+            break;
         case ProcessStatus.COMPLETED:
-            return customs.colors.green700;
+            color = theme.customs.colors.green800;
+            break;
         case ProcessStatus.WARNING:
-            return customs.colors.yellow700;
+            color = theme.customs.colors.green800;
+            running = true;
+            break;
         case ProcessStatus.FAILING:
+            color = theme.customs.colors.red900;
+            running = true;
+            break;
         case ProcessStatus.CANCELLED:
         case ProcessStatus.FAILED:
-            return customs.colors.red900;
+            color = theme.customs.colors.red900;
+            break;
+        case ProcessStatus.QUEUED:
+            color = theme.customs.colors.grey600;
+            running = true;
+            break;
         default:
-            return customs.colors.grey500;
+            color = theme.customs.colors.grey600;
+            break;
     }
+
+    // Using color and running we build the text, border, and background style properties
+    return {
+        // Set background color when not running, otherwise use white
+        backgroundColor: running ? theme.palette.common.white : color,
+        // Set text color to status color when running, else use white text for solid button
+        color: running ? color : theme.palette.common.white,
+        // Set border color when running, else omit the style entirely
+        ...(running ? {border: `2px solid ${color}`} : {}),
+    };
 };
 
 export const getProcessStatus = ({ containerRequest, container }: Process): ProcessStatus => {
     switch (true) {
+        case containerRequest.state === ContainerRequestState.FINAL &&
+            container?.state !== ContainerState.COMPLETE:
+            // Request was finalized before its container started (or the
+            // container was cancelled)
+            return ProcessStatus.CANCELLED;
+
         case containerRequest.state === ContainerRequestState.UNCOMMITTED:
             return ProcessStatus.DRAFT;
 
-        case containerRequest.priority === 0:
-            return ProcessStatus.ONHOLD;
-
-        case container && container.state === ContainerState.COMPLETE && container.exitCode === 0:
-            return ProcessStatus.COMPLETED;
+        case container?.state === ContainerState.COMPLETE:
+            if (container?.exitCode === 0) {
+                return ProcessStatus.COMPLETED;
+            }
+            return ProcessStatus.FAILED;
 
-        case container && container.state === ContainerState.CANCELLED:
+        case container?.state === ContainerState.CANCELLED:
             return ProcessStatus.CANCELLED;
 
-        case container && (container.state === ContainerState.QUEUED ||
-            container.state === ContainerState.LOCKED):
+        case container?.state === ContainerState.QUEUED ||
+            container?.state === ContainerState.LOCKED:
+            if (containerRequest.priority === 0) {
+                return ProcessStatus.ONHOLD;
+            }
             return ProcessStatus.QUEUED;
 
-        case container && container.state === ContainerState.RUNNING &&
-            !!container.runtimeStatus.error:
-            return ProcessStatus.FAILING;
-
-        case container && container.state === ContainerState.RUNNING &&
-            !!container.runtimeStatus.warning:
-            return ProcessStatus.WARNING;
-
-        case container && container.state === ContainerState.RUNNING:
+        case container?.state === ContainerState.RUNNING:
+            if (!!container?.runtimeStatus.error) {
+                return ProcessStatus.FAILING;
+            }
+            if (!!container?.runtimeStatus.warning) {
+                return ProcessStatus.WARNING;
+            }
             return ProcessStatus.RUNNING;
 
-        case container && container.state === ContainerState.COMPLETE && container.exitCode !== 0:
-            return ProcessStatus.FAILED;
-
         default:
             return ProcessStatus.UNKNOWN;
     }