You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@airflow.apache.org by bb...@apache.org on 2022/04/06 16:35:00 UTC
[airflow] branch inrcease-grid-font created (now 7a914ff0b2)
This is an automated email from the ASF dual-hosted git repository.
bbovenzi pushed a change to branch inrcease-grid-font
in repository https://gitbox.apache.org/repos/asf/airflow.git
at 7a914ff0b2 Increase font sizes across grid view
This branch includes the following new commits:
new 7a914ff0b2 Increase font sizes across grid view
The 1 revisions listed above as "new" are entirely new to this
repository and will be described in separate emails. The revisions
listed as "add" were already present in the repository and have only
been added to this reference.
[airflow] 01/01: Increase font sizes across grid view
Posted by bb...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
bbovenzi pushed a commit to branch inrcease-grid-font
in repository https://gitbox.apache.org/repos/asf/airflow.git
commit 7a914ff0b2e20a2006136e02f6440cca81a9c7b0
Author: Brent Bovenzi <br...@gmail.com>
AuthorDate: Wed Apr 6 12:34:11 2022 -0400
Increase font sizes across grid view
---
airflow/www/static/js/tree/InstanceTooltip.jsx | 2 +-
airflow/www/static/js/tree/StatusBox.jsx | 2 +-
airflow/www/static/js/tree/TaskName.jsx | 1 -
airflow/www/static/js/tree/Tree.jsx | 5 +++--
airflow/www/static/js/tree/dagRuns/Bar.jsx | 5 +++--
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 | 4 ++--
.../js/tree/details/content/ConfirmDialog.jsx | 2 +-
airflow/www/static/js/tree/details/content/Dag.jsx | 2 +-
.../js/tree/details/content/dagRun/ClearRun.jsx | 2 +-
.../tree/details/content/dagRun/MarkFailedRun.jsx | 2 +-
.../tree/details/content/dagRun/MarkSuccessRun.jsx | 2 +-
.../js/tree/details/content/dagRun/QueueRun.jsx | 1 +
.../js/tree/details/content/dagRun/index.jsx | 6 +++---
.../js/tree/details/content/taskInstance/Nav.jsx | 2 +-
.../js/tree/details/content/taskInstance/index.jsx | 2 +-
.../content/taskInstance/taskActions/Clear.jsx | 1 +
.../taskInstance/taskActions/MarkFailed.jsx | 4 ++--
.../taskInstance/taskActions/MarkSuccess.jsx | 4 ++--
.../content/taskInstance/taskActions/Run.jsx | 4 ++--
airflow/www/static/js/tree/index.jsx | 23 ++++++++++++++++++++--
22 files changed, 51 insertions(+), 29 deletions(-)
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..b993c967fa 100644
--- a/airflow/www/static/js/tree/StatusBox.jsx
+++ b/airflow/www/static/js/tree/StatusBox.jsx
@@ -73,7 +73,7 @@ const StatusBox = ({
return (
<Tooltip
label={<InstanceTooltip instance={instance} group={group} />}
- fontSize="md"
+ fontSize="xl"
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..1b336b1776 100644
--- a/airflow/www/static/js/tree/Tree.jsx
+++ b/airflow/www/static/js/tree/Tree.jsx
@@ -79,11 +79,11 @@ const Tree = () => {
return (
<Box>
- <Flex flexGrow={1} justifyContent="flex-end" alignItems="center">
+ <Flex flexGrow={1} mb={2} justifyContent="flex-end" alignItems="center">
<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} fontSize="xl" fontWeight="normal">
Auto-refresh
</FormLabel>
<Switch
@@ -99,6 +99,7 @@ const Tree = () => {
onClick={toggleSidePanel}
aria-label={isOpen ? 'Show Details' : 'Hide Details'}
variant={isOpen ? 'solid' : 'outline'}
+ fontSize="lg"
>
{isOpen ? 'Hide ' : 'Show '}
Details Panel
diff --git a/airflow/www/static/js/tree/dagRuns/Bar.jsx b/airflow/www/static/js/tree/dagRuns/Bar.jsx
index 8c1628b01f..cba9ceafae 100644
--- a/airflow/www/static/js/tree/dagRuns/Bar.jsx
+++ b/airflow/www/static/js/tree/dagRuns/Bar.jsx
@@ -84,11 +84,12 @@ const DagRunBar = ({
portalProps={{ containerRef }}
placement="top"
openDelay={100}
+ fontSize="xl"
>
<Flex
width="10px"
height={`${(run.duration / max) * BAR_HEIGHT}px`}
- minHeight="12px"
+ minHeight="14px"
backgroundColor={stateColors[run.state]}
borderRadius={2}
cursor="pointer"
@@ -106,7 +107,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="lg" 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..fb33b43fc6 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="lg" 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..15b4b6800a 100644
--- a/airflow/www/static/js/tree/details/Header.jsx
+++ b/airflow/www/static/js/tree/details/Header.jsx
@@ -36,8 +36,8 @@ const dagId = getMetaValue('dag_id');
const LabelValue = ({ label, value }) => (
<Box position="relative">
- <Heading as="h5" size="sm" color="gray.300" position="absolute" top="-12px">{label}</Heading>
- <Heading as="h3" size="md">{value}</Heading>
+ <Heading as="h5" size="md" color="gray.300" position="absolute" top="-12px">{label}</Heading>
+ <Heading as="h5" size="lg">{value}</Heading>
</Box>
);
diff --git a/airflow/www/static/js/tree/details/content/ConfirmDialog.jsx b/airflow/www/static/js/tree/details/content/ConfirmDialog.jsx
index 6efe7457bd..18a7f9c8c5 100644
--- a/airflow/www/static/js/tree/details/content/ConfirmDialog.jsx
+++ b/airflow/www/static/js/tree/details/content/ConfirmDialog.jsx
@@ -49,7 +49,7 @@ const ConfirmDialog = ({
>
<AlertDialogOverlay>
<AlertDialogContent>
- <AlertDialogHeader fontSize="4xl" fontWeight="bold">
+ <AlertDialogHeader fontSize="3xl" fontWeight="bold">
{title}
</AlertDialogHeader>
diff --git a/airflow/www/static/js/tree/details/content/Dag.jsx b/airflow/www/static/js/tree/details/content/Dag.jsx
index db3ad9f8ad..7560b69dea 100644
--- a/airflow/www/static/js/tree/details/content/Dag.jsx
+++ b/airflow/www/static/js/tree/details/content/Dag.jsx
@@ -62,7 +62,7 @@ const Dag = () => {
return (
<>
- <Button as={Link} mb={2} variant="ghost" colorScheme="blue" href={dagDetailsUrl}>
+ <Button as={Link} mb={2} fontSize="lg" variant="ghost" colorScheme="blue" href={dagDetailsUrl}>
DAG Details
</Button>
<Table variant="striped">
diff --git a/airflow/www/static/js/tree/details/content/dagRun/ClearRun.jsx b/airflow/www/static/js/tree/details/content/dagRun/ClearRun.jsx
index bbd7ffba42..7c480c1673 100644
--- a/airflow/www/static/js/tree/details/content/dagRun/ClearRun.jsx
+++ b/airflow/www/static/js/tree/details/content/dagRun/ClearRun.jsx
@@ -50,7 +50,7 @@ const ClearRun = ({ dagId, runId }) => {
return (
<>
- <Button onClick={onClick} isLoading={isLoading}>Clear existing tasks</Button>
+ <Button onClick={onClick} fontSize="lg" isLoading={isLoading}>Clear existing tasks</Button>
<ConfirmDialog
isOpen={isOpen}
onClose={onClose}
diff --git a/airflow/www/static/js/tree/details/content/dagRun/MarkFailedRun.jsx b/airflow/www/static/js/tree/details/content/dagRun/MarkFailedRun.jsx
index 226643a77b..8957e8f642 100644
--- a/airflow/www/static/js/tree/details/content/dagRun/MarkFailedRun.jsx
+++ b/airflow/www/static/js/tree/details/content/dagRun/MarkFailedRun.jsx
@@ -46,7 +46,7 @@ const MarkFailedRun = ({ dagId, runId }) => {
return (
<>
- <Button onClick={onClick} colorScheme="red" isLoading={isLoading}>Mark Failed</Button>
+ <Button fontSize="lg" onClick={onClick} colorScheme="red" isLoading={isLoading}>Mark Failed</Button>
<ConfirmDialog
isOpen={isOpen}
onClose={onClose}
diff --git a/airflow/www/static/js/tree/details/content/dagRun/MarkSuccessRun.jsx b/airflow/www/static/js/tree/details/content/dagRun/MarkSuccessRun.jsx
index 30715c340b..5d89d7f27a 100644
--- a/airflow/www/static/js/tree/details/content/dagRun/MarkSuccessRun.jsx
+++ b/airflow/www/static/js/tree/details/content/dagRun/MarkSuccessRun.jsx
@@ -50,7 +50,7 @@ const MarkSuccessRun = ({ dagId, runId }) => {
return (
<>
- <Button onClick={onClick} colorScheme="green" isLoading={isLoading}>Mark Success</Button>
+ <Button fontSize="lg" onClick={onClick} colorScheme="green" isLoading={isLoading}>Mark Success</Button>
<ConfirmDialog
isOpen={isOpen}
onClose={onClose}
diff --git a/airflow/www/static/js/tree/details/content/dagRun/QueueRun.jsx b/airflow/www/static/js/tree/details/content/dagRun/QueueRun.jsx
index ef87d9fea5..ab7f7d1ce9 100644
--- a/airflow/www/static/js/tree/details/content/dagRun/QueueRun.jsx
+++ b/airflow/www/static/js/tree/details/content/dagRun/QueueRun.jsx
@@ -53,6 +53,7 @@ const QueueRun = ({ dagId, runId }) => {
return (
<>
<Button
+ fontSize="lg"
onClick={onClick}
isLoading={isLoading}
ml="5px"
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 68e6d6526a..9bd01fef4a 100644
--- a/airflow/www/static/js/tree/details/content/dagRun/index.jsx
+++ b/airflow/www/static/js/tree/details/content/dagRun/index.jsx
@@ -66,10 +66,10 @@ 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 />}>
+ <Button as={Link} fontSize="lg" variant="ghost" colorScheme="blue" href={detailsLink}>DAG Run Details</Button>
+ <Button as={Link} fontSize="lg" variant="ghost" colorScheme="blue" href={graphLink} leftIcon={<MdOutlineAccountTree />}>
Graph
</Button>
<MarkFailedRun dagId={dagId} runId={runId} />
diff --git a/airflow/www/static/js/tree/details/content/taskInstance/Nav.jsx b/airflow/www/static/js/tree/details/content/taskInstance/Nav.jsx
index d0841d0119..c02aa02d54 100644
--- a/airflow/www/static/js/tree/details/content/taskInstance/Nav.jsx
+++ b/airflow/www/static/js/tree/details/content/taskInstance/Nav.jsx
@@ -38,7 +38,7 @@ const taskUrl = getMetaValue('task_url');
const gridUrl = getMetaValue('grid_url');
const gridUrlNoRoot = getMetaValue('grid_url_no_root');
-const LinkButton = ({ children, ...rest }) => (<Button as={Link} variant="ghost" colorScheme="blue" {...rest}>{children}</Button>);
+const LinkButton = ({ children, ...rest }) => (<Button as={Link} fontSize="lg" variant="ghost" colorScheme="blue" {...rest}>{children}</Button>);
const Nav = ({ instance, isMapped }) => {
const {
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 1e787c7aba..001ef999d2 100644
--- a/airflow/www/static/js/tree/details/content/taskInstance/index.jsx
+++ b/airflow/www/static/js/tree/details/content/taskInstance/index.jsx
@@ -66,7 +66,7 @@ const TaskInstance = ({ taskId, runId }) => {
} = instance;
return (
- <Box fontSize="12px" py="4px">
+ <Box py="4px">
{!isGroup && (
<TaskNav instance={instance} isMapped={task.isMapped} />
)}
diff --git a/airflow/www/static/js/tree/details/content/taskInstance/taskActions/Clear.jsx b/airflow/www/static/js/tree/details/content/taskInstance/taskActions/Clear.jsx
index 4196edc6b9..5cd45ef6fb 100644
--- a/airflow/www/static/js/tree/details/content/taskInstance/taskActions/Clear.jsx
+++ b/airflow/www/static/js/tree/details/content/taskInstance/taskActions/Clear.jsx
@@ -111,6 +111,7 @@ const Run = ({
</ButtonGroup>
<Button
colorScheme="blue"
+ fontSize="lg"
onClick={onClick}
isLoading={isLoading}
title="Clearing deletes the previous state of the task instance, allowing it to get re-triggered by the scheduler or a backfill command"
diff --git a/airflow/www/static/js/tree/details/content/taskInstance/taskActions/MarkFailed.jsx b/airflow/www/static/js/tree/details/content/taskInstance/taskActions/MarkFailed.jsx
index 7b61de388e..209ff84ca0 100644
--- a/airflow/www/static/js/tree/details/content/taskInstance/taskActions/MarkFailed.jsx
+++ b/airflow/www/static/js/tree/details/content/taskInstance/taskActions/MarkFailed.jsx
@@ -93,13 +93,13 @@ const MarkFailed = ({
return (
<Flex justifyContent="space-between" width="100%">
- <ButtonGroup isAttached variant="outline">
+ <ButtonGroup isAttached variant="outline" fontSize="lg">
<ActionButton bg={past && 'gray.100'} onClick={onTogglePast} name="Past" />
<ActionButton bg={future && 'gray.100'} onClick={onToggleFuture} name="Future" />
<ActionButton bg={upstream && 'gray.100'} onClick={onToggleUpstream} name="Upstream" />
<ActionButton bg={downstream && 'gray.100'} onClick={onToggleDownstream} name="Downstream" />
</ButtonGroup>
- <Button colorScheme="red" onClick={onClick} isLoading={isMarkLoading || isConfirmLoading}>
+ <Button fontSize="lg" colorScheme="red" onClick={onClick} isLoading={isMarkLoading || isConfirmLoading}>
Mark Failed
</Button>
<ConfirmDialog
diff --git a/airflow/www/static/js/tree/details/content/taskInstance/taskActions/MarkSuccess.jsx b/airflow/www/static/js/tree/details/content/taskInstance/taskActions/MarkSuccess.jsx
index e3c56d1f8a..fc8783ab50 100644
--- a/airflow/www/static/js/tree/details/content/taskInstance/taskActions/MarkSuccess.jsx
+++ b/airflow/www/static/js/tree/details/content/taskInstance/taskActions/MarkSuccess.jsx
@@ -87,13 +87,13 @@ const Run = ({ dagId, runId, taskId }) => {
return (
<Flex justifyContent="space-between" width="100%">
- <ButtonGroup isAttached variant="outline">
+ <ButtonGroup isAttached variant="outline" fontSize="lg">
<ActionButton bg={past && 'gray.100'} onClick={onTogglePast} name="Past" />
<ActionButton bg={future && 'gray.100'} onClick={onToggleFuture} name="Future" />
<ActionButton bg={upstream && 'gray.100'} onClick={onToggleUpstream} name="Upstream" />
<ActionButton bg={downstream && 'gray.100'} onClick={onToggleDownstream} name="Downstream" />
</ButtonGroup>
- <Button colorScheme="green" onClick={onClick} isLoading={isMarkLoading || isConfirmLoading}>
+ <Button fontSize="lg" colorScheme="green" onClick={onClick} isLoading={isMarkLoading || isConfirmLoading}>
Mark Success
</Button>
<ConfirmDialog
diff --git a/airflow/www/static/js/tree/details/content/taskInstance/taskActions/Run.jsx b/airflow/www/static/js/tree/details/content/taskInstance/taskActions/Run.jsx
index 204cec44c2..725412fe04 100644
--- a/airflow/www/static/js/tree/details/content/taskInstance/taskActions/Run.jsx
+++ b/airflow/www/static/js/tree/details/content/taskInstance/taskActions/Run.jsx
@@ -52,7 +52,7 @@ const Run = ({
return (
<Flex justifyContent="space-between" width="100%">
- <ButtonGroup isAttached variant="outline">
+ <ButtonGroup isAttached variant="outline" fontSize="lg">
<Button
bg={ignoreAllDeps && 'gray.100'}
onClick={onToggleAllDeps}
@@ -75,7 +75,7 @@ const Run = ({
Ignore Task Deps
</Button>
</ButtonGroup>
- <Button colorScheme="blue" onClick={onClick} isLoading={isLoading}>
+ <Button fontSize="lg" colorScheme="blue" onClick={onClick} isLoading={isLoading}>
Run
</Button>
</Flex>
diff --git a/airflow/www/static/js/tree/index.jsx b/airflow/www/static/js/tree/index.jsx
index 8e54868b02..5d975a76e3 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,30 @@ const queryClient = new QueryClient({
},
});
+const theme = extendTheme(
+ {
+ fontSizes: {
+ xs: '0.825rem',
+ sm: '1rem',
+ md: '1.25rem',
+ lg: '1.5rem',
+ xl: '1.875rem',
+ '2xl': '2rem',
+ '3xl': '2.25rem',
+ '4xl': '3rem',
+ '5xl': '3.75rem',
+ '6xl': '4.5rem',
+ '7xl': '6rem',
+ '8xl': '8rem',
+ },
+ },
+);
+
function App() {
return (
<React.StrictMode>
<CacheProvider value={myCache}>
- <ChakraProvider>
+ <ChakraProvider thenme={theme}>
<ContainerRefProvider>
<QueryClientProvider client={queryClient}>
<TimezoneProvider>