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