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 {
   7     StyleRulesCallback,
   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 { WorkflowResource, parseWorkflowDefinition, getWorkflowInputs, getInputLabel, stringifyInputType } from '~/models/workflow';
  23 import { WorkflowGraph } from "~/views/workflow-panel/workflow-graph";
  24
  25 export type CssRules = 'root' | 'tab' | 'inputTab' | 'graphTab' | 'descriptionTab' | 'inputsTable';
  26
  27 const styles: StyleRulesCallback<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.unit,
  38         '&:last-child': {
  39             paddingBottom: theme.spacing.unit / 2,
  40         }
  41     },
  42     graphTab: {
  43         overflow: 'auto',
  44         height: '450px',
  45         marginTop: theme.spacing.unit,
  46     },
  47     descriptionTab: {
  48         overflow: 'auto',
  49         maxHeight: '300px',
  50         marginTop: theme.spacing.unit,
  51     },
  52     inputsTable: {
  53         tableLayout: 'fixed',
  54     },
  55 });
  56
  57 interface WorkflowDetailsCardDataProps {
  58     workflow?: WorkflowResource;
  59 }
  60
  61 type WorkflowDetailsCardProps = WorkflowDetailsCardDataProps & WithStyles<CssRules>;
  62
  63 export const WorkflowDetailsCard = withStyles(styles)(
  64     class extends React.Component<WorkflowDetailsCardProps> {
  65         state = {
  66             value: 0,
  67         };
  68
  69         handleChange = (event: React.MouseEvent<HTMLElement>, value: number) => {
  70             this.setState({ value });
  71         }
  72
  73         render() {
  74             const { classes, workflow } = this.props;
  75             if (workflow) {
  76                 console.log(workflow.definition);
  77             }
  78             const { value } = this.state;
  79             return <div className={classes.root}>
  80                 <Tabs value={value} onChange={this.handleChange} centered={true}>
  81                     <Tab className={classes.tab} label="Description" />
  82                     <Tab className={classes.tab} label="Inputs" />
  83                     <Tab className={classes.tab} label="Graph" />
  84                 </Tabs>
  85                 {value === 0 && <CardContent className={classes.descriptionTab}>
  86                     {workflow ? <div>
  87                         {workflow.description}
  88                     </div> : (
  89                             <DataTableDefaultView
  90                                 icon={WorkflowIcon}
  91                                 messages={['Please select a workflow to see its description.']} />
  92                         )}
  93                 </CardContent>}
  94                 {value === 1 && <CardContent className={classes.inputTab}>
  95                     {workflow
  96                         ? this.renderInputsTable()
  97                         : <DataTableDefaultView
  98                             icon={WorkflowIcon}
  99                             messages={['Please select a workflow to see its inputs.']} />
 100                     }
 101                 </CardContent>}
 102                 {value === 2 && <CardContent className={classes.graphTab}>
 103                     {workflow
 104                         ? <WorkflowGraph workflow={workflow} />
 105                         : <DataTableDefaultView
 106                             icon={WorkflowIcon}
 107                             messages={['Please select a workflow to see its visualisation.']} />
 108                     }
 109                 </CardContent>}
 110             </div>;
 111         }
 112
 113         get inputs() {
 114             if (this.props.workflow) {
 115                 const definition = parseWorkflowDefinition(this.props.workflow);
 116                 if (definition) {
 117                     return getWorkflowInputs(definition);
 118                 }
 119             }
 120             return;
 121         }
 122
 123         renderInputsTable() {
 124             return <Table className={this.props.classes.inputsTable}>
 125                 <TableHead>
 126                     <TableRow>
 127                         <TableCell>Label</TableCell>
 128                         <TableCell>Type</TableCell>
 129                         <TableCell>Description</TableCell>
 130                     </TableRow>
 131                 </TableHead>
 132                 <TableBody>
 133                     {this.inputs && this.inputs.map(input =>
 134                         <TableRow key={input.id}>
 135                             <TableCell>{getInputLabel(input)}</TableCell>
 136                             <TableCell>{stringifyInputType(input)}</TableCell>
 137                             <TableCell>{input.doc}</TableCell>
 138                         </TableRow>)}
 139                 </TableBody>
 140             </Table>;
 141         }
 142     });