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 { SubprocessFilter } from '~/components/subprocess-filter/subprocess-filter';
   9 import { SubprocessFilterDataProps } from '~/components/subprocess-filter/subprocess-filter';
  10
  11 type CssRules = 'root';
  12
  13 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
  14     root: {
  15         fontSize: '0.875rem'
  16     }
  17 });
  18
  19 interface SubprocessesDataProps {
  20     subprocesses: number;
  21     filters: SubprocessFilterDataProps[];
  22     onToggle: (filter: SubprocessFilterDataProps) => void;
  23 }
  24
  25 type SubprocessesProps = SubprocessesDataProps & WithStyles<CssRules>;
  26
  27 export const SubprocessesCard = withStyles(styles)(
  28     ({ classes, filters, subprocesses, onToggle }: SubprocessesProps) =>
  29         <Card className={classes.root}>
  30             <CardHeader title="Subprocess and filters" />
  31             <CardContent>
  32                 <Grid container direction="column" spacing={16}>
  33                     <Grid item xs={12} container spacing={16}>
  34                         <SubprocessFilter label='Subprocesses' value={subprocesses} />
  35                     </Grid>
  36                     <Grid item xs={12} container spacing={16}>
  37                         {
  38                             filters.map(filter =>
  39                                 <SubprocessFilter {...filter} key={filter.key} onToggle={() => onToggle(filter)} />
  40                             )
  41                         }
  42                     </Grid>
  43                 </Grid>
  44             </CardContent>
  45         </Card>
  46 );