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     Grid,
  19 } from '@material-ui/core';
  20 import { ArvadosTheme } from 'common/custom-theme';
  21 import { WorkflowIcon } from 'components/icon/icon';
  22 import { DataTableDefaultView } from 'components/data-table-default-view/data-table-default-view';
  23 import { WorkflowResource, parseWorkflowDefinition, getWorkflowInputs, getInputLabel, stringifyInputType } from 'models/workflow';
  24 import { DetailsAttribute } from 'components/details-attribute/details-attribute';
  25 import { ResourceOwnerWithName } from 'views-components/data-explorer/renderers';
  26 import { formatDate } from "common/formatters";
  27
  28 export type CssRules = 'root' | 'tab' | 'inputTab' | 'graphTab' | 'graphTabWithChosenWorkflow' | 'descriptionTab' | 'inputsTable';
  29
  30 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
  31     root: {
  32         height: '100%'
  33     },
  34     tab: {
  35         minWidth: '33%'
  36     },
  37     inputTab: {
  38         overflow: 'auto',
  39         maxHeight: '300px',
  40         marginTop: theme.spacing.unit
  41     },
  42     graphTab: {
  43         marginTop: theme.spacing.unit,
  44     },
  45     graphTabWithChosenWorkflow: {
  46         overflow: 'auto',
  47         height: '450px',
  48         marginTop: theme.spacing.unit,
  49     },
  50     descriptionTab: {
  51         overflow: 'auto',
  52         maxHeight: '300px',
  53         marginTop: theme.spacing.unit,
  54     },
  55     inputsTable: {
  56         tableLayout: 'fixed',
  57     },
  58 });
  59
  60 interface WorkflowDetailsCardDataProps {
  61     workflow?: WorkflowResource;
  62 }
  63
  64 type WorkflowDetailsCardProps = WorkflowDetailsCardDataProps & WithStyles<CssRules>;
  65
  66 export const WorkflowDetailsCard = withStyles(styles)(
  67     class extends React.Component<WorkflowDetailsCardProps> {
  68         state = {
  69             value: 0,
  70         };
  71
  72         handleChange = (event: React.MouseEvent<HTMLElement>, value: number) => {
  73             this.setState({ value });
  74         }
  75
  76         render() {
  77             const { classes, workflow } = this.props;
  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="Details" />
  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.descriptionTab}>
 103                     {workflow
 104                         ? <WorkflowDetailsAttributes workflow={workflow} />
 105                         : <DataTableDefaultView
 106                             icon={WorkflowIcon}
 107                             messages={['Please select a workflow to see its details.']} />
 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 undefined;
 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     });
 143
 144 export const WorkflowDetailsAttributes = ({ workflow }: WorkflowDetailsCardDataProps) => {
 145     return <Grid container>
 146         <Grid item xs={12} >
 147             <DetailsAttribute
 148                 label={"Workflow UUID"}
 149                 linkToUuid={workflow?.uuid} />
 150         </Grid>
 151         <Grid item xs={12} >
 152             <DetailsAttribute
 153                 label='Owner' linkToUuid={workflow?.ownerUuid}
 154                 uuidEnhancer={(uuid: string) => <ResourceOwnerWithName uuid={uuid} />} />
 155         </Grid>
 156         <Grid item xs={12}>
 157             <DetailsAttribute label='Created at' value={formatDate(workflow?.createdAt)} />
 158         </Grid>
 159         <Grid item xs={12}>
 160             <DetailsAttribute label='Last modified' value={formatDate(workflow?.modifiedAt)} />
 161         </Grid>
 162         <Grid item xs={12} >
 163             <DetailsAttribute
 164                 label='Last modified by user' linkToUuid={workflow?.modifiedByUserUuid}
 165                 uuidEnhancer={(uuid: string) => <ResourceOwnerWithName uuid={uuid} />} />
 166         </Grid>
 167     </Grid >;
 168 };