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, Typography } 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' | 'subtitle' | 'title';
14 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
19 paddingBottom: '28px!important'
22 color: theme.customs.colors.grey700
26 interface SubprocessesDataProps {
27 subprocesses: Array<Process>;
28 filters: SubprocessFilterDataProps[];
29 onToggle: (status: string) => void;
32 type SubprocessesProps = SubprocessesDataProps & WithStyles<CssRules>;
34 export const SubprocessesCard = withStyles(styles)(
35 ({ classes, filters, subprocesses, onToggle }: SubprocessesProps) =>
36 <Card className={classes.root}>
38 className={classes.title}
40 <Typography noWrap variant="title" color='inherit'>
41 Subprocess and filters
44 <Grid container direction="column" spacing={16}>
45 <Grid item xs={12} container spacing={16} className={classes.subtitle}>
46 <SubprocessFilter label='Subprocesses' value={subprocesses.length} />
48 <Grid item xs={12} container spacing={16}>
51 <SubprocessFilter {...filter} key={filter.key} onToggle={() => onToggle(filter.label)} />