projects
/
arvados-workbench2.git
/ blobdiff
summary
|
shortlog
|
log
|
commit
|
commitdiff
|
tree
raw
|
inline
| side by side
15012: Shows process context menu on all_process page items.
[arvados-workbench2.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 a98356403bfd50ffd346c7b01c2d68c0dfd6de26..2294ab5e5373bb841bebac6752cf80c1a0d3da44 100644
(file)
--- a/
src/views/workflow-panel/workflow-description-card.tsx
+++ b/
src/views/workflow-panel/workflow-description-card.tsx
@@
-3,21
+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';
+export type CssRules = 'root' | 'tab'
| 'inputTab' | 'graphTab' | 'graphTabWithChosenWorkflow' | 'descriptionTab' | 'inputsTable'
;
const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
root: {
const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
root: {
- height: '100%'
,
+ height: '100%'
},
tab: {
},
tab: {
- minWidth: '50%'
- }
+ minWidth: '33%'
+ },
+ inputTab: {
+ overflow: 'auto',
+ maxHeight: '300px',
+ marginTop: theme.spacing.unit
+ },
+ graphTab: {
+ marginTop: theme.spacing.unit,
+ },
+ graphTabWithChosenWorkflow: {
+ overflow: 'auto',
+ height: '450px',
+ marginTop: theme.spacing.unit,
+ },
+ descriptionTab: {
+ overflow: 'auto',
+ maxHeight: '300px',
+ marginTop: theme.spacing.unit,
+ },
+ inputsTable: {
+ tableLayout: 'fixed',
+ },
});
interface WorkflowDetailsCardDataProps {
});
interface WorkflowDetailsCardDataProps {
@@
-43,17
+77,18
@@
export const WorkflowDetailsCard = withStyles(styles)(
<Tabs value={value} onChange={this.handleChange} centered={true}>
<Tab className={classes.tab} label="Description" />
<Tab className={classes.tab} label="Inputs" />
<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.']} />
)}
</CardContent>}
<DataTableDefaultView
icon={WorkflowIcon}
messages={['Please select a workflow to see its description.']} />
)}
</CardContent>}
- {value === 1 && <CardContent>
+ {value === 1 && <CardContent
className={classes.inputTab}
>
{workflow
? this.renderInputsTable()
: <DataTableDefaultView
{workflow
? this.renderInputsTable()
: <DataTableDefaultView
@@
-61,6
+96,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={workflow ? classes.graphTabWithChosenWorkflow : classes.graphTab}>
+ {workflow
+ ? <WorkflowGraph workflow={workflow} />
+ : <DataTableDefaultView
+ icon={WorkflowIcon}
+ messages={['Please select a workflow to see its visualisation.']} />
+ }
+ </CardContent>}
</div>;
}
</div>;
}
@@
-75,7
+118,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>
@@
-93,4
+136,4
@@
export const WorkflowDetailsCard = withStyles(styles)(
</TableBody>
</Table>;
}
</TableBody>
</Table>;
}
- });
\ No newline at end of file
+ });