Consistent display of FAILED/CANCELLED/BROKEN stage states

src/app/data_types_internal.ts

@@ -317,7 +317,8 @@ export type RuntimeState = 'Static'|'Runtime';
  */
 export type NodeState = 'NO_STATE_STATIC'|'NO_STATE_RUNTIME'|'CANCELLED'|
     'CANCELLING'|'CANCEL_PENDING'|'FAILED'|'PENDING'|'RUNNING'|'SKIPPED'|
-    'SUCCEEDED'|'TIMEOUT'|'NOT_TRIGGERED'|'DISABLED'|'PAUSED'|'UNKNOWN';
+    'SUCCEEDED'|'TIMEOUT'|'NOT_TRIGGERED'|'DISABLED'|'PAUSED'|'UNKNOWN'|
+    'BROKEN';
 
 type State2Priority = {
   [state in NodeState]: number;
@@ -339,6 +340,7 @@ export const STATE_PRIORITY: State2Priority = {
   'CANCELLING': 3,
   'TIMEOUT': 4,
   'FAILED': 4,
+  'BROKEN': 4,
   'CANCELLED': 5,
   'DISABLED': 5,
   'PAUSED': 5,
@@ -705,6 +707,7 @@ export const DEFAULT_THEME: DagTheme = {
     ...['RUNNING', 'SKIPPED', 'SUCCEEDED'].map(s => [s, baseColors['green']]),
     ...['TIMEOUT', 'PAUSED'].map(s => [s, baseColors['yellow']]),
     ['FAILED', baseColors['red']],
+    ['BROKEN', baseColors['red']],
     ...['CANCELLED', 'NOT_TRIGGERED', 'DISABLED', 'UNKNOWN'].map(
         s => [s, baseColors['gray']]),
     ...['NO_STATE_RUNTIME', 'NO_STATE_STATIC'].map(s => [s, '']),
@@ -718,6 +721,7 @@ export const DEFAULT_THEME: DagTheme = {
     ...['NO_STATE_RUNTIME', 'NO_STATE_STATIC'].map(k => [k, 'transparent']),
     ...['TIMEOUT', 'PAUSED'].map(k => [k, baseColors['bg']['yellow']]),
     ['FAILED', baseColors['bg']['red']],
+    ['BROKEN', baseColors['bg']['red']],
   ]),
   edgeColor: baseColors['blue'],
   edgeLabelColor: 'var(--workflow-graph-color-surface-on-surface)',
@@ -748,6 +752,7 @@ export const CLASSIC_THEME: DagTheme = generateTheme({
     ...['RUNNING', 'SKIPPED', 'SUCCEEDED'].map(s => [s, '#34A853']),
     ['TIMEOUT', '#F9AB00'],
     ['FAILED', '#E94235'],
+    ['BROKEN', '#E94235'],
     ...['CANCELLED', 'NOT_TRIGGERED'].map(s => [s, '#818181']),
     ...['NO_STATE_RUNTIME', 'NO_STATE_STATIC'].map(s => [s, '']),
   ]),
@@ -760,6 +765,7 @@ export const CLASSIC_THEME: DagTheme = generateTheme({
     ...['NO_STATE_RUNTIME', 'NO_STATE_STATIC'].map(k => [k, 'transparent']),
     ['TIMEOUT', baseColors['bg']['yellow']],
     ['FAILED', baseColors['bg']['red']],
+    ['BROKEN', baseColors['bg']['red']],
   ]),
   edgeColor: '#1A73E8',
 });

src/app/i18n.ts

@@ -34,6 +34,7 @@ export const NODE_STATE_TRANSLATIONS = {
   'nodeStateNotTriggered': 'Not Triggered',
   'nodeStateCompleted': 'Completed',
   'nodeStateFailed': 'Failed',
+  'nodeStateBroken': 'Broken',
   'nodeStateDisabled': 'Disabled',
   'nodeStateUnknown': 'Unknown',
 };

src/app/i18n_messages_internal.ts

@@ -38,6 +38,11 @@ const MSG_WORKFLOW_GRAPH_NODE_STATE_CANCELLED = goog.getMsg('Cancelled');
  */
 const MSG_WORKFLOW_GRAPH_NODE_STATE_FAILED = goog.getMsg('Failed');
 
+/**
+ * @desc Label for an execution that is broken.
+ */
+const MSG_WORKFLOW_GRAPH_NODE_STATE_BROKEN = goog.getMsg('Broken');
+
 /**
  * @desc Label for an execution that is currently in progress.
  */
@@ -92,6 +97,7 @@ export const TRANSLATIONS: Translations = {
   'nodeStateNotTriggered': MSG_WORKFLOW_GRAPH_NODE_STATE_NOT_TRIGGERED,
   'nodeStateCompleted': MSG_WORKFLOW_GRAPH_NODE_STATE_COMPLETED,
   'nodeStateFailed': MSG_WORKFLOW_GRAPH_NODE_STATE_FAILED,
+  'nodeStateBroken': MSG_WORKFLOW_GRAPH_NODE_STATE_BROKEN,
   'nodeStateDisabled': MSG_WORKFLOW_GRAPH_NODE_STATE_DISABLED,
   'nodeStateUnknown': MSG_WORKFLOW_GRAPH_NODE_STATE_UNKNOWN,
 };

src/app/icon_util.ts

@@ -183,6 +183,7 @@ export function iconForState(state: NodeState, theme: DagTheme): IconConfig|
       break;
 
     case 'FAILED':
+    case 'BROKEN':
       icon = {name: 'status-error', iconset: 'cloud_ai'};
       break;
 
@@ -222,6 +223,9 @@ export function labelForState(translationsService: TranslationsService):
       case 'FAILED':
         return translationsService.translateMessage('nodeStateFailed');
 
+      case 'BROKEN':
+        return translationsService.translateMessage('nodeStateBroken');
+
       case 'PENDING':
         return translationsService.translateMessage('nodeStatePending');