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