You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@airflow.apache.org by di...@apache.org on 2023/03/01 17:06:43 UTC
[airflow] branch main updated: Improve spacing for extra links and grid scrollbar (#29825)
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>