services/workbench2/src/views/process-panel/process-log-code-snippet.tsx

   1 // Copyright (C) The Arvados Authors. All rights reserved.
   2 //
   3 // SPDX-License-Identifier: AGPL-3.0
   4
   5 import React, { useEffect, useRef, useState } from 'react';
   6 import {
   7     MuiThemeProvider,
   8     createMuiTheme,
   9     StyleRulesCallback,
  10     withStyles,
  11     WithStyles
  12 } from '@material-ui/core/styles';
  13 import grey from '@material-ui/core/colors/grey';
  14 import { ArvadosTheme } from 'common/custom-theme';
  15 import { Link, Typography } from '@material-ui/core';
  16 import { navigationNotAvailable } from 'store/navigation/navigation-action';
  17 import { Dispatch } from 'redux';
  18 import { connect, DispatchProp } from 'react-redux';
  19 import classNames from 'classnames';
  20 import { FederationConfig, getNavUrl } from 'routes/routes';
  21 import { RootState } from 'store/store';
  22
  23 type CssRules = 'root' | 'wordWrapOn' | 'wordWrapOff' | 'logText';
  24
  25 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
  26     root: {
  27         boxSizing: 'border-box',
  28         overflow: 'auto',
  29         backgroundColor: '#000',
  30         height: `calc(100% - ${theme.spacing.unit * 4}px)`, // so that horizontal scollbar is visible
  31         "& a": {
  32             color: theme.palette.primary.main,
  33         },
  34     },
  35     logText: {
  36         padding: `0 ${theme.spacing.unit * 0.5}px`,
  37     },
  38     wordWrapOn: {
  39         overflowWrap: 'anywhere',
  40     },
  41     wordWrapOff: {
  42         whiteSpace: 'nowrap',
  43     },
  44 });
  45
  46 const theme = createMuiTheme({
  47     overrides: {
  48         MuiTypography: {
  49             body2: {
  50                 color: grey["200"]
  51             }
  52         }
  53     },
  54     typography: {
  55         fontFamily: 'monospace',
  56         useNextVariants: true,
  57     }
  58 });
  59
  60 interface ProcessLogCodeSnippetProps {
  61     lines: string[];
  62     fontSize: number;
  63     wordWrap?: boolean;
  64 }
  65
  66 interface ProcessLogCodeSnippetAuthProps {
  67     auth: FederationConfig;
  68 }
  69
  70 const renderLinks = (fontSize: number, auth: FederationConfig, dispatch: Dispatch) => (text: string) => {
  71     // Matches UUIDs & PDHs
  72     const REGEX = /[a-z0-9]{5}-[a-z0-9]{5}-[a-z0-9]{15}|[0-9a-f]{32}\+\d+/g;
  73     const links = text.match(REGEX);
  74     if (!links) {
  75         return <Typography style={{ fontSize: fontSize }}>{text}</Typography>;
  76     }
  77     return <Typography style={{ fontSize: fontSize }}>
  78         {text.split(REGEX).map((part, index) =>
  79             <React.Fragment key={index}>
  80                 {part}
  81                 {links[index] &&
  82                     <Link onClick={() => {
  83                         const url = getNavUrl(links[index], auth)
  84                         if (url) {
  85                             window.open(`${window.location.origin}${url}`, '_blank', "noopener");
  86                         } else {
  87                             dispatch(navigationNotAvailable(links[index]));
  88                         }
  89                     }}
  90                         style={{ cursor: 'pointer' }}>
  91                         {links[index]}
  92                     </Link>}
  93             </React.Fragment>
  94         )}
  95     </Typography>;
  96 };
  97
  98 const mapStateToProps = (state: RootState): ProcessLogCodeSnippetAuthProps => ({
  99     auth: state.auth,
 100 });
 101
 102 export const ProcessLogCodeSnippet = withStyles(styles)(connect(mapStateToProps)(
 103     ({ classes, lines, fontSize, auth, dispatch, wordWrap }: ProcessLogCodeSnippetProps & WithStyles<CssRules> & ProcessLogCodeSnippetAuthProps & DispatchProp) => {
 104         const [followMode, setFollowMode] = useState<boolean>(true);
 105         const scrollRef = useRef<HTMLDivElement>(null);
 106
 107         useEffect(() => {
 108             if (followMode && scrollRef.current && lines.length > 0) {
 109                 // Scroll to bottom
 110                 scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
 111             }
 112         }, [followMode, lines, scrollRef]);
 113
 114         return <MuiThemeProvider theme={theme}>
 115             <div ref={scrollRef} className={classes.root}
 116                 onScroll={(e) => {
 117                     const elem = e.target as HTMLDivElement;
 118                     if (elem.scrollTop + (elem.clientHeight * 1.1) >= elem.scrollHeight) {
 119                         setFollowMode(true);
 120                     } else {
 121                         setFollowMode(false);
 122                     }
 123                 }}>
 124                 {lines.map((line: string, index: number) =>
 125                     <Typography key={index} component="span"
 126                         className={classNames(classes.logText, wordWrap ? classes.wordWrapOn : classes.wordWrapOff)}>
 127                         {renderLinks(fontSize, auth, dispatch)(line)}
 128                     </Typography>
 129                 )}
 130             </div>
 131         </MuiThemeProvider>
 132     }));