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 from 'react';
   6 import { MuiThemeProvider, createMuiTheme, StyleRulesCallback, withStyles, WithStyles } from '@material-ui/core/styles';
   7 import { CodeSnippet } from 'components/code-snippet/code-snippet';
   8 import grey from '@material-ui/core/colors/grey';
   9 import { ArvadosTheme } from 'common/custom-theme';
  10
  11 type CssRules = 'wordWrap' | 'codeSnippetContainer';
  12
  13 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
  14     wordWrap: {
  15         whiteSpace: 'pre-wrap',
  16     },
  17     codeSnippetContainer: {
  18         height: `calc(100% - ${theme.spacing.unit * 4}px)`, // so that horizontal scollbar is visible
  19     },
  20 });
  21
  22 const theme = createMuiTheme({
  23     overrides: {
  24         MuiTypography: {
  25             body2: {
  26                 color: grey["200"]
  27             },
  28             root: {
  29                 backgroundColor: '#000'
  30             }
  31         }
  32     },
  33     typography: {
  34         fontFamily: 'monospace',
  35         useNextVariants: true,
  36     }
  37 });
  38
  39 interface ProcessLogCodeSnippetProps {
  40     lines: string[];
  41     wordWrap?: boolean;
  42 }
  43
  44 export const ProcessLogCodeSnippet = withStyles(styles)(
  45     (props: ProcessLogCodeSnippetProps & WithStyles<CssRules>) =>
  46         <MuiThemeProvider theme={theme}>
  47             <CodeSnippet lines={props.lines}
  48                 className={props.wordWrap ? props.classes.wordWrap : undefined}
  49                 containerClassName={props.classes.codeSnippetContainer} />
  50         </MuiThemeProvider>);