From 4a2789c9974a1fa0f851a3bb2aa24bff5b029c48 Mon Sep 17 00:00:00 2001
From: Lucas Di Pentima <lucas.dipentima@curii.com>
Date: Thu, 17 Mar 2022 13:29:17 -0300
Subject: [PATCH] 16672: Process log card fully implemented in process panel.

Arvados-DCO-1.1-Signed-off-by: Lucas Di Pentima <lucas.dipentima@curii.com>
---
 .../process-log-panel/process-log-form.tsx    |  15 ++-
 src/views/process-panel/process-log-card.tsx  | 123 ++++++++++++++++++
 .../process-panel/process-panel-root.tsx      |  13 +-
 3 files changed, 138 insertions(+), 13 deletions(-)
 create mode 100644 src/views/process-panel/process-log-card.tsx

diff --git a/src/views/process-log-panel/process-log-form.tsx b/src/views/process-log-panel/process-log-form.tsx
index 946e575e..7f98c978 100644
--- a/src/views/process-log-panel/process-log-form.tsx
+++ b/src/views/process-log-panel/process-log-form.tsx
@@ -3,7 +3,15 @@
 // SPDX-License-Identifier: AGPL-3.0
 
 import React from 'react';
-import { withStyles, WithStyles, StyleRulesCallback, FormControl, InputLabel, Select, MenuItem, Input } from '@material-ui/core';
+import {
+    withStyles,
+    WithStyles,
+    StyleRulesCallback,
+    FormControl,
+    Select,
+    MenuItem,
+    Input
+} from '@material-ui/core';
 import { ArvadosTheme } from 'common/custom-theme';
 import { FilterOption } from './process-log-panel';
 
@@ -11,7 +19,7 @@ type CssRules = 'formControl';
 
 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
     formControl: {
-        minWidth: 200
+        minWidth: theme.spacing.unit * 15,
     }
 });
 
