Improve rendered_template ux in react dag page (#39122)

(cherry picked from commit 5033423)
apache · Apr 26, 2024 · 6cee9b0 · 6cee9b0
1 parent 7cd476e
commit 6cee9b0
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 32 deletions.
diff --git a/airflow/www/static/js/dag/details/taskInstance/Details.tsx b/airflow/www/static/js/dag/details/taskInstance/Details.tsx
@@ -231,29 +231,6 @@ const Details = ({ gridInstance, taskInstance, group }: Props) => {
               </Td>
             </Tr>
           )}
-          {taskInstance?.renderedFields && (
-            <>
-              {Object.keys(taskInstance.renderedFields).map((key) => {
-                const renderedFields = taskInstance.renderedFields as Record<
-                  string,
-                  unknown
-                >;
-                if (renderedFields[key]) {
-                  return (
-                    <Tr key={key}>
-                      <Td>{key}</Td>
-                      <Td>
-                        <Code fontSize="md">
-                          {JSON.stringify(renderedFields[key])}
-                        </Code>
-                      </Td>
-                    </Tr>
-                  );
-                }
-                return null;
-              })}
-            </>
-          )}
           {!!taskInstance?.pool && (
             <Tr>
               <Td>Pool</Td>
@@ -300,6 +277,42 @@ const Details = ({ gridInstance, taskInstance, group }: Props) => {
           )}
         </Tbody>
       </Table>
+      {taskInstance?.renderedFields && (
+        <Box mt={3}>
+          <Text as="strong" mb={3}>
+            Rendered Templates
+          </Text>
+          <Table>
+            <Tbody>
+              {Object.keys(taskInstance.renderedFields).map((key) => {
+                const renderedFields = taskInstance.renderedFields as Record<
+                  string,
+                  unknown
+                >;
+                let field = renderedFields[key];
+                if (field) {
+                  if (typeof field !== "string") {
+                    try {
+                      field = JSON.stringify(field);
+                    } catch (e) {
+                      // skip
+                    }
+                  }
+                  return (
+                    <Tr key={key}>
+                      <Td>{key}</Td>
+                      <Td>
+                        <Code fontSize="md">{field as string}</Code>
+                      </Td>
+                    </Tr>
+                  );
+                }
+                return null;
+              })}
+            </Tbody>
+          </Table>
+        </Box>
+      )}
     </Box>
   );
 };

diff --git a/airflow/www/static/js/dag/details/taskInstance/Nav.tsx b/airflow/www/static/js/dag/details/taskInstance/Nav.tsx
@@ -29,7 +29,6 @@ const dagId = getMetaValue("dag_id");
 const isK8sExecutor = getMetaValue("k8s_or_k8scelery_executor") === "True";
 const taskInstancesUrl = getMetaValue("task_instances_list_url");
 const renderedK8sUrl = getMetaValue("rendered_k8s_url");
-const renderedTemplatesUrl = getMetaValue("rendered_templates_url");
 const taskUrl = getMetaValue("task_url");
 const gridUrl = getMetaValue("grid_url");
 
@@ -50,7 +49,6 @@ const Nav = forwardRef<HTMLDivElement, Props>(
       map_index: mapIndex ?? -1,
     });
     const detailsLink = `${taskUrl}&${params}`;
-    const renderedLink = `${renderedTemplatesUrl}&${params}`;
     const k8sLink = `${renderedK8sUrl}&${params}`;
     const listParams = new URLSearchParamsWrapper({
       _flt_3_dag_id: dagId,
@@ -79,7 +77,6 @@ const Nav = forwardRef<HTMLDivElement, Props>(
         {(!isMapped || mapIndex !== undefined) && (
           <>
             <LinkButton href={detailsLink}>More Details</LinkButton>
-            <LinkButton href={renderedLink}>Rendered Template</LinkButton>
             {isK8sExecutor && (
               <LinkButton href={k8sLink}>K8s Pod Spec</LinkButton>
             )}
@@ -88,11 +85,8 @@ const Nav = forwardRef<HTMLDivElement, Props>(
             )}
           </>
         )}
-        <LinkButton
-          href={allInstancesLink}
-          title="View all instances across all DAG runs"
-        >
-          List Instances, all runs
+        <LinkButton href={allInstancesLink} title="View all">
+          List All Instances
         </LinkButton>
       </Flex>
     );

diff --git a/airflow/www/templates/airflow/dag.html b/airflow/www/templates/airflow/dag.html
@@ -65,7 +65,6 @@
   <meta name="graph_url" content="{{ url_for('Airflow.graph', dag_id=dag.dag_id, root=root) }}">
   <meta name="task_url" content="{{ url_for('Airflow.task', dag_id=dag.dag_id) }}">
   <meta name="log_url" content="{{ url_for('Airflow.log', dag_id=dag.dag_id) }}">
-  <meta name="rendered_templates_url" content="{{ url_for('Airflow.rendered_templates', dag_id=dag.dag_id) }}">
   <meta name="rendered_k8s_url" content="{{ url_for('Airflow.rendered_k8s', dag_id=dag.dag_id) }}">
   <meta name="task_instances_list_url" content="{{ url_for('TaskInstanceModelView.list') }}">
   <meta name="tag_index_url" content="{{ url_for('Airflow.index', tags='_TAG_NAME_') }}">