From: Lucas Di Pentima <lucas.dipentima@curii.com>
Date: Mon, 21 Mar 2022 19:37:33 +0000 (-0300)
Subject: 16672: Adds renderer for UUID & PDH links on the log viewer.
X-Git-Tag: 2.4.0~2^2~5
X-Git-Url: https://git.arvados.org/arvados-workbench2.git/commitdiff_plain/6ddc4f58120358fa12de736c49be69f8373b4068

16672: Adds renderer for UUID & PDH links on the log viewer.

Arvados-DCO-1.1-Signed-off-by: Lucas Di Pentima <lucas.dipentima@curii.com>
---

diff --git a/src/components/code-snippet/code-snippet.tsx b/src/components/code-snippet/code-snippet.tsx
index 6dc12401..fd44b5fc 100644
--- a/src/components/code-snippet/code-snippet.tsx
+++ b/src/components/code-snippet/code-snippet.tsx
@@ -26,17 +26,22 @@ export interface CodeSnippetDataProps {
     apiResponse?: boolean;
     containerClassName?: string;
     fontSize?: number;
+    customRenderer?: (line: string) => React.ReactNode;
 }
 
 type CodeSnippetProps = CodeSnippetDataProps & WithStyles<CssRules>;
 
 export const CodeSnippet = withStyles(styles)(
-    ({ classes, lines, className, containerClassName, apiResponse, fontSize }: CodeSnippetProps) =>
-        <Typography
-            component="div"
+    ({ classes, lines, className, containerClassName,
+        apiResponse, fontSize, customRenderer }: CodeSnippetProps) =>
+        <Typography component="div"
             className={classNames(classes.root, containerClassName, className)}>
-                { lines.map((line: string, index: number) => {
-                    return <Typography key={index} style={{ fontSize: fontSize }} className={apiResponse ? classes.space : className} component="pre">{line}</Typography>;
-                }) }
+            { lines.map((line: string, index: number) => {
+            return <Typography key={index} style={{ fontSize: fontSize }}
+                className={apiResponse ? classes.space : className}
+                component="pre">
+                {customRenderer ? customRenderer(line) : line}
+            </Typography>;
+            }) }
         </Typography>
     );
\ No newline at end of file
diff --git a/src/components/multi-panel-view/multi-panel-view.tsx b/src/components/multi-panel-view/multi-panel-view.tsx
index 48241c0b..de824990 100644
--- a/src/components/multi-panel-view/multi-panel-view.tsx
+++ b/src/components/multi-panel-view/multi-panel-view.tsx
@@ -88,12 +88,9 @@ export const MPVPanelContent = ({doHidePanel, doMaximizePanel, panelName,
         }
     }, [panelRef]);
 
-    // If maxHeight is set, only apply it when not maximized
-    const mh = maxHeight
-        ? panelMaximized
-            ? '100%'
-            : maxHeight
-        : undefined;
+    const mh = panelMaximized
+        ? '100%'
+        : maxHeight;
 
     return <Grid item style={{maxHeight: mh}} {...props}>
         <span ref={panelRef} /> {/* Element to scroll to when the panel is selected */}
diff --git a/src/views/process-panel/process-log-code-snippet.tsx b/src/views/process-panel/process-log-code-snippet.tsx
index 1ea83912..4f19f917 100644
--- a/src/views/process-panel/process-log-code-snippet.tsx
+++ b/src/views/process-panel/process-log-code-snippet.tsx
@@ -7,6 +7,10 @@ import { MuiThemeProvider, createMuiTheme, StyleRulesCallback, withStyles, WithS
 import { CodeSnippet } from 'components/code-snippet/code-snippet';
 import grey from '@material-ui/core/colors/grey';
 import { ArvadosTheme } from 'common/custom-theme';
+import { Link, Typography } from '@material-ui/core';
+import { navigateTo } from 'store/navigation/navigation-action';
+import { Dispatch } from 'redux';
+import { connect, DispatchProp } from 'react-redux';
 
 type CssRules = 'wordWrap' | 'codeSnippetContainer';
 
@@ -42,10 +46,32 @@ interface ProcessLogCodeSnippetProps {
     wordWrap?: boolean;
 }
 
-export const ProcessLogCodeSnippet = withStyles(styles)(
-    (props: ProcessLogCodeSnippetProps & WithStyles<CssRules>) =>
+const renderLinks = (fontSize: number, dispatch: Dispatch) => (text: string) => {
+    // Matches UUIDs & PDHs
+    const REGEX = /[a-z0-9]{5}-[a-z0-9]{5}-[a-z0-9]{15}|[0-9a-f]{32}\+\d+/g;
+    const links = text.match(REGEX);
+    if (!links) {
+        return <Typography style={{ fontSize: fontSize }}>{text}</Typography>;
+    }
+    return <Typography style={{ fontSize: fontSize }}>
+        {text.split(REGEX).map((part, index) =>
+        <React.Fragment key={index}>
+            {part}
+            {links[index] &&
+            <Link onClick={() => dispatch<any>(navigateTo(links[index]))}
+                style={ {cursor: 'pointer'} }>
+                {links[index]}
+            </Link>}
+        </React.Fragment>
+        )}
+    </Typography>;
+};
+
+export const ProcessLogCodeSnippet = withStyles(styles)(connect()(
+    (props: ProcessLogCodeSnippetProps & WithStyles<CssRules> & DispatchProp) =>
         <MuiThemeProvider theme={theme}>
             <CodeSnippet lines={props.lines} fontSize={props.fontSize}
+                customRenderer={renderLinks(props.fontSize, props.dispatch)}
                 className={props.wordWrap ? props.classes.wordWrap : undefined}
                 containerClassName={props.classes.codeSnippetContainer} />
-        </MuiThemeProvider>);
\ No newline at end of file
+        </MuiThemeProvider>));
\ No newline at end of file
diff --git a/src/views/process-panel/process-panel-root.tsx b/src/views/process-panel/process-panel-root.tsx
index 78c79f8f..862dbd68 100644
--- a/src/views/process-panel/process-panel-root.tsx
+++ b/src/views/process-panel/process-panel-root.tsx
@@ -85,7 +85,7 @@ export const ProcessPanelRoot = withStyles(styles)(
                     navigateToLog={props.navigateToLog}
                 />
             </MPVPanelContent>
-            <MPVPanelContent forwardProps xs>
+            <MPVPanelContent forwardProps xs maxHeight='50%'>
                 <SubprocessPanel />
             </MPVPanelContent>
         </MPVContainer>