Skip to content

Commit

Permalink
Move Create Dataset Event button above tabs (apache#41190)
Browse files Browse the repository at this point in the history
  • Loading branch information
@bbovenzi
bbovenzi authored Aug 7, 2024
1 parent 00991d5 commit 55872ab
Show file tree
Hide file tree
Showing 3 changed files with 82 additions and 73 deletions.
16 changes: 9 additions & 7 deletions airflow/www/static/js/datasets/CreateDatasetEvent.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand All @@ -52,23 +51,26 @@ 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 = () => {
createDatasetEvent(extra ? JSON.parse(extra) : undefined);
onClose();
};

if (!dataset) return null;

return (
<Modal
size="xl"
Expand All @@ -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}>
Expand Down
31 changes: 0 additions & 31 deletions airflow/www/static/js/datasets/DatasetDetails.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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");
Expand All @@ -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;
Expand Down Expand Up @@ -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
Expand All @@ -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>
);
};
Expand Down
108 changes: 73 additions & 35 deletions airflow/www/static/js/datasets/Main.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,22 +32,28 @@ 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";
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";
Expand Down Expand Up @@ -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) || ""
);
Expand Down Expand Up @@ -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 && (
Expand Down Expand Up @@ -249,6 +280,13 @@ const Datasets = () => {
)}
</TabPanels>
</Tabs>
{selectedUri && (
<CreateDatasetEventModal
isOpen={isOpen}
onClose={onClose}
uri={selectedUri}
/>
)}
</Box>
);
};
Expand Down

0 comments on commit 55872ab

Please sign in to comment.