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>(),
dispatch<ProcessPanelAction>(processPanelActions.SET_PROCESS_PANEL_CONTAINER_REQUEST_UUID(uuid));
dispatch<any>(loadProcess(uuid));
dispatch(initProcessPanelFilters);
+ dispatch<any>(initProcessLogsPanel(uuid));
dispatch<any>(loadSubprocessPanel());
};
// 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';
}
});
-
interface ProcessLogMainCardDataProps {
process: Process;
}
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">
</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
</Grid>
</Grid>
: <DefaultView
- icon={ProcessIcon}
+ icon={LogIcon}
messages={['No logs yet']} />
}
</CardContent>
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';
process?: Process;
subprocesses: Array<Process>;
filters: Array<SubprocessFilterDataProps>;
+ processLogsPanel: ProcessLogsPanel;
}
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>;
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">
<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>
icon={ProcessIcon}
messages={['Process not found']} />
</Grid>);
-
} 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,
};
};
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[]) => {