Merge branch '13860-status-for-subprocesses'

[arvados-workbench2.git] / src / views / process-panel / process-panel.tsx

diff --git a/src/views/process-panel/process-panel.tsx b/src/views/process-panel/process-panel.tsx
index ce98a4880b1ac337a9ef6a2a3a5778d3dc318443..2c8db99479b7c0dc2c626e2f21ac9f1e7b1a0d5f 100644 (file)
--- a/src/views/process-panel/process-panel.tsx
+++ b/src/views/process-panel/process-panel.tsx
@@ -3,17 +3,68 @@
 // SPDX-License-Identifier: AGPL-3.0
 
 import * as React from 'react';
-import { ProcessInformationCard } from '~/views/process-panel/information-card';
 import { Grid } from '@material-ui/core';
+import { ProcessInformationCard } from '~/views-components/process-information-card/process-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 <div>
-            <Grid container>
-                <Grid item xs={7}>
-                    <ProcessInformationCard />
-                </Grid>
+        return <Grid container spacing={16}>
+            <Grid item xs={7}>
+                <ProcessInformationCard />
+            </Grid>
+            <Grid item xs={5}>
+                <SubprocessesCard 
+                    subprocesses={4}
+                    filters={this.state.filters}
+                    onToggle={this.onToggle}
+                />
             </Grid>
-        </div>;
+        </Grid>;
     }
-}
\ No newline at end of file
+}