From: Janicki Artur <artur.janicki@contractors.roche.com>
Date: Thu, 30 Aug 2018 08:00:47 +0000 (+0200)
Subject: change code after CR
X-Git-Tag: 1.3.0~129^2~1
X-Git-Url: https://git.arvados.org/arvados-workbench2.git/commitdiff_plain/3d996002ab1f259b31d07858d9c5d0a780600a00?hp=de519d0b84931f8ef5fb7d2aecdb67a911c3eabf

change code after CR

Feature #13860

Arvados-DCO-1.1-Signed-off-by: Janicki Artur <artur.janicki@contractors.roche.com>
---

diff --git a/src/components/subprocess-filter/subprocess-filter.tsx b/src/components/subprocess-filter/subprocess-filter.tsx
new file mode 100644
index 00000000..58c33ee5
--- /dev/null
+++ b/src/components/subprocess-filter/subprocess-filter.tsx
@@ -0,0 +1,54 @@
+// Copyright (C) The Arvados Authors. All rights reserved.
+//
+// SPDX-License-Identifier: AGPL-3.0
+
+import * as React from 'react';
+import { StyleRulesCallback, WithStyles, withStyles } from '@material-ui/core/styles';
+import { ArvadosTheme } from '~/common/custom-theme';
+import { Grid, Typography, Switch } from '@material-ui/core';
+
+type CssRules = 'grid' | 'label' | 'value' | 'switch';
+
+const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
+    grid: {
+        display: 'flex'
+    },
+    label: {
+        width: '86px',
+        color: theme.palette.grey["500"],
+        textAlign: 'right'
+    },
+    value: {
+        width: '24px',
+        paddingLeft: theme.spacing.unit
+    },
+    switch: {
+        '& span:first-child': {
+            height: '18px'
+        }
+    }
+});
+
+export interface SubprocessFilterDataProps {
+    label: string;
+    value: number;
+    checked?: boolean;
+    key?: string;
+    onToggle?: () => void;
+}
+
+type SubprocessFilterProps = SubprocessFilterDataProps & WithStyles<CssRules>;
+
+export const SubprocessFilter = withStyles(styles)(
+    ({ classes, label, value, key, checked, onToggle }: SubprocessFilterProps) =>
+        <Grid item className={classes.grid} md={12} lg={6} >
+            <Typography component="span" className={classes.label}>{label}:</Typography>
+            <Typography component="span" className={classes.value}>{value}</Typography>
+            {onToggle && <Switch classes={{ root: classes.switch }}
+                checked={checked}
+                onChange={onToggle}
+                value={key}
+                color="primary" />
+            }
+        </Grid>
+);
\ No newline at end of file
diff --git a/src/views/process-panel/process-panel.tsx b/src/views/process-panel/process-panel.tsx
index b3820b47..3b21b571 100644
--- a/src/views/process-panel/process-panel.tsx
+++ b/src/views/process-panel/process-panel.tsx
@@ -6,15 +6,64 @@ import * as React from 'react';
 import { Grid } from '@material-ui/core';
 import { ProcessInformationCard } from '~/views/process-panel/information-card';
 import { SubprocessesCard } from '~/views/process-panel/subprocesses-card';
+import { SubprocessFilterDataProps } from '~/components/subprocess-filter/subprocess-filter';
 
 export class ProcessPanel extends React.Component {
+    state = {
+        filters: [
+            {
+                key: 'queued',
+                value: 1,
+                label: 'Queued',
+                checked: true
+            }, {
+                key: 'active',
+                value: 2,
+                label: 'Active',
+                checked: true
+            },
+            {
+                key: 'completed',
+                value: 2,
+                label: 'Completed',
+                checked: true
+            },
+            {
+                key: 'failed',
+                value: 2,
+                label: 'Failed',
+                checked: true
+            }
+        ]
+    };
+
+    onToggle = (filter: SubprocessFilterDataProps) => {
+        this.setState((prev: { filters: any[] }) => {
+            return {
+                filters: prev.filters.map((f: SubprocessFilterDataProps) => {
+                    if(f.key === filter.key) {
+                        return {
+                            ...filter,
+                            checked: !filter.checked
+                        };
+                    }
+                    return f;
+                })
+            };
+        });
+    }
+
     render() {
         return <Grid container spacing={16}>
             <Grid item xs={7}>
                 <ProcessInformationCard />
             </Grid>
             <Grid item xs={5}>
-                <SubprocessesCard />
+                <SubprocessesCard 
+                    subprocesses={4}
+                    filters={this.state.filters}
+                    onToggle={this.onToggle}
+                />
             </Grid>
         </Grid>;
     }
diff --git a/src/views/process-panel/subprocesses-card.tsx b/src/views/process-panel/subprocesses-card.tsx
index 1fd5817c..ac60c9f6 100644
--- 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