From db22778e175f524f7d87ec07102467acd924b470 Mon Sep 17 00:00:00 2001
From: Karthikeyan Singaravelan <tir.karthi@gmail.com>
Date: Fri, 13 Dec 2024 19:25:02 +0530
Subject: [PATCH] Add link to respective dagrun and task instance from recent
 runs. (#44903)

* Add link to the respective dag run and task instance from recent runs plot.

* Fix model name for pluralization.
---
 .../ui/src/pages/Dag/Tasks/TaskRecentRuns.tsx | 26 +++++++++++--------
 airflow/ui/src/pages/DagsList/RecentRuns.tsx  | 21 ++++++++-------
 airflow/ui/src/pages/Variables/Variables.tsx  |  2 +-
 3 files changed, 28 insertions(+), 21 deletions(-)

diff --git a/airflow/ui/src/pages/Dag/Tasks/TaskRecentRuns.tsx b/airflow/ui/src/pages/Dag/Tasks/TaskRecentRuns.tsx
index a69d7d72790e2..02f34f8967905 100644
--- 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
index 355c68c9d09b0..ee1ce9aabdb02 100644
--- 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
index bc3f2c310c49e..c1aefdefcd5d4 100644
--- 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}
         />