Skip to content

Commit

Permalink
reset commits, clean submodules (#27560)
Browse files Browse the repository at this point in the history
  • Loading branch information
@bbovenzi
bbovenzi committed Nov 17, 2022
1 parent 7ea8475 commit 65bfea2
Show file tree
Hide file tree
Showing 10 changed files with 359 additions and 288 deletions.
18 changes: 12 additions & 6 deletions airflow/www/static/js/dag/Main.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,6 @@ import { isEmpty, debounce } from 'lodash';
import useSelection from 'src/dag/useSelection';
import { useGridData } from 'src/api';
import { hoverDelay } from 'src/utils';
import useContentHeight from 'src/utils/useContentHeight';

import Details from './details';
import Grid from './grid';
Expand All @@ -44,11 +43,14 @@ import LegendRow from './nav/LegendRow';
const detailsPanelKey = 'hideDetailsPanel';
const minPanelWidth = 300;

const gridWidthKey = 'grid-width';
const saveWidth = debounce((w) => localStorage.setItem(gridWidthKey, w), hoverDelay);

const Main = () => {
const { data: { groups }, isLoading } = useGridData();
const resizeRef = useRef<HTMLDivElement>(null);
const gridRef = useRef<HTMLDivElement>(null);
const contentRef = useRef<HTMLDivElement>(null);
const detailsRef = useRef<HTMLDivElement>(null);
const isPanelOpen = localStorage.getItem(detailsPanelKey) !== 'true';
const { isOpen, onToggle } = useDisclosure({ defaultIsOpen: isPanelOpen });
const { clearSelection } = useSelection();
Expand All @@ -62,6 +64,8 @@ const Main = () => {
onStatusHover.cancel();
};

const gridWidth = localStorage.getItem(gridWidthKey) || undefined;

const onPanelToggle = () => {
if (!isOpen) {
localStorage.setItem(detailsPanelKey, 'false');
Expand All @@ -72,12 +76,12 @@ const Main = () => {
onToggle();
};

useContentHeight(contentRef);

const resize = useCallback((e: MouseEvent) => {
const gridEl = gridRef.current;
if (gridEl && e.x > minPanelWidth && e.x < window.innerWidth - minPanelWidth) {
gridEl.style.width = `${e.x}px`;
const width = `${e.x}px`;
gridEl.style.width = width;
saveWidth(width);
}
}, [gridRef]);

Expand Down Expand Up @@ -106,7 +110,7 @@ const Main = () => {
<FilterBar />
<LegendRow onStatusHover={onStatusHover} onStatusLeave={onStatusLeave} />
<Divider mb={5} borderBottomWidth={2} />
<Flex ref={contentRef} overflow="hidden">
<Flex>
{isLoading || isEmpty(groups)
? (<Spinner />)
: (
Expand All @@ -116,6 +120,7 @@ const Main = () => {
flex={isOpen ? undefined : 1}
ref={gridRef}
height="100%"
width={gridWidth}
>
<Grid
isPanelOpen={isOpen}
Expand All @@ -138,6 +143,7 @@ const Main = () => {
zIndex={1}
bg="white"
height="100%"
ref={detailsRef}
>
<Details />
</Box>
Expand Down
137 changes: 74 additions & 63 deletions airflow/www/static/js/dag/details/Dag.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
* under the License.
*/

import React, { ReactNode } from 'react';
import React, { ReactNode, useRef } from 'react';
import {
Table,
Tbody,
Expand All @@ -28,13 +28,15 @@ import {
Flex,
Heading,
Text,
Box,
} from '@chakra-ui/react';
import { mean } from 'lodash';

import { getDuration, formatDuration } from 'src/datetime_utils';
import { finalStatesMap, getMetaValue, getTaskSummary } from 'src/utils';
import { useGridData } from 'src/api';
import Time from 'src/components/Time';
import useOffsetHeight from 'src/utils/useOffsetHeight';
import type { TaskState } from 'src/types';

import { SimpleStatus } from '../StatusBox';
Expand All @@ -43,6 +45,8 @@ const dagDetailsUrl = getMetaValue('dag_details_url');

const Dag = () => {
const { data: { dagRuns, groups } } = useGridData();
const detailsRef = useRef<HTMLDivElement>(null);
const offsetHeight = useOffsetHeight(detailsRef);

const taskSummary = getTaskSummary({ task: groups });
const numMap = finalStatesMap();
Expand Down Expand Up @@ -89,84 +93,91 @@ const Dag = () => {
<Button as={Link} variant="ghost" colorScheme="blue" href={dagDetailsUrl}>
DAG Details
</Button>
<Table variant="striped">
<Tbody>
{durations.length > 0 && (
<>
<Tr borderBottomWidth={2} borderBottomColor="gray.300">
<Td><Heading size="sm">DAG Runs Summary</Heading></Td>
<Td />
</Tr>
<Tr>
<Td>Total Runs Displayed</Td>
<Td>
{durations.length}
</Td>
</Tr>
{stateSummary}
{firstStart && (
<Box
height="100%"
maxHeight={offsetHeight}
ref={detailsRef}
overflowY="auto"
>
<Table variant="striped">
<Tbody>
{durations.length > 0 && (
<>
<Tr borderBottomWidth={2} borderBottomColor="gray.300">
<Td><Heading size="sm">DAG Runs Summary</Heading></Td>
<Td />
</Tr>
<Tr>
<Td>First Run Start</Td>
<Td>Total Runs Displayed</Td>
<Td>
<Time dateTime={firstStart} />
{durations.length}
</Td>
</Tr>
{stateSummary}
{firstStart && (
<Tr>
<Td>First Run Start</Td>
<Td>
<Time dateTime={firstStart} />
</Td>
</Tr>
)}
{lastStart && (
<Tr>
<Td>Last Run Start</Td>
<Td>
<Time dateTime={lastStart} />
</Td>
</Tr>
)}
<Tr>
<Td>Max Run Duration</Td>
<Td>
{formatDuration(max)}
</Td>
</Tr>
)}
{lastStart && (
<Tr>
<Td>Last Run Start</Td>
<Td>Mean Run Duration</Td>
<Td>
<Time dateTime={lastStart} />
{formatDuration(avg)}
</Td>
</Tr>
<Tr>
<Td>Min Run Duration</Td>
<Td>
{formatDuration(min)}
</Td>
</Tr>
</>
)}
<Tr>
<Td>Max Run Duration</Td>
<Tr borderBottomWidth={2} borderBottomColor="gray.300">
<Td>
{formatDuration(max)}
<Heading size="sm">DAG Summary</Heading>
</Td>
<Td />
</Tr>
<Tr>
<Td>Mean Run Duration</Td>
<Td>
{formatDuration(avg)}
</Td>
<Td>Total Tasks</Td>
<Td>{taskSummary.taskCount}</Td>
</Tr>
{!!taskSummary.groupCount && (
<Tr>
<Td>Min Run Duration</Td>
<Td>
{formatDuration(min)}
</Td>
<Td>Total Task Groups</Td>
<Td>{taskSummary.groupCount}</Td>
</Tr>
</>
)}
<Tr borderBottomWidth={2} borderBottomColor="gray.300">
<Td>
<Heading size="sm">DAG Summary</Heading>
</Td>
<Td />
</Tr>
<Tr>
<Td>Total Tasks</Td>
<Td>{taskSummary.taskCount}</Td>
</Tr>
{!!taskSummary.groupCount && (
<Tr>
<Td>Total Task Groups</Td>
<Td>{taskSummary.groupCount}</Td>
</Tr>
)}
{Object.entries(taskSummary.operators).map(([key, value]) => (
<Tr key={key}>
<Td>
{key}
{value > 1 && 's'}
</Td>
<Td>{value}</Td>
</Tr>
))}
</Tbody>
</Table>
)}
{Object.entries(taskSummary.operators).map(([key, value]) => (
<Tr key={key}>
<Td>
{key}
{value > 1 && 's'}
</Td>
<Td>{value}</Td>
</Tr>
))}
</Tbody>
</Table>
</Box>
</>
);
};
Expand Down
Loading

0 comments on commit 65bfea2

Please sign in to comment.