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, Typography } from '@material-ui/core';
   8 import { SubprocessFilter } from '~/components/subprocess-filter/subprocess-filter';
   9 import { SubprocessFilterDataProps } from '~/components/subprocess-filter/subprocess-filter';
  10 import { Process } from '~/store/processes/process';
  11
  12 type CssRules = 'root' | 'subtitle' | 'title';
  13
  14 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
  15     root: {
  16         fontSize: '0.875rem'
  17     },
  18     subtitle: {
  19         paddingBottom: '28px!important'
  20     },
  21     title: {
  22         color: theme.customs.colors.grey700
  23     }
  24 });
  25
  26 interface SubprocessesDataProps {
  27     subprocesses: Array<Process>;
  28     filters: SubprocessFilterDataProps[];
  29     onToggle: (status: string) => void;
  30 }
  31
  32 type SubprocessesProps = SubprocessesDataProps & WithStyles<CssRules>;
  33
  34 export const SubprocessesCard = withStyles(styles)(
  35     ({ classes, filters, subprocesses, onToggle }: SubprocessesProps) =>
  36         <Card className={classes.root}>
  37             <CardHeader
  38                 className={classes.title}
  39                 title={
  40                     <Typography noWrap variant="title" color='inherit'>
  41                         Subprocess and filters
  42                 </Typography>} />
  43             <CardContent>
  44                 <Grid container direction="column" spacing={16}>
  45                     <Grid item xs={12} container spacing={16} className={classes.subtitle}>
  46                         <SubprocessFilter label='Subprocesses' value={subprocesses.length} />
  47                     </Grid>
  48                     <Grid item xs={12} container spacing={16}>
  49                         {
  50                             filters.map(filter =>
  51                                 <SubprocessFilter {...filter} key={filter.key} onToggle={() => onToggle(filter.label)} />
  52                             )
  53                         }
  54                     </Grid>
  55                 </Grid>
  56             </CardContent>
  57         </Card>
  58 );