-export const ProcessPanelRoot = (props: ProcessPanelRootProps) =>
- props.process
- ? <Grid container spacing={16}>
- <Grid item xs={7}>
- <ProcessInformationCard
- process={props.process}
- onContextMenu={props.onContextMenu} />
- </Grid>
- <Grid item xs={5}>
- <SubprocessesCard
- subprocesses={4}
- filters={[
- {
- key: 'queued',
- value: 1,
- label: 'Queued',
- checked: true
- }, {
- key: 'active',
- value: 2,
- label: 'Active',
- checked: true
- },
- {
- key: 'completed',
- value: 2,
- label: 'Completed',
- checked: true
- },
- {
- key: 'failed',
- value: 2,
- label: 'Failed',
- checked: true
- }
- ]}
- onToggle={() => { return; }}
+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" data-cy="process-details">
+ <ProcessDetailsCard
+ process={process}
+ onContextMenu={event => props.onContextMenu(event, process)}
+ cancelProcess={props.cancelProcess}
+ />
+ </MPVPanelContent>
+ <MPVPanelContent forwardProps xs="auto" data-cy="process-cmd">
+ <ProcessCmdCard
+ onCopy={props.onCopyToClipboard}
+ process={process} />
+ </MPVPanelContent>
+ <MPVPanelContent forwardProps xs maxHeight='50%' data-cy="process-logs">
+ <ProcessLogsCard
+ onCopy={props.onCopyToClipboard}
+ 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}