Refactor code references from tree to grid (#23254)

(cherry picked from commit 22b49d3)

airflow/www/static/js/tree/Tree.jsx → airflow/www/static/js/grid/Grid.jsx

@@ -34,7 +34,7 @@ import {
   Button,
 } from '@chakra-ui/react';
 
-import { useTreeData } from './api';
+import { useGridData } from './api';
 import renderTaskRows from './renderTaskRows';
 import ResetRoot from './ResetRoot';
 import DagRuns from './dagRuns';
@@ -44,10 +44,10 @@ import { useAutoRefresh } from './context/autorefresh';
 
 const sidePanelKey = 'hideSidePanel';
 
-const Tree = () => {
+const Grid = () => {
   const scrollRef = useRef();
   const tableRef = useRef();
-  const { data: { groups, dagRuns } } = useTreeData();
+  const { data: { groups, dagRuns } } = useGridData();
   const { isRefreshOn, toggleRefresh, isPaused } = useAutoRefresh();
   const isPanelOpen = localStorage.getItem(sidePanelKey) !== 'true';
   const { isOpen, onToggle } = useDisclosure({ defaultIsOpen: isPanelOpen });
@@ -141,4 +141,4 @@ const Tree = () => {
   );
 };
 
-export default Tree;
+export default Grid;

airflow/www/static/js/tree/api/index.js → airflow/www/static/js/grid/api/index.js

@@ -31,7 +31,7 @@ import useMarkFailedTask from './useMarkFailedTask';
 import useMarkSuccessTask from './useMarkSuccessTask';
 import useExtraLinks from './useExtraLinks';
 import useConfirmMarkTask from './useConfirmMarkTask';
-import useTreeData from './useTreeData';
+import useGridData from './useGridData';
 import useMappedInstances from './useMappedInstances';
 
 axios.interceptors.response.use(
@@ -52,6 +52,6 @@ export {
   useMarkSuccessTask,
   useExtraLinks,
   useConfirmMarkTask,
-  useTreeData,
+  useGridData,
   useMappedInstances,
 };

airflow/www/static/js/tree/api/useClearRun.js → airflow/www/static/js/grid/api/useClearRun.js

@@ -49,7 +49,7 @@ export default function useClearRun(dagId, runId) {
     {
       onSuccess: () => {
         // Invalidating the query will force a new API request
-        queryClient.invalidateQueries('treeData');
+        queryClient.invalidateQueries('gridData');
         startRefresh();
       },
       onError: (error) => errorToast({ error }),

airflow/www/static/js/tree/api/useClearTask.js → airflow/www/static/js/grid/api/useClearTask.js

@@ -65,7 +65,7 @@ export default function useClearTask({
     },
     {
       onSuccess: () => {
-        queryClient.invalidateQueries('treeData');
+        queryClient.invalidateQueries('gridData');
         queryClient.invalidateQueries('mappedInstances', dagId, runId, taskId);
         startRefresh();
       },

airflow/www/static/js/tree/api/useTreeData.js → airflow/www/static/js/grid/api/useGridData.js

@@ -17,19 +17,19 @@
  * under the License.
  */
 
-/* global treeData, autoRefreshInterval */
+/* global gridData, autoRefreshInterval */
 
 import { useQuery } from 'react-query';
 import axios from 'axios';
 
 import { getMetaValue } from '../../utils';
 import { useAutoRefresh } from '../context/autorefresh';
-import { formatData, areActiveRuns } from '../utils/treeData';
+import { formatData, areActiveRuns } from '../utils/gridData';
 import useErrorToast from '../utils/useErrorToast';
 
 // dagId comes from dag.html
 const dagId = getMetaValue('dag_id');
-const treeDataUrl = getMetaValue('tree_data_url') || '';
+const gridDataUrl = getMetaValue('grid_data_url') || '';
 const numRuns = getMetaValue('num_runs');
 const urlRoot = getMetaValue('root');
 const baseDate = getMetaValue('base_date');
@@ -39,11 +39,11 @@ const emptyData = {
   groups: {},
 };
 
-const useTreeData = () => {
-  const initialData = formatData(treeData, emptyData);
+const useGridData = () => {
+  const initialData = formatData(gridData, emptyData);
   const { isRefreshOn, stopRefresh } = useAutoRefresh();
   const errorToast = useErrorToast();
-  return useQuery('treeData', async () => {
+  return useQuery('gridData', async () => {
     try {
       const params = new URLSearchParams({
         dag_id: dagId,
@@ -52,7 +52,7 @@ const useTreeData = () => {
       if (urlRoot) params.append('root', urlRoot);
       if (baseDate) params.append('base_date', baseDate);
 
-      const newData = await axios.get(treeDataUrl, { params });
+      const newData = await axios.get(gridDataUrl, { params });
       // turn off auto refresh if there are no active runs
       if (!areActiveRuns(newData.dagRuns)) stopRefresh();
       return newData;
@@ -72,4 +72,4 @@ const useTreeData = () => {
   });
 };
 
-export default useTreeData;
+export default useGridData;

airflow/www/static/js/tree/api/useTreeData.test.jsx → airflow/www/static/js/grid/api/useGridData.test.jsx

@@ -18,12 +18,12 @@
  */
 
 import { renderHook } from '@testing-library/react-hooks';
-import useTreeData from './useTreeData';
+import useGridData from './useGridData';
 import { Wrapper } from '../utils/testUtils';
 
 /* global describe, test, expect, beforeAll */
 
-const pendingTreeData = {
+const pendingGridData = {
   groups: {},
   dag_runs: [
     {
@@ -46,30 +46,30 @@ describe('Test useTreeData hook', () => {
   });
 
   test('data is valid camelcase json', () => {
-    global.treeData = JSON.stringify(pendingTreeData);
+    global.gridData = JSON.stringify(pendingGridData);
 
-    const { result } = renderHook(() => useTreeData(), { wrapper: Wrapper });
+    const { result } = renderHook(() => useGridData(), { wrapper: Wrapper });
     const { data } = result.current;
 
     expect(typeof data === 'object').toBe(true);
     expect(data.dagRuns).toBeDefined();
     expect(data.dag_runs).toBeUndefined();
   });
 
-  test('Can handle no treeData', () => {
-    global.treeData = null;
+  test('Can handle no gridData', () => {
+    global.gridData = null;
 
-    const { result } = renderHook(() => useTreeData(), { wrapper: Wrapper });
+    const { result } = renderHook(() => useGridData(), { wrapper: Wrapper });
     const { data } = result.current;
 
     expect(data.dagRuns).toStrictEqual([]);
     expect(data.groups).toStrictEqual({});
   });
 
-  test('Can handle empty treeData object', () => {
-    global.treeData = {};
+  test('Can handle empty gridData object', () => {
+    global.gridData = {};
 
-    const { result } = renderHook(() => useTreeData(), { wrapper: Wrapper });
+    const { result } = renderHook(() => useGridData(), { wrapper: Wrapper });
     const { data } = result.current;
 
     expect(data.dagRuns).toStrictEqual([]);

airflow/www/static/js/tree/api/useMarkFailedRun.js → airflow/www/static/js/grid/api/useMarkFailedRun.js

@@ -48,7 +48,7 @@ export default function useMarkFailedRun(dagId, runId) {
     },
     {
       onSuccess: () => {
-        queryClient.invalidateQueries('treeData');
+        queryClient.invalidateQueries('gridData');
         startRefresh();
       },
       onError: (error) => errorToast({ error }),

airflow/www/static/js/tree/api/useMarkFailedTask.js → airflow/www/static/js/grid/api/useMarkFailedTask.js

@@ -61,7 +61,7 @@ export default function useMarkFailedTask({
     },
     {
       onSuccess: () => {
-        queryClient.invalidateQueries('treeData');
+        queryClient.invalidateQueries('gridData');
         queryClient.invalidateQueries('mappedInstances', dagId, runId, taskId);
         startRefresh();
       },

airflow/www/static/js/tree/api/useMarkSuccessRun.js → airflow/www/static/js/grid/api/useMarkSuccessRun.js

@@ -48,7 +48,7 @@ export default function useMarkSuccessRun(dagId, runId) {
     },
     {
       onSuccess: () => {
-        queryClient.invalidateQueries('treeData');
+        queryClient.invalidateQueries('gridData');
         startRefresh();
       },
       onError: (error) => errorToast({ error }),

airflow/www/static/js/tree/api/useMarkSuccessTask.js → airflow/www/static/js/grid/api/useMarkSuccessTask.js

@@ -62,7 +62,7 @@ export default function useMarkSuccessTask({
     },
     {
       onSuccess: () => {
-        queryClient.invalidateQueries('treeData');
+        queryClient.invalidateQueries('gridData');
         queryClient.invalidateQueries('mappedInstances', dagId, runId, taskId);
         startRefresh();
       },

airflow/www/static/js/tree/api/useQueueRun.js → airflow/www/static/js/grid/api/useQueueRun.js

@@ -48,7 +48,7 @@ export default function useQueueRun(dagId, runId) {
     },
     {
       onSuccess: () => {
-        queryClient.invalidateQueries('treeData');
+        queryClient.invalidateQueries('gridData');
         startRefresh();
       },
       onError: (error) => errorToast({ error }),

airflow/www/static/js/tree/api/useRunTask.js → airflow/www/static/js/grid/api/useRunTask.js

@@ -59,7 +59,7 @@ export default function useRunTask(dagId, runId, taskId) {
     ),
     {
       onSuccess: () => {
-        queryClient.invalidateQueries('treeData');
+        queryClient.invalidateQueries('gridData');
         queryClient.invalidateQueries('mappedInstances', dagId, runId, taskId);
         startRefresh();
       },

airflow/www/static/js/tree/context/autorefresh.jsx → airflow/www/static/js/grid/context/autorefresh.jsx

@@ -17,11 +17,11 @@
  * under the License.
  */
 
-/* global localStorage, treeData, document */
+/* global localStorage, gridData, document */
 
 import React, { useContext, useState, useEffect } from 'react';
 import { getMetaValue } from '../../utils';
-import { formatData, areActiveRuns } from '../utils/treeData';
+import { formatData, areActiveRuns } from '../utils/gridData';
 
 const autoRefreshKey = 'disabledAutoRefresh';
 
@@ -33,7 +33,7 @@ const AutoRefreshContext = React.createContext(null);
 export const AutoRefreshProvider = ({ children }) => {
   let dagRuns = [];
   try {
-    const data = JSON.parse(treeData);
+    const data = JSON.parse(gridData);
     if (data.dag_runs) dagRuns = formatData(data.dag_runs);
   } catch {
     dagRuns = [];

airflow/www/static/js/grid/context/selection.jsx

@@ -0,0 +1,56 @@
+/*!
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React, { useContext, useReducer } from 'react';
+
+const SelectionContext = React.createContext(null);
+
+const SELECT = 'SELECT';
+const DESELECT = 'DESELECT';
+
+const selectionReducer = (state, { type, payload }) => {
+  switch (type) {
+    case SELECT:
+      // Deselect if it is the same selection
+      if (payload.taskId === state.taskId && payload.runId === state.runId) {
+        return {};
+      }
+      return payload;
+    case DESELECT:
+      return {};
+    default:
+      return state;
+  }
+};
+
+// Expose the grid selection to any react component instead of passing around lots of props
+export const SelectionProvider = ({ children }) => {
+  const [selected, dispatch] = useReducer(selectionReducer, {});
+
+  const clearSelection = () => dispatch({ type: DESELECT });
+  const onSelect = (payload) => dispatch({ type: SELECT, payload });
+
+  return (
+    <SelectionContext.Provider value={{ selected, clearSelection, onSelect }}>
+      {children}
+    </SelectionContext.Provider>
+  );
+};
+
+export const useSelection = () => useContext(SelectionContext);

airflow/www/static/js/tree/dagRuns/index.jsx → airflow/www/static/js/grid/dagRuns/index.jsx

@@ -26,7 +26,7 @@ import {
   Flex,
 } from '@chakra-ui/react';
 
-import { useTreeData } from '../api';
+import { useGridData } from '../api';
 import DagRunBar from './Bar';
 import { getDuration, formatDuration } from '../../datetime_utils';
 import useSelection from '../utils/useSelection';
@@ -38,7 +38,7 @@ const DurationTick = ({ children, ...rest }) => (
 );
 
 const DagRuns = () => {
-  const { data: { dagRuns } } = useTreeData();
+  const { data: { dagRuns } } = useGridData();
   const { selected, onSelect } = useSelection();
   const durations = [];
   const runs = dagRuns.map((dagRun) => {

airflow/www/static/js/tree/dagRuns/index.test.jsx → airflow/www/static/js/grid/dagRuns/index.test.jsx

@@ -52,7 +52,7 @@ const dagRuns = [
 
 describe('Test DagRuns', () => {
   test('Durations and manual run arrow render correctly, but without any date ticks', () => {
-    global.treeData = JSON.stringify({
+    global.gridData = JSON.stringify({
       groups: {},
       dagRuns,
     });
@@ -68,7 +68,7 @@ describe('Test DagRuns', () => {
   });
 
   test('Top date ticks appear when there are 4 or more runs', () => {
-    global.treeData = JSON.stringify({
+    global.gridData = JSON.stringify({
       groups: {},
       dagRuns: [
         ...dagRuns,
@@ -101,7 +101,7 @@ describe('Test DagRuns', () => {
   });
 
   test('Handles empty data correctly', () => {
-    global.treeData = null;
+    global.gridData = null;
     const { queryByTestId } = render(
       <DagRuns />, { wrapper: TableWrapper },
     );

airflow/www/static/js/tree/details/Header.jsx → airflow/www/static/js/grid/details/Header.jsx

@@ -31,7 +31,7 @@ import { MdPlayArrow } from 'react-icons/md';
 import { getMetaValue } from '../../utils';
 import useSelection from '../utils/useSelection';
 import Time from '../Time';
-import { useTasks, useTreeData } from '../api';
+import { useTasks, useGridData } from '../api';
 
 const dagId = getMetaValue('dag_id');
 
@@ -43,7 +43,7 @@ const LabelValue = ({ label, value }) => (
 );
 
 const Header = () => {
-  const { data: { dagRuns } } = useTreeData();
+  const { data: { dagRuns } } = useGridData();
   const { selected: { taskId, runId }, onSelect, clearSelection } = useSelection();
   const { data: { tasks } } = useTasks();
   const dagRun = dagRuns.find((r) => r.runId === runId);

airflow/www/static/js/tree/details/content/Dag.jsx → airflow/www/static/js/grid/details/content/Dag.jsx

@@ -33,7 +33,7 @@ import { mean } from 'lodash';
 
 import { getDuration, formatDuration } from '../../../datetime_utils';
 import { finalStatesMap, getMetaValue } from '../../../utils';
-import { useTasks, useTreeData } from '../../api';
+import { useTasks, useGridData } from '../../api';
 import Time from '../../Time';
 import { SimpleStatus } from '../../StatusBox';
 
@@ -42,7 +42,7 @@ const dagDetailsUrl = getMetaValue('dag_details_url');
 
 const Dag = () => {
   const { data: taskData } = useTasks(dagId);
-  const { data: { dagRuns } } = useTreeData();
+  const { data: { dagRuns } } = useGridData();
   if (!taskData) return null;
   const { tasks = [], totalEntries = '' } = taskData;