This is an automated email from the ASF dual-hosted git repository.
ash 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 95a1b71d76 Fix Grid view font sizing (#22866)
95a1b71d76 is described below
commit 95a1b71d762f0ee26284624cbe17c539e78265bd
Author: Brent Bovenzi <[email protected]>
AuthorDate: Fri Apr 8 16:59:27 2022 -0500
Fix Grid view font sizing (#22866)
---
airflow/www/static/css/bootstrap-theme.css | 2 +-
airflow/www/static/js/tree/InstanceTooltip.jsx | 2 +-
airflow/www/static/js/tree/StatusBox.jsx | 1 -
airflow/www/static/js/tree/TaskName.jsx | 1 -
airflow/www/static/js/tree/Tree.jsx | 2 +-
airflow/www/static/js/tree/dagRuns/Bar.jsx | 2 +-
airflow/www/static/js/tree/dagRuns/Tooltip.jsx | 2 +-
airflow/www/static/js/tree/dagRuns/index.jsx | 2 +-
airflow/www/static/js/tree/details/Header.jsx | 9 +++++----
airflow/www/static/js/tree/details/content/Dag.jsx | 4 ++--
.../www/static/js/tree/details/content/dagRun/index.jsx | 2 +-
.../static/js/tree/details/content/taskInstance/index.jsx | 2 +-
airflow/www/static/js/tree/index.jsx | 14 ++++++++++++--
13 files changed, 27 insertions(+), 18 deletions(-)
diff --git a/airflow/www/static/css/bootstrap-theme.css
b/airflow/www/static/css/bootstrap-theme.css
index e3baa0dea4..aaa5438f1e 100644
--- a/airflow/www/static/css/bootstrap-theme.css
+++ b/airflow/www/static/css/bootstrap-theme.css
@@ -295,7 +295,7 @@ th {
box-sizing: border-box;
}
html {
- font-size: 10px;
+ font-size: 12px;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
body {
diff --git a/airflow/www/static/js/tree/InstanceTooltip.jsx
b/airflow/www/static/js/tree/InstanceTooltip.jsx
index 1809e44d35..80f2dbce76 100644
--- a/airflow/www/static/js/tree/InstanceTooltip.jsx
+++ b/airflow/www/static/js/tree/InstanceTooltip.jsx
@@ -78,7 +78,7 @@ const InstanceTooltip = ({
}
return (
- <Box fontSize="12px" py="2px">
+ <Box py="2px">
{group.tooltip && (
<Text>{group.tooltip}</Text>
)}
diff --git a/airflow/www/static/js/tree/StatusBox.jsx
b/airflow/www/static/js/tree/StatusBox.jsx
index aeadb85b3e..d3b5e9f1ab 100644
--- a/airflow/www/static/js/tree/StatusBox.jsx
+++ b/airflow/www/static/js/tree/StatusBox.jsx
@@ -73,7 +73,6 @@ const StatusBox = ({
return (
<Tooltip
label={<InstanceTooltip instance={instance} group={group} />}
- fontSize="md"
portalProps={{ containerRef }}
hasArrow
placement="top"
diff --git a/airflow/www/static/js/tree/TaskName.jsx
b/airflow/www/static/js/tree/TaskName.jsx
index 61f336ba56..84b2adf8df 100644
--- a/airflow/www/static/js/tree/TaskName.jsx
+++ b/airflow/www/static/js/tree/TaskName.jsx
@@ -39,7 +39,6 @@ const TaskName = ({
>
<Text
display="inline"
- fontSize="12px"
ml={level * 4 + 4}
isTruncated
>
diff --git a/airflow/www/static/js/tree/Tree.jsx
b/airflow/www/static/js/tree/Tree.jsx
index 8ba66da6a4..c45b04ddd7 100644
--- a/airflow/www/static/js/tree/Tree.jsx
+++ b/airflow/www/static/js/tree/Tree.jsx
@@ -83,7 +83,7 @@ const Tree = () => {
<ResetRoot />
<FormControl display="flex" width="auto" mr={2}>
{isRefreshOn && <Spinner color="blue.500" speed="1s" mr="4px" />}
- <FormLabel htmlFor="auto-refresh" mb={0} fontSize="12px"
fontWeight="normal">
+ <FormLabel htmlFor="auto-refresh" mb={0} fontWeight="normal">
Auto-refresh
</FormLabel>
<Switch
diff --git a/airflow/www/static/js/tree/dagRuns/Bar.jsx
b/airflow/www/static/js/tree/dagRuns/Bar.jsx
index 8c1628b01f..47aa04f704 100644
--- a/airflow/www/static/js/tree/dagRuns/Bar.jsx
+++ b/airflow/www/static/js/tree/dagRuns/Bar.jsx
@@ -106,7 +106,7 @@ const DagRunBar = ({
</Flex>
{index < totalRuns - 3 && index % 10 === 0 && (
<VStack position="absolute" top="0" left="8px" spacing={0} zIndex={0}
width={0}>
- <Text fontSize="10px" color="gray.400" whiteSpace="nowrap"
transform="rotate(-30deg) translateX(28px)" mt="-23px !important">
+ <Text fontSize="sm" color="gray.400" whiteSpace="nowrap"
transform="rotate(-30deg) translateX(28px)" mt="-23px !important">
<Time dateTime={run.executionDate} format="MMM DD, HH:mm" />
</Text>
<Box borderLeftWidth={1} opacity={0.7} height="100px" zIndex={0} />
diff --git a/airflow/www/static/js/tree/dagRuns/Tooltip.jsx
b/airflow/www/static/js/tree/dagRuns/Tooltip.jsx
index 041b1bc6d3..c15e6e5351 100644
--- a/airflow/www/static/js/tree/dagRuns/Tooltip.jsx
+++ b/airflow/www/static/js/tree/dagRuns/Tooltip.jsx
@@ -28,7 +28,7 @@ const DagRunTooltip = ({
state, duration, dataIntervalEnd,
},
}) => (
- <Box fontSize="12px" py="2px">
+ <Box py="2px">
<Text>
Status:
{' '}
diff --git a/airflow/www/static/js/tree/dagRuns/index.jsx
b/airflow/www/static/js/tree/dagRuns/index.jsx
index 878863b96d..3106ed5885 100644
--- a/airflow/www/static/js/tree/dagRuns/index.jsx
+++ b/airflow/www/static/js/tree/dagRuns/index.jsx
@@ -32,7 +32,7 @@ import { getDuration, formatDuration } from
'../../datetime_utils';
import { useSelection } from '../context/selection';
const DurationTick = ({ children, ...rest }) => (
- <Text fontSize={10} color="gray.400" right={1} position="absolute"
whiteSpace="nowrap" {...rest}>
+ <Text fontSize="sm" color="gray.400" right={1} position="absolute"
whiteSpace="nowrap" {...rest}>
{children}
</Text>
);
diff --git a/airflow/www/static/js/tree/details/Header.jsx
b/airflow/www/static/js/tree/details/Header.jsx
index af38481660..1e6f7c357f 100644
--- a/airflow/www/static/js/tree/details/Header.jsx
+++ b/airflow/www/static/js/tree/details/Header.jsx
@@ -24,6 +24,7 @@ import {
BreadcrumbLink,
Box,
Heading,
+ Text,
} from '@chakra-ui/react';
import { MdPlayArrow } from 'react-icons/md';
@@ -72,22 +73,22 @@ const Header = () => {
const isTaskDetails = runId && taskId;
return (
- <Breadcrumb color="gray.300" mt={4}>
+ <Breadcrumb mt={4} separator={<Text color="gray.300">/</Text>}>
<BreadcrumbItem isCurrentPage={isDagDetails}>
- <BreadcrumbLink onClick={clearSelection} color="black"
_hover={isDagDetails ? { cursor: 'default' } : undefined}>
+ <BreadcrumbLink onClick={clearSelection} _hover={isDagDetails ? {
cursor: 'default' } : undefined}>
<LabelValue label="DAG" value={dagId} />
</BreadcrumbLink>
</BreadcrumbItem>
{runId && (
<BreadcrumbItem isCurrentPage={isRunDetails}>
- <BreadcrumbLink onClick={() => onSelect({ runId })} color="black"
_hover={isRunDetails ? { cursor: 'default' } : undefined}>
+ <BreadcrumbLink onClick={() => onSelect({ runId })}
_hover={isRunDetails ? { cursor: 'default' } : undefined}>
<LabelValue label="Run" value={runLabel} />
</BreadcrumbLink>
</BreadcrumbItem>
)}
{taskId && (
<BreadcrumbItem isCurrentPage>
- <BreadcrumbLink color="black" _hover={isTaskDetails ? { cursor:
'default' } : undefined}>
+ <BreadcrumbLink _hover={isTaskDetails ? { cursor: 'default' } :
undefined}>
<LabelValue label="Task" value={`${taskName}${isMapped ? ' []' :
''}`} />
</BreadcrumbLink>
</BreadcrumbItem>
diff --git a/airflow/www/static/js/tree/details/content/Dag.jsx
b/airflow/www/static/js/tree/details/content/Dag.jsx
index d4320e6b1d..406815b2c2 100644
--- a/airflow/www/static/js/tree/details/content/Dag.jsx
+++ b/airflow/www/static/js/tree/details/content/Dag.jsx
@@ -96,7 +96,7 @@ const Dag = () => {
</Button>
{durations.length > 0 && (
<>
- <Heading size="md" mt={4} mb={2}>DAG Runs Summary</Heading>
+ <Heading size="sm" mt={4} mb={2}>DAG Runs Summary</Heading>
<Table variant="striped">
<Tbody>
<Tr>
@@ -140,7 +140,7 @@ const Dag = () => {
</Table>
</>
)}
- <Heading size="md" mt={4} mb={2}>DAG Summary</Heading>
+ <Heading size="sm" mt={4} mb={2}>DAG Summary</Heading>
<Table variant="striped">
<Tbody>
{description && (
diff --git a/airflow/www/static/js/tree/details/content/dagRun/index.jsx
b/airflow/www/static/js/tree/details/content/dagRun/index.jsx
index fd609b7ad0..ad1c0d6626 100644
--- a/airflow/www/static/js/tree/details/content/dagRun/index.jsx
+++ b/airflow/www/static/js/tree/details/content/dagRun/index.jsx
@@ -66,7 +66,7 @@ const DagRun = ({ runId }) => {
const detailsLink = appendSearchParams(dagRunDetailsUrl, detailsParams);
return (
- <Box fontSize="12px" py="4px">
+ <Box py="4px">
<Flex justifyContent="space-between" alignItems="center">
<Button as={Link} variant="ghost" colorScheme="blue"
href={detailsLink}>DAG Run Details</Button>
<Button as={Link} variant="ghost" colorScheme="blue" href={graphLink}
leftIcon={<MdOutlineAccountTree />}>
diff --git a/airflow/www/static/js/tree/details/content/taskInstance/index.jsx
b/airflow/www/static/js/tree/details/content/taskInstance/index.jsx
index 93d22dbde7..63c957a788 100644
--- a/airflow/www/static/js/tree/details/content/taskInstance/index.jsx
+++ b/airflow/www/static/js/tree/details/content/taskInstance/index.jsx
@@ -69,7 +69,7 @@ const TaskInstance = ({ taskId, runId }) => {
const instance = group.instances.find((ti) => ti.runId === runId);
return (
- <Box fontSize="12px" py="4px">
+ <Box py="4px">
{!isGroup && (
<TaskNav
taskId={taskId}
diff --git a/airflow/www/static/js/tree/index.jsx
b/airflow/www/static/js/tree/index.jsx
index 8e54868b02..e71f599ccb 100644
--- a/airflow/www/static/js/tree/index.jsx
+++ b/airflow/www/static/js/tree/index.jsx
@@ -21,7 +21,7 @@
import React from 'react';
import ReactDOM from 'react-dom';
-import { ChakraProvider } from '@chakra-ui/react';
+import { ChakraProvider, extendTheme } from '@chakra-ui/react';
import { CacheProvider } from '@emotion/react';
import createCache from '@emotion/cache';
import { QueryClient, QueryClientProvider } from 'react-query';
@@ -51,11 +51,21 @@ const queryClient = new QueryClient({
},
});
+const theme = extendTheme({
+ components: {
+ Tooltip: {
+ baseStyle: {
+ fontSize: 'md',
+ },
+ },
+ },
+});
+
function App() {
return (
<React.StrictMode>
<CacheProvider value={myCache}>
- <ChakraProvider>
+ <ChakraProvider theme={theme}>
<ContainerRefProvider>
<QueryClientProvider client={queryClient}>
<TimezoneProvider>
