16073: Add process io panel output collection tab

[arvados.git] / src / views / process-panel / process-panel-root.tsx

diff --git a/src/views/process-panel/process-panel-root.tsx b/src/views/process-panel/process-panel-root.tsx
index e130054bcde30561d64f27d44e017a9f49c8b5cf..22643e8588c279277295ecd537e29b0e31570ac4 100644 (file)
--- a/src/views/process-panel/process-panel-root.tsx
+++ b/src/views/process-panel/process-panel-root.tsx
@@ -12,13 +12,13 @@ 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 { getInputDisplayValue, 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 } from 'store/processes/processes-actions';
-import { CommandInputParameter, getInputId } from 'models/workflow';
+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);
@@ -83,10 +85,13 @@ export const ProcessPanelRoot = withStyles(styles)(
     }, [outputUuid, fetchOutputs]);
 
     React.useEffect(() => {
-        if (outputDetails.rawOutputs) {
-            setProcessedOutputs(formatOutputData(outputDetails.rawOutputs, outputDetails.pdh, auth));
+        if (outputDetails.rawOutputs && process) {
+            const outputDefinitions = getOutputParameters(process.containerRequest);
+            setProcessedOutputs(formatOutputData(outputDefinitions, outputDetails.rawOutputs, outputDetails.pdh, auth));
+        } else {
+            setProcessedOutputs([]);
         }
-    }, [outputDetails, auth]);
+    }, [outputDetails, auth, process]);
 
     React.useEffect(() => {
         if (process) {
@@ -123,16 +128,18 @@ 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}
+                    outputUuid={outputUuid || ""}
                  />
             </MPVPanelContent>
             <MPVPanelContent forwardProps xs maxHeight='50%' data-cy="process-children">
@@ -152,33 +159,22 @@ export const ProcessPanelRoot = withStyles(styles)(
 
 const formatInputData = (inputs: CommandInputParameter[], auth: AuthState): ProcessIOParameter[] => {
     return inputs.map(input => {
+        const doc = Array.isArray(input.doc) ? input.doc.join(', ') : input.doc;
         return {
-            id: getInputId(input),
-            doc: input.label || "",
-            value: getInputDisplayValue(auth, input)
+            id: getIOParamId(input),
+            doc: input.label || doc || "",
+            value: getIOParamDisplayValue(auth, input)
         };
     });
 };
 
-const formatOutputData = (rawData: any, pdh: string | undefined, auth: AuthState): ProcessIOParameter[] => {
-    if (!rawData) { return []; }
-    return Object.keys(rawData).map((id): ProcessIOParameter => {
-        const multiple = rawData[id].length > 0;
-        const outputArray = multiple ? rawData[id] : [rawData[id]];
+const formatOutputData = (definitions: CommandOutputParameter[], values: any, pdh: string | undefined, auth: AuthState): ProcessIOParameter[] => {
+    return definitions.map(output => {
+        const doc = Array.isArray(output.doc) ? output.doc.join(', ') : output.doc;
         return {
-            id,
-            doc: outputArray.map((outputParam: CommandOutputParameter) => (outputParam.doc))
-                        // Doc can be string or string[], concat conveniently works with both
-                        .reduce((acc: string[], input: string | string[]) => (acc.concat(input)), [])
-                        // Remove undefined and empty doc strings
-                        .filter(str => str)
-                        .join(", "),
-            value: outputArray.map(outputParam => getInputDisplayValue(auth, {
-                    type: outputParam.class,
-                    value: outputParam,
-                    ...outputParam
-                }, pdh, outputParam.secondaryFiles))
-                .reduce((acc: ProcessIOParameter[], params: ProcessIOParameter[]) => (acc.concat(params)), [])
+            id: getIOParamId(output),
+            doc: output.label || doc || "",
+            value: getIOParamDisplayValue(auth, Object.assign(output, { value: values[getIOParamId(output)] || [] }), pdh)
         };
     });
 };