Feat: Add version change indicators for Dag and bundle versions in Grid view

airflow-core/src/airflow/api_fastapi/core_api/datamodels/ui/common.py

@@ -79,6 +79,8 @@ class GridRunsResponse(BaseModel):
     run_after: datetime
     state: DagRunState | None
     run_type: DagRunType
+    bundle_version: str | None = None
+    dag_version_number: int | None = None
 
     @computed_field
     def duration(self) -> float:

airflow-core/src/airflow/api_fastapi/core_api/datamodels/ui/grid.py

@@ -32,6 +32,7 @@ class LightGridTaskInstanceSummary(BaseModel):
     child_states: dict[TaskInstanceState | None, int] | None
     min_start_date: datetime | None
     max_end_date: datetime | None
+    dag_version_number: int | None = None
 
 
 class GridTISummaries(BaseModel):

airflow-core/src/airflow/api_fastapi/core_api/openapi/_private_ui.yaml

@@ -2095,6 +2095,16 @@ components:
           - type: 'null'
         run_type:
           $ref: '#/components/schemas/DagRunType'
+        bundle_version:
+          anyOf:
+          - type: string
+          - type: 'null'
+          title: Bundle Version
+        dag_version_number:
+          anyOf:
+          - type: integer
+          - type: 'null'
+          title: Dag Version Number
         duration:
           type: number
           title: Duration
@@ -2361,6 +2371,11 @@ components:
             format: date-time
           - type: 'null'
           title: Max End Date
+        dag_version_number:
+          anyOf:
+          - type: integer
+          - type: 'null'
+          title: Dag Version Number
       type: object
       required:
       - task_id

airflow-core/src/airflow/api_fastapi/core_api/routes/ui/grid.py

@@ -22,7 +22,7 @@
 
 import structlog
 from fastapi import Depends, HTTPException, status
-from sqlalchemy import select
+from sqlalchemy import func, select
 from sqlalchemy.orm import joinedload
 
 from airflow.api_fastapi.auth.managers.models.resource_details import DagAccessEntity
@@ -274,17 +274,34 @@ def get_grid_runs(
     triggering_user: QueryDagRunTriggeringUserSearch,
 ) -> list[GridRunsResponse]:
     """Get info about a run for the grid."""
-    # Retrieve, sort the previous DAG Runs
-    base_query = select(
-        DagRun.dag_id,
-        DagRun.run_id,
-        DagRun.queued_at,
-        DagRun.start_date,
-        DagRun.end_date,
-        DagRun.run_after,
-        DagRun.state,
-        DagRun.run_type,
-    ).where(DagRun.dag_id == dag_id)
+    # get the highest dag_version_number from TIs for each run
+    latest_ti_version = (
+        select(
+            TaskInstance.run_id,
+            func.max(DagVersion.version_number).label("version_number"),
+        )
+        .join(DagVersion, TaskInstance.dag_version_id == DagVersion.id)
+        .where(TaskInstance.dag_id == dag_id)
+        .group_by(TaskInstance.run_id)
+        .subquery()
+    )
+
+    base_query = (
+        select(
+            DagRun.dag_id,
+            DagRun.run_id,
+            DagRun.queued_at,
+            DagRun.start_date,
+            DagRun.end_date,
+            DagRun.run_after,
+            DagRun.state,
+            DagRun.run_type,
+            DagRun.bundle_version,
+            latest_ti_version.c.version_number.label("dag_version_number"),
+        )
+        .outerjoin(latest_ti_version, DagRun.run_id == latest_ti_version.c.run_id)
+        .where(DagRun.dag_id == dag_id)
+    )
 
     # This comparison is to fall back to DAG timetable when no order_by is provided
     if order_by.value == [order_by.get_primary_key_string()]:
@@ -355,7 +372,9 @@ def get_grid_ti_summaries(
                 TaskInstance.dag_version_id,
                 TaskInstance.start_date,
                 TaskInstance.end_date,
+                DagVersion.version_number,
             )
