X-Git-Url: https://git.arvados.org/arvados.git/blobdiff_plain/5cc899fc13465c57f16adf69a593a4354e6e0eb3..ba27bdf218da8894df4ffa6174c67c1fb3e70c81:/src/views/process-panel/subprocesses-card.tsx

diff --git a/src/views/process-panel/subprocesses-card.tsx b/src/views/process-panel/subprocesses-card.tsx
index 8033222c9b..9cff1e9816 100644
--- a/src/views/process-panel/subprocesses-card.tsx
+++ b/src/views/process-panel/subprocesses-card.tsx
@@ -4,27 +4,30 @@
 
 import * as React from 'react';
 import { ArvadosTheme } from '~/common/custom-theme';
-import { StyleRulesCallback, withStyles, WithStyles, Card, CardHeader, CardContent, Grid, Switch, Typography } from '@material-ui/core';
+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';
-import { Process } from '~/store/processes/process';
 
-type CssRules = 'root' | 'subtitle' | 'title';
+type CssRules = 'root' | 'title' | 'gridFilter';
 
 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
     root: {
-        fontSize: '0.875rem'
-    },
-    subtitle: {
-        paddingBottom: '28px!important'
+        fontSize: '0.875rem',
+        height: '100%'
     },
     title: {
-        color: theme.customs.colors.grey700
+        color: theme.palette.grey["700"]
+    },
+    gridFilter: {
+        height: '20px',
+        marginBottom: theme.spacing.unit,
+        paddingTop: '0px!important',
+        paddingBottom: '0px!important',
     }
 });
 
 interface SubprocessesDataProps {
-    subprocesses: Array<Process>;
+    subprocessesAmount: number;
     filters: SubprocessFilterDataProps[];
     onToggle: (status: string) => void;
 }
@@ -32,9 +35,9 @@ interface SubprocessesDataProps {
 type SubprocessesProps = SubprocessesDataProps & WithStyles<CssRules>;
 
 export const SubprocessesCard = withStyles(styles)(
-    ({ classes, filters, subprocesses, onToggle }: SubprocessesProps) =>
+    ({ classes, filters, subprocessesAmount, onToggle }: SubprocessesProps) =>
         <Card className={classes.root}>
-            <CardHeader 
+            <CardHeader
                 className={classes.title}
                 title={
                     <Typography noWrap variant="title" color='inherit'>
@@ -42,13 +45,16 @@ export const SubprocessesCard = withStyles(styles)(
                 </Typography>} />
             <CardContent>
                 <Grid container direction="column" spacing={16}>
-                    <Grid item xs={12} container spacing={16} className={classes.subtitle}>
-                        <SubprocessFilter label='Subprocesses' value={subprocesses.length} />
-                    </Grid>
                     <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 =>
-                                <SubprocessFilter {...filter} key={filter.key} onToggle={() => onToggle(filter.label)} />
+                                <Grid item md={12} lg={6} key={filter.key} className={classes.gridFilter}>
+                                    <SubprocessFilter {...filter} onToggle={() => onToggle(filter.label)} />
+                                </Grid>
                             )
                         }
                     </Grid>