[arvados-workbench2] updated: 2.4.0-166-ge51302fb
git repository hosting
git at public.arvados.org
Mon Aug 29 18:33:36 UTC 2022
Summary of changes:
src/store/processes/processes-actions.ts | 21 ++++
src/views/process-panel/process-io-card.tsx | 135 +++++++++++++++++----
.../process-output-collection-files.ts} | 9 +-
src/views/process-panel/process-panel-root.tsx | 12 +-
4 files changed, 141 insertions(+), 36 deletions(-)
copy src/{views-components/collection-panel-files/collection-panel-files.ts => views/process-panel/process-output-collection-files.ts} (87%)
via e51302fb1afc150e015bb2a77a633cb2176dff7f (commit)
via 392a0a3992e48d0544523869b850b925d6d7f4c8 (commit)
from 1e6d5bc0ce92a7575030b299193b99cbad50e810 (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 e51302fb1afc150e015bb2a77a633cb2176dff7f
Author: Stephen Smith <stephen at curii.com>
Date: Mon Aug 29 14:33:18 2022 -0400
16073: Add process io panel output collection tab
Arvados-DCO-1.1-Signed-off-by: Stephen Smith <stephen at curii.com>
diff --git a/src/store/processes/processes-actions.ts b/src/store/processes/processes-actions.ts
index a3ab1b28..6203382c 100644
--- a/src/store/processes/processes-actions.ts
+++ b/src/store/processes/processes-actions.ts
@@ -115,7 +115,9 @@ export const getInputCollectionMounts = (data: any): InputCollectionMount[] => {
...data.mounts[key],
path: key,
}))
- .filter(mount => mount.kind === 'collection')
+ .filter(mount => mount.kind === 'collection' &&
+ mount.portable_data_hash &&
+ mount.path)
.map(mount => ({
path: mount.path,
pdh: mount.portable_data_hash,
diff --git a/src/views/process-panel/process-io-card.tsx b/src/views/process-panel/process-io-card.tsx
index caea890e..119bbb57 100644
--- a/src/views/process-panel/process-io-card.tsx
+++ b/src/views/process-panel/process-io-card.tsx
@@ -58,6 +58,7 @@ import { Link as MuiLink } from '@material-ui/core';
import { InputCollectionMount } from 'store/processes/processes-actions';
import { connect } from 'react-redux';
import { RootState } from 'store/store';
+import { ProcessOutputCollectionFiles } from './process-output-collection-files';
type CssRules = 'card' | 'content' | 'title' | 'header' | 'avatar' | 'iconHeader' | 'tableWrapper' | 'tableRoot' | 'paramValue' | 'keepLink' | 'imagePreview' | 'valArray' | 'emptyValue';
@@ -130,12 +131,13 @@ export interface ProcessIOCardDataProps {
params: ProcessIOParameter[];
raw?: any;
mounts?: InputCollectionMount[];
+ outputUuid?: string;
}
type ProcessIOCardProps = ProcessIOCardDataProps & WithStyles<CssRules> & MPVPanelProps;
export const ProcessIOCard = withStyles(styles)(
- ({ classes, label, params, raw, mounts, doHidePanel, panelName }: ProcessIOCardProps) => {
+ ({ classes, label, params, raw, mounts, outputUuid, doHidePanel, panelName }: ProcessIOCardProps) => {
const [tabState, setTabState] = useState(0);
const handleChange = (event: React.MouseEvent<HTMLElement>, value: number) => {
setTabState(value);
@@ -168,6 +170,7 @@ export const ProcessIOCard = withStyles(styles)(
<Tab label="Preview" />
<Tab label="Raw" />
{label === ProcessIOCardType.INPUT && <Tab label="Input Mounts" />}
+ {label === ProcessIOCardType.OUTPUT && <Tab label="Output Collection" />}
</Tabs>
{tabState === 0 && <div className={classes.tableWrapper}>
{params.length ?
@@ -185,6 +188,7 @@ export const ProcessIOCard = withStyles(styles)(
</div>}
{tabState === 2 && <div className={classes.tableWrapper}>
{label === ProcessIOCardType.INPUT && <ProcessInputMounts mounts={mounts || []} />}
+ {label === ProcessIOCardType.OUTPUT && <ProcessOutputCollectionFiles isWritable={false} currentItemUuid={outputUuid} />}
</div>}
</div>
</CardContent>
diff --git a/src/views/process-panel/process-output-collection-files.ts b/src/views/process-panel/process-output-collection-files.ts
new file mode 100644
index 00000000..d0b44cd1
--- /dev/null
+++ b/src/views/process-panel/process-output-collection-files.ts
@@ -0,0 +1,58 @@
+// Copyright (C) The Arvados Authors. All rights reserved.
+//
+// SPDX-License-Identifier: AGPL-3.0
+
+import { connect } from "react-redux";
+import {
+ CollectionPanelFiles as Component,
+ CollectionPanelFilesProps
+} from "components/collection-panel-files/collection-panel-files";
+import { Dispatch } from "redux";
+import { collectionPanelFilesAction } from "store/collection-panel/collection-panel-files/collection-panel-files-actions";
+import { ContextMenuKind } from "views-components/context-menu/context-menu";
+import { openContextMenu, openCollectionFilesContextMenu } from 'store/context-menu/context-menu-actions';
+import { openUploadCollectionFilesDialog } from 'store/collections/collection-upload-actions';
+import { ResourceKind } from "models/resource";
+import { openDetailsPanel } from 'store/details-panel/details-panel-action';
+
+const mapDispatchToProps = (dispatch: Dispatch): Pick<CollectionPanelFilesProps, 'onSearchChange' | 'onFileClick' | 'onUploadDataClick' | 'onCollapseToggle' | 'onSelectionToggle' | 'onItemMenuOpen' | 'onOptionsMenuOpen'> => ({
+ onUploadDataClick: (targetLocation?: string) => {
+ dispatch<any>(openUploadCollectionFilesDialog(targetLocation));
+ },
+ onCollapseToggle: (id) => {
+ dispatch(collectionPanelFilesAction.TOGGLE_COLLECTION_FILE_COLLAPSE({ id }));
+ },
+ onSelectionToggle: (event, item) => {
+ dispatch(collectionPanelFilesAction.TOGGLE_COLLECTION_FILE_SELECTION({ id: item.id }));
+ },
+ onItemMenuOpen: (event, item, isWritable) => {
+ const isDirectory = item.data.type === 'directory';
+ dispatch<any>(openContextMenu(
+ event,
+ {
+ menuKind: isWritable
+ ? isDirectory
+ ? ContextMenuKind.COLLECTION_DIRECTORY_ITEM
+ : ContextMenuKind.COLLECTION_FILE_ITEM
+ : isDirectory
+ ? ContextMenuKind.READONLY_COLLECTION_DIRECTORY_ITEM
+ : ContextMenuKind.READONLY_COLLECTION_FILE_ITEM,
+ kind: ResourceKind.COLLECTION,
+ name: item.data.name,
+ uuid: item.id,
+ ownerUuid: ''
+ }
+ ));
+ },
+ onSearchChange: (searchValue: string) => {
+ dispatch(collectionPanelFilesAction.ON_SEARCH_CHANGE(searchValue));
+ },
+ onOptionsMenuOpen: (event, isWritable) => {
+ dispatch<any>(openCollectionFilesContextMenu(event, isWritable));
+ },
+ onFileClick: (id) => {
+ dispatch<any>(openDetailsPanel(id));
+ },
+});
+
+export const ProcessOutputCollectionFiles = connect(null, mapDispatchToProps)(Component);
diff --git a/src/views/process-panel/process-panel-root.tsx b/src/views/process-panel/process-panel-root.tsx
index 4186f699..22643e85 100644
--- a/src/views/process-panel/process-panel-root.tsx
+++ b/src/views/process-panel/process-panel-root.tsx
@@ -139,6 +139,7 @@ export const ProcessPanelRoot = withStyles(styles)(
label={ProcessIOCardType.OUTPUT}
params={processedOutputs}
raw={outputDetails.rawOutputs}
+ outputUuid={outputUuid || ""}
/>
</MPVPanelContent>
<MPVPanelContent forwardProps xs maxHeight='50%' data-cy="process-children">
commit 392a0a3992e48d0544523869b850b925d6d7f4c8
Author: Stephen Smith <stephen at curii.com>
Date: Thu Aug 25 17:10:24 2022 -0400
16073: Add input collection mounts to process io panel and split pdh links into 2
Arvados-DCO-1.1-Signed-off-by: Stephen Smith <stephen at curii.com>
diff --git a/src/store/processes/processes-actions.ts b/src/store/processes/processes-actions.ts
index 3a4c6063..a3ab1b28 100644
--- a/src/store/processes/processes-actions.ts
+++ b/src/store/processes/processes-actions.ts
@@ -103,6 +103,25 @@ export const getInputs = (data: any): CommandInputParameter[] => {
) : [];
};
+export type InputCollectionMount = {
+ path: string;
+ pdh: string;
+}
+
+export const getInputCollectionMounts = (data: any): InputCollectionMount[] => {
+ if (!data || !data.mounts) { return []; }
+ return Object.keys(data.mounts)
+ .map(key => ({
+ ...data.mounts[key],
+ path: key,
+ }))
+ .filter(mount => mount.kind === 'collection')
+ .map(mount => ({
+ path: mount.path,
+ pdh: mount.portable_data_hash,
+ }));
+};
+
export const getOutputParameters = (data: any): CommandOutputParameter[] => {
if (!data || !data.mounts || !data.mounts[MOUNT_PATH_CWL_WORKFLOW]) { return []; }
const outputs = getWorkflowOutputs(data.mounts[MOUNT_PATH_CWL_WORKFLOW].content);
diff --git a/src/views/process-panel/process-io-card.tsx b/src/views/process-panel/process-io-card.tsx
index 0542dfa8..caea890e 100644
--- a/src/views/process-panel/process-io-card.tsx
+++ b/src/views/process-panel/process-io-card.tsx
@@ -21,7 +21,6 @@ import {
TableRow,
TableCell,
Paper,
- Link,
Grid,
Chip,
} from '@material-ui/core';
@@ -53,6 +52,12 @@ import { getInlineFileUrl } from 'views-components/context-menu/actions/helpers'
import { AuthState } from 'store/auth/auth-reducer';
import mime from 'mime';
import { DefaultView } from 'components/default-view/default-view';
+import { getNavUrl } from 'routes/routes';
+import { Link as RouterLink } from 'react-router-dom';
+import { Link as MuiLink } from '@material-ui/core';
+import { InputCollectionMount } from 'store/processes/processes-actions';
+import { connect } from 'react-redux';
+import { RootState } from 'store/store';
type CssRules = 'card' | 'content' | 'title' | 'header' | 'avatar' | 'iconHeader' | 'tableWrapper' | 'tableRoot' | 'paramValue' | 'keepLink' | 'imagePreview' | 'valArray' | 'emptyValue';
@@ -94,6 +99,9 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
alignItems: 'center',
},
keepLink: {
+ color: theme.palette.primary.main,
+ textDecoration: 'none',
+ overflowWrap: 'break-word',
cursor: 'pointer',
},
imagePreview: {
@@ -104,22 +112,30 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
display: 'flex',
gap: '10px',
flexWrap: 'wrap',
+ '& span': {
+ display: 'inline',
+ }
},
emptyValue: {
color: theme.customs.colors.grey500,
},
});
+export enum ProcessIOCardType {
+ INPUT = 'Inputs',
+ OUTPUT = 'Outputs',
+}
export interface ProcessIOCardDataProps {
- label: string;
+ label: ProcessIOCardType;
params: ProcessIOParameter[];
raw?: any;
+ mounts?: InputCollectionMount[];
}
type ProcessIOCardProps = ProcessIOCardDataProps & WithStyles<CssRules> & MPVPanelProps;
export const ProcessIOCard = withStyles(styles)(
- ({ classes, label, params, raw, doHidePanel, panelName }: ProcessIOCardProps) => {
+ ({ classes, label, params, raw, mounts, doHidePanel, panelName }: ProcessIOCardProps) => {
const [tabState, setTabState] = useState(0);
const handleChange = (event: React.MouseEvent<HTMLElement>, value: number) => {
setTabState(value);
@@ -147,21 +163,30 @@ export const ProcessIOCard = withStyles(styles)(
</div>
} />
<CardContent className={classes.content}>
- {params.length ?
<div>
<Tabs value={tabState} onChange={handleChange} variant="fullWidth">
<Tab label="Preview" />
<Tab label="Raw" />
+ {label === ProcessIOCardType.INPUT && <Tab label="Input Mounts" />}
</Tabs>
{tabState === 0 && <div className={classes.tableWrapper}>
- <ProcessIOPreview data={params} />
+ {params.length ?
+ <ProcessIOPreview data={params} /> :
+ <Grid container item alignItems='center' justify='center'>
+ <DefaultView messages={["No parameters found"]} icon={InfoIcon} />
+ </Grid>}
</div>}
{tabState === 1 && <div className={classes.tableWrapper}>
- <ProcessIORaw data={raw || params} />
+ {params.length ?
+ <ProcessIORaw data={raw || params} /> :
+ <Grid container item alignItems='center' justify='center'>
+ <DefaultView messages={["No parameters found"]} icon={InfoIcon} />
+ </Grid>}
+ </div>}
+ {tabState === 2 && <div className={classes.tableWrapper}>
+ {label === ProcessIOCardType.INPUT && <ProcessInputMounts mounts={mounts || []} />}
</div>}
- </div> : <Grid container item alignItems='center' justify='center'>
- <DefaultView messages={["No parameters found"]} icon={InfoIcon} />
- </Grid>}
+ </div>
</CardContent>
</Card>;
}
@@ -169,7 +194,6 @@ export const ProcessIOCard = withStyles(styles)(
export type ProcessIOValue = {
display: ReactElement<any, any>;
- nav?: string;
imageUrl?: string;
}
@@ -187,7 +211,7 @@ type ProcessIOPreviewProps = ProcessIOPreviewDataProps & WithStyles<CssRules>;
const ProcessIOPreview = withStyles(styles)(
({ classes, data }: ProcessIOPreviewProps) =>
- <Table className={classes.tableRoot} aria-label="simple table">
+ <Table className={classes.tableRoot} aria-label="Process IO Preview">
<TableHead>
<TableRow>
<TableCell>Label</TableCell>
@@ -205,12 +229,9 @@ const ProcessIOPreview = withStyles(styles)(
<TableCell>{param.value.map(val => (
<Typography className={classes.paramValue}>
{val.imageUrl ? <img className={classes.imagePreview} src={val.imageUrl} alt="Inline Preview" /> : ""}
- {val.nav ?
- <Link className={classes.keepLink} onClick={() => handleClick(val.nav)}>{val.display}</Link>
- : <span className={classes.valArray}>
- {val.display}
- </span>
- }
+ <span className={classes.valArray}>
+ {val.display}
+ </span>
</Typography>
))}</TableCell>
</TableRow>;
@@ -232,6 +253,35 @@ const ProcessIORaw = withStyles(styles)(
</Paper>
);
+interface ProcessInputMountsDataProps {
+ mounts: InputCollectionMount[];
+}
+
+type ProcessInputMountsProps = ProcessInputMountsDataProps & WithStyles<CssRules>;
+
+const ProcessInputMounts = withStyles(styles)(connect((state: RootState) => ({
+ auth: state.auth,
+}))(({ mounts, classes, auth }: ProcessInputMountsProps & { auth: AuthState }) => (
+ <Table className={classes.tableRoot} aria-label="Process Input Mounts">
+ <TableHead>
+ <TableRow>
+ <TableCell>Path</TableCell>
+ <TableCell>Portable Data Hash</TableCell>
+ </TableRow>
+ </TableHead>
+ <TableBody>
+ {mounts.map(mount => (
+ <TableRow key={mount.path}>
+ <TableCell><pre>{mount.path}</pre></TableCell>
+ <TableCell>
+ <RouterLink to={getNavUrl(mount.pdh, auth)} className={classes.keepLink}>{mount.pdh}</RouterLink>
+ </TableCell>
+ </TableRow>
+ ))}
+ </TableBody>
+ </Table>
+)));
+
type FileWithSecondaryFiles = {
secondaryFiles: File[];
}
@@ -358,7 +408,34 @@ const getKeepUrl = (file: File | Directory, pdh?: string): string => {
return keepUrl || '';
};
-const getNavUrl = (auth: AuthState, file: File | Directory, pdh?: string): string => {
+interface KeepUrlProps {
+ auth: AuthState;
+ res: File | Directory;
+ pdh?: string;
+}
+
+const KeepUrlBase = withStyles(styles)(({auth, res, pdh, classes}: KeepUrlProps & WithStyles<CssRules>) => {
+ const keepUrl = getKeepUrl(res, pdh);
+ const pdhUrl = keepUrl ? keepUrl.split('/').slice(0, 1)[0] : '';
+ // Passing a pdh always returns a relative wb2 collection url
+ const pdhWbPath = getNavUrl(pdhUrl.replace('keep:', ''), auth);
+ return pdhUrl && pdhWbPath ?
+ <RouterLink to={pdhWbPath} className={classes.keepLink}>{pdhUrl}</RouterLink> :
+ <></>;
+});
+
+const KeepUrlPath = withStyles(styles)(({auth, res, pdh, classes}: KeepUrlProps & WithStyles<CssRules>) => {
+ const keepUrl = getKeepUrl(res, pdh);
+ const keepUrlParts = keepUrl ? keepUrl.split('/') : [];
+ const keepUrlPath = keepUrlParts.length > 1 ? keepUrlParts.slice(1).join('/') : '';
+
+ const keepUrlPathNav = getKeepNavUrl(auth, res, pdh);
+ return keepUrlPath && keepUrlPathNav ?
+ <MuiLink className={classes.keepLink} onClick={() => handleClick(keepUrlPathNav)}>{keepUrlPath}</MuiLink> :
+ <></>;
+});
+
+const getKeepNavUrl = (auth: AuthState, file: File | Directory, pdh?: string): string => {
let keepUrl = getKeepUrl(file, pdh).replace('keep:', '');
return (getInlineFileUrl(`${auth.config.keepWebServiceUrl}/c=${keepUrl}?api_token=${auth.apiToken}`, auth.config.keepWebServiceUrl, auth.config.keepWebInlineServiceUrl));
};
@@ -385,16 +462,20 @@ const normalizeDirectoryLocation = (directory: Directory): Directory => {
const directoryToProcessIOValue = (directory: Directory, auth: AuthState, pdh?: string): ProcessIOValue => {
const normalizedDirectory = normalizeDirectoryLocation(directory);
return {
- display: <>{getKeepUrl(normalizedDirectory, pdh)}</>,
- nav: getNavUrl(auth, normalizedDirectory, pdh),
+ display: <span>
+ <KeepUrlBase auth={auth} res={normalizedDirectory} pdh={pdh}/>/<KeepUrlPath auth={auth} res={normalizedDirectory} pdh={pdh}/>
+ </span>,
};
};
-const fileToProcessIOValue = (file: File, auth: AuthState, pdh?: string): ProcessIOValue => ({
- display: <>{getKeepUrl(file, pdh)}</>,
- nav: getNavUrl(auth, file, pdh),
- imageUrl: isFileImage(file.basename) ? getImageUrl(auth, file, pdh) : undefined,
-});
+const fileToProcessIOValue = (file: File, auth: AuthState, pdh?: string): ProcessIOValue => {
+ return {
+ display: <span>
+ <KeepUrlBase auth={auth} res={file} pdh={pdh}/>/<KeepUrlPath auth={auth} res={file} pdh={pdh}/>
+ </span>,
+ imageUrl: isFileImage(file.basename) ? getImageUrl(auth, file, pdh) : undefined,
+ }
+};
const EmptyValue = withStyles(styles)(
({classes}: WithStyles<CssRules>) => <span className={classes.emptyValue}>No value</span>
diff --git a/src/views/process-panel/process-panel-root.tsx b/src/views/process-panel/process-panel-root.tsx
index 86c6bc41..4186f699 100644
--- a/src/views/process-panel/process-panel-root.tsx
+++ b/src/views/process-panel/process-panel-root.tsx
@@ -12,12 +12,12 @@ import { SubprocessFilterDataProps } from 'components/subprocess-filter/subproce
import { MPVContainer, MPVPanelContent, MPVPanelState } from 'components/multi-panel-view/multi-panel-view';
import { ArvadosTheme } from 'common/custom-theme';
import { ProcessDetailsCard } from './process-details-card';
-import { getIOParamDisplayValue, ProcessIOCard, ProcessIOParameter } from './process-io-card';
+import { getIOParamDisplayValue, ProcessIOCard, ProcessIOCardType, ProcessIOParameter } from './process-io-card';
import { getProcessPanelLogs, ProcessLogsPanel } from 'store/process-logs-panel/process-logs-panel';
import { ProcessLogsCard } from './process-log-card';
import { FilterOption } from 'views/process-panel/process-log-form';
-import { getInputs, getOutputParameters } from 'store/processes/processes-actions';
+import { getInputs, getInputCollectionMounts, getOutputParameters } from 'store/processes/processes-actions';
import { CommandInputParameter, getIOParamId } from 'models/workflow';
import { CommandOutputParameter } from 'cwlts/mappings/v1.0/CommandOutputParameter';
import { AuthState } from 'store/auth/auth-reducer';
@@ -76,6 +76,8 @@ export const ProcessPanelRoot = withStyles(styles)(
const outputUuid = process?.containerRequest.outputUuid;
const requestUuid = process?.containerRequest.uuid;
+ const inputMounts = getInputCollectionMounts(process?.containerRequest);
+
React.useEffect(() => {
if (outputUuid) {
fetchOutputs(outputUuid, setOutputs);
@@ -126,14 +128,15 @@ export const ProcessPanelRoot = withStyles(styles)(
</MPVPanelContent>
<MPVPanelContent forwardProps xs="auto" data-cy="process-inputs">
<ProcessIOCard
- label="Inputs"
+ label={ProcessIOCardType.INPUT}
params={processedInputs}
raw={rawInputs}
+ mounts={inputMounts}
/>
</MPVPanelContent>
<MPVPanelContent forwardProps xs="auto" data-cy="process-outputs">
<ProcessIOCard
- label="Outputs"
+ label={ProcessIOCardType.OUTPUT}
params={processedOutputs}
raw={outputDetails.rawOutputs}
/>
-----------------------------------------------------------------------
hooks/post-receive
--
More information about the arvados-commits
mailing list