Merge branch 'master'
authorMichal Klobukowski <michal.klobukowski@contractors.roche.com>
Thu, 30 Aug 2018 08:47:24 +0000 (10:47 +0200)
committerMichal Klobukowski <michal.klobukowski@contractors.roche.com>
Thu, 30 Aug 2018 08:47:24 +0000 (10:47 +0200)
Feature #14099

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

src/components/details-attribute/details-attribute.tsx
src/components/subprocess-filter/subprocess-filter.tsx [new file with mode: 0644]
src/store/collection-panel/collection-panel-files/collection-panel-files-actions.ts
src/store/collections/collection-partial-copy-actions.ts
src/views-components/dialog-forms/files-upload-collection-dialog.ts [moved from src/views-components/dialog-forms/upload-collection-files-dialog.ts with 81% similarity]
src/views-components/dialog-forms/partial-copy-collection-dialog.ts
src/views/process-panel/process-panel-root.tsx
src/views/process-panel/subprocesses-card.tsx [new file with mode: 0644]
src/views/workbench/workbench.tsx

index fd8e948ff046a5c14106e16ea426ff31b3807d4f..78b4341d173046972385cad95e584cb735138085 100644 (file)
@@ -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/components/subprocess-filter/subprocess-filter.tsx b/src/components/subprocess-filter/subprocess-filter.tsx
new file mode 100644 (file)
index 0000000..58c33ee
--- /dev/null
@@ -0,0 +1,54 @@
+// Copyright (C) The Arvados Authors. All rights reserved.
+//
+// SPDX-License-Identifier: AGPL-3.0
+
+import * as React from 'react';
+import { StyleRulesCallback, WithStyles, withStyles } from '@material-ui/core/styles';
+import { ArvadosTheme } from '~/common/custom-theme';
+import { Grid, Typography, Switch } from '@material-ui/core';
+
+type CssRules = 'grid' | 'label' | 'value' | 'switch';
+
+const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
+    grid: {
+        display: 'flex'
+    },
+    label: {
+        width: '86px',
+        color: theme.palette.grey["500"],
+        textAlign: 'right'
+    },
+    value: {
+        width: '24px',
+        paddingLeft: theme.spacing.unit
+    },
+    switch: {
+        '& span:first-child': {
+            height: '18px'
+        }
+    }
+});
+
+export interface SubprocessFilterDataProps {
+    label: string;
+    value: number;
+    checked?: boolean;
+    key?: string;
+    onToggle?: () => void;
+}
+
+type SubprocessFilterProps = SubprocessFilterDataProps & WithStyles<CssRules>;
+
+export const SubprocessFilter = withStyles(styles)(
+    ({ classes, label, value, key, checked, onToggle }: SubprocessFilterProps) =>
+        <Grid item className={classes.grid} md={12} lg={6} >
+            <Typography component="span" className={classes.label}>{label}:</Typography>
+            <Typography component="span" className={classes.value}>{value}</Typography>
+            {onToggle && <Switch classes={{ root: classes.switch }}
+                checked={checked}
+                onChange={onToggle}
+                value={key}
+                color="primary" />
+            }
+        </Grid>
+);
\ No newline at end of file
index d509218ecfa2ca8cd0c203780ad8985ae734f85b..413fedfc1c08eccd17fe24f4c22aecd03d5a000e 100644 (file)
@@ -86,8 +86,6 @@ export const openMultipleFilesRemoveDialog = () =>
         }
     });
 
-
-
 export const RENAME_FILE_DIALOG = 'renameFileDialog';
 export interface RenameFileDialogData {
     name: string;
index f0dd2780d4f5255a0f4ed9c837e06397028490a2..a063abae4107a28438da4e503d2c33d7700a1ca6 100644 (file)
@@ -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();
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)
@@ -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,
index 9a350f6307ce908f9b503b5b9b21c3ebc45ccc7b..16f8275e8fb57821c8ed2f4b8065c4b8c6c43eb9 100644 (file)
@@ -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
index c7ac938a93bdc9c0e6ea7c73ef73bcc327f3cc35..feada3acb3c8231266365de6641a982c498f4b43 100644 (file)
@@ -8,6 +8,7 @@ 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;
@@ -21,12 +22,43 @@ export type ProcessPanelRootProps = ProcessPanelRootDataProps & ProcessPanelRoot
 
 export const ProcessPanelRoot = (props: ProcessPanelRootProps) =>
     props.process
-        ? <Grid container>
+        ? <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'
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..ac60c9f
--- /dev/null
@@ -0,0 +1,46 @@
+// 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 { SubprocessFilter } from '~/components/subprocess-filter/subprocess-filter';
+import { SubprocessFilterDataProps } from '~/components/subprocess-filter/subprocess-filter';
+
+type CssRules = 'root';
+
+const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
+    root: {
+        fontSize: '0.875rem'
+    }
+});
+
+interface SubprocessesDataProps {
+    subprocesses: number;
+    filters: SubprocessFilterDataProps[];
+    onToggle: (filter: SubprocessFilterDataProps) => void;
+}
+
+type SubprocessesProps = SubprocessesDataProps & WithStyles<CssRules>;
+
+export const SubprocessesCard = withStyles(styles)(
+    ({ classes, filters, subprocesses, onToggle }: SubprocessesProps) => 
+        <Card className={classes.root}>
+            <CardHeader title="Subprocess and filters" />
+            <CardContent>
+                <Grid container direction="column" spacing={16}>
+                    <Grid item xs={12} container spacing={16}>
+                        <SubprocessFilter label='Subprocesses' value={subprocesses} />     
+                    </Grid>
+                    <Grid item xs={12} container spacing={16}>
+                        {
+                            filters.map(filter => 
+                                <SubprocessFilter {...filter} key={filter.key} onToggle={() => onToggle(filter)} />                                                     
+                            )
+                        }
+                    </Grid>
+                </Grid>
+            </CardContent>
+        </Card>
+);
\ No newline at end of file
index 860fb7ae2521fbbc5e5af6f9e56a1f4eded4ca86..ef5fe215290e4e33dfac8988840d0cb4740ed83d 100644 (file)
@@ -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 />