16672: Initial Log viewer placement on process panel. WIP

Arvados-DCO-1.1-Signed-off-by: Lucas Di Pentima <lucas.dipentima@curii.com>

diff --git a/src/store/process-panel/process-panel-actions.ts b/src/store/process-panel/process-panel-actions.ts
index de114a3ec7467bdc195b8c8ed6c737e6b7f30442..2e5fb6b9cf877ac787c99a3f15c14eebd323a4c3 100644 (file)
--- a/src/store/process-panel/process-panel-actions.ts
+++ b/src/store/process-panel/process-panel-actions.ts
@@ -13,6 +13,7 @@ import { snackbarActions } from 'store/snackbar/snackbar-actions';
 import { SnackbarKind } from '../snackbar/snackbar-actions';
 import { showWorkflowDetails } from 'store/workflow-panel/workflow-panel-actions';
 import { loadSubprocessPanel } from "../subprocess-panel/subprocess-panel-actions";
+import { initProcessLogsPanel } from "store/process-logs-panel/process-logs-panel-actions";
 
 export const processPanelActions = unionize({
     SET_PROCESS_PANEL_CONTAINER_REQUEST_UUID: ofType<string>(),
@@ -29,6 +30,7 @@ export const loadProcessPanel = (uuid: string) =>
         dispatch<ProcessPanelAction>(processPanelActions.SET_PROCESS_PANEL_CONTAINER_REQUEST_UUID(uuid));
         dispatch<any>(loadProcess(uuid));
         dispatch(initProcessPanelFilters);
+        dispatch<any>(initProcessLogsPanel(uuid));
         dispatch<any>(loadSubprocessPanel());
     };
 

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 e6d4091d08f95f09c538a13f7f01c2a9f0c4f65a..aab44da44e2db5d0d7d30cd511eedb3918459084 100644 (file)
--- a/src/views/process-log-panel/process-log-main-card.tsx
+++ b/src/views/process-log-panel/process-log-main-card.tsx
@@ -3,18 +3,28 @@
 // SPDX-License-Identifier: AGPL-3.0
 
 import React from 'react';
-import { Link } from 'react-router-dom';
 import {
-    StyleRulesCallback, WithStyles, withStyles, Card,
-    CardHeader, IconButton, CardContent, Grid, Typography, Tooltip
+    StyleRulesCallback,
+    WithStyles,
+    withStyles,
+    Card,
+    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 {
+    ProcessLogForm,
+    ProcessLogFormDataProps,
+    ProcessLogFormActionProps
+} from 'views/process-log-panel/process-log-form';
+import { MoreOptionsIcon, LogIcon } from 'components/icon/icon';
 import { ArvadosTheme } from 'common/custom-theme';
 import { CodeSnippetDataProps } from 'components/code-snippet/code-snippet';
-import { BackIcon } from 'components/icon/icon';
 import { DefaultView } from 'components/default-view/default-view';
 
 type CssRules = 'backLink' | 'backIcon' | 'card' | 'title' | 'iconHeader' | 'link';
@@ -52,7 +62,6 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
     }
 });
 
-
 interface ProcessLogMainCardDataProps {
     process: Process;
 }
