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 b9d5264a654d12b0948c3d48f3334f201029405a Author: Guan Ming(Wesley) Chiu <[email protected]> AuthorDate: Thu May 1 03:09:23 2025 +0800 Refactor Dashboard to enhance layout (#50026) (cherry picked from commit d10f1ccd03de6e6cd1f771bb60aadf552ea8e8fb) --- .../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> );
