};
return <Grid container {...props}>
- <Grid item>
- { toggles }
+ <Grid container item direction="row">
+ { toggles.map(tgl => <Grid item>{tgl}</Grid>) }
</Grid>
{ panelVisibility.includes(true)
? panels
- : <Grid container alignItems='center' justify='center'>
+ : <Grid container item alignItems='center' justify='center'>
<DefaultView messages={["All panels are hidden.", "Click on the buttons above to show them."]} icon={InfoIcon} />
</Grid> }
</Grid>;
import { getProcess } from 'store/processes/process';
import { ResourcesState } from 'store/resources/resources';
-type CssRules = "toolbar" | "button";
+type CssRules = "toolbar" | "button" | "root";
const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
toolbar: {
button: {
marginLeft: theme.spacing.unit
},
+ root: {
+ width: '100%',
+ }
});
export enum AllProcessesPanelColumnNames {
}
render() {
- return <DataExplorer
+ return <div className={this.props.classes.root}><DataExplorer
id={ALL_PROCESSES_PANEL_ID}
onRowClick={this.handleRowClick}
onRowDoubleClick={this.handleRowDoubleClick}
onContextMenu={this.handleContextMenu}
contextMenuColumn={true}
- dataTableDefaultView={
- <DataTableDefaultView
- icon={ProcessIcon}
- messages={['Processes list empty.']}
- />
- } />;
+ dataTableDefaultView={ <DataTableDefaultView
+ icon={ProcessIcon}
+ messages={['Processes list empty.']}
+ /> } />
+ </div>
}
}
)
// SPDX-License-Identifier: AGPL-3.0
import React from 'react';
-import { Grid } from '@material-ui/core';
+import { Grid, StyleRulesCallback, WithStyles, withStyles } from '@material-ui/core';
import { ProcessInformationCard } from './process-information-card';
import { DefaultView } from 'components/default-view/default-view';
import { ProcessIcon } from 'components/icon/icon';
import { SubprocessPanel } from 'views/subprocess-panel/subprocess-panel';
import { SubprocessFilterDataProps } from 'components/subprocess-filter/subprocess-filter';
import { MPVContainer, MPVPanelContent, MPVPanelState } from 'components/multi-panel-view/multi-panel-view';
+import { ArvadosTheme } from 'common/custom-theme';
+
+type CssRules = 'root';
+
+const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
+ root: {
+ width: '100%',
+ },
+});
export interface ProcessPanelRootDataProps {
process?: Process;
cancelProcess: (uuid: string) => void;
}
-export type ProcessPanelRootProps = ProcessPanelRootDataProps & ProcessPanelRootActionProps;
+export type ProcessPanelRootProps = ProcessPanelRootDataProps & ProcessPanelRootActionProps & WithStyles<CssRules>;
const panelsData: MPVPanelState[] = [
{name: "Info"},
{name: "Subprocesses"},
];
-export const ProcessPanelRoot = ({ process, ...props }: ProcessPanelRootProps) =>
+export const ProcessPanelRoot = withStyles(styles)(({ process, ...props }: ProcessPanelRootProps) =>
process
- ? <MPVContainer spacing={8} panelStates={panelsData} alignItems="stretch">
- <MPVPanelContent sm={12} md={12}>
+ ? <MPVContainer className={props.classes.root} spacing={8} panelStates={panelsData} justify-content="flex-start" direction="column" wrap="nowrap">
+ <MPVPanelContent xs="auto">
<ProcessInformationCard
process={process}
onContextMenu={event => props.onContextMenu(event, process)}
cancelProcess={props.cancelProcess}
/>
</MPVPanelContent>
- <MPVPanelContent sm={12} md={12}>
+ <MPVPanelContent xs>
<SubprocessPanel />
</MPVPanelContent>
</MPVContainer>
<DefaultView
icon={ProcessIcon}
messages={['Process not found']} />
- </Grid>;
+ </Grid>);