services/workbench2/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 React from 'react';
   6 import { CustomStyleRulesCallback } from 'common/custom-theme';
   7 import {
   8     WithStyles,
   9     withStyles,
  10     CardContent,
  11     Tab,
  12     Tabs,
  13     Table,
  14     TableHead,
  15     TableCell,
  16     TableBody,
  17     TableRow,
  18 } from '@material-ui/core';
  19 import { ArvadosTheme } from 'common/custom-theme';
  20 import { WorkflowIcon } from 'components/icon/icon';
  21 import { DataTableDefaultView } from 'components/data-table-default-view/data-table-default-view';
  22 import { parseWorkflowDefinition, getWorkflowInputs, getInputLabel, stringifyInputType } from 'models/workflow';
  23 import { WorkflowDetailsCardDataProps, WorkflowDetailsAttributes } from 'views-components/details-panel/workflow-details';
  24
  25 export type CssRules = 'root' | 'tab' | 'inputTab' | 'graphTab' | 'graphTabWithChosenWorkflow' | 'descriptionTab' | 'inputsTable';
  26
  27 const styles: CustomStyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
  28     root: {
  29         height: '100%'
  30     },
  31     tab: {
  32         minWidth: '33%'
  33     },
  34     inputTab: {
  35         overflow: 'auto',
  36         maxHeight: '300px',
  37         marginTop: theme.spacing(1)
  38     },
  39     graphTab: {
  40         marginTop: theme.spacing(1),
  41     },
  42     graphTabWithChosenWorkflow: {
  43         overflow: 'auto',
  44         height: '450px',
  45         marginTop: theme.spacing(1),
  46     },
  47     descriptionTab: {
  48         overflow: 'auto',
  49         maxHeight: '300px',
  50         marginTop: theme.spacing(1),
  51     },
  52     inputsTable: {
  53         tableLayout: 'fixed',
  54     },
  55 });
  56
  57 type WorkflowDetailsCardProps = WorkflowDetailsCardDataProps & WithStyles<CssRules>;
  58
  59 export const WorkflowDetailsCard = withStyles(styles)(
  60     class extends React.Component<WorkflowDetailsCardProps> {
  61         state = {
  62             value: 0,
  63         };
  64
  65         handleChange = (event: React.MouseEvent<HTMLElement>, value: number) => {
  66             this.setState({ value });
  67         }
  68
  69         render() {
  70             const { classes, workflow } = this.props;
  71             const { value } = this.state;
  72             return <div className={classes.root}>
  73                 <Tabs value={value} onChange={this.handleChange} centered={true}>
  74                     <Tab className={classes.tab} label="Description" />
  75                     <Tab className={classes.tab} label="Inputs" />
  76                     <Tab className={classes.tab} label="Details" />
  77                 </Tabs>
  78                 {value === 0 && <CardContent className={classes.descriptionTab}>
  79                     {workflow ? <div>
  80                         {workflow.description}
  81                     </div> : (
  82                         <DataTableDefaultView
  83                             icon={WorkflowIcon}
  84                             messages={['Please select a workflow to see its description.']} />
  85                     )}
  86                 </CardContent>}
  87                 {value === 1 && <CardContent className={classes.inputTab}>
  88                     {workflow
  89                         ? this.renderInputsTable()
  90                         : <DataTableDefaultView
  91                             icon={WorkflowIcon}
  92                             messages={['Please select a workflow to see its inputs.']} />
  93                     }
  94                 </CardContent>}
  95                 {value === 2 && <CardContent className={classes.descriptionTab}>
  96                     {workflow
  97                         ? <WorkflowDetailsAttributes workflow={workflow} />
  98                         : <DataTableDefaultView
  99                             icon={WorkflowIcon}
 100                             messages={['Please select a workflow to see its details.']} />
 101                     }
 102                 </CardContent>}
 103             </div>;
 104         }
 105
 106         get inputs() {
 107             if (this.props.workflow) {
 108                 const definition = parseWorkflowDefinition(this.props.workflow);
 109                 if (definition) {
 110                     return getWorkflowInputs(definition);
 111                 }
 112             }
 113             return undefined;
 114         }
 115
 116         renderInputsTable() {
 117             return <Table className={this.props.classes.inputsTable}>
 118                 <TableHead>
 119                     <TableRow>
 120                         <TableCell>Label</TableCell>
 121                         <TableCell>Type</TableCell>
 122                         <TableCell>Description</TableCell>
 123                     </TableRow>
 124                 </TableHead>
 125                 <TableBody>
 126                     {this.inputs && this.inputs.map(input =>
 127                         <TableRow key={input.id}>
 128                             <TableCell>{getInputLabel(input)}</TableCell>
 129                             <TableCell>{stringifyInputType(input)}</TableCell>
 130                             <TableCell>{input.doc}</TableCell>
 131                         </TableRow>)}
 132                 </TableBody>
 133             </Table>;
 134         }
 135     });