src/views-components/details-panel/workflow-details.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 { DefaultIcon, WorkflowIcon } from 'components/icon/icon';
   7 import { WorkflowResource } from 'models/workflow';
   8 import { DetailsData } from "./details-data";
   9 import { DefaultView } from 'components/default-view/default-view';
  10 import { DetailsAttribute } from 'components/details-attribute/details-attribute';
  11 import { ResourceOwnerWithName } from 'views-components/data-explorer/renderers';
  12 import { formatDate } from "common/formatters";
  13 import { Grid } from '@material-ui/core';
  14 import { withStyles, StyleRulesCallback, WithStyles, Button } from '@material-ui/core';
  15 import { openRunProcess } from "store/workflow-panel/workflow-panel-actions";
  16 import { Dispatch } from 'redux';
  17 import { connect } from 'react-redux';
  18 import { ArvadosTheme } from 'common/custom-theme';
  19
  20 export interface WorkflowDetailsCardDataProps {
  21     workflow?: WorkflowResource;
  22 }
  23
  24 export interface WorkflowDetailsCardActionProps {
  25     onClick: (wf: WorkflowResource) => () => void;
  26 }
  27
  28 const mapDispatchToProps = (dispatch: Dispatch) => ({
  29     onClick: (wf: WorkflowResource) =>
  30         () => wf && dispatch<any>(openRunProcess(wf.uuid, wf.ownerUuid, wf.name)),
  31 });
  32
  33 type CssRules = 'runButton';
  34
  35 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
  36     runButton: {
  37         boxShadow: 'none',
  38         padding: '2px 10px 2px 5px',
  39         fontSize: '0.75rem'
  40     },
  41 });
  42
  43 export const WorkflowDetailsAttributes = connect(null, mapDispatchToProps)(
  44     withStyles(styles)(
  45         ({ workflow, onClick, classes }: WorkflowDetailsCardDataProps & WorkflowDetailsCardActionProps & WithStyles<CssRules>) => {
  46             return <Grid container>
  47                 <Button onClick={workflow && onClick(workflow)} className={classes.runButton} variant='contained'
  48                     data-cy='details-panel-run-btn' color='primary' size='small'>
  49                     Run
  50                 </Button>
  51                 {workflow && workflow.description !== "" && <Grid item xs={12} >
  52                     <DetailsAttribute
  53                         label={"Description"}
  54                         value={workflow?.description} />
  55                 </Grid>}
  56                 <Grid item xs={12} >
  57                     <DetailsAttribute
  58                         label={"Workflow UUID"}
  59                         linkToUuid={workflow?.uuid} />
  60                 </Grid>
  61                 <Grid item xs={12} >
  62                     <DetailsAttribute
  63                         label='Owner' linkToUuid={workflow?.ownerUuid}
  64                         uuidEnhancer={(uuid: string) => <ResourceOwnerWithName uuid={uuid} />} />
  65                 </Grid>
  66                 <Grid item xs={12}>
  67                     <DetailsAttribute label='Created at' value={formatDate(workflow?.createdAt)} />
  68                 </Grid>
  69                 <Grid item xs={12}>
  70                     <DetailsAttribute label='Last modified' value={formatDate(workflow?.modifiedAt)} />
  71                 </Grid>
  72                 <Grid item xs={12} >
  73                     <DetailsAttribute
  74                         label='Last modified by user' linkToUuid={workflow?.modifiedByUserUuid}
  75                         uuidEnhancer={(uuid: string) => <ResourceOwnerWithName uuid={uuid} />} />
  76                 </Grid>
  77             </Grid >;
  78         }));
  79
  80 export class WorkflowDetails extends DetailsData<WorkflowResource> {
  81     getIcon(className?: string) {
  82         return <WorkflowIcon className={className} />;
  83     }
  84
  85     getDetails() {
  86         return <WorkflowDetailsAttributes workflow={this.item} />;
  87     }
  88 }