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 { getProcessPanelLogs, ProcessLogsPanel } from 'store/process-logs-panel/process-logs-panel';
+import { ProcessLogsCard } from './process-log-card';
+import { FilterOption } from 'views/process-panel/process-log-form';
type CssRules = 'root';
const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
root: {
width: '100%',
+ height: '100%',
},
});
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 forwardProps xs maxHeight='50%'>
+ <ProcessLogsCard
+ process={process}
+ lines={getProcessPanelLogs(processLogsPanel)}
+ selectedFilter={{
+ label: processLogsPanel.selectedFilter,
+ value: processLogsPanel.selectedFilter
+ }}
+ filters={processLogsPanel.filters.map(
+ filter => ({ label: filter, value: filter })
+ )}
+ onLogFilterChange={props.onLogFilterChange}
+ navigateToLog={props.navigateToLog}
+ />
+ </MPVPanelContent>
<MPVPanelContent forwardProps xs>
<SubprocessPanel />
</MPVPanelContent>
icon={ProcessIcon}
messages={['Process not found']} />
</Grid>);
-