pierrejeambrun commented on code in PR #45039:
URL: https://github.com/apache/airflow/pull/45039#discussion_r1892089222
##########
airflow/ui/package.json:
##########
@@ -27,6 +28,8 @@
"@visx/group": "^3.12.0",
"@visx/shape": "^3.12.0",
"@xyflow/react": "^12.3.5",
+ "accordion": "^3.0.2",
Review Comment:
I think I got confused, should be better now. ty
##########
airflow/ui/src/components/ClearRun/ClearRunDialog.tsx:
##########
@@ -0,0 +1,140 @@
+/*!
+ * 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 { Flex, Heading, HStack, Spacer, VStack } from "@chakra-ui/react";
+import { FiPlay, FiXSquare } from "react-icons/fi";
+
+import type {
+ DAGRunClearBody,
+ TaskInstanceCollectionResponse,
+} from "openapi/requests/types.gen";
+import { Button, Dialog } from "src/components/ui";
+
+import SegmentedControl from "../ui/SegmentedControl";
+import ClearRunTasksAccordion from "./ClearRunTaskAccordion";
+
+type Props = {
+ readonly affectedTasks: TaskInstanceCollectionResponse;
+ readonly dagId: string;
+ readonly dagRunId: string;
+ readonly isPending: boolean;
+ readonly mutate: ({
+ dagId,
+ dagRunId,
+ requestBody,
+ }: {
+ dagId: string;
+ dagRunId: string;
+ requestBody: DAGRunClearBody;
+ }) => void;
+ readonly onClose: () => void;
+ readonly onlyFailed: boolean;
+ readonly open: boolean;
+ readonly setOnlyFailed: (value: boolean) => void;
+};
+
+const ClearRunDialog = ({
+ affectedTasks,
+ dagId,
+ dagRunId,
+ isPending,
+ mutate,
+ onClose,
+ onlyFailed,
+ open,
+ setOnlyFailed,
+}: Props) => {
+ const onChange = (value: string) => {
+ switch (value) {
+ case "existing_tasks":
+ setOnlyFailed(false);
+ mutate({
+ dagId,
+ dagRunId,
+ requestBody: { dry_run: true, only_failed: false },
+ });
+ break;
+ case "only_failed":
+ setOnlyFailed(true);
+ mutate({
+ dagId,
+ dagRunId,
+ requestBody: { dry_run: true, only_failed: true },
+ });
+ break;
+ default:
+ // TODO: Handle this `new_tasks` case
+ break;
+ }
+ };
+
+ return (
+ <Dialog.Root onOpenChange={onClose} open={open} size="xl">
+ <Dialog.Content backdrop>
+ <Dialog.Header>
+ <VStack align="start" gap={4}>
+ <Heading size="xl">Clear DagRun - {dagRunId} </Heading>
+ </VStack>
+ </Dialog.Header>
+
+ <Dialog.CloseTrigger />
+
+ <Dialog.Body width="full">
+ <Flex justifyContent="center">
+ <SegmentedControl
+ mb={3}
+ onValueChange={onChange}
+ options={[
+ { label: "Clear existing tasks", value: "existing_tasks" },
+ { label: "Clear only failed tasks", value: "only_failed" },
+ {
+ disabled: true,
+ label: "Queued up new tasks",
+ value: "new_tasks",
+ },
+ ]}
+ value={onlyFailed ? "only_failed" : "existing_tasks"}
+ />
+ </Flex>
+ <ClearRunTasksAccordion affectedTasks={affectedTasks} />
+ <HStack mt={3} w="full">
+ <Button colorPalette="gray" onClick={onClose}>
+ <FiXSquare /> Cancel
Review Comment:
Cancel button removed. Ty
##########
airflow/ui/src/components/ClearRun/ClearRunButton.tsx:
##########
Review Comment:
Maybe. For now in the UI DagRun and Run are used interchangeably. We're not
really consistant in using "DagRun" for "Run" in file naming. I'll leave it
like that to not bother too much now, but if we want to make things consistant
accross the UI I think it's a good idea.
##########
airflow/ui/src/components/ClearRun/ClearRunDialog.tsx:
##########
@@ -0,0 +1,140 @@
+/*!
+ * 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 { Flex, Heading, HStack, Spacer, VStack } from "@chakra-ui/react";
+import { FiPlay, FiXSquare } from "react-icons/fi";
+
+import type {
+ DAGRunClearBody,
+ TaskInstanceCollectionResponse,
+} from "openapi/requests/types.gen";
+import { Button, Dialog } from "src/components/ui";
+
+import SegmentedControl from "../ui/SegmentedControl";
+import ClearRunTasksAccordion from "./ClearRunTaskAccordion";
+
+type Props = {
+ readonly affectedTasks: TaskInstanceCollectionResponse;
+ readonly dagId: string;
+ readonly dagRunId: string;
+ readonly isPending: boolean;
+ readonly mutate: ({
+ dagId,
+ dagRunId,
+ requestBody,
+ }: {
+ dagId: string;
+ dagRunId: string;
+ requestBody: DAGRunClearBody;
+ }) => void;
+ readonly onClose: () => void;
+ readonly onlyFailed: boolean;
+ readonly open: boolean;
+ readonly setOnlyFailed: (value: boolean) => void;
+};
+
+const ClearRunDialog = ({
+ affectedTasks,
+ dagId,
+ dagRunId,
+ isPending,
+ mutate,
+ onClose,
+ onlyFailed,
+ open,
+ setOnlyFailed,
+}: Props) => {
+ const onChange = (value: string) => {
+ switch (value) {
+ case "existing_tasks":
+ setOnlyFailed(false);
+ mutate({
+ dagId,
+ dagRunId,
+ requestBody: { dry_run: true, only_failed: false },
+ });
+ break;
+ case "only_failed":
+ setOnlyFailed(true);
+ mutate({
+ dagId,
+ dagRunId,
+ requestBody: { dry_run: true, only_failed: true },
+ });
+ break;
+ default:
+ // TODO: Handle this `new_tasks` case
+ break;
+ }
+ };
+
+ return (
+ <Dialog.Root onOpenChange={onClose} open={open} size="xl">
+ <Dialog.Content backdrop>
+ <Dialog.Header>
+ <VStack align="start" gap={4}>
+ <Heading size="xl">Clear DagRun - {dagRunId} </Heading>
+ </VStack>
+ </Dialog.Header>
+
+ <Dialog.CloseTrigger />
+
+ <Dialog.Body width="full">
+ <Flex justifyContent="center">
+ <SegmentedControl
+ mb={3}
+ onValueChange={onChange}
+ options={[
+ { label: "Clear existing tasks", value: "existing_tasks" },
+ { label: "Clear only failed tasks", value: "only_failed" },
+ {
+ disabled: true,
+ label: "Queued up new tasks",
+ value: "new_tasks",
+ },
+ ]}
+ value={onlyFailed ? "only_failed" : "existing_tasks"}
+ />
+ </Flex>
+ <ClearRunTasksAccordion affectedTasks={affectedTasks} />
+ <HStack mt={3} w="full">
+ <Button colorPalette="gray" onClick={onClose}>
+ <FiXSquare /> Cancel
+ </Button>
+ <Spacer />
+ <Button
+ colorPalette="blue"
+ loading={isPending}
+ onClick={() => {
+ mutate({
+ dagId,
+ dagRunId,
+ requestBody: { dry_run: false, only_failed: onlyFailed },
+ });
+ }}
+ >
+ <FiPlay /> Confirm
Review Comment:
Of couse, done.
##########
airflow/ui/src/components/ClearRun/ClearRunTaskAccordion.tsx:
##########
@@ -0,0 +1,107 @@
+/*!
+ * 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, Text } from "@chakra-ui/react";
+import { Link } from "@chakra-ui/react";
+import type { ColumnDef } from "@tanstack/react-table";
+import { Link as RouterLink } from "react-router-dom";
+
+import type {
+ TaskInstanceCollectionResponse,
+ TaskInstanceResponse,
+} from "openapi/requests/types.gen";
+import { DataTable } from "src/components/DataTable";
+import { Status } from "src/components/ui";
+
+import { Accordion } from "../ui";
+
+const columns: Array<ColumnDef<TaskInstanceResponse>> = [
+ {
+ accessorKey: "task_display_name",
+ cell: ({ row: { original } }) => (
+ <Link asChild color="fg.info" fontWeight="bold">
+ <RouterLink
+
to={`/dags/${original.dag_id}/runs/${original.dag_run_id}/tasks/${original.task_id}${original.map_index
> -1 ? `?map_index=${original.map_index}` : ""}`}
+ >
+ {original.task_display_name}
+ </RouterLink>
+ </Link>
+ ),
+ enableSorting: false,
+ header: "Task ID",
+ },
+ {
+ accessorKey: "state",
+ cell: ({
+ row: {
+ original: { state },
+ },
+ }) => <Status state={state}>{state}</Status>,
+ enableSorting: false,
+ header: () => "State",
+ },
+ {
+ accessorKey: "map_index",
+ enableSorting: false,
+ header: "Map Index",
+ },
+
+ {
+ accessorKey: "dag_run_id",
+ enableSorting: false,
+ header: "Run Id",
+ },
+];
+
+type Props = {
+ readonly affectedTasks?: TaskInstanceCollectionResponse;
+};
+
+// Table is in memory, pagination and sorting are disabled.
+// TODO: Make a front-end only unconnected table component with client side
ordering and pagination
+const ClearRunTasksAccordion = ({ affectedTasks }: Props) => (
+ <Accordion.Root collapsible>
+ <Accordion.Item key="tasks" value="tasks">
+ <Accordion.ItemTrigger>
+ <Text fontWeight="bold">
+ Affected Tasks: {affectedTasks?.total_entries ?? 0}
+ </Text>
+ </Accordion.ItemTrigger>
+ <Accordion.ItemContent>
+ <Box maxH="400px" overflowY="scroll">
+ <DataTable
Review Comment:
I agree that in this particular case maybe hiding the table all together
would be good. But for other places (like tables for browsing, I think keeping
it might be clearer for the user).
I'm not taking any decision here. Keeping it like that for now but If we
guys agree that this should be gone, it's a one liner change.
##########
airflow/ui/src/components/ClearRun/ClearRunDialog.tsx:
##########
@@ -0,0 +1,140 @@
+/*!
+ * 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 { Flex, Heading, HStack, Spacer, VStack } from "@chakra-ui/react";
+import { FiPlay, FiXSquare } from "react-icons/fi";
+
+import type {
+ DAGRunClearBody,
+ TaskInstanceCollectionResponse,
+} from "openapi/requests/types.gen";
+import { Button, Dialog } from "src/components/ui";
+
+import SegmentedControl from "../ui/SegmentedControl";
+import ClearRunTasksAccordion from "./ClearRunTaskAccordion";
+
+type Props = {
+ readonly affectedTasks: TaskInstanceCollectionResponse;
+ readonly dagId: string;
+ readonly dagRunId: string;
+ readonly isPending: boolean;
+ readonly mutate: ({
+ dagId,
+ dagRunId,
+ requestBody,
+ }: {
+ dagId: string;
+ dagRunId: string;
+ requestBody: DAGRunClearBody;
+ }) => void;
+ readonly onClose: () => void;
+ readonly onlyFailed: boolean;
+ readonly open: boolean;
+ readonly setOnlyFailed: (value: boolean) => void;
+};
+
+const ClearRunDialog = ({
+ affectedTasks,
+ dagId,
+ dagRunId,
+ isPending,
+ mutate,
+ onClose,
+ onlyFailed,
+ open,
+ setOnlyFailed,
+}: Props) => {
+ const onChange = (value: string) => {
+ switch (value) {
+ case "existing_tasks":
+ setOnlyFailed(false);
+ mutate({
+ dagId,
+ dagRunId,
+ requestBody: { dry_run: true, only_failed: false },
+ });
+ break;
+ case "only_failed":
+ setOnlyFailed(true);
+ mutate({
+ dagId,
+ dagRunId,
+ requestBody: { dry_run: true, only_failed: true },
+ });
+ break;
+ default:
+ // TODO: Handle this `new_tasks` case
+ break;
+ }
+ };
+
+ return (
+ <Dialog.Root onOpenChange={onClose} open={open} size="xl">
+ <Dialog.Content backdrop>
+ <Dialog.Header>
+ <VStack align="start" gap={4}>
+ <Heading size="xl">Clear DagRun - {dagRunId} </Heading>
+ </VStack>
+ </Dialog.Header>
+
+ <Dialog.CloseTrigger />
+
+ <Dialog.Body width="full">
+ <Flex justifyContent="center">
+ <SegmentedControl
+ mb={3}
+ onValueChange={onChange}
+ options={[
+ { label: "Clear existing tasks", value: "existing_tasks" },
+ { label: "Clear only failed tasks", value: "only_failed" },
+ {
+ disabled: true,
+ label: "Queued up new tasks",
+ value: "new_tasks",
+ },
+ ]}
+ value={onlyFailed ? "only_failed" : "existing_tasks"}
+ />
+ </Flex>
+ <ClearRunTasksAccordion affectedTasks={affectedTasks} />
Review Comment:
OF coures, done.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
