create subprocesses card

Feature #13860

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

diff --git a/src/components/details-attribute/details-attribute.tsx b/src/components/details-attribute/details-attribute.tsx
index 8794b1585bf595a159d0034ba39a08a518bd694e..fe31b0b333f7c6e1c0974a253d9761ac2157a423 100644 (file)
--- a/src/components/details-attribute/details-attribute.tsx
+++ b/src/components/details-attribute/details-attribute.tsx
@@ -17,10 +17,12 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
         marginBottom: theme.spacing.unit
     },
     label: {
+        boxSizing: 'border-box',
         color: theme.palette.grey["500"],
         width: '40%'
     },
     value: {
+        boxSizing: 'border-box',
         width: '60%',
         display: 'flex',
         alignItems: 'flex-start',

diff --git a/src/views/process-panel/process-panel.tsx b/src/views/process-panel/process-panel.tsx
index 70a7a405ac8e83ee6c66ee18689bad107c46683c..d7a9305261123717f462c93b14507d5ec7cba676 100644 (file)
--- a/src/views/process-panel/process-panel.tsx
+++ b/src/views/process-panel/process-panel.tsx
@@ -16,6 +16,7 @@ import { DetailsAttribute } from '~/components/details-attribute/details-attribu
 import { RootState } from '~/store/store';
 import { ContextMenuKind } from '~/views-components/context-menu/context-menu';
 import { openContextMenu } from '~/store/context-menu/context-menu-actions';
+import { SubprocessesCard } from '~/views/process-panel/subprocesses-card';
 
 type CssRules = 'card' | 'iconHeader' | 'label' | 'value' | 'content' | 'chip' | 'headerText' | 'link';
 
@@ -123,6 +124,7 @@ export const ProcessPanel = withStyles(styles)(
                         </CardContent>
                         <span className={classes.headerText}>This container request was created from the workflow FastQC MultiQC</span>
                     </Card>
+                    <SubprocessesCard />
                 </div>;
             }
 

diff --git a/src/views/process-panel/subprocesses-card.tsx b/src/views/process-panel/subprocesses-card.tsx
new file mode 100644 (file)
index 0000000..ac644bb
--- /dev/null
+++ b/src/views/process-panel/subprocesses-card.tsx
@@ -0,0 +1,99 @@
+// Copyright (C) The Arvados Authors. All rights reserved.
+//
+// SPDX-License-Identifier: AGPL-3.0
+
+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';
+
+type CssRules = 'root' | 'label' | 'value' | 'switch';
+
+const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
+    root: {
+
+    },
+    label: {
+        paddingRight: theme.spacing.unit * 2,
+        textAlign: 'right'
+    },
+    value: {
+
+    },
+    switch: {
+        height: '18px'
+    }
+});
+
+type SubprocessesProps = WithStyles<CssRules>;
+
+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 });
+        }
+
+        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>
+                        </Grid>
+                    </CardContent>
+                </Card>
+            );
+        }
+    }
+);
\ No newline at end of file