This is an automated email from the ASF dual-hosted git repository.
pierrejeambrun 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 8a4fca53308 Fix graph height from PanelButtons change (#47181)
8a4fca53308 is described below
commit 8a4fca53308581ff189c85756b4ea86246619390
Author: Brent Bovenzi <[email protected]>
AuthorDate: Fri Feb 28 04:43:14 2025 -0500
Fix graph height from PanelButtons change (#47181)
---
airflow/ui/src/layouts/Details/Grid/Bar.tsx | 23 ++---------------------
airflow/ui/src/layouts/Details/Grid/Grid.tsx | 8 ++++----
airflow/ui/src/layouts/Details/PanelButtons.tsx | 14 ++++++++------
3 files changed, 14 insertions(+), 31 deletions(-)
diff --git a/airflow/ui/src/layouts/Details/Grid/Bar.tsx
b/airflow/ui/src/layouts/Details/Grid/Bar.tsx
index a56a5a913db..d1e2bf89bda 100644
--- a/airflow/ui/src/layouts/Details/Grid/Bar.tsx
+++ b/airflow/ui/src/layouts/Details/Grid/Bar.tsx
@@ -16,11 +16,10 @@
* specific language governing permissions and limitations
* under the License.
*/
-import { Flex, Box, VStack, Text } from "@chakra-ui/react";
+import { Flex, Box } from "@chakra-ui/react";
import { useParams, useSearchParams } from "react-router-dom";
import { RunTypeIcon } from "src/components/RunTypeIcon";
-import Time from "src/components/Time";
import { GridButton } from "./GridButton";
import { TaskInstances } from "./TaskInstances";
@@ -29,14 +28,12 @@ import type { GridTask, RunWithDuration } from "./utils";
const BAR_HEIGHT = 100;
type Props = {
- readonly index: number;
- readonly limit: number;
readonly max: number;
readonly nodes: Array<GridTask>;
readonly run: RunWithDuration;
};
-export const Bar = ({ index, limit, max, nodes, run }: Props) => {
+export const Bar = ({ max, nodes, run }: Props) => {
const { dagId = "", runId } = useParams();
const [searchParams] = useSearchParams();
@@ -44,8 +41,6 @@ export const Bar = ({ index, limit, max, nodes, run }: Props)
=> {
const search = searchParams.toString();
- const shouldShowTick = index % 8 === 0 || index === limit - 1;
-
return (
<Box
_hover={{ bg: "blue.subtle" }}
@@ -78,20 +73,6 @@ export const Bar = ({ index, limit, max, nodes, run }:
Props) => {
>
{run.run_type !== "scheduled" && <RunTypeIcon runType={run.run_type}
size="10px" />}
</GridButton>
- {shouldShowTick ? (
- <VStack gap={0} left="8px" position="absolute" top={0} width={0}
zIndex={-1}>
- <Text
- color="border.emphasized"
- fontSize="xs"
- mt="-35px !important"
- transform="rotate(-40deg) translateX(28px)"
- whiteSpace="nowrap"
- >
- <Time datetime={run.run_after} format="MMM DD, HH:mm" />
- </Text>
- <Box borderLeftWidth={1} height="100px" opacity={0.7} zIndex={0} />
- </VStack>
- ) : undefined}
</Flex>
<TaskInstances nodes={nodes} runId={run.dag_run_id}
taskInstances={run.task_instances} />
</Box>
diff --git a/airflow/ui/src/layouts/Details/Grid/Grid.tsx
b/airflow/ui/src/layouts/Details/Grid/Grid.tsx
index 96ee17e6228..927a539d78a 100644
--- a/airflow/ui/src/layouts/Details/Grid/Grid.tsx
+++ b/airflow/ui/src/layouts/Details/Grid/Grid.tsx
@@ -114,8 +114,8 @@ export const Grid = () => {
);
return (
- <Flex justifyContent="flex-end" mr={3} position="relative" pt="75px"
width="100%">
- <Box position="absolute" top="175px" width="100%">
+ <Flex justifyContent="flex-end" mr={3} position="relative" pt={50}
width="100%">
+ <Box position="absolute" top="150px" width="100%">
<TaskNames nodes={flatNodes} />
</Box>
<Box>
@@ -146,8 +146,8 @@ export const Grid = () => {
)}
</Flex>
<Flex flexDirection="row-reverse">
- {runs.map((dr, index) => (
- <Bar index={index} key={dr.dag_run_id} limit={limit} max={max}
nodes={flatNodes} run={dr} />
+ {runs.map((dr) => (
+ <Bar key={dr.dag_run_id} max={max} nodes={flatNodes} run={dr} />
))}
</Flex>
<IconButton
diff --git a/airflow/ui/src/layouts/Details/PanelButtons.tsx
b/airflow/ui/src/layouts/Details/PanelButtons.tsx
index fc50d9f552d..5898941ae12 100644
--- a/airflow/ui/src/layouts/Details/PanelButtons.tsx
+++ b/airflow/ui/src/layouts/Details/PanelButtons.tsx
@@ -16,7 +16,7 @@
* specific language governing permissions and limitations
* under the License.
*/
-import { HStack, IconButton, ButtonGroup } from "@chakra-ui/react";
+import { HStack, IconButton, ButtonGroup, type StackProps, Box } from
"@chakra-ui/react";
import { FiGrid } from "react-icons/fi";
import { MdOutlineAccountTree } from "react-icons/md";
@@ -26,11 +26,11 @@ type Props = {
readonly dagId: string;
readonly dagView: string;
readonly setDagView: (x: "graph" | "grid") => void;
-};
+} & StackProps;
-export const PanelButtons = ({ dagId, dagView, setDagView }: Props) => (
- <HStack justifyContent="space-between" py={2}>
- <ButtonGroup attached left={0} size="sm" top={0} variant="outline"
zIndex={1}>
+export const PanelButtons = ({ dagId, dagView, setDagView, ...rest }: Props)
=> (
+ <HStack justifyContent="space-between" position="absolute" top={0}
width="100%" zIndex={1} {...rest}>
+ <ButtonGroup attached size="sm" variant="outline">
<IconButton
aria-label="Show Grid"
colorPalette="blue"
@@ -50,6 +50,8 @@ export const PanelButtons = ({ dagId, dagView, setDagView }:
Props) => (
<MdOutlineAccountTree />
</IconButton>
</ButtonGroup>
- <DagVersionSelect dagId={dagId} disabled={dagView !== "graph"} />
+ <Box bg="bg" mr={2}>
+ <DagVersionSelect dagId={dagId} disabled={dagView !== "graph"} />
+ </Box>
</HStack>
);