@@ -30,9 +38,6 @@ export const ProcessLogForm = withStyles(styles)(
     ({ classes, selectedFilter, onChange, filters }: ProcessLogFormProps) =>
         <form autoComplete="off">
             <FormControl className={classes.formControl}>
-                <InputLabel shrink htmlFor="log-label-placeholder">
-                    Event Type
-                </InputLabel>
                 <Select
                     value={selectedFilter.value}
                     onChange={({ target }) => onChange({ label: target.innerText, value: target.value })}
diff --git a/src/views/process-panel/process-log-card.tsx b/src/views/process-panel/process-log-card.tsx
new file mode 100644
index 00000000..85195d40
--- /dev/null
+++ b/src/views/process-panel/process-log-card.tsx
@@ -0,0 +1,123 @@
+// Copyright (C) The Arvados Authors. All rights reserved.
+//
+// SPDX-License-Identifier: AGPL-3.0
+
+import React from 'react';
+import {
+    StyleRulesCallback,
+    WithStyles,
+    withStyles,
+    Card,
+    CardHeader,
+    IconButton,
+    CardContent,
+    Tooltip,
+    Grid,
+    Typography,
+} from '@material-ui/core';
+import { ArvadosTheme } from 'common/custom-theme';
+import {
+    CloseIcon,
+    CollectionIcon,
+    LogIcon,
+    MaximizeIcon
+} from 'components/icon/icon';
+import { Process } from 'store/processes/process';
+import { MPVPanelProps } from 'components/multi-panel-view/multi-panel-view';
+import { FilterOption } from 'views/process-log-panel/process-log-panel';
+import { ProcessLogForm } from 'views/process-log-panel/process-log-form';
+import { ProcessLogCodeSnippet } from 'views/process-log-panel/process-log-code-snippet';
+import { DefaultView } from 'components/default-view/default-view';
+import { CodeSnippetDataProps } from 'components/code-snippet/code-snippet';
+
+type CssRules = 'card' | 'content' | 'title' | 'iconHeader';
+
+const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
+    card: {
+        height: '100%'
+    },
+    content: {
+        '&:last-child': {
+            paddingBottom: theme.spacing.unit * 2,
+        }
+    },
+    title: {
+        overflow: 'hidden',
+        paddingTop: theme.spacing.unit * 0.5
+    },
+    iconHeader: {
+        fontSize: '1.875rem',
+        color: theme.customs.colors.green700
+    },
+});
+
+export interface ProcessLogsCardDataProps {
+    process: Process;
+    selectedFilter: FilterOption;
+    filters: FilterOption[];
+}
+
+export interface ProcessLogsCardActionProps {
+    onLogFilterChange: (filter: FilterOption) => void;
+    navigateToLog: (uuid: string) => void;
+}
+
+type ProcessLogsCardProps = ProcessLogsCardDataProps
+    & ProcessLogsCardActionProps
+    & CodeSnippetDataProps
+    & WithStyles<CssRules>
+    & MPVPanelProps;
+
+export const ProcessLogsCard = withStyles(styles)(
+    ({ classes, process, filters, selectedFilter, lines, onLogFilterChange, navigateToLog,
+        doHidePanel, doMaximizePanel, panelMaximized, panelName }: ProcessLogsCardProps) =>
+        <Grid item xs={12}>
+            <Card className={classes.card}>
+                <CardHeader
+                    avatar={<LogIcon className={classes.iconHeader} />}
+                    action={<Grid container direction='row' alignItems='center'>
+                        <Grid item>
+                            <ProcessLogForm selectedFilter={selectedFilter}
+                                filters={filters} onChange={onLogFilterChange} />
+                        </Grid>
+                        <Grid item>
+                            <Tooltip title="Go to Log collection" disableFocusListener>
+                                <IconButton onClick={() => navigateToLog(process.containerRequest.logUuid!)}>
+                                    <CollectionIcon />
+                                </IconButton>
+                            </Tooltip>
+                        </Grid>
+                        { doMaximizePanel && !panelMaximized &&
+                        <Tooltip title={`Maximize ${panelName || 'panel'}`} disableFocusListener>
+                            <IconButton onClick={doMaximizePanel}><MaximizeIcon /></IconButton>
+                        </Tooltip> }
+                        { doHidePanel && <Grid item>
+                            <Tooltip title={`Close ${panelName || 'panel'}`} disableFocusListener>
+                                <IconButton onClick={doHidePanel}><CloseIcon /></IconButton>
+                            </Tooltip>
+                        </Grid> }
+                    </Grid>}
+                    title={
+                        <Typography noWrap variant='h6' className={classes.title}>
+                            Logs
+                        </Typography>}
+                />
+                <CardContent className={classes.content}>
+                    {lines.length > 0
+                        ? < Grid
+                            container
+                            spacing={24}
+                            direction='column'>
+                            <Grid item xs>
+                                <ProcessLogCodeSnippet lines={lines} />
+                            </Grid>
+                        </Grid>
+                        : <DefaultView
+                            icon={LogIcon}
+                            messages={['No logs yet']} />
+                    }
+                </CardContent>
+            </Card>
+        </Grid >
+);
+
diff --git a/src/views/process-panel/process-panel-root.tsx b/src/views/process-panel/process-panel-root.tsx
index 5a0b6b64..2bd115f1 100644
--- a/src/views/process-panel/process-panel-root.tsx
+++ b/src/views/process-panel/process-panel-root.tsx
@@ -14,8 +14,8 @@ import { MPVContainer, MPVPanelContent, MPVPanelState } from 'components/multi-p
 import { ArvadosTheme } from 'common/custom-theme';
 import { ProcessDetailsCard } from './process-details-card';
 import { FilterOption } from 'views/process-log-panel/process-log-panel';
-import { ProcessLogMainCard } from 'views/process-log-panel/process-log-main-card';
 import { getProcessPanelLogs, ProcessLogsPanel } from 'store/process-logs-panel/process-logs-panel';
+import { ProcessLogsCard } from './process-log-card';
 
 type CssRules = 'root';
 
@@ -69,8 +69,8 @@ export const ProcessPanelRoot = withStyles(styles)(
             <MPVPanelContent forwardProps xs="auto">
                 <ProcessDetailsCard process={process} />
             </MPVPanelContent>
-            <MPVPanelContent xs="auto">
-                <ProcessLogMainCard
+            <MPVPanelContent forwardProps xs>
+                <ProcessLogsCard
                     process={process}
                     lines={getProcessPanelLogs(processLogsPanel)}
                     selectedFilter={{
@@ -80,11 +80,8 @@ export const ProcessPanelRoot = withStyles(styles)(
                     filters={processLogsPanel.filters.map(
                         filter => ({ label: filter, value: filter })
                     )}
-                    onChange={props.onLogFilterChange}
-                    onContextMenu={function (event: any, process: Process): void {
-                        throw new Error('Function not implemented.');
-                    } }
-                    navigateToLogCollection={props.navigateToLog}
+                    onLogFilterChange={props.onLogFilterChange}
+                    navigateToLog={props.navigateToLog}
                 />
             </MPVPanelContent>
             <MPVPanelContent forwardProps xs>
-- 
2.30.2