Fix some UI usage of logical_date vs run_after

airflow/ui/src/components/DagRunInfo.tsx

@@ -25,59 +25,44 @@ import Time from "src/components/Time";
 import { Tooltip } from "src/components/ui";
 
 type Props = {
-  readonly dataIntervalEnd?: string | null;
-  readonly dataIntervalStart?: string | null;
   readonly endDate?: string | null;
-  readonly nextDagrunCreateAfter?: string | null;
+  readonly logicalDate?: string | null;
+  readonly runAfter: string;
   readonly startDate?: string | null;
   readonly state?: DAGRunResponse["state"];
 };
 
-const DagRunInfo = ({
-  dataIntervalEnd,
-  dataIntervalStart,
-  endDate,
-  nextDagrunCreateAfter,
-  startDate,
-  state,
-}: Props) =>
-  Boolean(dataIntervalStart) && Boolean(dataIntervalEnd) ? (
-    <Tooltip
-      content={
-        <VStack align="left" gap={0}>
-          {state === undefined ? undefined : <Text>State: {state}</Text>}
-          {Boolean(nextDagrunCreateAfter) ? (
-            <Text>
-              Run After: <Time datetime={nextDagrunCreateAfter} />
-            </Text>
-          ) : undefined}
-          {Boolean(startDate) ? (
-            <Text>
-              Start Date: <Time datetime={startDate} />
-            </Text>
-          ) : undefined}
-          {Boolean(endDate) ? (
-            <Text>
-              End Date: <Time datetime={endDate} />
-            </Text>
-          ) : undefined}
-          {Boolean(startDate) ? (
-            <Text>Duration: {dayjs.duration(dayjs(endDate).diff(startDate)).asSeconds()}s</Text>
-          ) : undefined}
+const DagRunInfo = ({ endDate, logicalDate, runAfter, startDate, state }: Props) => (
+  <Tooltip
+    content={
+      <VStack align="left" gap={0}>
+        {state === undefined ? undefined : <Text>State: {state}</Text>}
+        {Boolean(logicalDate) ? (
           <Text>
-            Data Interval Start: <Time datetime={dataIntervalStart} />
+            Logical Date: <Time datetime={logicalDate} />
           </Text>
+        ) : undefined}
+        {Boolean(startDate) ? (
           <Text>
-            Data Interval End: <Time datetime={dataIntervalEnd} />
+            Start Date: <Time datetime={startDate} />
           </Text>
-        </VStack>
-      }
-    >
-      <Box>
-        <Time datetime={dataIntervalStart} mr={2} showTooltip={false} />
-        {state === undefined ? undefined : <StateBadge state={state} />}
-      </Box>
-    </Tooltip>
-  ) : undefined;
+        ) : undefined}
+        {Boolean(endDate) ? (
+          <Text>
+            End Date: <Time datetime={endDate} />
+          </Text>
+        ) : undefined}
+        {Boolean(startDate) ? (
+          <Text>Duration: {dayjs.duration(dayjs(endDate).diff(startDate)).asSeconds()}s</Text>
+        ) : undefined}
+      </VStack>
+    }
+  >
+    <Box>
+      <Time datetime={runAfter} mr={2} showTooltip={false} />
+      {state === undefined ? undefined : <StateBadge state={state} />}
+    </Box>
+  </Tooltip>
+);
 
 export default DagRunInfo;

airflow/ui/src/pages/Dag/Header.tsx

