[ARVADOS-WORKBENCH2] updated: 1.2.0-201-g3d99600
Git user
git at public.curoverse.com
Thu Aug 30 04:01:00 EDT 2018
Summary of changes:
.../subprocess-filter/subprocess-filter.tsx | 54 +++++++++
src/views/process-panel/process-panel.tsx | 51 +++++++-
src/views/process-panel/subprocesses-card.tsx | 130 +++++----------------
3 files changed, 132 insertions(+), 103 deletions(-)
create mode 100644 src/components/subprocess-filter/subprocess-filter.tsx
via 3d996002ab1f259b31d07858d9c5d0a780600a00 (commit)
from de519d0b84931f8ef5fb7d2aecdb67a911c3eabf (commit)
Those revisions listed above that are new to this repository have
not appeared on any other notification email; so we list those
revisions in full, below.
commit 3d996002ab1f259b31d07858d9c5d0a780600a00
Author: Janicki Artur <artur.janicki at contractors.roche.com>
Date: Thu Aug 30 10:00:47 2018 +0200
change code after CR
Feature #13860
Arvados-DCO-1.1-Signed-off-by: Janicki Artur <artur.janicki at contractors.roche.com>
diff --git a/src/components/subprocess-filter/subprocess-filter.tsx b/src/components/subprocess-filter/subprocess-filter.tsx
new file mode 100644
index 0000000..58c33ee
--- /dev/null
+++ b/src/components/subprocess-filter/subprocess-filter.tsx
@@ -0,0 +1,54 @@
+// Copyright (C) The Arvados Authors. All rights reserved.
+//
+// SPDX-License-Identifier: AGPL-3.0
+
+import * as React from 'react';
+import { StyleRulesCallback, WithStyles, withStyles } from '@material-ui/core/styles';
+import { ArvadosTheme } from '~/common/custom-theme';
+import { Grid, Typography, Switch } from '@material-ui/core';
+
+type CssRules = 'grid' | 'label' | 'value' | 'switch';
+
+const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
+ grid: {
+ display: 'flex'
+ },
+ label: {
+ width: '86px',
+ color: theme.palette.grey["500"],
+ textAlign: 'right'
+ },
+ value: {
+ width: '24px',
+ paddingLeft: theme.spacing.unit
+ },
+ switch: {
+ '& span:first-child': {
+ height: '18px'
+ }
+ }
+});
+
+export interface SubprocessFilterDataProps {
+ label: string;
+ value: number;
+ checked?: boolean;
+ key?: string;
+ onToggle?: () => void;
+}
+
+type SubprocessFilterProps = SubprocessFilterDataProps & WithStyles<CssRules>;
+
+export const SubprocessFilter = withStyles(styles)(
+ ({ classes, label, value, key, checked, onToggle }: SubprocessFilterProps) =>
+ <Grid item className={classes.grid} md={12} lg={6} >
+ <Typography component="span" className={classes.label}>{label}:</Typography>
+ <Typography component="span" className={classes.value}>{value}</Typography>
+ {onToggle && <Switch classes={{ root: classes.switch }}
+ checked={checked}
+ onChange={onToggle}
+ value={key}
+ color="primary" />
+ }
+ </Grid>
+);
\ No newline at end of file
diff --git a/src/views/process-panel/process-panel.tsx b/src/views/process-panel/process-panel.tsx
index b3820b4..3b21b57 100644
--- a/src/views/process-panel/process-panel.tsx
+++ b/src/views/process-panel/process-panel.tsx
@@ -6,15 +6,64 @@ import * as React from 'react';
import { Grid } from '@material-ui/core';
import { ProcessInformationCard } from '~/views/process-panel/information-card';
import { SubprocessesCard } from '~/views/process-panel/subprocesses-card';
+import { SubprocessFilterDataProps } from '~/components/subprocess-filter/subprocess-filter';
export class ProcessPanel extends React.Component {
+ state = {
+ 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 = (filter: SubprocessFilterDataProps) => {
+ this.setState((prev: { filters: any[] }) => {
+ return {
+ filters: prev.filters.map((f: SubprocessFilterDataProps) => {
+ if(f.key === filter.key) {
+ return {
+ ...filter,
+ checked: !filter.checked
+ };
+ }
+ return f;
+ })
+ };
+ });
+ }
+
render() {
return <Grid container spacing={16}>
<Grid item xs={7}>
<ProcessInformationCard />
</Grid>
<Grid item xs={5}>
- <SubprocessesCard />
+ <SubprocessesCard
+ subprocesses={4}
+ filters={this.state.filters}
+ onToggle={this.onToggle}
+ />
</Grid>
</Grid>;
}
diff --git a/src/views/process-panel/subprocesses-card.tsx b/src/views/process-panel/subprocesses-card.tsx
index 1fd5817..ac60c9f 100644
--- a/src/views/process-panel/subprocesses-card.tsx
+++ b/src/views/process-panel/subprocesses-card.tsx
@@ -5,116 +5,42 @@
import * as React from 'react';
import { ArvadosTheme } from '~/common/custom-theme';
import { StyleRulesCallback, withStyles, WithStyles, Card, CardHeader, CardContent, Grid, Switch } from '@material-ui/core';
+import { SubprocessFilter } from '~/components/subprocess-filter/subprocess-filter';
+import { SubprocessFilterDataProps } from '~/components/subprocess-filter/subprocess-filter';
-type CssRules = 'root' | 'label' | 'value' | 'middleValue' | 'switch' | 'grid';
+type CssRules = 'root';
const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
root: {
fontSize: '0.875rem'
- },
- label: {
- color: theme.palette.grey["500"],
- marginBottom: theme.spacing.unit
- },
- value: {
- marginBottom: theme.spacing.unit
- },
- middleValue: {
- marginBottom: theme.spacing.unit - 2
- },
- switch: {
- '& span:first-child': {
- height: '18px'
- }
- },
- grid: {
- marginLeft: '22px'
}
});
-type SubprocessesProps = WithStyles<CssRules>;
+interface SubprocessesDataProps {
+ subprocesses: number;
+ filters: SubprocessFilterDataProps[];
+ onToggle: (filter: SubprocessFilterDataProps) => void;
+}
-export const SubprocessesCard = withStyles(styles)(
- class extends React.Component<SubprocessesProps> {
-
- state = {
- queued: true,
- active: true,
- completed: true,
- failed: true
- };
-
- handleChange = (name: string) => (event: any) => {
- this.setState({ [name]: event.target.checked });
- }
+type SubprocessesProps = SubprocessesDataProps & WithStyles<CssRules>;
- render() {
- const { classes } = this.props;
- return (
- <Card className={classes.root}>
- <CardHeader title="Subprocess and filters" />
- <CardContent>
- <Grid container direction="row" spacing={16} justify="flex-start" alignItems="stretch">
- <Grid item>
- <Grid container direction="column" alignItems="flex-end" spacing={8}>
- <Grid item className={classes.label}>Subprocesses:</Grid>
- <Grid item className={classes.label}>Queued:</Grid>
- <Grid item className={classes.label}>Active:</Grid>
- </Grid>
- </Grid>
- <Grid item>
- <Grid container direction="column" alignItems="flex-start" spacing={8}>
- <Grid item className={classes.value}>1</Grid>
- <Grid item className={classes.middleValue}>
- 2
- <Switch classes={{ root: classes.switch }}
- checked={this.state.queued}
- onChange={this.handleChange('queued')}
- value="queued"
- color="primary" />
- </Grid>
- <Grid item className={classes.value}>
- 3
- <Switch classes={{ root: classes.switch }}
- checked={this.state.active}
- onChange={this.handleChange('active')}
- value="active"
- color="primary" />
- </Grid>
- </Grid>
- </Grid>
- <Grid item className={classes.grid}>
- <Grid container direction="column" alignItems="flex-end" spacing={8}>
- <Grid item className={classes.label}> </Grid>
- <Grid item className={classes.label}>Completed:</Grid>
- <Grid item className={classes.label}>Failed:</Grid>
- </Grid>
- </Grid>
- <Grid item>
- <Grid container direction="column" alignItems="flex-end" spacing={8}>
- <Grid item className={classes.value}> </Grid>
- <Grid item className={classes.middleValue}>
- 2
- <Switch classes={{ root: classes.switch }}
- checked={this.state.completed}
- onChange={this.handleChange('completed')}
- value="completed"
- color="primary" />
- </Grid>
- <Grid item className={classes.value}>
- 1
- <Switch classes={{ root: classes.switch }}
- checked={this.state.failed}
- onChange={this.handleChange('failed')}
- value="failed"
- color="primary" />
- </Grid>
- </Grid>
- </Grid>
- </Grid>
- </CardContent>
- </Card>
- );
- }
- }
+export const SubprocessesCard = withStyles(styles)(
+ ({ classes, filters, subprocesses, onToggle }: SubprocessesProps) =>
+ <Card className={classes.root}>
+ <CardHeader title="Subprocess and filters" />
+ <CardContent>
+ <Grid container direction="column" spacing={16}>
+ <Grid item xs={12} container spacing={16}>
+ <SubprocessFilter label='Subprocesses' value={subprocesses} />
+ </Grid>
+ <Grid item xs={12} container spacing={16}>
+ {
+ filters.map(filter =>
+ <SubprocessFilter {...filter} key={filter.key} onToggle={() => onToggle(filter)} />
+ )
+ }
+ </Grid>
+ </Grid>
+ </CardContent>
+ </Card>
);
\ No newline at end of file
-----------------------------------------------------------------------
hooks/post-receive
--
More information about the arvados-commits
mailing list