This is an automated email from the ASF dual-hosted git repository. dimberman 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 5ce40ea726 Improve spacing for extra links and grid scrollbar (#29825) 5ce40ea726 is described below commit 5ce40ea72603ac87e6698f7107b0ddf871e3b652 Author: Brent Bovenzi <br...@astronomer.io> AuthorDate: Wed Mar 1 12:06:34 2023 -0500 Improve spacing for extra links and grid scrollbar (#29825) * improve spacing for extra links and grid scrollbar * remove unnecessary margin --- airflow/www/static/js/dag/details/index.tsx | 2 +- .../js/dag/details/taskInstance/ExtraLinks.tsx | 21 ++++++++++----------- .../static/js/dag/details/taskInstance/index.tsx | 6 +++--- airflow/www/static/js/dag/grid/index.tsx | 5 +++-- 4 files changed, 17 insertions(+), 17 deletions(-) diff --git a/airflow/www/static/js/dag/details/index.tsx b/airflow/www/static/js/dag/details/index.tsx index 182e3acaf0..446c889e7e 100644 --- a/airflow/www/static/js/dag/details/index.tsx +++ b/airflow/www/static/js/dag/details/index.tsx @@ -34,7 +34,7 @@ const Details = () => { } = useSelection(); return ( - <Flex flexDirection="column" pl={3} mr={3} height="100%"> + <Flex flexDirection="column" pl={3} height="100%"> <Header /> <Divider my={2} /> <Box height="100%"> diff --git a/airflow/www/static/js/dag/details/taskInstance/ExtraLinks.tsx b/airflow/www/static/js/dag/details/taskInstance/ExtraLinks.tsx index d4d4f04c49..a5e2a37539 100644 --- a/airflow/www/static/js/dag/details/taskInstance/ExtraLinks.tsx +++ b/airflow/www/static/js/dag/details/taskInstance/ExtraLinks.tsx @@ -18,7 +18,7 @@ */ import React from "react"; -import { Button, Flex, Link, Divider } from "@chakra-ui/react"; +import { Button, Flex, Link, Box, Text, Divider } from "@chakra-ui/react"; import { useExtraLinks } from "src/api"; @@ -29,25 +29,22 @@ interface Props { extraLinks: string[]; } -const ExtraLinks = ({ - dagId, - taskId, - executionDate, - extraLinks = [], -}: Props) => { - const { data: links = [] } = useExtraLinks({ +const ExtraLinks = ({ dagId, taskId, executionDate, extraLinks }: Props) => { + const { data: links } = useExtraLinks({ dagId, taskId, executionDate, extraLinks, }); - if (!links.length) return null; + if (!links?.length) return null; + const isExternal = (url: string | null) => url && /^(?:[a-z]+:)?\/\//.test(url); return ( - <> + <Box mb={3}> + <Text as="strong">Extra Links</Text> <Divider my={2} /> <Flex flexWrap="wrap"> {links.map(({ name, url }) => ( @@ -58,12 +55,14 @@ const ExtraLinks = ({ href={url} isDisabled={!url} target={isExternal(url) ? "_blank" : undefined} + mr={2} > {name} </Button> ))} </Flex> - </> + <Divider my={2} /> + </Box> ); }; diff --git a/airflow/www/static/js/dag/details/taskInstance/index.tsx b/airflow/www/static/js/dag/details/taskInstance/index.tsx index e7152a21e2..be290670c7 100644 --- a/airflow/www/static/js/dag/details/taskInstance/index.tsx +++ b/airflow/www/static/js/dag/details/taskInstance/index.tsx @@ -182,7 +182,7 @@ const TaskInstance = ({ taskId, runId, mapIndex, onSelect }: Props) => { key={dagId + runId + taskId + instance.mapIndex} /> )} - <Box mb={8}> + <Box mb={3}> <TaskActions title={taskActionsTitle} runId={runId} @@ -193,12 +193,12 @@ const TaskInstance = ({ taskId, runId, mapIndex, onSelect }: Props) => { isGroup={isGroup} /> </Box> - {!isMapped && ( + {!isMapped && group.extraLinks && ( <ExtraLinks taskId={taskId} dagId={dagId} executionDate={executionDate} - extraLinks={group?.extraLinks || []} + extraLinks={group?.extraLinks} /> )} <Details instance={instance} group={group} dagId={dagId} /> diff --git a/airflow/www/static/js/dag/grid/index.tsx b/airflow/www/static/js/dag/grid/index.tsx index 632daf738e..a76e349a22 100644 --- a/airflow/www/static/js/dag/grid/index.tsx +++ b/airflow/www/static/js/dag/grid/index.tsx @@ -86,7 +86,7 @@ const Grid = ({ }, [tableRef, isPanelOpen]); return ( - <Box p={3} pt={0} height="100%" position="relative"> + <Box height="100%" position="relative"> <IconButton fontSize="2xl" variant="ghost" @@ -101,7 +101,7 @@ const Grid = ({ position="absolute" right={0} zIndex={2} - top="30px" + top={-8} /> <Box maxHeight={`calc(100% - ${offsetTop}px)`} @@ -109,6 +109,7 @@ const Grid = ({ overflow="auto" position="relative" pr={4} + mt={8} > <Table pr="10px"> <Thead>