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 = 'codeSnippet' | 'codeSnippetContainer';
  12
  13 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
  14     codeSnippet: {
  15     },
  16     codeSnippetContainer: {
  17         height: `calc(100% - ${theme.spacing.unit * 4}px)`, // so that horizontal scollbar is visible
  18     },
  19 });
  20
  21 const theme = createMuiTheme({
  22     overrides: {
  23         MuiTypography: {
  24             body2: {
  25                 color: grey["200"]
  26             },
  27             root: {
  28                 backgroundColor: '#000'
  29             }
  30         }
  31     },
  32     typography: {
  33         fontFamily: 'monospace',
  34         useNextVariants: true,
  35     }
  36 });
  37
  38 interface ProcessLogCodeSnippetProps {
  39     lines: string[];
  40 }
  41
  42 export const ProcessLogCodeSnippet = withStyles(styles)(
  43     (props: ProcessLogCodeSnippetProps & WithStyles<CssRules>) =>
  44         <MuiThemeProvider theme={theme}>
  45             <CodeSnippet lines={props.lines} className={props.classes.codeSnippet}
  46                 containerClassName={props.classes.codeSnippetContainer} />
  47         </MuiThemeProvider>);