1 // Copyright (C) The Arvados Authors. All rights reserved.
3 // SPDX-License-Identifier: AGPL-3.0
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';
12 type CssRules = 'root';
14 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
20 interface SubprocessesDataProps {
21 subprocesses: Array<Process>;
22 filters: SubprocessFilterDataProps[];
23 onToggle: (filter: SubprocessFilterDataProps) => void;
26 type SubprocessesProps = SubprocessesDataProps & WithStyles<CssRules>;
28 export const SubprocessesCard = withStyles(styles)(
29 ({ classes, filters, subprocesses, onToggle }: SubprocessesProps) =>
30 <Card className={classes.root}>
31 <CardHeader title="Subprocess and filters" />
33 <Grid container direction="column" spacing={16}>
34 <Grid item xs={12} container spacing={16}>
35 <SubprocessFilter label='Subprocesses' value={subprocesses.length} />
37 <Grid item xs={12} container spacing={16}>
40 <SubprocessFilter {...filter} key={filter.key} onToggle={() => onToggle(filter)} />