[ARVADOS-WORKBENCH2] updated: 1.2.0-196-g9fbb245
Git user
git at public.curoverse.com
Wed Aug 29 04:34:21 EDT 2018
Summary of changes:
.../details-attribute/details-attribute.tsx | 7 +-
.../file-upload-dialog/file-upload-dialog.tsx | 4 +-
src/components/file-upload/file-upload.tsx | 39 +++---
.../collection-panel/collection-panel-action.ts | 1 +
.../collection-panel-files-actions.ts | 59 --------
src/store/collections/collection-create-actions.ts | 12 +-
.../collections/collection-partial-copy-actions.ts | 71 ++++++++++
src/store/collections/collection-upload-actions.ts | 46 +++++++
src/store/collections/collections-reducer.ts | 14 --
.../uploader/collection-uploader-actions.ts | 63 ---------
src/store/file-uploader/file-uploader-actions.ts | 25 ++++
.../file-uploader-reducer.ts} | 10 +-
src/store/store.ts | 20 +--
.../collection-panel-files.ts | 5 +-
.../action-sets/collection-files-action-set.ts | 2 +-
.../context-menu/action-sets/process-action-set.ts | 18 +++
.../dialog-copy/dialog-collection-partial-copy.tsx | 22 ++-
.../dialog-create/dialog-collection-create.tsx | 26 ++--
.../dialog-forms/copy-collection-partial-dialog.ts | 19 ---
.../dialog-forms/create-collection-dialog.ts | 2 -
.../dialog-forms/files-upload-collection-dialog.ts | 20 +++
.../dialog-forms/partial-copy-collection-dialog.ts | 19 +++
.../dialog-collection-files-upload.tsx | 32 +++++
.../file-uploader/file-uploader.tsx | 35 +++++
.../form-fields/collection-form-fields.tsx | 8 --
.../upload-collection-files-dialog.ts | 29 ----
.../{process-panel.tsx => information-card.tsx} | 84 +++++-------
src/views/process-panel/process-panel.tsx | 150 +++------------------
src/views/process-panel/subprocesses-card.tsx | 99 ++++++++++++++
src/views/workbench/workbench.tsx | 14 +-
30 files changed, 496 insertions(+), 459 deletions(-)
create mode 100644 src/store/collections/collection-partial-copy-actions.ts
create mode 100644 src/store/collections/collection-upload-actions.ts
delete mode 100644 src/store/collections/collections-reducer.ts
delete mode 100644 src/store/collections/uploader/collection-uploader-actions.ts
create mode 100644 src/store/file-uploader/file-uploader-actions.ts
rename src/store/{collections/uploader/collection-uploader-reducer.ts => file-uploader/file-uploader-reducer.ts} (69%)
delete mode 100644 src/views-components/dialog-forms/copy-collection-partial-dialog.ts
create mode 100644 src/views-components/dialog-forms/files-upload-collection-dialog.ts
create mode 100644 src/views-components/dialog-forms/partial-copy-collection-dialog.ts
create mode 100644 src/views-components/dialog-upload/dialog-collection-files-upload.tsx
create mode 100644 src/views-components/file-uploader/file-uploader.tsx
delete mode 100644 src/views-components/upload-collection-files-dialog/upload-collection-files-dialog.ts
copy src/views/process-panel/{process-panel.tsx => information-card.tsx} (55%)
create mode 100644 src/views/process-panel/subprocesses-card.tsx
via 9fbb245286171bc55fed5b5104361a1869a1d76b (commit)
via ae9841925d717e97a74f3ae17c414c638c56e496 (commit)
via d911869b4340a32575e3a2cdce26ebd543522e42 (commit)
via 59b24ea9a90ba60563316a5c2ad4c7ce8a8c423d (commit)
via 931bbc0730608697ddb30f5ad51d9cc19cca3679 (commit)
via 0997bb068a2ecb8f6b0b13d22f3ef57ae1243405 (commit)
via e3b0f767bb84fa82188879e391b5feff15a3db0f (commit)
via c175f990704fdef165616125433e2079a00a3437 (commit)
via 00acbabe840ee98597ef94751e22f48f44ee5777 (commit)
via 9f4bca6531631fc5ed21435f31db36720d58512b (commit)
via d37d39ad8825b03c39915e1258e294abcf0c3b6a (commit)
via 3d8c3da5fdc9488ac37d09211af8312e77ebebcb (commit)
via 6a024c9a0ad6543bf95359b10bcd22aeec3e7dca (commit)
via fb1ecf2421f8aac07d733d3bb56bb39312274f8c (commit)
from dbde3a8cc8098e423fb7d7f7147ea8a664744957 (commit)
Those revisions listed above that are new to this repository have
not appeared on any other notification email; so we list those
revisions in full, below.
commit 9fbb245286171bc55fed5b5104361a1869a1d76b
Merge: ae98419 d911869
Author: Janicki Artur <artur.janicki at contractors.roche.com>
Date: Wed Aug 29 10:34:03 2018 +0200
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 at contractors.roche.com>
diff --cc src/store/collection-panel/collection-panel-files/collection-panel-files-actions.ts
index 96ff17c,d509218..413fedf
--- 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,65 -86,8 +86,6 @@@ export const openMultipleFilesRemoveDia
}
});
- export const COLLECTION_PARTIAL_COPY_FORM_NAME = 'collectionPartialCopyFormName';
-
- export interface CollectionPartialCopyFormData {
- name: string;
- description: string;
- projectUuid: string;
- }
-
- export const openCollectionPartialCopyDialog = () =>
- (dispatch: Dispatch, getState: () => RootState) => {
- const currentCollection = getState().collectionPanel.item;
- if (currentCollection) {
- const initialData = {
- name: currentCollection.name,
- description: currentCollection.description,
- projectUuid: ''
- };
- dispatch(initialize(COLLECTION_PARTIAL_COPY_FORM_NAME, initialData));
- dispatch<any>(resetPickerProjectTree());
- dispatch(dialogActions.OPEN_DIALOG({ id: COLLECTION_PARTIAL_COPY_FORM_NAME, data: {} }));
- }
- };
-
--
- export const copyCollectionPartial = ({ name, description, projectUuid }: CollectionPartialCopyFormData) =>
- async (dispatch: Dispatch, getState: () => RootState, services: ServiceRepository) => {
- dispatch(startSubmit(COLLECTION_PARTIAL_COPY_FORM_NAME));
- const state = getState();
- const currentCollection = state.collectionPanel.item;
- if (currentCollection) {
- try {
- const collection = await services.collectionService.get(currentCollection.uuid);
- const collectionCopy = {
- ...collection,
- name,
- description,
- ownerUuid: projectUuid,
- uuid: undefined
- };
- const newCollection = await services.collectionService.create(collectionCopy);
- const paths = filterCollectionFilesBySelection(state.collectionPanelFiles, false).map(file => file.id);
- await services.collectionService.deleteFiles(newCollection.uuid, paths);
- dispatch(dialogActions.CLOSE_DIALOG({ id: COLLECTION_PARTIAL_COPY_FORM_NAME }));
- dispatch(snackbarActions.OPEN_SNACKBAR({ message: 'New collection created.', hideDuration: 2000 }));
- } catch (e) {
- const error = getCommonResourceServiceError(e);
- if (error === CommonResourceServiceError.UNIQUE_VIOLATION) {
- dispatch(stopSubmit(COLLECTION_PARTIAL_COPY_FORM_NAME, { name: 'Collection with this name already exists.' }));
- } else if (error === CommonResourceServiceError.UNKNOWN) {
- dispatch(dialogActions.CLOSE_DIALOG({ id: COLLECTION_PARTIAL_COPY_FORM_NAME }));
- dispatch(snackbarActions.OPEN_SNACKBAR({ message: 'Could not create a copy of collection', hideDuration: 2000 }));
- } else {
- dispatch(dialogActions.CLOSE_DIALOG({ id: COLLECTION_PARTIAL_COPY_FORM_NAME }));
- dispatch(snackbarActions.OPEN_SNACKBAR({ message: 'Collection has been copied but may contain incorrect files.', hideDuration: 2000 }));
- }
- }
- }
- };
--
export const RENAME_FILE_DIALOG = 'renameFileDialog';
export interface RenameFileDialogData {
name: string;
diff --cc src/store/collections/collection-partial-copy-actions.ts
index 0000000,f0dd278..a063aba
mode 000000,100644..100644
--- a/src/store/collections/collection-partial-copy-actions.ts
+++ b/src/store/collections/collection-partial-copy-actions.ts
@@@ -1,0 -1,71 +1,71 @@@
+ // Copyright (C) The Arvados Authors. All rights reserved.
+ //
+ // SPDX-License-Identifier: AGPL-3.0
+
+ import { Dispatch } from 'redux';
+ import { RootState } from '~/store/store';
+ import { initialize, startSubmit, stopSubmit } from 'redux-form';
+ import { resetPickerProjectTree } from '~/store/project-tree-picker/project-tree-picker-actions';
+ import { dialogActions } from '~/store/dialog/dialog-actions';
+ import { ServiceRepository } from '~/services/services';
+ import { filterCollectionFilesBySelection } from '../collection-panel/collection-panel-files/collection-panel-files-state';
+ import { snackbarActions } from '~/store/snackbar/snackbar-actions';
+ import { getCommonResourceServiceError, CommonResourceServiceError } from '~/common/api/common-resource-service';
+
+ export const COLLECTION_PARTIAL_COPY_FORM_NAME = 'COLLECTION_PARTIAL_COPY_DIALOG';
+
+ export interface CollectionPartialCopyFormData {
+ name: string;
+ description: string;
+ projectUuid: string;
+ }
+
+ export const openCollectionPartialCopyDialog = () =>
+ (dispatch: Dispatch, getState: () => RootState) => {
+ const currentCollection = getState().collectionPanel.item;
+ if (currentCollection) {
+ const initialData = {
+ name: currentCollection.name,
+ description: currentCollection.description,
+ projectUuid: ''
+ };
+ dispatch(initialize(COLLECTION_PARTIAL_COPY_FORM_NAME, initialData));
+ dispatch<any>(resetPickerProjectTree());
+ dispatch(dialogActions.OPEN_DIALOG({ id: COLLECTION_PARTIAL_COPY_FORM_NAME, data: {} }));
+ }
+ };
+
-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();
+ const currentCollection = state.collectionPanel.item;
+ if (currentCollection) {
+ try {
+ const collection = await services.collectionService.get(currentCollection.uuid);
+ const collectionCopy = {
+ ...collection,
+ name,
+ description,
+ ownerUuid: projectUuid,
+ uuid: undefined
+ };
+ const newCollection = await services.collectionService.create(collectionCopy);
+ const paths = filterCollectionFilesBySelection(state.collectionPanelFiles, false).map(file => file.id);
+ await services.collectionService.deleteFiles(newCollection.uuid, paths);
+ dispatch(dialogActions.CLOSE_DIALOG({ id: COLLECTION_PARTIAL_COPY_FORM_NAME }));
+ dispatch(snackbarActions.OPEN_SNACKBAR({ message: 'New collection created.', hideDuration: 2000 }));
+ } catch (e) {
+ const error = getCommonResourceServiceError(e);
+ if (error === CommonResourceServiceError.UNIQUE_VIOLATION) {
+ dispatch(stopSubmit(COLLECTION_PARTIAL_COPY_FORM_NAME, { name: 'Collection with this name already exists.' }));
+ } else if (error === CommonResourceServiceError.UNKNOWN) {
+ dispatch(dialogActions.CLOSE_DIALOG({ id: COLLECTION_PARTIAL_COPY_FORM_NAME }));
+ dispatch(snackbarActions.OPEN_SNACKBAR({ message: 'Could not create a copy of collection', hideDuration: 2000 }));
+ } else {
+ dispatch(dialogActions.CLOSE_DIALOG({ id: COLLECTION_PARTIAL_COPY_FORM_NAME }));
+ dispatch(snackbarActions.OPEN_SNACKBAR({ message: 'Collection has been copied but may contain incorrect files.', hideDuration: 2000 }));
+ }
+ }
+ }
+ };
diff --cc src/views-components/dialog-forms/files-upload-collection-dialog.ts
index 0000000,38f0333..a24490f
mode 000000,100644..100644
--- a/src/views-components/dialog-forms/files-upload-collection-dialog.ts
+++ b/src/views-components/dialog-forms/files-upload-collection-dialog.ts
@@@ -1,0 -1,20 +1,20 @@@
+ // Copyright (C) The Arvados Authors. All rights reserved.
+ //
+ // SPDX-License-Identifier: AGPL-3.0
+
+ import { compose } from "redux";
+ 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,
+ onSubmit: (data, dispatch) => {
+ dispatch(submitCollectionFiles());
+ }
+ })
+ )(DialogCollectionFilesUpload);
diff --cc src/views-components/dialog-forms/partial-copy-collection-dialog.ts
index 0000000,9a350f6..16f8275
mode 000000,100644..100644
--- a/src/views-components/dialog-forms/partial-copy-collection-dialog.ts
+++ b/src/views-components/dialog-forms/partial-copy-collection-dialog.ts
@@@ -1,0 -1,19 +1,19 @@@
+ // Copyright (C) The Arvados Authors. All rights reserved.
+ //
+ // SPDX-License-Identifier: AGPL-3.0
+
+ 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);
diff --cc src/views/process-panel/process-panel.tsx
index d7a9305,ce98a48..402e5d0
--- a/src/views/process-panel/process-panel.tsx
+++ b/src/views/process-panel/process-panel.tsx
@@@ -3,141 -3,17 +3,21 @@@
// SPDX-License-Identifier: AGPL-3.0
import * as React from 'react';
- import {
- StyleRulesCallback, WithStyles, withStyles, Card,
- CardHeader, IconButton, CardContent, Grid, Chip
- } from '@material-ui/core';
- import { ArvadosTheme } from '~/common/custom-theme';
- import { ProcessResource } from '~/models/process';
- import { DispatchProp, connect } from 'react-redux';
- import { RouteComponentProps } from 'react-router';
- import { MoreOptionsIcon, ProcessIcon } from '~/components/icon/icon';
- import { DetailsAttribute } from '~/components/details-attribute/details-attribute';
- import { RootState } from '~/store/store';
- import { ContextMenuKind } from '~/views-components/context-menu/context-menu';
- import { openContextMenu } from '~/store/context-menu/context-menu-actions';
-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';
- type CssRules = 'card' | 'iconHeader' | 'label' | 'value' | 'content' | 'chip' | 'headerText' | 'link';
-
- const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
- card: {
- marginBottom: theme.spacing.unit * 2,
- width: '60%'
- },
- iconHeader: {
- fontSize: '1.875rem',
- color: theme.customs.colors.green700
- },
- label: {
- fontSize: '0.875rem',
- },
- value: {
- textTransform: 'none',
- fontSize: '0.875rem'
- },
- content: {
- display: 'flex',
- paddingBottom: '0px ',
- paddingTop: '0px',
- '&:last-child': {
- paddingBottom: '0px ',
- }
- },
- link: {
- fontSize: '0.875rem',
- '&:hover': {
- color: theme.palette.primary.main,
- cursor: 'pointer'
- }
- },
- chip: {
- height: theme.spacing.unit * 2.5,
- width: theme.spacing.unit * 12,
- backgroundColor: theme.customs.colors.green700,
- color: theme.palette.common.white,
- fontSize: '0.875rem',
- borderRadius: theme.spacing.unit * 0.625
- },
- headerText: {
- fontSize: '0.875rem',
- display: 'flex',
- position: 'relative',
- justifyContent: 'flex-start',
- top: -theme.spacing.unit * 4.5,
- left: theme.spacing.unit * 3,
+ 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>;
}
- });
-
- interface ProcessPanelDataProps {
- item: ProcessResource;
--}
-
- interface ProcessPanelActionProps {
- onContextMenu: (event: React.MouseEvent<HTMLElement>, item: ProcessResource) => void;
+}
-
- type ProcessPanelProps = ProcessPanelDataProps & ProcessPanelActionProps & DispatchProp & WithStyles<CssRules> & RouteComponentProps<{ id: string }>;
-
- export const ProcessPanel = withStyles(styles)(
- connect((state: RootState) => ({
- item: state.collectionPanel.item,
- tags: state.collectionPanel.tags
- }))(
- class extends React.Component<ProcessPanelProps> {
- render() {
- const { classes } = this.props;
-
- return <div>
- <Card className={classes.card}>
- <CardHeader
- avatar={<ProcessIcon className={classes.iconHeader} />}
- action={
- <IconButton
- aria-label="More options"
- onClick={this.handleContextMenu}>
- <MoreOptionsIcon />
- </IconButton>
- }
- title="Pipeline template that generates a config file from a template" />
- <CardContent className={classes.content}>
- <Grid container direction="column">
- <Grid item xs={8}>
- <DetailsAttribute classLabel={classes.label} classValue={classes.value}
- label='Status' value={<Chip label="Complete" className={classes.chip} />} />
- <DetailsAttribute classLabel={classes.label} classValue={classes.value}
- label='Started at' value="1:25 PM 3/23/2018" />
- <DetailsAttribute classLabel={classes.label} classValue={classes.value}
- label='Finished at' value='1:25 PM 3/23/2018' />
- </Grid>
- </Grid>
- <Grid container direction="column">
- <Grid item xs={8}>
- <DetailsAttribute classLabel={classes.link} classValue={classes.value}
- label='Container output' />
- <DetailsAttribute classLabel={classes.link} classValue={classes.value}
- label='Show inputs' />
- <DetailsAttribute classLabel={classes.link} classValue={classes.value}
- label='Show command' />
- </Grid>
- </Grid>
- </CardContent>
- <span className={classes.headerText}>This container request was created from the workflow FastQC MultiQC</span>
- </Card>
- <SubprocessesCard />
- </div>;
- }
-
- handleContextMenu = (event: React.MouseEvent<any>) => {
- // const { uuid, name, description } = this.props.item;
- const resource = {
- uuid: '',
- name: '',
- description: '',
- kind: ContextMenuKind.PROCESS
- };
- this.props.dispatch<any>(openContextMenu(event, resource));
- }
- }
- )
- );
diff --cc src/views/workbench/workbench.tsx
index a3c4d2f,1d53842..a0619ae
--- a/src/views/workbench/workbench.tsx
+++ b/src/views/workbench/workbench.tsx
@@@ -24,10 -24,8 +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 { UploadCollectionFilesDialog } from '~/views-components/upload-collection-files-dialog/upload-collection-files-dialog';
- import { CopyCollectionPartialDialog } from '~/views-components/dialog-forms/copy-collection-partial-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';
@@@ -36,7 -34,10 +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;
@@@ -175,12 -176,12 +176,13 @@@ export const Workbench = withStyles(sty
<CreateProjectDialog />
<CreateCollectionDialog />
<RenameFileDialog />
+ <PartialCopyCollectionDialog />
+ <FileRemoveDialog />
<CopyCollectionDialog />
- <CopyCollectionPartialDialog />
+ <FileRemoveDialog />
<MultipleFilesRemoveDialog />
<UpdateCollectionDialog />
-- <UploadCollectionFilesDialog />
++ <FilesUploadCollectionDialog />
<UpdateProjectDialog />
<MoveCollectionDialog />
<MoveProjectDialog />
commit ae9841925d717e97a74f3ae17c414c638c56e496
Author: Janicki Artur <artur.janicki at contractors.roche.com>
Date: Wed Aug 29 07:35:52 2018 +0200
create subprocesses card
Feature #13860
Arvados-DCO-1.1-Signed-off-by: Janicki Artur <artur.janicki at contractors.roche.com>
diff --git a/src/components/details-attribute/details-attribute.tsx b/src/components/details-attribute/details-attribute.tsx
index 8794b15..fe31b0b 100644
--- 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/views/process-panel/process-panel.tsx b/src/views/process-panel/process-panel.tsx
index 70a7a40..d7a9305 100644
--- a/src/views/process-panel/process-panel.tsx
+++ b/src/views/process-panel/process-panel.tsx
@@ -16,6 +16,7 @@ import { DetailsAttribute } from '~/components/details-attribute/details-attribu
import { RootState } from '~/store/store';
import { ContextMenuKind } from '~/views-components/context-menu/context-menu';
import { openContextMenu } from '~/store/context-menu/context-menu-actions';
+import { SubprocessesCard } from '~/views/process-panel/subprocesses-card';
type CssRules = 'card' | 'iconHeader' | 'label' | 'value' | 'content' | 'chip' | 'headerText' | 'link';
@@ -123,6 +124,7 @@ export const ProcessPanel = withStyles(styles)(
</CardContent>
<span className={classes.headerText}>This container request was created from the workflow FastQC MultiQC</span>
</Card>
+ <SubprocessesCard />
</div>;
}
diff --git a/src/views/process-panel/subprocesses-card.tsx b/src/views/process-panel/subprocesses-card.tsx
new file mode 100644
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
-----------------------------------------------------------------------
hooks/post-receive
--
More information about the arvados-commits
mailing list