Add link to respective dagrun and task instance from recent runs. (ap…

…ache#44903) * Add link to the respective dag run and task instance from recent runs plot. * Fix model name for pluralization.
astronomer · Dec 13, 2024 · db22778 · db22778
1 parent 224a4e3
commit db22778
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 21 deletions.
diff --git a/airflow/ui/src/pages/Dag/Tasks/TaskRecentRuns.tsx b/airflow/ui/src/pages/Dag/Tasks/TaskRecentRuns.tsx
@@ -16,10 +16,10 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { Box } from "@chakra-ui/react";
-import { Flex } from "@chakra-ui/react";
+import { Box, Flex } from "@chakra-ui/react";
 import dayjs from "dayjs";
 import duration from "dayjs/plugin/duration";
+import { Link } from "react-router-dom";
 
 import type { TaskInstanceResponse } from "openapi/requests/types.gen";
 import TaskInstanceTooltip from "src/components/TaskInstanceTooltip";
@@ -59,15 +59,19 @@ export const TaskRecentRuns = ({
             key={taskInstance.dag_run_id}
             taskInstance={taskInstance}
           >
-            <Box p={1}>
-              <Box
-                bg={stateColor[taskInstance.state]}
-                borderRadius="4px"
-                height={`${(taskInstance.duration / max) * BAR_HEIGHT}px`}
-                minHeight={1}
-                width="4px"
-              />
-            </Box>
+            <Link
+              to={`/dags/${taskInstance.dag_id}/runs/${taskInstance.dag_run_id}/tasks/${taskInstance.task_id}?map_index=${taskInstance.map_index}`}
+            >
+              <Box p={1}>
+                <Box
+                  bg={stateColor[taskInstance.state]}
+                  borderRadius="4px"
+                  height={`${(taskInstance.duration / max) * BAR_HEIGHT}px`}
+                  minHeight={1}
+                  width="4px"
+                />
+              </Box>
+            </Link>
           </TaskInstanceTooltip>
         ),
       )}

diff --git a/airflow/ui/src/pages/DagsList/RecentRuns.tsx b/airflow/ui/src/pages/DagsList/RecentRuns.tsx
@@ -19,6 +19,7 @@
 import { Flex, Box, Text } from "@chakra-ui/react";
 import dayjs from "dayjs";
 import duration from "dayjs/plugin/duration";
+import { Link } from "react-router-dom";
 
 import type { DAGWithLatestDagRunsResponse } from "openapi/requests/types.gen";
 import Time from "src/components/Time";
@@ -73,15 +74,17 @@ export const RecentRuns = ({
           }}
           showArrow
         >
-          <Box p={1}>
-            <Box
-              bg={stateColor[run.state]}
-              borderRadius="4px"
-              height={`${(run.duration / max) * BAR_HEIGHT}px`}
-              minHeight={1}
-              width="4px"
-            />
-          </Box>
+          <Link to={`/dags/${run.dag_id}/runs/${run.dag_run_id}/`}>
+            <Box p={1}>
+              <Box
+                bg={stateColor[run.state]}
+                borderRadius="4px"
+                height={`${(run.duration / max) * BAR_HEIGHT}px`}
+                minHeight={1}
+                width="4px"
+              />
+            </Box>
+          </Link>
         </Tooltip>
       ))}
     </Flex>

diff --git a/airflow/ui/src/pages/Variables/Variables.tsx b/airflow/ui/src/pages/Variables/Variables.tsx
@@ -113,7 +113,7 @@ export const Variables = () => {
           initialState={tableURLState}
           isFetching={isFetching}
           isLoading={isLoading}
-          modelName="Variables"
+          modelName="Variable"
           onStateChange={setTableURLState}
           total={data ? data.total_entries : 0}
         />