feat(frontend): Support showing Omitted node phase with new Argo version

frontend/src/lib/StatusUtils.test.tsx

@@ -33,6 +33,7 @@ describe('StatusUtils', () => {
       NodePhase.CACHED,
       NodePhase.SKIPPED,
       NodePhase.TERMINATED,
+      NodePhase.OMITTED,
     ].forEach(status => {
       it(`returns \'true\' if status is: ${status}`, () => {
         expect(hasFinished(status)).toBe(true);
@@ -75,6 +76,10 @@ describe('StatusUtils', () => {
       expect(consoleSpy).toHaveBeenLastCalledWith('Unknown node phase:', undefined);
     });
 
+    it("returns color 'not started' if status is 'Omitted'", () => {
+      expect(statusToBgColor(NodePhase.OMITTED)).toEqual(statusBgColors.notStarted);
+    });
+
     it("returns color 'not started' if status is 'Pending'", () => {
       expect(statusToBgColor(NodePhase.PENDING)).toEqual(statusBgColors.notStarted);
     });
@@ -116,6 +121,7 @@ describe('StatusUtils', () => {
       NodePhase.PENDING,
       NodePhase.RUNNING,
       NodePhase.TERMINATING,
+      NodePhase.OMITTED,
       NodePhase.UNKNOWN,
     ].forEach(status => {
       it(`returns the original status, even if message is 'terminated', if status is: ${status}`, () => {

frontend/src/lib/StatusUtils.ts

@@ -38,6 +38,7 @@ export enum NodePhase {
   TERMINATING = 'Terminating',
   TERMINATED = 'Terminated',
   UNKNOWN = 'Unknown',
+  OMITTED = 'Omitted',
 }
 
 export function hasFinished(status?: NodePhase): boolean {
@@ -48,6 +49,7 @@ export function hasFinished(status?: NodePhase): boolean {
     case NodePhase.ERROR: // Fall through
     case NodePhase.SKIPPED: // Fall through
     case NodePhase.TERMINATED:
+    case NodePhase.OMITTED:
       return true;
     case NodePhase.PENDING: // Fall through
     case NodePhase.RUNNING: // Fall through

frontend/src/pages/Status.test.tsx

@@ -48,6 +48,56 @@ describe('Status', () => {
       expect(consoleSpy).toHaveBeenLastCalledWith('Unknown node phase:', undefined);
     });
 
+    it('handles ERROR phase', () => {
+      const tree = shallow(statusToIcon(NodePhase.OMITTED));
+      expect(tree).toMatchSnapshot();
+    });
+
+    it('handles FAILED phase', () => {
+      const tree = shallow(statusToIcon(NodePhase.OMITTED));
+      expect(tree).toMatchSnapshot();
+    });
+
+    it('handles PENDING phase', () => {
+      const tree = shallow(statusToIcon(NodePhase.OMITTED));
+      expect(tree).toMatchSnapshot();
+    });
+
+    it('handles RUNNING phase', () => {
+      const tree = shallow(statusToIcon(NodePhase.OMITTED));
+      expect(tree).toMatchSnapshot();
+    });
+
+    it('handles TERMINATING phase', () => {
+      const tree = shallow(statusToIcon(NodePhase.OMITTED));
+      expect(tree).toMatchSnapshot();
+    });
+
+    it('handles SKIPPED phase', () => {
+      const tree = shallow(statusToIcon(NodePhase.OMITTED));
+      expect(tree).toMatchSnapshot();
+    });
+
+    it('handles SUCCEEDED phase', () => {
+      const tree = shallow(statusToIcon(NodePhase.OMITTED));
+      expect(tree).toMatchSnapshot();
+    });
+
+    it('handles CACHED phase', () => {
+      const tree = shallow(statusToIcon(NodePhase.OMITTED));
+      expect(tree).toMatchSnapshot();
+    });
+
+    it('handles TERMINATED phase', () => {
+      const tree = shallow(statusToIcon(NodePhase.OMITTED));
+      expect(tree).toMatchSnapshot();
+    });
+
+    it('handles OMITTED phase', () => {
+      const tree = shallow(statusToIcon(NodePhase.OMITTED));
+      expect(tree).toMatchSnapshot();
+    });
+
     it('displays start and end dates if both are provided', () => {
       const tree = shallow(statusToIcon(NodePhase.SUCCEEDED, startDate, endDate));
       expect(tree).toMatchSnapshot();

frontend/src/pages/Status.tsx

@@ -20,6 +20,7 @@ import PendingIcon from '@material-ui/icons/Schedule';
 import RunningIcon from '../icons/statusRunning';
 import SkippedIcon from '@material-ui/icons/SkipNext';
 import SuccessIcon from '@material-ui/icons/CheckCircle';
+import ClearIcon from '@material-ui/icons/Clear';
 import CachedIcon from '../icons/statusCached';
 import TerminatedIcon from '../icons/statusTerminated';
 import Tooltip from '@material-ui/core/Tooltip';
@@ -84,6 +85,10 @@ export function statusToIcon(
       iconColor = color.terminated;
       title = 'Run was manually terminated';
       break;
+    case NodePhase.OMITTED:
+      IconComponent = ClearIcon;
+      title = "Run was omitted and didn't execute.";
+      break;
     case NodePhase.UNKNOWN:
       break;
     default: