This is an automated email from the ASF dual-hosted git repository.
jedcunningham 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 14360ea824 Fix collapsed grid width, line up selected bar with gantt
(#37205)
14360ea824 is described below
commit 14360ea824a76799502c4f044f8e21019ee5e79a
Author: Brent Bovenzi <[email protected]>
AuthorDate: Tue Feb 6 19:02:04 2024 -0500
Fix collapsed grid width, line up selected bar with gantt (#37205)
---
airflow/www/static/js/dag/Main.tsx | 2 +-
airflow/www/static/js/dag/details/Header.tsx | 2 +-
airflow/www/static/js/dag/details/index.tsx | 2 +-
airflow/www/static/js/dag/grid/dagRuns/index.tsx | 12 +++++++++++-
airflow/www/static/js/dag/grid/index.tsx | 3 +--
airflow/www/static/js/dag/grid/renderTaskRows.tsx | 2 ++
6 files changed, 17 insertions(+), 6 deletions(-)
diff --git a/airflow/www/static/js/dag/Main.tsx
b/airflow/www/static/js/dag/Main.tsx
index 86955792ec..28dffedf28 100644
--- a/airflow/www/static/js/dag/Main.tsx
+++ b/airflow/www/static/js/dag/Main.tsx
@@ -38,7 +38,7 @@ import keyboardShortcutIdentifier from
"./keyboardShortcutIdentifier";
const detailsPanelKey = "hideDetailsPanel";
const minPanelWidth = 300;
-const collapsedWidth = "28px";
+const collapsedWidth = "32px";
const gridWidthKey = "grid-width";
const saveWidth = debounce(
diff --git a/airflow/www/static/js/dag/details/Header.tsx
b/airflow/www/static/js/dag/details/Header.tsx
index d17f04618a..5f0ded364c 100644
--- a/airflow/www/static/js/dag/details/Header.tsx
+++ b/airflow/www/static/js/dag/details/Header.tsx
@@ -87,7 +87,7 @@ const Header = () => {
const isMappedTaskDetails = runId && taskId && mapIndex !== undefined;
return (
- <Breadcrumb separator={<Text color="gray.300">/</Text>}>
+ <Breadcrumb ml={3} separator={<Text color="gray.300">/</Text>}>
<BreadcrumbItem isCurrentPage={isDagDetails} mt={4}>
<BreadcrumbLink
onClick={clearSelection}
diff --git a/airflow/www/static/js/dag/details/index.tsx
b/airflow/www/static/js/dag/details/index.tsx
index ad2662d61e..918fa7c804 100644
--- a/airflow/www/static/js/dag/details/index.tsx
+++ b/airflow/www/static/js/dag/details/index.tsx
@@ -197,7 +197,7 @@ const Details = ({
: group?.instances.find((ti) => ti.runId === runId);
return (
- <Flex flexDirection="column" pl={3} height="100%">
+ <Flex flexDirection="column" height="100%">
<Flex
alignItems="center"
justifyContent="space-between"
diff --git a/airflow/www/static/js/dag/grid/dagRuns/index.tsx
b/airflow/www/static/js/dag/grid/dagRuns/index.tsx
index ae9c204d1b..358b10fb38 100644
--- a/airflow/www/static/js/dag/grid/dagRuns/index.tsx
+++ b/airflow/www/static/js/dag/grid/dagRuns/index.tsx
@@ -147,11 +147,21 @@ const DagRuns = ({
</Flex>
</Th>
)}
- <Th align="right" verticalAlign="bottom">
+ <Th
+ align="right"
+ verticalAlign="bottom"
+ borderRightWidth="16px"
+ borderRightColor="white"
+ >
<Flex
justifyContent="flex-end"
borderBottomWidth={3}
position="relative"
+ borderRightWidth="16px"
+ borderRightColor="white"
+ marginRight="-16px"
+ borderTopWidth="50px"
+ borderTopColor="white"
>
{runs.map((run: RunWithDuration, index) => (
<DagRunBar
diff --git a/airflow/www/static/js/dag/grid/index.tsx
b/airflow/www/static/js/dag/grid/index.tsx
index 57f749a048..b7299e5ba3 100644
--- a/airflow/www/static/js/dag/grid/index.tsx
+++ b/airflow/www/static/js/dag/grid/index.tsx
@@ -165,11 +165,10 @@ const Grid = ({
ref={gridScrollRef}
overflow="auto"
position="relative"
- pr={4}
mt={8}
overscrollBehavior="auto"
>
- <Table pr="10px" borderRightWidth="14px" borderColor="transparent">
+ <Table borderRightWidth="16px" borderColor="transparent">
<Thead>
<DagRuns
groups={groups}
diff --git a/airflow/www/static/js/dag/grid/renderTaskRows.tsx
b/airflow/www/static/js/dag/grid/renderTaskRows.tsx
index 181186b172..ab33c0c145 100644
--- a/airflow/www/static/js/dag/grid/renderTaskRows.tsx
+++ b/airflow/www/static/js/dag/grid/renderTaskRows.tsx
@@ -146,6 +146,8 @@ const Row = (props: RowProps) => {
bg={isSelected ? "blue.100" : "inherit"}
borderBottomWidth={1}
borderBottomColor={isGroup && isOpen ? "gray.400" : "gray.200"}
+ borderRightWidth="16px"
+ borderRightColor={isSelected ? "blue.100" : "transparent"}
role="group"
_hover={!isSelected ? { bg: hoverBlue } : undefined}
transition="background-color 0.2s"
