[ARVADOS-WORKBENCH2] created: 1.2.0-155-g4476731
Git user
git at public.curoverse.com
Tue Aug 28 06:19:26 EDT 2018
at 4476731a9ec985c5abd97da453978af0dfa4406b (commit)
commit 4476731a9ec985c5abd97da453978af0dfa4406b
Author: Pawel Kowalczyk <pawel.kowalczyk at contractors.roche.com>
Date: Tue Aug 28 12:19:01 2018 +0200
info-card-view
Feature #13858
Arvados-DCO-1.1-Signed-off-by: Pawel Kowalczyk <pawel.kowalczyk at contractors.roche.com>
diff --git a/src/components/details-attribute/details-attribute.tsx b/src/components/details-attribute/details-attribute.tsx
index 32ab167..8794b15 100644
--- a/src/components/details-attribute/details-attribute.tsx
+++ b/src/components/details-attribute/details-attribute.tsx
@@ -40,7 +40,7 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
interface DetailsAttributeDataProps {
label: string;
classLabel?: string;
- value?: string | number;
+ value?: any;
classValue?: string;
lowercaseValue?: boolean;
link?: string;
diff --git a/src/index.tsx b/src/index.tsx
index bee08c8..c6a5da2 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -27,6 +27,7 @@ import { collectionFilesActionSet } from './views-components/context-menu/action
import { collectionFilesItemActionSet } from './views-components/context-menu/action-sets/collection-files-item-action-set';
import { collectionActionSet } from './views-components/context-menu/action-sets/collection-action-set';
import { collectionResourceActionSet } from './views-components/context-menu/action-sets/collection-resource-action-set';
+import { processActionSet } from './views-components/context-menu/action-sets/process-action-set';
const getBuildNumber = () => "BN-" + (process.env.REACT_APP_BUILD_NUMBER || "dev");
const getGitCommit = () => "GIT-" + (process.env.REACT_APP_GIT_COMMIT || "latest").substr(0, 7);
@@ -44,6 +45,7 @@ addMenuActionSet(ContextMenuKind.COLLECTION_FILES, collectionFilesActionSet);
addMenuActionSet(ContextMenuKind.COLLECTION_FILES_ITEM, collectionFilesItemActionSet);
addMenuActionSet(ContextMenuKind.COLLECTION, collectionActionSet);
addMenuActionSet(ContextMenuKind.COLLECTION_RESOURCE, collectionResourceActionSet);
+addMenuActionSet(ContextMenuKind.PROCESS, processActionSet);
fetchConfig()
.then(config => {
diff --git a/src/views-components/context-menu/action-sets/process-action-set.ts b/src/views-components/context-menu/action-sets/process-action-set.ts
new file mode 100644
index 0000000..1d94170
--- /dev/null
+++ b/src/views-components/context-menu/action-sets/process-action-set.ts
@@ -0,0 +1,93 @@
+// Copyright (C) The Arvados Authors. All rights reserved.
+//
+// SPDX-License-Identifier: AGPL-3.0
+
+import { ContextMenuActionSet } from "../context-menu-action-set";
+import { ToggleFavoriteAction } from "../actions/favorite-action";
+import { toggleFavorite } from "~/store/favorites/favorites-actions";
+import {
+ RenameIcon, ShareIcon, MoveToIcon, CopyIcon, DetailsIcon, ProvenanceGraphIcon,
+ AdvancedIcon, RemoveIcon, ReRunProcessIcon, LogIcon
+} from "~/components/icon/icon";
+import { favoritePanelActions } from "~/store/favorite-panel/favorite-panel-action";
+
+export const processActionSet: ContextMenuActionSet = [[
+ {
+ icon: RenameIcon,
+ name: "Edit process",
+ execute: (dispatch, resource) => {
+ // add code
+ }
+ },
+ {
+ icon: ShareIcon,
+ name: "Share",
+ execute: (dispatch, resource) => {
+ // add code
+ }
+ },
+ {
+ icon: MoveToIcon,
+ name: "Move to",
+ execute: (dispatch, resource) => {
+ // add code
+ }
+ },
+ {
+ component: ToggleFavoriteAction,
+ execute: (dispatch, resource) => {
+ dispatch<any>(toggleFavorite(resource)).then(() => {
+ dispatch<any>(favoritePanelActions.REQUEST_ITEMS());
+ });
+ }
+ },
+ {
+ icon: CopyIcon,
+ name: "Copy to project",
+ execute: (dispatch, resource) => {
+ // add code
+ }
+ },
+ {
+ icon: ReRunProcessIcon,
+ name: "Re-run process",
+ execute: (dispatch, resource) => {
+ // add code
+ }
+ },
+ {
+ icon: DetailsIcon,
+ name: "View details",
+ execute: (dispatch, resource) => {
+ // add code
+ }
+ },
+ {
+ icon: LogIcon,
+ name: "Log",
+ execute: (dispatch, resource) => {
+ // add code
+ }
+ },
+ {
+ icon: ProvenanceGraphIcon,
+ name: "Provenance graph",
+ execute: (dispatch, resource) => {
+ // add code
+ }
+ },
+ {
+ icon: AdvancedIcon,
+ name: "Advanced",
+ execute: (dispatch, resource) => {
+ // add code
+ }
+ },
+ {
+ icon: RemoveIcon,
+ name: "Remove",
+ execute: (dispatch, resource) => {
+ // add code
+ }
+ }
+]];
diff --git a/src/views-components/context-menu/context-menu.tsx b/src/views-components/context-menu/context-menu.tsx
index 8036bb5..5d94766 100644
--- a/src/views-components/context-menu/context-menu.tsx
+++ b/src/views-components/context-menu/context-menu.tsx
@@ -63,5 +63,6 @@ export enum ContextMenuKind {
COLLECTION_FILES = "CollectionFiles",
COLLECTION_FILES_ITEM = "CollectionFilesItem",
COLLECTION = 'Collection',
- COLLECTION_RESOURCE = 'CollectionResource'
+ COLLECTION_RESOURCE = 'CollectionResource',
+ PROCESS = "Process"
}
diff --git a/src/views-components/create-collection-dialog-with-selected/create-collection-dialog-with-selected.tsx b/src/views-components/create-collection-dialog-with-selected/create-collection-dialog-with-selected.tsx
deleted file mode 100644
index fb5f094..0000000
--- a/src/views-components/create-collection-dialog-with-selected/create-collection-dialog-with-selected.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-// Copyright (C) The Arvados Authors. All rights reserved.
-//
-// SPDX-License-Identifier: AGPL-3.0
-
-import { Dispatch } from "redux";
-import { reduxForm, reset, startSubmit, stopSubmit } from "redux-form";
-import { withDialog } from "~/store/dialog/with-dialog";
-import { dialogActions } from "~/store/dialog/dialog-actions";
-import { DialogCollectionCreateWithSelected } from "../dialog-create/dialog-collection-create-selected";
-import { resetPickerProjectTree } from "~/store/project-tree-picker/project-tree-picker-actions";
-
-export const DIALOG_COLLECTION_CREATE_WITH_SELECTED = 'dialogCollectionCreateWithSelected';
-
-export const createCollectionWithSelected = () =>
- (dispatch: Dispatch) => {
- dispatch(reset(DIALOG_COLLECTION_CREATE_WITH_SELECTED));
- dispatch<any>(resetPickerProjectTree());
- dispatch(dialogActions.OPEN_DIALOG({ id: DIALOG_COLLECTION_CREATE_WITH_SELECTED, data: {} }));
- };
-
-export const [DialogCollectionCreateWithSelectedFile] = [DialogCollectionCreateWithSelected]
- .map(withDialog(DIALOG_COLLECTION_CREATE_WITH_SELECTED))
- .map(reduxForm({
- form: DIALOG_COLLECTION_CREATE_WITH_SELECTED,
- onSubmit: (data, dispatch) => {
- dispatch(startSubmit(DIALOG_COLLECTION_CREATE_WITH_SELECTED));
- setTimeout(() => dispatch(stopSubmit(DIALOG_COLLECTION_CREATE_WITH_SELECTED, { name: 'Invalid name' })), 2000);
- }
- }));
diff --git a/src/views-components/dialog-create/dialog-collection-create-selected.tsx b/src/views-components/dialog-create/dialog-collection-create-selected.tsx
deleted file mode 100644
index ad684d7..0000000
--- a/src/views-components/dialog-create/dialog-collection-create-selected.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-// Copyright (C) The Arvados Authors. All rights reserved.
-//
-// SPDX-License-Identifier: AGPL-3.0
-
-import * as React from "react";
-import { InjectedFormProps, Field, WrappedFieldProps } from "redux-form";
-import { Dialog, DialogTitle, DialogContent, DialogActions, Button, CircularProgress } from "@material-ui/core";
-import { WithDialogProps } from "~/store/dialog/with-dialog";
-import { TextField } from "~/components/text-field/text-field";
-import { COLLECTION_NAME_VALIDATION, COLLECTION_DESCRIPTION_VALIDATION, COLLECTION_PROJECT_VALIDATION } from "~/validators/validators";
-import { ProjectTreePicker } from "../project-tree-picker/project-tree-picker";
-
-export const DialogCollectionCreateWithSelected = (props: WithDialogProps<string> & InjectedFormProps<{ name: string }>) =>
- <form>
- <Dialog open={props.open}
- disableBackdropClick={true}
- disableEscapeKeyDown={true}>
- <DialogTitle>Create a collection</DialogTitle>
- <DialogContent style={{ display: 'flex' }}>
- <div>
- <Field
- name='name'
- component={TextField}
- validate={COLLECTION_NAME_VALIDATION}
- label="Collection Name" />
- <Field
- name='description'
- component={TextField}
- validate={COLLECTION_DESCRIPTION_VALIDATION}
- label="Description - optional" />
- </div>
- <Field
- name="projectUuid"
- component={Picker}
- validate={COLLECTION_PROJECT_VALIDATION} />
- </DialogContent>
- <DialogActions>
- <Button
- variant='flat'
- color='primary'
- disabled={props.submitting}
- onClick={props.closeDialog}>
- Cancel
- </Button>
- <Button
- variant='contained'
- color='primary'
- type='submit'
- onClick={props.handleSubmit}
- disabled={props.pristine || props.invalid || props.submitting}>
- {props.submitting ? <CircularProgress size={20} /> : 'Create a collection'}
- </Button>
- </DialogActions>
- </Dialog>
- </form>;
-
-const Picker = (props: WrappedFieldProps) =>
- <div style={{ width: '400px', height: '144px', display: 'flex', flexDirection: 'column' }}>
- <ProjectTreePicker onChange={projectUuid => props.input.onChange(projectUuid)} />
- </div>;
diff --git a/src/views-components/rename-file-dialog/rename-file-dialog.tsx b/src/views-components/rename-file-dialog/rename-file-dialog.tsx
index 20116fc..862227b 100644
--- a/src/views-components/rename-file-dialog/rename-file-dialog.tsx
+++ b/src/views-components/rename-file-dialog/rename-file-dialog.tsx
@@ -4,7 +4,7 @@
import * as React from 'react';
import { compose } from 'redux';
-import { reduxForm, reset, startSubmit, stopSubmit, InjectedFormProps, Field } from 'redux-form';
+import { reduxForm, InjectedFormProps, Field } from 'redux-form';
import { withDialog, WithDialogProps } from '~/store/dialog/with-dialog';
import { FormDialog } from '~/components/form-dialog/form-dialog';
import { DialogContentText } from '@material-ui/core';
diff --git a/src/views/process-panel/process-panel.tsx b/src/views/process-panel/process-panel.tsx
index dff1437..1ae8747 100644
--- a/src/views/process-panel/process-panel.tsx
+++ b/src/views/process-panel/process-panel.tsx
@@ -5,7 +5,7 @@
import * as React from 'react';
import {
StyleRulesCallback, WithStyles, withStyles, Card,
- CardHeader, IconButton, CardContent, Grid
+ CardHeader, IconButton, CardContent, Grid, Chip
} from '@material-ui/core';
import { ArvadosTheme } from '~/common/custom-theme';
import { ProcessResource } from '~/models/process';
@@ -15,11 +15,12 @@ import { MoreOptionsIcon, ProcessIcon } from '~/components/icon/icon';
import { DetailsAttribute } from '~/components/details-attribute/details-attribute';
import { RootState } from '~/store/store';
-type CssRules = 'card' | 'iconHeader' | 'label' | 'value';
+type CssRules = 'card' | 'iconHeader' | 'label' | 'value' | 'content' | 'chip' | 'headerText';
const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
card: {
- marginBottom: theme.spacing.unit * 2
+ marginBottom: theme.spacing.unit * 2,
+ width: '60%'
},
iconHeader: {
fontSize: '1.875rem',
@@ -31,6 +32,30 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
value: {
textTransform: 'none',
fontSize: '0.875rem'
+ },
+ content: {
+ display: 'flex',
+ paddingBottom: '0px ',
+ paddingTop: '0px',
+ '&:last-child': {
+ paddingBottom: '0px ',
+ }
+ },
+ 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-end',
+ top: -theme.spacing.unit * 4.5,
+ right: theme.spacing.unit * 2,
}
});
@@ -66,22 +91,30 @@ export const ProcessPanel = withStyles(styles)(
</IconButton>
}
title="Pipeline template that generates a config file from a template"
- subheader="(no description)"
- />
- <CardContent>
+ />
+ <CardContent className={classes.content}>
<Grid container direction="column">
- <Grid item xs={6}>
+ <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='Collection UUID' value="uuid" />
+ 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.label} classValue={classes.value}
- label='Number of files' value='14' />
+ label='Container output' />
<DetailsAttribute classLabel={classes.label} classValue={classes.value}
- label='Content size' value='54 MB' />
+ label='Show inputs' />
<DetailsAttribute classLabel={classes.label} classValue={classes.value}
- label='Owner' value="ownerUuid" />
+ label='Show command' />
</Grid>
</Grid>
</CardContent>
+ <span className={classes.headerText}>This container request was created from the workflow FastQC MultiQC</span>
</Card>
</div>;
}
diff --git a/src/views/workbench/workbench.tsx b/src/views/workbench/workbench.tsx
index 4640323..856a626 100644
--- a/src/views/workbench/workbench.tsx
+++ b/src/views/workbench/workbench.tsx
@@ -50,7 +50,6 @@ 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 { DialogCollectionCreateWithSelectedFile } from '~/views-components/create-collection-dialog-with-selected/create-collection-dialog-with-selected';
import { UploadCollectionFilesDialog } from '~/views-components/upload-collection-files-dialog/upload-collection-files-dialog';
import { CollectionPartialCopyDialog } from '~/views-components/collection-partial-copy-dialog/collection-partial-copy-dialog';
import { MoveProjectDialog } from '~/views-components/dialog-forms/move-project-dialog';
@@ -251,7 +250,6 @@ export const Workbench = withStyles(styles)(
<CreateCollectionDialog />
<RenameFileDialog />
<CollectionPartialCopyDialog />
- <DialogCollectionCreateWithSelectedFile />
<FileRemoveDialog />
<CopyCollectionDialog />
<MultipleFilesRemoveDialog />
@@ -274,10 +272,10 @@ export const Workbench = withStyles(styles)(
}}
onContextMenu={(event, item) => {
this.openContextMenu(event, {
- uuid: item.uuid,
- name: item.name,
- description: item.description,
- kind: ContextMenuKind.COLLECTION
+ uuid: 'item.uuid',
+ name: 'item.name',
+ description: 'item.description',
+ kind: ContextMenuKind.PROCESS
});
}}
{...props} />
commit b4adbf55b9a1950d70e2e44c28efb13eb4d0f077
Merge: 605e792 bef6136
Author: Pawel Kowalczyk <pawel.kowalczyk at contractors.roche.com>
Date: Mon Aug 27 13:52:38 2018 +0200
Merge branch 'master' into 13858-process-view-information-card
refs #13858
Arvados-DCO-1.1-Signed-off-by: Pawel Kowalczyk <pawel.kowalczyk at contractors.roche.com>
commit 605e792e4854c7aad2f08e08fa7a8d9eba9d64a1
Author: Pawel Kowalczyk <pawel.kowalczyk at contractors.roche.com>
Date: Mon Aug 27 12:24:12 2018 +0200
init process-view-info-card
Feature #13858
Arvados-DCO-1.1-Signed-off-by: Pawel Kowalczyk <pawel.kowalczyk at contractors.roche.com>
diff --git a/src/views/process-panel/process-panel.tsx b/src/views/process-panel/process-panel.tsx
new file mode 100644
index 0000000..dff1437
--- /dev/null
+++ b/src/views/process-panel/process-panel.tsx
@@ -0,0 +1,95 @@
+// Copyright (C) The Arvados Authors. All rights reserved.
+//
+// SPDX-License-Identifier: AGPL-3.0
+
+import * as React from 'react';
+import {
+ StyleRulesCallback, WithStyles, withStyles, Card,
+ CardHeader, IconButton, CardContent, Grid
+} 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';
+
+type CssRules = 'card' | 'iconHeader' | 'label' | 'value';
+
+const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
+ card: {
+ marginBottom: theme.spacing.unit * 2
+ },
+ iconHeader: {
+ fontSize: '1.875rem',
+ color: theme.customs.colors.green700
+ },
+ label: {
+ fontSize: '0.875rem'
+ },
+ value: {
+ textTransform: 'none',
+ fontSize: '0.875rem'
+ }
+});
+
+interface ProcessPanelDataProps {
+ item: ProcessResource;
+}
+
+interface ProcessPanelActionProps {
+ onItemRouteChange: (processId: string) => void;
+ 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, onContextMenu, item } = this.props;
+
+ return <div>
+ <Card className={classes.card}>
+ <CardHeader
+ avatar={<ProcessIcon className={classes.iconHeader} />}
+ action={
+ <IconButton
+ aria-label="More options"
+ onClick={event => onContextMenu(event, item)}>
+ <MoreOptionsIcon />
+ </IconButton>
+ }
+ title="Pipeline template that generates a config file from a template"
+ subheader="(no description)"
+ />
+ <CardContent>
+ <Grid container direction="column">
+ <Grid item xs={6}>
+ <DetailsAttribute classLabel={classes.label} classValue={classes.value}
+ label='Collection UUID' value="uuid" />
+ <DetailsAttribute classLabel={classes.label} classValue={classes.value}
+ label='Number of files' value='14' />
+ <DetailsAttribute classLabel={classes.label} classValue={classes.value}
+ label='Content size' value='54 MB' />
+ <DetailsAttribute classLabel={classes.label} classValue={classes.value}
+ label='Owner' value="ownerUuid" />
+ </Grid>
+ </Grid>
+ </CardContent>
+ </Card>
+ </div>;
+ }
+ componentWillReceiveProps({ match, item, onItemRouteChange }: ProcessPanelProps) {
+ if (!item || match.params.id !== item.uuid) {
+ onItemRouteChange(match.params.id);
+ }
+ }
+ }
+ )
+);
\ No newline at end of file
diff --git a/src/views/workbench/workbench.tsx b/src/views/workbench/workbench.tsx
index c96de02..7b9701a 100644
--- a/src/views/workbench/workbench.tsx
+++ b/src/views/workbench/workbench.tsx
@@ -31,6 +31,7 @@ import { detailsPanelActions, loadDetails } from "~/store/details-panel/details-
import { contextMenuActions } from "~/store/context-menu/context-menu-actions";
import { ProjectResource } from '~/models/project';
import { ResourceKind } from '~/models/resource';
+import { ProcessPanel } from '~/views/process-panel/process-panel';
import { ContextMenu, ContextMenuKind } from "~/views-components/context-menu/context-menu";
import { FavoritePanel } from "../favorite-panel/favorite-panel";
import { CurrentTokenDialog } from '~/views-components/current-token-dialog/current-token-dialog';
@@ -238,6 +239,7 @@ export const Workbench = withStyles(styles)(
<Route path="/projects/:id" render={this.renderProjectPanel} />
<Route path="/favorites" render={this.renderFavoritePanel} />
<Route path="/collections/:id" render={this.renderCollectionPanel} />
+ <Route path="/process/:id" render={this.renderProcessPanel} />
</Switch>
</div>
{user && <DetailsPanel />}
@@ -265,6 +267,20 @@ export const Workbench = withStyles(styles)(
);
}
+ renderProcessPanel = (props: RouteComponentProps<{ id: string }>) => <ProcessPanel
+ onItemRouteChange={(processId) => {
+ return <span>a</span>;
+ }}
+ onContextMenu={(event, item) => {
+ this.openContextMenu(event, {
+ uuid: item.uuid,
+ name: item.name,
+ description: item.description,
+ kind: ContextMenuKind.COLLECTION
+ });
+ }}
+ {...props} />
+
renderCollectionPanel = (props: RouteComponentProps<{ id: string }>) => <CollectionPanel
onItemRouteChange={(collectionId) => {
this.props.dispatch<any>(loadCollection(collectionId));
-----------------------------------------------------------------------
hooks/post-receive
--
More information about the arvados-commits
mailing list