+            .outerjoin(DagVersion, TaskInstance.dag_version_id == DagVersion.id)
             .where(TaskInstance.dag_id == dag_id)
             .where(
                 TaskInstance.run_id == run_id,
@@ -378,6 +397,7 @@ def get_grid_ti_summaries(
                 "state": ti.state,
                 "start_date": ti.start_date,
                 "end_date": ti.end_date,
+                "dag_version_number": ti.version_number,
             }
         )
     serdag = _get_serdag(

airflow-core/src/airflow/api_fastapi/core_api/services/ui/grid.py

@@ -69,11 +69,18 @@ def _get_aggs_for_node(detail):
         max_end_date = max(x["end_date"] for x in detail if x["end_date"])
     except ValueError:
         max_end_date = None
+
+    dag_version_numbers = [
+        x.get("dag_version_number") for x in detail if x.get("dag_version_number") is not None
+    ]
+    dag_version_number = max(dag_version_numbers) if dag_version_numbers else None
+
     return {
         "state": agg_state(states),
         "min_start_date": min_start_date,
         "max_end_date": max_end_date,
         "child_states": dict(Counter(states)),
+        "dag_version_number": dag_version_number,
     }
 
 

airflow-core/src/airflow/ui/openapi-gen/requests/schemas.gen.ts

@@ -8021,6 +8021,28 @@ export const $GridRunsResponse = {
         run_type: {
             '$ref': '#/components/schemas/DagRunType'
         },
+        bundle_version: {
+            anyOf: [
+                {
+                    type: 'string'
+                },
+                {
+                    type: 'null'
+                }
+            ],
+            title: 'Bundle Version'
+        },
+        dag_version_number: {
+            anyOf: [
+                {
+                    type: 'integer'
+                },
+                {
+                    type: 'null'
+                }
+            ],
+            title: 'Dag Version Number'
+        },
         duration: {
             type: 'number',
             title: 'Duration',
@@ -8132,6 +8154,17 @@ export const $LightGridTaskInstanceSummary = {
                 }
             ],
             title: 'Max End Date'
+        },
+        dag_version_number: {
+            anyOf: [
+                {
+                    type: 'integer'
+                },
+                {
+                    type: 'null'
+                }
+            ],
+            title: 'Dag Version Number'
         }
     },
     type: 'object',

airflow-core/src/airflow/ui/openapi-gen/requests/types.gen.ts

@@ -1974,6 +1974,8 @@ export type GridRunsResponse = {
     run_after: string;
     state: DagRunState | null;
     run_type: DagRunType;
+    bundle_version?: string | null;
+    dag_version_number?: number | null;
     readonly duration: number;
 };
 
@@ -2007,6 +2009,7 @@ export type LightGridTaskInstanceSummary = {
 } | null;
     min_start_date: string | null;
     max_end_date: string | null;
