services/workbench2/src/views/workflow-panel/registered-workflow-panel.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     Tooltip,
  11     Typography,
  12     Card,
  13     CardHeader,
  14     CardContent,
  15     IconButton
  16 } from '@material-ui/core';
  17 import { connect, DispatchProp } from "react-redux";
  18 import { RouteComponentProps } from 'react-router';
  19 import { ArvadosTheme } from 'common/custom-theme';
  20 import { RootState } from 'store/store';
  21 import { WorkflowIcon, MoreVerticalIcon } from 'components/icon/icon';
  22 import { WorkflowResource } from 'models/workflow';
  23 import { ProcessOutputCollectionFiles } from 'views/process-panel/process-output-collection-files';
  24 import { WorkflowDetailsAttributes, RegisteredWorkflowPanelDataProps, getRegisteredWorkflowPanelData } from 'views-components/details-panel/workflow-details';
  25 import { getResource } from 'store/resources/resources';
  26 import { openContextMenu, resourceUuidToContextMenuKind } from 'store/context-menu/context-menu-actions';
  27 import { MPVContainer, MPVPanelContent, MPVPanelState } from 'components/multi-panel-view/multi-panel-view';
  28 import { ProcessIOCard, ProcessIOCardType } from 'views/process-panel/process-io-card';
  29 import { NotFoundView } from 'views/not-found-panel/not-found-panel';
  30 import { WorkflowProcessesPanel } from './workflow-processes-panel';
  31
  32 type CssRules = 'root'
  33     | 'button'
  34     | 'infoCard'
  35     | 'propertiesCard'
  36     | 'filesCard'
  37     | 'iconHeader'
  38     | 'tag'
  39     | 'label'
  40     | 'value'
  41     | 'link'
  42     | 'centeredLabel'
  43     | 'warningLabel'
  44     | 'collectionName'
  45     | 'readOnlyIcon'
  46     | 'header'
  47     | 'title'
  48     | 'avatar'
  49     | 'content';
  50
  51 const styles: CustomStyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
  52     root: {
  53         width: '100%',
  54     },
  55     button: {
  56         cursor: 'pointer'
  57     },
  58     infoCard: {
  59     },
  60     propertiesCard: {
  61         padding: 0,
  62     },
  63     filesCard: {
  64         padding: 0,
  65     },
  66     iconHeader: {
  67         fontSize: '1.875rem',
  68         color: theme.customs.colors.greyL
  69     },
  70     tag: {
  71         marginRight: theme.spacing(1) /2,
  72         marginBottom: theme.spacing(1) /2
  73     },
  74     label: {
  75         fontSize: '0.875rem',
  76     },
  77     centeredLabel: {
  78         fontSize: '0.875rem',
  79         textAlign: 'center'
  80     },
  81     warningLabel: {
  82         fontStyle: 'italic'
  83     },
  84     collectionName: {
  85         flexDirection: 'column',
  86     },
  87     value: {
  88         textTransform: 'none',
  89         fontSize: '0.875rem'
  90     },
  91     link: {
  92         fontSize: '0.875rem',
  93         color: theme.palette.primary.main,
  94         '&:hover': {
  95             cursor: 'pointer'
  96         }
  97     },
  98     readOnlyIcon: {
  99         marginLeft: theme.spacing(1),
 100         fontSize: 'small',
 101     },
 102     header: {
 103         paddingTop: theme.spacing(1),
 104         paddingBottom: theme.spacing(1),
 105     },
 106     title: {
 107         overflow: 'hidden',
 108         paddingTop: theme.spacing(0.5),
 109         color: theme.customs.colors.green700,
 110     },
 111     avatar: {
 112         alignSelf: 'flex-start',
 113         paddingTop: theme.spacing(0.5)
 114     },
 115     content: {
 116         padding: theme.spacing(1),
 117         paddingTop: theme.spacing(0.5),
 118         '&:last-child': {
 119             paddingBottom: theme.spacing(1),
 120         }
 121     }
 122 });
 123
 124 type RegisteredWorkflowPanelProps = RegisteredWorkflowPanelDataProps & DispatchProp & WithStyles<CssRules>
 125
 126 export const RegisteredWorkflowPanel = withStyles(styles)(connect(
 127     (state: RootState, props: RouteComponentProps<{ id: string }>) => {
 128         const item = getResource<WorkflowResource>(props.match.params.id)(state.resources);
 129         if (item) {
 130             return getRegisteredWorkflowPanelData(item, state.auth);
 131         }
 132         return { item, inputParams: [], outputParams: [], workflowCollection: "", gitprops: {} };
 133     })(
 134         class extends React.Component<RegisteredWorkflowPanelProps> {
 135             render() {
 136                 const { classes, item, inputParams, outputParams, workflowCollection } = this.props;
 137                 const panelsData: MPVPanelState[] = [
 138                     { name: "Details" },
 139                     { name: "Runs" },
 140                     { name: "Outputs" },
 141                     { name: "Inputs" },
 142                     { name: "Definition" },
 143                 ];
 144                 return item
 145                     ? <MPVContainer className={classes.root} spacing={1} direction="column" justify-content="flex-start" wrap="nowrap" panelStates={panelsData}>
 146                         <MPVPanelContent xs="auto" data-cy='registered-workflow-info-panel'>
 147                             <Card className={classes.infoCard}>
 148                                 <CardHeader
 149                                     className={classes.header}
 150                                     classes={{
 151                                         content: classes.title,
 152                                         avatar: classes.avatar,
 153                                     }}
 154                                     avatar={<WorkflowIcon className={classes.iconHeader} />}
 155                                     title={
 156                                         <Tooltip title={item.name} placement="bottom-start">
 157                                             <Typography noWrap variant='h6'>
 158                                                 {item.name}
 159                                             </Typography>
 160                                         </Tooltip>
 161                                     }
 162                                     subheader={
 163                                         <Tooltip title={item.description || '(no-description)'} placement="bottom-start">
 164                                             <Typography noWrap variant='body1' color='inherit'>
 165                                                 {item.description || '(no-description)'}
 166                                             </Typography>
 167                                         </Tooltip>}
 168                                     action={
 169                                         <Tooltip title="More options" disableFocusListener>
 170                                             <IconButton
 171                                                 aria-label="More options"
 172                                                 onClick={event => this.handleContextMenu(event)}>
 173                                                 <MoreVerticalIcon />
 174                                             </IconButton>
 175                                         </Tooltip>}
 176
 177                                 />
 178
 179                                 <CardContent className={classes.content}>
 180                                     <WorkflowDetailsAttributes workflow={item} />
 181                                 </CardContent>
 182                             </Card>
 183                         </MPVPanelContent>
 184                         <MPVPanelContent forwardProps xs maxHeight="100%">
 185                             <WorkflowProcessesPanel />
 186                         </MPVPanelContent>
 187                         <MPVPanelContent forwardProps xs data-cy="process-outputs" maxHeight="100%">
 188                             <ProcessIOCard
 189                                 label={ProcessIOCardType.OUTPUT}
 190                                 params={outputParams}
 191                                 raw={{}}
 192                                 forceShowParams={true}
 193                             />
 194                         </MPVPanelContent>
 195                         <MPVPanelContent forwardProps xs data-cy="process-inputs" maxHeight="100%">
 196                             <ProcessIOCard
 197                                 label={ProcessIOCardType.INPUT}
 198                                 params={inputParams}
 199                                 raw={{}}
 200                                 forceShowParams={true}
 201                             />
 202                         </MPVPanelContent>
 203                         <MPVPanelContent xs maxHeight="100%">
 204                             <Card className={classes.filesCard}>
 205                                 <CardHeader title="Workflow Definition" />
 206                                 <ProcessOutputCollectionFiles isWritable={false} currentItemUuid={workflowCollection} />
 207                             </Card>
 208                         </MPVPanelContent>
 209                     </MPVContainer>
 210                     :
 211                     <NotFoundView
 212                         icon={WorkflowIcon}
 213                         messages={["Workflow not found"]}
 214                     />
 215             }
 216
 217             handleContextMenu = (event: React.MouseEvent<any>) => {
 218                 const { uuid, ownerUuid, name, description,
 219                     kind } = this.props.item;
 220                 const menuKind = this.props.dispatch<any>(resourceUuidToContextMenuKind(uuid));
 221                 const resource = {
 222                     uuid,
 223                     ownerUuid,
 224                     name,
 225                     description,
 226                     kind,
 227                     menuKind,
 228                 };
 229                 // Avoid expanding/collapsing the panel
 230                 event.stopPropagation();
 231                 this.props.dispatch<any>(openContextMenu(event, resource));
 232             }
 233         }
 234     )
 235 );