This is an automated email from the ASF dual-hosted git repository.
pierrejeambrun pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/airflow.git
The following commit(s) were added to refs/heads/main by this push:
new 8fc77215ce4 AIP-38 TI and DagRun note rendering in headers (#45829)
8fc77215ce4 is described below
commit 8fc77215ce4caa71a55af07a8e8c2e8e84fc6838
Author: Pierre Jeambrun <[email protected]>
AuthorDate: Wed Jan 22 00:46:20 2025 +0100
AIP-38 TI and DagRun note rendering in headers (#45829)
---
...entationModal.tsx => DisplayMarkdownButton.tsx} | 29 ++++++++++++++--------
airflow/ui/src/pages/Dag/Header.tsx | 13 +++++++---
airflow/ui/src/pages/Run/Header.tsx | 24 ++++++++++--------
airflow/ui/src/pages/Task/Header.tsx | 12 +++++++--
airflow/ui/src/pages/TaskInstance/Header.tsx | 26 +++++++++++--------
5 files changed, 67 insertions(+), 37 deletions(-)
diff --git a/airflow/ui/src/components/DocumentationModal.tsx
b/airflow/ui/src/components/DisplayMarkdownButton.tsx
similarity index 72%
rename from airflow/ui/src/components/DocumentationModal.tsx
rename to airflow/ui/src/components/DisplayMarkdownButton.tsx
index 95ca9b83210..e844f25da64 100644
--- a/airflow/ui/src/components/DocumentationModal.tsx
+++ b/airflow/ui/src/components/DisplayMarkdownButton.tsx
@@ -16,31 +16,40 @@
* specific language governing permissions and limitations
* under the License.
*/
-import { Box, Heading } from "@chakra-ui/react";
-import { useState } from "react";
-import { FiBookOpen } from "react-icons/fi";
+import { Box, Heading, VStack } from "@chakra-ui/react";
+import { type ReactElement, useState } from "react";
import { Button, Dialog } from "src/components/ui";
import ReactMarkdown from "./ReactMarkdown";
-const DocumentationModal = ({ docMd, docType }: { readonly docMd: string;
readonly docType: string }) => {
+const DisplayMarkdownButton = ({
+ header,
+ icon,
+ mdContent,
+ text,
+}: {
+ readonly header: string;
+ readonly icon?: ReactElement;
+ readonly mdContent: string;
+ readonly text: string;
+}) => {
const [isDocsOpen, setIsDocsOpen] = useState(false);
return (
<Box>
<Button onClick={() => setIsDocsOpen(true)} variant="outline">
- <FiBookOpen height={5} width={5} />
- {docType} Docs
+ {icon}
+ {text}
</Button>
<Dialog.Root onOpenChange={() => setIsDocsOpen(false)} open={isDocsOpen}
size="md">
<Dialog.Content backdrop>
<Dialog.Header bg="blue.muted">
- <Heading size="xl">{docType} Documentation</Heading>
+ <Heading size="xl">{header}</Heading>
<Dialog.CloseTrigger closeButtonProps={{ size: "xl" }} />
</Dialog.Header>
- <Dialog.Body display="flex">
- <ReactMarkdown>{docMd}</ReactMarkdown>
+ <Dialog.Body alignItems="flex-start" as={VStack} gap="0">
+ <ReactMarkdown>{mdContent}</ReactMarkdown>
</Dialog.Body>
</Dialog.Content>
</Dialog.Root>
@@ -48,4 +57,4 @@ const DocumentationModal = ({ docMd, docType }: { readonly
docMd: string; readon
);
};
-export default DocumentationModal;
+export default DisplayMarkdownButton;
diff --git a/airflow/ui/src/pages/Dag/Header.tsx
b/airflow/ui/src/pages/Dag/Header.tsx
index 36954a734c7..0c01513adb4 100644
--- a/airflow/ui/src/pages/Dag/Header.tsx
+++ b/airflow/ui/src/pages/Dag/Header.tsx
@@ -17,12 +17,12 @@
* under the License.
*/
import { Box, Flex, Heading, HStack, SimpleGrid, Text } from
"@chakra-ui/react";
-import { FiCalendar } from "react-icons/fi";
+import { FiBookOpen, FiCalendar } from "react-icons/fi";
import type { DAGDetailsResponse, DAGRunResponse } from
"openapi/requests/types.gen";
import { DagIcon } from "src/assets/DagIcon";
import DagRunInfo from "src/components/DagRunInfo";
-import DocumentationModal from "src/components/DocumentationModal";
+import DisplayMarkdownButton from "src/components/DisplayMarkdownButton";
import ParseDag from "src/components/ParseDag";
import { Stat } from "src/components/Stat";
import { TogglePause } from "src/components/TogglePause";
@@ -53,7 +53,14 @@ export const Header = ({
<Flex>
{dag ? (
<HStack>
- {dag.doc_md === null ? undefined : <DocumentationModal
docMd={dag.doc_md} docType="Dag" />}
+ {dag.doc_md === null ? undefined : (
+ <DisplayMarkdownButton
+ header="Dag Documentation"
+ icon={<FiBookOpen />}
+ mdContent={dag.doc_md}
+ text="Dag Docs"
+ />
+ )}
<ParseDag dagId={dag.dag_id} fileToken={dag.file_token} />
<TriggerDAGButton dag={dag} />
</HStack>
diff --git a/airflow/ui/src/pages/Run/Header.tsx
b/airflow/ui/src/pages/Run/Header.tsx
index ec48591a0d7..4d2c899c31f 100644
--- a/airflow/ui/src/pages/Run/Header.tsx
+++ b/airflow/ui/src/pages/Run/Header.tsx
@@ -17,11 +17,11 @@
* under the License.
*/
import { Box, Flex, Heading, HStack, SimpleGrid, Text } from
"@chakra-ui/react";
-import { FiBarChart } from "react-icons/fi";
-import { MdOutlineModeComment } from "react-icons/md";
+import { FiBarChart, FiMessageSquare } from "react-icons/fi";
import type { DAGRunResponse } from "openapi/requests/types.gen";
import { ClearRunButton } from "src/components/Clear";
+import DisplayMarkdownButton from "src/components/DisplayMarkdownButton";
import { RunTypeIcon } from "src/components/RunTypeIcon";
import { Stat } from "src/components/Stat";
import Time from "src/components/Time";
@@ -42,16 +42,18 @@ export const Header = ({ dagRun }: { readonly dagRun:
DAGRunResponse }) => (
<div />
</Flex>
</HStack>
- <ClearRunButton dagRun={dagRun} />
+ <HStack>
+ {dagRun.note === null || dagRun.note.length === 0 ? undefined : (
+ <DisplayMarkdownButton
+ header="Dag Run Note"
+ icon={<FiMessageSquare color="black" />}
+ mdContent={dagRun.note}
+ text="Note"
+ />
+ )}
+ <ClearRunButton dagRun={dagRun} />
+ </HStack>
</Flex>
- {dagRun.note === null || dagRun.note.length === 0 ? undefined : (
- <Flex alignItems="flex-start" justifyContent="space-between" mr={16}>
- <MdOutlineModeComment size="3rem" />
- <Text fontSize="sm" ml={3}>
- {dagRun.note}
- </Text>
- </Flex>
- )}
<SimpleGrid columns={4} gap={4}>
<Stat label="Run Type">
<HStack>
diff --git a/airflow/ui/src/pages/Task/Header.tsx
b/airflow/ui/src/pages/Task/Header.tsx
index 89e12d0f19f..e0c4ee419ff 100644
--- a/airflow/ui/src/pages/Task/Header.tsx
+++ b/airflow/ui/src/pages/Task/Header.tsx
@@ -17,10 +17,11 @@
* under the License.
*/
import { Box, Flex, Heading, HStack, SimpleGrid, Text } from
"@chakra-ui/react";
+import { FiBookOpen } from "react-icons/fi";
import type { TaskResponse } from "openapi/requests/types.gen";
import { TaskIcon } from "src/assets/TaskIcon";
-import DocumentationModal from "src/components/DocumentationModal";
+import DisplayMarkdownButton from "src/components/DisplayMarkdownButton";
import { Stat } from "src/components/Stat";
export const Header = ({ task }: { readonly task: TaskResponse }) => (
@@ -37,7 +38,14 @@ export const Header = ({ task }: { readonly task:
TaskResponse }) => (
<div />
</Flex>
</HStack>
- {task.doc_md === null ? undefined : <DocumentationModal
docMd={task.doc_md} docType="Task" />}
+ {task.doc_md === null ? undefined : (
+ <DisplayMarkdownButton
+ header="Task Documentation"
+ icon={<FiBookOpen />}
+ mdContent={task.doc_md}
+ text="Task Docs"
+ />
+ )}
</Flex>
<SimpleGrid columns={4} gap={4}>
<Stat label="Operator">
diff --git a/airflow/ui/src/pages/TaskInstance/Header.tsx
b/airflow/ui/src/pages/TaskInstance/Header.tsx
index f661c29cd41..a12c1454ae1 100644
--- a/airflow/ui/src/pages/TaskInstance/Header.tsx
+++ b/airflow/ui/src/pages/TaskInstance/Header.tsx
@@ -16,11 +16,13 @@
* specific language governing permissions and limitations
* under the License.
*/
-import { Box, Flex, Heading, HStack, SimpleGrid, Text } from
"@chakra-ui/react";
-import { MdOutlineModeComment, MdOutlineTask } from "react-icons/md";
+import { Box, Flex, Heading, HStack, SimpleGrid } from "@chakra-ui/react";
+import { FiMessageSquare } from "react-icons/fi";
+import { MdOutlineTask } from "react-icons/md";
import type { TaskInstanceResponse } from "openapi/requests/types.gen";
import { ClearTaskInstanceButton } from "src/components/Clear";
+import DisplayMarkdownButton from "src/components/DisplayMarkdownButton";
import { Stat } from "src/components/Stat";
import Time from "src/components/Time";
import { Status } from "src/components/ui";
@@ -40,16 +42,18 @@ export const Header = ({ taskInstance }: { readonly
taskInstance: TaskInstanceRe
<div />
</Flex>
</HStack>
- <ClearTaskInstanceButton taskInstance={taskInstance} />
+ <HStack>
+ {taskInstance.note === null || taskInstance.note.length === 0 ?
undefined : (
+ <DisplayMarkdownButton
+ header="Task Instance Note"
+ icon={<FiMessageSquare color="black" />}
+ mdContent={taskInstance.note}
+ text="Note"
+ />
+ )}
+ <ClearTaskInstanceButton taskInstance={taskInstance} />
+ </HStack>
</Flex>
- {taskInstance.note === null || taskInstance.note.length === 0 ? undefined
: (
- <Flex alignItems="flex-start" justifyContent="space-between" mr={16}>
- <MdOutlineModeComment size="3rem" />
- <Text fontSize="sm" ml={3}>
- {taskInstance.note}
- </Text>
- </Flex>
- )}
<SimpleGrid columns={6} gap={4} my={2}>
<Stat label="Operator">{taskInstance.operator}</Stat>
{taskInstance.map_index > -1 ? (
