16073: Show loading indicator when process io params are not loaded

Arvados-DCO-1.1-Signed-off-by: Stephen Smith <stephen@curii.com>

diff --git a/src/views/process-panel/process-io-card.tsx b/src/views/process-panel/process-io-card.tsx
index d60d71c4122649bc66e5fb4fe9769680639c7c2f..7284159ebf7193310e41c9836c140b4c37af0fb5 100644 (file)
--- a/src/views/process-panel/process-io-card.tsx
+++ b/src/views/process-panel/process-io-card.tsx
@@ -24,6 +24,7 @@ import {
     Paper,
     Grid,
     Chip,
+    CircularProgress,
 } from '@material-ui/core';
 import { ArvadosTheme } from 'common/custom-theme';
 import { CloseIcon, ImageIcon, InputIcon, ImageOffIcon, OutputIcon, MaximizeIcon } from 'components/icon/icon';
@@ -192,7 +193,7 @@ export enum ProcessIOCardType {
 export interface ProcessIOCardDataProps {
     process: Process;
     label: ProcessIOCardType;
-    params: ProcessIOParameter[];
+    params?: ProcessIOParameter[];
     raw?: any;
     mounts?: InputCollectionMount[];
     outputUuid?: string;
@@ -251,7 +252,10 @@ export const ProcessIOCard = withStyles(styles)(connect(null, mapDispatchToProps
             <CardContent className={classes.content}>
                 {mainProcess ?
                     (<>
-                        {params.length ?
+                        {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" />
@@ -263,12 +267,12 @@ export const ProcessIOCard = withStyles(styles)(connect(null, mapDispatchToProps
                                 {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>}
                     </>) :
+                    // Subprocess
                     (<>
                         {((mounts && mounts.length) || outputUuid) ?
                             <>

diff --git a/src/views/process-panel/process-panel-root.tsx b/src/views/process-panel/process-panel-root.tsx
index 9fc043d9e0a4aa4db20294fe821c3995da75c0cb..a08d8aecec0e925ae860f3ba03fe43adcf1ef46f 100644 (file)
--- a/src/views/process-panel/process-panel-root.tsx
+++ b/src/views/process-panel/process-panel-root.tsx
@@ -68,18 +68,25 @@ const panelsData: MPVPanelState[] = [
 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);
 
+    // Resets state when changing processes
+    React.useEffect(() => {
+        setOutputs(undefined);
+        setInputs(undefined);
+        setProcessedOutputs(undefined);
+        setProcessedInputs(undefined);
+    }, [requestUuid]);
+
     React.useEffect(() => {
         if (outputUuid) {
             fetchOutputs(outputUuid, setOutputs);
@@ -87,11 +94,9 @@ export const ProcessPanelRoot = withStyles(styles)(
     }, [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));
-        } else {
-            setProcessedOutputs([]);
         }
     }, [outputDetails, auth, process]);
 
@@ -149,7 +154,7 @@ export const ProcessPanelRoot = withStyles(styles)(
                     label={ProcessIOCardType.OUTPUT}
                     process={process}
                     params={processedOutputs}
-                    raw={outputDetails.rawOutputs}
+                    raw={outputDetails?.rawOutputs}
                     outputUuid={outputUuid || ""}
                  />
             </MPVPanelContent>