Arvados-DCO-1.1-Signed-off-by: Stephen Smith <stephen@curii.com>
} from '@material-ui/core';
import { ArvadosTheme } from 'common/custom-theme';
import { CloseIcon, ImageIcon, InputIcon, ImageOffIcon, OutputIcon, MaximizeIcon } from 'components/icon/icon';
} from '@material-ui/core';
import { ArvadosTheme } from 'common/custom-theme';
import { CloseIcon, ImageIcon, InputIcon, ImageOffIcon, OutputIcon, MaximizeIcon } from 'components/icon/icon';
export interface ProcessIOCardDataProps {
process: Process;
label: ProcessIOCardType;
export interface ProcessIOCardDataProps {
process: Process;
label: ProcessIOCardType;
- params: ProcessIOParameter[];
+ params?: ProcessIOParameter[];
raw?: any;
mounts?: InputCollectionMount[];
outputUuid?: string;
raw?: any;
mounts?: InputCollectionMount[];
outputUuid?: string;
<CardContent className={classes.content}>
{mainProcess ?
(<>
<CardContent className={classes.content}>
{mainProcess ?
(<>
+ {params === undefined && <Grid container item alignItems='center' justify='center'>
+ <CircularProgress />
+ </Grid>}
+ {params && params.length > 0 &&
<>
<Tabs value={mainProcTabState} onChange={handleMainProcTabChange} variant="fullWidth" className={classes.symmetricTabs}>
<Tab label="Parameters" />
<>
<Tabs value={mainProcTabState} onChange={handleMainProcTabChange} variant="fullWidth" className={classes.symmetricTabs}>
<Tab label="Parameters" />
{mainProcTabState === 1 && <div className={classes.tableWrapper}>
<ProcessIORaw data={raw || params} />
</div>}
{mainProcTabState === 1 && <div className={classes.tableWrapper}>
<ProcessIORaw data={raw || params} />
</div>}
- </> :
- <Grid container item alignItems='center' justify='center'>
- <DefaultView messages={["No parameters found"]} />
- </Grid>
- }
+ </>}
+ {params && params.length === 0 && <Grid container item alignItems='center' justify='center'>
+ <DefaultView messages={["No parameters found"]} />
+ </Grid>}
(<>
{((mounts && mounts.length) || outputUuid) ?
<>
(<>
{((mounts && mounts.length) || outputUuid) ?
<>
export const ProcessPanelRoot = withStyles(styles)(
({ process, auth, processLogsPanel, fetchOutputs, ...props }: ProcessPanelRootProps) => {
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 inputMounts = getInputCollectionMounts(process?.containerRequest);
const outputUuid = process?.containerRequest.outputUuid;
const requestUuid = process?.containerRequest.uuid;
const inputMounts = getInputCollectionMounts(process?.containerRequest);
+ // Resets state when changing processes
+ React.useEffect(() => {
+ setOutputs(undefined);
+ setInputs(undefined);
+ setProcessedOutputs(undefined);
+ setProcessedInputs(undefined);
+ }, [requestUuid]);
+
React.useEffect(() => {
if (outputUuid) {
fetchOutputs(outputUuid, setOutputs);
React.useEffect(() => {
if (outputUuid) {
fetchOutputs(outputUuid, setOutputs);
}, [outputUuid, fetchOutputs]);
React.useEffect(() => {
}, [outputUuid, fetchOutputs]);
React.useEffect(() => {
- if (outputDetails.rawOutputs && process) {
+ if (outputDetails !== undefined && outputDetails.rawOutputs && process) {
const outputDefinitions = getOutputParameters(process.containerRequest);
setProcessedOutputs(formatOutputData(outputDefinitions, outputDetails.rawOutputs, outputDetails.pdh, auth));
const outputDefinitions = getOutputParameters(process.containerRequest);
setProcessedOutputs(formatOutputData(outputDefinitions, outputDetails.rawOutputs, outputDetails.pdh, auth));
- } else {
- setProcessedOutputs([]);
}
}, [outputDetails, auth, process]);
}
}, [outputDetails, auth, process]);
label={ProcessIOCardType.OUTPUT}
process={process}
params={processedOutputs}
label={ProcessIOCardType.OUTPUT}
process={process}
params={processedOutputs}
- raw={outputDetails.rawOutputs}
+ raw={outputDetails?.rawOutputs}
outputUuid={outputUuid || ""}
/>
</MPVPanelContent>
outputUuid={outputUuid || ""}
/>
</MPVPanelContent>