src/views/process-panel/subprocesses-card.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 { ArvadosTheme } from '~/common/custom-theme';
   7 import { StyleRulesCallback, withStyles, WithStyles, Card, CardHeader, CardContent, Grid, Switch } from '@material-ui/core';
   8
   9 type CssRules = 'root' | 'label' | 'value' | 'middleValue' | 'switch' | 'grid';
  10
  11 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
  12     root: {
  13         fontSize: '0.875rem'
  14     },
  15     label: {
  16         color: theme.palette.grey["500"],
  17         marginBottom: theme.spacing.unit
  18     },
  19     value: {
  20         marginBottom: theme.spacing.unit
  21     },
  22     middleValue: {
  23         marginBottom: theme.spacing.unit - 2
  24     },
  25     switch: {
  26         '& span:first-child': {
  27             height: '18px'
  28         }
  29     },
  30     grid: {
  31         marginLeft: '22px'
  32     }
  33 });
  34
  35 type SubprocessesProps = WithStyles<CssRules>;
  36
  37 export const SubprocessesCard = withStyles(styles)(
  38     class extends React.Component<SubprocessesProps> {
  39
  40         state = {
  41             queued: true,
  42             active: true,
  43             completed: true,
  44             failed: true
  45         };
  46
  47         handleChange = (name: string) => (event: any) => {
  48             this.setState({ [name]: event.target.checked });
  49         }
  50
  51         render() {
  52             const { classes } = this.props;
  53             return (
  54                 <Card className={classes.root}>
  55                     <CardHeader title="Subprocess and filters" />
  56                     <CardContent>
  57                         <Grid container direction="row" spacing={16} justify="flex-start" alignItems="stretch">
  58                             <Grid item>
  59                                 <Grid container direction="column" alignItems="flex-end" spacing={8}>
  60                                     <Grid item className={classes.label}>Subprocesses:</Grid>
  61                                     <Grid item className={classes.label}>Queued:</Grid>
  62                                     <Grid item className={classes.label}>Active:</Grid>
  63                                 </Grid>
  64                             </Grid>
  65                             <Grid item>
  66                                 <Grid container direction="column" alignItems="flex-start" spacing={8}>
  67                                     <Grid item className={classes.value}>1</Grid>
  68                                     <Grid item className={classes.middleValue}>
  69                                         2
  70                                         <Switch classes={{ root: classes.switch }}
  71                                             checked={this.state.queued}
  72                                             onChange={this.handleChange('queued')}
  73                                             value="queued"
  74                                             color="primary" />
  75                                     </Grid>
  76                                     <Grid item className={classes.value}>
  77                                         3
  78                                         <Switch classes={{ root: classes.switch }}
  79                                             checked={this.state.active}
  80                                             onChange={this.handleChange('active')}
  81                                             value="active"
  82                                             color="primary" />
  83                                     </Grid>
  84                                 </Grid>
  85                             </Grid>
  86                             <Grid item className={classes.grid}>
  87                                 <Grid container direction="column" alignItems="flex-end" spacing={8}>
  88                                     <Grid item className={classes.label}>&nbsp;</Grid>
  89                                     <Grid item className={classes.label}>Completed:</Grid>
  90                                     <Grid item className={classes.label}>Failed:</Grid>
  91                                 </Grid>
  92                             </Grid>
  93                             <Grid item>
  94                                 <Grid container direction="column" alignItems="flex-end" spacing={8}>
  95                                     <Grid item className={classes.value}>&nbsp;</Grid>
  96                                     <Grid item className={classes.middleValue}>
  97                                         2
  98                                         <Switch classes={{ root: classes.switch }}
  99                                             checked={this.state.completed}
 100                                             onChange={this.handleChange('completed')}
 101                                             value="completed"
 102                                             color="primary" />
 103                                     </Grid>
 104                                     <Grid item className={classes.value}>
 105                                         1
 106                                         <Switch classes={{ root: classes.switch }}
 107                                             checked={this.state.failed}
 108                                             onChange={this.handleChange('failed')}
 109                                             value="failed"
 110                                             color="primary" />
 111                                     </Grid>
 112                                 </Grid>
 113                             </Grid>
 114                         </Grid>
 115                     </CardContent>
 116                 </Card>
 117             );
 118         }
 119     }
 120 );