update some icons and add dag import error to dagslist (#46251)

* update some icons and add dag import error to dagslist' * Swap dag parse icon from folder to file
apache · Jan 29, 2025 · 2b7b3d6 · 2b7b3d6
1 parent 5a78ae4
commit 2b7b3d6
Show file tree

Hide file tree

Showing 5 changed files with 57 additions and 29 deletions.
diff --git a/airflow/ui/src/components/ParseDag.tsx b/airflow/ui/src/components/ParseDag.tsx
@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { FiRefreshCw } from "react-icons/fi";
+import { AiOutlineFileSync } from "react-icons/ai";
 
 import { Button } from "src/components/ui";
 import { useDagParsing } from "src/queries/useDagParsing.ts";
@@ -31,7 +31,7 @@ const ParseDag = ({ dagId, fileToken }: Props) => {
 
   return (
     <Button loading={isPending} onClick={() => mutate({ fileToken })} variant="outline">
-      <FiRefreshCw height={5} width={5} />
+      <AiOutlineFileSync height={5} width={5} />
       Reparse Dag
     </Button>
   );

diff --git a/airflow/ui/src/components/StateIcon.tsx b/airflow/ui/src/components/StateIcon.tsx
@@ -19,17 +19,15 @@
 import type { IconBaseProps } from "react-icons";
 import {
   FiActivity,
-  FiAlertCircle,
   FiAlertOctagon,
   FiCalendar,
   FiCheckCircle,
-  FiCircle,
   FiRepeat,
   FiSkipForward,
   FiSlash,
   FiWatch,
 } from "react-icons/fi";
-import { LuCalendarSync, LuRedo2 } from "react-icons/lu";
+import { LuCalendarSync, LuCircleDashed, LuCircleFadingArrowUp, LuRedo2 } from "react-icons/lu";
 import { PiQueue } from "react-icons/pi";
 
 import type { TaskInstanceState } from "openapi/requests/types.gen";
@@ -63,8 +61,8 @@ export const StateIcon = ({ state, ...rest }: Props) => {
     case "up_for_retry":
       return <LuRedo2 {...rest} />;
     case "upstream_failed":
-      return <FiAlertCircle {...rest} />;
+      return <LuCircleFadingArrowUp {...rest} />;
     default:
-      return <FiCircle {...rest} />;
+      return <LuCircleDashed {...rest} />;
   }
 };
diff --git a/airflow/ui/src/pages/DagsList/DagsList.tsx b/airflow/ui/src/pages/DagsList/DagsList.tsx
@@ -45,6 +45,7 @@ import { useConfig } from "src/queries/useConfig";
 import { useDags } from "src/queries/useDags";
 import { pluralize } from "src/utils";
 
+import { DAGImportErrors } from "../Dashboard/Stats/DAGImportErrors";
 import { DagCard } from "./DagCard";
 import { DagTags } from "./DagTags";
 import { DagsFilters } from "./DagsFilters";
@@ -223,9 +224,12 @@ export const DagsList = () => {
         />
         <DagsFilters />
         <HStack justifyContent="space-between">
-          <Heading py={3} size="md">
-            {pluralize("Dag", data.total_entries)}
-          </Heading>
+          <HStack>
+            <Heading py={3} size="md">
+              {pluralize("Dag", data.total_entries)}
+            </Heading>
+            <DAGImportErrors iconOnly />
+          </HStack>
           {display === "card" ? (
             <SortSelect handleSortChange={handleSortChange} orderBy={orderBy} />
           ) : undefined}

diff --git a/airflow/ui/src/pages/Dashboard/Stats/DAGImportErrors.tsx b/airflow/ui/src/pages/Dashboard/Stats/DAGImportErrors.tsx
@@ -16,18 +16,22 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { Box, Text, Button, useDisclosure, Skeleton, Badge } from "@chakra-ui/react";
+import { Box, Text, Button, useDisclosure, Skeleton } from "@chakra-ui/react";
 import { FiChevronRight } from "react-icons/fi";
+import { LuFileWarning } from "react-icons/lu";
 
 import { useImportErrorServiceGetImportErrors } from "openapi/queries";
 import { ErrorAlert } from "src/components/ErrorAlert";
+import { StateBadge } from "src/components/StateBadge";
+import { pluralize } from "src/utils";
 
 import { DAGImportErrorsModal } from "./DAGImportErrorsModal";
 
-export const DAGImportErrors = () => {
+export const DAGImportErrors = ({ iconOnly = false }: { readonly iconOnly?: boolean }) => {
   const { onClose, onOpen, open } = useDisclosure();
 
   const { data, error, isLoading } = useImportErrorServiceGetImportErrors();
+
   const importErrorsCount = data?.total_entries ?? 0;
   const importErrors = data?.import_errors ?? [];
 
@@ -36,25 +40,43 @@ export const DAGImportErrors = () => {
   }
 
   return (
-    <Box alignItems="center" display="flex" gap={2}>
+    <Box alignItems="center" display="flex" maxH="10px">
       <ErrorAlert error={error} />
       {importErrorsCount > 0 && (
-        <Button
-          alignItems="center"
-          borderRadius="md"
-          display="flex"
-          gap={2}
-          onClick={onOpen}
-          variant="outline"
-        >
-          <Badge colorPalette="failed">{importErrorsCount}</Badge>
-          <Box alignItems="center" display="flex" gap={1}>
-            <Text fontWeight="bold">Dag Import Errors</Text>
-            <FiChevronRight />
-          </Box>
-        </Button>
+        <>
+          {iconOnly ? (
+            <StateBadge
+              as={Button}
+              colorPalette="failed"
+              height={7}
+              onClick={onOpen}
+              title={pluralize("Dag Import Error", importErrorsCount)}
+            >
+              <LuFileWarning size="0.5rem" />
+              {importErrorsCount}
+            </StateBadge>
+          ) : (
+            <Button
+              alignItems="center"
+              borderRadius="md"
+              display="flex"
+              gap={2}
+              onClick={onOpen}
+              variant="outline"
+            >
+              <StateBadge colorPalette="failed">
+                <LuFileWarning />
+                {importErrorsCount}
+              </StateBadge>
+              <Box alignItems="center" display="flex" gap={1}>
+                <Text fontWeight="bold">Dag Import Errors</Text>
+                <FiChevronRight />
+              </Box>
+            </Button>
+          )}
+          <DAGImportErrorsModal importErrors={importErrors} onClose={onClose} open={open} />
+        </>
       )}
-      <DAGImportErrorsModal importErrors={importErrors} onClose={onClose} open={open} />
     </Box>
   );
 };
diff --git a/airflow/ui/src/pages/Dashboard/Stats/DAGImportErrorsModal.tsx b/airflow/ui/src/pages/Dashboard/Stats/DAGImportErrorsModal.tsx
@@ -18,6 +18,7 @@
  */
 import { Heading, Text, HStack, Input } from "@chakra-ui/react";
 import { useEffect, useState } from "react";
+import { LuFileWarning } from "react-icons/lu";
 import { PiFilePy } from "react-icons/pi";
 
 import type { ImportErrorResponse } from "openapi/requests/types.gen";
@@ -60,7 +61,10 @@ export const DAGImportErrorsModal: React.FC<ImportDAGErrorModalProps> = ({ impor
     <Dialog.Root onOpenChange={onOpenChange} open={open} scrollBehavior="inside" size="xl">
       <Dialog.Content backdrop>
         <Dialog.Header>
-          <Heading size="xl">Dag Import Errors</Heading>
+          <HStack fontSize="xl">
+            <LuFileWarning />
+            <Heading>Dag Import Errors</Heading>
+          </HStack>
           <Input
             mt={4}
             onChange={(event) => setSearchQuery(event.target.value)}