import { DefaultView } from '~/components/default-view/default-view';
import { ProcessIcon } from '~/components/icon/icon';
import { Process } from '~/store/processes/process';
-import { SubprocessesCard } from './subprocesses-card';
import { SubprocessPanel } from '~/views/subprocess-panel/subprocess-panel';
import { SubprocessFilterDataProps } from '~/components/subprocess-filter/subprocess-filter';
process?: Process;
subprocesses: Array<Process>;
filters: Array<SubprocessFilterDataProps>;
- totalSubprocessesLength: number;
}
export interface ProcessPanelRootActionProps {
export const ProcessPanelRoot = ({ process, ...props }: ProcessPanelRootProps) =>
process
? <Grid container spacing={16} alignItems="stretch">
- <Grid item sm={12} md={7}>
+ <Grid item sm={12} md={12}>
<ProcessInformationCard
process={process}
onContextMenu={event => props.onContextMenu(event, process)}
cancelProcess={props.cancelProcess}
/>
</Grid>
- <Grid item sm={12} md={5}>
- <SubprocessesCard
- subprocessesAmount={props.totalSubprocessesLength}
- filters={props.filters}
- onToggle={props.onToggle}
- />
- </Grid>
<Grid item sm={12} md={12}>
<SubprocessPanel />
</Grid>
+++ /dev/null
-// Copyright (C) The Arvados Authors. All rights reserved.
-//
-// SPDX-License-Identifier: AGPL-3.0
-
-import * as React from 'react';
-import { ArvadosTheme } from '~/common/custom-theme';
-import { StyleRulesCallback, withStyles, WithStyles, Card, CardHeader, CardContent, Grid, Typography } from '@material-ui/core';
-import { SubprocessFilter } from '~/components/subprocess-filter/subprocess-filter';
-import { SubprocessFilterDataProps } from '~/components/subprocess-filter/subprocess-filter';
-
-type CssRules = 'root' | 'title' | 'gridFilter';
-
-const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
- root: {
- fontSize: '0.875rem',
- height: '100%'
- },
- title: {
- color: theme.palette.grey["700"]
- },
- gridFilter: {
- height: '20px',
- marginBottom: theme.spacing.unit,
- paddingTop: '0px!important',
- paddingBottom: '0px!important',
- }
-});
-
-interface SubprocessesDataProps {
- subprocessesAmount: number;
- filters: SubprocessFilterDataProps[];
- onToggle: (status: string) => void;
-}
-
-type SubprocessesProps = SubprocessesDataProps & WithStyles<CssRules>;
-
-export const SubprocessesCard = withStyles(styles)(
- ({ classes, filters, subprocessesAmount, onToggle }: SubprocessesProps) =>
- <Card className={classes.root}>
- <CardHeader
- className={classes.title}
- title={
- <Typography noWrap variant='h6' color='inherit'>
- Subprocess and filters
- </Typography>} />
- <CardContent>
- <Grid container direction="column" spacing={16}>
- <Grid item xs={12} container spacing={16}>
- <Grid item md={12} lg={6}>
- <SubprocessFilter label='Subprocesses' value={subprocessesAmount} />
- </Grid>
- <Grid item md={12} lg={6}/>
- {
- filters.map(filter =>
- <Grid item md={12} lg={6} key={filter.key} className={classes.gridFilter}>
- <SubprocessFilter {...filter} onToggle={() => onToggle(filter.label)} />
- </Grid>
- )
- }
- </Grid>
- </Grid>
- </CardContent>
- </Card>
-);
\ No newline at end of file