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

[arvados-workbench2.git] / src / views / process-panel / process-log-code-snippet.tsx

diff --git a/src/views/process-panel/process-log-code-snippet.tsx b/src/views/process-panel/process-log-code-snippet.tsx
index 1ea839122125c6ba8b270a7448776e9519120b9e..4f19f9172623faf2b50dc55a7c3180fce5d1779d 100644 (file)
--- 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