From 1e7f79eb3abc6ebb041f0c7ca34d99855212c0ac Mon Sep 17 00:00:00 2001 From: Brent Bovenzi Date: Tue, 16 Apr 2024 13:49:41 -0400 Subject: [PATCH 1/2] Consolidate grid collapse actions to a single full screen toggle --- airflow/www/static/js/dag/Main.tsx | 111 +++++++----------- .../www/static/js/dag/details/graph/index.tsx | 22 +--- airflow/www/static/js/dag/details/index.tsx | 15 +-- .../dag/details/taskInstance/Logs/index.tsx | 19 --- airflow/www/static/js/dag/grid/index.tsx | 109 +++++------------ airflow/www/static/js/dag/nav/FilterBar.tsx | 2 +- 6 files changed, 76 insertions(+), 202 deletions(-) diff --git a/airflow/www/static/js/dag/Main.tsx b/airflow/www/static/js/dag/Main.tsx index 144aba94a9031..613054c0cdc43 100644 --- a/airflow/www/static/js/dag/Main.tsx +++ b/airflow/www/static/js/dag/Main.tsx @@ -32,8 +32,7 @@ import { AccordionPanel, } from "@chakra-ui/react"; import { isEmpty, debounce } from "lodash"; -import { MdDoubleArrow } from "react-icons/md"; -import { useSearchParams } from "react-router-dom"; +import { FaExpandArrowsAlt, FaCompressArrowsAlt } from "react-icons/fa"; import { useGridData } from "src/api"; import { hoverDelay } from "src/utils"; @@ -41,14 +40,13 @@ import { hoverDelay } from "src/utils"; import ShortcutCheatSheet from "src/components/ShortcutCheatSheet"; import { useKeysPress } from "src/utils/useKeysPress"; -import Details, { TAB_PARAM } from "./details"; +import Details from "./details"; import Grid from "./grid"; import FilterBar from "./nav/FilterBar"; import LegendRow from "./nav/LegendRow"; import useToggleGroups from "./useToggleGroups"; import keyboardShortcutIdentifier from "./keyboardShortcutIdentifier"; -const detailsPanelKey = "hideDetailsPanel"; const minPanelWidth = 300; const collapsedWidth = "32px"; @@ -82,21 +80,12 @@ const Main = () => { const [accordionIndexes, setAccordionIndexes] = useState>([0]); const isFilterCollapsed = !accordionIndexes.length; - const toggleFilterCollapsed = () => { - if (isFilterCollapsed) setAccordionIndexes([0]); - else setAccordionIndexes([]); - }; - const [searchParams] = useSearchParams(); const resizeRef = useRef(null); const gridRef = useRef(null); const gridScrollRef = useRef(null); const ganttScrollRef = useRef(null); - const isPanelOpen = - localStorage.getItem(detailsPanelKey) !== "true" || - !!searchParams.get(TAB_PARAM); - const { isOpen, onToggle } = useDisclosure({ defaultIsOpen: isPanelOpen }); const [hoveredTaskState, setHoveredTaskState] = useState< string | null | undefined >(); @@ -122,18 +111,6 @@ const Main = () => { const gridWidth = localStorage.getItem(gridWidthKey) || undefined; - const onPanelToggle = () => { - if (!isOpen) { - localStorage.setItem(detailsPanelKey, "false"); - } else { - localStorage.setItem(detailsPanelKey, "true"); - if (isGridCollapsed) { - setIsGridCollapsed(!isGridCollapsed); - } - } - onToggle(); - }; - const onToggleGridCollapse = useCallback(() => { const gridElement = gridRef.current; if (gridElement) { @@ -195,7 +172,7 @@ const Main = () => { }; } return () => {}; - }, [resize, isLoading, isOpen]); + }, [resize, isLoading]); useKeysPress( keyboardShortcutIdentifier.toggleShortcutCheatSheet, @@ -222,18 +199,6 @@ const Main = () => { overflow="hidden" position="relative" > - } - aria-label="Toggle filters bar" - transform={isFilterCollapsed ? "rotateZ(90deg)" : "rotateZ(270deg)"} - transition="all 0.2s" - /> { ) : ( <> + : + } + fontSize="xl" + position="absolute" + right={0} + top={0} + variant="ghost" + color="gray.400" + size="sm" + aria-label="Toggle full screen details" + title="Toggle full screen details" + onClick={toggleFullScreen} + /> - {isOpen && ( - <> - - -
- - - )} + + +
+ )} diff --git a/airflow/www/static/js/dag/details/graph/index.tsx b/airflow/www/static/js/dag/details/graph/index.tsx index d7445f189a8d8..980c320b39998 100644 --- a/airflow/www/static/js/dag/details/graph/index.tsx +++ b/airflow/www/static/js/dag/details/graph/index.tsx @@ -28,9 +28,7 @@ import ReactFlow, { Panel, useOnViewportChange, Viewport, - ControlButton, } from "reactflow"; -import { BiCollapse, BiExpand } from "react-icons/bi"; import { useDatasets, useGraphData, useGridData } from "src/api"; import useSelection from "src/dag/useSelection"; @@ -49,19 +47,11 @@ interface Props { openGroupIds: string[]; onToggleGroups: (groupIds: string[]) => void; hoveredTaskState?: string | null; - isFullScreen?: boolean; - toggleFullScreen?: () => void; } const dagId = getMetaValue("dag_id"); -const Graph = ({ - openGroupIds, - onToggleGroups, - hoveredTaskState, - isFullScreen, - toggleFullScreen, -}: Props) => { +const Graph = ({ openGroupIds, onToggleGroups, hoveredTaskState }: Props) => { const graphRef = useRef(null); const { data } = useGraphData(); const [arrange, setArrange] = useState(data?.arrange || "LR"); @@ -235,15 +225,7 @@ const Graph = ({ - - - {isFullScreen ? : } - - + nodeStrokeColor(props, colors)} diff --git a/airflow/www/static/js/dag/details/index.tsx b/airflow/www/static/js/dag/details/index.tsx index 96c9a7c100833..05601cbc73d07 100644 --- a/airflow/www/static/js/dag/details/index.tsx +++ b/airflow/www/static/js/dag/details/index.tsx @@ -77,8 +77,6 @@ interface Props { hoveredTaskState?: string | null; gridScrollRef: React.RefObject; ganttScrollRef: React.RefObject; - isFullScreen?: boolean; - toggleFullScreen?: () => void; } const tabToIndex = (tab?: string) => { @@ -150,8 +148,6 @@ const Details = ({ hoveredTaskState, gridScrollRef, ganttScrollRef, - isFullScreen, - toggleFullScreen, }: Props) => { const { selected: { runId, taskId, mapIndex }, @@ -241,12 +237,7 @@ const Details = ({ return ( - +
@@ -469,8 +458,6 @@ const Details = ({ ? undefined : instance.state } - isFullScreen={isFullScreen} - toggleFullScreen={toggleFullScreen} /> )} diff --git a/airflow/www/static/js/dag/details/taskInstance/Logs/index.tsx b/airflow/www/static/js/dag/details/taskInstance/Logs/index.tsx index 4a4013a2dde18..8510bd32854ef 100644 --- a/airflow/www/static/js/dag/details/taskInstance/Logs/index.tsx +++ b/airflow/www/static/js/dag/details/taskInstance/Logs/index.tsx @@ -27,10 +27,8 @@ import { Icon, Spinner, Select, - IconButton, } from "@chakra-ui/react"; import { MdWarning } from "react-icons/md"; -import { BiCollapse, BiExpand } from "react-icons/bi"; import { getMetaValue } from "src/utils"; import useTaskLog from "src/api/useTaskLog"; @@ -96,8 +94,6 @@ interface Props { executionDate: DagRun["executionDate"]; tryNumber: TaskInstance["tryNumber"]; state?: TaskInstance["state"]; - isFullScreen?: boolean; - toggleFullScreen?: () => void; } const Logs = ({ @@ -108,8 +104,6 @@ const Logs = ({ executionDate, tryNumber, state, - isFullScreen, - toggleFullScreen, }: Props) => { const [internalIndexes, externalIndexes] = getLinkIndexes(tryNumber); const [selectedTryNumber, setSelectedTryNumber] = useState< @@ -297,19 +291,6 @@ const Logs = ({ See More - - ) : ( - - ) - } - /> diff --git a/airflow/www/static/js/dag/grid/index.tsx b/airflow/www/static/js/dag/grid/index.tsx index 079837d087f29..62e77d77ac1f3 100644 --- a/airflow/www/static/js/dag/grid/index.tsx +++ b/airflow/www/static/js/dag/grid/index.tsx @@ -20,9 +20,7 @@ /* global ResizeObserver */ import React, { useRef, useEffect } from "react"; -import { Table, Tbody, Box, Thead, IconButton } from "@chakra-ui/react"; - -import { MdDoubleArrow } from "react-icons/md"; +import { Table, Tbody, Box, Thead } from "@chakra-ui/react"; import { useGridData } from "src/api"; import { useOffsetTop } from "src/utils"; @@ -32,25 +30,19 @@ import DagRuns from "./dagRuns"; import useSelection from "../useSelection"; interface Props { - isPanelOpen?: boolean; - onPanelToggle?: () => void; hoveredTaskState?: string | null; openGroupIds: string[]; onToggleGroups: (groupIds: string[]) => void; isGridCollapsed?: boolean; - setIsGridCollapsed?: (collapsed: boolean) => void; gridScrollRef?: React.RefObject; ganttScrollRef?: React.RefObject; } const Grid = ({ - isPanelOpen = false, - onPanelToggle, hoveredTaskState, openGroupIds, onToggleGroups, isGridCollapsed, - setIsGridCollapsed, gridScrollRef, ganttScrollRef, }: Props) => { @@ -121,75 +113,36 @@ const Grid = ({ }, [tableRef, isGridCollapsed, gridScrollRef]); return ( - - {(isPanelOpen || isGridCollapsed) && ( - - setIsGridCollapsed && setIsGridCollapsed(!isGridCollapsed) - } - title={isGridCollapsed ? "Restore grid" : "Collapse grid"} - aria-label={isGridCollapsed ? "Restore grid" : "Collapse grid"} - icon={} - transform={isGridCollapsed ? undefined : "rotateZ(180deg)"} - transitionProperty="none" - /> - )} - {!isGridCollapsed && ( - } - transform={isPanelOpen ? undefined : "rotateZ(180deg)"} - transitionProperty="none" - /> - )} - - - - - - - {renderTaskRows({ - task: groups, - dagRunIds, - openGroupIds, - onToggleGroups, - hoveredTaskState, - isGridCollapsed, - })} - -
- + + + + + + + {renderTaskRows({ + task: groups, + dagRunIds, + openGroupIds, + onToggleGroups, + hoveredTaskState, + isGridCollapsed, + })} + +
); }; diff --git a/airflow/www/static/js/dag/nav/FilterBar.tsx b/airflow/www/static/js/dag/nav/FilterBar.tsx index f03ea734b8197..eb54a76a6f5be 100644 --- a/airflow/www/static/js/dag/nav/FilterBar.tsx +++ b/airflow/www/static/js/dag/nav/FilterBar.tsx @@ -122,7 +122,7 @@ const FilterBar = () => { return ( - + Date: Wed, 17 Apr 2024 12:18:53 -0400 Subject: [PATCH 2/2] Fix toggle full screen with grid view resizing --- airflow/www/static/js/dag/Main.tsx | 32 ++++++++++++++++++------------ 1 file changed, 19 insertions(+), 13 deletions(-) diff --git a/airflow/www/static/js/dag/Main.tsx b/airflow/www/static/js/dag/Main.tsx index 613054c0cdc43..1a0fb7b54a8ba 100644 --- a/airflow/www/static/js/dag/Main.tsx +++ b/airflow/www/static/js/dag/Main.tsx @@ -111,17 +111,23 @@ const Main = () => { const gridWidth = localStorage.getItem(gridWidthKey) || undefined; - const onToggleGridCollapse = useCallback(() => { - const gridElement = gridRef.current; - if (gridElement) { - if (isGridCollapsed) { - gridElement.style.width = localStorage.getItem(gridWidthKey) || ""; - } else { - gridElement.style.width = collapsedWidth; - } - setIsGridCollapsed(!isGridCollapsed); - } - }, [isGridCollapsed]); + const onToggleGridCollapse = useCallback( + (collapseNext?: boolean) => { + const gridElement = gridRef.current; + const collapse = + collapseNext !== undefined ? collapseNext : !isGridCollapsed; + if (collapse !== undefined) + if (gridElement) { + if (!collapse) { + gridElement.style.width = localStorage.getItem(gridWidthKey) || ""; + } else { + gridElement.style.width = collapsedWidth; + } + setIsGridCollapsed(collapse); + } + }, + [isGridCollapsed] + ); const resize = useCallback( (e: MouseEvent) => { @@ -183,10 +189,10 @@ const Main = () => { const toggleFullScreen = () => { if (!isFullScreen) { setAccordionIndexes([]); - setIsGridCollapsed(true); + onToggleGridCollapse(true); } else { setAccordionIndexes([0]); - setIsGridCollapsed(false); + onToggleGridCollapse(false); } };