Merge branch '13858-process-view-information-card' into 13860-status-for-subprocesses

refs #13858
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 4a94dc30d3f778a9a559631ada8026c93f561c68..dce08986d34d2349e67009f6bfac5db38f39ca04 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/store/collection-panel/collection-panel-files/collection-panel-files-actions.ts b/src/store/collection-panel/collection-panel-files/collection-panel-files-actions.ts
index d509218ecfa2ca8cd0c203780ad8985ae734f85b..413fedfc1c08eccd17fe24f4c22aecd03d5a000e 100644 (file)
--- a/src/store/collection-panel/collection-panel-files/collection-panel-files-actions.ts
+++ b/src/store/collection-panel/collection-panel-files/collection-panel-files-actions.ts
@@ -86,8 +86,6 @@ export const openMultipleFilesRemoveDialog = () =>
         }
     });
 
-
-
 export const RENAME_FILE_DIALOG = 'renameFileDialog';
 export interface RenameFileDialogData {
     name: string;

diff --git a/src/store/collections/collection-partial-copy-actions.ts b/src/store/collections/collection-partial-copy-actions.ts
index f0dd2780d4f5255a0f4ed9c837e06397028490a2..a063abae4107a28438da4e503d2c33d7700a1ca6 100644 (file)
--- a/src/store/collections/collection-partial-copy-actions.ts
+++ b/src/store/collections/collection-partial-copy-actions.ts
@@ -35,7 +35,7 @@ export const openCollectionPartialCopyDialog = () =>
         }
     };
 
-export const doCollectionPartialCopy = ({ name, description, projectUuid }: CollectionPartialCopyFormData) =>
+export const copyCollectionPartial = ({ name, description, projectUuid }: CollectionPartialCopyFormData) =>
     async (dispatch: Dispatch, getState: () => RootState, services: ServiceRepository) => {
         dispatch(startSubmit(COLLECTION_PARTIAL_COPY_FORM_NAME));
         const state = getState();

diff --git a/src/views-components/dialog-forms/upload-collection-files-dialog.ts b/src/views-components/dialog-forms/files-upload-collection-dialog.ts
similarity index 81%
rename from src/views-components/dialog-forms/upload-collection-files-dialog.ts
rename to src/views-components/dialog-forms/files-upload-collection-dialog.ts
index 38f0333e4d146d071e13ac639324cb03f73d796b..a24490f727fd58d03fe6f40078db73827c88b639 100644 (file)
--- a/src/views-components/dialog-forms/upload-collection-files-dialog.ts
+++ b/src/views-components/dialog-forms/files-upload-collection-dialog.ts
@@ -7,9 +7,9 @@ import { reduxForm } from 'redux-form';
 import { withDialog } from "~/store/dialog/with-dialog";
 import { CollectionCreateFormDialogData } from '~/store/collections/collection-create-actions';
 import { COLLECTION_UPLOAD_FILES_DIALOG, submitCollectionFiles } from '~/store/collections/collection-upload-actions';
-import { DialogCollectionFilesUpload } from '../dialog-upload/dialog-collection-files-upload';
+import { DialogCollectionFilesUpload } from '~/views-components/dialog-upload/dialog-collection-files-upload';
 
-export const UploadCollectionFilesDialog = compose(
+export const FilesUploadCollectionDialog = compose(
     withDialog(COLLECTION_UPLOAD_FILES_DIALOG),
     reduxForm<CollectionCreateFormDialogData>({
         form: COLLECTION_UPLOAD_FILES_DIALOG,

diff --git a/src/views-components/dialog-forms/partial-copy-collection-dialog.ts b/src/views-components/dialog-forms/partial-copy-collection-dialog.ts
index 9a350f6307ce908f9b503b5b9b21c3ebc45ccc7b..16f8275e8fb57821c8ed2f4b8065c4b8c6c43eb9 100644 (file)
--- a/src/views-components/dialog-forms/partial-copy-collection-dialog.ts
+++ b/src/views-components/dialog-forms/partial-copy-collection-dialog.ts
@@ -5,15 +5,15 @@
 import { compose } from "redux";
 import { reduxForm } from 'redux-form';
 import { withDialog, } from '~/store/dialog/with-dialog';
-import { CollectionPartialCopyFormData, doCollectionPartialCopy, COLLECTION_PARTIAL_COPY_FORM_NAME } from '~/store/collections/collection-partial-copy-actions';
+import { CollectionPartialCopyFormData, copyCollectionPartial, COLLECTION_PARTIAL_COPY_FORM_NAME } from '~/store/collections/collection-partial-copy-actions';
 import { DialogCollectionPartialCopy } from "~/views-components/dialog-copy/dialog-collection-partial-copy";
 
 
 export const PartialCopyCollectionDialog = compose(
     withDialog(COLLECTION_PARTIAL_COPY_FORM_NAME),
-    reduxForm({
+    reduxForm<CollectionPartialCopyFormData>({
         form: COLLECTION_PARTIAL_COPY_FORM_NAME,
-        onSubmit: (data: CollectionPartialCopyFormData, dispatch) => {
-            dispatch(doCollectionPartialCopy(data));
+        onSubmit: (data, dispatch) => {
+            dispatch(copyCollectionPartial(data));
         }
     }))(DialogCollectionPartialCopy);
\ 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 ce98a4880b1ac337a9ef6a2a3a5778d3dc318443..402e5d0e725951040ff5c0008195602417ad0aa7 100644 (file)
--- a/src/views/process-panel/process-panel.tsx
+++ b/src/views/process-panel/process-panel.tsx
@@ -3,17 +3,21 @@
 // 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/process-panel/information-card';
+import { SubprocessesCard } from '~/views/process-panel/subprocesses-card';
 
 export class ProcessPanel extends React.Component {
     render() {
         return <div>
-            <Grid container>
+            <Grid container spacing={16}>
                 <Grid item xs={7}>
                     <ProcessInformationCard />
                 </Grid>
+                <Grid item xs={5}>
+                    <SubprocessesCard />
+                </Grid>
             </Grid>
         </div>;
     }
-}
\ No newline at end of file
+}

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

diff --git a/src/views/workbench/workbench.tsx b/src/views/workbench/workbench.tsx
index 1d53842b422bcbcb4484b6607c355d46fa5d8445..a0619ae346fc7eb715547da07d49373f0bc9b799 100644 (file)
--- a/src/views/workbench/workbench.tsx
+++ b/src/views/workbench/workbench.tsx
@@ -24,8 +24,9 @@ import { AuthService } from "~/services/auth-service/auth-service";
 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 @@ import { UpdateCollectionDialog } from '~/views-components/dialog-forms/update-c
 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;
 
@@ -179,9 +179,10 @@ export const Workbench = withStyles(styles)(
                         <PartialCopyCollectionDialog />
                         <FileRemoveDialog />
                         <CopyCollectionDialog />
+                        <FileRemoveDialog />
                         <MultipleFilesRemoveDialog />
                         <UpdateCollectionDialog />
-                        <UploadCollectionFilesDialog />
+                        <FilesUploadCollectionDialog />
                         <UpdateProjectDialog />
                         <MoveCollectionDialog />
                         <MoveProjectDialog />