Skip to content

Commit

Permalink
make sure only pipeline is defined
Browse files Browse the repository at this point in the history
  • Loading branch information
Yasser Elsayed committed Dec 3, 2018
1 parent c522b49 commit c4660e6
Show file tree
Hide file tree
Showing 3 changed files with 64 additions and 66 deletions.
2 changes: 1 addition & 1 deletion frontend/src/pages/PipelineDetails.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -98,7 +98,7 @@ describe('PipelineDetails', () => {
getExperimentSpy.mockImplementation(() =>
Promise.resolve({ id: 'test-experiment-id', name: 'test experiment' } as ApiExperiment));
getExperimentSpy.mockClear();
getTemplateSpy.mockImplementation(() => Promise.resolve('{}'));
getTemplateSpy.mockImplementation(() => Promise.resolve({ template: 'test template' }));
getTemplateSpy.mockClear();
createGraphSpy.mockImplementation(() => new graphlib.Graph());
createGraphSpy.mockClear();
Expand Down
126 changes: 62 additions & 64 deletions frontend/src/pages/PipelineDetails.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -157,79 +157,77 @@ class PipelineDetails extends Page<{}, PipelineDetailsState> {
return (
<div className={classes(commonCss.page, padding(20, 't'))}>

{!!pipeline && (
<div className={commonCss.page}>
<MD2Tabs
selectedTab={selectedTab}
onSwitch={(tab: number) => this.setStateSafe({ selectedTab: tab })}
tabs={['Graph', 'Source']}
/>
<div className={commonCss.page}>
<MD2Tabs
selectedTab={selectedTab}
onSwitch={(tab: number) => this.setStateSafe({ selectedTab: tab })}
tabs={['Graph', 'Source']}
/>
<div className={commonCss.page}>
{selectedTab === 0 && <div className={commonCss.page}>
{this.state.graph && <div className={commonCss.page} style={{ position: 'relative', overflow: 'hidden' }}>
{summaryShown && (
<Paper className={css.summaryCard}>
<div style={{ alignItems: 'baseline', display: 'flex', justifyContent: 'space-between' }}>
<div className={commonCss.header}>
Summary
{selectedTab === 0 && <div className={commonCss.page}>
{this.state.graph && <div className={commonCss.page} style={{ position: 'relative', overflow: 'hidden' }}>
{!!pipeline && summaryShown && (
<Paper className={css.summaryCard}>
<div style={{ alignItems: 'baseline', display: 'flex', justifyContent: 'space-between' }}>
<div className={commonCss.header}>
Summary
</div>
<Button onClick={() => this.setStateSafe({ summaryShown: false })} color='secondary'>
Hide
<Button onClick={() => this.setStateSafe({ summaryShown: false })} color='secondary'>
Hide
</Button>
</div>
<div className={css.summaryKey}>Uploaded on</div>
<div>{formatDateString(pipeline.created_at)}</div>
<div className={css.summaryKey}>Description</div>
<div>{pipeline.description}</div>
</Paper>
)}
</div>
<div className={css.summaryKey}>Uploaded on</div>
<div>{formatDateString(pipeline.created_at)}</div>
<div className={css.summaryKey}>Description</div>
<div>{pipeline.description}</div>
</Paper>
)}

<Graph graph={this.state.graph} selectedNodeId={selectedNodeId}
onClick={id => this.setStateSafe({ selectedNodeId: id })} />
<Graph graph={this.state.graph} selectedNodeId={selectedNodeId}
onClick={id => this.setStateSafe({ selectedNodeId: id })} />

<SidePanel isOpen={!!selectedNodeId}
title={selectedNodeId} onClose={() => this.setStateSafe({ selectedNodeId: '' })}>
<div className={commonCss.page}>
{!selectedNodeInfo && (
<div className={commonCss.absoluteCenter}>Unable to retrieve node info</div>
)}
{!!selectedNodeInfo && <div className={padding(20, 'lr')}>
<StaticNodeDetails nodeInfo={selectedNodeInfo} />
</div>}
</div>
</SidePanel>
<div className={css.footer}>
{!summaryShown && (
<Button onClick={() => this.setStateSafe({ summaryShown: !summaryShown })} color='secondary'>
Show summary
</Button>
<SidePanel isOpen={!!selectedNodeId}
title={selectedNodeId} onClose={() => this.setStateSafe({ selectedNodeId: '' })}>
<div className={commonCss.page}>
{!selectedNodeInfo && (
<div className={commonCss.absoluteCenter}>Unable to retrieve node info</div>
)}
<div className={classes(commonCss.flex, summaryShown && css.footerInfoOffset)}>
<InfoIcon style={{ color: color.lowContrast, height: 16, width: 16 }} />
<span className={css.infoSpan}>Static pipeline graph</span>
</div>
{!!selectedNodeInfo && <div className={padding(20, 'lr')}>
<StaticNodeDetails nodeInfo={selectedNodeInfo} />
</div>}
</div>
</SidePanel>
<div className={css.footer}>
{!summaryShown && (
<Button onClick={() => this.setStateSafe({ summaryShown: !summaryShown })} color='secondary'>
Show summary
</Button>
)}
<div className={classes(commonCss.flex, summaryShown && css.footerInfoOffset)}>
<InfoIcon style={{ color: color.lowContrast, height: 16, width: 16 }} />
<span className={css.infoSpan}>Static pipeline graph</span>
</div>
</div>}
{!this.state.graph && <span style={{ margin: '40px auto' }}>No graph to show</span>}
</div>}
{selectedTab === 1 &&
<div className={css.containerCss}>
<CodeMirror
value={templateYaml || ''}
editorDidMount={(editor) => editor.refresh()}
options={{
lineNumbers: true,
lineWrapping: true,
mode: 'text/yaml',
readOnly: true,
theme: 'default',
}}
/>
</div>
}
</div>
</div>}
{!this.state.graph && <span style={{ margin: '40px auto' }}>No graph to show</span>}
</div>}
{selectedTab === 1 && !!templateYaml &&
<div className={css.containerCss}>
<CodeMirror
value={templateYaml || ''}
editorDidMount={(editor) => editor.refresh()}
options={{
lineNumbers: true,
lineWrapping: true,
mode: 'text/yaml',
readOnly: true,
theme: 'default',
}}
/>
</div>
}
</div>
)}
</div>
</div>
);
}
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/pages/__snapshots__/PipelineDetails.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -809,7 +809,7 @@ exports[`PipelineDetails shows pipeline source code when config tab is clicked 1
"theme": "default",
}
}
value=""
value="test template"
/>
</div>
</div>
Expand Down

0 comments on commit c4660e6

Please sign in to comment.