You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@airflow.apache.org by ka...@apache.org on 2025/06/03 10:05:34 UTC
(airflow) 03/08: Fix timezone selection and dashboard layout (#50463)
This is an automated email from the ASF dual-hosted git repository.
kaxilnaik pushed a commit to branch v3-0-test
in repository https://gitbox.apache.org/repos/asf/airflow.git
commit 57d5e4f38ab5d92f6395d56dc1b6d056355ce2e5
Author: Guan Ming(Wesley) Chiu <10...@users.noreply.github.com>
AuthorDate: Tue May 13 06:12:41 2025 +0800
Fix timezone selection and dashboard layout (#50463)
(cherry picked from commit d73d5fa0d9761f48840c4e8bdebf84d5fb1de057)
---
airflow-core/src/airflow/ui/src/components/Assets/AssetEvent.tsx | 2 +-
airflow-core/src/airflow/ui/src/components/Assets/AssetEvents.tsx | 8 +++++---
airflow-core/src/airflow/ui/src/layouts/Nav/TimezoneSelector.tsx | 2 +-
airflow-core/src/airflow/ui/src/pages/Dashboard/Dashboard.tsx | 4 ++--
.../ui/src/pages/Dashboard/HistoricalMetrics/DagRunMetrics.tsx | 2 +-
.../src/pages/Dashboard/HistoricalMetrics/TaskInstanceMetrics.tsx | 2 +-
6 files changed, 11 insertions(+), 9 deletions(-)
diff --git a/airflow-core/src/airflow/ui/src/components/Assets/AssetEvent.tsx b/airflow-core/src/airflow/ui/src/components/Assets/AssetEvent.tsx
index 6d69ae9a1ac..cf1ffc8833d 100644
--- a/airflow-core/src/airflow/ui/src/components/Assets/AssetEvent.tsx
+++ b/airflow-core/src/airflow/ui/src/components/Assets/AssetEvent.tsx
@@ -45,7 +45,7 @@ export const AssetEvent = ({
}
return (
- <Box borderBottomWidth={1} fontSize={13} mt={1} p={2}>
+ <Box borderBottomWidth={1} fontSize={13} pb={2}>
<Text fontWeight="bold">
<Time datetime={event.timestamp} />
</Text>
diff --git a/airflow-core/src/airflow/ui/src/components/Assets/AssetEvents.tsx b/airflow-core/src/airflow/ui/src/components/Assets/AssetEvents.tsx
index 913640a8a34..1699b50fff4 100644
--- a/airflow-core/src/airflow/ui/src/components/Assets/AssetEvents.tsx
+++ b/airflow-core/src/airflow/ui/src/components/Assets/AssetEvents.tsx
@@ -16,7 +16,7 @@
* specific language governing permissions and limitations
* under the License.
*/
-import { Box, Heading, Flex, HStack, Skeleton } from "@chakra-ui/react";
+import { Box, Heading, Flex, HStack, Skeleton, Separator } from "@chakra-ui/react";
import type { BoxProps } from "@chakra-ui/react";
import { createListCollection } from "@chakra-ui/react/collection";
import { FiDatabase } from "react-icons/fi";
@@ -65,8 +65,8 @@ export const AssetEvents = ({
});
return (
- <Box borderBottomWidth={0} borderRadius={5} borderWidth={1} ml={2} {...rest}>
- <Flex justify="space-between" mr={1} mt={0} pl={3} pt={1}>
+ <Box borderBottomWidth={0} borderRadius={5} borderWidth={1} ml={2} p={4} py={2} {...rest}>
+ <Flex alignItems="center" justify="space-between">
<HStack>
<StateBadge colorPalette="blue" fontSize="md" variant="solid">
<FiDatabase />
@@ -83,6 +83,7 @@ export const AssetEvents = ({
data-testid="asset-sort-duration"
defaultValue={["-timestamp"]}
onValueChange={(option) => setOrderBy(option.value[0] as string)}
+ size="sm"
width={130}
>
<Select.Trigger>
@@ -99,6 +100,7 @@ export const AssetEvents = ({
</Select.Root>
)}
</Flex>
+ <Separator mt={2.5} />
<DataTable
cardDef={cardDef(assetId)}
columns={[]}
diff --git a/airflow-core/src/airflow/ui/src/layouts/Nav/TimezoneSelector.tsx b/airflow-core/src/airflow/ui/src/layouts/Nav/TimezoneSelector.tsx
index 66c8089611e..20dd09af396 100644
--- a/airflow-core/src/airflow/ui/src/layouts/Nav/TimezoneSelector.tsx
+++ b/airflow-core/src/airflow/ui/src/layouts/Nav/TimezoneSelector.tsx
@@ -66,7 +66,7 @@ const TimezoneSelector: React.FC = () => {
value={options.find((option) => option.value === selectedTimezone)}
/>
</Field.Root>
- <Box borderRadius="md" boxShadow="md" p={6}>
+ <Box borderRadius="md" boxShadow="sm" display="flex" flexDirection="column" gap={2} p={6}>
<Text fontSize="lg" fontWeight="bold">
Current time in {selectedTimezone}:
</Text>
diff --git a/airflow-core/src/airflow/ui/src/pages/Dashboard/Dashboard.tsx b/airflow-core/src/airflow/ui/src/pages/Dashboard/Dashboard.tsx
index 7e3ca81985e..9e0dbc00884 100644
--- a/airflow-core/src/airflow/ui/src/pages/Dashboard/Dashboard.tsx
+++ b/airflow-core/src/airflow/ui/src/pages/Dashboard/Dashboard.tsx
@@ -38,13 +38,13 @@ export const Dashboard = () => {
<Accordion.Item key="ui_alerts" value="ui_alerts">
{alerts.map((alert: UIAlert, index) =>
index === 0 ? (
- <Accordion.ItemTrigger key={alert.text}>
+ <Accordion.ItemTrigger key={alert.text} mb={2}>
<Alert status={alert.category}>
<ReactMarkdown>{alert.text}</ReactMarkdown>
</Alert>
</Accordion.ItemTrigger>
) : (
- <Accordion.ItemContent key={alert.text} paddingRight="8">
+ <Accordion.ItemContent key={alert.text} pr={8}>
<Alert status={alert.category}>
<ReactMarkdown>{alert.text}</ReactMarkdown>
</Alert>
diff --git a/airflow-core/src/airflow/ui/src/pages/Dashboard/HistoricalMetrics/DagRunMetrics.tsx b/airflow-core/src/airflow/ui/src/pages/Dashboard/HistoricalMetrics/DagRunMetrics.tsx
index 5ff72147093..e55f4e0dc3f 100644
--- a/airflow-core/src/airflow/ui/src/pages/Dashboard/HistoricalMetrics/DagRunMetrics.tsx
+++ b/airflow-core/src/airflow/ui/src/pages/Dashboard/HistoricalMetrics/DagRunMetrics.tsx
@@ -47,7 +47,7 @@ export const DagRunMetrics = ({ dagRunStates, endDate, startDate, total }: DagRu
</RouterLink>
<Heading size="md">Dag Runs</Heading>
</HStack>
- <Separator my={2} />
+ <Separator my={3} />
<Stack gap={4}>
{DAGRUN_STATES.map((state) => (
<MetricSection
diff --git a/airflow-core/src/airflow/ui/src/pages/Dashboard/HistoricalMetrics/TaskInstanceMetrics.tsx b/airflow-core/src/airflow/ui/src/pages/Dashboard/HistoricalMetrics/TaskInstanceMetrics.tsx
index 081a8de935f..c59881a9810 100644
--- a/airflow-core/src/airflow/ui/src/pages/Dashboard/HistoricalMetrics/TaskInstanceMetrics.tsx
+++ b/airflow-core/src/airflow/ui/src/pages/Dashboard/HistoricalMetrics/TaskInstanceMetrics.tsx
@@ -66,7 +66,7 @@ export const TaskInstanceMetrics = ({
</RouterLink>
<Heading size="md">Task Instances</Heading>
</HStack>
- <Separator my={2} />
+ <Separator my={3} />
<Stack gap={4}>
{TASK_STATES.sort((stateA, stateB) =>
taskInstanceStates[stateA] > taskInstanceStates[stateB] ? -1 : 1,