You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@airflow.apache.org by "bbovenzi (via GitHub)" <gi...@apache.org> on 2025/02/20 20:12:55 UTC
[PR] Rearrange Dag details view [airflow]
bbovenzi opened a new pull request, #46939:
URL: https://github.com/apache/airflow/pull/46939
Problem:
- The Dag Details page layered information in too many separate pages that required too many clicks to navigate around. Especially if one went to the graph or grid modal and then closed it
Solution:
- "Flatten" the dag details page with three elements:
1. An improved breadcrumb header. Includes a header for each level. For a dag shows if it is paused or unpaused. For a dag run, shows its state. Always show the Trigger Run button
2. A left hand panel to navigate around a dag. The user can select either the grid or graph and can adjust the size of the panel to what works for them. We check the dag's `default_view` value and then persists the panel width and view selection in localStorage by dagId
3. A right hand panel to show details depending on what level the user has selected (Dag, Dag Run, Task, Task Instance, or Mapped Task Instance). This panel is responsive, so it should display useful information at any size.
<img width="1328" alt="Screenshot 2025-02-20 at 2 56 09 PM" src="https://github.com/user-attachments/assets/699a247f-34a8-4dd9-9b39-c78d0afc476b" />
<img width="1336" alt="Screenshot 2025-02-20 at 2 56 19 PM" src="https://github.com/user-attachments/assets/d23f1c6a-c15a-49cd-844a-d8dced11e482" />
<img width="1310" alt="Screenshot 2025-02-20 at 2 56 44 PM" src="https://github.com/user-attachments/assets/4850822a-3788-4b1b-ab66-80538dc75c51" />
<img width="670" alt="Screenshot 2025-02-20 at 2 57 27 PM" src="https://github.com/user-attachments/assets/ce2a26da-4070-4caa-8ed1-b8b5309495ba" />
Other features:
- Add state icons to the Grid view. Apply an opacity to successful tasks to make it easier to spot errant instances
- Truncate very long task ids in the task instances list so you don't have to scroll for forever
To Do in other PRs:
- Collapse/Expand all groups toggle
- Quick navigation between dag runs (Either by turning the dag run breacrumb into a dropdown or adding onto the Search Dags input)
- Handle selecting a mapped task instance without a map_index specified
- Zoom the graph to a selected task
- Grid/graph view filters
- Integrate gantt view
---
**^ Add meaningful description above**
Read the **[Pull Request Guidelines](https://github.com/apache/airflow/blob/main/contributing-docs/05_pull_requests.rst#pull-request-guidelines)** for more information.
In case of fundamental code changes, an Airflow Improvement Proposal ([AIP](https://cwiki.apache.org/confluence/display/AIRFLOW/Airflow+Improvement+Proposals)) is needed.
In case of a new dependency, check compliance with the [ASF 3rd Party License Policy](https://www.apache.org/legal/resolved.html#category-x).
In case of backwards incompatible changes please leave a note in a newsfragment file, named `{pr_number}.significant.rst` or `{issue_number}.significant.rst`, in [newsfragments](https://github.com/apache/airflow/tree/main/newsfragments).
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: commits-unsubscribe@airflow.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
Re: [PR] Rearrange Dag details view [airflow]
Posted by "bbovenzi (via GitHub)" <gi...@apache.org>.
bbovenzi commented on PR #46939:
URL: https://github.com/apache/airflow/pull/46939#issuecomment-2675299393
> Thanks @bbovenzi .
Did you play with resizing the panels? When this is merged. I think we'll need to fix our duration charts to stay a consistent size.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: commits-unsubscribe@airflow.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
Re: [PR] Rearrange Dag details view [airflow]
Posted by "bbovenzi (via GitHub)" <gi...@apache.org>.
bbovenzi commented on PR #46939:
URL: https://github.com/apache/airflow/pull/46939#issuecomment-2672651639
> Very cool.
>
> One nit and... I started with Firefox on Ubuntu and the grid somehow does not populate. Is this a bug? 
Are there any errors in the console? And if you look in the network tab for `/ui/grid/`, does it exist and is there a response?
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: commits-unsubscribe@airflow.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
Re: [PR] Rearrange Dag details view [airflow]
Posted by "tirkarthi (via GitHub)" <gi...@apache.org>.
tirkarthi commented on PR #46939:
URL: https://github.com/apache/airflow/pull/46939#issuecomment-2675382303
> > Thanks @bbovenzi .
>
> Did you play with resizing the panels? When this is merged. I think we'll need to fix our duration charts to stay a consistent size.
Yes, the x axis names didn't fit the chart and the chart was also compressed on smaller spaces not being very responsive. IIRC initially there was design to have 3 charts as a grid with remaining 2 charts requiring API for grouping and other idea to have a calendar/heatmap view of the task durations. Maybe on resize they can become a chart per row or to have the duration chart as the only chart for now till the other charts are finalized.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: commits-unsubscribe@airflow.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
Re: [PR] Rearrange Dag details view [airflow]
Posted by "jscheffl (via GitHub)" <gi...@apache.org>.
jscheffl commented on PR #46939:
URL: https://github.com/apache/airflow/pull/46939#issuecomment-2672663045
> > Are there any errors in the console? And if you look in the network tab for `http://localhost:29091/ui/grid/{dag_id}?offset=0&limit=14&order_by=-run_after`, does it exist and is there a response?
A different DAG is working better:
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: commits-unsubscribe@airflow.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
Re: [PR] Rearrange Dag details view [airflow]
Posted by "bbovenzi (via GitHub)" <gi...@apache.org>.
bbovenzi commented on PR #46939:
URL: https://github.com/apache/airflow/pull/46939#issuecomment-2672669356
> Ah, you are right... HTTP 500: ![image](https://private-user-images.githubusercontent.com/95105677/415363640-
I tried the same dag and could replicate. But this is a bug on main, not due to changes to this branch.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: commits-unsubscribe@airflow.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
Re: [PR] Rearrange Dag details view [airflow]
Posted by "bbovenzi (via GitHub)" <gi...@apache.org>.
bbovenzi commented on code in PR #46939:
URL: https://github.com/apache/airflow/pull/46939#discussion_r1970518518
##########
airflow/ui/src/components/TruncatedText.tsx:
##########
@@ -0,0 +1,33 @@
+/*!
+ * 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 { Text, type TextProps } from "@chakra-ui/react";
+
+type Props = {
+ readonly text: string;
+} & TextProps;
+
+export const TruncatedText = ({ text, ...rest }: Props) => {
+ const truncatedText = text.length <= 25 ? text : `…${text.slice(-22)}`;
Review Comment:
The intention here was that task groups often make the name long so I'd prefer to show the end of a task name over the beginning
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: commits-unsubscribe@airflow.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
Re: [PR] Rearrange Dag details view [airflow]
Posted by "bbovenzi (via GitHub)" <gi...@apache.org>.
bbovenzi merged PR #46939:
URL: https://github.com/apache/airflow/pull/46939
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: commits-unsubscribe@airflow.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
Re: [PR] Rearrange Dag details view [airflow]
Posted by "jscheffl (via GitHub)" <gi...@apache.org>.
jscheffl commented on code in PR #46939:
URL: https://github.com/apache/airflow/pull/46939#discussion_r1964304823
##########
airflow/ui/src/components/TruncatedText.tsx:
##########
@@ -0,0 +1,33 @@
+/*!
+ * 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 { Text, type TextProps } from "@chakra-ui/react";
+
+type Props = {
+ readonly text: string;
+} & TextProps;
+
+export const TruncatedText = ({ text, ...rest }: Props) => {
+ const truncatedText = text.length <= 25 ? text : `…${text.slice(-22)}`;
Review Comment:
Should the three dots not rather be at the end?
```suggestion
const truncatedText = text.length <= 25 ? text : `${text.slice(-22)}…`;
```
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: commits-unsubscribe@airflow.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
Re: [PR] Rearrange Dag details view [airflow]
Posted by "tirkarthi (via GitHub)" <gi...@apache.org>.
tirkarthi commented on PR #46939:
URL: https://github.com/apache/airflow/pull/46939#issuecomment-2674983057
Thanks for bringing back the grid view. I tried the PR locally. Couple of suggestions from my end.
1. The presence of titles dag, dag run, etc makes the breadcrumb little misaligned at first look personally. The Airflow 2 UI doesn't have titles and I think it will be good to remove them making the breadcrumb cleaner.
2. There could be a minimum width to the panel. Scrolling all the way to left causes the grid to render above task ids. Airflow 2 had some minimum width
3. There could be a full screen button for each panel so that views like graph and right panel can be toggled to utilize the full screen space. Airflow 2 had feature where one can click on a dagrun, select full screen to have only the column and go through all the details in the right pane for the dagrun.
4. Trigger dag doesn't refresh the grid. Clearing a run and marking the dagrun updates the breadcrumb but grid is not refreshed.
5. Next run after and schedule value being always displayed in the top right was useful in Airflow 2 irrespective of the view. This seems to be present only on selecting the dag page.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: commits-unsubscribe@airflow.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
Re: [PR] Rearrange Dag details view [airflow]
Posted by "tirkarthi (via GitHub)" <gi...@apache.org>.
tirkarthi commented on code in PR #46939:
URL: https://github.com/apache/airflow/pull/46939#discussion_r1970181124
##########
airflow/ui/src/components/HeaderCard.tsx:
##########
@@ -0,0 +1,94 @@
+/*!
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership. The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import { Box, Flex, GridItem, Heading, HStack, SimpleGrid, Spinner } from "@chakra-ui/react";
+import { type ReactNode, useRef } from "react";
+import { FiMessageSquare } from "react-icons/fi";
+
+import type { TaskInstanceState } from "openapi/requests/types.gen";
+import DisplayMarkdownButton from "src/components/DisplayMarkdownButton";
+import { Stat } from "src/components/Stat";
+import { StateBadge } from "src/components/StateBadge";
+import { useContainerWidth } from "src/utils";
+
+const getColumnCount = (width: number) => {
+ if (width < 400) {
+ return 2;
+ }
+ if (width < 800) {
+ return 4;
+ }
+ if (width < 1000) {
+ return 6;
+ }
+
+ return 8;
+};
+
+type Props = {
+ readonly actions?: ReactNode;
+ readonly icon: ReactNode;
+ readonly isRefreshing?: boolean;
+ readonly note?: string | null;
+ readonly state?: TaskInstanceState | null;
+ readonly stats: Array<{ label: string; value: ReactNode | string }>;
+ readonly subTitle?: ReactNode | string;
+ readonly title: ReactNode | string;
+};
+
+export const HeaderCard = ({ actions, icon, isRefreshing, note, state, stats, subTitle, title }: Props) => {
+ const containerRef = useRef<HTMLDivElement>();
+ const containerWidth = useContainerWidth(containerRef);
+
+ return (
+ <Box borderColor="border" borderRadius={8} borderWidth={1} m={2} p={2} ref={containerRef}>
+ <Flex alignItems="center" flexWrap="wrap" justifyContent="space-between" mb={2}>
+ <Flex alignItems="center" flexWrap="wrap" gap={2}>
+ <Heading size="xl">{icon}</Heading>
+ <Heading size="lg">{title}</Heading>
+ <Heading size="lg">{subTitle}</Heading>
+ {state === undefined ? undefined : <StateBadge state={state}>{state}</StateBadge>}
+ {isRefreshing ? <Spinner /> : <div />}
+ </Flex>
+ <HStack gap={1}>
+ {note === null || note === undefined || note.length === 0 ? undefined : (
+ <DisplayMarkdownButton
+ header="Task Instance Note"
+ icon={<FiMessageSquare color="black" />}
+ mdContent={note}
+ text="Note"
+ />
+ )}
+ {actions}
Review Comment:
I noticed the same before this PR too in main. As per my understanding the 4 leading spaces in docstring doesn't seem to be removed as per the API response and 4 spaces makes markdown wrap it in a code block.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: commits-unsubscribe@airflow.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
Re: [PR] Rearrange Dag details view [airflow]
Posted by "tirkarthi (via GitHub)" <gi...@apache.org>.
tirkarthi commented on PR #46939:
URL: https://github.com/apache/airflow/pull/46939#issuecomment-2675293504
Thanks @bbovenzi .
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: commits-unsubscribe@airflow.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
Re: [PR] Rearrange Dag details view [airflow]
Posted by "pierrejeambrun (via GitHub)" <gi...@apache.org>.
pierrejeambrun commented on code in PR #46939:
URL: https://github.com/apache/airflow/pull/46939#discussion_r1968105220
##########
airflow/ui/src/components/HeaderCard.tsx:
##########
@@ -0,0 +1,94 @@
+/*!
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership. The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import { Box, Flex, GridItem, Heading, HStack, SimpleGrid, Spinner } from "@chakra-ui/react";
+import { type ReactNode, useRef } from "react";
+import { FiMessageSquare } from "react-icons/fi";
+
+import type { TaskInstanceState } from "openapi/requests/types.gen";
+import DisplayMarkdownButton from "src/components/DisplayMarkdownButton";
+import { Stat } from "src/components/Stat";
+import { StateBadge } from "src/components/StateBadge";
+import { useContainerWidth } from "src/utils";
+
+const getColumnCount = (width: number) => {
+ if (width < 400) {
+ return 2;
+ }
+ if (width < 800) {
+ return 4;
+ }
+ if (width < 1000) {
+ return 6;
+ }
+
+ return 8;
+};
+
+type Props = {
+ readonly actions?: ReactNode;
+ readonly icon: ReactNode;
+ readonly isRefreshing?: boolean;
+ readonly note?: string | null;
+ readonly state?: TaskInstanceState | null;
+ readonly stats: Array<{ label: string; value: ReactNode | string }>;
+ readonly subTitle?: ReactNode | string;
+ readonly title: ReactNode | string;
+};
+
+export const HeaderCard = ({ actions, icon, isRefreshing, note, state, stats, subTitle, title }: Props) => {
+ const containerRef = useRef<HTMLDivElement>();
+ const containerWidth = useContainerWidth(containerRef);
+
+ return (
+ <Box borderColor="border" borderRadius={8} borderWidth={1} m={2} p={2} ref={containerRef}>
+ <Flex alignItems="center" flexWrap="wrap" justifyContent="space-between" mb={2}>
+ <Flex alignItems="center" flexWrap="wrap" gap={2}>
+ <Heading size="xl">{icon}</Heading>
+ <Heading size="lg">{title}</Heading>
+ <Heading size="lg">{subTitle}</Heading>
+ {state === undefined ? undefined : <StateBadge state={state}>{state}</StateBadge>}
+ {isRefreshing ? <Spinner /> : <div />}
+ </Flex>
+ <HStack gap={1}>
+ {note === null || note === undefined || note.length === 0 ? undefined : (
+ <DisplayMarkdownButton
+ header="Task Instance Note"
+ icon={<FiMessageSquare color="black" />}
+ mdContent={note}
+ text="Note"
+ />
+ )}
+ {actions}
Review Comment:
This breaks the dag documentation I think. (That's a Dag Documentation, not a Task Note, and the markdown rendering seems off)
##########
airflow/ui/src/layouts/Details/NavTabs.tsx:
##########
@@ -17,50 +17,52 @@
* under the License.
*/
import { Center, Flex } from "@chakra-ui/react";
-import type { ReactNode } from "react";
+import { useRef, type ReactNode } from "react";
import { NavLink, useSearchParams } from "react-router-dom";
+import { useContainerWidth } from "src/utils";
+
type Props = {
readonly keepSearch?: boolean;
- readonly rightButtons?: ReactNode;
- readonly tabs: Array<{ label: string; value: string }>;
+ readonly tabs: Array<{ icon?: ReactNode; label: string; value: string }>;
};
-export const NavTabs = ({ keepSearch, rightButtons, tabs }: Props) => {
+export const NavTabs = ({ keepSearch, tabs }: Props) => {
const [searchParams] = useSearchParams();
+ const containerRef = useRef<HTMLDivElement>(null);
+ const containerWidth = useContainerWidth(containerRef);
+
return (
- <Flex alignItems="center" borderBottomWidth={1} justifyContent="space-between" mb={2}>
- <Flex>
- {tabs.map(({ label, value }) => (
- <NavLink
- end
- key={value}
- to={{
- pathname: value,
- // Preserve search params when navigating
- search: keepSearch ? searchParams.toString() : undefined,
- }}
- >
- {({ isActive }) => (
- <Center
- borderBottomColor="border.info"
- borderBottomWidth={isActive ? 3 : 0}
- color={isActive ? "fg" : "fg.muted"}
- fontWeight="bold"
- height="40px"
- mb="-2px" // Show the border on top of its parent's border
- pb={isActive ? 0 : "3px"}
- px={4}
- transition="all 0.2s ease"
- >
- {label}
- </Center>
- )}
- </NavLink>
- ))}
- </Flex>
- <Flex alignSelf="flex-end">{rightButtons}</Flex>
+ <Flex alignItems="center" borderBottomWidth={1} mb={2} ref={containerRef}>
+ {tabs.map(({ icon, label, value }) => (
+ <NavLink
+ end
+ key={value}
+ title={label}
+ to={{
+ pathname: value,
+ // Preserve search params when navigating
+ search: keepSearch ? searchParams.toString() : undefined,
+ }}
+ >
+ {({ isActive }) => (
+ <Center
+ borderBottomColor="border.info"
+ borderBottomWidth={isActive ? 3 : 0}
+ color={isActive ? "fg" : "fg.muted"}
+ fontWeight="bold"
+ height="40px"
+ mb="-2px" // Show the border on top of its parent's border
+ pb={isActive ? 0 : "3px"}
+ px={4}
+ transition="all 0.2s ease"
+ >
+ {containerWidth > 600 || !Boolean(icon) ? label : icon}
Review Comment:
Nice !
##########
airflow/ui/src/pages/Run/Header.tsx:
##########
@@ -36,44 +34,39 @@ export const Header = ({
readonly dagRun: DAGRunResponse;
readonly isRefreshing?: boolean;
}) => (
- <Box borderColor="border" borderRadius={8} borderWidth={1} p={2}>
- <Flex alignItems="center" justifyContent="space-between" mb={2}>
- <HStack alignItems="center" gap={2}>
- <FiBarChart size="1.75rem" />
- <Heading size="lg">
- <strong>Run: </strong>
- {dagRun.dag_run_id}
- </Heading>
- <StateBadge state={dagRun.state}>{dagRun.state}</StateBadge>
- {isRefreshing ? <Spinner /> : <div />}
- </HStack>
- <HStack>
- {dagRun.note === null || dagRun.note.length === 0 ? undefined : (
- <DisplayMarkdownButton
- header="Dag Run Note"
- icon={<FiMessageSquare color="black" />}
- mdContent={dagRun.note}
- text="Note"
- />
- )}
+ <HeaderCard
+ actions={
+ <>
<ClearRunButton dagRun={dagRun} />
<MarkRunAsButton dagRun={dagRun} />
- </HStack>
- </Flex>
- <SimpleGrid columns={4} gap={4}>
- <Stat label="Run Type">
- <HStack>
- <RunTypeIcon runType={dagRun.run_type} />
- <Text>{dagRun.run_type}</Text>
- </HStack>
- </Stat>
- <Stat label="Start">
- <Time datetime={dagRun.start_date} />
- </Stat>
- <Stat label="End">
- <Time datetime={dagRun.end_date} />
- </Stat>
- <Stat label="Duration">{getDuration(dagRun.start_date, dagRun.end_date)}s</Stat>
- </SimpleGrid>
- </Box>
+ </>
+ }
+ icon={<FiBarChart />}
+ isRefreshing={isRefreshing}
+ note={dagRun.note}
+ state={dagRun.state}
+ stats={[
+ ...(dagRun.logical_date === null
+ ? []
+ : [
+ {
+ label: "Logical Date",
+ value: <Time datetime={dagRun.logical_date} />,
+ },
+ ]),
+ {
+ label: "Run Type",
+ value: (
+ <HStack>
+ <RunTypeIcon runType={dagRun.run_type} />
+ <Text>{dagRun.run_type}</Text>
+ </HStack>
+ ),
+ },
+ { label: "Start", value: <Time datetime={dagRun.start_date} /> },
+ { label: "End", value: <Time datetime={dagRun.end_date} /> },
+ { label: "Duration", value: `${getDuration(dagRun.start_date, dagRun.end_date)}s` },
Review Comment:
I don't think date should wrap like this when we have space to inline them.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: commits-unsubscribe@airflow.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
Re: [PR] Rearrange Dag details view [airflow]
Posted by "bbovenzi (via GitHub)" <gi...@apache.org>.
bbovenzi commented on code in PR #46939:
URL: https://github.com/apache/airflow/pull/46939#discussion_r1970517739
##########
airflow/ui/src/pages/Run/Header.tsx:
##########
@@ -36,44 +34,39 @@ export const Header = ({
readonly dagRun: DAGRunResponse;
readonly isRefreshing?: boolean;
}) => (
- <Box borderColor="border" borderRadius={8} borderWidth={1} p={2}>
- <Flex alignItems="center" justifyContent="space-between" mb={2}>
- <HStack alignItems="center" gap={2}>
- <FiBarChart size="1.75rem" />
- <Heading size="lg">
- <strong>Run: </strong>
- {dagRun.dag_run_id}
- </Heading>
- <StateBadge state={dagRun.state}>{dagRun.state}</StateBadge>
- {isRefreshing ? <Spinner /> : <div />}
- </HStack>
- <HStack>
- {dagRun.note === null || dagRun.note.length === 0 ? undefined : (
- <DisplayMarkdownButton
- header="Dag Run Note"
- icon={<FiMessageSquare color="black" />}
- mdContent={dagRun.note}
- text="Note"
- />
- )}
+ <HeaderCard
+ actions={
+ <>
<ClearRunButton dagRun={dagRun} />
<MarkRunAsButton dagRun={dagRun} />
- </HStack>
- </Flex>
- <SimpleGrid columns={4} gap={4}>
- <Stat label="Run Type">
- <HStack>
- <RunTypeIcon runType={dagRun.run_type} />
- <Text>{dagRun.run_type}</Text>
- </HStack>
- </Stat>
- <Stat label="Start">
- <Time datetime={dagRun.start_date} />
- </Stat>
- <Stat label="End">
- <Time datetime={dagRun.end_date} />
- </Stat>
- <Stat label="Duration">{getDuration(dagRun.start_date, dagRun.end_date)}s</Stat>
- </SimpleGrid>
- </Box>
+ </>
+ }
+ icon={<FiBarChart />}
+ isRefreshing={isRefreshing}
+ note={dagRun.note}
+ state={dagRun.state}
+ stats={[
+ ...(dagRun.logical_date === null
+ ? []
+ : [
+ {
+ label: "Logical Date",
+ value: <Time datetime={dagRun.logical_date} />,
+ },
+ ]),
+ {
+ label: "Run Type",
+ value: (
+ <HStack>
+ <RunTypeIcon runType={dagRun.run_type} />
+ <Text>{dagRun.run_type}</Text>
+ </HStack>
+ ),
+ },
+ { label: "Start", value: <Time datetime={dagRun.start_date} /> },
+ { label: "End", value: <Time datetime={dagRun.end_date} /> },
+ { label: "Duration", value: `${getDuration(dagRun.start_date, dagRun.end_date)}s` },
Review Comment:
Will update in a later pr
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: commits-unsubscribe@airflow.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
Re: [PR] Rearrange Dag details view [airflow]
Posted by "bbovenzi (via GitHub)" <gi...@apache.org>.
bbovenzi commented on PR #46939:
URL: https://github.com/apache/airflow/pull/46939#issuecomment-2675236172
> Thanks for bringing back the grid view. I tried the PR locally. Couple of suggestions from my end.
>
> 1. The presence of titles dag, dag run, etc makes the breadcrumb little misaligned at first look personally. The Airflow 2 UI doesn't have titles and I think it will be good to remove them making the breadcrumb cleaner.
> 2. There could be a minimum width to the panel. Scrolling all the way to left causes the grid to render above task ids. Airflow 2 had some minimum width
> 3. There could be a full screen button for each panel so that views like graph and right panel can be toggled to utilize the full screen space. Airflow 2 had feature where one can click on a dagrun, select full screen to have only the column and go through all the details in the right pane for the dagrun.
> 4. Trigger dag doesn't refresh the grid. Clearing a run and marking the dagrun updates the breadcrumb but grid is not refreshed.
> 5. Next run after and schedule value being always displayed in the top right was useful in Airflow 2 irrespective of the view. This seems to be present only on selecting the dag page.
> 6. Task instance state color legend could also be presented.
1. I was back and forth on this one. I heard a lot of comments from users that they didn't know what the breadcrumbs were so I wanted to figure out some way to make it more obvious.
2. Yes, I noticed that overflow. Its on my to-do list.
3. Yes, I think I'll do full screen in a follow up PR. This one was already getting big.
4. That is a bug I need to fix.
5. Hmm let me figure out where that could fit in the page. Not going to be for this PR.
6. Yes, in a follow up PR we will need a legend for task instance state icon+color
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: commits-unsubscribe@airflow.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
Re: [PR] Rearrange Dag details view [airflow]
Posted by "jscheffl (via GitHub)" <gi...@apache.org>.
jscheffl commented on PR #46939:
URL: https://github.com/apache/airflow/pull/46939#issuecomment-2672659983
> Are there any errors in the console? And if you look in the network tab for `http://localhost:29091/ui/grid/{dag_id}?offset=0&limit=14&order_by=-run_after`, does it exist and is there a response?
Ah, you are right... HTTP 500:
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: commits-unsubscribe@airflow.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
Re: [PR] Rearrange Dag details view [airflow]
Posted by "bbovenzi (via GitHub)" <gi...@apache.org>.
bbovenzi commented on PR #46939:
URL: https://github.com/apache/airflow/pull/46939#issuecomment-2682638803
> > The presence of titles dag, dag run, etc makes the breadcrumb little misaligned at first look personally. The Airflow 2 UI doesn't have titles and I think it will be good to remove them making the breadcrumb cleaner.
>
> How about reducing the line height on the breadcrumb label:
>
Does this work for you?
<img width="590" alt="Screenshot 2025-02-25 at 11 49 15 AM" src="https://github.com/user-attachments/assets/e284f991-fafb-4b07-af08-be21d5e2f545" />
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: commits-unsubscribe@airflow.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
Re: [PR] Rearrange Dag details view [airflow]
Posted by "ashb (via GitHub)" <gi...@apache.org>.
ashb commented on PR #46939:
URL: https://github.com/apache/airflow/pull/46939#issuecomment-2682791072
Looks good. I think lets not sweat the small details too much in this PR; lets get this in for the first Beta as it's such a massive UX improvement over what is there right now!
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: commits-unsubscribe@airflow.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
Re: [PR] Rearrange Dag details view [airflow]
Posted by "bbovenzi (via GitHub)" <gi...@apache.org>.
bbovenzi commented on code in PR #46939:
URL: https://github.com/apache/airflow/pull/46939#discussion_r1970362320
##########
airflow/ui/src/components/HeaderCard.tsx:
##########
@@ -0,0 +1,94 @@
+/*!
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership. The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import { Box, Flex, GridItem, Heading, HStack, SimpleGrid, Spinner } from "@chakra-ui/react";
+import { type ReactNode, useRef } from "react";
+import { FiMessageSquare } from "react-icons/fi";
+
+import type { TaskInstanceState } from "openapi/requests/types.gen";
+import DisplayMarkdownButton from "src/components/DisplayMarkdownButton";
+import { Stat } from "src/components/Stat";
+import { StateBadge } from "src/components/StateBadge";
+import { useContainerWidth } from "src/utils";
+
+const getColumnCount = (width: number) => {
+ if (width < 400) {
+ return 2;
+ }
+ if (width < 800) {
+ return 4;
+ }
+ if (width < 1000) {
+ return 6;
+ }
+
+ return 8;
+};
+
+type Props = {
+ readonly actions?: ReactNode;
+ readonly icon: ReactNode;
+ readonly isRefreshing?: boolean;
+ readonly note?: string | null;
+ readonly state?: TaskInstanceState | null;
+ readonly stats: Array<{ label: string; value: ReactNode | string }>;
+ readonly subTitle?: ReactNode | string;
+ readonly title: ReactNode | string;
+};
+
+export const HeaderCard = ({ actions, icon, isRefreshing, note, state, stats, subTitle, title }: Props) => {
+ const containerRef = useRef<HTMLDivElement>();
+ const containerWidth = useContainerWidth(containerRef);
+
+ return (
+ <Box borderColor="border" borderRadius={8} borderWidth={1} m={2} p={2} ref={containerRef}>
+ <Flex alignItems="center" flexWrap="wrap" justifyContent="space-between" mb={2}>
+ <Flex alignItems="center" flexWrap="wrap" gap={2}>
+ <Heading size="xl">{icon}</Heading>
+ <Heading size="lg">{title}</Heading>
+ <Heading size="lg">{subTitle}</Heading>
+ {state === undefined ? undefined : <StateBadge state={state}>{state}</StateBadge>}
+ {isRefreshing ? <Spinner /> : <div />}
+ </Flex>
+ <HStack gap={1}>
+ {note === null || note === undefined || note.length === 0 ? undefined : (
+ <DisplayMarkdownButton
+ header="Task Instance Note"
+ icon={<FiMessageSquare color="black" />}
+ mdContent={note}
+ text="Note"
+ />
+ )}
+ {actions}
Review Comment:
Good catch. I fixed the button, not the modal rendering. I also added Task level docs
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: commits-unsubscribe@airflow.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
Re: [PR] Rearrange Dag details view [airflow]
Posted by "bbovenzi (via GitHub)" <gi...@apache.org>.
bbovenzi commented on PR #46939:
URL: https://github.com/apache/airflow/pull/46939#issuecomment-2683146200
> Looks good. I think lets not sweat the small details too much in this PR; lets get this in for the first Beta as it's such a massive UX improvement over what is there right now!
Agreed. I think its important to get this major change in. We'll get more feedback and can keep improving it. I don't want to leave this open for a week because I'm fiddling with css details here and there.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: commits-unsubscribe@airflow.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
Re: [PR] Rearrange Dag details view [airflow]
Posted by "ashb (via GitHub)" <gi...@apache.org>.
ashb commented on PR #46939:
URL: https://github.com/apache/airflow/pull/46939#issuecomment-2677971100
> The presence of titles dag, dag run, etc makes the breadcrumb little misaligned at first look personally. The Airflow 2 UI doesn't have titles and I think it will be good to remove them making the breadcrumb cleaner.
How about reducing the line height on the breadcrumb label:
Current
<img width="459" alt="Screenshot 2025-02-24 at 10 07 52" src="https://github.com/user-attachments/assets/280a4867-1f19-4e1f-b0f7-4e0381a682d2" />
Reduced height
<img width="531" alt="Screenshot 2025-02-24 at 10 07 32" src="https://github.com/user-attachments/assets/99f72923-17f5-4e50-80ce-cd0f3fa7cae5" />
(I also noticed that the height of the Task one doesn't match the DAG and Dag Run crumb)
Or playing with the vertical alingment of labels vs values:
<img width="409" alt="Screenshot 2025-02-24 at 10 11 54" src="https://github.com/user-attachments/assets/7164ccaf-de98-4b14-870d-e96e63aae8b4" />
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: commits-unsubscribe@airflow.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org