-export type ProcessPanelRootProps = ProcessPanelRootDataProps & ProcessPanelRootActionProps;
-
-export const ProcessPanelRoot = (props: ProcessPanelRootProps) =>
- props.process
- ? <Grid container spacing={16} alignItems="stretch">
- <Grid item sm={12} md={7}>
- <ProcessInformationCard
- process={props.process}
- onContextMenu={props.onContextMenu} />
- </Grid>
- <Grid item sm={12} md={5}>
- <SubprocessesCard
- subprocessesAmount={props.totalSubprocessesLength}
- filters={props.filters}
- onToggle={props.onToggle}
+export type ProcessPanelRootProps = ProcessPanelRootDataProps & ProcessPanelRootActionProps & WithStyles<CssRules>;
+
+type OutputDetails = {
+ rawOutputs?: any;
+ pdh?: string;
+}
+
+const panelsData: MPVPanelState[] = [
+ {name: "Details"},
+ {name: "Logs", visible: true},
+ {name: "Inputs"},
+ {name: "Outputs"},
+ {name: "Subprocesses"},
+];
+
+export const ProcessPanelRoot = withStyles(styles)(
+ ({ process, auth, processLogsPanel, fetchOutputs, ...props }: ProcessPanelRootProps) => {
+
+ const [outputDetails, setOutputs] = useState<OutputDetails>({});
+ const [rawInputs, setInputs] = useState<CommandInputParameter[]>([]);
+
+
+ const [processedOutputs, setProcessedOutputs] = useState<ProcessIOParameter[]>([]);
+ const [processedInputs, setProcessedInputs] = useState<ProcessIOParameter[]>([]);
+
+ const outputUuid = process?.containerRequest.outputUuid;
+ const requestUuid = process?.containerRequest.uuid;
+
+ React.useEffect(() => {
+ if (outputUuid) {
+ fetchOutputs(outputUuid, setOutputs);
+ }
+ }, [outputUuid, fetchOutputs]);
+
+ React.useEffect(() => {
+ if (outputDetails.rawOutputs) {
+ setProcessedOutputs(formatOutputData(outputDetails.rawOutputs, outputDetails.pdh, auth));
+ } else {
+ setProcessedOutputs([]);
+ }
+ }, [outputDetails, auth]);
+
+ React.useEffect(() => {
+ if (process) {
+ const rawInputs = getInputs(process.containerRequest);
+ setInputs(rawInputs);
+ setProcessedInputs(formatInputData(rawInputs, auth));
+ }
+ }, [requestUuid, auth, process]);
+
+ return process
+ ? <MPVContainer className={props.classes.root} spacing={8} panelStates={panelsData} justify-content="flex-start" direction="column" wrap="nowrap">
+ <MPVPanelContent forwardProps xs="auto" data-cy="process-details">
+ <ProcessDetailsCard
+ process={process}
+ onContextMenu={event => props.onContextMenu(event, process)}
+ cancelProcess={props.cancelProcess}