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