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';
+import { Typography, Switch } from '@material-ui/core';
- type CssRules = 'container' | 'label' | 'value' | 'switch';
-type CssRules = 'grid' | 'label' | 'value' | 'switch';
++type CssRules = 'container' | 'label' | 'value';
const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
- grid: {
- display: 'flex'
+ container: {
+ display: 'flex',
++ alignItems: 'center',
++ height: '20px'
},
label: {
width: '86px',
color: theme.palette.grey["500"],
- textAlign: 'right'
+ textAlign: 'right',
},
value: {
width: '24px',
- paddingLeft: theme.spacing.unit
- },
- switch: {
- '& span:first-child': {
- height: '18px'
- }
+ paddingLeft: theme.spacing.unit,
- },
- switch: {
- height: '20px',
- '& span:first-child': {
- height: '18px'
- }
}
});
export const SubprocessFilter = withStyles(styles)(
({ classes, label, value, key, checked, onToggle }: SubprocessFilterProps) =>
- <Grid item className={classes.grid} md={12} lg={6} >
+ <div className={classes.container} >
<Typography component="span" className={classes.label}>{label}:</Typography>
<Typography component="span" className={classes.value}>{value}</Typography>
-- {onToggle && <Switch classes={{ root: classes.switch }}
++ {onToggle && <Switch
checked={checked}
onChange={onToggle}
value={key}
color="primary" />
}
- </Grid>
+ </div>
);
--- /dev/null
- 'Queued',
- 'Complete',
- 'Active',
- 'Failed'
+// Copyright (C) The Arvados Authors. All rights reserved.
+//
+// SPDX-License-Identifier: AGPL-3.0
+
+import { unionize, ofType, UnionOf } from "~/common/unionize";
+import { loadProcess } from '~/store/processes/processes-actions';
+import { Dispatch } from 'redux';
++import { ProcessStatus } from '~/store/processes/process';
+
+export const procesPanelActions = unionize({
+ INIT_PROCESS_PANEL_FILTERS: ofType<string[]>(),
+ TOGGLE_PROCESS_PANEL_FILTER: ofType<string>(),
+});
+
+export type ProcessPanelAction = UnionOf<typeof procesPanelActions>;
+
+export const toggleProcessPanelFilter = procesPanelActions.TOGGLE_PROCESS_PANEL_FILTER;
+
+export const loadProcessPanel = (uuid: string) =>
+ (dispatch: Dispatch) => {
+ dispatch<any>(loadProcess(uuid));
+ dispatch(initProcessPanelFilters);
+ };
+
+export const initProcessPanelFilters = procesPanelActions.INIT_PROCESS_PANEL_FILTERS([
++ ProcessStatus.QUEUED,
++ ProcessStatus.COMPLETED,
++ ProcessStatus.FAILED,
++ ProcessStatus.RUNNING,
++ ProcessStatus.LOCKED,
++ ProcessStatus.CANCELLED
+]);
import { projectPanelColumns } from '~/views/project-panel/project-panel';
import { favoritePanelColumns } from '~/views/favorite-panel/favorite-panel';
import { matchRootRoute } from '~/routes/routes';
- import { setCollectionBreadcrumbs, setProjectBreadcrumbs, setSidePanelBreadcrumbs } from '../breadcrumbs/breadcrumbs-actions';
+ import { setCollectionBreadcrumbs, setProjectBreadcrumbs, setSidePanelBreadcrumbs, setProcessBreadcrumbs } from '../breadcrumbs/breadcrumbs-actions';
import { navigateToProject } from '../navigation/navigation-action';
import { MoveToFormDialogData } from '~/store/move-to-dialog/move-to-dialog';
import { ServiceRepository } from '~/services/services';
import * as collectionUpdateActions from '~/store/collections/collection-update-actions';
import * as collectionMoveActions from '~/store/collections/collection-move-actions';
import * as processesActions from '../processes/processes-actions';
- import { getProcess } from '../processes/process';
import { trashPanelColumns } from "~/views/trash-panel/trash-panel";
import { loadTrashPanel, trashPanelActions } from "~/store/trash-panel/trash-panel-action";
import { initProcessLogsPanel } from '../process-logs-panel/process-logs-panel-actions';
++import { loadProcessPanel } from '~/store/process-panel/process-panel-actions';
export const loadWorkbench = () =>
export const loadProcess = (uuid: string) =>
async (dispatch: Dispatch, getState: () => RootState) => {
- await dispatch<any>(processesActions.loadProcess(uuid));
- const process = getProcess(uuid)(getState().resources);
- if (process) {
- await dispatch<any>(activateSidePanelTreeItem(process.containerRequest.ownerUuid));
- dispatch<any>(setCollectionBreadcrumbs(process.containerRequest.ownerUuid));
- dispatch(loadDetailsPanel(uuid));
- }
++ dispatch<any>(loadProcessPanel(uuid));
+ const process = await dispatch<any>(processesActions.loadProcess(uuid));
+ await dispatch<any>(activateSidePanelTreeItem(process.containerRequest.ownerUuid));
+ dispatch<any>(setProcessBreadcrumbs(uuid));
+ dispatch(loadDetailsPanel(uuid));
++
};
export const loadProcessLog = (uuid: string) =>
async (dispatch: Dispatch) => {
+ const process = await dispatch<any>(processesActions.loadProcess(uuid));
+ await dispatch<any>(activateSidePanelTreeItem(process.containerRequest.ownerUuid));
+ dispatch<any>(setProcessBreadcrumbs(uuid));
dispatch<any>(initProcessLogsPanel(uuid));
};
import { Process } from '~/store/processes/process';
import { SubprocessesCard } from './subprocesses-card';
import { ProcessSubprocesses } from '~/views/process-panel/process-subprocesses';
-import { SubprocessesStatus } from '~/views/process-panel/process-subprocesses-card';
-
-type CssRules = 'headerActive' | 'headerCompleted' | 'headerQueued' | 'headerFailed' | 'headerCanceled';
+import { SubprocessFilterDataProps } from '~/components/subprocess-filter/subprocess-filter';
export interface ProcessPanelRootDataProps {
process?: Process;
subprocesses: Array<Process>;
+ filters: Array<SubprocessFilterDataProps>;
+ totalSubprocessesLength: number;
}
export interface ProcessPanelRootActionProps {
onContextMenu: (event: React.MouseEvent<HTMLElement>) => void;
+ onToggle: (status: string) => void;
}
export type ProcessPanelRootProps = ProcessPanelRootDataProps & ProcessPanelRootActionProps;
export const ProcessPanelRoot = (props: ProcessPanelRootProps) =>
props.process
- ? <Grid container spacing={16}>
- <Grid item xs={7}>
+ ? <Grid container spacing={16} alignItems="stretch">
- <Grid item sm={12} md={7} alignItems="stretch">
++ <Grid item sm={12} md={7}>
<ProcessInformationCard
process={props.process}
onContextMenu={props.onContextMenu} />
</Grid>
- <Grid item xs={5}>
+ <Grid item sm={12} md={5}>
<SubprocessesCard
- subprocesses={4}
- 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={() => { return; }}
+ subprocessesAmount={props.totalSubprocessesLength}
+ filters={props.filters}
+ onToggle={props.onToggle}
/>
</Grid>
<Grid item xs={12}>
icon={ProcessIcon}
messages={['Process not found']} />
</Grid>;
+
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 { 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';
+type CssRules = 'root' | 'subtitle' | 'title' | 'gridFilter';
const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
root: {
- fontSize: '0.875rem'
+ fontSize: '0.875rem',
+ height: '100%'
+ },
+ subtitle: {
+ paddingBottom: '32px!important'
+ },
+ title: {
+ color: theme.customs.colors.grey700
+ },
+ gridFilter: {
+ height: '20px',
+ marginBottom: theme.spacing.unit,
+ paddingTop: '0px!important',
+ paddingBottom: '0px!important',
}
});
interface SubprocessesDataProps {
- subprocesses: number;
+ subprocessesAmount: number;
filters: SubprocessFilterDataProps[];
- onToggle: (filter: SubprocessFilterDataProps) => void;
+ onToggle: (status: string) => void;
}
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 title="Subprocess and filters" />
+ <CardHeader
+ className={classes.title}
+ title={
+ <Typography noWrap variant="title" color='inherit'>
+ Subprocess and filters
+ </Typography>} />
<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}>
+ <Grid item md={12} lg={6} className={classes.subtitle}>
+ <SubprocessFilter label='Subprocesses' value={subprocessesAmount} />
+ </Grid>
+ <Grid item md={12} lg={6}/>
{
- filters.map(filter =>
- <SubprocessFilter {...filter} key={filter.key} onToggle={() => onToggle(filter)} />
+ filters.map(filter =>
- <Grid item md={12} lg={6} key={filter.key} spacing={0} className={classes.gridFilter}>
++ <Grid item md={12} lg={6} key={filter.key} className={classes.gridFilter}>
+ <SubprocessFilter {...filter} onToggle={() => onToggle(filter.label)} />
+ </Grid>
)
}
</Grid>
projects / arvados-workbench2.git / commitdiff