src/views/process-panel/process-panel.tsx

   1 // Copyright (C) The Arvados Authors. All rights reserved.
   2 //
   3 // SPDX-License-Identifier: AGPL-3.0
   4
   5 import * as React from 'react';
   6 import {
   7     StyleRulesCallback, WithStyles, withStyles, Card,
   8     CardHeader, IconButton, CardContent, Grid
   9 } from '@material-ui/core';
  10 import { ArvadosTheme } from '~/common/custom-theme';
  11 import { ProcessResource } from '~/models/process';
  12 import { DispatchProp, connect } from 'react-redux';
  13 import { RouteComponentProps } from 'react-router';
  14 import { MoreOptionsIcon, ProcessIcon } from '~/components/icon/icon';
  15 import { DetailsAttribute } from '~/components/details-attribute/details-attribute';
  16 import { RootState } from '~/store/store';
  17
  18 type CssRules = 'card' | 'iconHeader' | 'label' | 'value';
  19
  20 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
  21     card: {
  22         marginBottom: theme.spacing.unit * 2
  23     },
  24     iconHeader: {
  25         fontSize: '1.875rem',
  26         color: theme.customs.colors.green700
  27     },
  28     label: {
  29         fontSize: '0.875rem'
  30     },
  31     value: {
  32         textTransform: 'none',
  33         fontSize: '0.875rem'
  34     }
  35 });
  36
  37 interface ProcessPanelDataProps {
  38     item: ProcessResource;
  39 }
  40
  41 interface ProcessPanelActionProps {
  42     onItemRouteChange: (processId: string) => void;
  43     onContextMenu: (event: React.MouseEvent<HTMLElement>, item: ProcessResource) => void;
  44 }
  45
  46 type ProcessPanelProps = ProcessPanelDataProps & ProcessPanelActionProps & DispatchProp & WithStyles<CssRules> & RouteComponentProps<{ id: string }>;
  47
  48 export const ProcessPanel = withStyles(styles)(
  49     connect((state: RootState) => ({
  50         item: state.collectionPanel.item,
  51         tags: state.collectionPanel.tags
  52     }))(
  53         class extends React.Component<ProcessPanelProps> {
  54             render() {
  55                 const { classes, onContextMenu, item } = this.props;
  56
  57                 return <div>
  58                     <Card className={classes.card}>
  59                         <CardHeader
  60                             avatar={<ProcessIcon className={classes.iconHeader} />}
  61                             action={
  62                                 <IconButton
  63                                     aria-label="More options"
  64                                     onClick={event => onContextMenu(event, item)}>
  65                                     <MoreOptionsIcon />
  66                                 </IconButton>
  67                             }
  68                             title="Pipeline template that generates a config file from a template"
  69                             subheader="(no description)"
  70                         />
  71                         <CardContent>
  72                             <Grid container direction="column">
  73                                 <Grid item xs={6}>
  74                                     <DetailsAttribute classLabel={classes.label} classValue={classes.value}
  75                                         label='Collection UUID' value="uuid" />
  76                                     <DetailsAttribute classLabel={classes.label} classValue={classes.value}
  77                                         label='Number of files' value='14' />
  78                                     <DetailsAttribute classLabel={classes.label} classValue={classes.value}
  79                                         label='Content size' value='54 MB' />
  80                                     <DetailsAttribute classLabel={classes.label} classValue={classes.value}
  81                                         label='Owner' value="ownerUuid" />
  82                                 </Grid>
  83                             </Grid>
  84                         </CardContent>
  85                     </Card>
  86                 </div>;
  87             }
  88             componentWillReceiveProps({ match, item, onItemRouteChange }: ProcessPanelProps) {
  89                 if (!item || match.params.id !== item.uuid) {
  90                     onItemRouteChange(match.params.id);
  91                 }
  92             }
  93         }
  94     )
  95 );