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 import { DetailsAttribute } from '~/components/details-attribute/details-attribute';
   9
  10 type CssRules = 'root' | 'label' | 'value' | 'switch';
  11
  12 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
  13     root: {
  14
  15     },
  16     label: {
  17         paddingRight: theme.spacing.unit * 2,
  18         textAlign: 'right'
  19     },
  20     value: {
  21
  22     },
  23     switch: {
  24         height: '18px'
  25     }
  26 });
  27
  28 type SubprocessesProps = WithStyles<CssRules>;
  29
  30 export const SubprocessesCard = withStyles(styles)(
  31     class extends React.Component<SubprocessesProps> {
  32
  33         state = {
  34             queued: true,
  35             active: true,
  36             completed: true,
  37             failed: true
  38         };
  39
  40         handleChange = (name: string) => (event: any) => {
  41             this.setState({ [name]: event.target.checked });
  42         }
  43
  44         render() {
  45             const { classes } = this.props;
  46             return (
  47                 <Card className={classes.root}>
  48                     <CardHeader title="Subprocesses and filters" />
  49                     <CardContent>
  50                         <Grid container direction="row">
  51                             <Grid item xs={3}>
  52                                 <DetailsAttribute classLabel={classes.label} classValue={classes.value}
  53                                     label='Subprocesses:' value="6" />
  54                             </Grid>
  55                         </Grid>
  56                         <Grid container direction="row">
  57                             <Grid item xs={3}>
  58                                 <DetailsAttribute classLabel={classes.label} classValue={classes.value}
  59                                     label='Queued:' value='2'>
  60                                     <Switch classes={{ bar: classes.switch }}
  61                                         checked={this.state.queued}
  62                                         onChange={this.handleChange('queued')}
  63                                         value="queued"
  64                                         color="primary" />
  65                                 </DetailsAttribute>
  66                                 <DetailsAttribute classLabel={classes.label} classValue={classes.value}
  67                                     label='Active:' value='1'>
  68                                     <Switch classes={{ bar: classes.switch }}
  69                                         checked={this.state.active}
  70                                         onChange={this.handleChange('active')}
  71                                         value="active"
  72                                         color="primary" />
  73                                 </DetailsAttribute>
  74                             </Grid>
  75                             <Grid item xs={3}>
  76                                 <DetailsAttribute classLabel={classes.label} classValue={classes.value}
  77                                     label='Completed:' value='2'>
  78                                     <Switch classes={{ bar: classes.switch }}
  79                                         checked={this.state.completed}
  80                                         onChange={this.handleChange('completed')}
  81                                         value="completed"
  82                                         color="primary" />
  83                                 </DetailsAttribute>
  84                                 <DetailsAttribute classLabel={classes.label} classValue={classes.value}
  85                                     label='Failed:' value='1'>
  86                                     <Switch classes={{ bar: classes.switch }}
  87                                         checked={this.state.failed}
  88                                         onChange={this.handleChange('failed')}
  89                                         value="failed"
  90                                         color="primary" />
  91                                 </DetailsAttribute>
  92                             </Grid>
  93                         </Grid>
  94                     </CardContent>
  95                 </Card>
  96             );
  97         }
  98     }
  99 );