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 f1c002b1fd9335ecb7808e9041635f923e505ae1 Author: Brent Bovenzi <[email protected]> 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 d4320e6b1d..f2a60f7a6f 100644 --- a/airflow/www/static/js/tree/details/content/Dag.jsx +++ b/airflow/www/static/js/tree/details/content/Dag.jsx @@ -91,7 +91,7 @@ const Dag = () => { return ( <> - <Button as={Link} variant="ghost" colorScheme="blue" href={dagDetailsUrl}> + <Button as={Link} mb={2} fontSize="lg" variant="ghost" colorScheme="blue" href={dagDetailsUrl}> DAG Details </Button> {durations.length > 0 && ( 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 fd609b7ad0..ba27bb743d 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 7550bdb842..3e9a5a9ef8 100644 --- a/airflow/www/static/js/tree/details/content/taskInstance/Nav.jsx +++ b/airflow/www/static/js/tree/details/content/taskInstance/Nav.jsx @@ -39,7 +39,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 = ({ taskId, executionDate, operator, isMapped, 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/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 fe277c9eef..098707476c 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>
