Merge branch '14684-image-file-preview-in-details-panel'
authorMichal Klobukowski <michal.klobukowski@contractors.roche.com>
Fri, 28 Dec 2018 13:11:22 +0000 (14:11 +0100)
committerMichal Klobukowski <michal.klobukowski@contractors.roche.com>
Fri, 28 Dec 2018 13:11:22 +0000 (14:11 +0100)
refs #14684

Arvados-DCO-1.1-Signed-off-by: Michal Klobukowski <michal.klobukowski@contractors.roche.com>

src/components/form-field/form-field.tsx [new file with mode: 0644]
src/components/switch-field/switch-field.tsx [new file with mode: 0644]
src/components/text-field/text-field.tsx
src/models/scheduling-parameters.ts
src/store/run-process-panel/run-process-panel-actions.ts
src/validators/min.tsx [new file with mode: 0644]
src/validators/optional.tsx [new file with mode: 0644]
src/views/run-process-panel/inputs/int-input.tsx
src/views/run-process-panel/run-process-advanced-form.tsx
src/views/run-process-panel/run-process-second-step.tsx
src/views/workflow-panel/workflow-description-card.tsx

diff --git a/src/components/form-field/form-field.tsx b/src/components/form-field/form-field.tsx
new file mode 100644 (file)
index 0000000..32362ac
--- /dev/null
@@ -0,0 +1,41 @@
+// Copyright (C) The Arvados Authors. All rights reserved.
+//
+// SPDX-License-Identifier: AGPL-3.0
+
+import * as React from 'react';
+import { WrappedFieldProps, WrappedFieldInputProps } from 'redux-form';
+import { FormGroup, FormLabel, FormHelperText } from '@material-ui/core';
+
+interface FormFieldCustomProps {
+    children: <P>(props: WrappedFieldInputProps) => React.ReactElement<P>;
+    label?: string;
+    helperText?: string;
+    required?: boolean;
+}
+
+export type FormFieldProps = FormFieldCustomProps & WrappedFieldProps;
+
+export const FormField = ({ children, ...props }: FormFieldProps & WrappedFieldProps) => {
+    return (
+        <FormGroup>
+
+            <FormLabel
+                focused={props.meta.active}
+                required={props.required}
+                error={props.meta.touched && !!props.meta.error}>
+                {props.label}
+            </FormLabel>
+
+            { children(props.input) }
+
+            <FormHelperText error={props.meta.touched && !!props.meta.error}>
+                {
+                    props.meta.touched && props.meta.error
+                        ? props.meta.error
+                        : props.helperText
+                }
+            </FormHelperText>
+
+        </FormGroup>
+    );
+};
diff --git a/src/components/switch-field/switch-field.tsx b/src/components/switch-field/switch-field.tsx
new file mode 100644 (file)
index 0000000..ac7b140
--- /dev/null
@@ -0,0 +1,14 @@
+// Copyright (C) The Arvados Authors. All rights reserved.
+//
+// SPDX-License-Identifier: AGPL-3.0
+
+import * as React from 'react';
+import { FormFieldProps, FormField } from '~/components/form-field/form-field';
+import { Switch } from '@material-ui/core';
+import { SwitchProps } from '@material-ui/core/Switch';
+
+export const SwitchField = ({ switchProps, ...props }: FormFieldProps & { switchProps: SwitchProps }) =>
+    <FormField {...props}>
+        {input => <Switch {...switchProps} checked={input.value} onChange={input.onChange} />}
+    </FormField>;
+
index 93c4080f0fead0c7330f0a65a6824bdb628da8e1..4788e18c51df5824608fdfc8e7793f07a1d2288a 100644 (file)
@@ -26,10 +26,11 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
 type TextFieldProps = WrappedFieldProps & WithStyles<CssRules>;
 
 export const TextField = withStyles(styles)((props: TextFieldProps & {
-    label?: string, autoFocus?: boolean, required?: boolean, select?: boolean, disabled?: boolean, children: React.ReactNode, margin?: Margin, placeholder?: string
+    label?: string, autoFocus?: boolean, required?: boolean, select?: boolean, disabled?: boolean, children: React.ReactNode, margin?: Margin, placeholder?: string,
+    helperText?: string, type?: string,
 }) =>
     <MaterialTextField
-        helperText={props.meta.touched && props.meta.error}
+        helperText={(props.meta.touched && props.meta.error) || props.helperText}
         className={props.classes.textField}
         label={props.label}
         disabled={props.disabled || props.meta.submitting}
@@ -42,6 +43,7 @@ export const TextField = withStyles(styles)((props: TextFieldProps & {
         children={props.children}
         margin={props.margin}
         placeholder={props.placeholder}
+        type={props.type}
         {...props.input}
     />);
 
index 62f7224c3b3dee3abd6078c84f04c3103eb3bf2e..50ce4156a13fe689cacd02efb95762a6c5f4afdb 100644 (file)
@@ -3,7 +3,7 @@
 // SPDX-License-Identifier: AGPL-3.0
 
 export interface SchedulingParameters {
-    partitions: string[];
-    preemptible: boolean;
-    maxRunTime: number;
+    partitions?: string[];
+    preemptible?: boolean;
+    maxRunTime?: number;
 }
index 0cbd9cd6823abd18e284e95c9ecc1177b2febb69..f7649860e478b55a825ad180a84fa99b0c9b98fd 100644 (file)
@@ -14,7 +14,7 @@ import { WorkflowInputsData } from '~/models/workflow';
 import { createWorkflowMounts } from '~/models/process';
 import { ContainerRequestState } from '~/models/container-request';
 import { navigateToProcess } from '../navigation/navigation-action';
-import { RunProcessAdvancedFormData, RUN_PROCESS_ADVANCED_FORM } from '~/views/run-process-panel/run-process-advanced-form';
+import { RunProcessAdvancedFormData, RUN_PROCESS_ADVANCED_FORM, VCPUS_FIELD, RAM_FIELD, RUNTIME_FIELD, OUTPUT_FIELD, API_FIELD } from '~/views/run-process-panel/run-process-advanced-form';
 import { isItemNotInProject, isProjectOrRunProcessRoute } from '~/store/projects/project-create-actions';
 import { dialogActions } from '~/store/dialog/dialog-actions';
 import { setBreadcrumbs } from '~/store/breadcrumbs/breadcrumbs-actions';
@@ -79,10 +79,12 @@ export const setWorkflow = (workflow: WorkflowResource, isWorkflowChanged = true
             dispatch(runProcessPanelActions.SET_STEP_CHANGED(false));
             dispatch(runProcessPanelActions.SET_SELECTED_WORKFLOW(workflow));
             dispatch<any>(loadPresets(workflow.uuid));
+            dispatch(initialize(RUN_PROCESS_ADVANCED_FORM, DEFAULT_ADVANCED_FORM_VALUES));
         }
         if (!isWorkflowChanged) {
             dispatch(runProcessPanelActions.SET_SELECTED_WORKFLOW(workflow));
             dispatch<any>(loadPresets(workflow.uuid));
+            dispatch(initialize(RUN_PROCESS_ADVANCED_FORM, DEFAULT_ADVANCED_FORM_VALUES));
         }
     };
 
@@ -115,7 +117,7 @@ export const runProcess = async (dispatch: Dispatch<any>, getState: () => RootSt
     const state = getState();
     const basicForm = getFormValues(RUN_PROCESS_BASIC_FORM)(state) as RunProcessBasicFormData;
     const inputsForm = getFormValues(RUN_PROCESS_INPUTS_FORM)(state) as WorkflowInputsData;
-    const advancedForm = getFormValues(RUN_PROCESS_ADVANCED_FORM)(state) as RunProcessAdvancedFormData;
+    const advancedForm = getFormValues(RUN_PROCESS_ADVANCED_FORM)(state) as RunProcessAdvancedFormData || DEFAULT_ADVANCED_FORM_VALUES;
     const userUuid = getState().auth.user!.uuid;
     const router = getState();
     const properties = getState().properties;
@@ -129,28 +131,36 @@ export const runProcess = async (dispatch: Dispatch<any>, getState: () => RootSt
             mounts: createWorkflowMounts(selectedWorkflow, normalizeInputKeys(inputsForm)),
             runtimeConstraints: {
                 API: true,
-                vcpus: 1,
-                ram: 1073741824,
+                vcpus: advancedForm[VCPUS_FIELD],
+                ram: advancedForm[RAM_FIELD],
+                api: advancedForm[API_FIELD],
+            },
+            schedulingParameters: {
+                maxRunTime: advancedForm[RUNTIME_FIELD]
             },
             containerImage: 'arvados/jobs',
             cwd: '/var/spool/cwl',
             command: [
                 'arvados-cwl-runner',
-                '--local',
                 '--api=containers',
-                `--project-uuid=${processOwnerUuid}`,
                 '/var/lib/cwl/workflow.json#main',
                 '/var/lib/cwl/cwl.input.json'
             ],
             outputPath: '/var/spool/cwl',
             priority: 1,
-            outputName: advancedForm && advancedForm.output ? advancedForm.output : undefined,
+            outputName: advancedForm[OUTPUT_FIELD] ? advancedForm[OUTPUT_FIELD] : undefined,
         };
         const newProcess = await services.containerRequestService.create(newProcessData);
         dispatch(navigateToProcess(newProcess.uuid));
     }
 };
 
+export const DEFAULT_ADVANCED_FORM_VALUES: Partial<RunProcessAdvancedFormData> = {
+    [VCPUS_FIELD]: 1,
+    [RAM_FIELD]: 1073741824,
+    [API_FIELD]: true,
+};
+
 const normalizeInputKeys = (inputs: WorkflowInputsData): WorkflowInputsData =>
     Object.keys(inputs).reduce((normalizedInputs, key) => ({
         ...normalizedInputs,
diff --git a/src/validators/min.tsx b/src/validators/min.tsx
new file mode 100644 (file)
index 0000000..e326a70
--- /dev/null
@@ -0,0 +1,12 @@
+// Copyright (C) The Arvados Authors. All rights reserved.
+//
+// SPDX-License-Identifier: AGPL-3.0
+
+import { isNumber } from 'lodash';
+
+export const ERROR_MESSAGE = (minValue: number) => `Minimum value is ${minValue}`;
+
+export const min =
+    (minValue: number, errorMessage = ERROR_MESSAGE) =>
+        (value: any) =>
+            isNumber(value) && value >= minValue ? undefined : errorMessage(minValue);
diff --git a/src/validators/optional.tsx b/src/validators/optional.tsx
new file mode 100644 (file)
index 0000000..da3a825
--- /dev/null
@@ -0,0 +1,7 @@
+// Copyright (C) The Arvados Authors. All rights reserved.
+//
+// SPDX-License-Identifier: AGPL-3.0
+
+export const optional = (validator: (value: any) => string | undefined) =>
+    (value: any) =>
+        value === undefined || value === null || value === ''  ? undefined : validator(value);
\ No newline at end of file
index 32ebeb75c27bc8ee6be8ed186b5051a5dcff0ab0..3273f35458c5e0aedd214ec838f60e7d4189592f 100644 (file)
@@ -22,9 +22,9 @@ export const IntInput = ({ input }: IntInputProps) =>
         format={format}
         validate={getValidation(input)} />;
 
-const parse = (value: any) => parseInt(value, 10);
+export const parse = (value: any) => value === '' ? '' : parseInt(value, 10);
 
-const format = (value: any) => isNaN(value) ? '' : JSON.stringify(value);
+export const format = (value: any) => isNaN(value) ? '' : JSON.stringify(value);
 
 const getValidation = memoize(
     (input: IntCommandInputParameter) => ([
index 19beab6be3328ee13a1c70500669557f5999de4e..30ff494c1ebbae138811432817fc298244ab5a73 100644 (file)
@@ -8,17 +8,33 @@ import { reduxForm, Field } from 'redux-form';
 import { Grid } from '@material-ui/core';
 import { TextField } from '~/components/text-field/text-field';
 import { ExpandIcon } from '~/components/icon/icon';
+import * as IntInput from './inputs/int-input';
+import { require } from '~/validators/require';
+import { min } from '~/validators/min';
+import { optional } from '~/validators/optional';
+import { SwitchField } from '~/components/switch-field/switch-field';
 
 export const RUN_PROCESS_ADVANCED_FORM = 'runProcessAdvancedForm';
 
+export const OUTPUT_FIELD = 'output';
+export const RUNTIME_FIELD = 'runtime';
+export const RAM_FIELD = 'ram';
+export const VCPUS_FIELD = 'vcpus';
+export const KEEP_CACHE_RAM_FIELD = 'keepCacheRam';
+export const API_FIELD = 'api';
+
 export interface RunProcessAdvancedFormData {
-    output: string;
-    runtime: string;
+    [OUTPUT_FIELD]?: string;
+    [RUNTIME_FIELD]?: number;
+    [RAM_FIELD]: number;
+    [VCPUS_FIELD]: number;
+    [KEEP_CACHE_RAM_FIELD]?: number;
+    [API_FIELD]?: boolean;
 }
 
 export const RunProcessAdvancedForm =
     reduxForm<RunProcessAdvancedFormData>({
-        form: RUN_PROCESS_ADVANCED_FORM
+        form: RUN_PROCESS_ADVANCED_FORM,
     })(() =>
         <form>
             <ExpansionPanel elevation={0}>
@@ -29,17 +45,72 @@ export const RunProcessAdvancedForm =
                     <Grid container spacing={32}>
                         <Grid item xs={12} md={6}>
                             <Field
-                                name='output'
+                                name={OUTPUT_FIELD}
                                 component={TextField}
                                 label="Output name" />
                         </Grid>
                         <Grid item xs={12} md={6}>
                             <Field
-                                name='runtime'
+                                name={RUNTIME_FIELD}
+                                component={TextField}
+                                helperText="Maximum running time (in seconds) that this container will be allowed to run before being cancelled."
+                                label="Runtime limit"
+                                parse={IntInput.parse}
+                                format={IntInput.format}
+                                type='number'
+                                validate={runtimeValidation} />
+                        </Grid>
+                        <Grid item xs={12} md={6}>
+                            <Field
+                                name={RAM_FIELD}
+                                component={TextField}
+                                label="RAM"
+                                helperText="Number of ram bytes to be used to run this process."
+                                parse={IntInput.parse}
+                                format={IntInput.format}
+                                type='number'
+                                required
+                                validate={ramValidation} />
+                        </Grid>
+                        <Grid item xs={12} md={6}>
+                            <Field
+                                name={VCPUS_FIELD}
                                 component={TextField}
-                                label="Runtime limit (hh)" />
+                                label="VCPUs"
+                                helperText="Number of cores to be used to run this process."
+                                parse={IntInput.parse}
+                                format={IntInput.format}
+                                type='number'
+                                required
+                                validate={vcpusValidation} />
+                        </Grid>
+                        <Grid item xs={12} md={6}>
+                            <Field
+                                name={KEEP_CACHE_RAM_FIELD}
+                                component={TextField}
+                                label="Keep cache RAM"
+                                helperText="Number of keep cache bytes to be used to run this process."
+                                parse={IntInput.parse}
+                                format={IntInput.format}
+                                type='number'
+                                validate={keepCacheRamValdation} />
+                        </Grid>
+                        <Grid item xs={12} md={6}>
+                            <Field
+                                name={API_FIELD}
+                                component={SwitchField}
+                                switchProps={{
+                                    color: 'primary'
+                                }}
+                                label='API'
+                                helperText='When set, ARVADOS_API_HOST and ARVADOS_API_TOKEN will be set, and process will have networking enabled to access the Arvados API server.' />
                         </Grid>
                     </Grid>
                 </ExpansionPanelDetails>
             </ExpansionPanel>
         </form >);
+
+const ramValidation = [min(0)];
+const vcpusValidation = [min(1)];
+const keepCacheRamValdation = [optional(min(0))];
+const runtimeValidation = [optional(min(1))];
index a7e4a87f172661f1359b3e0aa6b5f751aafca102..8e855ab395a95666e11d1f708315465bf5aff098 100644 (file)
@@ -11,7 +11,7 @@ import { connect } from 'react-redux';
 import { RootState } from '~/store/store';
 import { isValid } from 'redux-form';
 import { RUN_PROCESS_INPUTS_FORM } from './run-process-inputs-form';
-import { RunProcessAdvancedForm } from './run-process-advanced-form';
+import { RunProcessAdvancedForm, RUN_PROCESS_ADVANCED_FORM } from './run-process-advanced-form';
 import { createSelector, createStructuredSelector } from 'reselect';
 import { WorkflowPresetSelect } from '~/views/run-process-panel/workflow-preset-select';
 import { selectPreset } from '~/store/run-process-panel/run-process-panel-actions';
@@ -43,7 +43,7 @@ const inputsSelector = (state: RootState) =>
     state.runProcessPanel.inputs;
 
 const validSelector = (state: RootState) =>
-    isValid(RUN_PROCESS_BASIC_FORM)(state) && isValid(RUN_PROCESS_INPUTS_FORM)(state);
+    isValid(RUN_PROCESS_BASIC_FORM)(state) && isValid(RUN_PROCESS_INPUTS_FORM)(state) && isValid(RUN_PROCESS_ADVANCED_FORM)(state);
 
 const mapStateToProps = createStructuredSelector({
     inputs: inputsSelector,
index 936c3485746b001b3fa4d3a52e8f493e209677e8..2294ab5e5373bb841bebac6752cf80c1a0d3da44 100644 (file)
@@ -72,9 +72,6 @@ export const WorkflowDetailsCard = withStyles(styles)(
 
         render() {
             const { classes, workflow } = this.props;
-            if (workflow) {
-                console.log(workflow.definition);
-            }
             const { value } = this.state;
             return <div className={classes.root}>
                 <Tabs value={value} onChange={this.handleChange} centered={true}>