src/views/workflow-panel/workflow-description-card.tsx

   1 // Copyright (C) The Arvados Authors. All rights reserved.
   2 //
   3 // SPDX-License-Identifier: AGPL-3.0
   4
   5 import * as React from 'react';
   6 import { StyleRulesCallback, WithStyles, withStyles, CardContent, Tab, Tabs, Paper } from '@material-ui/core';
   7 import { ArvadosTheme } from '~/common/custom-theme';
   8 import { WorkflowIcon } from '~/components/icon/icon';
   9 import { DataTableDefaultView } from '~/components/data-table-default-view/data-table-default-view';
  10 import { WorkflowResource, parseWorkflowDefinition, getWorkflowInputs, stringifyInputType } from '~/models/workflow';
  11 import { DetailsAttribute } from '~/components/details-attribute/details-attribute';
  12
  13 export type CssRules = 'root' | 'tab';
  14
  15 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
  16     root: {
  17         height: '100%',
  18     },
  19     tab: {
  20         minWidth: '50%'
  21     }
  22 });
  23
  24 interface WorkflowDetailsCardDataProps {
  25     workflow?: WorkflowResource;
  26 }
  27
  28 type WorkflowDetailsCardProps = WorkflowDetailsCardDataProps & WithStyles<CssRules>;
  29
  30 export const WorkflowDetailsCard = withStyles(styles)(
  31     class extends React.Component<WorkflowDetailsCardProps> {
  32         state = {
  33             value: 0,
  34         };
  35
  36         handleChange = (event: React.MouseEvent<HTMLElement>, value: number) => {
  37             this.setState({ value });
  38         }
  39
  40         render() {
  41             const { classes, workflow } = this.props;
  42             const { value } = this.state;
  43             return <Paper className={classes.root}>
  44                 <Tabs value={value} onChange={this.handleChange} centered={true}>
  45                     <Tab className={classes.tab} label="Description" />
  46                     <Tab className={classes.tab} label="Inputs" />
  47                 </Tabs>
  48                 {value === 0 && <CardContent>
  49                     {workflow
  50                         ? workflow.description
  51                         : <DataTableDefaultView
  52                             icon={WorkflowIcon}
  53                             messages={['Please select a workflow to see its description.']} />}
  54                 </CardContent>}
  55                 {value === 1 && <CardContent>
  56                     {workflow && this.inputs
  57                         ? this.inputs.map(input => <DetailsAttribute key={input.id} label={input.label || ''} value={stringifyInputType(input)} />)
  58                         : <DataTableDefaultView
  59                             icon={WorkflowIcon}
  60                             messages={['Please select a workflow to see its description.']} />}
  61                 </CardContent>}
  62             </Paper>;
  63         }
  64
  65         get inputs() {
  66             if (this.props.workflow) {
  67                 const definition = parseWorkflowDefinition(this.props.workflow);
  68                 if (definition) {
  69                     return getWorkflowInputs(definition);
  70                 }
  71             }
  72             return;
  73         }
  74     });