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 { WorkflowGraph } from "views/workflow-panel/workflow-graph";
  25 import { DetailsAttribute } from 'components/details-attribute/details-attribute';
  26 import { ResourceOwnerWithName } from 'views-components/data-explorer/renderers';
  27 import { formatDate } from "common/formatters";
  28
  29 export type CssRules = 'root' | 'tab' | 'inputTab' | 'graphTab' | 'graphTabWithChosenWorkflow' | 'descriptionTab' | 'inputsTable';
  30
  31 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
  32     root: {
  33         height: '100%'
  34     },
  35     tab: {
  36         minWidth: '33%'
  37     },
  38     inputTab: {
  39         overflow: 'auto',
  40         maxHeight: '300px',
  41         marginTop: theme.spacing.unit
  42     },
  43     graphTab: {
  44         marginTop: theme.spacing.unit,
  45     },
  46     graphTabWithChosenWorkflow: {
  47         overflow: 'auto',
  48         height: '450px',
  49         marginTop: theme.spacing.unit,
  50     },
  51     descriptionTab: {
  52         overflow: 'auto',
  53         maxHeight: '300px',
  54         marginTop: theme.spacing.unit,
  55     },
  56     inputsTable: {
  57         tableLayout: 'fixed',
  58     },
  59 });
  60
  61 interface WorkflowDetailsCardDataProps {
  62     workflow?: WorkflowResource;
  63 }
  64
  65 type WorkflowDetailsCardProps = WorkflowDetailsCardDataProps & WithStyles<CssRules>;
  66
  67 export const WorkflowDetailsCard = withStyles(styles)(
  68     class extends React.Component<WorkflowDetailsCardProps> {
  69         state = {
  70             value: 0,
  71         };
  72
  73         handleChange = (event: React.MouseEvent<HTMLElement>, value: number) => {
  74             this.setState({ value });
  75         }
  76
  77         render() {
  78             const { classes, workflow } = this.props;
  79             const { value } = this.state;
  80             return <div className={classes.root}>
  81                 <Tabs value={value} onChange={this.handleChange} centered={true}>
  82                     <Tab className={classes.tab} label="Description" />
  83                     <Tab className={classes.tab} label="Inputs" />
  84                     <Tab className={classes.tab} label="Details" />
  85                     {/* <Tab className={classes.tab} label="Graph" /> */}
  86                 </Tabs>
  87                 {value === 0 && <CardContent className={classes.descriptionTab}>
  88                     {workflow ? <div>
  89                         {workflow.description}
  90                     </div> : (
  91                         <DataTableDefaultView
  92                             icon={WorkflowIcon}
  93                             messages={['Please select a workflow to see its description.']} />
  94                     )}
  95                 </CardContent>}
  96                 {value === 1 && <CardContent className={classes.inputTab}>
  97                     {workflow
  98                         ? this.renderInputsTable()
  99                         : <DataTableDefaultView
 100                             icon={WorkflowIcon}
 101                             messages={['Please select a workflow to see its inputs.']} />
 102                     }
 103                 </CardContent>}
 104                 {/* {value === 2 && <CardContent className={workflow ? classes.graphTabWithChosenWorkflow : classes.graphTab}>
 105                     {workflow
 106                     ? <WorkflowGraph workflow={workflow} />
 107                     : <DataTableDefaultView
 108                     icon={WorkflowIcon}
 109                     messages={['Please select a workflow to see its visualisation.']} />
 110                     }
 111                     </CardContent>} */}
 112                 {value === 2 && <CardContent className={classes.descriptionTab}>
 113                     {workflow
 114                         ? <WorkflowDetailsAttributes workflow={workflow} />
 115                         : <DataTableDefaultView
 116                             icon={WorkflowIcon}
 117                             messages={['Please select a workflow to see its details.']} />
 118                     }
 119                 </CardContent>}
 120             </div>;
 121         }
 122
 123         get inputs() {
 124             if (this.props.workflow) {
 125                 const definition = parseWorkflowDefinition(this.props.workflow);
 126                 if (definition) {
 127                     return getWorkflowInputs(definition);
 128                 }
 129             }
 130             return undefined;
 131         }
 132
 133         renderInputsTable() {
 134             return <Table className={this.props.classes.inputsTable}>
 135                 <TableHead>
 136                     <TableRow>
 137                         <TableCell>Label</TableCell>
 138                         <TableCell>Type</TableCell>
 139                         <TableCell>Description</TableCell>
 140                     </TableRow>
 141                 </TableHead>
 142                 <TableBody>
 143                     {this.inputs && this.inputs.map(input =>
 144                         <TableRow key={input.id}>
 145                             <TableCell>{getInputLabel(input)}</TableCell>
 146                             <TableCell>{stringifyInputType(input)}</TableCell>
 147                             <TableCell>{input.doc}</TableCell>
 148                         </TableRow>)}
 149                 </TableBody>
 150             </Table>;
 151         }
 152     });
 153
 154 export const WorkflowDetailsAttributes = ({ workflow }: WorkflowDetailsCardDataProps) => {
 155     return <Grid container>
 156         <Grid item xs={12} >
 157             <DetailsAttribute
 158                 label={"Workflow UUID"}
 159                 linkToUuid={workflow?.uuid} />
 160         </Grid>
 161         <Grid item xs={12} >
 162             <DetailsAttribute
 163                 label='Owner' linkToUuid={workflow?.ownerUuid}
 164                 uuidEnhancer={(uuid: string) => <ResourceOwnerWithName uuid={uuid} />} />
 165         </Grid>
 166         <Grid item xs={12}>
 167             <DetailsAttribute label='Created at' value={formatDate(workflow?.createdAt)} />
 168         </Grid>
 169         <Grid item xs={12}>
 170             <DetailsAttribute label='Last modified' value={formatDate(workflow?.modifiedAt)} />
 171         </Grid>
 172         <Grid item xs={12} >
 173             <DetailsAttribute
 174                 label='Last modified by user' linkToUuid={workflow?.modifiedByUserUuid}
 175                 uuidEnhancer={(uuid: string) => <ResourceOwnerWithName uuid={uuid} />} />
 176         </Grid>
 177     </Grid >;
 178 };