//
// SPDX-License-Identifier: AGPL-3.0
-import * as React from 'react';
+import React from 'react';
import { Grid } from '@material-ui/core';
import { ProcessInformationCard } from './process-information-card';
import { DefaultView } from 'components/default-view/default-view';
import { Process } from 'store/processes/process';
import { SubprocessPanel } from 'views/subprocess-panel/subprocess-panel';
import { SubprocessFilterDataProps } from 'components/subprocess-filter/subprocess-filter';
+import { MPVContainer, MPVPanelContent } from 'components/multi-panel-view/multi-panel-view';
export interface ProcessPanelRootDataProps {
process?: Process;
export const ProcessPanelRoot = ({ process, ...props }: ProcessPanelRootProps) =>
process
- ? <Grid container spacing={16} alignItems="stretch">
- <Grid item sm={12} md={12}>
+ ? <MPVContainer spacing={8} panelNames={["Info", "Subprocesses"]} alignItems="stretch">
+ <MPVPanelContent sm={12} md={12}>
<ProcessInformationCard
process={process}
onContextMenu={event => props.onContextMenu(event, process)}
openWorkflow={props.navigateToWorkflow}
cancelProcess={props.cancelProcess}
/>
- </Grid>
- <Grid item sm={12} md={12}>
+ </MPVPanelContent>
+ <MPVPanelContent sm={12} md={12}>
<SubprocessPanel />
- </Grid>
- </Grid>
+ </MPVPanelContent>
+ </MPVContainer>
: <Grid container
alignItems='center'
justify='center'