projects
/
arvados.git
/ blobdiff
summary
|
shortlog
|
log
|
commit
|
commitdiff
|
tree
raw
|
inline
| side by side
Create my account view
[arvados.git]
/
src
/
views
/
workflow-panel
/
workflow-description-card.tsx
diff --git
a/src/views/workflow-panel/workflow-description-card.tsx
b/src/views/workflow-panel/workflow-description-card.tsx
index ecbc9f0c0a2e7b83a1849ffbc7ad578737bf76c7..02408b06bb7b6fcb03b76760ccfebbb6055f28eb 100644
(file)
--- a/
src/views/workflow-panel/workflow-description-card.tsx
+++ b/
src/views/workflow-panel/workflow-description-card.tsx
@@
-3,28
+3,55
@@
// SPDX-License-Identifier: AGPL-3.0
import * as React from 'react';
// SPDX-License-Identifier: AGPL-3.0
import * as React from 'react';
-import { StyleRulesCallback, WithStyles, withStyles, CardContent, Tab, Tabs, Typography, List, ListItem, Table, TableHead, TableCell, TableBody, TableRow } from '@material-ui/core';
+import {
+ StyleRulesCallback,
+ WithStyles,
+ withStyles,
+ CardContent,
+ Tab,
+ Tabs,
+ Table,
+ TableHead,
+ TableCell,
+ TableBody,
+ TableRow
+} from '@material-ui/core';
import { ArvadosTheme } from '~/common/custom-theme';
import { WorkflowIcon } from '~/components/icon/icon';
import { DataTableDefaultView } from '~/components/data-table-default-view/data-table-default-view';
import { WorkflowResource, parseWorkflowDefinition, getWorkflowInputs, getInputLabel, stringifyInputType } from '~/models/workflow';
import { ArvadosTheme } from '~/common/custom-theme';
import { WorkflowIcon } from '~/components/icon/icon';
import { DataTableDefaultView } from '~/components/data-table-default-view/data-table-default-view';
import { WorkflowResource, parseWorkflowDefinition, getWorkflowInputs, getInputLabel, stringifyInputType } from '~/models/workflow';
+import { WorkflowGraph } from "~/views/workflow-panel/workflow-graph";
-export type CssRules = 'root' | 'tab' | 'inputTab';
+export type CssRules = 'root' | 'tab' | 'inputTab'
| 'graphTab' | 'descriptionTab' | 'inputsTable'
;
const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
root: {
height: '100%'
},
tab: {
const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
root: {
height: '100%'
},
tab: {
- minWidth: '
50
%'
+ minWidth: '
33
%'
},
inputTab: {
},
inputTab: {
- overflowX: 'auto',
- overflowY: 'hidden',
+ overflow: 'auto',
+ maxHeight: '300px',
+ marginTop: theme.spacing.unit,
'&:last-child': {
paddingBottom: theme.spacing.unit / 2,
}
'&:last-child': {
paddingBottom: theme.spacing.unit / 2,
}
- }
+ },
+ graphTab: {
+ overflow: 'auto',
+ height: '450px',
+ marginTop: theme.spacing.unit,
+ },
+ descriptionTab: {
+ overflow: 'auto',
+ maxHeight: '300px',
+ marginTop: theme.spacing.unit,
+ },
+ inputsTable: {
+ tableLayout: 'fixed',
+ },
});
interface WorkflowDetailsCardDataProps {
});
interface WorkflowDetailsCardDataProps {
@@
-45,16
+72,20
@@
export const WorkflowDetailsCard = withStyles(styles)(
render() {
const { classes, workflow } = this.props;
render() {
const { classes, workflow } = this.props;
+ if (workflow) {
+ console.log(workflow.definition);
+ }
const { value } = this.state;
return <div className={classes.root}>
<Tabs value={value} onChange={this.handleChange} centered={true}>
<Tab className={classes.tab} label="Description" />
<Tab className={classes.tab} label="Inputs" />
const { value } = this.state;
return <div className={classes.root}>
<Tabs value={value} onChange={this.handleChange} centered={true}>
<Tab className={classes.tab} label="Description" />
<Tab className={classes.tab} label="Inputs" />
+ <Tab className={classes.tab} label="Graph" />
</Tabs>
</Tabs>
- {value === 0 && <CardContent>
- {workflow ?
(
- workflow.description
-
)
: (
+ {value === 0 && <CardContent
className={classes.descriptionTab}
>
+ {workflow ?
<div>
+ {workflow.description}
+
</div>
: (
<DataTableDefaultView
icon={WorkflowIcon}
messages={['Please select a workflow to see its description.']} />
<DataTableDefaultView
icon={WorkflowIcon}
messages={['Please select a workflow to see its description.']} />
@@
-68,6
+99,14
@@
export const WorkflowDetailsCard = withStyles(styles)(
messages={['Please select a workflow to see its inputs.']} />
}
</CardContent>}
messages={['Please select a workflow to see its inputs.']} />
}
</CardContent>}
+ {value === 2 && <CardContent className={classes.graphTab}>
+ {workflow
+ ? <WorkflowGraph workflow={workflow} />
+ : <DataTableDefaultView
+ icon={WorkflowIcon}
+ messages={['Please select a workflow to see its visualisation.']} />
+ }
+ </CardContent>}
</div>;
}
</div>;
}
@@
-82,7
+121,7
@@
export const WorkflowDetailsCard = withStyles(styles)(
}
renderInputsTable() {
}
renderInputsTable() {
- return <Table>
+ return <Table
className={this.props.classes.inputsTable}
>
<TableHead>
<TableRow>
<TableCell>Label</TableCell>
<TableHead>
<TableRow>
<TableCell>Label</TableCell>
@@
-100,4
+139,4
@@
export const WorkflowDetailsCard = withStyles(styles)(
</TableBody>
</Table>;
}
</TableBody>
</Table>;
}
- });
\ No newline at end of file
+ });