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 d10f1ccd03d Refactor Dashboard to enhance layout (#50026)
d10f1ccd03d is described below
commit d10f1ccd03de6e6cd1f771bb60aadf552ea8e8fb
Author: Guan Ming(Wesley) Chiu <[email protected]>
AuthorDate: Thu May 1 03:09:23 2025 +0800
Refactor Dashboard to enhance layout (#50026)
---
.../Dashboard/HistoricalMetrics/DagRunMetrics.tsx | 31 +++++++++--------
.../Dashboard/HistoricalMetrics/MetricSection.tsx | 2 +-
.../HistoricalMetrics/TaskInstanceMetrics.tsx | 39 ++++++++++++----------
3 files changed, 39 insertions(+), 33 deletions(-)
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 dc0bb6b5cf7..5ff72147093 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
@@ -16,7 +16,7 @@
* specific language governing permissions and limitations
* under the License.
*/
-import { Box, Heading, HStack } from "@chakra-ui/react";
+import { Box, Separator, Heading, HStack, Stack } from "@chakra-ui/react";
import type { DAGRunStates } from "openapi-gen/requests/types.gen";
import { FiBarChart } from "react-icons/fi";
import { Link as RouterLink } from "react-router-dom";
@@ -35,8 +35,8 @@ type DagRunMetricsProps = {
const DAGRUN_STATES: Array<keyof DAGRunStates> = ["queued", "running",
"success", "failed"];
export const DagRunMetrics = ({ dagRunStates, endDate, startDate, total }:
DagRunMetricsProps) => (
- <Box borderRadius={5} borderWidth={1} p={2}>
- <HStack mb={4}>
+ <Box borderRadius={5} borderWidth={1} p={4}>
+ <HStack>
<RouterLink
to={`/dag_runs?start_date=${startDate}${endDate === undefined ? "" :
`&end_date=${endDate}`}`}
>
@@ -47,16 +47,19 @@ export const DagRunMetrics = ({ dagRunStates, endDate,
startDate, total }: DagRu
</RouterLink>
<Heading size="md">Dag Runs</Heading>
</HStack>
- {DAGRUN_STATES.map((state) => (
- <MetricSection
- endDate={endDate}
- key={state}
- kind="dag_runs"
- runs={dagRunStates[state]}
- startDate={startDate}
- state={state}
- total={total}
- />
- ))}
+ <Separator my={2} />
+ <Stack gap={4}>
+ {DAGRUN_STATES.map((state) => (
+ <MetricSection
+ endDate={endDate}
+ key={state}
+ kind="dag_runs"
+ runs={dagRunStates[state]}
+ startDate={startDate}
+ state={state}
+ total={total}
+ />
+ ))}
+ </Stack>
</Box>
);
diff --git
a/airflow-core/src/airflow/ui/src/pages/Dashboard/HistoricalMetrics/MetricSection.tsx
b/airflow-core/src/airflow/ui/src/pages/Dashboard/HistoricalMetrics/MetricSection.tsx
index cf50400fab9..01550ba4efc 100644
---
a/airflow-core/src/airflow/ui/src/pages/Dashboard/HistoricalMetrics/MetricSection.tsx
+++
b/airflow-core/src/airflow/ui/src/pages/Dashboard/HistoricalMetrics/MetricSection.tsx
@@ -49,7 +49,7 @@ export const MetricSection = ({ endDate, kind, runs,
startDate, state, total }:
}
return (
- <VStack align="left" gap={1} mb={4} ml={0} pl={0}>
+ <VStack align="left" gap={1} ml={0} pl={0}>
<Flex justify="space-between">
<HStack>
<RouterLink to={`/${kind}?${searchParams.toString()}`}>
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 a9975032e9b..081a8de935f 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
@@ -16,7 +16,7 @@
* specific language governing permissions and limitations
* under the License.
*/
-import { Box, Heading, HStack } from "@chakra-ui/react";
+import { Box, Separator, Heading, HStack, Stack } from "@chakra-ui/react";
import type { TaskInstanceState, TaskInstanceStateCount } from
"openapi-gen/requests/types.gen";
import { MdOutlineTask } from "react-icons/md";
import { Link as RouterLink } from "react-router-dom";
@@ -54,8 +54,8 @@ export const TaskInstanceMetrics = ({
taskInstanceStates,
total,
}: TaskInstanceMetricsProps) => (
- <Box borderRadius={5} borderWidth={1} mt={2} p={2}>
- <HStack mb={4}>
+ <Box borderRadius={5} borderWidth={1} mt={2} p={4}>
+ <HStack>
<RouterLink
to={`/task_instances?start_date=${startDate}${endDate === undefined ?
"" : `&end_date=${endDate}`}`}
>
@@ -66,20 +66,23 @@ export const TaskInstanceMetrics = ({
</RouterLink>
<Heading size="md">Task Instances</Heading>
</HStack>
- {TASK_STATES.sort((stateA, stateB) =>
- taskInstanceStates[stateA] > taskInstanceStates[stateB] ? -1 : 1,
- ).map((state) =>
- taskInstanceStates[state] > 0 ? (
- <MetricSection
- endDate={endDate}
- key={state}
- kind="task_instances"
- runs={taskInstanceStates[state]}
- startDate={startDate}
- state={state as TaskInstanceState}
- total={total}
- />
- ) : undefined,
- )}
+ <Separator my={2} />
+ <Stack gap={4}>
+ {TASK_STATES.sort((stateA, stateB) =>
+ taskInstanceStates[stateA] > taskInstanceStates[stateB] ? -1 : 1,
+ ).map((state) =>
+ taskInstanceStates[state] > 0 ? (
+ <MetricSection
+ endDate={endDate}
+ key={state}
+ kind="task_instances"
+ runs={taskInstanceStates[state]}
+ startDate={startDate}
+ state={state as TaskInstanceState}
+ total={total}
+ />
+ ) : undefined,
+ )}
+ </Stack>
</Box>
);
