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, Typography, List, ListItem, Table, TableHead, TableCell, TableBody, TableRow } 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, getInputLabel, stringifyInputType } from '~/models/workflow';
  11
  12 export type CssRules = 'root' | 'tab' | 'inputTab';
  13
  14 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
  15     root: {
  16         height: '100%'
  17     },
  18     tab: {
  19         minWidth: '50%'
  20     },
  21     inputTab: {
  22         overflowX: 'auto',
  23         overflowY: 'hidden',
  24         '&:last-child': {
  25             paddingBottom: theme.spacing.unit / 2,
  26         }
  27     }
  28 });
  29
  30 interface WorkflowDetailsCardDataProps {
  31     workflow?: WorkflowResource;
  32 }
  33
  34 type WorkflowDetailsCardProps = WorkflowDetailsCardDataProps & WithStyles<CssRules>;
  35
  36 export const WorkflowDetailsCard = withStyles(styles)(
  37     class extends React.Component<WorkflowDetailsCardProps> {
  38         state = {
  39             value: 0,
  40         };
  41
  42         handleChange = (event: React.MouseEvent<HTMLElement>, value: number) => {
  43             this.setState({ value });
  44         }
  45
  46         render() {
  47             const { classes, workflow } = this.props;
  48             const { value } = this.state;
  49             return <div className={classes.root}>
  50                 <Tabs value={value} onChange={this.handleChange} centered={true}>
  51                     <Tab className={classes.tab} label="Description" />
  52                     <Tab className={classes.tab} label="Inputs" />
  53                 </Tabs>
  54                 {value === 0 && <CardContent>
  55                     {workflow ? (
  56                         workflow.description
  57                     ) : (
  58                             <DataTableDefaultView
  59                                 icon={WorkflowIcon}
  60                                 messages={['Please select a workflow to see its description.']} />
  61                         )}
  62                 </CardContent>}
  63                 {value === 1 && <CardContent className={classes.inputTab}>
  64                     {workflow
  65                         ? this.renderInputsTable()
  66                         : <DataTableDefaultView
  67                             icon={WorkflowIcon}
  68                             messages={['Please select a workflow to see its inputs.']} />
  69                     }
  70                 </CardContent>}
  71             </div>;
  72         }
  73
  74         get inputs() {
  75             if (this.props.workflow) {
  76                 const definition = parseWorkflowDefinition(this.props.workflow);
  77                 if (definition) {
  78                     return getWorkflowInputs(definition);
  79                 }
  80             }
  81             return;
  82         }
  83
  84         renderInputsTable() {
  85             return <Table>
  86                 <TableHead>
  87                     <TableRow>
  88                         <TableCell>Label</TableCell>
  89                         <TableCell>Type</TableCell>
  90                         <TableCell>Description</TableCell>
  91                     </TableRow>
  92                 </TableHead>
  93                 <TableBody>
  94                     {this.inputs && this.inputs.map(input =>
  95                         <TableRow key={input.id}>
  96                             <TableCell>{getInputLabel(input)}</TableCell>
  97                             <TableCell>{stringifyInputType(input)}</TableCell>
  98                             <TableCell>{input.doc}</TableCell>
  99                         </TableRow>)}
 100                 </TableBody>
 101             </Table>;
 102         }
 103     });