This is an automated email from the ASF dual-hosted git repository.
kaxilnaik pushed a commit to branch v3-1-test
in repository https://gitbox.apache.org/repos/asf/airflow.git
The following commit(s) were added to refs/heads/v3-1-test by this push:
new af124b68154 Update recent runs bar chart and improve responsiveness
(#56314)
af124b68154 is described below
commit af124b681543227c893bb64c0dc865bc04bb9726
Author: Brent Bovenzi <[email protected]>
AuthorDate: Thu Oct 2 10:28:19 2025 -0400
Update recent runs bar chart and improve responsiveness (#56314)
(cherry picked from commit 391025461ec86d8f77c47eeb72964b47591213b2)
---
.../airflow/ui/src/pages/DagsList/RecentRuns.tsx | 25 +++++++++++++---------
.../Dashboard/FavoriteDags/FavoriteDagCard.tsx | 5 ++---
.../pages/Dashboard/FavoriteDags/FavoriteDags.tsx | 6 +++---
.../airflow/ui/src/pages/Dashboard/Stats/Stats.tsx | 6 +++---
4 files changed, 23 insertions(+), 19 deletions(-)
diff --git a/airflow-core/src/airflow/ui/src/pages/DagsList/RecentRuns.tsx
b/airflow-core/src/airflow/ui/src/pages/DagsList/RecentRuns.tsx
index d52ca59f536..8048e5182d0 100644
--- a/airflow-core/src/airflow/ui/src/pages/DagsList/RecentRuns.tsx
+++ b/airflow-core/src/airflow/ui/src/pages/DagsList/RecentRuns.tsx
@@ -23,6 +23,7 @@ import { useTranslation } from "react-i18next";
import { Link } from "react-router-dom";
import type { DAGWithLatestDagRunsResponse } from "openapi/requests/types.gen";
+import { StateIcon } from "src/components/StateIcon";
import Time from "src/components/Time";
import { Tooltip } from "src/components/ui";
import { renderDuration } from "src/utils";
@@ -48,7 +49,7 @@ export const RecentRuns = ({
);
return (
- <Flex alignItems="flex-end" flexDirection="row-reverse" pb={1}>
+ <Flex alignItems="flex-end" flexDirection="row-reverse" gap={[0.5, 0.5,
0.5, 1]} pb={1}>
{latestRuns.map((run) => (
<Tooltip
content={
@@ -84,15 +85,19 @@ export const RecentRuns = ({
}}
>
<Link to={`/dags/${run.dag_id}/runs/${run.dag_run_id}/`}>
- <Box px={1}>
- <Box
- bg={`${run.state}.solid`}
- borderRadius="4px"
- height={`${run.duration === null ? 1 : (run.duration / max) *
BAR_HEIGHT}px`}
- minHeight={1}
- width="4px"
- />
- </Box>
+ <Flex
+ alignItems="center"
+ bg={`${run.state}.solid`}
+ borderRadius="4px"
+ flexDir="column"
+ fontSize="12px"
+ height={`${run.duration === null ? 1 : (run.duration / max) *
BAR_HEIGHT}px`}
+ justifyContent="flex-end"
+ minHeight="12px"
+ width="12px"
+ >
+ <StateIcon color="white" state={run.state} />
+ </Flex>
</Link>
</Tooltip>
))}
diff --git
a/airflow-core/src/airflow/ui/src/pages/Dashboard/FavoriteDags/FavoriteDagCard.tsx
b/airflow-core/src/airflow/ui/src/pages/Dashboard/FavoriteDags/FavoriteDagCard.tsx
index 964be0a41bc..85c5cba3223 100644
---
a/airflow-core/src/airflow/ui/src/pages/Dashboard/FavoriteDags/FavoriteDagCard.tsx
+++
b/airflow-core/src/airflow/ui/src/pages/Dashboard/FavoriteDags/FavoriteDagCard.tsx
@@ -38,14 +38,13 @@ export const FavoriteDagCard = ({ dagId, dagName,
latestRuns }: FavoriteDagProps
borderWidth="1px"
display="flex"
flexDirection="column"
- height="100%"
justifyContent="center"
+ maxWidth="200px"
overflow="hidden"
px={4}
py={3}
- width="100%"
>
- <VStack>
+ <VStack gap={0}>
{latestRuns.length > 0 ? (
<RecentRuns latestRuns={latestRuns} />
) : (
diff --git
a/airflow-core/src/airflow/ui/src/pages/Dashboard/FavoriteDags/FavoriteDags.tsx
b/airflow-core/src/airflow/ui/src/pages/Dashboard/FavoriteDags/FavoriteDags.tsx
index e17b111f5dd..4451cd88b96 100644
---
a/airflow-core/src/airflow/ui/src/pages/Dashboard/FavoriteDags/FavoriteDags.tsx
+++
b/airflow-core/src/airflow/ui/src/pages/Dashboard/FavoriteDags/FavoriteDags.tsx
@@ -16,7 +16,7 @@
* specific language governing permissions and limitations
* under the License.
*/
-import { Box, Flex, Heading, SimpleGrid, Text } from "@chakra-ui/react";
+import { Box, Flex, Heading, Text } from "@chakra-ui/react";
import { useTranslation } from "react-i18next";
import { FiStar } from "react-icons/fi";
@@ -47,7 +47,7 @@ export const FavoriteDags = () => {
{translate("favorite.noFavoriteDags")}
</Text>
) : (
- <SimpleGrid alignItems="end" columnGap={1} columns={10} rowGap={4}>
+ <Flex flexWrap="wrap" gap={2}>
{favorites.dags.map((dag) => (
<FavoriteDagCard
dagId={dag.dag_id}
@@ -56,7 +56,7 @@ export const FavoriteDags = () => {
latestRuns={dag.latest_dag_runs}
/>
))}
- </SimpleGrid>
+ </Flex>
)}
</Box>
);
diff --git a/airflow-core/src/airflow/ui/src/pages/Dashboard/Stats/Stats.tsx
b/airflow-core/src/airflow/ui/src/pages/Dashboard/Stats/Stats.tsx
index e1027f050b5..4192ad7b886 100644
--- a/airflow-core/src/airflow/ui/src/pages/Dashboard/Stats/Stats.tsx
+++ b/airflow-core/src/airflow/ui/src/pages/Dashboard/Stats/Stats.tsx
@@ -16,7 +16,7 @@
* specific language governing permissions and limitations
* under the License.
*/
-import { Box, Flex, Heading, HStack } from "@chakra-ui/react";
+import { Box, Flex, Heading } from "@chakra-ui/react";
import { useTranslation } from "react-i18next";
import { FiClipboard, FiZap } from "react-icons/fi";
@@ -51,7 +51,7 @@ export const Stats = () => {
</Heading>
</Flex>
- <HStack gap={4}>
+ <Flex flexWrap="wrap" gap={4}>
<NeedsReviewButton />
<StatsCard
@@ -99,7 +99,7 @@ export const Stats = () => {
label={translate("stats.activeDags")}
link="dags?paused=false"
/>
- </HStack>
+ </Flex>
</Box>
);
};
