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