This is an automated email from the ASF dual-hosted git repository.
eladkal 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 55872ab51c Move Create Dataset Event button above tabs (#41190)
55872ab51c is described below
commit 55872ab51c533c922d0a78f1d62e376b780cb258
Author: Brent Bovenzi <[email protected]>
AuthorDate: Wed Aug 7 00:21:54 2024 -0400
Move Create Dataset Event button above tabs (#41190)
---
.../www/static/js/datasets/CreateDatasetEvent.tsx | 16 +--
airflow/www/static/js/datasets/DatasetDetails.tsx | 31 ------
airflow/www/static/js/datasets/Main.tsx | 108 ++++++++++++++-------
3 files changed, 82 insertions(+), 73 deletions(-)
diff --git a/airflow/www/static/js/datasets/CreateDatasetEvent.tsx
b/airflow/www/static/js/datasets/CreateDatasetEvent.tsx
index 6a1249e32c..39de114371 100644
--- a/airflow/www/static/js/datasets/CreateDatasetEvent.tsx
+++ b/airflow/www/static/js/datasets/CreateDatasetEvent.tsx
@@ -34,13 +34,12 @@ import {
} from "@chakra-ui/react";
import { useContainerRef } from "src/context/containerRef";
-import { useCreateDatasetEvent } from "src/api";
-import type { Dataset } from "src/types/api-generated";
+import { useCreateDatasetEvent, useDataset } from "src/api";
interface Props {
isOpen: boolean;
onClose: () => void;
- dataset: Dataset;
+ uri: string;
}
function checkJsonString(str: string) {
@@ -52,16 +51,17 @@ function checkJsonString(str: string) {
return true;
}
-const CreateDatasetEventModal = ({ dataset, isOpen, onClose }: Props) => {
+const CreateDatasetEventModal = ({ uri, isOpen, onClose }: Props) => {
const containerRef = useContainerRef();
const [extra, setExtra] = useState("");
+ const { data: dataset } = useDataset({ uri });
const isJson = checkJsonString(extra);
const isDisabled = !!extra && !isJson;
const { mutate: createDatasetEvent, isLoading } = useCreateDatasetEvent({
- datasetId: dataset.id,
- uri: dataset.uri,
+ datasetId: dataset?.id,
+ uri: dataset?.uri,
});
const onSubmit = () => {
@@ -69,6 +69,8 @@ const CreateDatasetEventModal = ({ dataset, isOpen, onClose
}: Props) => {
onClose();
};
+ if (!dataset) return null;
+
return (
<Modal
size="xl"
@@ -78,7 +80,7 @@ const CreateDatasetEventModal = ({ dataset, isOpen, onClose
}: Props) => {
>
<ModalOverlay />
<ModalContent>
- <ModalHeader>Manually create event for {dataset.uri}</ModalHeader>
+ <ModalHeader>Manually create event for {dataset?.uri}</ModalHeader>
<ModalCloseButton />
<ModalBody>
<FormControl isInvalid={isDisabled}>
diff --git a/airflow/www/static/js/datasets/DatasetDetails.tsx
b/airflow/www/static/js/datasets/DatasetDetails.tsx
index a4a4797a06..715c2bf308 100644
--- a/airflow/www/static/js/datasets/DatasetDetails.tsx
+++ b/airflow/www/static/js/datasets/DatasetDetails.tsx
@@ -21,24 +21,18 @@ import React from "react";
import {
Spinner,
Flex,
- IconButton,
- useDisclosure,
Grid,
GridItem,
Heading,
Link,
Box,
} from "@chakra-ui/react";
-import { MdPlayArrow } from "react-icons/md";
import { isEmpty } from "lodash";
import { useDataset } from "src/api";
-import { useContainerRef } from "src/context/containerRef";
-import Tooltip from "src/components/Tooltip";
import { getMetaValue } from "src/utils";
import RenderedJsonField from "src/components/RenderedJsonField";
-import CreateDatasetEventModal from "./CreateDatasetEvent";
import Events from "./DatasetEvents";
const gridUrl = getMetaValue("grid_url");
@@ -49,8 +43,6 @@ interface Props {
const DatasetDetails = ({ uri }: Props) => {
const { data: dataset, isLoading } = useDataset({ uri });
- const { isOpen, onToggle, onClose } = useDisclosure();
- const containerRef = useContainerRef();
const hasProducingTasks = !!dataset?.producingTasks?.length;
const hasConsumingDags = !!dataset?.consumingDags?.length;
@@ -100,22 +92,6 @@ const DatasetDetails = ({ uri }: Props) => {
})}
</GridItem>
)}
- <GridItem colSpan={1} display="flex" justifyContent="flex-end">
- <Tooltip
- label="Manually create dataset event"
- hasArrow
- portalProps={{ containerRef }}
- >
- <IconButton
- variant="outline"
- colorScheme="blue"
- aria-label="Manually create dataset event"
- onClick={onToggle}
- >
- <MdPlayArrow />
- </IconButton>
- </Tooltip>
- </GridItem>
</Grid>
{dataset?.extra && !isEmpty(dataset?.extra) && (
<RenderedJsonField
@@ -128,13 +104,6 @@ const DatasetDetails = ({ uri }: Props) => {
<Box mt={2}>
{dataset && dataset.id && <Events datasetId={dataset.id} showLabel />}
</Box>
- {dataset && (
- <CreateDatasetEventModal
- isOpen={isOpen}
- onClose={onClose}
- dataset={dataset}
- />
- )}
</Flex>
);
};
diff --git a/airflow/www/static/js/datasets/Main.tsx
b/airflow/www/static/js/datasets/Main.tsx
index 04380e2665..3d9b5e51c3 100644
--- a/airflow/www/static/js/datasets/Main.tsx
+++ b/airflow/www/static/js/datasets/Main.tsx
@@ -32,15 +32,20 @@ import {
TabPanel,
TabPanels,
Text,
+ Flex,
+ useDisclosure,
+ IconButton,
} from "@chakra-ui/react";
import { HiDatabase } from "react-icons/hi";
-import { MdEvent, MdAccountTree, MdDetails } from "react-icons/md";
+import { MdEvent, MdAccountTree, MdDetails, MdPlayArrow } from
"react-icons/md";
import Time from "src/components/Time";
import BreadcrumbText from "src/components/BreadcrumbText";
import { useOffsetTop } from "src/utils";
import { useDatasetDependencies } from "src/api";
import URLSearchParamsWrapper from "src/utils/URLSearchParamWrapper";
+import Tooltip from "src/components/Tooltip";
+import { useContainerRef } from "src/context/containerRef";
import DatasetEvents from "./DatasetEvents";
import DatasetsList from "./DatasetsList";
@@ -48,6 +53,7 @@ import DatasetDetails from "./DatasetDetails";
import type { OnSelectProps } from "./types";
import Graph from "./Graph";
import SearchBar from "./SearchBar";
+import CreateDatasetEventModal from "./CreateDatasetEvent";
const DATASET_URI_PARAM = "uri";
const DAG_ID_PARAM = "dag_id";
@@ -89,6 +95,9 @@ const Datasets = () => {
const { data: datasetDependencies, isLoading } = useDatasetDependencies();
const [searchParams, setSearchParams] = useSearchParams();
+ const { isOpen, onToggle, onClose } = useDisclosure();
+ const containerRef = useContainerRef();
+
const selectedUri = decodeURIComponent(
searchParams.get(DATASET_URI_PARAM) || ""
);
@@ -133,46 +142,68 @@ const Datasets = () => {
return (
<Box alignItems="flex-start" justifyContent="space-between">
- <Breadcrumb
- ml={3}
- pt={2}
- mt={4}
- separator={
- <Heading as="h3" size="md" color="gray.300">
- /
- </Heading>
- }
+ <Flex
+ grow={1}
+ justifyContent="space-between"
+ alignItems="flex-end"
+ p={3}
+ pb={0}
>
- <BreadcrumbItem>
- <BreadcrumbLink
- onClick={() => onSelect()}
- isCurrentPage={!selectedUri}
- >
- <Heading as="h3" size="md">
- Datasets
+ <Breadcrumb
+ mt={4}
+ separator={
+ <Heading as="h3" size="md" color="gray.300">
+ /
</Heading>
- </BreadcrumbLink>
- </BreadcrumbItem>
-
- {selectedUri && (
- <BreadcrumbItem isCurrentPage={!!selectedUri && !selectedTimestamp}>
- <BreadcrumbLink onClick={() => onSelect({ uri: selectedUri })}>
- <BreadcrumbText label="URI" value={selectedUri} />
+ }
+ >
+ <BreadcrumbItem>
+ <BreadcrumbLink
+ onClick={() => onSelect()}
+ isCurrentPage={!selectedUri}
+ >
+ <Heading as="h3" size="md">
+ Datasets
+ </Heading>
</BreadcrumbLink>
</BreadcrumbItem>
- )}
- {selectedTimestamp && (
- <BreadcrumbItem isCurrentPage={!!selectedTimestamp}>
- <BreadcrumbLink>
- <BreadcrumbText
- label="Timestamp"
- value={<Time dateTime={selectedTimestamp} />}
- />
- </BreadcrumbLink>
- </BreadcrumbItem>
+ {selectedUri && (
+ <BreadcrumbItem isCurrentPage={!!selectedUri &&
!selectedTimestamp}>
+ <BreadcrumbLink onClick={() => onSelect({ uri: selectedUri })}>
+ <BreadcrumbText label="URI" value={selectedUri} />
+ </BreadcrumbLink>
+ </BreadcrumbItem>
+ )}
+
+ {selectedTimestamp && (
+ <BreadcrumbItem isCurrentPage={!!selectedTimestamp}>
+ <BreadcrumbLink>
+ <BreadcrumbText
+ label="Timestamp"
+ value={<Time dateTime={selectedTimestamp} />}
+ />
+ </BreadcrumbLink>
+ </BreadcrumbItem>
+ )}
+ </Breadcrumb>
+ {selectedUri && (
+ <Tooltip
+ label="Manually create dataset event"
+ hasArrow
+ portalProps={{ containerRef }}
+ >
+ <IconButton
+ variant="outline"
+ colorScheme="blue"
+ aria-label="Manually create dataset event"
+ onClick={onToggle}
+ >
+ <MdPlayArrow />
+ </IconButton>
+ </Tooltip>
)}
- </Breadcrumb>
+ </Flex>
<Tabs ref={contentRef} isLazy index={tabIndex} onChange={onChangeTab}>
<TabList>
{!selectedUri && (
@@ -249,6 +280,13 @@ const Datasets = () => {
)}
</TabPanels>
</Tabs>
+ {selectedUri && (
+ <CreateDatasetEventModal
+ isOpen={isOpen}
+ onClose={onClose}
+ uri={selectedUri}
+ />
+ )}
</Box>
);
};
