src/views/process-panel/process-resource-card.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 {
   7     StyleRulesCallback,
   8     WithStyles,
   9     withStyles,
  10     Card,
  11     CardHeader,
  12     IconButton,
  13     CardContent,
  14     Tooltip,
  15     Typography,
  16     Grid,
  17     CircularProgress,
  18 } from '@material-ui/core';
  19 import { ArvadosTheme } from 'common/custom-theme';
  20 import {
  21     CloseIcon,
  22     MaximizeIcon,
  23     UnMaximizeIcon,
  24     ProcessIcon
  25 } from 'components/icon/icon';
  26 import { MPVPanelProps } from 'components/multi-panel-view/multi-panel-view';
  27 import { connect } from 'react-redux';
  28 import { Process } from 'store/processes/process';
  29 import { NodeInstanceType } from 'store/process-panel/process-panel';
  30 import { DefaultView } from 'components/default-view/default-view';
  31
  32 interface ProcessResourceCardDataProps {
  33     process: Process;
  34     nodeInfo: NodeInstanceType | null;
  35 }
  36
  37 type CssRules = "card" | "header" | "title" | "avatar" | "iconHeader" | "content";
  38
  39 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
  40     card: {},
  41     header: {},
  42     title: {},
  43     avatar: {},
  44     iconHeader: {},
  45     content: {}
  46 });
  47
  48 type ProcessResourceCardProps = ProcessResourceCardDataProps & WithStyles<CssRules> & MPVPanelProps;
  49
  50 export const ProcessResourceCard = withStyles(styles)(connect()(
  51     ({ classes, nodeInfo, doHidePanel, doMaximizePanel, doUnMaximizePanel, panelMaximized, panelName, process, }: ProcessResourceCardProps) => {
  52
  53         const loading = nodeInfo === null;
  54
  55         return <Card className={classes.card} data-cy="process-resources-card">
  56             <CardHeader
  57                 className={classes.header}
  58                 classes={{
  59                     content: classes.title,
  60                     avatar: classes.avatar,
  61                 }}
  62                 avatar={<ProcessIcon className={classes.iconHeader} />}
  63                 title={
  64                     <Typography noWrap variant='h6' color='inherit'>
  65                         Resources
  66                     </Typography>
  67                 }
  68                 action={
  69                     <div>
  70                         {doUnMaximizePanel && panelMaximized &&
  71                             <Tooltip title={`Unmaximize ${panelName || 'panel'}`} disableFocusListener>
  72                                 <IconButton onClick={doUnMaximizePanel}><UnMaximizeIcon /></IconButton>
  73                             </Tooltip>}
  74                         {doMaximizePanel && !panelMaximized &&
  75                             <Tooltip title={`Maximize ${panelName || 'panel'}`} disableFocusListener>
  76                                 <IconButton onClick={doMaximizePanel}><MaximizeIcon /></IconButton>
  77                             </Tooltip>}
  78                         {doHidePanel &&
  79                             <Tooltip title={`Close ${panelName || 'panel'}`} disableFocusListener>
  80                                 <IconButton disabled={panelMaximized} onClick={doHidePanel}><CloseIcon /></IconButton>
  81                             </Tooltip>}
  82                     </div>
  83                 } />
  84             <CardContent className={classes.content}>
  85                 <>
  86                     {/* raw is undefined until params are loaded */}
  87                     {loading && <Grid container item alignItems='center' justify='center'>
  88                         <CircularProgress />
  89                     </Grid>}
  90                     {/* Once loaded, either raw or params may still be empty
  91                       *   Raw when all params are empty
  92                       *   Params when raw is provided by containerRequest properties but workflow mount is absent for preview
  93                       */}
  94                     {!loading &&
  95                         <>
  96                             <div>
  97                                 stuff
  98                             </div>
  99                         </>}
 100                     {!loading && <Grid container item alignItems='center' justify='center'>
 101                         <DefaultView messages={["No parameters found"]} />
 102                     </Grid>}
 103                 </>
 104             </CardContent>
 105         </Card>;
 106     }
 107 ));