feat: distinguish externally killed tasks from code failures (#84)

src/components/DAG/components/DAGContent.tsx

@@ -259,15 +259,19 @@ const StatusColorStyles = css<{ state: TaskStatus }>`
           ? 'var(--color-text-warning)'
           : p.state === 'failed'
             ? 'var(--color-text-danger)'
-            : 'var(--color-border-2)'};
+            : p.state === 'killed'
+              ? 'var(--color-text-warning)'
+              : 'var(--color-border-2)'};
   background: ${(p) =>
     p.state === 'completed'
       ? 'color-mix(in hsl, var(--color-text-success) 5%, #fff)'
       : p.state === 'running'
         ? 'color-mix(in hsl, var(--color-text-warning) 5%, #fff)'
         : p.state === 'failed'
           ? 'color-mix(in hsl, var(--color-text-danger) 5%, #fff)'
-          : '#fff'};
+          : p.state === 'killed'
+            ? 'color-mix(in hsl, var(--color-text-warning) 5%, #fff)'
+            : '#fff'};
 `;
 
 const NormalItem = styled.div<{ state: TaskStatus }>`

src/components/TaskListingHeader/components/CustomSettings.tsx

@@ -81,6 +81,9 @@ const CustomSettings: React.FC<CustomSettingsProps> = ({
               ['running', t('run.filter-running') + ` (${counts.running})`],
               ['pending', t('run.filter-pending') + ` (${counts.pending})`],
               ['failed', t('run.filter-failed') + ` (${counts.failed})`],
+              ...(counts.killed > 0
+                ? ([['killed', t('run.filter-killed') + ` (${counts.killed})`]] as [string, string][])
+                : []),
               ...(counts.unknown > 0
                 ? ([['unknown', t('run.filter-unknown') + ` (${counts.unknown})`]] as [string, string][])
                 : []),

src/components/TaskListingHeader/components/StatusLights.tsx

@@ -20,10 +20,12 @@ const StatusLights: React.FC<Props> = ({ status }) => (
         <StatusBox status="running" />
         <StatusBox status="pending" />
         <StatusBox status="failed" />
+        <StatusBox status="killed" />
       </>
     )}
     {status === 'completed' && <StatusBox status="completed" />}
     {status === 'failed' && <StatusBox status="failed" />}
+    {status === 'killed' && <StatusBox status="killed" />}
     {status === 'running' && <StatusBox status="running" />}
     {status === 'pending' && <StatusBox status="pending" />}
     {status === 'unknown' && <StatusBox status="unknown" />}

src/components/Timeline/taskdataUtils.ts

@@ -11,6 +11,7 @@ export type RowCounts = {
   running: number;
   pending: number;
   failed: number;
+  killed: number;
   unknown: number;
 };
 
@@ -20,6 +21,7 @@ export function countTaskRowsByStatus(rows: RowDataModel): RowCounts {
     completed: 0,
     running: 0,
     failed: 0,
+    killed: 0,
     pending: 0,
     unknown: 0,
   };
@@ -124,6 +126,9 @@ export function getStepStatus(stepTaskData: Record<string, Task[]>): TaskStatus
     if (statusOfLastItem === 'failed') {
       return 'failed';
     }
+    if (statusOfLastItem === 'killed') {
+      return 'killed';
+    }
   }
   return 'completed';
 }

src/components/Timeline/useTaskData.ts

@@ -302,6 +302,7 @@ export default function useTaskData(flowId: string, runNumber: string): useTaskD
     completed: 0,
     running: 0,
     failed: 0,
+    killed: 0,
     pending: 0,
     unknown: 0,
   });

src/pages/Home/ResultGroup/TimelinePreview.tsx

@@ -9,7 +9,7 @@ import { Row } from '@components/Timeline/VirtualizedTimeline';
 import useTaskData from '@components/Timeline/useTaskData';
 import { startAndEndpointsOfRows } from '@utils/row';
 
-const zeroCounts = { all: 0, failed: 0, running: 0, completed: 0, unknown: 0, pending: 0 };
+const zeroCounts = { all: 0, failed: 0, running: 0, completed: 0, unknown: 0, pending: 0, killed: 0 };
 
 //
 // Typedef

src/translations/en.ts

@@ -108,6 +108,7 @@ const en = {
       'filter-completed': 'Completed',
       'filter-running': 'Running',
       'filter-failed': 'Failed',
+      'filter-killed': 'Killed',
       'filter-pending': 'Pending',
       'filter-unknown': 'Unknown',
       mode: 'Mode',

src/types.ts

@@ -48,7 +48,7 @@ export interface Task extends MetaDataBaseObject {
   status: TaskStatus;
 }
 
-export type TaskStatus = 'running' | 'completed' | 'failed' | 'unknown' | 'pending' | 'refining';
+export type TaskStatus = 'running' | 'completed' | 'failed' | 'killed' | 'unknown' | 'pending' | 'refining';
 
 export interface Metadata extends MetaDataBaseObject {
   id: number;

src/utils/style.ts

@@ -37,6 +37,8 @@ export function colorByStatus(status: string): string {
       return 'var(--color-bg-success)';
     case 'failed':
       return 'var(--color-bg-danger)';
+    case 'killed':
+      return 'var(--color-bg-warning)';
     case 'running':
       return 'var(--color-bg-success-light)';
     case 'pending':
@@ -55,6 +57,8 @@ export function iconByStatus(status: keyof RunStatus | TaskStatus): keyof Suppor
       return 'completed';
     case 'failed':
       return 'error';
+    case 'killed':
+      return 'warning';
     case 'running':
       return 'running';
     default: