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, getRawInputs } 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';
+import { ProcessCmdCard } from './process-cmd-card';
+import { ContainerRequestResource } from 'models/container-request';
type CssRules = 'root';
cancelProcess: (uuid: string) => void;
onLogFilterChange: (filter: FilterOption) => void;
navigateToLog: (uuid: string) => void;
- onLogCopyToClipboard: (uuid: string) => void;
- fetchOutputs: (uuid: string, fetchOutputs) => void;
+ onCopyToClipboard: (uuid: string) => void;
+ fetchOutputs: (containerRequest: ContainerRequestResource, fetchOutputs) => void;
}
export type ProcessPanelRootProps = ProcessPanelRootDataProps & ProcessPanelRootActionProps & WithStyles<CssRules>;
const panelsData: MPVPanelState[] = [
{name: "Details"},
+ {name: "Command"},
{name: "Logs", visible: true},
{name: "Inputs"},
{name: "Outputs"},
export const ProcessPanelRoot = withStyles(styles)(
({ process, auth, processLogsPanel, fetchOutputs, ...props }: ProcessPanelRootProps) => {
- const [outputDetails, setOutputs] = useState<OutputDetails>({});
- const [rawInputs, setInputs] = useState<CommandInputParameter[]>([]);
+ const [outputDetails, setOutputs] = useState<OutputDetails | undefined>(undefined);
+ const [rawInputs, setInputs] = useState<CommandInputParameter[] | undefined>(undefined);
-
- const [processedOutputs, setProcessedOutputs] = useState<ProcessIOParameter[]>([]);
- const [processedInputs, setProcessedInputs] = useState<ProcessIOParameter[]>([]);
+ const [processedOutputs, setProcessedOutputs] = useState<ProcessIOParameter[] | undefined>(undefined);
+ const [processedInputs, setProcessedInputs] = useState<ProcessIOParameter[] | undefined>(undefined);
const outputUuid = process?.containerRequest.outputUuid;
const requestUuid = process?.containerRequest.uuid;
+ const containerRequest = process?.containerRequest;
+
+ const inputMounts = getInputCollectionMounts(process?.containerRequest);
+
+ // Resets state when changing processes
+ React.useEffect(() => {
+ setOutputs(undefined);
+ setInputs(undefined);
+ setProcessedOutputs(undefined);
+ setProcessedInputs(undefined);
+ }, [requestUuid]);
+
+ // Fetch raw output (async for fetching from keep)
React.useEffect(() => {
- if (outputUuid) {
- fetchOutputs(outputUuid, setOutputs);
+ if (containerRequest) {
+ fetchOutputs(containerRequest, setOutputs);
}
- }, [outputUuid, fetchOutputs]);
+ }, [containerRequest, fetchOutputs]);
+ // Format raw output into ProcessIOParameter[] when it changes
React.useEffect(() => {
- if (outputDetails.rawOutputs) {
- setProcessedOutputs(formatOutputData(outputDetails.rawOutputs, outputDetails.pdh, auth));
- } else {
- setProcessedOutputs([]);
+ if (outputDetails !== undefined && outputDetails.rawOutputs && containerRequest) {
+ const outputDefinitions = getOutputParameters(containerRequest);
+ setProcessedOutputs(formatOutputData(outputDefinitions, outputDetails.rawOutputs, outputDetails.pdh, auth));
}
- }, [outputDetails, auth]);
+ }, [outputDetails, auth, containerRequest]);
+ // Fetch raw inputs and format into ProcessIOParameter[]
+ // Can be sync because inputs are either already in containerRequest mounts or props
React.useEffect(() => {
- if (process) {
- const rawInputs = getInputs(process.containerRequest);
+ if (containerRequest) {
+ const rawInputs = getRawInputs(containerRequest);
setInputs(rawInputs);
- setProcessedInputs(formatInputData(rawInputs, auth));
+
+ const inputs = getInputs(containerRequest);
+ setProcessedInputs(formatInputData(inputs, auth));
}
- }, [requestUuid, auth, process]);
+ }, [requestUuid, auth, containerRequest]);
return process
? <MPVContainer className={props.classes.root} spacing={8} panelStates={panelsData} justify-content="flex-start" direction="column" wrap="nowrap">
cancelProcess={props.cancelProcess}
/>
</MPVPanelContent>
+ <MPVPanelContent forwardProps xs="auto" data-cy="process-cmd">
+ <ProcessCmdCard
+ onCopy={props.onCopyToClipboard}
+ process={process} />
+ </MPVPanelContent>
<MPVPanelContent forwardProps xs maxHeight='50%' data-cy="process-logs">
<ProcessLogsCard
- onCopy={props.onLogCopyToClipboard}
+ onCopy={props.onCopyToClipboard}
process={process}
lines={getProcessPanelLogs(processLogsPanel)}
selectedFilter={{
navigateToLog={props.navigateToLog}
/>
</MPVPanelContent>
- <MPVPanelContent forwardProps xs="auto" data-cy="process-inputs">
+ <MPVPanelContent forwardProps xs maxHeight='50%' data-cy="process-inputs">
<ProcessIOCard
- label="Inputs"
+ label={ProcessIOCardType.INPUT}
+ process={process}
params={processedInputs}
raw={rawInputs}
+ mounts={inputMounts}
/>
</MPVPanelContent>
- <MPVPanelContent forwardProps xs="auto" data-cy="process-outputs">
+ <MPVPanelContent forwardProps xs maxHeight='50%' data-cy="process-outputs">
<ProcessIOCard
- label="Outputs"
+ label={ProcessIOCardType.OUTPUT}
+ process={process}
params={processedOutputs}
- raw={outputDetails.rawOutputs}
+ raw={outputDetails?.rawOutputs}
+ outputUuid={outputUuid || ""}
/>
</MPVPanelContent>
<MPVPanelContent forwardProps xs maxHeight='50%' data-cy="process-children">
const formatInputData = (inputs: CommandInputParameter[], auth: AuthState): ProcessIOParameter[] => {
return inputs.map(input => {
return {
- id: getInputId(input),
- doc: input.label || "",
- value: getInputDisplayValue(auth, input)
+ id: getIOParamId(input),
+ label: input.label || "",
+ 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 => {
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),
+ label: output.label || "",
+ value: getIOParamDisplayValue(auth, Object.assign(output, { value: values[getIOParamId(output)] || [] }), pdh)
};
});
};
projects / arvados-workbench2.git / blobdiff