1 // Copyright (C) The Arvados Authors. All rights reserved.
3 // SPDX-License-Identifier: AGPL-3.0
5 import React, { useEffect, useRef, useState } from 'react';
6 import { CustomStyleRulesCallback } from 'common/custom-theme';
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';
23 type CssRules = 'root' | 'wordWrapOn' | 'wordWrapOff' | 'logText';
25 const styles: CustomStyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
27 boxSizing: 'border-box',
29 backgroundColor: '#000',
30 height: `calc(100% - ${theme.spacing(4)}px)`, // so that horizontal scollbar is visible
32 color: theme.palette.primary.main,
36 padding: `0 ${theme.spacing(0.5)}px`,
39 overflowWrap: 'anywhere',
46 const theme = createMuiTheme({
55 fontFamily: 'monospace',
59 interface ProcessLogCodeSnippetProps {
65 interface ProcessLogCodeSnippetAuthProps {
66 auth: FederationConfig;
69 const renderLinks = (fontSize: number, auth: FederationConfig, dispatch: Dispatch) => (text: string) => {
70 // Matches UUIDs & PDHs
71 const REGEX = /[a-z0-9]{5}-[a-z0-9]{5}-[a-z0-9]{15}|[0-9a-f]{32}\+\d+/g;
72 const links = text.match(REGEX);
74 return <Typography style={{ fontSize: fontSize }}>{text}</Typography>;
76 return <Typography style={{ fontSize: fontSize }}>
77 {text.split(REGEX).map((part, index) =>
78 <React.Fragment key={index}>
81 <Link onClick={() => {
82 const url = getNavUrl(links[index], auth)
84 window.open(`${window.location.origin}${url}`, '_blank', "noopener");
86 dispatch(navigationNotAvailable(links[index]));
89 style={{ cursor: 'pointer' }}>
97 const mapStateToProps = (state: RootState): ProcessLogCodeSnippetAuthProps => ({
101 export const ProcessLogCodeSnippet = withStyles(styles)(connect(mapStateToProps)(
102 ({ classes, lines, fontSize, auth, dispatch, wordWrap }: ProcessLogCodeSnippetProps & WithStyles<CssRules> & ProcessLogCodeSnippetAuthProps & DispatchProp) => {
103 const [followMode, setFollowMode] = useState<boolean>(true);
104 const scrollRef = useRef<HTMLDivElement>(null);
107 if (followMode && scrollRef.current && lines.length > 0) {
109 scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
111 }, [followMode, lines, scrollRef]);
113 return <MuiThemeProvider theme={theme}>
114 <div ref={scrollRef} className={classes.root}
116 const elem = e.target as HTMLDivElement;
117 if (elem.scrollTop + (elem.clientHeight * 1.1) >= elem.scrollHeight) {
120 setFollowMode(false);
123 {lines.map((line: string, index: number) =>
124 <Typography key={index} component="span"
125 className={classNames(classes.logText, wordWrap ? classes.wordWrapOn : classes.wordWrapOff)}>
126 {renderLinks(fontSize, auth, dispatch)(line)}