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