Add Dag Runs list to new UI

[bbovenzi]

Use list dag run and get dag run to render a list of dag runs, initialize a dag run page, and add an Overview button to see failed runs.

Also:

• moved TaskCountChart to its own component
• use chakra's Status component
• remove 8 hours option in time range selector. 12 is good

Still a draft because I'm having issues with the Failed Run link passing search params correctly.

---

^ Add meaningful description above
Read the Pull Request Guidelines for more information.
In case of fundamental code changes, an Airflow Improvement Proposal (AIP) is needed.
In case of a new dependency, check compliance with the ASF 3rd Party License Policy.
In case of backwards incompatible changes please leave a note in a newsfragment file, named {pr_number}.significant.rst or {issue_number}.significant.rst, in newsfragments.

[tirkarthi]

Since try_number is present in the task_instance probably a filter to get task_instance.try_number > 1 could be added to the API to fill retried tasks section. Something like below but the color palette needs a fix since up_for_retry has gold color which is not compatible with Chakra.

diff --git a/airflow/api_fastapi/core_api/openapi/v1-generated.yaml b/airflow/api_fastapi/core_api/openapi/v1-generated.yaml
index 2f74f22689..5238ad1f91 100644
--- a/airflow/api_fastapi/core_api/openapi/v1-generated.yaml
+++ b/airflow/api_fastapi/core_api/openapi/v1-generated.yaml
@@ -3894,6 +3894,22 @@ paths:
           - type: number
           - type: 'null'
           title: Duration Lte
+      - name: try_number_gte
+        in: query
+        required: false
+        schema:
+          anyOf:
+          - type: number
+          - type: 'null'
+          title: Try Number Gte
+      - name: try_number_lte
+        in: query
+        required: false
+        schema:
+          anyOf:
+          - type: number
+          - type: 'null'
+          title: Try Number Lte
       - name: state
         in: query
         required: false
diff --git a/airflow/api_fastapi/core_api/routes/public/task_instances.py b/airflow/api_fastapi/core_api/routes/public/task_instances.py
index 6d5b427abb..9278ed16cb 100644
--- a/airflow/api_fastapi/core_api/routes/public/task_instances.py
+++ b/airflow/api_fastapi/core_api/routes/public/task_instances.py
@@ -277,6 +277,7 @@ def get_task_instances(
     end_date_range: Annotated[RangeFilter, Depends(datetime_range_filter_factory("end_date", TI))],
     update_at_range: Annotated[RangeFilter, Depends(datetime_range_filter_factory("updated_at", TI))],
     duration_range: Annotated[RangeFilter, Depends(float_range_filter_factory("duration", TI))],
+    try_number: Annotated[RangeFilter, Depends(float_range_filter_factory("try_number", TI))],
     state: QueryTIStateFilter,
     pool: QueryTIPoolFilter,
     queue: QueryTIQueueFilter,
@@ -325,6 +326,7 @@ def get_task_instances(
             end_date_range,
             update_at_range,
             duration_range,
+            try_number,
             state,
             pool,
             queue,
diff --git a/airflow/ui/src/pages/DagsList/Dag/Overview/Overview.tsx b/airflow/ui/src/pages/DagsList/Dag/Overview/Overview.tsx
index 1a891cf8a7..d803b89eb3 100644
--- a/airflow/ui/src/pages/DagsList/Dag/Overview/Overview.tsx
+++ b/airflow/ui/src/pages/DagsList/Dag/Overview/Overview.tsx
@@ -49,6 +49,16 @@ export const Overview = () => {
       state: ["failed"],
     });
 
+  const { data: retriedTasks, isLoading: isLoadingRetriedTasks } =
+    useTaskInstanceServiceGetTaskInstances({
+      dagId: dagId ?? "",
+      dagRunId: "~",
+      logicalDateGte: startDate,
+      logicalDateLte: endDate,
+      state: ["failed"],
+      tryNumberGte: 1,
+    });
+
   const { data: failedRuns, isLoading: isLoadingRuns } =
     useDagRunServiceGetDagRuns({
       dagId: dagId ?? "",
@@ -77,7 +87,7 @@ export const Overview = () => {
           events={(failedTasks?.task_instances ?? []).map((ti) => ({
             timestamp: ti.start_date ?? ti.logical_date,
           }))}
-          isLoading={isLoading}
+          isLoading={isLoadingRetriedTasks}
           label="Failed Task"
           route={`${location.pathname}/tasks`}
           startDate={startDate}
@@ -97,6 +107,18 @@ export const Overview = () => {
           }}
           startDate={startDate}
         />
+        <TrendCountButton
+          colorPalette={stateColor.up_for_retry}
+          count={retriedTasks?.total_entries ?? 0}
+          endDate={endDate}
+          events={(retriedTasks?.task_instances ?? []).map((ti) => ({
+            timestamp: ti.start_date ?? ti.logical_date,
+          }))}
+          isLoading={isLoading}
+          label="Retried Task"
+          route={`${location.pathname}/tasks`}
+          startDate={startDate}
+        />
       </HStack>
     </Box>
   );

[bbovenzi]

Since try_number is present in the task_instance probably a filter to get task_instance.try_number > 1 could be added to the API to fill retried tasks section. Something like below but the color palette needs a fix since up_for_retry has gold color which is not compatible with Chakra.

Nice! Do you want to make a pull request with that after this is merged?

[tirkarthi]

Sure @bbovenzi