add instance groups to JT form

This commit is contained in:
Keith Grant
2019-08-27 10:52:02 -07:00
parent 3a9a884bbc
commit 4d31d83e1e
3 changed files with 144 additions and 94 deletions

View File

@@ -68,6 +68,9 @@ class JobTemplateForm extends Component {
this.loadRelatedProjectPlaybooks = this.loadRelatedProjectPlaybooks.bind( this.loadRelatedProjectPlaybooks = this.loadRelatedProjectPlaybooks.bind(
this this
); );
this.handleInstanceGroupsChange = this.handleInstanceGroupsChange.bind(
this
);
} }
componentDidMount() { componentDidMount() {
@@ -116,6 +119,7 @@ class JobTemplateForm extends Component {
return; return;
} }
try { try {
console.log('loading...');
const { data } = await JobTemplatesAPI.readInstanceGroups(template.id); const { data } = await JobTemplatesAPI.readInstanceGroups(template.id);
console.log(data.results); console.log(data.results);
} catch (err) { } catch (err) {
@@ -217,6 +221,10 @@ class JobTemplateForm extends Component {
}; };
} }
handleInstanceGroupsChange(relatedInstanceGroups) {
this.setState({ relatedInstanceGroups });
}
render() { render() {
const { const {
loadedLabels, loadedLabels,
@@ -225,6 +233,9 @@ class JobTemplateForm extends Component {
inventory, inventory,
project, project,
relatedProjectPlaybooks = [], relatedProjectPlaybooks = [],
newLabels,
removedLabels,
relatedInstanceGroups,
} = this.state; } = this.state;
const { const {
handleCancel, handleCancel,
@@ -271,13 +282,13 @@ class JobTemplateForm extends Component {
] ]
); );
const verbosityOptions = [ const verbosityOptions = [
{ value: '0', key: '0', label: i18n._(t`0 (Normal)`) }, { value: '0', key: '0', label: i18n._(t`0 (Normal)`) },
{ value: '1', key: '1', label: i18n._(t`1 (Verbose)`) }, { value: '1', key: '1', label: i18n._(t`1 (Verbose)`) },
{ value: '2', key: '2', label: i18n._(t`2 (More Verbose)`) }, { value: '2', key: '2', label: i18n._(t`2 (More Verbose)`) },
{ value: '3', key: '3', label: i18n._(t`3 (Debug)`) }, { value: '3', key: '3', label: i18n._(t`3 (Debug)`) },
{ value: '4', key: '4', label: i18n._(t`4 (Connection Debug)`) }, { value: '4', key: '4', label: i18n._(t`4 (Connection Debug)`) },
]; ];
if (hasContentLoading) { if (hasContentLoading) {
return ( return (
@@ -439,108 +450,107 @@ class JobTemplateForm extends Component {
</FormGroup> </FormGroup>
</FormRow> </FormRow>
<CollapsibleSection label="Advanced"> <CollapsibleSection label="Advanced">
<FormRow> <FormRow>
<FormField <FormField
id="template-forks" id="template-forks"
name="forks" name="forks"
type="number" type="number"
label={i18n._(t`Forks`)} label={i18n._(t`Forks`)}
tooltip={ tooltip={
<span> <span>
{i18n._(t`The number of parallel or simultaneous {i18n._(t`The number of parallel or simultaneous
processes to use while executing the playbook. An empty value, processes to use while executing the playbook. An empty value,
or a value less than 1 will use the Ansible default which is or a value less than 1 will use the Ansible default which is
usually 5. The default number of forks can be overwritten usually 5. The default number of forks can be overwritten
with a change to`)}{' '} with a change to`)}{' '}
<code>ansible.cfg</code>.{' '} <code>ansible.cfg</code>.{' '}
{i18n._(t`Refer to the Ansible documentation for details {i18n._(t`Refer to the Ansible documentation for details
about the configuration file.`)} about the configuration file.`)}
</span> </span>
} }
/> />
<FormField <FormField
id="template-limit" id="template-limit"
name="limit" name="limit"
type="text" type="text"
label={i18n._(t`Limit`)} label={i18n._(t`Limit`)}
tooltip={i18n._(t`Provide a host pattern to further constrain tooltip={i18n._(t`Provide a host pattern to further constrain
the list of hosts that will be managed or affected by the the list of hosts that will be managed or affected by the
playbook. Multiple patterns are allowed. Refer to Ansible playbook. Multiple patterns are allowed. Refer to Ansible
documentation for more information and examples on patterns.`)} documentation for more information and examples on patterns.`)}
/> />
<Field <Field
name="verbosity" name="verbosity"
render={({ field }) => ( render={({ field }) => (
<FormGroup <FormGroup
fieldId="template-verbosity" fieldId="template-verbosity"
label={i18n._(t`Verbosity`)} label={i18n._(t`Verbosity`)}
> >
<Tooltip <Tooltip
position="right" position="right"
content={i18n._(t`Control the level of output ansible will content={i18n._(t`Control the level of output ansible will
produce as the playbook executes.`)} produce as the playbook executes.`)}
> >
<QuestionCircleIcon /> <QuestionCircleIcon />
</Tooltip> </Tooltip>
<AnsibleSelect data={verbosityOptions} {...field} /> <AnsibleSelect data={verbosityOptions} {...field} />
</FormGroup> </FormGroup>
)} )}
/> />
<FormField <FormField
id="template-job-slicing" id="template-job-slicing"
name="job_slice_count" name="job_slice_count"
type="number" type="number"
label={i18n._(t`Job Slicing`)} label={i18n._(t`Job Slicing`)}
tooltip={i18n._(t`Divide the work done by this job template tooltip={i18n._(t`Divide the work done by this job template
into the specified number of job slices, each running the into the specified number of job slices, each running the
same tasks against a portion of the inventory.`)} same tasks against a portion of the inventory.`)}
/> />
<FormField <FormField
id="template-timeout" id="template-timeout"
name="timeout" name="timeout"
type="number" type="number"
label={i18n._(t`Timeout`)} label={i18n._(t`Timeout`)}
tooltip={i18n._(t`The amount of time (in seconds) to run tooltip={i18n._(t`The amount of time (in seconds) to run
before the task is canceled. Defaults to 0 for no job before the task is canceled. Defaults to 0 for no job
timeout.`)} timeout.`)}
/> />
<Field <Field
name="diff_mode" name="diff_mode"
render={({ field, form }) => ( render={({ field, form }) => (
<FormGroup <FormGroup
fieldId="template-show-changes" fieldId="template-show-changes"
label={i18n._(t`Show Changes`)} label={i18n._(t`Show Changes`)}
> >
<Tooltip <Tooltip
position="right" position="right"
content={i18n._(t`If enabled, show the changes made by content={i18n._(t`If enabled, show the changes made by
Ansible tasks, where supported. This is equivalent Ansible tasks, where supported. This is equivalent
to Ansible&#x2019s --diff mode.`)} to Ansible&#x2019s --diff mode.`)}
> >
<QuestionCircleIcon /> <QuestionCircleIcon />
</Tooltip> </Tooltip>
<div> <div>
<Switch <Switch
id="template-show-changes" id="template-show-changes"
label={i18n._(t`On`)} label={field.value ? i18n._(t`On`) : i18n._(t`Off`)}
labelOff={i18n._(t`Off`)} isChecked={field.value}
isChecked={field.value} onChange={checked =>
onChange={checked => form.setFieldValue(field.name, checked)
form.setFieldValue(field.name, checked) }
} />
/> </div>
</div> </FormGroup>
</FormGroup> )}
)} />
/> </FormRow>
</FormRow> <InstanceGroupsLookup
{/* <InstanceGroupsLookup value={relatedInstanceGroups}
value={instanceGroups} onChange={this.handleInstanceGroupsChange}
onChange={this.handleInstanceGroupsChange} tooltip={i18n._(
tooltip={i18n._( t`Select the Instance Groups for this Organization to run on.`
t`Select the Instance Groups for this Organization to run on.` )}
)} />
/> */}
</CollapsibleSection> </CollapsibleSection>
<FormActionGroup onCancel={handleCancel} onSubmit={handleSubmit} /> <FormActionGroup onCancel={handleCancel} onSubmit={handleSubmit} />
</Form> </Form>

View File

@@ -1,5 +1,10 @@
import React from 'react'; import React from 'react';
/*
* Prevents styled-components from passing down an unsupported
* props to children, resulting in console warnings.
* https://github.com/styled-components/styled-components/issues/439
*/
export default function omitProps(Component, ...omit) { export default function omitProps(Component, ...omit) {
return function Omit(props) { return function Omit(props) {
const clean = { ...props }; const clean = { ...props };

View File

@@ -0,0 +1,35 @@
import React from 'react';
import { mount } from 'enzyme';
import omitProps from './omitProps';
describe('omitProps', () => {
test('should render child component', () => {
const Omit = omitProps('div');
const wrapper = mount(<Omit foo="one" bar="two" />);
const div = wrapper.find('div');
expect(div).toHaveLength(1);
expect(div.prop('foo')).toEqual('one');
expect(div.prop('bar')).toEqual('two');
});
test('should not pass omitted props to child component', () => {
const Omit = omitProps('div', 'foo', 'bar');
const wrapper = mount(<Omit foo="one" bar="two" />);
const div = wrapper.find('div');
expect(div).toHaveLength(1);
expect(div.prop('foo')).toEqual(undefined);
expect(div.prop('bar')).toEqual(undefined);
});
test('should support mix of omitted and non-omitted props', () => {
const Omit = omitProps('div', 'foo');
const wrapper = mount(<Omit foo="one" bar="two" />);
const div = wrapper.find('div');
expect(div).toHaveLength(1);
expect(div.prop('foo')).toEqual(undefined);
expect(div.prop('bar')).toEqual('two');
});
})