AIP-38 | List Import Errors

airflow/ui/src/pages/Dashboard/Dashboard.tsx

@@ -18,7 +18,8 @@
  */
 import { Box, Heading } from "@chakra-ui/react";
 
-import { Health } from "./Health";
+import { Health } from "./Health/Health";
+import { Stats } from "./Stats/Stats";
 
 export const Dashboard = () => (
   <Box>
@@ -27,5 +28,8 @@ export const Dashboard = () => (
     <Box>
       <Health />
     </Box>
+    <Box>
+      <Stats />
+    </Box>
   </Box>
 );

airflow/ui/src/pages/Dashboard/Health.tsx → airflow/ui/src/pages/Dashboard/Health/Health.tsx

@@ -17,7 +17,7 @@
  * under the License.
  */
 import { Box, Flex, Heading, HStack } from "@chakra-ui/react";
-import { FiClipboard } from "react-icons/fi";
+import { MdOutlineHealthAndSafety } from "react-icons/md";
 
 import { useMonitorServiceGetHealth } from "openapi/queries";
 import { ErrorAlert } from "src/components/ErrorAlert";
@@ -30,7 +30,7 @@ export const Health = () => {
   return (
     <Box>
       <Flex color="gray.500" mb={2}>
-        <FiClipboard />
+        <MdOutlineHealthAndSafety />
         <Heading ml={1} size="xs">
           Health
         </Heading>

airflow/ui/src/pages/Dashboard/Stats/DAGImportErrors.tsx

@@ -0,0 +1,60 @@
+/*!
+ * 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, Badge, Text, Button, useDisclosure } from "@chakra-ui/react";
+import { useState } from "react";
+import { FiChevronRight } from "react-icons/fi";
+
+import { DAGImportErrorsModal } from "./DAGImportErrorsModal";
+
+export const DAGImportErrors = () => {
+  const { onClose, onOpen, open } = useDisclosure();
+  const [importErrorsCount, setImportErrorsCount] = useState<number>(-1);
+
+  const handleImportErrorsCount = (count: number) => {
+    setImportErrorsCount(count);
+  };
+
+  return (
+    <Box alignItems="center" display="flex" gap={2}>
+      {importErrorsCount > 0 && (
+        <Button
+          alignItems="center"
+          borderRadius="md"
+          display="flex"
+          gap={2}
+          onClick={onOpen}
+          variant="outline"
+        >
+          <Badge background="red" borderRadius="full" color="white" px={2}>
+            {importErrorsCount}
+          </Badge>
+          <Box alignItems="center" display="flex" gap={1}>
+            <Text fontWeight="bold">DAG Import Errors</Text>
+            <FiChevronRight />
+          </Box>
+        </Button>
+      )}
+      <DAGImportErrorsModal
+        onClose={onClose}
+        onErrorCountChange={handleImportErrorsCount}
+        open={open}
+      />
+    </Box>
+  );
+};

airflow/ui/src/pages/Dashboard/Stats/DAGImportErrorsModal.tsx

@@ -0,0 +1,131 @@
+/*!
+ * 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 { VStack, Heading, Text, Box, Button, HStack } from "@chakra-ui/react";
+import { useEffect, useState } from "react";
+import { PiFilePy } from "react-icons/pi";
+
+import type { ImportErrorResponse } from "openapi/requests/types.gen";
+import Time from "src/components/Time";
+import { Accordion, Dialog } from "src/components/ui";
+import { useImportErrors } from "src/queries/useDagsImportErrors";
+
+type ImportDAGErrorModalProps = {
+  onClose: () => void;
+  onErrorCountChange: (count: number) => void;
+  open: boolean;
+};
+
+const PAGE_LIMIT = 5;
+
+export const DAGImportErrorsModal: React.FC<ImportDAGErrorModalProps> = ({
+  onClose,
+  onErrorCountChange,
+  open,
+}) => {
+  const [currentPage, setCurrentPage] = useState(0);
+
+  const { data } = useImportErrors({
+    limit: PAGE_LIMIT,
+    offset: currentPage * PAGE_LIMIT,
+  });
+
+  const importErrors: Array<ImportErrorResponse> = data.import_errors;
+  const importErrorsCount: number = data.total_entries || 0;
+  const totalPages = Math.ceil(importErrorsCount / PAGE_LIMIT);
+
+  useEffect(() => {
+    onErrorCountChange(importErrorsCount);
+  }, [importErrorsCount, onErrorCountChange]);
+
+  useEffect(() => {
+    if (!open) {
+      setCurrentPage(0);
+    }
+  }, [open]);
+
+  const handleNextPage = () => {
+    if (currentPage < totalPages - 1) {
+      setCurrentPage((prev) => prev + 1);
+    }
+  };
+
+  const handlePreviousPage = () => {
+    if (currentPage > 0) {
+      setCurrentPage((prev) => prev - 1);
+    }
+  };
+
+  return (
+    <Dialog.Root onOpenChange={onClose} open={open} size="xl">
+      <Dialog.Content backdrop>
+        <Dialog.Header>
+          <VStack align="start" gap={4} position="sticky" top={0} zIndex={1}>
+            <Heading size="xl">DAG Import Errors</Heading>
+            <Text color="gray.500">{`Page ${currentPage + 1} of ${totalPages}`}</Text>
+          </VStack>
+        </Dialog.Header>
+
+        <Dialog.CloseTrigger />
+
+        <Dialog.Body maxH="500px" overflowY="auto">
+          <Accordion.Root collapsible multiple size="md" variant="enclosed">
+            {importErrors.map((importError: ImportErrorResponse) => (
+              <Accordion.Item
+                key={importError.import_error_id}
+                value={importError.filename}
+              >
+                <Accordion.ItemTrigger cursor="pointer">
+                  <PiFilePy />
+                  {importError.filename}
+                </Accordion.ItemTrigger>
+                <Accordion.ItemContent>
+                  <Text color="gray.500" fontSize="sm" mb={1}>
+                    Timestamp : <Time datetime={importError.timestamp} />
+                  </Text>
+                  <Text color="red.600" fontSize="sm" whiteSpace="pre-wrap">
+                    <code>{importError.stack_trace}</code>
+                  </Text>
+                </Accordion.ItemContent>
+              </Accordion.Item>
+            ))}
+          </Accordion.Root>
+        </Dialog.Body>
+
+        <Box p={6}>
+          <HStack justify="space-between">
+            <Button
+              colorPalette="blue"
+              disabled={currentPage === 0}
+              onClick={handlePreviousPage}
+            >
+              Previous
+            </Button>
+            <Button
+              colorPalette="blue"
+              disabled={currentPage === totalPages - 1}
+              onClick={handleNextPage}
+            >
+              Next
+            </Button>
+          </HStack>
+        </Box>
+      </Dialog.Content>
+    </Dialog.Root>
+  );
+};

airflow/ui/src/pages/Dashboard/Stats/Stats.tsx

@@ -0,0 +1,34 @@
+/*!
+ * 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, Flex, Heading } from "@chakra-ui/react";
+import { FiClipboard } from "react-icons/fi";
+
+import { DAGImportErrors } from "./DAGImportErrors";
+
+export const Stats = () => (
+  <Box>
+    <Flex color="gray.500" mb={2} mt={2}>
+      <FiClipboard />
+      <Heading ml={1} size="xs">
+        Stats
+      </Heading>
+    </Flex>
+    <DAGImportErrors />
+  </Box>
+);

airflow/ui/src/queries/useDagsImportErrors.tsx

@@ -0,0 +1,51 @@
+/*!
+ * 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 { useImportErrorServiceGetImportErrors } from "openapi/queries";
+
+const queryOptions = {
+  refetchOnMount: true,
+  refetchOnReconnect: false,
+  refetchOnWindowFocus: false,
+  staleTime: 5 * 60 * 1000,
+};
+
+export const useImportErrors = (
+  searchParams: {
+    limit?: number;
+    offset?: number;
+    orderBy?: string;
+  } = {},
+) => {
+  const { limit = 5, offset, orderBy } = searchParams;
+
+  const { data: errorsData, error: errorsError } =
+    useImportErrorServiceGetImportErrors(
+      { limit, offset, orderBy },
+      undefined,
+      queryOptions,
+    );
+
+  return {
+    data: {
+      import_errors: errorsData?.import_errors ?? [],
+      total_entries: errorsData?.total_entries ?? 0,
+    },
+    error: errorsError,
+  };
+};