add process log code snippet, change default snippet,

Feature #14098

Arvados-DCO-1.1-Signed-off-by: Janicki Artur <artur.janicki@contractors.roche.com>

diff --git a/src/components/code-snippet/code-snippet.tsx b/src/components/code-snippet/code-snippet.tsx
index bf9b6128859ac34d8a8425a916ae8d87e8875465..dda607cd898a54b5e7386de529b09a227545236c 100644 (file)
--- a/src/components/code-snippet/code-snippet.tsx
+++ b/src/components/code-snippet/code-snippet.tsx
@@ -12,7 +12,8 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
     root: {
         boxSizing: 'border-box',
         width: '100%',
-        height: '550px',
+        height: 'auto',
+        maxHeight: '550px',
         overflow: 'scroll',
         padding: theme.spacing.unit
     }

diff --git a/src/components/default-code-snippet/default-code-snippet.tsx b/src/components/default-code-snippet/default-code-snippet.tsx
index 474c38a174c55adf0a595f05ce1c0081b88fd72f..541f390616ef369d801a0067cddabcf89dbcb5ad 100644 (file)
--- a/src/components/default-code-snippet/default-code-snippet.tsx
+++ b/src/components/default-code-snippet/default-code-snippet.tsx
@@ -11,10 +11,10 @@ const theme = createMuiTheme({
     overrides: {
         MuiTypography: {
             body1: {
-                color: grey["200"]
+                color: grey["900"]
             },
             root: {
-                backgroundColor: '#000'
+                backgroundColor: grey["200"]
             }
         }
     },

diff --git a/src/views/process-log-panel/process-log-code-snippet.tsx b/src/views/process-log-panel/process-log-code-snippet.tsx
new file mode 100644 (file)
index 0000000..99388d6
--- /dev/null
+++ b/src/views/process-log-panel/process-log-code-snippet.tsx
@@ -0,0 +1,31 @@
+// Copyright (C) The Arvados Authors. All rights reserved.
+//
+// SPDX-License-Identifier: AGPL-3.0
+
+import * as React from 'react';
+import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';
+import { CodeSnippet, CodeSnippetDataProps } from '~/components/code-snippet/code-snippet';
+import grey from '@material-ui/core/colors/grey';
+
+const theme = createMuiTheme({
+    overrides: {
+        MuiTypography: {
+            body1: {
+                color: grey["200"]
+            },
+            root: {
+                backgroundColor: '#000'
+            }
+        }
+    },
+    typography: {
+        fontFamily: 'VT323'
+    }
+});
+
+type ProcessLogCodeSnippet = CodeSnippetDataProps;
+
+export const ProcessLogCodeSnippet = (props: ProcessLogCodeSnippet) => 
+    <MuiThemeProvider theme={theme}>
+        <CodeSnippet lines={props.lines} />
+    </MuiThemeProvider>;
\ No newline at end of file

diff --git a/src/views/process-log-panel/process-log-main-card.tsx b/src/views/process-log-panel/process-log-main-card.tsx
index db451ab96d019c2ca23b3cc5952f55c7340e5d0f..effdd7a787cc1fe1c9c70bd747acc9739b880815 100644 (file)
--- a/src/views/process-log-panel/process-log-main-card.tsx
+++ b/src/views/process-log-panel/process-log-main-card.tsx
@@ -8,22 +8,25 @@ import {
     CardHeader, IconButton, CardContent, Grid, Typography, Tooltip
 } from '@material-ui/core';
 import { Process } from '~/store/processes/process';
+import { ProcessLogCodeSnippet } from '~/views/process-log-panel/process-log-code-snippet';
 import { ProcessLogForm, ProcessLogFormDataProps, ProcessLogFormActionProps } from '~/views/process-log-panel/process-log-form';
 import { MoreOptionsIcon, ProcessIcon } from '~/components/icon/icon';
 import { ArvadosTheme } from '~/common/custom-theme';
+import { CodeSnippetDataProps } from '~/components/code-snippet/code-snippet';
 
-type CssRules = 'root' | 'card' | 'iconHeader';
+type CssRules = 'card' | 'iconHeader' | 'link';
 
 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
-    root: {
-
-    },
     card: {
         width: '100%'
     },
     iconHeader: {
         fontSize: '1.875rem',
         color: theme.customs.colors.green700
+    },
+    link: {
+        alignSelf: 'flex-end',
+        textAlign: 'right'
     }
 });
 
