unify status better

Author: Mbeaulne

src/components/Home/RunSection/RunRow.tsx

@@ -2,13 +2,8 @@ import { useNavigate } from "@tanstack/react-router";
 import { type MouseEvent } from "react";
 
 import type { PipelineRunResponse } from "@/api/types.gen";
-import { StatusBar, StatusIcon, StatusText } from "@/components/shared/Status";
+import { StatusBar, StatusIcon } from "@/components/shared/Status";
 import { Button } from "@/components/ui/button";
-import {
-  HoverCard,
-  HoverCardContent,
-  HoverCardTrigger,
-} from "@/components/ui/hover-card";
 import { TableCell, TableRow } from "@/components/ui/table";
 import {
   Tooltip,
@@ -20,9 +15,11 @@ import useToastNotification from "@/hooks/useToastNotification";
 import { APP_ROUTES } from "@/routes/router";
 import {
   convertExecutionStatsToStatusCounts,
-  getRunStatus,
 } from "@/services/executionService";
 import { convertUTCToLocalTime, formatDate } from "@/utils/date";
+import {
+  getOverallExecutionStatusFromStats,
+} from "@/utils/executionStatus";
 
 const RunRow = ({ run }: { run: PipelineRunResponse }) => {
   const navigate = useNavigate();
@@ -45,6 +42,9 @@ const RunRow = ({ run }: { run: PipelineRunResponse }) => {
   const statusCounts = convertExecutionStatsToStatusCounts(
     run.execution_status_stats,
   );
+  const overallStatus = getOverallExecutionStatusFromStats(
+    run.execution_status_stats ?? undefined,
+  );
 
   const clickThroughUrl = `${APP_ROUTES.RUNS}/${runId}`;
 
@@ -77,26 +77,19 @@ const RunRow = ({ run }: { run: PipelineRunResponse }) => {
       className="cursor-pointer text-gray-500 text-xs"
     >
       <TableCell className="text-sm flex items-center gap-2">
-        <StatusIcon status={getRunStatus(statusCounts)} />
+        <StatusIcon status={overallStatus} />
         <Paragraph className="truncate max-w-[400px]" title={name}>
           {name}
         </Paragraph>
         <span>{`#${runId}`}</span>
       </TableCell>
       <TableCell>
-        <HoverCard openDelay={100}>
-          <HoverCardTrigger>
-            <div className="w-2/3">
-              <StatusBar statusCounts={statusCounts} />
-            </div>
-          </HoverCardTrigger>
-          <HoverCardContent>
-            <div className="flex flex-col gap-2">
-              <div className="text-sm font-bold">Status</div>
-              <StatusText statusCounts={statusCounts} />
-            </div>
-          </HoverCardContent>
-        </HoverCard>
+        <div className="w-2/3">
+          <StatusBar
+            statusCounts={statusCounts}
+            executionStatusStats={run.execution_status_stats}
+          />
+        </div>
       </TableCell>
       <TableCell>
         {run.created_at

src/components/PipelineRun/RunDetails.tsx

@@ -2,6 +2,9 @@ import { Frown } from "lucide-react";
 
 import { ArtifactsList } from "@/components/shared/ArtifactsList/ArtifactsList";
 import { CopyText } from "@/components/shared/CopyText/CopyText";
+import { InfoBox } from "@/components/shared/InfoBox";
+import { StatusBar } from "@/components/shared/Status";
+import { TaskImplementation } from "@/components/shared/TaskDetails";
 import { BlockStack, InlineStack } from "@/components/ui/layout";
 import { Spinner } from "@/components/ui/spinner";
 import { Text } from "@/components/ui/typography";
@@ -10,16 +13,13 @@ import { useUserDetails } from "@/hooks/useUserDetails";
 import { useBackend } from "@/providers/BackendProvider";
 import { useComponentSpec } from "@/providers/ComponentSpecProvider";
 import { useExecutionData } from "@/providers/ExecutionDataProvider";
+import { convertExecutionStatsToStatusCounts } from "@/services/executionService";
 import {
-  countTaskStatuses,
-  getRunStatus,
-  isStatusComplete,
-  isStatusInProgress,
-} from "@/services/executionService";
-
-import { InfoBox } from "../shared/InfoBox";
-import { StatusBar, StatusText } from "../shared/Status";
-import { TaskImplementation } from "../shared/TaskDetails";
+  type ExecutionStatusStats,
+  getExecutionStatusLabel,
+  getOverallExecutionStatusFromStats,
+} from "@/utils/executionStatus";
+
 import { CancelPipelineRunButton } from "./components/CancelPipelineRunButton";
 import { ClonePipelineButton } from "./components/ClonePipelineButton";
 import { InspectPipelineButton } from "./components/InspectPipelineButton";
@@ -78,11 +78,33 @@ export const RunDetails = () => {
     );
   }
 
-  const statusCounts = countTaskStatuses(details, state);
-  const runStatus = getRunStatus(statusCounts);
-  const hasRunningTasks = statusCounts.running > 0;
-  const isInProgress = isStatusInProgress(runStatus) || hasRunningTasks;
-  const isComplete = isStatusComplete(runStatus);
+  const executionStatusStats: ExecutionStatusStats =
+    metadata?.execution_status_stats ??
+    Object.values(state.child_execution_status_stats ?? {}).reduce<
+      ExecutionStatusStats
+    >((acc, stats) => {
+      if (!stats) return acc;
+      for (const [status, count] of Object.entries(stats)) {
+        if (!count) continue;
+        acc[status] = (acc[status] ?? 0) + count;
+      }
+      return acc;
+    }, {});
+
+  const statusCounts = convertExecutionStatsToStatusCounts(executionStatusStats);
+  const overallStatus = getOverallExecutionStatusFromStats(executionStatusStats);
+  const statusLabel = getExecutionStatusLabel(overallStatus);
+
+  const inProgressCount =
+    (executionStatusStats.RUNNING ?? 0) +
+    (executionStatusStats.PENDING ?? 0) +
+    (executionStatusStats.QUEUED ?? 0) +
+    (executionStatusStats.WAITING_FOR_UPSTREAM ?? 0) +
+    (executionStatusStats.CANCELLING ?? 0) +
+    (executionStatusStats.UNINITIALIZED ?? 0);
+
+  const isInProgress = inProgressCount > 0;
+  const isComplete = !isInProgress && statusCounts.total > 0;
 
   const annotations = componentSpec.metadata?.annotations || {};
 
@@ -175,11 +197,13 @@ export const RunDetails = () => {
         </Text>
         <InlineStack gap="2" blockAlign="center" className="mb-1">
           <Text size="sm" weight="semibold">
-            {runStatus}
+            {statusLabel}
           </Text>
-          <StatusText statusCounts={statusCounts} />
         </InlineStack>
-        <StatusBar statusCounts={statusCounts} />
+        <StatusBar
+          statusCounts={statusCounts}
+          executionStatusStats={executionStatusStats}
+        />
       </BlockStack>
 
       {Object.keys(annotations).length > 0 && (

src/components/shared/ReactFlow/FlowCanvas/TaskNode/StatusIndicator.tsx

@@ -6,14 +6,13 @@ import {
   XCircleIcon,
 } from "lucide-react";
 
-import type { ContainerExecutionStatus } from "@/api/types.gen";
 import { Icon } from "@/components/ui/icon";
 import { QuickTooltip } from "@/components/ui/tooltip";
 import { cn } from "@/lib/utils";
-import type { RunStatus } from "@/types/pipelineRun";
+import { getExecutionStatusLabel } from "@/utils/executionStatus";
 
 type StatusIndicatorProps = {
-  status: ContainerExecutionStatus | RunStatus;
+  status: string;
   disabledCache?: boolean;
 };
 
@@ -46,70 +45,72 @@ export const StatusIndicator = ({
   );
 };
 
-const getStatusMetadata = (status: ContainerExecutionStatus | RunStatus) => {
+const getStatusMetadata = (status: string) => {
+  const text = getExecutionStatusLabel(status);
+
   switch (status) {
     case "SUCCEEDED":
       return {
         style: "bg-emerald-500",
-        text: "Succeeded",
+        text,
         icon: <CheckCircleIcon className="w-2 h-2" />,
       };
     case "FAILED":
     case "SYSTEM_ERROR":
     case "INVALID":
       return {
         style: "bg-red-700",
-        text: "Failed",
+        text,
         icon: <XCircleIcon className="w-2 h-2" />,
       };
     case "RUNNING":
       return {
         style: "bg-sky-500",
-        text: "Running",
+        text,
         icon: <Loader2Icon className="w-2 h-2 animate-spin" />,
       };
     case "PENDING":
       return {
         style: "bg-yellow-500",
-        text: "Pending",
+        text,
         icon: <ClockIcon className="w-2 h-2 animate-spin duration-2000" />,
       };
     case "CANCELLING":
     case "CANCELLED":
       return {
         style: "bg-gray-800",
-        text: status === "CANCELLING" ? "Cancelling" : "Cancelled",
+        text,
         icon: <XCircleIcon className="w-2 h-2" />,
       };
     case "SKIPPED":
       return {
         style: "bg-slate-400",
-        text: "Skipped",
+        text,
         icon: <XCircleIcon className="w-2 h-2" />,
       };
     case "QUEUED":
       return {
         style: "bg-yellow-500",
-        text: "Queued",
+        text,
         icon: <ClockIcon className="w-2 h-2 animate-spin duration-2000" />,
       };
     case "WAITING_FOR_UPSTREAM":
       return {
         style: "bg-slate-500",
-        text: "Waiting for upstream",
+        text,
         icon: <ClockIcon className="w-2 h-2 animate-spin duration-2000" />,
       };
     case "WAITING":
     case "UNINITIALIZED":
       return {
         style: "bg-yellow-500",
-        text: "Pending",
+        text,
         icon: <ClockIcon className="w-2 h-2 animate-spin duration-2000" />,
       };
     default:
       return {
         style: "bg-slate-300",
-        text: "Unknown",
+        text,
         icon: <CircleDashedIcon className="w-2 h-2" />,
       };
   }

src/components/shared/ReactFlow/FlowCanvas/TaskNode/TaskNode.tsx

@@ -3,7 +3,6 @@ import { memo, useMemo } from "react";
 
 import { useExecutionDataOptional } from "@/providers/ExecutionDataProvider";
 import { TaskNodeProvider } from "@/providers/TaskNodeProvider";
-import { getRunStatus } from "@/services/executionService";
 import type { TaskNodeData } from "@/types/taskNode";
 import { isCacheDisabled } from "@/utils/cache";
 
@@ -17,14 +16,8 @@ const TaskNode = ({ data, selected }: NodeProps) => {
 
   const status = useMemo(() => {
     const taskId = typedData.taskId ?? "";
-    const statusCounts = executionData?.taskStatusCountsMap.get(taskId);
-
-    if (!statusCounts) {
-      return undefined;
-    }
-
-    return getRunStatus(statusCounts);
-  }, [executionData?.taskStatusCountsMap, typedData.taskId]);
+    return executionData?.taskExecutionStatusMap.get(taskId);
+  }, [executionData?.taskExecutionStatusMap, typedData.taskId]);
 
   const disabledCache = isCacheDisabled(typedData.taskSpec);
 

src/components/shared/ReactFlow/FlowCanvas/TaskNode/TaskOverview/logs.tsx

@@ -1,13 +1,11 @@
 import { useQuery } from "@tanstack/react-query";
 import { useEffect, useState } from "react";
 
-import type { ContainerExecutionStatus } from "@/api/types.gen";
 import { CodeViewer } from "@/components/shared/CodeViewer";
 import { InfoBox } from "@/components/shared/InfoBox";
 import { Link } from "@/components/ui/link";
 import { Spinner } from "@/components/ui/spinner";
 import { useBackend } from "@/providers/BackendProvider";
-import type { RunStatus } from "@/types/pipelineRun";
 import { getBackendStatusString } from "@/utils/backend";
 
 const LogDisplay = ({
@@ -53,7 +51,7 @@ const LogDisplay = ({
 };
 
 const isStatusActivelyLogging = (
-  status?: ContainerExecutionStatus | RunStatus,
+  status?: string,
 ): boolean => {
   if (!status) {
     return false;
@@ -71,7 +69,7 @@ const isStatusActivelyLogging = (
 };
 
 const shouldStatusHaveLogs = (
-  status?: ContainerExecutionStatus | RunStatus,
+  status?: string,
 ): boolean => {
   if (!status) {
     return false;
@@ -104,7 +102,7 @@ const Logs = ({
   status,
 }: {
   executionId?: string | number;
-  status?: ContainerExecutionStatus | RunStatus;
+  status?: string;
 }) => {
   const { backendUrl, configured, available } = useBackend();
 
@@ -194,7 +192,7 @@ export const OpenLogsInNewWindowLink = ({
   status,
 }: {
   executionId: string;
-  status?: ContainerExecutionStatus | RunStatus;
+  status?: string;
 }) => {
   const { backendUrl, available } = useBackend();
   const logsUrl = `${backendUrl}/api/executions/${executionId}/stream_container_log`;

src/components/shared/Status/StatusIcon.tsx

@@ -13,6 +13,7 @@ import {
   TooltipContent,
   TooltipTrigger,
 } from "@/components/ui/tooltip";
+import { getExecutionStatusLabel } from "@/utils/executionStatus";
 
 const StatusIcon = ({
   status,
@@ -25,7 +26,8 @@ const StatusIcon = ({
 }) => {
   if (tooltip) {
     const capitalizedLabel = label.charAt(0).toUpperCase() + label.slice(1);
-    const tooltipText = `${capitalizedLabel} ${status?.toLowerCase() ?? "unknown"}`;
+    const displayStatus = getExecutionStatusLabel(status);
+    const tooltipText = `${capitalizedLabel} ${displayStatus}`;
     return (
       <Tooltip>
         <TooltipTrigger asChild>

src/components/shared/Status/StatusText.tsx

@@ -5,13 +5,15 @@ const STATUS_COLORS: Record<string, string> = {
   succeeded: "text-green-500",
   failed: "text-red-500",
   running: "text-blue-500",
+  pending: "text-yellow-600",
+  waiting: "text-slate-600",
   skipped: "text-gray-800",
-  waiting: "text-yellow-600",
   cancelled: "text-gray-800",
 };
 
 const STATUS_DISPLAY_NAMES: Record<string, string> = {
-  waiting: "pending",
+  pending: "pending",
+  waiting: "waiting",
 };
 
 const StatusText = ({