@@ -93,20 +93,19 @@ export const Header = ({
           <Stat label="Latest Run">
             {Boolean(latestRun) && latestRun !== undefined ? (
               <DagRunInfo
-                dataIntervalEnd={latestRun.data_interval_end}
-                dataIntervalStart={latestRun.data_interval_start}
                 endDate={latestRun.end_date}
+                logicalDate={latestRun.logical_date}
+                runAfter={latestRun.run_after}
                 startDate={latestRun.start_date}
                 state={latestRun.state}
               />
             ) : undefined}
           </Stat>
           <Stat label="Next Run">
-            {Boolean(dagWithRuns?.next_dagrun) ? (
+            {Boolean(dagWithRuns?.next_dagrun_create_after) ? (
               <DagRunInfo
-                dataIntervalEnd={dagWithRuns?.next_dagrun_data_interval_end}
-                dataIntervalStart={dagWithRuns?.next_dagrun_data_interval_start}
-                nextDagrunCreateAfter={dagWithRuns?.next_dagrun_create_after}
+                logicalDate={dagWithRuns?.next_dagrun}
+                runAfter={dagWithRuns?.next_dagrun_create_after as string}
               />
             ) : undefined}
           </Stat>

airflow/ui/src/pages/Dag/Overview/Overview.tsx

@@ -88,7 +88,7 @@ export const Overview = () => {
           count={failedRuns?.total_entries ?? 0}
           endDate={endDate}
           events={(failedRuns?.dag_runs ?? []).map((dr) => ({
-            timestamp: dr.start_date ?? dr.logical_date ?? "",
+            timestamp: dr.run_after,
           }))}
           isLoading={isLoadingFailedRuns}
           label="Failed Run"

airflow/ui/src/pages/DagRuns.tsx

@@ -53,16 +53,15 @@ const runColumns = (dagId?: string): Array<ColumnDef<DAGRunResponse>> => [
         },
       ]),
   {
-    accessorKey: "run_id",
+    accessorKey: "run_after",
     cell: ({ row: { original } }: DagRunRow) => (
       <Link asChild color="fg.info" fontWeight="bold">
         <RouterLink to={`/dags/${original.dag_id}/runs/${original.dag_run_id}`}>
-          {original.dag_run_id}
+          <Time datetime={original.run_after} />
         </RouterLink>
       </Link>
     ),
-    enableSorting: false,
-    header: "Run ID",
+    header: "Run After",
   },
   {
     accessorKey: "state",

airflow/ui/src/pages/DagsList/DagCard.tsx

@@ -65,9 +65,9 @@ export const DagCard = ({ dag }: Props) => {
             <Link asChild color="fg.info">
               <RouterLink to={`/dags/${latestRun.dag_id}/runs/${latestRun.dag_run_id}`}>
                 <DagRunInfo
-                  dataIntervalEnd={latestRun.data_interval_end}
-                  dataIntervalStart={latestRun.data_interval_start}
                   endDate={latestRun.end_date}
+                  logicalDate={latestRun.logical_date}
+                  runAfter={latestRun.run_after}
                   startDate={latestRun.start_date}
                   state={latestRun.state}
                 />
@@ -77,12 +77,8 @@ export const DagCard = ({ dag }: Props) => {
           ) : undefined}
         </Stat>
         <Stat label="Next Run">
-          {Boolean(dag.next_dagrun) ? (
-            <DagRunInfo
-              dataIntervalEnd={dag.next_dagrun_data_interval_end}
-              dataIntervalStart={dag.next_dagrun_data_interval_start}
-              nextDagrunCreateAfter={dag.next_dagrun_create_after}
-            />
+          {Boolean(dag.next_dagrun_create_after) ? (
+            <DagRunInfo logicalDate={dag.next_dagrun} runAfter={dag.next_dagrun_create_after as string} />
           ) : undefined}
         </Stat>
         <RecentRuns latestRuns={dag.latest_dag_runs} />

airflow/ui/src/pages/DagsList/DagsList.tsx

@@ -87,11 +87,10 @@ const columns: Array<ColumnDef<DAGWithLatestDagRunsResponse>> = [
   {
     accessorKey: "next_dagrun",
     cell: ({ row: { original } }) =>
-      Boolean(original.next_dagrun) ? (
+      Boolean(original.next_dagrun_create_after) ? (
         <DagRunInfo
-          dataIntervalEnd={original.next_dagrun_data_interval_end}
-          dataIntervalStart={original.next_dagrun_data_interval_start}
-          nextDagrunCreateAfter={original.next_dagrun_create_after}
+          logicalDate={original.next_dagrun}
+          runAfter={original.next_dagrun_create_after as string}
         />
       ) : undefined,
     header: "Next Dag Run",
@@ -101,9 +100,9 @@ const columns: Array<ColumnDef<DAGWithLatestDagRunsResponse>> = [
     cell: ({ row: { original } }) =>
       original.latest_dag_runs[0] ? (
         <DagRunInfo
-          dataIntervalEnd={original.latest_dag_runs[0].data_interval_end}
-          dataIntervalStart={original.latest_dag_runs[0].data_interval_start}
           endDate={original.latest_dag_runs[0].end_date}
+          logicalDate={original.latest_dag_runs[0].logical_date}
+          runAfter={original.latest_dag_runs[0].run_after}
           startDate={original.latest_dag_runs[0].start_date}
           state={original.latest_dag_runs[0].state}
         />

airflow/ui/src/pages/DagsList/RecentRuns.tsx

@@ -56,8 +56,18 @@ export const RecentRuns = ({
             <Box>
               <Text>State: {run.state}</Text>
               <Text>
-                Start Date: <Time datetime={run.start_date} />
+                Run After: <Time datetime={run.run_after} />
               </Text>
+              {run.start_date === null ? undefined : (
+                <Text>
+                  Start Date: <Time datetime={run.start_date} />
+                </Text>
+              )}
+              {run.end_date === null ? undefined : (
+                <Text>
+                  End Date: <Time datetime={run.end_date} />
+                </Text>
+              )}
               <Text>Duration: {run.duration.toFixed(2)}s</Text>
             </Box>
           }