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';
onLogFilterChange: (filter: FilterOption) => void;
navigateToLog: (uuid: string) => void;
onCopyToClipboard: (uuid: string) => void;
- fetchOutputs: (uuid: string, fetchOutputs) => void;
+ fetchOutputs: (containerRequest: ContainerRequestResource, fetchOutputs) => void;
}
export type ProcessPanelRootProps = ProcessPanelRootDataProps & ProcessPanelRootActionProps & WithStyles<CssRules>;
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(() => {
- if (outputUuid) {
- fetchOutputs(outputUuid, setOutputs);
+ setOutputs(undefined);
+ setInputs(undefined);
+ setProcessedOutputs(undefined);
+ setProcessedInputs(undefined);
+ }, [requestUuid]);
+
+ // Fetch raw output (async for fetching from keep)
+ React.useEffect(() => {
+ if (containerRequest) {
+ fetchOutputs(containerRequest, setOutputs);
}
- }, [outputUuid, fetchOutputs]);
+ }, [containerRequest, fetchOutputs]);
+ // Format raw output into ProcessIOParameter[] when it changes
React.useEffect(() => {
- if (outputDetails.rawOutputs && process) {
- const outputDefinitions = getOutputParameters(process.containerRequest);
+ if (outputDetails !== undefined && outputDetails.rawOutputs && containerRequest) {
+ const outputDefinitions = getOutputParameters(containerRequest);
setProcessedOutputs(formatOutputData(outputDefinitions, outputDetails.rawOutputs, outputDetails.pdh, auth));
- } else {
- setProcessedOutputs([]);
}
- }, [outputDetails, auth, process]);
+ }, [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 = getRawInputs(process.containerRequest);
- setInputs(rawInputs);
-
- const inputs = getInputs(process.containerRequest);
- setProcessedInputs(formatInputData(inputs, auth));
+ if (containerRequest) {
+ // Since mounts can disappear and reappear, only set inputs if raw / processed inputs is undefined or new inputs has content
+ const newRawInputs = getRawInputs(containerRequest);
+ if (rawInputs === undefined || newRawInputs && newRawInputs.length) {
+ setInputs(newRawInputs);
+ }
+ const newInputs = getInputs(containerRequest);
+ if (processedInputs === undefined || newInputs && newInputs.length) {
+ setProcessedInputs(formatInputData(newInputs, 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">
label={ProcessIOCardType.OUTPUT}
process={process}
params={processedOutputs}
- raw={outputDetails.rawOutputs}
+ raw={outputDetails?.rawOutputs}
outputUuid={outputUuid || ""}
/>
</MPVPanelContent>