Order of item in the LegendRow, add no_status support

apache · May 22, 2022 · 938cd7f · 938cd7f
1 parent d51f715
commit 938cd7f
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 20 deletions.
diff --git a/airflow/settings.py b/airflow/settings.py
@@ -88,16 +88,16 @@
 # Dictionary containing State and colors associated to each state to
 # display on the Webserver
 STATE_COLORS = {
+    "deferred": "mediumpurple",
+    "failed": "red",
     "queued": "gray",
     "running": "lime",
+    "scheduled": "tan",
+    "skipped": "hotpink",
     "success": "green",
-    "failed": "red",
-    "up_for_retry": "gold",
     "up_for_reschedule": "turquoise",
+    "up_for_retry": "gold",
     "upstream_failed": "orange",
-    "skipped": "hotpink",
-    "scheduled": "tan",
-    "deferred": "mediumpurple",
 }
 
 

diff --git a/airflow/www/static/js/grid/LegendRow.jsx b/airflow/www/static/js/grid/LegendRow.jsx
@@ -27,7 +27,7 @@ import {
 import React from 'react';
 
 const StatusBadge = ({
-  state, stateColor, setHoveredTaskState,
+  state, stateColor, setHoveredTaskState, displayValue,
 }) => (
   <Text
     borderRadius={4}
@@ -38,7 +38,7 @@ const StatusBadge = ({
     onMouseEnter={() => setHoveredTaskState(state)}
     onMouseLeave={() => setHoveredTaskState()}
   >
-    {state}
+    {displayValue || state }
   </Text>
 );
 
@@ -48,13 +48,20 @@ const LegendRow = ({ setHoveredTaskState }) => (
       {
       Object.entries(stateColors).map(([state, stateColor]) => (
         <StatusBadge
-          key={stateColor}
+          key={state}
           state={state}
           stateColor={stateColor}
           setHoveredTaskState={setHoveredTaskState}
         />
       ))
       }
+      <StatusBadge
+        key="no_status"
+        displayValue="no_status"
+        state={null}
+        stateColor="white"
+        setHoveredTaskState={setHoveredTaskState}
+      />
     </HStack>
   </Flex>
 );

diff --git a/airflow/www/static/js/grid/LegendRow.test.jsx b/airflow/www/static/js/grid/LegendRow.test.jsx
@@ -29,20 +29,28 @@ describe('Test LegendRow', () => {
     const { getByText } = render(
       <LegendRow />,
     );
+
     Object.keys(stateColors).forEach((taskState) => {
       expect(getByText(taskState)).toBeInTheDocument();
     });
-  });
 
-  test('Hovering elements trigger setHoverdTaskState function', () => {
-    const setHoveredTaskState = jest.fn();
-    const { getByText } = render(
-      <LegendRow setHoveredTaskState={setHoveredTaskState} />,
-    );
-    const successElement = getByText('success');
-    fireEvent.mouseEnter(successElement);
-    expect(setHoveredTaskState).toHaveBeenCalledWith('success');
-    fireEvent.mouseLeave(successElement);
-    expect(setHoveredTaskState).toHaveBeenLastCalledWith();
+    expect(getByText('no_status')).toBeInTheDocument();
   });
+
+  test.each([
+    { state: 'success', expectedSetValue: 'success' },
+    { state: 'failed', expectedSetValue: 'failed' },
+    { state: 'no_status', expectedSetValue: null },
+  ])('Hovering $state badge should trigger setHoverdTaskState function with $expectedSetValue',
+    async ({ state, expectedSetValue }) => {
+      const setHoveredTaskState = jest.fn();
+      const { getByText } = render(
+        <LegendRow setHoveredTaskState={setHoveredTaskState} />,
+      );
+      const successElement = getByText(state);
+      fireEvent.mouseEnter(successElement);
+      expect(setHoveredTaskState).toHaveBeenCalledWith(expectedSetValue);
+      fireEvent.mouseLeave(successElement);
+      expect(setHoveredTaskState).toHaveBeenLastCalledWith();
+    });
 });
diff --git a/airflow/www/static/js/grid/renderTaskRows.jsx b/airflow/www/static/js/grid/renderTaskRows.jsx
@@ -71,7 +71,7 @@ const TaskInstances = ({
                 instance={instance}
                 group={task}
                 onSelect={onSelect}
-                isActive={!activeTaskState || activeTaskState === instance.state}
+                isActive={activeTaskState === undefined || activeTaskState === instance.state}
               />
             )
             : <Box width={boxSizePx} data-testid="blank-task" />}