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