Merge branch 'master'

Feature #14099

Arvados-DCO-1.1-Signed-off-by: Michal Klobukowski <michal.klobukowski@contractors.roche.com>

diff --combined src/components/details-attribute/details-attribute.tsx
index fd8e948ff046a5c14106e16ea426ff31b3807d4f,dce08986d34d2349e67009f6bfac5db38f39ca04..78b4341d173046972385cad95e584cb735138085
--- 1/src/components/details-attribute/details-attribute.tsx
--- 2/src/components/details-attribute/details-attribute.tsx
+++ b/src/components/details-attribute/details-attribute.tsx
@@@ -17,10 -17,12 +17,12 @@@ const styles: StyleRulesCallback<CssRul
          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',
@@@ -41,7 -43,7 +43,7 @@@
  interface DetailsAttributeDataProps {
      label: string;
      classLabel?: string;
 -    value?: string | number;
 +    value?: React.ReactNode;
      classValue?: string;
      lowercaseValue?: boolean;
      link?: string;

diff --combined src/views/process-panel/process-panel-root.tsx
index c7ac938a93bdc9c0e6ea7c73ef73bcc327f3cc35,0000000000000000000000000000000000000000..feada3acb3c8231266365de6641a982c498f4b43
mode 100644,000000..100644
--- 1/src/views/process-panel/process-panel-root.tsx
--- /dev/null
+++ b/src/views/process-panel/process-panel-root.tsx
@@@ -1,37 -1,0 +1,69 @@@
-         ? <Grid container>
 +// Copyright (C) The Arvados Authors. All rights reserved.
 +//
 +// SPDX-License-Identifier: AGPL-3.0
 +
 +import * as React from 'react';
 +import { Grid } from '@material-ui/core';
 +import { ProcessInformationCard } from './process-information-card';
 +import { DefaultView } from '~/components/default-view/default-view';
 +import { ProcessIcon } from '~/components/icon/icon';
 +import { Process } from '~/store/processes/process';
++import { SubprocessesCard } from './subprocesses-card';
 +
 +export interface ProcessPanelRootDataProps {
 +    process?: Process;
 +}
 +
 +export interface ProcessPanelRootActionProps {
 +    onContextMenu: (event: React.MouseEvent<HTMLElement>) => void;
 +}
 +
 +export type ProcessPanelRootProps = ProcessPanelRootDataProps & ProcessPanelRootActionProps;
 +
 +export const ProcessPanelRoot = (props: ProcessPanelRootProps) =>
 +    props.process
++        ? <Grid container spacing={16}>
 +            <Grid item xs={7}>
 +                <ProcessInformationCard
 +                    process={props.process}
 +                    onContextMenu={props.onContextMenu} />
 +            </Grid>
++            <Grid item xs={5}>
++                <SubprocessesCard
++                    subprocesses={4}
++                    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={() => { return; }}
++                />
++            </Grid>
 +        </Grid>
 +        : <Grid container
 +            alignItems='center'
 +            justify='center'>
 +            <DefaultView
 +                icon={ProcessIcon}
 +                messages={['Process not found']} />
 +        </Grid>;

diff --combined src/views/workbench/workbench.tsx
index 860fb7ae2521fbbc5e5af6f9e56a1f4eded4ca86,a0619ae346fc7eb715547da07d49373f0bc9b799..ef5fe215290e4e33dfac8988840d0cb4740ed83d
--- 1/src/views/workbench/workbench.tsx
--- 2/src/views/workbench/workbench.tsx
+++ b/src/views/workbench/workbench.tsx
@@@ -24,8 -24,9 +24,9 @@@ import { AuthService } from "~/services
  import { RenameFileDialog } from '~/views-components/rename-file-dialog/rename-file-dialog';
  import { FileRemoveDialog } from '~/views-components/file-remove-dialog/file-remove-dialog';
  import { MultipleFilesRemoveDialog } from '~/views-components/file-remove-dialog/multiple-files-remove-dialog';
- import { SidePanel } from '~/views-components/side-panel/side-panel';
  import { Routes } from '~/routes/routes';
+ import { SidePanel } from '~/views-components/side-panel/side-panel';
+ import { ProcessPanel } from '~/views/process-panel/process-panel';
  import { Breadcrumbs } from '~/views-components/breadcrumbs/breadcrumbs';
  import { CreateProjectDialog } from '~/views-components/dialog-forms/create-project-dialog';
  import { CreateCollectionDialog } from '~/views-components/dialog-forms/create-collection-dialog';
@@@ -34,10 -35,9 +35,9 @@@ import { UpdateCollectionDialog } from 
  import { UpdateProjectDialog } from '~/views-components/dialog-forms/update-project-dialog';
  import { MoveProjectDialog } from '~/views-components/dialog-forms/move-project-dialog';
  import { MoveCollectionDialog } from '~/views-components/dialog-forms/move-collection-dialog';
- import { ProcessPanel } from '~/views/process-panel/process-panel';
- import { UploadCollectionFilesDialog } from '~/views-components/dialog-forms/upload-collection-files-dialog';
- import { PartialCopyCollectionDialog } from '~/views-components/dialog-forms/partial-copy-collection-dialog';
  
+ import { FilesUploadCollectionDialog } from '~/views-components/dialog-forms/files-upload-collection-dialog';
+ import { PartialCopyCollectionDialog } from '~/views-components/dialog-forms/partial-copy-collection-dialog';
  
  const APP_BAR_HEIGHT = 100;
  
@@@ -166,7 -166,7 +166,7 @@@ export const Workbench = withStyles(sty
                                      <Route path={Routes.PROJECTS} component={ProjectPanel} />
                                      <Route path={Routes.COLLECTIONS} component={CollectionPanel} />
                                      <Route path={Routes.FAVORITES} component={FavoritePanel} />
 -                                    <Route path={Routes.PROCESS} component={ProcessPanel} />
 +                                    <Route path={Routes.PROCESSES} component={ProcessPanel} />
                                  </Switch>
                              </div>
                              {user && <DetailsPanel />}
@@@ -179,9 -179,10 +179,10 @@@
                          <PartialCopyCollectionDialog />
                          <FileRemoveDialog />
                          <CopyCollectionDialog />
+                         <FileRemoveDialog />
                          <MultipleFilesRemoveDialog />
                          <UpdateCollectionDialog />
-                         <UploadCollectionFilesDialog />
+                         <FilesUploadCollectionDialog />
                          <UpdateProjectDialog />
                          <MoveCollectionDialog />
                          <MoveProjectDialog />