Improve run/task grid view actions (#28130)

* improve run/task changes from grid * fix confirm return type
apache · Dec 6, 2022 · a0c8502 · a0c8502
1 parent b609ab9
commit a0c8502
Show file tree

Hide file tree

Showing 13 changed files with 56 additions and 42 deletions.
diff --git a/airflow/www/static/js/api/useClearRun.ts b/airflow/www/static/js/api/useClearRun.ts
@@ -42,17 +42,18 @@ export default function useClearRun(dagId: string, runId: string) {
         dag_run_id: runId,
       }).toString();
 
-      return axios.post<AxiosResponse, string>(clearRunUrl, params, {
+      return axios.post<AxiosResponse, string[]>(clearRunUrl, params, {
         headers: {
           'Content-Type': 'application/x-www-form-urlencoded',
         },
       });
     },
     {
-      onSuccess: () => {
-        // Invalidating the query will force a new API request
-        queryClient.invalidateQueries('gridData');
-        startRefresh();
+      onSuccess: (_, { confirmed }) => {
+        if (confirmed) {
+          queryClient.invalidateQueries('gridData');
+          startRefresh();
+        }
       },
       onError: (error: Error) => errorToast({ error }),
     },

diff --git a/airflow/www/static/js/api/useClearTask.ts b/airflow/www/static/js/api/useClearTask.ts
@@ -74,17 +74,19 @@ export default function useClearTask({
         params.append('map_index', mi.toString());
       });
 
-      return axios.post<AxiosResponse, string>(clearUrl, params.toString(), {
+      return axios.post<AxiosResponse, string[]>(clearUrl, params.toString(), {
         headers: {
           'Content-Type': 'application/x-www-form-urlencoded',
         },
       });
     },
     {
-      onSuccess: () => {
-        queryClient.invalidateQueries('gridData');
-        queryClient.invalidateQueries(['mappedInstances', dagId, runId, taskId]);
-        startRefresh();
+      onSuccess: (_, { confirmed }) => {
+        if (confirmed) {
+          queryClient.invalidateQueries('gridData');
+          queryClient.invalidateQueries(['mappedInstances', dagId, runId, taskId]);
+          startRefresh();
+        }
       },
       onError: (error: Error) => errorToast({ error }),
     },

diff --git a/airflow/www/static/js/api/useMarkFailedRun.ts b/airflow/www/static/js/api/useMarkFailedRun.ts
@@ -42,16 +42,18 @@ export default function useMarkFailedRun(dagId: string, runId: string) {
         dag_run_id: runId,
       }).toString();
 
-      return axios.post<AxiosResponse, string>(markFailedUrl, params, {
+      return axios.post<AxiosResponse, string[]>(markFailedUrl, params, {
         headers: {
           'Content-Type': 'application/x-www-form-urlencoded',
         },
       });
     },
     {
-      onSuccess: () => {
-        queryClient.invalidateQueries('gridData');
-        startRefresh();
+      onSuccess: (_, { confirmed }) => {
+        if (confirmed) {
+          queryClient.invalidateQueries('gridData');
+          startRefresh();
+        }
       },
       onError: (error: Error) => errorToast({ error }),
     },

diff --git a/airflow/www/static/js/api/useMarkSuccessRun.ts b/airflow/www/static/js/api/useMarkSuccessRun.ts
@@ -41,16 +41,18 @@ export default function useMarkSuccessRun(dagId: string, runId: string) {
         dag_run_id: runId,
       }).toString();
 
-      return axios.post<AxiosResponse, string>(markSuccessUrl, params, {
+      return axios.post<AxiosResponse, string[]>(markSuccessUrl, params, {
         headers: {
           'Content-Type': 'application/x-www-form-urlencoded',
         },
       });
     },
     {
-      onSuccess: () => {
-        queryClient.invalidateQueries('gridData');
-        startRefresh();
+      onSuccess: (_, { confirmed }) => {
+        if (confirmed) {
+          queryClient.invalidateQueries('gridData');
+          startRefresh();
+        }
       },
       onError: (error: Error) => errorToast({ error }),
     },

diff --git a/airflow/www/static/js/api/useQueueRun.ts b/airflow/www/static/js/api/useQueueRun.ts
@@ -40,16 +40,18 @@ export default function useQueueRun(dagId: string, runId: string) {
         dag_id: dagId,
         dag_run_id: runId,
       }).toString();
-      return axios.post<AxiosResponse, string>(queuedUrl, params, {
+      return axios.post<AxiosResponse, string[]>(queuedUrl, params, {
         headers: {
           'Content-Type': 'application/x-www-form-urlencoded',
         },
       });
     },
     {
-      onSuccess: () => {
-        queryClient.invalidateQueries('gridData');
-        startRefresh();
+      onSuccess: (_, { confirmed }) => {
+        if (confirmed) {
+          queryClient.invalidateQueries('gridData');
+          startRefresh();
+        }
       },
       onError: (error: Error) => errorToast({ error }),
     },

diff --git a/airflow/www/static/js/components/ConfirmDialog.tsx b/airflow/www/static/js/components/ConfirmDialog.tsx
@@ -37,13 +37,13 @@ interface Props extends PropsWithChildren {
   onClose: () => void;
   title?: string;
   description: string;
-  body?: string[] | string;
+  affectedTasks: string[];
   onConfirm: () => void;
   isLoading?: boolean;
 }
 
 const ConfirmDialog = ({
-  isOpen, onClose, title = 'Wait a minute', description, body = [], onConfirm, isLoading = false, children,
+  isOpen, onClose, title = 'Wait a minute', description, affectedTasks, onConfirm, isLoading = false, children,
 }: Props) => {
   const initialFocusRef = useRef<HTMLButtonElement>(null);
   const containerRef = useContainerRef();
@@ -67,7 +67,12 @@ const ConfirmDialog = ({
           <AlertDialogBody overflowY="auto">
             {children}
             <Text mb={2}>{description}</Text>
-            {Array.isArray(body) && body.map((ti) => (<Code width="100%" key={ti} fontSize="lg">{ti}</Code>))}
+            {affectedTasks.map((ti) => (
+              <Code width="100%" key={ti} fontSize="lg">{ti}</Code>
+            ))}
+            {!affectedTasks.length && (
+              <Text>No task instances to change.</Text>
+            )}
           </AlertDialogBody>
 
           <AlertDialogFooter>

diff --git a/airflow/www/static/js/dag/details/dagRun/ClearRun.tsx b/airflow/www/static/js/dag/details/dagRun/ClearRun.tsx
@@ -32,7 +32,7 @@ interface Props {
 }
 
 const ClearRun = ({ dagId, runId }: Props) => {
-  const [affectedTasks, setAffectedTasks] = useState('');
+  const [affectedTasks, setAffectedTasks] = useState<string[]>([]);
   const { isOpen, onOpen, onClose } = useDisclosure();
   const { mutateAsync: onClear, isLoading } = useClearRun(dagId, runId);
 
@@ -44,7 +44,7 @@ const ClearRun = ({ dagId, runId }: Props) => {
 
   const onConfirm = async () => {
     await onClear({ confirmed: true });
-    setAffectedTasks('');
+    setAffectedTasks([]);
     onClose();
   };
 
@@ -63,7 +63,7 @@ const ClearRun = ({ dagId, runId }: Props) => {
         onConfirm={onConfirm}
         isLoading={isLoading}
         description="Task instances you are about to clear:"
-        body={affectedTasks}
+        affectedTasks={affectedTasks}
       />
     </>
   );

diff --git a/airflow/www/static/js/dag/details/dagRun/MarkFailedRun.tsx b/airflow/www/static/js/dag/details/dagRun/MarkFailedRun.tsx
@@ -32,7 +32,7 @@ interface Props {
 }
 
 const MarkFailedRun = ({ dagId, runId }: Props) => {
-  const [affectedTasks, setAffectedTasks] = useState('');
+  const [affectedTasks, setAffectedTasks] = useState<string[]>([]);
   const { isOpen, onOpen, onClose } = useDisclosure();
   const { mutateAsync: markFailed, isLoading } = useMarkFailedRun(dagId, runId);
 
@@ -44,7 +44,7 @@ const MarkFailedRun = ({ dagId, runId }: Props) => {
 
   const onConfirm = () => {
     markFailed({ confirmed: true });
-    setAffectedTasks('');
+    setAffectedTasks([]);
     onClose();
   };
 
@@ -57,7 +57,7 @@ const MarkFailedRun = ({ dagId, runId }: Props) => {
         onConfirm={onConfirm}
         isLoading={isLoading}
         description="Task instances you are about to mark as failed or skipped:"
-        body={affectedTasks}
+        affectedTasks={affectedTasks}
       />
     </>
   );

diff --git a/airflow/www/static/js/dag/details/dagRun/MarkSuccessRun.tsx b/airflow/www/static/js/dag/details/dagRun/MarkSuccessRun.tsx
@@ -32,7 +32,7 @@ interface Props {
 }
 
 const MarkSuccessRun = ({ dagId, runId }: Props) => {
-  const [affectedTasks, setAffectedTasks] = useState('');
+  const [affectedTasks, setAffectedTasks] = useState<string[]>([]);
   const { isOpen, onOpen, onClose } = useDisclosure();
   const { mutateAsync: markSuccess, isLoading } = useMarkSuccessRun(dagId, runId);
 
@@ -44,7 +44,7 @@ const MarkSuccessRun = ({ dagId, runId }: Props) => {
 
   const onConfirm = async () => {
     await markSuccess({ confirmed: true });
-    setAffectedTasks('');
+    setAffectedTasks([]);
     onClose();
   };
 
@@ -57,7 +57,7 @@ const MarkSuccessRun = ({ dagId, runId }: Props) => {
         onConfirm={onConfirm}
         isLoading={isLoading}
         description="Task instances you are about to mark as success:"
-        body={affectedTasks}
+        affectedTasks={affectedTasks}
       />
     </>
   );

diff --git a/airflow/www/static/js/dag/details/dagRun/QueueRun.tsx b/airflow/www/static/js/dag/details/dagRun/QueueRun.tsx
@@ -32,7 +32,7 @@ interface Props {
 }
 
 const QueueRun = ({ dagId, runId }: Props) => {
-  const [affectedTasks, setAffectedTasks] = useState('');
+  const [affectedTasks, setAffectedTasks] = useState<string[]>([]);
   const { isOpen, onOpen, onClose } = useDisclosure();
   const { mutateAsync: onQueue, isLoading } = useQueueRun(dagId, runId);
 
@@ -46,7 +46,7 @@ const QueueRun = ({ dagId, runId }: Props) => {
   // Confirm changes
   const onConfirm = async () => {
     await onQueue({ confirmed: true });
-    setAffectedTasks('');
+    setAffectedTasks([]);
     onClose();
   };
 
@@ -67,7 +67,7 @@ const QueueRun = ({ dagId, runId }: Props) => {
         onConfirm={onConfirm}
         isLoading={isLoading}
         description="Task instances you are about to queue:"
-        body={affectedTasks}
+        affectedTasks={affectedTasks}
       />
     </>
   );

diff --git a/airflow/www/static/js/dag/details/taskInstance/taskActions/Clear.tsx b/airflow/www/static/js/dag/details/taskInstance/taskActions/Clear.tsx
@@ -44,7 +44,7 @@ const Run = ({
   mapIndexes,
   isGroup,
 }: CommonActionProps) => {
-  const [affectedTasks, setAffectedTasks] = useState('');
+  const [affectedTasks, setAffectedTasks] = useState<string[]>([]);
 
   // Options check/unchecked
   const [past, setPast] = useState(false);
@@ -98,7 +98,7 @@ const Run = ({
       confirmed: true,
       mapIndexes,
     });
-    setAffectedTasks('');
+    setAffectedTasks([]);
     onClose();
   };
 
@@ -127,7 +127,7 @@ const Run = ({
         onConfirm={onConfirm}
         isLoading={isLoading}
         description={`Task instances you are about to clear (${affectedTasks.length}):`}
-        body={affectedTasks}
+        affectedTasks={affectedTasks}
       >
         { isGroup && (past || future) && (
           <Alert status="warning" mb={3}>

diff --git a/airflow/www/static/js/dag/details/taskInstance/taskActions/MarkFailed.tsx b/airflow/www/static/js/dag/details/taskInstance/taskActions/MarkFailed.tsx
@@ -116,7 +116,7 @@ const MarkFailed = ({
         onConfirm={onConfirm}
         isLoading={isLoading}
         description="Task instances you are about to mark as failed:"
-        body={affectedTasks}
+        affectedTasks={affectedTasks}
       />
     </Flex>
   );

diff --git a/airflow/www/static/js/dag/details/taskInstance/taskActions/MarkSuccess.tsx b/airflow/www/static/js/dag/details/taskInstance/taskActions/MarkSuccess.tsx
@@ -111,7 +111,7 @@ const MarkSuccess = ({
         onConfirm={onConfirm}
         isLoading={isLoading}
         description="Task instances you are about to mark as success:"
-        body={affectedTasks}
+        affectedTasks={affectedTasks}
       />
     </Flex>
   );