Changeset View
Changeset View
Standalone View
Standalone View
js_modules/dagit/packages/core/src/partitions/PartitionGraphSet.tsx
import {gql} from '@apollo/client'; | import {gql} from '@apollo/client'; | ||||
import {Colors} from '@blueprintjs/core'; | import {Colors} from '@blueprintjs/core'; | ||||
import * as React from 'react'; | import * as React from 'react'; | ||||
import styled from 'styled-components/macro'; | import styled from 'styled-components/macro'; | ||||
import {PartitionGraph} from './PartitionGraph'; | import {PartitionGraph} from './PartitionGraph'; | ||||
import { | import { | ||||
PIPELINE_LABEL, | |||||
PARTITION_GRAPH_FRAGMENT, | PARTITION_GRAPH_FRAGMENT, | ||||
StepSelector, | StepSelector, | ||||
getPipelineDurationForRun, | getPipelineDurationForRun, | ||||
getStepDurationsForRun, | getStepDurationsForRun, | ||||
getPipelineExpectationFailureForRun, | getPipelineExpectationFailureForRun, | ||||
getPipelineExpectationSuccessForRun, | getPipelineExpectationSuccessForRun, | ||||
getPipelineExpectationRateForRun, | getPipelineExpectationRateForRun, | ||||
getPipelineMaterializationCountForRun, | getPipelineMaterializationCountForRun, | ||||
getStepExpectationFailureForRun, | getStepExpectationFailureForRun, | ||||
getStepExpectationRateForRun, | getStepExpectationRateForRun, | ||||
getStepExpectationSuccessForRun, | getStepExpectationSuccessForRun, | ||||
getStepMaterializationCountForRun, | getStepMaterializationCountForRun, | ||||
} from './PartitionGraphUtils'; | } from './PartitionGraphUtils'; | ||||
import {PartitionGraphSetRunFragment} from './types/PartitionGraphSetRunFragment'; | import {PartitionGraphSetRunFragment} from './types/PartitionGraphSetRunFragment'; | ||||
export const PartitionGraphSet: React.FunctionComponent<{ | export const PartitionGraphSet: React.FunctionComponent<{ | ||||
partitions: {name: string; runs: PartitionGraphSetRunFragment[]}[]; | partitions: {name: string; runs: PartitionGraphSetRunFragment[]}[]; | ||||
allStepKeys: string[]; | allStepKeys: string[]; | ||||
}> = ({partitions, allStepKeys}) => { | }> = ({partitions, allStepKeys}) => { | ||||
const initial: {[stepKey: string]: boolean} = {[PIPELINE_LABEL]: true}; | const [hiddenStepKeys, setHiddenStepKeys] = React.useState<string[]>([]); | ||||
allStepKeys.forEach((stepKey) => (initial[stepKey] = true)); | |||||
const [selectedStepKeys, setSelectedStepKeys] = React.useState(initial); | |||||
const durationGraph = React.useRef<any>(undefined); | const durationGraph = React.useRef<any>(undefined); | ||||
const materializationGraph = React.useRef<any>(undefined); | const materializationGraph = React.useRef<any>(undefined); | ||||
const successGraph = React.useRef<any>(undefined); | const successGraph = React.useRef<any>(undefined); | ||||
const failureGraph = React.useRef<any>(undefined); | const failureGraph = React.useRef<any>(undefined); | ||||
const rateGraph = React.useRef<any>(undefined); | const rateGraph = React.useRef<any>(undefined); | ||||
const graphs = [durationGraph, materializationGraph, successGraph, failureGraph, rateGraph]; | const graphs = [durationGraph, materializationGraph, successGraph, failureGraph, rateGraph]; | ||||
const onStepChange = (selectedKeys: {[stepKey: string]: boolean}) => { | const onChangeHiddenStepKeys = (hiddenKeys: string[]) => { | ||||
setSelectedStepKeys(selectedKeys); | setHiddenStepKeys(hiddenKeys); | ||||
graphs.forEach((graph) => { | graphs.forEach((graph) => { | ||||
const chart = graph?.current?.chart?.current?.chartInstance; | const chart = graph?.current?.chart?.current?.chartInstance; | ||||
const datasets = chart?.data?.datasets || []; | const datasets = chart?.data?.datasets || []; | ||||
datasets.forEach((dataset: any, idx: number) => { | datasets.forEach((dataset: any, idx: number) => { | ||||
const meta = chart.getDatasetMeta(idx); | const meta = chart.getDatasetMeta(idx); | ||||
meta.hidden = dataset.label in selectedKeys ? !selectedKeys[dataset.label] : false; | meta.hidden = hiddenKeys.includes(dataset.label); | ||||
}); | }); | ||||
}); | }); | ||||
}; | }; | ||||
const runsByPartitionName = {}; | const runsByPartitionName = {}; | ||||
partitions.forEach((partition) => { | partitions.forEach((partition) => { | ||||
runsByPartitionName[partition.name] = partition.runs; | runsByPartitionName[partition.name] = partition.runs; | ||||
}); | }); | ||||
Show All 39 Lines | <PartitionContentContainer> | ||||
runsByPartitionName={runsByPartitionName} | runsByPartitionName={runsByPartitionName} | ||||
getPipelineDataForRun={getPipelineExpectationRateForRun} | getPipelineDataForRun={getPipelineExpectationRateForRun} | ||||
getStepDataForRun={getStepExpectationRateForRun} | getStepDataForRun={getStepExpectationRateForRun} | ||||
ref={rateGraph} | ref={rateGraph} | ||||
/> | /> | ||||
</div> | </div> | ||||
<div style={{width: 450}}> | <div style={{width: 450}}> | ||||
<NavContainer> | <NavContainer> | ||||
<StepSelector selected={selectedStepKeys} onChange={onStepChange} /> | <StepSelector | ||||
all={allStepKeys} | |||||
hidden={hiddenStepKeys} | |||||
onChangeHidden={onChangeHiddenStepKeys} | |||||
/> | |||||
</NavContainer> | </NavContainer> | ||||
</div> | </div> | ||||
</PartitionContentContainer> | </PartitionContentContainer> | ||||
); | ); | ||||
}; | }; | ||||
export const PARTITION_GRAPH_SET_RUN_FRAGMENT = gql` | export const PARTITION_GRAPH_SET_RUN_FRAGMENT = gql` | ||||
fragment PartitionGraphSetRunFragment on PipelineRun { | fragment PartitionGraphSetRunFragment on PipelineRun { | ||||
Show All 25 Lines |