change code after CR

[arvados-workbench2.git] / 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 1fd5817c264ee570e81b2aa3b6866dcd805ca7bc..ac60c9f66ef56a4e3842bf1465ce5473e10f15f0 100644 (file)
--- a/src/views/process-panel/subprocesses-card.tsx
+++ b/src/views/process-panel/subprocesses-card.tsx
@@ -5,116 +5,42 @@
 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 { SubprocessFilter } from '~/components/subprocess-filter/subprocess-filter';
+import { SubprocessFilterDataProps } from '~/components/subprocess-filter/subprocess-filter';
 
-type CssRules = 'root' | 'label' | 'value' | 'middleValue' | 'switch' | 'grid';
+type CssRules = 'root';
 
 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
     root: {
         fontSize: '0.875rem'
-    },
-    label: {
-        color: theme.palette.grey["500"],
-        marginBottom: theme.spacing.unit
-    },
-    value: {
-        marginBottom: theme.spacing.unit
-    },
-    middleValue: {
-        marginBottom: theme.spacing.unit - 2
-    },
-    switch: {
-        '& span:first-child': {
-            height: '18px'
-        }
-    },
-    grid: {
-        marginLeft: '22px'
     }
 });
 
-type SubprocessesProps = WithStyles<CssRules>;
+interface SubprocessesDataProps {
+    subprocesses: number;
+    filters: SubprocessFilterDataProps[];
+    onToggle: (filter: SubprocessFilterDataProps) => void;
+}
 
-export const SubprocessesCard = withStyles(styles)(
-    class extends React.Component<SubprocessesProps> {
-
-        state = {
-            queued: true,
-            active: true,
-            completed: true,
-            failed: true
-        };
-
-        handleChange = (name: string) => (event: any) => {
-            this.setState({ [name]: event.target.checked });
-        }
+type SubprocessesProps = SubprocessesDataProps & WithStyles<CssRules>;
 
-        render() {
-            const { classes } = this.props;
-            return (
-                <Card className={classes.root}>
-                    <CardHeader title="Subprocess and filters" />
-                    <CardContent>
-                        <Grid container direction="row" spacing={16} justify="flex-start" alignItems="stretch">
-                            <Grid item>
-                                <Grid container direction="column" alignItems="flex-end" spacing={8}>
-                                    <Grid item className={classes.label}>Subprocesses:</Grid>
-                                    <Grid item className={classes.label}>Queued:</Grid>
-                                    <Grid item className={classes.label}>Active:</Grid>
-                                </Grid>
-                            </Grid>
-                            <Grid item>
-                                <Grid container direction="column" alignItems="flex-start" spacing={8}>
-                                    <Grid item className={classes.value}>1</Grid>
-                                    <Grid item className={classes.middleValue}>
-                                        2
-                                        <Switch classes={{ root: classes.switch }}
-                                            checked={this.state.queued}
-                                            onChange={this.handleChange('queued')}
-                                            value="queued"
-                                            color="primary" />
-                                    </Grid>
-                                    <Grid item className={classes.value}>
-                                        3
-                                        <Switch classes={{ root: classes.switch }}
-                                            checked={this.state.active}
-                                            onChange={this.handleChange('active')}
-                                            value="active"
-                                            color="primary" />
-                                    </Grid>
-                                </Grid>
-                            </Grid>
-                            <Grid item className={classes.grid}>
-                                <Grid container direction="column" alignItems="flex-end" spacing={8}>
-                                    <Grid item className={classes.label}>&nbsp;</Grid>
-                                    <Grid item className={classes.label}>Completed:</Grid>
-                                    <Grid item className={classes.label}>Failed:</Grid>
-                                </Grid>
-                            </Grid>
-                            <Grid item>
-                                <Grid container direction="column" alignItems="flex-end" spacing={8}>
-                                    <Grid item className={classes.value}>&nbsp;</Grid>
-                                    <Grid item className={classes.middleValue}>
-                                        2
-                                        <Switch classes={{ root: classes.switch }}
-                                            checked={this.state.completed}
-                                            onChange={this.handleChange('completed')}
-                                            value="completed"
-                                            color="primary" />
-                                    </Grid>
-                                    <Grid item className={classes.value}>
-                                        1
-                                        <Switch classes={{ root: classes.switch }}
-                                            checked={this.state.failed}
-                                            onChange={this.handleChange('failed')}
-                                            value="failed"
-                                            color="primary" />
-                                    </Grid>
-                                </Grid>
-                            </Grid>
-                        </Grid>
-                    </CardContent>
-                </Card>
-            );
-        }
-    }
+export const SubprocessesCard = withStyles(styles)(
+    ({ classes, filters, subprocesses, onToggle }: SubprocessesProps) => 
+        <Card className={classes.root}>
+            <CardHeader title="Subprocess and filters" />
+            <CardContent>
+                <Grid container direction="column" spacing={16}>
+                    <Grid item xs={12} container spacing={16}>
+                        <SubprocessFilter label='Subprocesses' value={subprocesses} />     
+                    </Grid>
+                    <Grid item xs={12} container spacing={16}>
+                        {
+                            filters.map(filter => 
+                                <SubprocessFilter {...filter} key={filter.key} onToggle={() => onToggle(filter)} />                                                     
+                            )
+                        }
+                    </Grid>
+                </Grid>
+            </CardContent>
+        </Card>
 );
\ No newline at end of file