Merge branch 'master' into 13860-status-for-subprocesses

refs #13860

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

diff --cc src/views/process-panel/process-panel.tsx
index 3b21b571cb9540a7c78f9ead7feb29b9f67f2d0a,f416f7b2ed5c068bb045da94e1d8b17ed68451c0..2c8db99479b7c0dc2c626e2f21ac9f1e7b1a0d5f
--- 1/src/views/process-panel/process-panel.tsx
--- 2/src/views/process-panel/process-panel.tsx
+++ b/src/views/process-panel/process-panel.tsx
@@@ -3,68 -3,17 +3,68 @@@
  // SPDX-License-Identifier: AGPL-3.0
  
  import * as React from 'react';
 -import { ProcessInformationCard } from '~/views-components/process-information-card/process-information-card';
  import { Grid } from '@material-ui/core';
- import { ProcessInformationCard } from '~/views/process-panel/information-card';
++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>;
      }
 -}
 +}