marginBottom: theme.spacing.unit
},
label: {
+ boxSizing: 'border-box',
color: theme.palette.grey["500"],
width: '40%'
},
value: {
+ boxSizing: 'border-box',
width: '60%',
display: 'flex',
alignItems: 'flex-start',
--- /dev/null
+// 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
}
});
-
-
export const RENAME_FILE_DIALOG = 'renameFileDialog';
export interface RenameFileDialogData {
name: string;
}
};
-export const doCollectionPartialCopy = ({ name, description, projectUuid }: CollectionPartialCopyFormData) =>
+export const copyCollectionPartial = ({ name, description, projectUuid }: CollectionPartialCopyFormData) =>
async (dispatch: Dispatch, getState: () => RootState, services: ServiceRepository) => {
dispatch(startSubmit(COLLECTION_PARTIAL_COPY_FORM_NAME));
const state = getState();
import { withDialog } from "~/store/dialog/with-dialog";
import { CollectionCreateFormDialogData } from '~/store/collections/collection-create-actions';
import { COLLECTION_UPLOAD_FILES_DIALOG, submitCollectionFiles } from '~/store/collections/collection-upload-actions';
-import { DialogCollectionFilesUpload } from '../dialog-upload/dialog-collection-files-upload';
+import { DialogCollectionFilesUpload } from '~/views-components/dialog-upload/dialog-collection-files-upload';
-export const UploadCollectionFilesDialog = compose(
+export const FilesUploadCollectionDialog = compose(
withDialog(COLLECTION_UPLOAD_FILES_DIALOG),
reduxForm<CollectionCreateFormDialogData>({
form: COLLECTION_UPLOAD_FILES_DIALOG,
import { compose } from "redux";
import { reduxForm } from 'redux-form';
import { withDialog, } from '~/store/dialog/with-dialog';
-import { CollectionPartialCopyFormData, doCollectionPartialCopy, COLLECTION_PARTIAL_COPY_FORM_NAME } from '~/store/collections/collection-partial-copy-actions';
+import { CollectionPartialCopyFormData, copyCollectionPartial, COLLECTION_PARTIAL_COPY_FORM_NAME } from '~/store/collections/collection-partial-copy-actions';
import { DialogCollectionPartialCopy } from "~/views-components/dialog-copy/dialog-collection-partial-copy";
export const PartialCopyCollectionDialog = compose(
withDialog(COLLECTION_PARTIAL_COPY_FORM_NAME),
- reduxForm({
+ reduxForm<CollectionPartialCopyFormData>({
form: COLLECTION_PARTIAL_COPY_FORM_NAME,
- onSubmit: (data: CollectionPartialCopyFormData, dispatch) => {
- dispatch(doCollectionPartialCopy(data));
+ onSubmit: (data, dispatch) => {
+ dispatch(copyCollectionPartial(data));
}
}))(DialogCollectionPartialCopy);
\ No newline at end of file
// SPDX-License-Identifier: AGPL-3.0
import * as React from 'react';
-import { ProcessInformationCard } from '~/views-components/process-information-card/process-information-card';
import { Grid } from '@material-ui/core';
+import { ProcessInformationCard } from '~/views-components/process-information-card/process-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 <div>
- <Grid container>
- <Grid item xs={7}>
- <ProcessInformationCard />
- </Grid>
+ return <Grid container spacing={16}>
+ <Grid item xs={7}>
+ <ProcessInformationCard />
+ </Grid>
+ <Grid item xs={5}>
+ <SubprocessesCard
+ subprocesses={4}
+ filters={this.state.filters}
+ onToggle={this.onToggle}
+ />
</Grid>
- </div>;
+ </Grid>;
}
-}
\ No newline at end of file
+}
--- /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, Switch } from '@material-ui/core';
+import { SubprocessFilter } from '~/components/subprocess-filter/subprocess-filter';
+import { SubprocessFilterDataProps } from '~/components/subprocess-filter/subprocess-filter';
+
+type CssRules = 'root';
+
+const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
+ root: {
+ fontSize: '0.875rem'
+ }
+});
+
+interface SubprocessesDataProps {
+ subprocesses: number;
+ filters: SubprocessFilterDataProps[];
+ onToggle: (filter: SubprocessFilterDataProps) => void;
+}
+
+type SubprocessesProps = SubprocessesDataProps & WithStyles<CssRules>;
+
+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
import { RenameFileDialog } from '~/views-components/rename-file-dialog/rename-file-dialog';
import { FileRemoveDialog } from '~/views-components/file-remove-dialog/file-remove-dialog';
import { MultipleFilesRemoveDialog } from '~/views-components/file-remove-dialog/multiple-files-remove-dialog';
-import { SidePanel } from '~/views-components/side-panel/side-panel';
import { Routes } from '~/routes/routes';
+import { SidePanel } from '~/views-components/side-panel/side-panel';
+import { ProcessPanel } from '~/views/process-panel/process-panel';
import { Breadcrumbs } from '~/views-components/breadcrumbs/breadcrumbs';
import { CreateProjectDialog } from '~/views-components/dialog-forms/create-project-dialog';
import { CreateCollectionDialog } from '~/views-components/dialog-forms/create-collection-dialog';
import { UpdateProjectDialog } from '~/views-components/dialog-forms/update-project-dialog';
import { MoveProjectDialog } from '~/views-components/dialog-forms/move-project-dialog';
import { MoveCollectionDialog } from '~/views-components/dialog-forms/move-collection-dialog';
-import { ProcessPanel } from '~/views/process-panel/process-panel';
-import { UploadCollectionFilesDialog } from '~/views-components/dialog-forms/upload-collection-files-dialog';
-import { PartialCopyCollectionDialog } from '~/views-components/dialog-forms/partial-copy-collection-dialog';
+import { FilesUploadCollectionDialog } from '~/views-components/dialog-forms/files-upload-collection-dialog';
+import { PartialCopyCollectionDialog } from '~/views-components/dialog-forms/partial-copy-collection-dialog';
const APP_BAR_HEIGHT = 100;
<PartialCopyCollectionDialog />
<FileRemoveDialog />
<CopyCollectionDialog />
+ <FileRemoveDialog />
<MultipleFilesRemoveDialog />
<UpdateCollectionDialog />
- <UploadCollectionFilesDialog />
+ <FilesUploadCollectionDialog />
<UpdateProjectDialog />
<MoveCollectionDialog />
<MoveProjectDialog />