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

[arvados.git] / src / views / process-panel / process-io-card.tsx

diff --git a/src/views/process-panel/process-io-card.tsx b/src/views/process-panel/process-io-card.tsx
index 2e01282ba0076934dc0d3cce71912b6cd9a88c64..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) ?
                             <>
@@ -587,7 +591,7 @@ const KeepUrlPath = withStyles(styles)(({auth, res, pdh, classes}: KeepUrlProps
 
     const keepUrlPathNav = getKeepNavUrl(auth, res, pdh);
     return keepUrlPath && keepUrlPathNav ?
-        <Tooltip title={"View in keep-web"}><MuiLink className={classes.keepLink} onClick={() => handleClick(keepUrlPathNav)}>{keepUrlPath}</MuiLink></Tooltip> :
+        <Tooltip title={"View in keep-web"}><a className={classes.keepLink} href={keepUrlPathNav} target="_blank">{keepUrlPath}</a></Tooltip> :
         // Show No value for root collection io that lacks path part
         <EmptyValue />;
 });