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 { navigateTo } from 'store/navigation/navigation-action';
  17 import { Dispatch } from 'redux';
  18 import { connect, DispatchProp } from 'react-redux';
  19 import classNames from 'classnames';
  20
  21 type CssRules = 'root' | 'wordWrap' | 'logText';
  22
  23 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
  24     root: {
  25         boxSizing: 'border-box',
  26         overflow: 'auto',
  27         backgroundColor: '#000',
  28         height: `calc(100% - ${theme.spacing.unit * 4}px)`, // so that horizontal scollbar is visible
  29     },
  30     logText: {
  31         padding: theme.spacing.unit * 0.5,
  32     },
  33     wordWrap: {
  34         whiteSpace: 'pre-wrap',
  35     },
  36 });
  37
  38 const theme = createMuiTheme({
  39     overrides: {
  40         MuiTypography: {
  41             body2: {
  42                 color: grey["200"]
  43             }
  44         }
  45     },
  46     typography: {
  47         fontFamily: 'monospace',
  48         useNextVariants: true,
  49     }
  50 });
  51
  52 interface ProcessLogCodeSnippetProps {
  53     lines: string[];
  54     fontSize: number;
  55     wordWrap?: boolean;
  56 }
  57
  58 const renderLinks = (fontSize: number, dispatch: Dispatch) => (text: string) => {
  59     // Matches UUIDs & PDHs
  60     const REGEX = /[a-z0-9]{5}-[a-z0-9]{5}-[a-z0-9]{15}|[0-9a-f]{32}\+\d+/g;
  61     const links = text.match(REGEX);
  62     if (!links) {
  63         return <Typography style={{ fontSize: fontSize }}>{text}</Typography>;
  64     }
  65     return <Typography style={{ fontSize: fontSize }}>
  66         {text.split(REGEX).map((part, index) =>
  67         <React.Fragment key={index}>
  68             {part}
  69             {links[index] &&
  70             <Link onClick={() => dispatch<any>(navigateTo(links[index]))}
  71                 style={ {cursor: 'pointer'} }>
  72                 {links[index]}
  73             </Link>}
  74         </React.Fragment>
  75         )}
  76     </Typography>;
  77 };
  78
  79 export const ProcessLogCodeSnippet = withStyles(styles)(connect()(
  80     ({classes, lines, fontSize, dispatch, wordWrap}: ProcessLogCodeSnippetProps & WithStyles<CssRules> & DispatchProp) => {
  81         const [followMode, setFollowMode] = useState<boolean>(false);
  82         const scrollRef = useRef<HTMLDivElement>(null);
  83
  84         useEffect(() => {
  85             if (followMode && scrollRef.current && lines.length > 0) {
  86                 // Scroll to bottom
  87                 scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
  88             }
  89         }, [followMode, lines, scrollRef]);
  90
  91         return <MuiThemeProvider theme={theme}>
  92             <div ref={scrollRef} className={classes.root}
  93                 onScroll={(e) => {
  94                     const elem = e.target as HTMLDivElement;
  95                     if (elem.scrollTop + elem.clientHeight >= elem.scrollHeight) {
  96                         setFollowMode(true);
  97                     } else {
  98                         setFollowMode(false);
  99                     }
 100                 }}>
 101                 { lines.map((line: string, index: number) =>
 102                 <Typography key={index} component="pre"
 103                     className={classNames(classes.logText, wordWrap ? classes.wordWrap : undefined)}>
 104                     {renderLinks(fontSize, dispatch)(line)}
 105                 </Typography>
 106                 ) }
 107             </div>
 108         </MuiThemeProvider>
 109     }));