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 17:26:41 UTC
[airflow] 01/03: Increase font sizes across grid view
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 <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 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>