Dag Run and Overview Tab Display Deadlines

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

@@ -40,6 +40,32 @@
     "parseDuration": "Parse Duration:",
     "parsedAt": "Parsed at:"
   },
+  "deadlineAlerts": {
+    "completionRule": "Must complete within {{interval}} of {{reference}}",
+    "count_one": "{{count}} deadline",
+    "count_other": "{{count}} deadlines",
+    "referenceType": {
+      "AverageRuntimeDeadline": "average runtime",
+      "DagRunLogicalDateDeadline": "logical date",
+      "DagRunQueuedAtDeadline": "queue time"
+    }
+  },
+  "deadlineStatus": {
+    "actual": "Actual",
+    "expected": "Expected",
+    "finishedEarly": "Finished {{duration}} before deadline",
+    "finishedLate": "Finished {{duration}} after deadline",
+    "label": "Deadline",
+    "met": "Met",
+    "missed": "Missed",
+    "missedCount_one": "{{count}} Missed Deadline",
+    "missedCount_other": "{{count}} Missed Deadlines",
+    "mixedCount": "{{missedCount}} Missed, {{upcomingCount}} Upcoming",
+    "stillRunning": "Still running",
+    "upcoming": "Upcoming",
+    "upcomingCount_one": "{{count}} Upcoming Deadline",
+    "upcomingCount_other": "{{count}} Upcoming Deadlines"
+  },
   "extraLinks": "Extra Links",
   "grid": {
     "buttons": {
@@ -103,6 +129,10 @@
       "assetEvent_one": "Created Asset Event",
       "assetEvent_other": "Created Asset Events"
     },
+    "deadlines": {
+      "showAll": "Show All",
+      "title": "Deadlines"
+    },
     "failedLogs": {
       "hideLogs": "Hide Logs",
       "showLogs": "Show Logs",

airflow-core/src/airflow/ui/src/pages/Dag/DeadlineAlertsBadge.tsx

@@ -0,0 +1,87 @@
+/*!
+ * 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, Button, Separator, Text, VStack } from "@chakra-ui/react";
+import dayjs from "dayjs";
+import duration from "dayjs/plugin/duration";
+import relativeTime from "dayjs/plugin/relativeTime";
+import { useTranslation } from "react-i18next";
+import { FiClock } from "react-icons/fi";
+
+import { useDeadlinesServiceGetDagDeadlineAlerts } from "openapi/queries";
+import type { DeadlineAlertResponse } from "openapi/requests/types.gen";
+import { Popover } from "src/components/ui";
+
+dayjs.extend(duration);
+dayjs.extend(relativeTime);
+
+const AlertRow = ({ alert }: { readonly alert: DeadlineAlertResponse }) => {
+  const { t: translate } = useTranslation("dag");
+  const reference = translate(`deadlineAlerts.referenceType.${alert.reference_type}`, {
+    defaultValue: alert.reference_type,
+  });
+  const interval = dayjs.duration(alert.interval, "seconds").humanize();
+
+  return (
+    <Box py={2} width="100%">
+      <Text color="fg.muted" fontSize="xs">
+        {translate("deadlineAlerts.completionRule", { interval, reference })}
+        {Boolean(alert.name) && (
+          <Text as="span" color="fg.subtle" fontSize="xs">
+            {" "}
+            ({alert.name})
+          </Text>
+        )}
+      </Text>
+    </Box>
+  );
+};
+
+export const DeadlineAlertsBadge = ({ dagId }: { readonly dagId: string }) => {
+  const { t: translate } = useTranslation("dag");
+
+  const { data } = useDeadlinesServiceGetDagDeadlineAlerts({ dagId });
+
+  const alerts = data?.deadline_alerts ?? [];
+
+  if (alerts.length === 0) {
+    return undefined;
+  }
+
+  return (
+    // eslint-disable-next-line jsx-a11y/no-autofocus
+    <Popover.Root autoFocus={false} lazyMount unmountOnExit>
+      <Popover.Trigger asChild>
+        <Button color="fg.info" size="xs" variant="outline">
+          <FiClock />
+          {translate("deadlineAlerts.count", { count: data?.total_entries ?? alerts.length })}
+        </Button>
+      </Popover.Trigger>
+      <Popover.Content css={{ "--popover-bg": "colors.bg.emphasized" }} maxWidth="360px" width="fit-content">
+        <Popover.Arrow />
+        <Popover.Body>
+          <VStack gap={0} separator={<Separator />}>
+            {alerts.map((alert) => (
+              <AlertRow alert={alert} key={alert.id} />
+            ))}
+          </VStack>
+        </Popover.Body>
+      </Popover.Content>
+    </Popover.Root>
+  );
+};

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

@@ -36,6 +36,7 @@ import { TogglePause } from "src/components/TogglePause";
 import { DagOwners } from "../DagsList/DagOwners";
 import { DagTags } from "../DagsList/DagTags";
 import { Schedule } from "../DagsList/Schedule";
+import { DeadlineAlertsBadge } from "./DeadlineAlertsBadge";
 
 type LatestRunInfo = {
   dag_id: string;
@@ -131,6 +132,7 @@ export const Header = ({
       actions={
         dag === undefined ? undefined : (
           <>
+            <DeadlineAlertsBadge dagId={dag.dag_id} />
             {dag.doc_md === null ? undefined : (
               <DisplayMarkdownButton
                 header={translate("dagDetails.documentation")}

airflow-core/src/airflow/ui/src/pages/Dag/Overview/AllDeadlinesModal.tsx

@@ -0,0 +1,105 @@
+/*!
+ * 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 { Heading, HStack, Separator, Skeleton, VStack } from "@chakra-ui/react";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+
+import type { DeadlineAlertResponse } from "openapi/requests/types.gen";
+import { ErrorAlert } from "src/components/ErrorAlert";
+import { Dialog } from "src/components/ui";
+import { Pagination } from "src/components/ui/Pagination";
+import { useDeadlines } from "src/queries/useDeadlines";
+
+import { DeadlineRow } from "./DeadlineRow";
+
+const PAGE_LIMIT = 10;
+
+type AllDeadlinesModalProps = {
+  readonly alertMap: Map<string, DeadlineAlertResponse>;
+  readonly dagId: string;
+  readonly onClose: () => void;
+  readonly open: boolean;
+};
+
+export const AllDeadlinesModal = ({ alertMap, dagId, onClose, open }: AllDeadlinesModalProps) => {
+  const { t: translate } = useTranslation("dag");
+  const [page, setPage] = useState(1);
+  const offset = (page - 1) * PAGE_LIMIT;
+
+  const { data, error, isLoading } = useDeadlines({
+    dagId,
+    enabled: open,
+    limit: PAGE_LIMIT,
+    offset,
+  });
+
+  const deadlines = data?.deadlines ?? [];
+  const totalEntries = data?.total_entries ?? 0;
+
+  const getAlert = (alertId?: string | null) =>
+    alertId !== undefined && alertId !== null ? alertMap.get(alertId) : undefined;
+
+  const onOpenChange = () => {
+    setPage(1);
+    onClose();
+  };
+
+  return (
+    <Dialog.Root onOpenChange={onOpenChange} open={open} scrollBehavior="inside" size="xl">
+      <Dialog.Content backdrop p={4}>
+        <Dialog.Header>
+          <Heading size="sm">{translate("overview.deadlines.title")}</Heading>
+        </Dialog.Header>
+        <Dialog.CloseTrigger />
+        <Dialog.Body pb={2}>
+          <ErrorAlert error={error} />
+          {isLoading ? (
+            <VStack>
+              {Array.from({ length: PAGE_LIMIT }).map((_, idx) => (
+                // eslint-disable-next-line react/no-array-index-key
+                <Skeleton height="36px" key={idx} width="100%" />
+              ))}
+            </VStack>
+          ) : (
+            <VStack gap={0} separator={<Separator />}>
+              {deadlines.map((deadline) => (
+                <DeadlineRow alert={getAlert(deadline.alert_id)} deadline={deadline} key={deadline.id} />
+              ))}
+            </VStack>
+          )}
+        </Dialog.Body>
+        {totalEntries > PAGE_LIMIT ? (
+          <Pagination.Root
+            count={totalEntries}
+            onPageChange={(event) => setPage(event.page)}
+            p={3}
+            page={page}
+            pageSize={PAGE_LIMIT}
+          >
+            <HStack justify="center">
+              <Pagination.PrevTrigger />
+              <Pagination.Items />
+              <Pagination.NextTrigger />
+            </HStack>
+          </Pagination.Root>
+        ) : undefined}
+      </Dialog.Content>
+    </Dialog.Root>
+  );
+};

airflow-core/src/airflow/ui/src/pages/Dag/Overview/DagDeadlines.tsx

@@ -0,0 +1,102 @@
+/*!
+ * 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, Button, Flex, Heading, Separator, Skeleton, VStack } from "@chakra-ui/react";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { FiClock } from "react-icons/fi";
+
+import { useDeadlinesServiceGetDagDeadlineAlerts } from "openapi/queries";
+import type { DeadlineAlertResponse } from "openapi/requests/types.gen";
+import { ErrorAlert } from "src/components/ErrorAlert";
+import { useDeadlines } from "src/queries/useDeadlines";
+
+import { AllDeadlinesModal } from "./AllDeadlinesModal";
+import { DeadlineRow } from "./DeadlineRow";
+
+const LIMIT = 10;
+
+type DagDeadlinesProps = {
+  readonly dagId: string;
+};
+
+export const DagDeadlines = ({ dagId }: DagDeadlinesProps) => {
+  const { t: translate } = useTranslation("dag");
+  const [modalOpen, setModalOpen] = useState(false);
+
+  const { data, error, isLoading } = useDeadlines({ dagId, limit: LIMIT });
+
+  const { data: alertData } = useDeadlinesServiceGetDagDeadlineAlerts({ dagId, limit: 100 });
+
+  const alertMap = new Map<string, DeadlineAlertResponse>();
+
+  for (const alert of alertData?.deadline_alerts ?? []) {
+    alertMap.set(alert.id, alert);
+  }
+
+  const deadlines = data?.deadlines ?? [];
+  const totalEntries = data?.total_entries ?? 0;
+  const hasMore = totalEntries > LIMIT;
+
+  if (!isLoading && error === null && deadlines.length === 0) {
+    return undefined;
+  }
+
+  const getAlert = (alertId?: string | null) =>
+    alertId !== undefined && alertId !== null ? alertMap.get(alertId) : undefined;
+
+  return (
+    <Box>
+      <Flex alignItems="center" color="fg.muted" gap={1} mb={2}>
+        <FiClock />
+        <Heading ml={1} size="xs">
+          {translate("overview.deadlines.title")}
+        </Heading>
+      </Flex>
+      <ErrorAlert error={error} />
+      <Box borderRadius="lg" borderWidth={1} overflow="hidden" p={3}>
+        {isLoading ? (
+          <VStack>
+            {Array.from({ length: 3 }).map((_, idx) => (
+              // eslint-disable-next-line react/no-array-index-key
+              <Skeleton height="36px" key={idx} width="100%" />
+            ))}
+          </VStack>
+        ) : (
+          <VStack gap={0} separator={<Separator />}>
+            {deadlines.map((deadline) => (
+              <DeadlineRow alert={getAlert(deadline.alert_id)} deadline={deadline} key={deadline.id} />
+            ))}
+          </VStack>
+        )}
+        {hasMore ? (
+          <Button mt={2} onClick={() => setModalOpen(true)} size="xs" variant="ghost" width="100%">
+            {translate("overview.deadlines.showAll")}
+          </Button>
+        ) : undefined}
+      </Box>
+
+      <AllDeadlinesModal
+        alertMap={alertMap}
+        dagId={dagId}
+        onClose={() => setModalOpen(false)}
+        open={modalOpen}
+      />
+    </Box>
+  );
+};