This is an automated email from the ASF dual-hosted git repository.
bbovenzi pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/airflow.git
The following commit(s) were added to refs/heads/main by this push:
new 2b7b3d64285 update some icons and add dag import error to dagslist
(#46251)
2b7b3d64285 is described below
commit 2b7b3d64285353bb206c0c082ea4d643a8611fb8
Author: Brent Bovenzi <[email protected]>
AuthorDate: Wed Jan 29 16:11:05 2025 -0500
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
---
airflow/ui/src/components/ParseDag.tsx | 4 +-
airflow/ui/src/components/StateIcon.tsx | 8 ++-
airflow/ui/src/pages/DagsList/DagsList.tsx | 10 ++--
.../src/pages/Dashboard/Stats/DAGImportErrors.tsx | 58 +++++++++++++++-------
.../pages/Dashboard/Stats/DAGImportErrorsModal.tsx | 6 ++-
5 files changed, 57 insertions(+), 29 deletions(-)
diff --git a/airflow/ui/src/components/ParseDag.tsx
b/airflow/ui/src/components/ParseDag.tsx
index 7fd71c83f9c..dbfe635b81f 100644
--- 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
index 4102cae75df..aff4a74ae14 100644
--- 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
index b642fa21df4..7829738030d 100644
--- 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
index 64be02293a5..0f90d6638d3 100644
--- 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
index c5083e46319..6dfc6cc52a0 100644
--- 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)}
