From 08968efce07d609c16dd8a086bfd0a4d69ad6f3d Mon Sep 17 00:00:00 2001 From: Janicki Artur Date: Mon, 3 Sep 2018 08:18:48 +0200 Subject: [PATCH] add process log code snippet, change default snippet, Feature #14098 Arvados-DCO-1.1-Signed-off-by: Janicki Artur --- src/components/code-snippet/code-snippet.tsx | 3 +- .../default-code-snippet.tsx | 4 +-- .../process-log-code-snippet.tsx | 31 +++++++++++++++++++ .../process-log-main-card.tsx | 23 ++++++++------ .../process-log-panel-root.tsx | 3 +- .../process-log-panel/process-log-panel.tsx | 6 ++-- 6 files changed, 55 insertions(+), 15 deletions(-) create mode 100644 src/views/process-log-panel/process-log-code-snippet.tsx diff --git a/src/components/code-snippet/code-snippet.tsx b/src/components/code-snippet/code-snippet.tsx index bf9b6128..dda607cd 100644 --- a/src/components/code-snippet/code-snippet.tsx +++ b/src/components/code-snippet/code-snippet.tsx @@ -12,7 +12,8 @@ const styles: StyleRulesCallback = (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 474c38a1..541f3906 100644 --- 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 index 00000000..99388d66 --- /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) => + + + ; \ 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 db451ab9..effdd7a7 100644 --- 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 = (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) => + ({ classes, process, selectedFilter, filters, onChange, lines }: ProcessLogMainCardProps & WithStyles) => } @@ -59,11 +62,13 @@ export const ProcessLogMainCard = withStyles(styles)( - - Container log for request ardev-xvhdp-q3uqbfxeb6w64pm + + + Container log for request ardev-xvhdp-q3uqbfxeb6w64pm + - {/* add snippet */} + 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 fe8a5b18..0845a410 100644 --- 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) => void; diff --git a/src/views/process-log-panel/process-log-panel.tsx b/src/views/process-log-panel/process-log-panel.tsx index 1ce06afd..0936d3bd 100644 --- 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 }; }; -- 2.30.2