@@ -71,12 +80,9 @@ export type ProcessLogMainCardProps = ProcessLogMainCardDataProps
 export const ProcessLogMainCard = withStyles(styles)(
     ({ classes, process, selectedFilter, filters, onChange, lines, onContextMenu, navigateToLogCollection }: ProcessLogMainCardProps & WithStyles<CssRules>) =>
         <Grid item xs={12}>
-            <Link to={`/processes/${process.containerRequest.uuid}`} className={classes.backLink}>
-                <BackIcon className={classes.backIcon} /> BACK
-            </Link>
             <Card className={classes.card}>
                 <CardHeader
-                    avatar={<ProcessIcon className={classes.iconHeader} />}
+                    avatar={<LogIcon className={classes.iconHeader} />}
                     action={
                         <Tooltip title="More options" disableFocusListener>
                             <IconButton onClick={event => onContextMenu(event, process)} aria-label="More options">
@@ -84,12 +90,10 @@ export const ProcessLogMainCard = withStyles(styles)(
                             </IconButton>
                         </Tooltip>}
                     title={
-                        <Tooltip title={process.containerRequest.name} placement="bottom-start">
-                            <Typography noWrap variant='h6' className={classes.title}>
-                                {process.containerRequest.name}
-                            </Typography>
-                        </Tooltip>}
-                    subheader={process.containerRequest.description} />
+                        <Typography noWrap variant='h6' className={classes.title}>
+                            Logs for {process.containerRequest.name}
+                        </Typography>}
+                />
                 <CardContent>
                     {lines.length > 0
                         ? < Grid
@@ -111,7 +115,7 @@ export const ProcessLogMainCard = withStyles(styles)(
                             </Grid>
                         </Grid>
                         : <DefaultView
-                            icon={ProcessIcon}
+                            icon={LogIcon}
                             messages={['No logs yet']} />
                     }
                 </CardContent>

diff --git a/src/views/process-panel/process-panel-root.tsx b/src/views/process-panel/process-panel-root.tsx
index 6fb9c09d16742d4b2b622974016da7cbc5558b89..5a0b6b6475126496a3ef3f372200f318ec31c01c 100644 (file)
--- a/src/views/process-panel/process-panel-root.tsx
+++ b/src/views/process-panel/process-panel-root.tsx
@@ -13,6 +13,9 @@ import { SubprocessFilterDataProps } from 'components/subprocess-filter/subproce
 import { MPVContainer, MPVPanelContent, MPVPanelState } from 'components/multi-panel-view/multi-panel-view';
 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';
 
 type CssRules = 'root';
 
@@ -26,6 +29,7 @@ export interface ProcessPanelRootDataProps {
     process?: Process;
     subprocesses: Array<Process>;
     filters: Array<SubprocessFilterDataProps>;
+    processLogsPanel: ProcessLogsPanel;
 }
 
 export interface ProcessPanelRootActionProps {
@@ -35,6 +39,8 @@ export interface ProcessPanelRootActionProps {
     navigateToOutput: (uuid: string) => void;
     navigateToWorkflow: (uuid: string) => void;
     cancelProcess: (uuid: string) => void;
+    onLogFilterChange: (filter: FilterOption) => void;
+    navigateToLog: (uuid: string) => void;
 }
 
 export type ProcessPanelRootProps = ProcessPanelRootDataProps & ProcessPanelRootActionProps & WithStyles<CssRules>;
@@ -42,10 +48,12 @@ export type ProcessPanelRootProps = ProcessPanelRootDataProps & ProcessPanelRoot
 const panelsData: MPVPanelState[] = [
     {name: "Info"},
     {name: "Details", visible: false},
+    {name: "Logs", visible: true},
     {name: "Subprocesses"},
 ];
 
-export const ProcessPanelRoot = withStyles(styles)(({ process, ...props }: ProcessPanelRootProps) =>
+export const ProcessPanelRoot = withStyles(styles)(
+    ({ process, processLogsPanel, ...props }: ProcessPanelRootProps) =>
     process
         ? <MPVContainer className={props.classes.root} spacing={8} panelStates={panelsData}  justify-content="flex-start" direction="column" wrap="nowrap">
             <MPVPanelContent forwardProps xs="auto">
@@ -61,6 +69,24 @@ export const ProcessPanelRoot = withStyles(styles)(({ process, ...props }: Proce
             <MPVPanelContent forwardProps xs="auto">
                 <ProcessDetailsCard process={process} />
             </MPVPanelContent>
+            <MPVPanelContent xs="auto">
+                <ProcessLogMainCard
+                    process={process}
+                    lines={getProcessPanelLogs(processLogsPanel)}
+                    selectedFilter={{
+                        label: processLogsPanel.selectedFilter,
+                        value: processLogsPanel.selectedFilter
+                    }}
+                    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}
+                />
+            </MPVPanelContent>
             <MPVPanelContent forwardProps xs>
                 <SubprocessPanel />
             </MPVPanelContent>
@@ -73,4 +99,3 @@ export const ProcessPanelRoot = withStyles(styles)(({ process, ...props }: Proce
                 icon={ProcessIcon}
                 messages={['Process not found']} />
         </Grid>);
-

diff --git a/src/views/process-panel/process-panel.tsx b/src/views/process-panel/process-panel.tsx
index 27acc8690efe77959a5c7ed87fe8cbb68ac5cb48..6dd02c9b5c64c5025ef299cdd78d3ed885d7f3f9 100644 (file)
--- a/src/views/process-panel/process-panel.tsx
+++ b/src/views/process-panel/process-panel.tsx
@@ -24,14 +24,16 @@ import {
 } from 'store/process-panel/process-panel-actions';
 import { openProcessInputDialog } from 'store/processes/process-input-actions';
 import { cancelRunningWorkflow } from 'store/processes/processes-actions';
+import { navigateToLogCollection, setProcessLogsPanelFilter } from 'store/process-logs-panel/process-logs-panel-actions';
 
-const mapStateToProps = ({ router, resources, processPanel }: RootState): ProcessPanelRootDataProps => {
+const mapStateToProps = ({ router, resources, processPanel, processLogsPanel }: RootState): ProcessPanelRootDataProps => {
     const uuid = getProcessPanelCurrentUuid(router) || '';
     const subprocesses = getSubprocesses(uuid)(resources);
     return {
         process: getProcess(uuid)(resources),
         subprocesses: subprocesses.filter(subprocess => processPanel.filters[getProcessStatus(subprocess)]),
         filters: getFilters(processPanel, subprocesses),
+        processLogsPanel: processLogsPanel,
     };
 };
 
@@ -45,7 +47,9 @@ const mapDispatchToProps = (dispatch: Dispatch): ProcessPanelRootActionProps =>
     openProcessInputDialog: (uuid) => dispatch<any>(openProcessInputDialog(uuid)),
     navigateToOutput: (uuid) => dispatch<any>(navigateToOutput(uuid)),
     navigateToWorkflow: (uuid) => dispatch<any>(openWorkflow(uuid)),
-    cancelProcess: (uuid) => dispatch<any>(cancelRunningWorkflow(uuid))
+    cancelProcess: (uuid) => dispatch<any>(cancelRunningWorkflow(uuid)),
+    onLogFilterChange: (filter) => dispatch(setProcessLogsPanelFilter(filter.value)),
+    navigateToLog: (uuid) => dispatch<any>(navigateToLogCollection(uuid)),
 });
 
 const getFilters = (processPanel: ProcessPanelState, processes: Process[]) => {