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