@@ -32,10 +35,10 @@ interface ProcessLogMainCardDataProps {
     process: Process;
 }
 
-export type ProcessLogMainCardProps = ProcessLogMainCardDataProps & ProcessLogFormDataProps & ProcessLogFormActionProps;
+export type ProcessLogMainCardProps = ProcessLogMainCardDataProps & CodeSnippetDataProps & ProcessLogFormDataProps & ProcessLogFormActionProps;
 
 export const ProcessLogMainCard = withStyles(styles)(
-    ({ classes, process, selectedFilter, filters, onChange }: ProcessLogMainCardProps & WithStyles<CssRules>) => 
+    ({ classes, process, selectedFilter, filters, onChange, lines }: ProcessLogMainCardProps & WithStyles<CssRules>) => 
         <Card className={classes.card}>
             <CardHeader
                 avatar={<ProcessIcon className={classes.iconHeader} />}
@@ -59,11 +62,13 @@ export const ProcessLogMainCard = withStyles(styles)(
                     <Grid item xs={6}>
                         <ProcessLogForm selectedFilter={selectedFilter} filters={filters} onChange={onChange} />
                     </Grid>
-                    <Grid item xs={6}>
-                        Container log for request ardev-xvhdp-q3uqbfxeb6w64pm
+                    <Grid item xs={6} className={classes.link}>
+                        <Typography component='div'>
+                            Container log for request ardev-xvhdp-q3uqbfxeb6w64pm
+                        </Typography>
                     </Grid>
                     <Grid item xs={12}>
-                        {/* add snippet */}
+                        <ProcessLogCodeSnippet lines={lines}/>
                     </Grid>
                 </Grid>
             </CardContent>

diff --git a/src/views/process-log-panel/process-log-panel-root.tsx b/src/views/process-log-panel/process-log-panel-root.tsx
index fe8a5b18ab535b99d13699754407d4e264b01459..0845a4109780d1f8995e5d47d80eca99eead0b43 100644 (file)
--- a/src/views/process-log-panel/process-log-panel-root.tsx
+++ b/src/views/process-log-panel/process-log-panel-root.tsx
@@ -9,10 +9,11 @@ import { ProcessLogMainCard } from '~/views/process-log-panel/process-log-main-c
 import { ProcessLogFormDataProps, ProcessLogFormActionProps } from '~/views/process-log-panel/process-log-form';
 import { DefaultView } from '~/components/default-view/default-view';
 import { ProcessIcon } from '~/components/icon/icon';
+import { CodeSnippetDataProps } from '~/components/code-snippet/code-snippet';
 
 export type ProcessLogPanelRootDataProps = {
     process?: Process;
-} & ProcessLogFormDataProps;
+} & ProcessLogFormDataProps & CodeSnippetDataProps;
 
 export type ProcessLogPanelRootActionProps = {
     onContextMenu: (event: React.MouseEvent<HTMLElement>) => void;

diff --git a/src/views/process-log-panel/process-log-panel.tsx b/src/views/process-log-panel/process-log-panel.tsx
index 1ce06afdf80a031814b8e62f9f46ee92c26b7215..0936d3bded186b6ad61002db346c5329731aed65 100644 (file)
--- a/src/views/process-log-panel/process-log-panel.tsx
+++ b/src/views/process-log-panel/process-log-panel.tsx
@@ -22,6 +22,8 @@ const SELECT_OPTIONS = [
     { label: 'Stderr', value: 'stderr' }
 ];
 
+const lines = ['Lorem Ipsum', 'Lorem Ipsum', 'Lorem Ipsum', 'Lorem Ipsum', 'Lorem Ipsum', 'Lorem Ipsum', 'Lorem Ipsum', 'Lorem Ipsum'];
+
 export interface Log {
     object_uuid: string;
     event_at: string;
@@ -42,8 +44,8 @@ const mapStateToProps = ({ router, resources }: RootState): ProcessLogPanelRootD
     return {
         process: getProcess(uuid)(resources),
         selectedFilter: SELECT_OPTIONS[0],
-        filters: SELECT_OPTIONS
-        // lines: string[]
+        filters: SELECT_OPTIONS,
+        lines
     };
 };