This is an automated email from the ASF dual-hosted git repository.
ephraimanierobi pushed a commit to branch v2-3-test
in repository https://gitbox.apache.org/repos/asf/airflow.git
commit 5a125b6f1628cc3c0e66c378a5fa9d873f3287c3
Author: pierrejeambrun <pierrejb...@gmail.com>
AuthorDate: Fri May 27 01:47:39 2022 +0800
Grid fix details button truncated and small UI tweaks (#23934)
* Show details button and wrap on LegendRow.
* Update following brent review
* Fix display on small width
* Rotate icon for a 'ReadLess' effect
(cherry picked from commit 5ab58d057abb6b1f28eb4e3fb5cec7dc9850f0b0)
---
airflow/www/static/js/grid/AutoRefresh.jsx | 8 +++++-
airflow/www/static/js/grid/Grid.jsx | 39 +++++++++++++++++++++++-------
airflow/www/static/js/grid/LegendRow.jsx | 2 +-
airflow/www/static/js/grid/Main.jsx | 22 ++++++-----------
4 files changed, 45 insertions(+), 26 deletions(-)
diff --git a/airflow/www/static/js/grid/AutoRefresh.jsx
b/airflow/www/static/js/grid/AutoRefresh.jsx
index d92cf07838..b7c1c29206 100644
--- a/airflow/www/static/js/grid/AutoRefresh.jsx
+++ b/airflow/www/static/js/grid/AutoRefresh.jsx
@@ -33,7 +33,13 @@ const AutoRefresh = () => {
return (
<FormControl display="flex" width="auto" mr={2}>
<Spinner color="blue.500" speed="1s" mr="4px" visibility={isRefreshOn ?
'visible' : 'hidden'} />
- <FormLabel htmlFor="auto-refresh" mb={0} fontWeight="normal">
+ <FormLabel
+ htmlFor="auto-refresh"
+ mb={0}
+ fontWeight="normal"
+ display="flex"
+ alignItems="center"
+ >
Auto-refresh
</FormLabel>
<Switch
diff --git a/airflow/www/static/js/grid/Grid.jsx
b/airflow/www/static/js/grid/Grid.jsx
index 2df059dd35..9bb510778a 100644
--- a/airflow/www/static/js/grid/Grid.jsx
+++ b/airflow/www/static/js/grid/Grid.jsx
@@ -26,8 +26,10 @@ import {
Box,
Thead,
Flex,
+ IconButton,
} from '@chakra-ui/react';
+import { MdReadMore } from 'react-icons/md';
import { useGridData } from './api';
import renderTaskRows from './renderTaskRows';
import ResetRoot from './ResetRoot';
@@ -38,7 +40,7 @@ import AutoRefresh from './AutoRefresh';
const dagId = getMetaValue('dag_id');
-const Grid = ({ isPanelOpen = false, hoveredTaskState }) => {
+const Grid = ({ isPanelOpen = false, onPanelToggle, hoveredTaskState }) => {
const scrollRef = useRef();
const tableRef = useRef();
@@ -82,16 +84,35 @@ const Grid = ({ isPanelOpen = false, hoveredTaskState }) =>
{
overflow="auto"
ref={scrollRef}
flexGrow={1}
- minWidth={isPanelOpen && '300px'}
+ minWidth={isPanelOpen && '350px'}
>
- <Flex alignItems="center" position="sticky" top={0} left={0}>
- <AutoRefresh />
- <ToggleGroups
- groups={groups}
- openGroupIds={openGroupIds}
- onToggleGroups={onToggleGroups}
+ <Flex
+ alignItems="center"
+ justifyContent="space-between"
+ position="sticky"
+ top={0}
+ left={0}
+ mb={2}
+ p={1}
+ >
+ <Flex alignItems="center">
+ <AutoRefresh />
+ <ToggleGroups
+ groups={groups}
+ openGroupIds={openGroupIds}
+ onToggleGroups={onToggleGroups}
+ />
+ <ResetRoot />
+ </Flex>
+ <IconButton
+ fontSize="2xl"
+ onClick={onPanelToggle}
+ title={`${isPanelOpen ? 'Hide ' : 'Show '} Details Panel`}
+ aria-label={isPanelOpen ? 'Show Details' : 'Hide Details'}
+ icon={<MdReadMore />}
+ transform={!isPanelOpen && 'rotateZ(180deg)'}
+ transitionProperty="none"
/>
- <ResetRoot />
</Flex>
<Table>
<Thead display="block" pr="10px" position="sticky" top={0} zIndex={2}
bg="white">
diff --git a/airflow/www/static/js/grid/LegendRow.jsx
b/airflow/www/static/js/grid/LegendRow.jsx
index 3193435701..eff503403c 100644
--- a/airflow/www/static/js/grid/LegendRow.jsx
+++ b/airflow/www/static/js/grid/LegendRow.jsx
@@ -44,7 +44,7 @@ const StatusBadge = ({
const LegendRow = ({ setHoveredTaskState }) => (
<Flex p={4} flexWrap="wrap" justifyContent="end">
- <HStack spacing={2}>
+ <HStack spacing={2} wrap="wrap">
{
Object.entries(stateColors).map(([state, stateColor]) => (
<StatusBadge
diff --git a/airflow/www/static/js/grid/Main.jsx
b/airflow/www/static/js/grid/Main.jsx
index 8668c1379d..98aa360aa6 100644
--- a/airflow/www/static/js/grid/Main.jsx
+++ b/airflow/www/static/js/grid/Main.jsx
@@ -24,7 +24,6 @@ import {
Box,
Flex,
useDisclosure,
- Button,
Divider,
} from '@chakra-ui/react';
@@ -42,7 +41,7 @@ const Main = () => {
const { clearSelection } = useSelection();
const [hoveredTaskState, setHoveredTaskState] = useState();
- const toggleDetailsPanel = () => {
+ const onPanelToggle = () => {
if (!isOpen) {
localStorage.setItem(detailsPanelKey, false);
} else {
@@ -57,20 +56,13 @@ const Main = () => {
<FilterBar />
<LegendRow setHoveredTaskState={setHoveredTaskState} />
<Divider mb={5} borderBottomWidth={2} />
- <Flex flexDirection="row" justifyContent="space-between">
- <Grid isPanelOpen={isOpen} hoveredTaskState={hoveredTaskState} />
+ <Flex justifyContent="space-between">
+ <Grid
+ isPanelOpen={isOpen}
+ onPanelToggle={onPanelToggle}
+ hoveredTaskState={hoveredTaskState}
+ />
<Box borderLeftWidth={isOpen ? 1 : 0} position="relative">
- <Button
- position="absolute"
- top={0}
- right={0}
- onClick={toggleDetailsPanel}
- aria-label={isOpen ? 'Show Details' : 'Hide Details'}
- variant={isOpen ? 'solid' : 'outline'}
- >
- {isOpen ? 'Hide ' : 'Show '}
- Details Panel
- </Button>
{isOpen && (<Details />)}
</Box>
</Flex>
