1 // Copyright (C) The Arvados Authors. All rights reserved.
3 // SPDX-License-Identifier: AGPL-3.0
5 import React from 'react';
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';
51 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
65 color: theme.customs.colors.greyL
68 marginRight: theme.spacing.unit / 2,
69 marginBottom: theme.spacing.unit / 2
82 flexDirection: 'column',
85 textTransform: 'none',
90 color: theme.palette.primary.main,
96 marginLeft: theme.spacing.unit,
100 paddingTop: theme.spacing.unit,
101 paddingBottom: theme.spacing.unit,
105 paddingTop: theme.spacing.unit * 0.5,
106 color: theme.customs.colors.green700,
109 alignSelf: 'flex-start',
110 paddingTop: theme.spacing.unit * 0.5
113 padding: theme.spacing.unit * 1.0,
114 paddingTop: theme.spacing.unit * 0.5,
116 paddingBottom: theme.spacing.unit * 1,
121 type RegisteredWorkflowPanelProps = RegisteredWorkflowPanelDataProps & DispatchProp & WithStyles<CssRules>
123 export const RegisteredWorkflowPanel = withStyles(styles)(connect(
124 (state: RootState, props: RouteComponentProps<{ id: string }>) => {
125 const item = getResource<WorkflowResource>(props.match.params.id)(state.resources);
127 return getRegisteredWorkflowPanelData(item, state.auth);
129 return { item, inputParams: [], outputParams: [], workflowCollection: "", gitprops: {} };
131 class extends React.Component<RegisteredWorkflowPanelProps> {
133 const { classes, item, inputParams, outputParams, workflowCollection } = this.props;
134 const panelsData: MPVPanelState[] = [
139 { name: "Definition" },
142 ? <MPVContainer spacing={8} direction="column" justify-content="flex-start" wrap="nowrap" panelStates={panelsData}>
143 <MPVPanelContent xs="auto" data-cy='registered-workflow-info-panel'>
144 <Card className={classes.infoCard}>
146 className={classes.header}
148 content: classes.title,
149 avatar: classes.avatar,
151 avatar={<WorkflowIcon className={classes.iconHeader} />}
153 <Tooltip title={item.name} placement="bottom-start">
154 <Typography noWrap variant='h6'>
160 <Tooltip title={item.description || '(no-description)'} placement="bottom-start">
161 <Typography noWrap variant='body1' color='inherit'>
162 {item.description || '(no-description)'}
166 <Tooltip title="More options" disableFocusListener>
168 aria-label="More options"
169 onClick={event => this.handleContextMenu(event)}>
176 <CardContent className={classes.content}>
177 <WorkflowDetailsAttributes workflow={item} />
181 <MPVPanelContent forwardProps xs maxHeight="100%">
182 <WorkflowProcessesPanel />
184 <MPVPanelContent forwardProps xs data-cy="process-outputs" maxHeight="100%">
186 label={ProcessIOCardType.OUTPUT}
187 params={outputParams}
189 forceShowParams={true}
192 <MPVPanelContent forwardProps xs data-cy="process-inputs" maxHeight="100%">
194 label={ProcessIOCardType.INPUT}
197 forceShowParams={true}
200 <MPVPanelContent xs maxHeight="100%">
201 <Card className={classes.filesCard}>
202 <CardHeader title="Workflow Definition" />
203 <ProcessOutputCollectionFiles isWritable={false} currentItemUuid={workflowCollection} />
210 messages={["Workflow not found"]}
214 handleContextMenu = (event: React.MouseEvent<any>) => {
215 const { uuid, ownerUuid, name, description,
216 kind } = this.props.item;
217 const menuKind = this.props.dispatch<any>(resourceUuidToContextMenuKind(uuid));
226 // Avoid expanding/collapsing the panel
227 event.stopPropagation();
228 this.props.dispatch<any>(openContextMenu(event, resource));