+    dag_version_number?: number | null;
 };
 
 /**

airflow-core/src/airflow/ui/public/i18n/locales/en/dag.json

@@ -121,6 +121,15 @@
     "graphDirection": {
       "label": "Graph Direction"
     },
+    "showVersionIndicator": {
+      "label": "Show Version Indicator",
+      "options": {
+        "hideAll": "Hide All",
+        "showAll": "Show All",
+        "showBundleVersion": "Show Bundle Version",
+        "showDagVersion": "Show Dag Version"
+      }
+    },
     "taskStreamFilter": {
       "activeFilter": "Active filter",
       "clearFilter": "Clear Filter",

airflow-core/src/airflow/ui/src/components/ui/VersionIndicator.tsx

@@ -0,0 +1,122 @@
+/*!
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import { Box } from "@chakra-ui/react";
+import { useTranslation } from "react-i18next";
+import { FiGitCommit } from "react-icons/fi";
+
+import { Tooltip } from "src/components/ui";
+
+type BundleVersionIndicatorProps = {
+  readonly bundleVersion: string | undefined;
+};
+
+export const BundleVersionIndicator = ({ bundleVersion }: BundleVersionIndicatorProps) => {
+  const { t: translate } = useTranslation("components");
+
+  return (
+    <Tooltip content={`${translate("versionDetails.bundleVersion")}: ${bundleVersion}`}>
+      <Box color="orange.focusRing" left={-2} position="absolute" top={93} zIndex={1}>
+        <FiGitCommit size={15} />
+      </Box>
+    </Tooltip>
+  );
+};
+
+const CONTAINER_STYLES = {
+  horizontal: {
+    height: 0.5,
+    left: "50%",
+    top: 0,
+    transform: "translate(-50%, -50%)",
+    width: 4.5,
+  },
+  vertical: {
+    height: 104,
+    left: -1.25,
+    top: -1.5,
+    width: 0.5,
+  },
+} as const;
+
+const CIRCLE_STYLES = {
+  horizontal: {
+    height: 1.5,
+    left: "50%",
+    top: "50%",
+    transform: "translate(-50%, -50%)",
+    width: 1.5,
+  },
+  vertical: {
+    height: 1.5,
+    left: "50%",
+    top: -1,
+    transform: "translateX(-50%)",
+    width: 1.5,
+  },
+} as const;
+
+type DagVersionIndicatorProps = {
+  readonly dagVersionNumber: number | undefined;
+  readonly orientation?: "horizontal" | "vertical";
+};
+
+export const DagVersionIndicator = ({
+  dagVersionNumber,
+  orientation = "vertical",
+}: DagVersionIndicatorProps) => {
+  const isVertical = orientation === "vertical";
+  const currentContainerStyle = CONTAINER_STYLES[orientation];
+  const currentCircleStyle = CIRCLE_STYLES[orientation];
+
+  return (
+    <Box
+      aria-label={`Version ${dagVersionNumber} indicator`}
+      as="output"
+      position="absolute"
+      zIndex={1}
+      {...currentContainerStyle}
+    >
+      <Box
+        bg="orange.focusRing"
+        height={isVertical ? "full" : 0.5}
+        position="absolute"
+        width={isVertical ? 0.5 : "full"}
+      />
+
+      <Tooltip
+        content={`v${dagVersionNumber ?? ""}`}
+        positioning={{
+          placement: isVertical ? "top" : "right",
+        }}
+      >
+        <Box
+          _hover={{
+            cursor: "pointer",
+            transform: `${currentCircleStyle.transform} scale(1.2)`,
+          }}
+          bg="orange.focusRing"
+          borderRadius="full"
+          position="absolute"
+          transition="all 0.2s ease-in-out"
+          {...currentCircleStyle}
+        />
+      </Tooltip>
+    </Box>
+  );
+};

airflow-core/src/airflow/ui/src/constants/showVersionIndicatorOptions.ts

@@ -0,0 +1,46 @@
+/*!
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import { createListCollection } from "@chakra-ui/react";
+
+export enum VersionIndicatorDisplayOptions {
+  ALL = "all",
+  BUNDLE = "bundle",
+  DAG = "dag",
+  NONE = "none",
+}
+
+const validOptions = new Set<string>(Object.values(VersionIndicatorDisplayOptions));
+
+export const isVersionIndicatorDisplayOption = (value: unknown): value is VersionIndicatorDisplayOptions =>
+  typeof value === "string" && validOptions.has(value);
+
+export const showVersionIndicatorOptions = createListCollection({
+  items: [
+    { label: "dag:panel.showVersionIndicator.options.showAll", value: VersionIndicatorDisplayOptions.ALL },
+    {
+      label: "dag:panel.showVersionIndicator.options.showBundleVersion",
+      value: VersionIndicatorDisplayOptions.BUNDLE,
+    },
+    {
+      label: "dag:panel.showVersionIndicator.options.showDagVersion",
+      value: VersionIndicatorDisplayOptions.DAG,
+    },
+    { label: "dag:panel.showVersionIndicator.options.hideAll", value: VersionIndicatorDisplayOptions.NONE },
+  ],
+});