This is an automated email from the ASF dual-hosted git repository. potiuk pushed a commit to branch v2-8-test in repository https://gitbox.apache.org/repos/asf/airflow.git
commit 8345678d56d7027088aa306fb46e28f7e40a1d23 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) (cherry picked from commit 14360ea824a76799502c4f044f8e21019ee5e79a) --- 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"
