This is an automated email from the ASF dual-hosted git repository.
bbovenzi 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 0cdd4ae1de8 Make Dag Card more responsive (#46024)
0cdd4ae1de8 is described below
commit 0cdd4ae1de8c33d635e5737e4c38045b31047e99
Author: Brent Bovenzi <[email protected]>
AuthorDate: Fri Jan 24 14:43:50 2025 -0500
Make Dag Card more responsive (#46024)
---
airflow/ui/src/components/DagRunInfo.tsx | 8 ++++----
airflow/ui/src/components/Time.tsx | 21 ++++++++++++---------
airflow/ui/src/pages/DagsList/DagCard.tsx | 4 ++--
airflow/ui/src/pages/DagsList/RecentRuns.tsx | 6 +++---
4 files changed, 21 insertions(+), 18 deletions(-)
diff --git a/airflow/ui/src/components/DagRunInfo.tsx
b/airflow/ui/src/components/DagRunInfo.tsx
index 15121eea8f9..dd5569dd45a 100644
--- a/airflow/ui/src/components/DagRunInfo.tsx
+++ b/airflow/ui/src/components/DagRunInfo.tsx
@@ -16,7 +16,7 @@
* specific language governing permissions and limitations
* under the License.
*/
-import { VStack, Text, HStack } from "@chakra-ui/react";
+import { VStack, Text, Box } from "@chakra-ui/react";
import dayjs from "dayjs";
import type { DAGRunResponse } from "openapi/requests/types.gen";
@@ -72,10 +72,10 @@ const DagRunInfo = ({
</VStack>
}
>
- <HStack fontSize="sm">
- <Time datetime={dataIntervalStart} showTooltip={false} />
+ <Box>
+ <Time datetime={dataIntervalStart} mr={2} showTooltip={false} />
{state === undefined ? undefined : <Status
state={state}>{state}</Status>}
- </HStack>
+ </Box>
</Tooltip>
) : undefined;
diff --git a/airflow/ui/src/components/Time.tsx
b/airflow/ui/src/components/Time.tsx
index dcf22cb2d01..93015d88704 100644
--- a/airflow/ui/src/components/Time.tsx
+++ b/airflow/ui/src/components/Time.tsx
@@ -16,6 +16,7 @@
* specific language governing permissions and limitations
* under the License.
*/
+import { chakra, type SpanProps } from "@chakra-ui/react";
import dayjs from "dayjs";
import advancedFormat from "dayjs/plugin/advancedFormat";
import tz from "dayjs/plugin/timezone";
@@ -35,9 +36,9 @@ type Props = {
readonly datetime?: string | null;
readonly format?: string;
readonly showTooltip?: boolean;
-};
+} & SpanProps;
-const Time = ({ datetime, format = defaultFormat, showTooltip = true }: Props)
=> {
+const Time = ({ datetime, format = defaultFormat, showTooltip = true, ...rest
}: Props) => {
const { selectedTimezone } = useTimezone();
const time = dayjs(datetime);
@@ -49,13 +50,15 @@ const Time = ({ datetime, format = defaultFormat,
showTooltip = true }: Props) =
const utcTime = time.tz("UTC").format(defaultFormatWithTZ);
return (
- <time
- dateTime={datetime}
- // show title if date is not UTC
- title={selectedTimezone.toUpperCase() !== "UTC" && showTooltip ? utcTime
: undefined}
- >
- {formattedTime}
- </time>
+ <chakra.span {...rest}>
+ <time
+ dateTime={datetime}
+ // show title if date is not UTC
+ title={selectedTimezone.toUpperCase() !== "UTC" && showTooltip ?
utcTime : undefined}
+ >
+ {formattedTime}
+ </time>
+ </chakra.span>
);
};
diff --git a/airflow/ui/src/pages/DagsList/DagCard.tsx
b/airflow/ui/src/pages/DagsList/DagCard.tsx
index c662abcbbe1..42a6d66c383 100644
--- a/airflow/ui/src/pages/DagsList/DagCard.tsx
+++ b/airflow/ui/src/pages/DagsList/DagCard.tsx
@@ -53,13 +53,13 @@ export const DagCard = ({ dag }: Props) => {
<TriggerDAGButton dag={dag} withText={false} />
</HStack>
</Flex>
- <SimpleGrid columns={4} gap={4} height={20} px={3} py={2}>
+ <SimpleGrid columns={4} gap={1} height={20} px={3}>
<Stat label="Schedule">
<Schedule dag={dag} />
</Stat>
<Stat label="Latest Run">
{latestRun ? (
- <Link asChild color="fg.info" fontSize="sm">
+ <Link asChild color="fg.info">
<RouterLink
to={`/dags/${latestRun.dag_id}/runs/${latestRun.dag_run_id}`}>
<DagRunInfo
dataIntervalEnd={latestRun.data_interval_end}
diff --git a/airflow/ui/src/pages/DagsList/RecentRuns.tsx
b/airflow/ui/src/pages/DagsList/RecentRuns.tsx
index 24cca679ad2..99f33c9bd02 100644
--- a/airflow/ui/src/pages/DagsList/RecentRuns.tsx
+++ b/airflow/ui/src/pages/DagsList/RecentRuns.tsx
@@ -28,7 +28,7 @@ import { stateColor } from "src/utils/stateColor";
dayjs.extend(duration);
-const BAR_HEIGHT = 60;
+const BAR_HEIGHT = 65;
export const RecentRuns = ({
latestRuns,
@@ -50,7 +50,7 @@ export const RecentRuns = ({
);
return (
- <Flex alignItems="flex-end" flexDirection="row-reverse">
+ <Flex alignItems="flex-end" flexDirection="row-reverse" pb={1}>
{runsWithDuration.map((run) => (
<Tooltip
content={
@@ -72,7 +72,7 @@ export const RecentRuns = ({
}}
>
<Link to={`/dags/${run.dag_id}/runs/${run.dag_run_id}/`}>
- <Box p={1}>
+ <Box px={1}>
<Box
bg={stateColor[run.state]}
borderRadius="4px"
