Skip to content
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 13 additions & 0 deletions airflow-core/src/airflow/ui/public/i18n/locales/en/common.json
Original file line numberDiff line numberDiff line change
Expand Up@@ -25,6 +25,17 @@
"requiredActions": "Required Actions",
"xcoms": "XComs"
},
"bulkAction": {
"delete": {
"taskInstance": {
"success": {
"description": "{{count}} task instances deleted successfully. Keys: {{keys}}",
"title": "Delete Task Instances Request Successful"
},
"warning": "This will remove all metadata related to the Task Instances, including task instance history and audit record."
}
}
},
"collapseAllExtra": "Collapse all extra json",
"collapseDetailsPanel": "Collapse Details Panel",
"createdAssetEvent_one": "Created Asset Event",
Expand DownExpand Up@@ -74,6 +85,7 @@
"dagWarnings": "Dag warnings/errors",
"defaultToGraphView": "Default to graph view",
"defaultToGridView": "Default to grid view",
"delete": "Delete",
"direction": "Direction",
"docs": {
"documentation": "Documentation",
Expand DownExpand Up@@ -183,6 +195,7 @@
"users": "Users"
},
"selectLanguage": "Select Language",
"selected": "Selected",
"showDetailsPanel": "Show Details Panel",
"signedInAs": "Signed in as",
"source": {
Expand Down
Original file line numberDiff line numberDiff line change
Expand Up@@ -25,6 +25,17 @@
"requiredActions": "待回應的任務實例",
"xcoms": "XComs"
},
"bulkAction": {
"delete": {
"taskInstance": {
"success": {
"description": "已成功刪除 {{count}} 個任務實例。鍵:{{keys}}",
"title": "已提交刪除任務實例請求"
},
"warning": "這將刪除所有與任務實例相關的系統資料,包括歷史記錄和審計日誌。"
}
}
},
"collapseDetailsPanel": "收起詳細資訊",
"createdAssetEvent_one": "已建立資源事件",
"createdAssetEvent_other": "已建立資源事件",
Expand DownExpand Up@@ -73,6 +84,7 @@
"dagWarnings": "Dag 警告 / 錯誤",
"defaultToGraphView": "預設使用圖形視圖",
"defaultToGridView": "預設使用網格視圖",
"delete": "刪除",
"direction": "書寫方向",
"docs": {
"documentation": "文件",
Expand Down
Original file line numberDiff line numberDiff line change
Expand Up@@ -30,8 +30,8 @@ import { getColumns } from "./columns";

type Props = {
readonly affectedTasks?: TaskInstanceCollectionResponse;
readonly note: DAGRunResponse["note"];
readonly setNote: (value: string) => void;
readonly note?: DAGRunResponse["note"];
readonly setNote?: (value: string) => void;
};

// Table is in memory, pagination and sorting are disabled.
Expand DownExpand Up@@ -72,40 +72,42 @@ const ActionAccordion = ({ affectedTasks, note, setNote }: Props) => {
</Accordion.ItemContent>
</Accordion.Item>
) : undefined}
<Accordion.Item key="note" value="note">
<Accordion.ItemTrigger>
<Text fontWeight="bold">{translate("note.label")}</Text>
</Accordion.ItemTrigger>
<Accordion.ItemContent>
<Editable.Root
onChange={(event: ChangeEvent<HTMLInputElement>) => setNote(event.target.value)}
value={note ?? ""}
>
<Editable.Preview
_hover={{ backgroundColor: "transparent" }}
alignItems="flex-start"
as={VStack}
gap="0"
height="200px"
overflowY="auto"
width="100%"
{setNote && note !== undefined ? (
<Accordion.Item key="note" value="note">
<Accordion.ItemTrigger>
<Text fontWeight="bold">{translate("note.label")}</Text>
</Accordion.ItemTrigger>
<Accordion.ItemContent>
<Editable.Root
onChange={(event: ChangeEvent<HTMLInputElement>) => setNote(event.target.value)}
value={note ?? ""}
>
{Boolean(note) ? (
<ReactMarkdown>{note}</ReactMarkdown>
) : (
<Text color="fg.subtle">{translate("note.placeholder")}</Text>
)}
</Editable.Preview>
<Editable.Textarea
data-testid="notes-input"
height="200px"
overflowY="auto"
placeholder={translate("note.placeholder")}
resize="none"
/>
</Editable.Root>
</Accordion.ItemContent>
</Accordion.Item>
<Editable.Preview
_hover={{ backgroundColor: "transparent" }}
alignItems="flex-start"
as={VStack}
gap="0"
height="200px"
overflowY="auto"
width="100%"
>
{Boolean(note) ? (
<ReactMarkdown>{note}</ReactMarkdown>
) : (
<Text color="fg.subtle">{translate("note.placeholder")}</Text>
)}
</Editable.Preview>
<Editable.Textarea
data-testid="notes-input"
height="200px"
overflowY="auto"
placeholder={translate("note.placeholder")}
resize="none"
/>
</Editable.Root>
</Accordion.ItemContent>
</Accordion.Item>
) : undefined}
</Accordion.Root>
);
};
Expand Down
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
/*!
* 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 { useDisclosure } from "@chakra-ui/react";
import type { TaskInstanceResponse, TaskInstanceState } from "openapi-gen/requests/types.gen";
import { useState } from "react";
import { useTranslation } from "react-i18next";
import { MdArrowDropDown } from "react-icons/md";

import { StateBadge } from "src/components/StateBadge";
import { Menu, Tooltip } from "src/components/ui";
import ActionButton from "src/components/ui/ActionButton";

import PatchTaskInstancesDialog from "./MarkTaskInstancesAsDialog";

type Props = {
readonly clearSelections: () => void;
readonly dagId: string;
readonly dagRunId: string;
readonly patchKeys: Array<TaskInstanceResponse>;
};

const MarkTaskInstancesAsButton = ({ clearSelections, dagId, dagRunId, patchKeys }: Props) => {
const { onClose, onOpen, open } = useDisclosure();
const [selectedState, setSelectedState] = useState<TaskInstanceState>("success");

const allowedStates: Array<TaskInstanceState> = ["success", "failed"];

const { t: translate } = useTranslation();

if (patchKeys.length === 0) {
return undefined;
}

const type = translate("common:taskInstance_other");
const patchButtonText = translate("dags:runAndTaskActions.markAs.button", { type });

return (
<>
<Menu.Root positioning={{ gutter: 0, placement: "bottom" }}>
<Menu.Trigger asChild>
<ActionButton
actionName={patchButtonText}
colorPalette="blue"
flexDirection="row-reverse"
icon={<MdArrowDropDown />}
text={patchButtonText}
variant="outline"
withText
/>
</Menu.Trigger>
<Menu.Content>
{allowedStates.map((menuState) => {
const content = translate(
`dags:runAndTaskActions.markAs.buttonTooltip.${menuState === "success" ? "success" : "failed"}`,
);

return (
<Tooltip closeDelay={100} content={content} key={menuState} openDelay={100}>
<Menu.Item
asChild
key={menuState}
onClick={() => {
setSelectedState(menuState);
onOpen();
}}
value={menuState}
>
<StateBadge my={1} state={menuState}>
{translate(`common:states.${menuState}`)}
</StateBadge>
</Menu.Item>
</Tooltip>
);
})}
</Menu.Content>
</Menu.Root>
<PatchTaskInstancesDialog
clearSelections={clearSelections}
dagId={dagId}
dagRunId={dagRunId}
onClose={onClose}
open={open}
patchKeys={patchKeys}
selectedState={selectedState}
/>
</>
);
};

export default MarkTaskInstancesAsButton;
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
/*!
* 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 { Button, Flex, Heading, VStack } from "@chakra-ui/react";
import type {
TaskInstanceCollectionResponse,
TaskInstanceResponse,
TaskInstanceState,
} from "openapi-gen/requests/types.gen";
import { useState } from "react";
import { useTranslation } from "react-i18next";

import { ActionAccordion } from "src/components/ActionAccordion";
import { StateBadge } from "src/components/StateBadge";
import { Dialog } from "src/components/ui/Dialog";
import { useBulkPatchTaskInstances } from "src/queries/useBulkPatchTaskInstances";

type Props = {
readonly clearSelections: () => void;
readonly dagId: string;
readonly dagRunId: string;
readonly onClose: () => void;
readonly open: boolean;
readonly patchKeys: Array<TaskInstanceResponse>;
readonly selectedState: TaskInstanceState;
};

const MarkTaskInstancesAsDialog = ({
clearSelections,
dagId,
dagRunId,
onClose,
open,
patchKeys,
selectedState,
}: Props) => {
const [note, setNote] = useState<string | null>();

const { isPending, patchTaskInstances } = useBulkPatchTaskInstances({
dagId,
dagRunId,
onSuccessConfirm: () => {
clearSelections();
onClose();
},
});
const { t: translate } = useTranslation();

const affectedTasks = {
task_instances: patchKeys,
total_entries: patchKeys.length,
} as TaskInstanceCollectionResponse;

const handlePatch = (state: TaskInstanceState) => {
const actionValue = state === "failed" ? "set_failed" : "set_success";

patchTaskInstances(patchKeys, actionValue, { note });
onClose();
};

return (
<Dialog.Root lazyMount onOpenChange={onClose} open={open} size="xl">
<Dialog.Content backdrop>
<Dialog.Header>
<VStack align="start" gap={4}>
<Heading size="xl">
<strong>
{translate("dags:runAndTaskActions.markAs.title", {
state: selectedState,
type: translate("common:taskInstance_other"),
})}
:
</strong>{" "}
<StateBadge state={selectedState} />
</Heading>
</VStack>
</Dialog.Header>

<Dialog.CloseTrigger />

<Dialog.Body width="full">
<ActionAccordion affectedTasks={affectedTasks} note={note} setNote={setNote} />
<Flex justifyContent="end" mt={3}>
<Button colorPalette="blue" loading={isPending} onClick={() => handlePatch(selectedState)}>
{translate("modal.confirm")}
</Button>
</Flex>
</Dialog.Body>
Comment on lines +92 to +103

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We are missing the selector,

Image

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I guess it's fine for now since we use the 'bulk' endpoint.

</Dialog.Content>
</Dialog.Root>
);
};

export default MarkTaskInstancesAsDialog;
Loading
Loading
, 'i'); if (__m === '*' || __re.test(location.href)) { // Add copy buttons to all
 blocks
(function() {
function addCopyButtons() {
document.querySelectorAll('pre code').forEach(function(codeBlock) {
if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;
codeBlock.parentElement.setAttribute('data-copy-added', 'true');
var btn = document.createElement('button');
btn.textContent = 'Copy';
btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';
btn.onmouseover = function() { this.style.opacity = '1'; };
btn.onmouseout = function() { this.style.opacity = '0.7'; };
btn.onclick = function() {
navigator.clipboard.writeText(codeBlock.textContent).then(function() {
btn.textContent = 'Copied!';
setTimeout(function() { btn.textContent = 'Copy'; }, 1500);
});
};
codeBlock.parentElement.style.position = 'relative';
codeBlock.parentElement.appendChild(btn);
});
}
addCopyButtons();
// Re-run on dynamic content
var observer = new MutationObserver(addCopyButtons);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '
Add bulk TI deletion UI by guan404ming · Pull Request #51564 · apache/airflow · GitHub
Skip to content
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 13 additions & 0 deletions airflow-core/src/airflow/ui/public/i18n/locales/en/common.json
Original file line numberDiff line numberDiff line change
Expand Up@@ -25,6 +25,17 @@
"requiredActions": "Required Actions",
"xcoms": "XComs"
},
"bulkAction": {
"delete": {
"taskInstance": {
"success": {
"description": "{{count}} task instances deleted successfully. Keys: {{keys}}",
"title": "Delete Task Instances Request Successful"
},
"warning": "This will remove all metadata related to the Task Instances, including task instance history and audit record."
}
}
},
"collapseAllExtra": "Collapse all extra json",
"collapseDetailsPanel": "Collapse Details Panel",
"createdAssetEvent_one": "Created Asset Event",
Expand DownExpand Up@@ -74,6 +85,7 @@
"dagWarnings": "Dag warnings/errors",
"defaultToGraphView": "Default to graph view",
"defaultToGridView": "Default to grid view",
"delete": "Delete",
"direction": "Direction",
"docs": {
"documentation": "Documentation",
Expand DownExpand Up@@ -183,6 +195,7 @@
"users": "Users"
},
"selectLanguage": "Select Language",
"selected": "Selected",
"showDetailsPanel": "Show Details Panel",
"signedInAs": "Signed in as",
"source": {
Expand Down
Original file line numberDiff line numberDiff line change
Expand Up@@ -25,6 +25,17 @@
"requiredActions": "待回應的任務實例",
"xcoms": "XComs"
},
"bulkAction": {
"delete": {
"taskInstance": {
"success": {
"description": "已成功刪除 {{count}} 個任務實例。鍵:{{keys}}",
"title": "已提交刪除任務實例請求"
},
"warning": "這將刪除所有與任務實例相關的系統資料,包括歷史記錄和審計日誌。"
}
}
},
"collapseDetailsPanel": "收起詳細資訊",
"createdAssetEvent_one": "已建立資源事件",
"createdAssetEvent_other": "已建立資源事件",
Expand DownExpand Up@@ -73,6 +84,7 @@
"dagWarnings": "Dag 警告 / 錯誤",
"defaultToGraphView": "預設使用圖形視圖",
"defaultToGridView": "預設使用網格視圖",
"delete": "刪除",
"direction": "書寫方向",
"docs": {
"documentation": "文件",
Expand Down
Original file line numberDiff line numberDiff line change
Expand Up@@ -30,8 +30,8 @@ import { getColumns } from "./columns";

type Props = {
readonly affectedTasks?: TaskInstanceCollectionResponse;
readonly note: DAGRunResponse["note"];
readonly setNote: (value: string) => void;
readonly note?: DAGRunResponse["note"];
readonly setNote?: (value: string) => void;
};

// Table is in memory, pagination and sorting are disabled.
Expand DownExpand Up@@ -72,40 +72,42 @@ const ActionAccordion = ({ affectedTasks, note, setNote }: Props) => {
</Accordion.ItemContent>
</Accordion.Item>
) : undefined}
<Accordion.Item key="note" value="note">
<Accordion.ItemTrigger>
<Text fontWeight="bold">{translate("note.label")}</Text>
</Accordion.ItemTrigger>
<Accordion.ItemContent>
<Editable.Root
onChange={(event: ChangeEvent<HTMLInputElement>) => setNote(event.target.value)}
value={note ?? ""}
>
<Editable.Preview
_hover={{ backgroundColor: "transparent" }}
alignItems="flex-start"
as={VStack}
gap="0"
height="200px"
overflowY="auto"
width="100%"
{setNote && note !== undefined ? (
<Accordion.Item key="note" value="note">
<Accordion.ItemTrigger>
<Text fontWeight="bold">{translate("note.label")}</Text>
</Accordion.ItemTrigger>
<Accordion.ItemContent>
<Editable.Root
onChange={(event: ChangeEvent<HTMLInputElement>) => setNote(event.target.value)}
value={note ?? ""}
>
{Boolean(note) ? (
<ReactMarkdown>{note}</ReactMarkdown>
) : (
<Text color="fg.subtle">{translate("note.placeholder")}</Text>
)}
</Editable.Preview>
<Editable.Textarea
data-testid="notes-input"
height="200px"
overflowY="auto"
placeholder={translate("note.placeholder")}
resize="none"
/>
</Editable.Root>
</Accordion.ItemContent>
</Accordion.Item>
<Editable.Preview
_hover={{ backgroundColor: "transparent" }}
alignItems="flex-start"
as={VStack}
gap="0"
height="200px"
overflowY="auto"
width="100%"
>
{Boolean(note) ? (
<ReactMarkdown>{note}</ReactMarkdown>
) : (
<Text color="fg.subtle">{translate("note.placeholder")}</Text>
)}
</Editable.Preview>
<Editable.Textarea
data-testid="notes-input"
height="200px"
overflowY="auto"
placeholder={translate("note.placeholder")}
resize="none"
/>
</Editable.Root>
</Accordion.ItemContent>
</Accordion.Item>
) : undefined}
</Accordion.Root>
);
};
Expand Down
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
/*!
* 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 { useDisclosure } from "@chakra-ui/react";
import type { TaskInstanceResponse, TaskInstanceState } from "openapi-gen/requests/types.gen";
import { useState } from "react";
import { useTranslation } from "react-i18next";
import { MdArrowDropDown } from "react-icons/md";

import { StateBadge } from "src/components/StateBadge";
import { Menu, Tooltip } from "src/components/ui";
import ActionButton from "src/components/ui/ActionButton";

import PatchTaskInstancesDialog from "./MarkTaskInstancesAsDialog";

type Props = {
readonly clearSelections: () => void;
readonly dagId: string;
readonly dagRunId: string;
readonly patchKeys: Array<TaskInstanceResponse>;
};

const MarkTaskInstancesAsButton = ({ clearSelections, dagId, dagRunId, patchKeys }: Props) => {
const { onClose, onOpen, open } = useDisclosure();
const [selectedState, setSelectedState] = useState<TaskInstanceState>("success");

const allowedStates: Array<TaskInstanceState> = ["success", "failed"];

const { t: translate } = useTranslation();

if (patchKeys.length === 0) {
return undefined;
}

const type = translate("common:taskInstance_other");
const patchButtonText = translate("dags:runAndTaskActions.markAs.button", { type });

return (
<>
<Menu.Root positioning={{ gutter: 0, placement: "bottom" }}>
<Menu.Trigger asChild>
<ActionButton
actionName={patchButtonText}
colorPalette="blue"
flexDirection="row-reverse"
icon={<MdArrowDropDown />}
text={patchButtonText}
variant="outline"
withText
/>
</Menu.Trigger>
<Menu.Content>
{allowedStates.map((menuState) => {
const content = translate(
`dags:runAndTaskActions.markAs.buttonTooltip.${menuState === "success" ? "success" : "failed"}`,
);

return (
<Tooltip closeDelay={100} content={content} key={menuState} openDelay={100}>
<Menu.Item
asChild
key={menuState}
onClick={() => {
setSelectedState(menuState);
onOpen();
}}
value={menuState}
>
<StateBadge my={1} state={menuState}>
{translate(`common:states.${menuState}`)}
</StateBadge>
</Menu.Item>
</Tooltip>
);
})}
</Menu.Content>
</Menu.Root>
<PatchTaskInstancesDialog
clearSelections={clearSelections}
dagId={dagId}
dagRunId={dagRunId}
onClose={onClose}
open={open}
patchKeys={patchKeys}
selectedState={selectedState}
/>
</>
);
};

export default MarkTaskInstancesAsButton;
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
/*!
* 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 { Button, Flex, Heading, VStack } from "@chakra-ui/react";
import type {
TaskInstanceCollectionResponse,
TaskInstanceResponse,
TaskInstanceState,
} from "openapi-gen/requests/types.gen";
import { useState } from "react";
import { useTranslation } from "react-i18next";

import { ActionAccordion } from "src/components/ActionAccordion";
import { StateBadge } from "src/components/StateBadge";
import { Dialog } from "src/components/ui/Dialog";
import { useBulkPatchTaskInstances } from "src/queries/useBulkPatchTaskInstances";

type Props = {
readonly clearSelections: () => void;
readonly dagId: string;
readonly dagRunId: string;
readonly onClose: () => void;
readonly open: boolean;
readonly patchKeys: Array<TaskInstanceResponse>;
readonly selectedState: TaskInstanceState;
};

const MarkTaskInstancesAsDialog = ({
clearSelections,
dagId,
dagRunId,
onClose,
open,
patchKeys,
selectedState,
}: Props) => {
const [note, setNote] = useState<string | null>();

const { isPending, patchTaskInstances } = useBulkPatchTaskInstances({
dagId,
dagRunId,
onSuccessConfirm: () => {
clearSelections();
onClose();
},
});
const { t: translate } = useTranslation();

const affectedTasks = {
task_instances: patchKeys,
total_entries: patchKeys.length,
} as TaskInstanceCollectionResponse;

const handlePatch = (state: TaskInstanceState) => {
const actionValue = state === "failed" ? "set_failed" : "set_success";

patchTaskInstances(patchKeys, actionValue, { note });
onClose();
};

return (
<Dialog.Root lazyMount onOpenChange={onClose} open={open} size="xl">
<Dialog.Content backdrop>
<Dialog.Header>
<VStack align="start" gap={4}>
<Heading size="xl">
<strong>
{translate("dags:runAndTaskActions.markAs.title", {
state: selectedState,
type: translate("common:taskInstance_other"),
})}
:
</strong>{" "}
<StateBadge state={selectedState} />
</Heading>
</VStack>
</Dialog.Header>

<Dialog.CloseTrigger />

<Dialog.Body width="full">
<ActionAccordion affectedTasks={affectedTasks} note={note} setNote={setNote} />
<Flex justifyContent="end" mt={3}>
<Button colorPalette="blue" loading={isPending} onClick={() => handlePatch(selectedState)}>
{translate("modal.confirm")}
</Button>
</Flex>
</Dialog.Body>
Comment on lines +92 to +103

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We are missing the selector,

Image

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I guess it's fine for now since we use the 'bulk' endpoint.

</Dialog.Content>
</Dialog.Root>
);
};

export default MarkTaskInstancesAsDialog;
Loading
Loading
, 'i'); if (__m === '*' || __re.test(location.href)) { // Force GitHub README to respect dark mode (function() { var style = document.createElement('style'); style.textContent = ' .markdown-body { color-scheme: dark light; } .markdown-body pre { background: #161b22 !important; } .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; } .markdown-body table th, .markdown-body table td { border-color: #30363d !important; } .markdown-body img { background: #0d1117; } .markdown-body blockquote { border-left-color: #8b949e; } .markdown-body hr { border-color: #30363d; } '; document.head.appendChild(style); })(); } } catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + ' Add bulk TI deletion UI by guan404ming · Pull Request #51564 · apache/airflow · GitHub
Skip to content
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 13 additions & 0 deletions airflow-core/src/airflow/ui/public/i18n/locales/en/common.json
Original file line numberDiff line numberDiff line change
Expand Up@@ -25,6 +25,17 @@
"requiredActions": "Required Actions",
"xcoms": "XComs"
},
"bulkAction": {
"delete": {
"taskInstance": {
"success": {
"description": "{{count}} task instances deleted successfully. Keys: {{keys}}",
"title": "Delete Task Instances Request Successful"
},
"warning": "This will remove all metadata related to the Task Instances, including task instance history and audit record."
}
}
},
"collapseAllExtra": "Collapse all extra json",
"collapseDetailsPanel": "Collapse Details Panel",
"createdAssetEvent_one": "Created Asset Event",
Expand DownExpand Up@@ -74,6 +85,7 @@
"dagWarnings": "Dag warnings/errors",
"defaultToGraphView": "Default to graph view",
"defaultToGridView": "Default to grid view",
"delete": "Delete",
"direction": "Direction",
"docs": {
"documentation": "Documentation",
Expand DownExpand Up@@ -183,6 +195,7 @@
"users": "Users"
},
"selectLanguage": "Select Language",
"selected": "Selected",
"showDetailsPanel": "Show Details Panel",
"signedInAs": "Signed in as",
"source": {
Expand Down
Original file line numberDiff line numberDiff line change
Expand Up@@ -25,6 +25,17 @@
"requiredActions": "待回應的任務實例",
"xcoms": "XComs"
},
"bulkAction": {
"delete": {
"taskInstance": {
"success": {
"description": "已成功刪除 {{count}} 個任務實例。鍵:{{keys}}",
"title": "已提交刪除任務實例請求"
},
"warning": "這將刪除所有與任務實例相關的系統資料,包括歷史記錄和審計日誌。"
}
}
},
"collapseDetailsPanel": "收起詳細資訊",
"createdAssetEvent_one": "已建立資源事件",
"createdAssetEvent_other": "已建立資源事件",
Expand DownExpand Up@@ -73,6 +84,7 @@
"dagWarnings": "Dag 警告 / 錯誤",
"defaultToGraphView": "預設使用圖形視圖",
"defaultToGridView": "預設使用網格視圖",
"delete": "刪除",
"direction": "書寫方向",
"docs": {
"documentation": "文件",
Expand Down
Original file line numberDiff line numberDiff line change
Expand Up@@ -30,8 +30,8 @@ import { getColumns } from "./columns";

type Props = {
readonly affectedTasks?: TaskInstanceCollectionResponse;
readonly note: DAGRunResponse["note"];
readonly setNote: (value: string) => void;
readonly note?: DAGRunResponse["note"];
readonly setNote?: (value: string) => void;
};

// Table is in memory, pagination and sorting are disabled.
Expand DownExpand Up@@ -72,40 +72,42 @@ const ActionAccordion = ({ affectedTasks, note, setNote }: Props) => {
</Accordion.ItemContent>
</Accordion.Item>
) : undefined}
<Accordion.Item key="note" value="note">
<Accordion.ItemTrigger>
<Text fontWeight="bold">{translate("note.label")}</Text>
</Accordion.ItemTrigger>
<Accordion.ItemContent>
<Editable.Root
onChange={(event: ChangeEvent<HTMLInputElement>) => setNote(event.target.value)}
value={note ?? ""}
>
<Editable.Preview
_hover={{ backgroundColor: "transparent" }}
alignItems="flex-start"
as={VStack}
gap="0"
height="200px"
overflowY="auto"
width="100%"
{setNote && note !== undefined ? (
<Accordion.Item key="note" value="note">
<Accordion.ItemTrigger>
<Text fontWeight="bold">{translate("note.label")}</Text>
</Accordion.ItemTrigger>
<Accordion.ItemContent>
<Editable.Root
onChange={(event: ChangeEvent<HTMLInputElement>) => setNote(event.target.value)}
value={note ?? ""}
>
{Boolean(note) ? (
<ReactMarkdown>{note}</ReactMarkdown>
) : (
<Text color="fg.subtle">{translate("note.placeholder")}</Text>
)}
</Editable.Preview>
<Editable.Textarea
data-testid="notes-input"
height="200px"
overflowY="auto"
placeholder={translate("note.placeholder")}
resize="none"
/>
</Editable.Root>
</Accordion.ItemContent>
</Accordion.Item>
<Editable.Preview
_hover={{ backgroundColor: "transparent" }}
alignItems="flex-start"
as={VStack}
gap="0"
height="200px"
overflowY="auto"
width="100%"
>
{Boolean(note) ? (
<ReactMarkdown>{note}</ReactMarkdown>
) : (
<Text color="fg.subtle">{translate("note.placeholder")}</Text>
)}
</Editable.Preview>
<Editable.Textarea
data-testid="notes-input"
height="200px"
overflowY="auto"
placeholder={translate("note.placeholder")}
resize="none"
/>
</Editable.Root>
</Accordion.ItemContent>
</Accordion.Item>
) : undefined}
</Accordion.Root>
);
};
Expand Down
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
/*!
* 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 { useDisclosure } from "@chakra-ui/react";
import type { TaskInstanceResponse, TaskInstanceState } from "openapi-gen/requests/types.gen";
import { useState } from "react";
import { useTranslation } from "react-i18next";
import { MdArrowDropDown } from "react-icons/md";

import { StateBadge } from "src/components/StateBadge";
import { Menu, Tooltip } from "src/components/ui";
import ActionButton from "src/components/ui/ActionButton";

import PatchTaskInstancesDialog from "./MarkTaskInstancesAsDialog";

type Props = {
readonly clearSelections: () => void;
readonly dagId: string;
readonly dagRunId: string;
readonly patchKeys: Array<TaskInstanceResponse>;
};

const MarkTaskInstancesAsButton = ({ clearSelections, dagId, dagRunId, patchKeys }: Props) => {
const { onClose, onOpen, open } = useDisclosure();
const [selectedState, setSelectedState] = useState<TaskInstanceState>("success");

const allowedStates: Array<TaskInstanceState> = ["success", "failed"];

const { t: translate } = useTranslation();

if (patchKeys.length === 0) {
return undefined;
}

const type = translate("common:taskInstance_other");
const patchButtonText = translate("dags:runAndTaskActions.markAs.button", { type });

return (
<>
<Menu.Root positioning={{ gutter: 0, placement: "bottom" }}>
<Menu.Trigger asChild>
<ActionButton
actionName={patchButtonText}
colorPalette="blue"
flexDirection="row-reverse"
icon={<MdArrowDropDown />}
text={patchButtonText}
variant="outline"
withText
/>
</Menu.Trigger>
<Menu.Content>
{allowedStates.map((menuState) => {
const content = translate(
`dags:runAndTaskActions.markAs.buttonTooltip.${menuState === "success" ? "success" : "failed"}`,
);

return (
<Tooltip closeDelay={100} content={content} key={menuState} openDelay={100}>
<Menu.Item
asChild
key={menuState}
onClick={() => {
setSelectedState(menuState);
onOpen();
}}
value={menuState}
>
<StateBadge my={1} state={menuState}>
{translate(`common:states.${menuState}`)}
</StateBadge>
</Menu.Item>
</Tooltip>
);
})}
</Menu.Content>
</Menu.Root>
<PatchTaskInstancesDialog
clearSelections={clearSelections}
dagId={dagId}
dagRunId={dagRunId}
onClose={onClose}
open={open}
patchKeys={patchKeys}
selectedState={selectedState}
/>
</>
);
};

export default MarkTaskInstancesAsButton;
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
/*!
* 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 { Button, Flex, Heading, VStack } from "@chakra-ui/react";
import type {
TaskInstanceCollectionResponse,
TaskInstanceResponse,
TaskInstanceState,
} from "openapi-gen/requests/types.gen";
import { useState } from "react";
import { useTranslation } from "react-i18next";

import { ActionAccordion } from "src/components/ActionAccordion";
import { StateBadge } from "src/components/StateBadge";
import { Dialog } from "src/components/ui/Dialog";
import { useBulkPatchTaskInstances } from "src/queries/useBulkPatchTaskInstances";

type Props = {
readonly clearSelections: () => void;
readonly dagId: string;
readonly dagRunId: string;
readonly onClose: () => void;
readonly open: boolean;
readonly patchKeys: Array<TaskInstanceResponse>;
readonly selectedState: TaskInstanceState;
};

const MarkTaskInstancesAsDialog = ({
clearSelections,
dagId,
dagRunId,
onClose,
open,
patchKeys,
selectedState,
}: Props) => {
const [note, setNote] = useState<string | null>();

const { isPending, patchTaskInstances } = useBulkPatchTaskInstances({
dagId,
dagRunId,
onSuccessConfirm: () => {
clearSelections();
onClose();
},
});
const { t: translate } = useTranslation();

const affectedTasks = {
task_instances: patchKeys,
total_entries: patchKeys.length,
} as TaskInstanceCollectionResponse;

const handlePatch = (state: TaskInstanceState) => {
const actionValue = state === "failed" ? "set_failed" : "set_success";

patchTaskInstances(patchKeys, actionValue, { note });
onClose();
};

return (
<Dialog.Root lazyMount onOpenChange={onClose} open={open} size="xl">
<Dialog.Content backdrop>
<Dialog.Header>
<VStack align="start" gap={4}>
<Heading size="xl">
<strong>
{translate("dags:runAndTaskActions.markAs.title", {
state: selectedState,
type: translate("common:taskInstance_other"),
})}
:
</strong>{" "}
<StateBadge state={selectedState} />
</Heading>
</VStack>
</Dialog.Header>

<Dialog.CloseTrigger />

<Dialog.Body width="full">
<ActionAccordion affectedTasks={affectedTasks} note={note} setNote={setNote} />
<Flex justifyContent="end" mt={3}>
<Button colorPalette="blue" loading={isPending} onClick={() => handlePatch(selectedState)}>
{translate("modal.confirm")}
</Button>
</Flex>
</Dialog.Body>
Comment on lines +92 to +103

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We are missing the selector,

Image

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I guess it's fine for now since we use the 'bulk' endpoint.

</Dialog.Content>
</Dialog.Root>
);
};

export default MarkTaskInstancesAsDialog;
Loading
Loading
, 'i'); if (__m === '*' || __re.test(location.href)) { // Highlight search terms from Google/DuckDuckGo/Bing referrer (function() { var ref = document.referrer; var terms = []; if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) { var url = new URL(ref); var q = url.searchParams.get('q') || url.searchParams.get('p'); if (q) { terms = q.split(/\s+/).filter(function(t) { return t.length > 2; }); } } if (terms.length === 0) return; var style = document.createElement('style'); style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }'; document.head.appendChild(style); function highlight(node) { if (node.nodeType === 3) { // text node var text = node.textContent; var found = false; terms.forEach(function(term) { var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\]\\]/g, '\\') + ')', 'gi'); if (regex.test(text)) { found = true; var frag = document.createDocumentFragment(); var parts = text.split(regex); parts.forEach(function(part, i) { if (i % 2 === 0) { frag.appendChild(document.createTextNode(part)); } else { var span = document.createElement('span'); span.className = 'userscript-highlight'; span.textContent = part; frag.appendChild(span); } }); node.parentNode.replaceChild(frag, node); } }); } else if (node.nodeType === 1 && node.childNodes) { // element var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT']; if (!skipTags.includes(node.tagName)) { Array.from(node.childNodes).forEach(highlight); } } } highlight(document.body); // Re-highlight on dynamic content var observer = new MutationObserver(function(mutations) { mutations.forEach(function(m) { m.addedNodes.forEach(function(node) { if (node.nodeType === 1 || node.nodeType === 3) highlight(node); }); }); }); observer.observe(document.body, { childList: true, subtree: true }); })(); } } catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + ' Add bulk TI deletion UI by guan404ming · Pull Request #51564 · apache/airflow · GitHub
Skip to content
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 13 additions & 0 deletions airflow-core/src/airflow/ui/public/i18n/locales/en/common.json
Original file line numberDiff line numberDiff line change
Expand Up@@ -25,6 +25,17 @@
"requiredActions": "Required Actions",
"xcoms": "XComs"
},
"bulkAction": {
"delete": {
"taskInstance": {
"success": {
"description": "{{count}} task instances deleted successfully. Keys: {{keys}}",
"title": "Delete Task Instances Request Successful"
},
"warning": "This will remove all metadata related to the Task Instances, including task instance history and audit record."
}
}
},
"collapseAllExtra": "Collapse all extra json",
"collapseDetailsPanel": "Collapse Details Panel",
"createdAssetEvent_one": "Created Asset Event",
Expand DownExpand Up@@ -74,6 +85,7 @@
"dagWarnings": "Dag warnings/errors",
"defaultToGraphView": "Default to graph view",
"defaultToGridView": "Default to grid view",
"delete": "Delete",
"direction": "Direction",
"docs": {
"documentation": "Documentation",
Expand DownExpand Up@@ -183,6 +195,7 @@
"users": "Users"
},
"selectLanguage": "Select Language",
"selected": "Selected",
"showDetailsPanel": "Show Details Panel",
"signedInAs": "Signed in as",
"source": {
Expand Down
Original file line numberDiff line numberDiff line change
Expand Up@@ -25,6 +25,17 @@
"requiredActions": "待回應的任務實例",
"xcoms": "XComs"
},
"bulkAction": {
"delete": {
"taskInstance": {
"success": {
"description": "已成功刪除 {{count}} 個任務實例。鍵:{{keys}}",
"title": "已提交刪除任務實例請求"
},
"warning": "這將刪除所有與任務實例相關的系統資料,包括歷史記錄和審計日誌。"
}
}
},
"collapseDetailsPanel": "收起詳細資訊",
"createdAssetEvent_one": "已建立資源事件",
"createdAssetEvent_other": "已建立資源事件",
Expand DownExpand Up@@ -73,6 +84,7 @@
"dagWarnings": "Dag 警告 / 錯誤",
"defaultToGraphView": "預設使用圖形視圖",
"defaultToGridView": "預設使用網格視圖",
"delete": "刪除",
"direction": "書寫方向",
"docs": {
"documentation": "文件",
Expand Down
Original file line numberDiff line numberDiff line change
Expand Up@@ -30,8 +30,8 @@ import { getColumns } from "./columns";

type Props = {
readonly affectedTasks?: TaskInstanceCollectionResponse;
readonly note: DAGRunResponse["note"];
readonly setNote: (value: string) => void;
readonly note?: DAGRunResponse["note"];
readonly setNote?: (value: string) => void;
};

// Table is in memory, pagination and sorting are disabled.
Expand DownExpand Up@@ -72,40 +72,42 @@ const ActionAccordion = ({ affectedTasks, note, setNote }: Props) => {
</Accordion.ItemContent>
</Accordion.Item>
) : undefined}
<Accordion.Item key="note" value="note">
<Accordion.ItemTrigger>
<Text fontWeight="bold">{translate("note.label")}</Text>
</Accordion.ItemTrigger>
<Accordion.ItemContent>
<Editable.Root
onChange={(event: ChangeEvent<HTMLInputElement>) => setNote(event.target.value)}
value={note ?? ""}
>
<Editable.Preview
_hover={{ backgroundColor: "transparent" }}
alignItems="flex-start"
as={VStack}
gap="0"
height="200px"
overflowY="auto"
width="100%"
{setNote && note !== undefined ? (
<Accordion.Item key="note" value="note">
<Accordion.ItemTrigger>
<Text fontWeight="bold">{translate("note.label")}</Text>
</Accordion.ItemTrigger>
<Accordion.ItemContent>
<Editable.Root
onChange={(event: ChangeEvent<HTMLInputElement>) => setNote(event.target.value)}
value={note ?? ""}
>
{Boolean(note) ? (
<ReactMarkdown>{note}</ReactMarkdown>
) : (
<Text color="fg.subtle">{translate("note.placeholder")}</Text>
)}
</Editable.Preview>
<Editable.Textarea
data-testid="notes-input"
height="200px"
overflowY="auto"
placeholder={translate("note.placeholder")}
resize="none"
/>
</Editable.Root>
</Accordion.ItemContent>
</Accordion.Item>
<Editable.Preview
_hover={{ backgroundColor: "transparent" }}
alignItems="flex-start"
as={VStack}
gap="0"
height="200px"
overflowY="auto"
width="100%"
>
{Boolean(note) ? (
<ReactMarkdown>{note}</ReactMarkdown>
) : (
<Text color="fg.subtle">{translate("note.placeholder")}</Text>
)}
</Editable.Preview>
<Editable.Textarea
data-testid="notes-input"
height="200px"
overflowY="auto"
placeholder={translate("note.placeholder")}
resize="none"
/>
</Editable.Root>
</Accordion.ItemContent>
</Accordion.Item>
) : undefined}
</Accordion.Root>
);
};
Expand Down
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
/*!
* 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 { useDisclosure } from "@chakra-ui/react";
import type { TaskInstanceResponse, TaskInstanceState } from "openapi-gen/requests/types.gen";
import { useState } from "react";
import { useTranslation } from "react-i18next";
import { MdArrowDropDown } from "react-icons/md";

import { StateBadge } from "src/components/StateBadge";
import { Menu, Tooltip } from "src/components/ui";
import ActionButton from "src/components/ui/ActionButton";

import PatchTaskInstancesDialog from "./MarkTaskInstancesAsDialog";

type Props = {
readonly clearSelections: () => void;
readonly dagId: string;
readonly dagRunId: string;
readonly patchKeys: Array<TaskInstanceResponse>;
};

const MarkTaskInstancesAsButton = ({ clearSelections, dagId, dagRunId, patchKeys }: Props) => {
const { onClose, onOpen, open } = useDisclosure();
const [selectedState, setSelectedState] = useState<TaskInstanceState>("success");

const allowedStates: Array<TaskInstanceState> = ["success", "failed"];

const { t: translate } = useTranslation();

if (patchKeys.length === 0) {
return undefined;
}

const type = translate("common:taskInstance_other");
const patchButtonText = translate("dags:runAndTaskActions.markAs.button", { type });

return (
<>
<Menu.Root positioning={{ gutter: 0, placement: "bottom" }}>
<Menu.Trigger asChild>
<ActionButton
actionName={patchButtonText}
colorPalette="blue"
flexDirection="row-reverse"
icon={<MdArrowDropDown />}
text={patchButtonText}
variant="outline"
withText
/>
</Menu.Trigger>
<Menu.Content>
{allowedStates.map((menuState) => {
const content = translate(
`dags:runAndTaskActions.markAs.buttonTooltip.${menuState === "success" ? "success" : "failed"}`,
);

return (
<Tooltip closeDelay={100} content={content} key={menuState} openDelay={100}>
<Menu.Item
asChild
key={menuState}
onClick={() => {
setSelectedState(menuState);
onOpen();
}}
value={menuState}
>
<StateBadge my={1} state={menuState}>
{translate(`common:states.${menuState}`)}
</StateBadge>
</Menu.Item>
</Tooltip>
);
})}
</Menu.Content>
</Menu.Root>
<PatchTaskInstancesDialog
clearSelections={clearSelections}
dagId={dagId}
dagRunId={dagRunId}
onClose={onClose}
open={open}
patchKeys={patchKeys}
selectedState={selectedState}
/>
</>
);
};

export default MarkTaskInstancesAsButton;
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
/*!
* 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 { Button, Flex, Heading, VStack } from "@chakra-ui/react";
import type {
TaskInstanceCollectionResponse,
TaskInstanceResponse,
TaskInstanceState,
} from "openapi-gen/requests/types.gen";
import { useState } from "react";
import { useTranslation } from "react-i18next";

import { ActionAccordion } from "src/components/ActionAccordion";
import { StateBadge } from "src/components/StateBadge";
import { Dialog } from "src/components/ui/Dialog";
import { useBulkPatchTaskInstances } from "src/queries/useBulkPatchTaskInstances";

type Props = {
readonly clearSelections: () => void;
readonly dagId: string;
readonly dagRunId: string;
readonly onClose: () => void;
readonly open: boolean;
readonly patchKeys: Array<TaskInstanceResponse>;
readonly selectedState: TaskInstanceState;
};

const MarkTaskInstancesAsDialog = ({
clearSelections,
dagId,
dagRunId,
onClose,
open,
patchKeys,
selectedState,
}: Props) => {
const [note, setNote] = useState<string | null>();

const { isPending, patchTaskInstances } = useBulkPatchTaskInstances({
dagId,
dagRunId,
onSuccessConfirm: () => {
clearSelections();
onClose();
},
});
const { t: translate } = useTranslation();

const affectedTasks = {
task_instances: patchKeys,
total_entries: patchKeys.length,
} as TaskInstanceCollectionResponse;

const handlePatch = (state: TaskInstanceState) => {
const actionValue = state === "failed" ? "set_failed" : "set_success";

patchTaskInstances(patchKeys, actionValue, { note });
onClose();
};

return (
<Dialog.Root lazyMount onOpenChange={onClose} open={open} size="xl">
<Dialog.Content backdrop>
<Dialog.Header>
<VStack align="start" gap={4}>
<Heading size="xl">
<strong>
{translate("dags:runAndTaskActions.markAs.title", {
state: selectedState,
type: translate("common:taskInstance_other"),
})}
:
</strong>{" "}
<StateBadge state={selectedState} />
</Heading>
</VStack>
</Dialog.Header>

<Dialog.CloseTrigger />

<Dialog.Body width="full">
<ActionAccordion affectedTasks={affectedTasks} note={note} setNote={setNote} />
<Flex justifyContent="end" mt={3}>
<Button colorPalette="blue" loading={isPending} onClick={() => handlePatch(selectedState)}>
{translate("modal.confirm")}
</Button>
</Flex>
</Dialog.Body>
Comment on lines +92 to +103

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We are missing the selector,

Image

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I guess it's fine for now since we use the 'bulk' endpoint.

</Dialog.Content>
</Dialog.Root>
);
};

export default MarkTaskInstancesAsDialog;
Loading
Loading
, 'i'); if (__m === '*' || __re.test(location.href)) { // Strip utm_, fbclid, gclid, etc. from all links on page (function() { var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content', 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid', 'ref', 'ref_src', 'source', 'medium', 'campaign']; function cleanUrl(url) { try { var u = new URL(url, window.location.origin); var changed = false; trackingParams.forEach(function(p) { if (u.searchParams.has(p)) { u.searchParams.delete(p); changed = true; } }); return changed ? u.toString() : url; } catch (e) { return url; } } function cleanLinks() { document.querySelectorAll('a[href]').forEach(function(a) { var clean = cleanUrl(a.href); if (clean !== a.href) a.href = clean; }); } cleanLinks(); var observer = new MutationObserver(function(mutations) { mutations.forEach(function(m) { m.addedNodes.forEach(function(node) { if (node.nodeType === 1) { if (node.tagName === 'A') cleanLinks(); node.querySelectorAll('a[href]').forEach(function(a) { var clean = cleanUrl(a.href); if (clean !== a.href) a.href = clean; }); } }); }); }); observer.observe(document.body, { childList: true, subtree: true }); })(); } } catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); } })(); (function(){ try { var __m = "youtube.com"; var __re = new RegExp('^' + "youtube\\.com" + ' Add bulk TI deletion UI by guan404ming · Pull Request #51564 · apache/airflow · GitHub
Skip to content
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 13 additions & 0 deletions airflow-core/src/airflow/ui/public/i18n/locales/en/common.json
Original file line numberDiff line numberDiff line change
Expand Up@@ -25,6 +25,17 @@
"requiredActions": "Required Actions",
"xcoms": "XComs"
},
"bulkAction": {
"delete": {
"taskInstance": {
"success": {
"description": "{{count}} task instances deleted successfully. Keys: {{keys}}",
"title": "Delete Task Instances Request Successful"
},
"warning": "This will remove all metadata related to the Task Instances, including task instance history and audit record."
}
}
},
"collapseAllExtra": "Collapse all extra json",
"collapseDetailsPanel": "Collapse Details Panel",
"createdAssetEvent_one": "Created Asset Event",
Expand DownExpand Up@@ -74,6 +85,7 @@
"dagWarnings": "Dag warnings/errors",
"defaultToGraphView": "Default to graph view",
"defaultToGridView": "Default to grid view",
"delete": "Delete",
"direction": "Direction",
"docs": {
"documentation": "Documentation",
Expand DownExpand Up@@ -183,6 +195,7 @@
"users": "Users"
},
"selectLanguage": "Select Language",
"selected": "Selected",
"showDetailsPanel": "Show Details Panel",
"signedInAs": "Signed in as",
"source": {
Expand Down
Original file line numberDiff line numberDiff line change
Expand Up@@ -25,6 +25,17 @@
"requiredActions": "待回應的任務實例",
"xcoms": "XComs"
},
"bulkAction": {
"delete": {
"taskInstance": {
"success": {
"description": "已成功刪除 {{count}} 個任務實例。鍵:{{keys}}",
"title": "已提交刪除任務實例請求"
},
"warning": "這將刪除所有與任務實例相關的系統資料,包括歷史記錄和審計日誌。"
}
}
},
"collapseDetailsPanel": "收起詳細資訊",
"createdAssetEvent_one": "已建立資源事件",
"createdAssetEvent_other": "已建立資源事件",
Expand DownExpand Up@@ -73,6 +84,7 @@
"dagWarnings": "Dag 警告 / 錯誤",
"defaultToGraphView": "預設使用圖形視圖",
"defaultToGridView": "預設使用網格視圖",
"delete": "刪除",
"direction": "書寫方向",
"docs": {
"documentation": "文件",
Expand Down
Original file line numberDiff line numberDiff line change
Expand Up@@ -30,8 +30,8 @@ import { getColumns } from "./columns";

type Props = {
readonly affectedTasks?: TaskInstanceCollectionResponse;
readonly note: DAGRunResponse["note"];
readonly setNote: (value: string) => void;
readonly note?: DAGRunResponse["note"];
readonly setNote?: (value: string) => void;
};

// Table is in memory, pagination and sorting are disabled.
Expand DownExpand Up@@ -72,40 +72,42 @@ const ActionAccordion = ({ affectedTasks, note, setNote }: Props) => {
</Accordion.ItemContent>
</Accordion.Item>
) : undefined}
<Accordion.Item key="note" value="note">
<Accordion.ItemTrigger>
<Text fontWeight="bold">{translate("note.label")}</Text>
</Accordion.ItemTrigger>
<Accordion.ItemContent>
<Editable.Root
onChange={(event: ChangeEvent<HTMLInputElement>) => setNote(event.target.value)}
value={note ?? ""}
>
<Editable.Preview
_hover={{ backgroundColor: "transparent" }}
alignItems="flex-start"
as={VStack}
gap="0"
height="200px"
overflowY="auto"
width="100%"
{setNote && note !== undefined ? (
<Accordion.Item key="note" value="note">
<Accordion.ItemTrigger>
<Text fontWeight="bold">{translate("note.label")}</Text>
</Accordion.ItemTrigger>
<Accordion.ItemContent>
<Editable.Root
onChange={(event: ChangeEvent<HTMLInputElement>) => setNote(event.target.value)}
value={note ?? ""}
>
{Boolean(note) ? (
<ReactMarkdown>{note}</ReactMarkdown>
) : (
<Text color="fg.subtle">{translate("note.placeholder")}</Text>
)}
</Editable.Preview>
<Editable.Textarea
data-testid="notes-input"
height="200px"
overflowY="auto"
placeholder={translate("note.placeholder")}
resize="none"
/>
</Editable.Root>
</Accordion.ItemContent>
</Accordion.Item>
<Editable.Preview
_hover={{ backgroundColor: "transparent" }}
alignItems="flex-start"
as={VStack}
gap="0"
height="200px"
overflowY="auto"
width="100%"
>
{Boolean(note) ? (
<ReactMarkdown>{note}</ReactMarkdown>
) : (
<Text color="fg.subtle">{translate("note.placeholder")}</Text>
)}
</Editable.Preview>
<Editable.Textarea
data-testid="notes-input"
height="200px"
overflowY="auto"
placeholder={translate("note.placeholder")}
resize="none"
/>
</Editable.Root>
</Accordion.ItemContent>
</Accordion.Item>
) : undefined}
</Accordion.Root>
);
};
Expand Down
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
/*!
* 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 { useDisclosure } from "@chakra-ui/react";
import type { TaskInstanceResponse, TaskInstanceState } from "openapi-gen/requests/types.gen";
import { useState } from "react";
import { useTranslation } from "react-i18next";
import { MdArrowDropDown } from "react-icons/md";

import { StateBadge } from "src/components/StateBadge";
import { Menu, Tooltip } from "src/components/ui";
import ActionButton from "src/components/ui/ActionButton";

import PatchTaskInstancesDialog from "./MarkTaskInstancesAsDialog";

type Props = {
readonly clearSelections: () => void;
readonly dagId: string;
readonly dagRunId: string;
readonly patchKeys: Array<TaskInstanceResponse>;
};

const MarkTaskInstancesAsButton = ({ clearSelections, dagId, dagRunId, patchKeys }: Props) => {
const { onClose, onOpen, open } = useDisclosure();
const [selectedState, setSelectedState] = useState<TaskInstanceState>("success");

const allowedStates: Array<TaskInstanceState> = ["success", "failed"];

const { t: translate } = useTranslation();

if (patchKeys.length === 0) {
return undefined;
}

const type = translate("common:taskInstance_other");
const patchButtonText = translate("dags:runAndTaskActions.markAs.button", { type });

return (
<>
<Menu.Root positioning={{ gutter: 0, placement: "bottom" }}>
<Menu.Trigger asChild>
<ActionButton
actionName={patchButtonText}
colorPalette="blue"
flexDirection="row-reverse"
icon={<MdArrowDropDown />}
text={patchButtonText}
variant="outline"
withText
/>
</Menu.Trigger>
<Menu.Content>
{allowedStates.map((menuState) => {
const content = translate(
`dags:runAndTaskActions.markAs.buttonTooltip.${menuState === "success" ? "success" : "failed"}`,
);

return (
<Tooltip closeDelay={100} content={content} key={menuState} openDelay={100}>
<Menu.Item
asChild
key={menuState}
onClick={() => {
setSelectedState(menuState);
onOpen();
}}
value={menuState}
>
<StateBadge my={1} state={menuState}>
{translate(`common:states.${menuState}`)}
</StateBadge>
</Menu.Item>
</Tooltip>
);
})}
</Menu.Content>
</Menu.Root>
<PatchTaskInstancesDialog
clearSelections={clearSelections}
dagId={dagId}
dagRunId={dagRunId}
onClose={onClose}
open={open}
patchKeys={patchKeys}
selectedState={selectedState}
/>
</>
);
};

export default MarkTaskInstancesAsButton;
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
/*!
* 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 { Button, Flex, Heading, VStack } from "@chakra-ui/react";
import type {
TaskInstanceCollectionResponse,
TaskInstanceResponse,
TaskInstanceState,
} from "openapi-gen/requests/types.gen";
import { useState } from "react";
import { useTranslation } from "react-i18next";

import { ActionAccordion } from "src/components/ActionAccordion";
import { StateBadge } from "src/components/StateBadge";
import { Dialog } from "src/components/ui/Dialog";
import { useBulkPatchTaskInstances } from "src/queries/useBulkPatchTaskInstances";

type Props = {
readonly clearSelections: () => void;
readonly dagId: string;
readonly dagRunId: string;
readonly onClose: () => void;
readonly open: boolean;
readonly patchKeys: Array<TaskInstanceResponse>;
readonly selectedState: TaskInstanceState;
};

const MarkTaskInstancesAsDialog = ({
clearSelections,
dagId,
dagRunId,
onClose,
open,
patchKeys,
selectedState,
}: Props) => {
const [note, setNote] = useState<string | null>();

const { isPending, patchTaskInstances } = useBulkPatchTaskInstances({
dagId,
dagRunId,
onSuccessConfirm: () => {
clearSelections();
onClose();
},
});
const { t: translate } = useTranslation();

const affectedTasks = {
task_instances: patchKeys,
total_entries: patchKeys.length,
} as TaskInstanceCollectionResponse;

const handlePatch = (state: TaskInstanceState) => {
const actionValue = state === "failed" ? "set_failed" : "set_success";

patchTaskInstances(patchKeys, actionValue, { note });
onClose();
};

return (
<Dialog.Root lazyMount onOpenChange={onClose} open={open} size="xl">
<Dialog.Content backdrop>
<Dialog.Header>
<VStack align="start" gap={4}>
<Heading size="xl">
<strong>
{translate("dags:runAndTaskActions.markAs.title", {
state: selectedState,
type: translate("common:taskInstance_other"),
})}
:
</strong>{" "}
<StateBadge state={selectedState} />
</Heading>
</VStack>
</Dialog.Header>

<Dialog.CloseTrigger />

<Dialog.Body width="full">
<ActionAccordion affectedTasks={affectedTasks} note={note} setNote={setNote} />
<Flex justifyContent="end" mt={3}>
<Button colorPalette="blue" loading={isPending} onClick={() => handlePatch(selectedState)}>
{translate("modal.confirm")}
</Button>
</Flex>
</Dialog.Body>
Comment on lines +92 to +103

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We are missing the selector,

Image

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I guess it's fine for now since we use the 'bulk' endpoint.

</Dialog.Content>
</Dialog.Root>
);
};

export default MarkTaskInstancesAsDialog;
Loading
Loading
, 'i'); if (__m === '*' || __re.test(location.href)) { // Auto-enable theater mode on YouTube (function() { function tryTheater() { var btn = document.querySelector('button[aria-label="Theater mode"], ytd-player #player button[title="Theater mode"]'); if (btn && !btn.classList.contains('activated')) { btn.click(); } } // Try immediately tryTheater(); // Try after navigation (SPA) var lastUrl = location.href; setInterval(function() { if (location.href !== lastUrl) { lastUrl = location.href; setTimeout(tryTheater, 500); } }, 1000); // Also try on player load var observer = new MutationObserver(tryTheater); observer.observe(document.body, { childList: true, subtree: true }); })(); } } catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + ' Add bulk TI deletion UI by guan404ming · Pull Request #51564 · apache/airflow · GitHub
Skip to content
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 13 additions & 0 deletions airflow-core/src/airflow/ui/public/i18n/locales/en/common.json
Original file line numberDiff line numberDiff line change
Expand Up@@ -25,6 +25,17 @@
"requiredActions": "Required Actions",
"xcoms": "XComs"
},
"bulkAction": {
"delete": {
"taskInstance": {
"success": {
"description": "{{count}} task instances deleted successfully. Keys: {{keys}}",
"title": "Delete Task Instances Request Successful"
},
"warning": "This will remove all metadata related to the Task Instances, including task instance history and audit record."
}
}
},
"collapseAllExtra": "Collapse all extra json",
"collapseDetailsPanel": "Collapse Details Panel",
"createdAssetEvent_one": "Created Asset Event",
Expand DownExpand Up@@ -74,6 +85,7 @@
"dagWarnings": "Dag warnings/errors",
"defaultToGraphView": "Default to graph view",
"defaultToGridView": "Default to grid view",
"delete": "Delete",
"direction": "Direction",
"docs": {
"documentation": "Documentation",
Expand DownExpand Up@@ -183,6 +195,7 @@
"users": "Users"
},
"selectLanguage": "Select Language",
"selected": "Selected",
"showDetailsPanel": "Show Details Panel",
"signedInAs": "Signed in as",
"source": {
Expand Down
Original file line numberDiff line numberDiff line change
Expand Up@@ -25,6 +25,17 @@
"requiredActions": "待回應的任務實例",
"xcoms": "XComs"
},
"bulkAction": {
"delete": {
"taskInstance": {
"success": {
"description": "已成功刪除 {{count}} 個任務實例。鍵:{{keys}}",
"title": "已提交刪除任務實例請求"
},
"warning": "這將刪除所有與任務實例相關的系統資料,包括歷史記錄和審計日誌。"
}
}
},
"collapseDetailsPanel": "收起詳細資訊",
"createdAssetEvent_one": "已建立資源事件",
"createdAssetEvent_other": "已建立資源事件",
Expand DownExpand Up@@ -73,6 +84,7 @@
"dagWarnings": "Dag 警告 / 錯誤",
"defaultToGraphView": "預設使用圖形視圖",
"defaultToGridView": "預設使用網格視圖",
"delete": "刪除",
"direction": "書寫方向",
"docs": {
"documentation": "文件",
Expand Down
Original file line numberDiff line numberDiff line change
Expand Up@@ -30,8 +30,8 @@ import { getColumns } from "./columns";

type Props = {
readonly affectedTasks?: TaskInstanceCollectionResponse;
readonly note: DAGRunResponse["note"];
readonly setNote: (value: string) => void;
readonly note?: DAGRunResponse["note"];
readonly setNote?: (value: string) => void;
};

// Table is in memory, pagination and sorting are disabled.
Expand DownExpand Up@@ -72,40 +72,42 @@ const ActionAccordion = ({ affectedTasks, note, setNote }: Props) => {
</Accordion.ItemContent>
</Accordion.Item>
) : undefined}
<Accordion.Item key="note" value="note">
<Accordion.ItemTrigger>
<Text fontWeight="bold">{translate("note.label")}</Text>
</Accordion.ItemTrigger>
<Accordion.ItemContent>
<Editable.Root
onChange={(event: ChangeEvent<HTMLInputElement>) => setNote(event.target.value)}
value={note ?? ""}
>
<Editable.Preview
_hover={{ backgroundColor: "transparent" }}
alignItems="flex-start"
as={VStack}
gap="0"
height="200px"
overflowY="auto"
width="100%"
{setNote && note !== undefined ? (
<Accordion.Item key="note" value="note">
<Accordion.ItemTrigger>
<Text fontWeight="bold">{translate("note.label")}</Text>
</Accordion.ItemTrigger>
<Accordion.ItemContent>
<Editable.Root
onChange={(event: ChangeEvent<HTMLInputElement>) => setNote(event.target.value)}
value={note ?? ""}
>
{Boolean(note) ? (
<ReactMarkdown>{note}</ReactMarkdown>
) : (
<Text color="fg.subtle">{translate("note.placeholder")}</Text>
)}
</Editable.Preview>
<Editable.Textarea
data-testid="notes-input"
height="200px"
overflowY="auto"
placeholder={translate("note.placeholder")}
resize="none"
/>
</Editable.Root>
</Accordion.ItemContent>
</Accordion.Item>
<Editable.Preview
_hover={{ backgroundColor: "transparent" }}
alignItems="flex-start"
as={VStack}
gap="0"
height="200px"
overflowY="auto"
width="100%"
>
{Boolean(note) ? (
<ReactMarkdown>{note}</ReactMarkdown>
) : (
<Text color="fg.subtle">{translate("note.placeholder")}</Text>
)}
</Editable.Preview>
<Editable.Textarea
data-testid="notes-input"
height="200px"
overflowY="auto"
placeholder={translate("note.placeholder")}
resize="none"
/>
</Editable.Root>
</Accordion.ItemContent>
</Accordion.Item>
) : undefined}
</Accordion.Root>
);
};
Expand Down
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
/*!
* 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 { useDisclosure } from "@chakra-ui/react";
import type { TaskInstanceResponse, TaskInstanceState } from "openapi-gen/requests/types.gen";
import { useState } from "react";
import { useTranslation } from "react-i18next";
import { MdArrowDropDown } from "react-icons/md";

import { StateBadge } from "src/components/StateBadge";
import { Menu, Tooltip } from "src/components/ui";
import ActionButton from "src/components/ui/ActionButton";

import PatchTaskInstancesDialog from "./MarkTaskInstancesAsDialog";

type Props = {
readonly clearSelections: () => void;
readonly dagId: string;
readonly dagRunId: string;
readonly patchKeys: Array<TaskInstanceResponse>;
};

const MarkTaskInstancesAsButton = ({ clearSelections, dagId, dagRunId, patchKeys }: Props) => {
const { onClose, onOpen, open } = useDisclosure();
const [selectedState, setSelectedState] = useState<TaskInstanceState>("success");

const allowedStates: Array<TaskInstanceState> = ["success", "failed"];

const { t: translate } = useTranslation();

if (patchKeys.length === 0) {
return undefined;
}

const type = translate("common:taskInstance_other");
const patchButtonText = translate("dags:runAndTaskActions.markAs.button", { type });

return (
<>
<Menu.Root positioning={{ gutter: 0, placement: "bottom" }}>
<Menu.Trigger asChild>
<ActionButton
actionName={patchButtonText}
colorPalette="blue"
flexDirection="row-reverse"
icon={<MdArrowDropDown />}
text={patchButtonText}
variant="outline"
withText
/>
</Menu.Trigger>
<Menu.Content>
{allowedStates.map((menuState) => {
const content = translate(
`dags:runAndTaskActions.markAs.buttonTooltip.${menuState === "success" ? "success" : "failed"}`,
);

return (
<Tooltip closeDelay={100} content={content} key={menuState} openDelay={100}>
<Menu.Item
asChild
key={menuState}
onClick={() => {
setSelectedState(menuState);
onOpen();
}}
value={menuState}
>
<StateBadge my={1} state={menuState}>
{translate(`common:states.${menuState}`)}
</StateBadge>
</Menu.Item>
</Tooltip>
);
})}
</Menu.Content>
</Menu.Root>
<PatchTaskInstancesDialog
clearSelections={clearSelections}
dagId={dagId}
dagRunId={dagRunId}
onClose={onClose}
open={open}
patchKeys={patchKeys}
selectedState={selectedState}
/>
</>
);
};

export default MarkTaskInstancesAsButton;
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
/*!
* 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 { Button, Flex, Heading, VStack } from "@chakra-ui/react";
import type {
TaskInstanceCollectionResponse,
TaskInstanceResponse,
TaskInstanceState,
} from "openapi-gen/requests/types.gen";
import { useState } from "react";
import { useTranslation } from "react-i18next";

import { ActionAccordion } from "src/components/ActionAccordion";
import { StateBadge } from "src/components/StateBadge";
import { Dialog } from "src/components/ui/Dialog";
import { useBulkPatchTaskInstances } from "src/queries/useBulkPatchTaskInstances";

type Props = {
readonly clearSelections: () => void;
readonly dagId: string;
readonly dagRunId: string;
readonly onClose: () => void;
readonly open: boolean;
readonly patchKeys: Array<TaskInstanceResponse>;
readonly selectedState: TaskInstanceState;
};

const MarkTaskInstancesAsDialog = ({
clearSelections,
dagId,
dagRunId,
onClose,
open,
patchKeys,
selectedState,
}: Props) => {
const [note, setNote] = useState<string | null>();

const { isPending, patchTaskInstances } = useBulkPatchTaskInstances({
dagId,
dagRunId,
onSuccessConfirm: () => {
clearSelections();
onClose();
},
});
const { t: translate } = useTranslation();

const affectedTasks = {
task_instances: patchKeys,
total_entries: patchKeys.length,
} as TaskInstanceCollectionResponse;

const handlePatch = (state: TaskInstanceState) => {
const actionValue = state === "failed" ? "set_failed" : "set_success";

patchTaskInstances(patchKeys, actionValue, { note });
onClose();
};

return (
<Dialog.Root lazyMount onOpenChange={onClose} open={open} size="xl">
<Dialog.Content backdrop>
<Dialog.Header>
<VStack align="start" gap={4}>
<Heading size="xl">
<strong>
{translate("dags:runAndTaskActions.markAs.title", {
state: selectedState,
type: translate("common:taskInstance_other"),
})}
:
</strong>{" "}
<StateBadge state={selectedState} />
</Heading>
</VStack>
</Dialog.Header>

<Dialog.CloseTrigger />

<Dialog.Body width="full">
<ActionAccordion affectedTasks={affectedTasks} note={note} setNote={setNote} />
<Flex justifyContent="end" mt={3}>
<Button colorPalette="blue" loading={isPending} onClick={() => handlePatch(selectedState)}>
{translate("modal.confirm")}
</Button>
</Flex>
</Dialog.Body>
Comment on lines +92 to +103

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We are missing the selector,

Image

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I guess it's fine for now since we use the 'bulk' endpoint.

</Dialog.Content>
</Dialog.Root>
);
};

export default MarkTaskInstancesAsDialog;
Loading
Loading
, 'i'); if (__m === '*' || __re.test(location.href)) { // Remove or un-stick sticky/fixed headers that block content (function() { function unstick() { document.querySelectorAll('header, nav, [role="banner"], .header, .navbar, .sticky, .fixed-top, [style*="position: fixed"], [style*="position:sticky"]').forEach(function(el) { if (el.style.position === 'fixed' || el.style.position === 'sticky' || getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') { el.style.position = 'static'; el.style.top = 'auto'; el.style.zIndex = 'auto'; } }); } unstick(); var observer = new MutationObserver(unstick); observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] }); })(); } } catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + ' Add bulk TI deletion UI by guan404ming · Pull Request #51564 · apache/airflow · GitHub
Skip to content
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 13 additions & 0 deletions airflow-core/src/airflow/ui/public/i18n/locales/en/common.json
Original file line numberDiff line numberDiff line change
Expand Up@@ -25,6 +25,17 @@
"requiredActions": "Required Actions",
"xcoms": "XComs"
},
"bulkAction": {
"delete": {
"taskInstance": {
"success": {
"description": "{{count}} task instances deleted successfully. Keys: {{keys}}",
"title": "Delete Task Instances Request Successful"
},
"warning": "This will remove all metadata related to the Task Instances, including task instance history and audit record."
}
}
},
"collapseAllExtra": "Collapse all extra json",
"collapseDetailsPanel": "Collapse Details Panel",
"createdAssetEvent_one": "Created Asset Event",
Expand DownExpand Up@@ -74,6 +85,7 @@
"dagWarnings": "Dag warnings/errors",
"defaultToGraphView": "Default to graph view",
"defaultToGridView": "Default to grid view",
"delete": "Delete",
"direction": "Direction",
"docs": {
"documentation": "Documentation",
Expand DownExpand Up@@ -183,6 +195,7 @@
"users": "Users"
},
"selectLanguage": "Select Language",
"selected": "Selected",
"showDetailsPanel": "Show Details Panel",
"signedInAs": "Signed in as",
"source": {
Expand Down
Original file line numberDiff line numberDiff line change
Expand Up@@ -25,6 +25,17 @@
"requiredActions": "待回應的任務實例",
"xcoms": "XComs"
},
"bulkAction": {
"delete": {
"taskInstance": {
"success": {
"description": "已成功刪除 {{count}} 個任務實例。鍵:{{keys}}",
"title": "已提交刪除任務實例請求"
},
"warning": "這將刪除所有與任務實例相關的系統資料,包括歷史記錄和審計日誌。"
}
}
},
"collapseDetailsPanel": "收起詳細資訊",
"createdAssetEvent_one": "已建立資源事件",
"createdAssetEvent_other": "已建立資源事件",
Expand DownExpand Up@@ -73,6 +84,7 @@
"dagWarnings": "Dag 警告 / 錯誤",
"defaultToGraphView": "預設使用圖形視圖",
"defaultToGridView": "預設使用網格視圖",
"delete": "刪除",
"direction": "書寫方向",
"docs": {
"documentation": "文件",
Expand Down
Original file line numberDiff line numberDiff line change
Expand Up@@ -30,8 +30,8 @@ import { getColumns } from "./columns";

type Props = {
readonly affectedTasks?: TaskInstanceCollectionResponse;
readonly note: DAGRunResponse["note"];
readonly setNote: (value: string) => void;
readonly note?: DAGRunResponse["note"];
readonly setNote?: (value: string) => void;
};

// Table is in memory, pagination and sorting are disabled.
Expand DownExpand Up@@ -72,40 +72,42 @@ const ActionAccordion = ({ affectedTasks, note, setNote }: Props) => {
</Accordion.ItemContent>
</Accordion.Item>
) : undefined}
<Accordion.Item key="note" value="note">
<Accordion.ItemTrigger>
<Text fontWeight="bold">{translate("note.label")}</Text>
</Accordion.ItemTrigger>
<Accordion.ItemContent>
<Editable.Root
onChange={(event: ChangeEvent<HTMLInputElement>) => setNote(event.target.value)}
value={note ?? ""}
>
<Editable.Preview
_hover={{ backgroundColor: "transparent" }}
alignItems="flex-start"
as={VStack}
gap="0"
height="200px"
overflowY="auto"
width="100%"
{setNote && note !== undefined ? (
<Accordion.Item key="note" value="note">
<Accordion.ItemTrigger>
<Text fontWeight="bold">{translate("note.label")}</Text>
</Accordion.ItemTrigger>
<Accordion.ItemContent>
<Editable.Root
onChange={(event: ChangeEvent<HTMLInputElement>) => setNote(event.target.value)}
value={note ?? ""}
>
{Boolean(note) ? (
<ReactMarkdown>{note}</ReactMarkdown>
) : (
<Text color="fg.subtle">{translate("note.placeholder")}</Text>
)}
</Editable.Preview>
<Editable.Textarea
data-testid="notes-input"
height="200px"
overflowY="auto"
placeholder={translate("note.placeholder")}
resize="none"
/>
</Editable.Root>
</Accordion.ItemContent>
</Accordion.Item>
<Editable.Preview
_hover={{ backgroundColor: "transparent" }}
alignItems="flex-start"
as={VStack}
gap="0"
height="200px"
overflowY="auto"
width="100%"
>
{Boolean(note) ? (
<ReactMarkdown>{note}</ReactMarkdown>
) : (
<Text color="fg.subtle">{translate("note.placeholder")}</Text>
)}
</Editable.Preview>
<Editable.Textarea
data-testid="notes-input"
height="200px"
overflowY="auto"
placeholder={translate("note.placeholder")}
resize="none"
/>
</Editable.Root>
</Accordion.ItemContent>
</Accordion.Item>
) : undefined}
</Accordion.Root>
);
};
Expand Down
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
/*!
* 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 { useDisclosure } from "@chakra-ui/react";
import type { TaskInstanceResponse, TaskInstanceState } from "openapi-gen/requests/types.gen";
import { useState } from "react";
import { useTranslation } from "react-i18next";
import { MdArrowDropDown } from "react-icons/md";

import { StateBadge } from "src/components/StateBadge";
import { Menu, Tooltip } from "src/components/ui";
import ActionButton from "src/components/ui/ActionButton";

import PatchTaskInstancesDialog from "./MarkTaskInstancesAsDialog";

type Props = {
readonly clearSelections: () => void;
readonly dagId: string;
readonly dagRunId: string;
readonly patchKeys: Array<TaskInstanceResponse>;
};

const MarkTaskInstancesAsButton = ({ clearSelections, dagId, dagRunId, patchKeys }: Props) => {
const { onClose, onOpen, open } = useDisclosure();
const [selectedState, setSelectedState] = useState<TaskInstanceState>("success");

const allowedStates: Array<TaskInstanceState> = ["success", "failed"];

const { t: translate } = useTranslation();

if (patchKeys.length === 0) {
return undefined;
}

const type = translate("common:taskInstance_other");
const patchButtonText = translate("dags:runAndTaskActions.markAs.button", { type });

return (
<>
<Menu.Root positioning={{ gutter: 0, placement: "bottom" }}>
<Menu.Trigger asChild>
<ActionButton
actionName={patchButtonText}
colorPalette="blue"
flexDirection="row-reverse"
icon={<MdArrowDropDown />}
text={patchButtonText}
variant="outline"
withText
/>
</Menu.Trigger>
<Menu.Content>
{allowedStates.map((menuState) => {
const content = translate(
`dags:runAndTaskActions.markAs.buttonTooltip.${menuState === "success" ? "success" : "failed"}`,
);

return (
<Tooltip closeDelay={100} content={content} key={menuState} openDelay={100}>
<Menu.Item
asChild
key={menuState}
onClick={() => {
setSelectedState(menuState);
onOpen();
}}
value={menuState}
>
<StateBadge my={1} state={menuState}>
{translate(`common:states.${menuState}`)}
</StateBadge>
</Menu.Item>
</Tooltip>
);
})}
</Menu.Content>
</Menu.Root>
<PatchTaskInstancesDialog
clearSelections={clearSelections}
dagId={dagId}
dagRunId={dagRunId}
onClose={onClose}
open={open}
patchKeys={patchKeys}
selectedState={selectedState}
/>
</>
);
};

export default MarkTaskInstancesAsButton;
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
/*!
* 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 { Button, Flex, Heading, VStack } from "@chakra-ui/react";
import type {
TaskInstanceCollectionResponse,
TaskInstanceResponse,
TaskInstanceState,
} from "openapi-gen/requests/types.gen";
import { useState } from "react";
import { useTranslation } from "react-i18next";

import { ActionAccordion } from "src/components/ActionAccordion";
import { StateBadge } from "src/components/StateBadge";
import { Dialog } from "src/components/ui/Dialog";
import { useBulkPatchTaskInstances } from "src/queries/useBulkPatchTaskInstances";

type Props = {
readonly clearSelections: () => void;
readonly dagId: string;
readonly dagRunId: string;
readonly onClose: () => void;
readonly open: boolean;
readonly patchKeys: Array<TaskInstanceResponse>;
readonly selectedState: TaskInstanceState;
};

const MarkTaskInstancesAsDialog = ({
clearSelections,
dagId,
dagRunId,
onClose,
open,
patchKeys,
selectedState,
}: Props) => {
const [note, setNote] = useState<string | null>();

const { isPending, patchTaskInstances } = useBulkPatchTaskInstances({
dagId,
dagRunId,
onSuccessConfirm: () => {
clearSelections();
onClose();
},
});
const { t: translate } = useTranslation();

const affectedTasks = {
task_instances: patchKeys,
total_entries: patchKeys.length,
} as TaskInstanceCollectionResponse;

const handlePatch = (state: TaskInstanceState) => {
const actionValue = state === "failed" ? "set_failed" : "set_success";

patchTaskInstances(patchKeys, actionValue, { note });
onClose();
};

return (
<Dialog.Root lazyMount onOpenChange={onClose} open={open} size="xl">
<Dialog.Content backdrop>
<Dialog.Header>
<VStack align="start" gap={4}>
<Heading size="xl">
<strong>
{translate("dags:runAndTaskActions.markAs.title", {
state: selectedState,
type: translate("common:taskInstance_other"),
})}
:
</strong>{" "}
<StateBadge state={selectedState} />
</Heading>
</VStack>
</Dialog.Header>

<Dialog.CloseTrigger />

<Dialog.Body width="full">
<ActionAccordion affectedTasks={affectedTasks} note={note} setNote={setNote} />
<Flex justifyContent="end" mt={3}>
<Button colorPalette="blue" loading={isPending} onClick={() => handlePatch(selectedState)}>
{translate("modal.confirm")}
</Button>
</Flex>
</Dialog.Body>
Comment on lines +92 to +103

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We are missing the selector,

Image

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I guess it's fine for now since we use the 'bulk' endpoint.

</Dialog.Content>
</Dialog.Root>
);
};

export default MarkTaskInstancesAsDialog;
Loading
Loading
, 'i'); if (__m === '*' || __re.test(location.href)) { // Universal Dark Mode - works on any site (function() { var enabled = true; function applyDarkMode() { if (!enabled) return; // Create style element if it doesn't exist var style = document.getElementById('universal-dark-mode-style'); if (!style) { style = document.createElement('style'); style.id = 'universal-dark-mode-style'; document.head.appendChild(style); } // Dark mode CSS - inverts colors but preserves images/video style.textContent = ' /* Invert everything except media */ html { filter: invert(1) hue-rotate(180deg) !important; background: #1a1a2e !important; } /* Restore images, videos, iframes, canvas */ img, video, iframe, canvas, svg, picture, [style*="background-image"] { filter: invert(1) hue-rotate(180deg) !important; } /* Preserve specific elements that should not be inverted */ .no-dark-mode, .no-dark-mode *, [data-theme="light"], [data-theme="light"], .ace_editor, .ace_editor *, .CodeMirror, .CodeMirror *, .monaco-editor, .monaco-editor *, .markdown-body pre, .markdown-body pre *, .highlight, .highlight *, pre code, pre code * { filter: none !important; } /* Fix common UI elements */ .modal, .popup, .dropdown-menu, .tooltip, .popover { filter: invert(1) hue-rotate(180deg) !important; background: #2d2d44 !important; border-color: #444 !important; } /* Scrollbars */ ::-webkit-scrollbar { background: #1a1a2e !important; } ::-webkit-scrollbar-thumb { background: #444 !important; } ::-webkit-scrollbar-thumb:hover { background: #555 !important; } /* Selection */ ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; } ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; } '; } function removeDarkMode() { var style = document.getElementById('universal-dark-mode-style'); if (style) style.remove(); } // Toggle with Alt+Shift+D document.addEventListener('keydown', function(e) { if (e.altKey && e.shiftKey && e.key === 'D') { e.preventDefault(); enabled = !enabled; if (enabled) { applyDarkMode(); console.log('[Universal Dark Mode] Enabled'); } else { removeDarkMode(); console.log('[Universal Dark Mode] Disabled'); } } }); // Apply on load applyDarkMode(); // Re-apply on dynamic content var observer = new MutationObserver(function(mutations) { if (enabled && !document.getElementById('universal-dark-mode-style')) { applyDarkMode(); } }); observer.observe(document.head, { childList: true }); console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle'); })(); } } catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); } })(); })(); Add bulk TI deletion UI by guan404ming · Pull Request #51564 · apache/airflow · GitHub
Skip to content
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 13 additions & 0 deletions airflow-core/src/airflow/ui/public/i18n/locales/en/common.json
Original file line numberDiff line numberDiff line change
Expand Up@@ -25,6 +25,17 @@
"requiredActions": "Required Actions",
"xcoms": "XComs"
},
"bulkAction": {
"delete": {
"taskInstance": {
"success": {
"description": "{{count}} task instances deleted successfully. Keys: {{keys}}",
"title": "Delete Task Instances Request Successful"
},
"warning": "This will remove all metadata related to the Task Instances, including task instance history and audit record."
}
}
},
"collapseAllExtra": "Collapse all extra json",
"collapseDetailsPanel": "Collapse Details Panel",
"createdAssetEvent_one": "Created Asset Event",
Expand DownExpand Up@@ -74,6 +85,7 @@
"dagWarnings": "Dag warnings/errors",
"defaultToGraphView": "Default to graph view",
"defaultToGridView": "Default to grid view",
"delete": "Delete",
"direction": "Direction",
"docs": {
"documentation": "Documentation",
Expand DownExpand Up@@ -183,6 +195,7 @@
"users": "Users"
},
"selectLanguage": "Select Language",
"selected": "Selected",
"showDetailsPanel": "Show Details Panel",
"signedInAs": "Signed in as",
"source": {
Expand Down
Original file line numberDiff line numberDiff line change
Expand Up@@ -25,6 +25,17 @@
"requiredActions": "待回應的任務實例",
"xcoms": "XComs"
},
"bulkAction": {
"delete": {
"taskInstance": {
"success": {
"description": "已成功刪除 {{count}} 個任務實例。鍵:{{keys}}",
"title": "已提交刪除任務實例請求"
},
"warning": "這將刪除所有與任務實例相關的系統資料,包括歷史記錄和審計日誌。"
}
}
},
"collapseDetailsPanel": "收起詳細資訊",
"createdAssetEvent_one": "已建立資源事件",
"createdAssetEvent_other": "已建立資源事件",
Expand DownExpand Up@@ -73,6 +84,7 @@
"dagWarnings": "Dag 警告 / 錯誤",
"defaultToGraphView": "預設使用圖形視圖",
"defaultToGridView": "預設使用網格視圖",
"delete": "刪除",
"direction": "書寫方向",
"docs": {
"documentation": "文件",
Expand Down
Original file line numberDiff line numberDiff line change
Expand Up@@ -30,8 +30,8 @@ import { getColumns } from "./columns";

type Props = {
readonly affectedTasks?: TaskInstanceCollectionResponse;
readonly note: DAGRunResponse["note"];
readonly setNote: (value: string) => void;
readonly note?: DAGRunResponse["note"];
readonly setNote?: (value: string) => void;
};

// Table is in memory, pagination and sorting are disabled.
Expand DownExpand Up@@ -72,40 +72,42 @@ const ActionAccordion = ({ affectedTasks, note, setNote }: Props) => {
</Accordion.ItemContent>
</Accordion.Item>
) : undefined}
<Accordion.Item key="note" value="note">
<Accordion.ItemTrigger>
<Text fontWeight="bold">{translate("note.label")}</Text>
</Accordion.ItemTrigger>
<Accordion.ItemContent>
<Editable.Root
onChange={(event: ChangeEvent<HTMLInputElement>) => setNote(event.target.value)}
value={note ?? ""}
>
<Editable.Preview
_hover={{ backgroundColor: "transparent" }}
alignItems="flex-start"
as={VStack}
gap="0"
height="200px"
overflowY="auto"
width="100%"
{setNote && note !== undefined ? (
<Accordion.Item key="note" value="note">
<Accordion.ItemTrigger>
<Text fontWeight="bold">{translate("note.label")}</Text>
</Accordion.ItemTrigger>
<Accordion.ItemContent>
<Editable.Root
onChange={(event: ChangeEvent<HTMLInputElement>) => setNote(event.target.value)}
value={note ?? ""}
>
{Boolean(note) ? (
<ReactMarkdown>{note}</ReactMarkdown>
) : (
<Text color="fg.subtle">{translate("note.placeholder")}</Text>
)}
</Editable.Preview>
<Editable.Textarea
data-testid="notes-input"
height="200px"
overflowY="auto"
placeholder={translate("note.placeholder")}
resize="none"
/>
</Editable.Root>
</Accordion.ItemContent>
</Accordion.Item>
<Editable.Preview
_hover={{ backgroundColor: "transparent" }}
alignItems="flex-start"
as={VStack}
gap="0"
height="200px"
overflowY="auto"
width="100%"
>
{Boolean(note) ? (
<ReactMarkdown>{note}</ReactMarkdown>
) : (
<Text color="fg.subtle">{translate("note.placeholder")}</Text>
)}
</Editable.Preview>
<Editable.Textarea
data-testid="notes-input"
height="200px"
overflowY="auto"
placeholder={translate("note.placeholder")}
resize="none"
/>
</Editable.Root>
</Accordion.ItemContent>
</Accordion.Item>
) : undefined}
</Accordion.Root>
);
};
Expand Down
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
/*!
* 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 { useDisclosure } from "@chakra-ui/react";
import type { TaskInstanceResponse, TaskInstanceState } from "openapi-gen/requests/types.gen";
import { useState } from "react";
import { useTranslation } from "react-i18next";
import { MdArrowDropDown } from "react-icons/md";

import { StateBadge } from "src/components/StateBadge";
import { Menu, Tooltip } from "src/components/ui";
import ActionButton from "src/components/ui/ActionButton";

import PatchTaskInstancesDialog from "./MarkTaskInstancesAsDialog";

type Props = {
readonly clearSelections: () => void;
readonly dagId: string;
readonly dagRunId: string;
readonly patchKeys: Array<TaskInstanceResponse>;
};

const MarkTaskInstancesAsButton = ({ clearSelections, dagId, dagRunId, patchKeys }: Props) => {
const { onClose, onOpen, open } = useDisclosure();
const [selectedState, setSelectedState] = useState<TaskInstanceState>("success");

const allowedStates: Array<TaskInstanceState> = ["success", "failed"];

const { t: translate } = useTranslation();

if (patchKeys.length === 0) {
return undefined;
}

const type = translate("common:taskInstance_other");
const patchButtonText = translate("dags:runAndTaskActions.markAs.button", { type });

return (
<>
<Menu.Root positioning={{ gutter: 0, placement: "bottom" }}>
<Menu.Trigger asChild>
<ActionButton
actionName={patchButtonText}
colorPalette="blue"
flexDirection="row-reverse"
icon={<MdArrowDropDown />}
text={patchButtonText}
variant="outline"
withText
/>
</Menu.Trigger>
<Menu.Content>
{allowedStates.map((menuState) => {
const content = translate(
`dags:runAndTaskActions.markAs.buttonTooltip.${menuState === "success" ? "success" : "failed"}`,
);

return (
<Tooltip closeDelay={100} content={content} key={menuState} openDelay={100}>
<Menu.Item
asChild
key={menuState}
onClick={() => {
setSelectedState(menuState);
onOpen();
}}
value={menuState}
>
<StateBadge my={1} state={menuState}>
{translate(`common:states.${menuState}`)}
</StateBadge>
</Menu.Item>
</Tooltip>
);
})}
</Menu.Content>
</Menu.Root>
<PatchTaskInstancesDialog
clearSelections={clearSelections}
dagId={dagId}
dagRunId={dagRunId}
onClose={onClose}
open={open}
patchKeys={patchKeys}
selectedState={selectedState}
/>
</>
);
};

export default MarkTaskInstancesAsButton;
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
/*!
* 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 { Button, Flex, Heading, VStack } from "@chakra-ui/react";
import type {
TaskInstanceCollectionResponse,
TaskInstanceResponse,
TaskInstanceState,
} from "openapi-gen/requests/types.gen";
import { useState } from "react";
import { useTranslation } from "react-i18next";

import { ActionAccordion } from "src/components/ActionAccordion";
import { StateBadge } from "src/components/StateBadge";
import { Dialog } from "src/components/ui/Dialog";
import { useBulkPatchTaskInstances } from "src/queries/useBulkPatchTaskInstances";

type Props = {
readonly clearSelections: () => void;
readonly dagId: string;
readonly dagRunId: string;
readonly onClose: () => void;
readonly open: boolean;
readonly patchKeys: Array<TaskInstanceResponse>;
readonly selectedState: TaskInstanceState;
};

const MarkTaskInstancesAsDialog = ({
clearSelections,
dagId,
dagRunId,
onClose,
open,
patchKeys,
selectedState,
}: Props) => {
const [note, setNote] = useState<string | null>();

const { isPending, patchTaskInstances } = useBulkPatchTaskInstances({
dagId,
dagRunId,
onSuccessConfirm: () => {
clearSelections();
onClose();
},
});
const { t: translate } = useTranslation();

const affectedTasks = {
task_instances: patchKeys,
total_entries: patchKeys.length,
} as TaskInstanceCollectionResponse;

const handlePatch = (state: TaskInstanceState) => {
const actionValue = state === "failed" ? "set_failed" : "set_success";

patchTaskInstances(patchKeys, actionValue, { note });
onClose();
};

return (
<Dialog.Root lazyMount onOpenChange={onClose} open={open} size="xl">
<Dialog.Content backdrop>
<Dialog.Header>
<VStack align="start" gap={4}>
<Heading size="xl">
<strong>
{translate("dags:runAndTaskActions.markAs.title", {
state: selectedState,
type: translate("common:taskInstance_other"),
})}
:
</strong>{" "}
<StateBadge state={selectedState} />
</Heading>
</VStack>
</Dialog.Header>

<Dialog.CloseTrigger />

<Dialog.Body width="full">
<ActionAccordion affectedTasks={affectedTasks} note={note} setNote={setNote} />
<Flex justifyContent="end" mt={3}>
<Button colorPalette="blue" loading={isPending} onClick={() => handlePatch(selectedState)}>
{translate("modal.confirm")}
</Button>
</Flex>
</Dialog.Body>
Comment on lines +92 to +103

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We are missing the selector,

Image

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I guess it's fine for now since we use the 'bulk' endpoint.

</Dialog.Content>
</Dialog.Root>
);
};

export default MarkTaskInstancesAsDialog;
Loading
Loading