X-Git-Url: https://git.arvados.org/arvados-workbench2.git/blobdiff_plain/9fbb245286171bc55fed5b5104361a1869a1d76b..ceca6c57cc7d0357ab74abd47b80633a885ec575:/src/views/process-panel/subprocesses-card.tsx

diff --git a/src/views/process-panel/subprocesses-card.tsx b/src/views/process-panel/subprocesses-card.tsx
index ac644bbb..9cff1e98 100644
--- a/src/views/process-panel/subprocesses-card.tsx
+++ b/src/views/process-panel/subprocesses-card.tsx
@@ -4,96 +4,61 @@
 
 import * as React from 'react';
 import { ArvadosTheme } from '~/common/custom-theme';
-import { StyleRulesCallback, withStyles, WithStyles, Card, CardHeader, CardContent, Grid, Switch } from '@material-ui/core';
-import { DetailsAttribute } from '~/components/details-attribute/details-attribute';
+import { StyleRulesCallback, withStyles, WithStyles, Card, CardHeader, CardContent, Grid, Typography } from '@material-ui/core';
+import { SubprocessFilter } from '~/components/subprocess-filter/subprocess-filter';
+import { SubprocessFilterDataProps } from '~/components/subprocess-filter/subprocess-filter';
 
-type CssRules = 'root' | 'label' | 'value' | 'switch';
+type CssRules = 'root' | 'title' | 'gridFilter';
 
 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
     root: {
-
-    },
-    label: {
-        paddingRight: theme.spacing.unit * 2,
-        textAlign: 'right'
+        fontSize: '0.875rem',
+        height: '100%'
     },
-    value: {
-
+    title: {
+        color: theme.palette.grey["700"]
     },
-    switch: {
-        height: '18px'
+    gridFilter: {
+        height: '20px',
+        marginBottom: theme.spacing.unit,
+        paddingTop: '0px!important',
+        paddingBottom: '0px!important',
     }
 });
 
-type SubprocessesProps = WithStyles<CssRules>;
-
-export const SubprocessesCard = withStyles(styles)(
-    class extends React.Component<SubprocessesProps> {
+interface SubprocessesDataProps {
+    subprocessesAmount: number;
+    filters: SubprocessFilterDataProps[];
+    onToggle: (status: string) => void;
+}
 
-        state = {
-            queued: true,
-            active: true,
-            completed: true,
-            failed: true
-        };
+type SubprocessesProps = SubprocessesDataProps & WithStyles<CssRules>;
 
-        handleChange = (name: string) => (event: any) => {
-            this.setState({ [name]: event.target.checked });
-        }
-
-        render() {
-            const { classes } = this.props;
-            return (
-                <Card className={classes.root}>
-                    <CardHeader title="Subprocesses and filters" />
-                    <CardContent>
-                        <Grid container direction="row">
-                            <Grid item xs={3}>
-                                <DetailsAttribute classLabel={classes.label} classValue={classes.value}
-                                    label='Subprocesses:' value="6" />
-                            </Grid>
-                        </Grid>
-                        <Grid container direction="row">
-                            <Grid item xs={3}>
-                                <DetailsAttribute classLabel={classes.label} classValue={classes.value}
-                                    label='Queued:' value='2'>
-                                    <Switch classes={{ bar: classes.switch }}
-                                        checked={this.state.queued}
-                                        onChange={this.handleChange('queued')}
-                                        value="queued"
-                                        color="primary" />
-                                </DetailsAttribute>
-                                <DetailsAttribute classLabel={classes.label} classValue={classes.value}
-                                    label='Active:' value='1'>
-                                    <Switch classes={{ bar: classes.switch }}
-                                        checked={this.state.active}
-                                        onChange={this.handleChange('active')}
-                                        value="active"
-                                        color="primary" />
-                                </DetailsAttribute>
-                            </Grid>
-                            <Grid item xs={3}>
-                                <DetailsAttribute classLabel={classes.label} classValue={classes.value}
-                                    label='Completed:' value='2'>
-                                    <Switch classes={{ bar: classes.switch }}
-                                        checked={this.state.completed}
-                                        onChange={this.handleChange('completed')}
-                                        value="completed"
-                                        color="primary" />
-                                </DetailsAttribute>
-                                <DetailsAttribute classLabel={classes.label} classValue={classes.value}
-                                    label='Failed:' value='1'>
-                                    <Switch classes={{ bar: classes.switch }}
-                                        checked={this.state.failed}
-                                        onChange={this.handleChange('failed')}
-                                        value="failed"
-                                        color="primary" />
-                                </DetailsAttribute>
-                            </Grid>
+export const SubprocessesCard = withStyles(styles)(
+    ({ classes, filters, subprocessesAmount, onToggle }: SubprocessesProps) =>
+        <Card className={classes.root}>
+            <CardHeader
+                className={classes.title}
+                title={
+                    <Typography noWrap variant="title" color='inherit'>
+                        Subprocess and filters
+                </Typography>} />
+            <CardContent>
+                <Grid container direction="column" spacing={16}>
+                    <Grid item xs={12} container spacing={16}>
+                        <Grid item md={12} lg={6}>
+                            <SubprocessFilter label='Subprocesses' value={subprocessesAmount} />
                         </Grid>
-                    </CardContent>
-                </Card>
-            );
-        }
-    }
+                        <Grid item md={12} lg={6}/>
+                        {
+                            filters.map(filter =>
+                                <Grid item md={12} lg={6} key={filter.key} className={classes.gridFilter}>
+                                    <SubprocessFilter {...filter} onToggle={() => onToggle(filter.label)} />
+                                </Grid>
+                            )
+                        }
+                    </Grid>
+                </Grid>
+            </CardContent>
+        </Card>
 );
\ No newline at end of file