Skip to content

Commit

Permalink
various fixes for new partition page (#7950)
Browse files Browse the repository at this point in the history 
* changes step matrix to only show the state of the last run

* add loading state

* backfill launch fixes

* fix z-index issues

* tooltip for click to open, instead of partition state

* dish comments

* fix lint
  • Loading branch information
@prha
prha committed May 18, 2022
1 parent 422fa71 commit d6b4eaf
Show file tree
Hide file tree
Showing 5 changed files with 79 additions and 44 deletions.
1 change: 1 addition & 0 deletions js_modules/dagit/packages/core/src/app/App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ export const App: React.FC = (props) => {

const Main = styled.div<{$navCollapsible: boolean}>`
height: 100%;
z-index: 1;
${(p) =>
p.$navCollapsible
Expand Down
5 changes: 3 additions & 2 deletions js_modules/dagit/packages/core/src/partitions/BackfillSelector.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,7 @@ interface BackfillOptions {

export const BackfillPartitionSelector: React.FC<{
partitionSetName: string;
partitionNames: string[];
partitionData: {[name: string]: RunStatus | null};
pipelineName: string;
onLaunch?: (backfillId: string, stepQuery: string) => void;
Expand All @@ -67,6 +68,7 @@ export const BackfillPartitionSelector: React.FC<{
repoAddress,
partitionData,
pipelineName,
partitionNames,
}) => {
const history = useHistory();
const [selected, _setSelected] = React.useState<string[]>(
Expand Down Expand Up @@ -140,15 +142,14 @@ export const BackfillPartitionSelector: React.FC<{
name: box.node.name,
}));

const partitionNames = Object.keys(partitionData);
const usingDefaultRunLauncher = instance.runLauncher?.name === DEFAULT_RUN_LAUNCHER_NAME;

const isFailed = (name: string) =>
partitionData[name] === RunStatus.FAILURE ||
partitionData[name] === RunStatus.CANCELED ||
partitionData[name] === RunStatus.CANCELING;
const failedPartitions = partitionNames.filter(isFailed);
const missingPartitions = partitionNames.filter((name: string) => partitionData[name] === null);
const missingPartitions = partitionNames.filter((name: string) => !partitionData[name]);
const successPartitions = partitionNames.filter(
(name: string) => partitionData[name] === RunStatus.SUCCESS,
);
Expand Down
15 changes: 10 additions & 5 deletions js_modules/dagit/packages/core/src/partitions/PartitionStatus.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ export const PartitionStatus: React.FC<{
onSelect?: (selection: string[]) => void;
splitPartitions?: boolean;
hideStatusTooltip?: boolean;
tooltipMessage?: string;
selectionWindowSize?: number;
}> = ({
partitionNames,
Expand All @@ -33,6 +34,7 @@ export const PartitionStatus: React.FC<{
small,
selectionWindowSize,
hideStatusTooltip,
tooltipMessage,
}) => {
const ref = React.useRef<HTMLDivElement>(null);
const [currentSelectionRange, setCurrentSelectionRange] = React.useState<
Expand Down Expand Up @@ -168,20 +170,23 @@ export const PartitionStatus: React.FC<{
top: 0,
}}
>
{hideStatusTooltip ? (
{hideStatusTooltip || tooltipMessage ? (
<div
style={{
width: '100%',
height: 24,
outline: 'none',
background: _statusToColor(s.status),
}}
title={tooltipMessage}
/>
) : (
<Tooltip
display="block"
content={
s.startIdx === s.endIdx
tooltipMessage
? tooltipMessage
: s.startIdx === s.endIdx
? `Partition ${partitionNames[s.startIdx]} is ${_statusToText(s.status)}`
: `Partitions ${partitionNames[s.startIdx]} through ${
partitionNames[s.endIdx]
Expand Down Expand Up @@ -256,7 +261,7 @@ export const PartitionStatus: React.FC<{
),
height: small ? 14 : 24,
position: 'absolute',
zIndex: 1000,
zIndex: 5,
background: Colors.White,
opacity: 0.5,
top: 0,
Expand All @@ -280,7 +285,7 @@ export const PartitionStatus: React.FC<{
minWidth: 2,
height: small ? 14 : 24,
position: 'absolute',
zIndex: 1000,
zIndex: 5,
border: `3px solid ${Colors.Dark}`,
borderRadius: 4,
top: 0,
Expand All @@ -300,7 +305,7 @@ export const PartitionStatus: React.FC<{
),
height: small ? 14 : 24,
position: 'absolute',
zIndex: 1000,
zIndex: 5,
background: Colors.White,
opacity: 0.5,
top: 0,
Expand Down
66 changes: 35 additions & 31 deletions js_modules/dagit/packages/core/src/partitions/PartitionViewNew.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ import {OptionsContainer} from '../gantt/VizComponents';
import {useViewport} from '../gantt/useViewport';
import {BackfillTable, BACKFILL_TABLE_FRAGMENT} from '../instance/BackfillTable';
import {RepositorySelector, RunStatus} from '../types/globalTypes';
import {Loading} from '../ui/Loading';
import {repoAddressToSelector} from '../workspace/repoAddressToSelector';
import {RepoAddress} from '../workspace/types';

Expand All @@ -27,7 +28,6 @@ import {PartitionStatus} from './PartitionStatus';
import {PartitionStepStatus} from './PartitionStepStatus';
import {
PartitionsStatusQuery_partitionSetOrError_PartitionSet_partitionStatusesOrError_PartitionStatuses_results,
PartitionsStatusQuery_partitionSetOrError_PartitionSet_partitionsOrError_Partitions_results,
PartitionsStatusQuery_partitionSetOrError_PartitionSet,
PartitionsStatusQuery,
PartitionsStatusQueryVariables,
Expand All @@ -37,7 +37,6 @@ import {usePartitionStepQuery} from './usePartitionStepQuery';

type PartitionSet = PipelinePartitionsRootQuery_partitionSetsOrError_PartitionSets_results;
type PartitionStatus = PartitionsStatusQuery_partitionSetOrError_PartitionSet_partitionStatusesOrError_PartitionStatuses_results;
type Partition = PartitionsStatusQuery_partitionSetOrError_PartitionSet_partitionsOrError_Partitions_results;

const FAILED_STATUSES = [RunStatus.FAILURE, RunStatus.CANCELED, RunStatus.CANCELING];

Expand All @@ -56,33 +55,27 @@ export const PartitionViewNew: React.FC<{
},
);

if (!queryResult.data) {
return null;
}

const {partitionSetOrError} = queryResult.data;

if (partitionSetOrError.__typename !== 'PartitionSet') {
return null;
}
return (
<Loading queryResult={queryResult}>
{({partitionSetOrError}) => {
if (
partitionSetOrError.__typename !== 'PartitionSet' ||
partitionSetOrError.partitionsOrError.__typename !== 'Partitions'
) {
return null;
}

if (
partitionSetOrError.__typename !== 'PartitionSet' ||
partitionSetOrError.partitionsOrError.__typename !== 'Partitions'
) {
return null;
}
const partitionNames = partitionSetOrError.partitionsOrError.results.map(({name}) => name);

const partitionNames = partitionSetOrError.partitionsOrError.results.map(
(_: Partition) => _.name,
);

return (
<PartitionViewContent
partitionNames={partitionNames}
partitionSet={partitionSetOrError}
repoAddress={repoAddress}
/>
return (
<PartitionViewContent
partitionNames={partitionNames}
partitionSet={partitionSetOrError}
repoAddress={repoAddress}
/>
);
}}
</Loading>
);
};

Expand All @@ -99,6 +92,7 @@ const PartitionViewContent: React.FC<{
const repositorySelector = repoAddressToSelector(repoAddress);
const {canLaunchPartitionBackfill} = usePermissions();
const {viewport, containerProps} = useViewport();
const [backfillRefetchCounter, setBackfillRefetchCounter] = React.useState(0);
const partitions = usePartitionStepQuery(
partitionSet.name,
partitionNames,
Expand Down Expand Up @@ -167,10 +161,12 @@ const PartitionViewContent: React.FC<{
{showBackfillSetup && (
<BackfillPartitionSelector
partitionSetName={partitionSet.name}
partitionNames={partitionNames}
partitionData={statusData}
pipelineName={partitionSet.pipelineName}
onCancel={() => setShowBackfillSetup(false)}
onLaunch={(_backfillId, _stepQuery) => {
setBackfillRefetchCounter(backfillRefetchCounter + 1);
setShowBackfillSetup(false);
}}
onSubmit={onSubmit}
Expand Down Expand Up @@ -246,6 +242,7 @@ const PartitionViewContent: React.FC<{
setShowSteps(true);
}
}}
tooltipMessage="Click to view per-step status"
/>
</div>
{showSteps ? (
Expand Down Expand Up @@ -298,6 +295,7 @@ const PartitionViewContent: React.FC<{
partitionSet={partitionSet}
repositorySelector={repositorySelector}
partitionNames={partitionNames}
refetchCounter={backfillRefetchCounter}
/>
</Box>
</div>
Expand All @@ -310,14 +308,16 @@ const JobBackfills = ({
partitionSet,
partitionNames,
repositorySelector,
refetchCounter,
}: {
partitionSet: PartitionsStatusQuery_partitionSetOrError_PartitionSet;
partitionNames: string[];
repositorySelector: RepositorySelector;
refetchCounter: number;
}) => {
const [cursorStack, setCursorStack] = React.useState<string[]>(() => []);
const [cursor, setCursor] = React.useState<string | undefined>();
const queryResult = useQuery(JOB_BACKFILLS_QUERY, {
const {data, refetch} = useQuery(JOB_BACKFILLS_QUERY, {
variables: {
partitionSetName: partitionSet.name,
repositorySelector,
Expand All @@ -327,11 +327,15 @@ const JobBackfills = ({
partialRefetch: true,
});

if (!queryResult.data) {
React.useEffect(() => {
refetchCounter && refetch();
}, [refetch, refetchCounter]);

if (!data) {
return <NonIdealState title="Could not fetch backfill data" icon="error" />;
}

const {backfills, pipelineName} = queryResult.data?.partitionSetOrError;
const {backfills, pipelineName} = data?.partitionSetOrError;

if (!backfills) {
return <NonIdealState title={`No backfills for ${pipelineName}`} icon="no-results" />;
Expand Down Expand Up @@ -365,7 +369,7 @@ const JobBackfills = ({
<>
<BackfillTable
backfills={backfills}
refetch={queryResult.refetch}
refetch={refetch}
showPartitionSet={false}
allPartitions={partitionNames}
/>
Expand Down
36 changes: 30 additions & 6 deletions js_modules/dagit/packages/core/src/partitions/useMatrixData.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import {gql} from '@apollo/client';
import {shallowCompareKeys} from '@blueprintjs/core/lib/cjs/common/utils';
import React from 'react';

import {featureEnabled, FeatureFlag} from '../app/Flags';
import {filterByQuery} from '../app/GraphQueryImpl';
import {GanttChartLayout} from '../gantt/Constants';
import {GanttChartMode} from '../gantt/GanttChart';
Expand Down Expand Up @@ -92,6 +93,33 @@ function buildMatrixData(
runs: [],
};
const steps = layout.boxes.map(({node}) => {
const blankState = {
name: node.name,
color: 'MISSING' as StatusSquareColor,
unix: 0,
};

if (!partition.runs.length) {
return blankState;
}

if (featureEnabled(FeatureFlag.flagNewPartitionsView)) {
const lastRun = partition.runs[partition.runs.length - 1];
const lastRunStepStatus = lastRun.stepStats.find((stats) =>
isStepKeyForNode(node.name, stats.stepKey),
)?.status;

if (!lastRunStepStatus || lastRunStepStatus === StepEventStatus.IN_PROGRESS) {
return blankState;
}

return {
name: node.name,
unix: getStartTime(lastRun),
color: lastRunStepStatus,
};
}

const datapoints = partition.runs
.map((r, idx) => ({
runIdx: idx,
Expand All @@ -102,12 +130,9 @@ function buildMatrixData(
!!s.status && s.status !== StepEventStatus.IN_PROGRESS,
)
.reverse();

if (datapoints.length === 0) {
return {
name: node.name,
color: 'MISSING' as StatusSquareColor,
unix: 0,
};
return blankState;
}

// Calculate the box color for this step. CSS classes are in the "previous-final" format, and we'll
Expand All @@ -120,7 +145,6 @@ function buildMatrixData(
const color = prev
? (`${prev.status}-${datapoints[0].status}` as StatusSquareColor)
: datapoints[0].status;

return {
name: node.name,
unix: getStartTime(partition.runs[datapoints[0].runIdx]),
Expand Down

0 comments on commit d6b4eaf

Please sign in to comment.