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