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',
},
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}
--- /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 { 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) =>
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} />
<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>