External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-03-20 10:27:34 -02:30
Code Issues Packages Projects Releases Wiki Activity

refactor lookup components

Browse Source
This commit is contained in:
Keith Grant
2019-08-22 14:48:25 -07:00
parent 6fd86fed65
commit 8a31be6ffe
6 changed files with 137 additions and 114 deletions
Download Patch File Download Diff File Expand all files Collapse all files

0
awx/ui_next/src/screens/Organization/shared/InstanceGroupsLookup.jsx → awx/ui_next/src/components/Lookup/InstanceGroupsLookup.jsx
View File

0
awx/ui_next/src/screens/Template/shared/InventoriesLookup.jsx → awx/ui_next/src/components/Lookup/InventoriesLookup.jsx
View File

2
awx/ui_next/src/components/Lookup/index.js
View File

@@ -1 +1,3 @@
export { default } from './Lookup'; export { default } from './Lookup';
export { default as InstanceGroupsLookup } from './InstanceGroupsLookup';
export { default as InventoriesLookup } from './InventoriesLookup';

3
awx/ui_next/src/screens/Organization/shared/OrganizationForm.jsx
View File

@@ -15,10 +15,9 @@ import FormRow from '@components/FormRow';
import FormField from '@components/FormField'; import FormField from '@components/FormField';
import FormActionGroup from '@components/FormActionGroup/FormActionGroup'; import FormActionGroup from '@components/FormActionGroup/FormActionGroup';
import AnsibleSelect from '@components/AnsibleSelect'; import AnsibleSelect from '@components/AnsibleSelect';
import { InstanceGroupsLookup } from '@components/Lookup/';
import { required, minMaxValue } from '@util/validators'; import { required, minMaxValue } from '@util/validators';
import InstanceGroupsLookup from './InstanceGroupsLookup';
class OrganizationForm extends Component { class OrganizationForm extends Component {
constructor(props) { constructor(props) {
super(props); super(props);

2
awx/ui_next/src/screens/Organization/shared/index.js
View File

@@ -1,2 +1,2 @@
export { default as InstanceGroupsLookup } from './InstanceGroupsLookup'; /* eslint-disable-next-line import/prefer-default-export */
export { default as OrganizationForm } from './OrganizationForm'; export { default as OrganizationForm } from './OrganizationForm';

244
awx/ui_next/src/screens/Template/shared/JobTemplateForm.jsx
View File

@@ -17,18 +17,13 @@ import CollapsibleSection from '@components/CollapsibleSection';
import { required } from '@util/validators'; import { required } from '@util/validators';
import styled from 'styled-components'; import styled from 'styled-components';
import { JobTemplate } from '@types'; import { JobTemplate } from '@types';
import InventoriesLookup from './InventoriesLookup'; import { InventoriesLookup, InstanceGroupsLookup } from '@components/Lookup';
import ProjectLookup from './ProjectLookup'; import ProjectLookup from './ProjectLookup';
import { LabelsAPI, ProjectsAPI } from '@api'; import { JobTemplatesAPI, LabelsAPI, ProjectsAPI } from '@api';
const QuestionCircleIcon = styled(PFQuestionCircleIcon)` const QuestionCircleIcon = styled(PFQuestionCircleIcon)`
margin-left: 10px; margin-left: 10px;
`; `;
const QSConfig = {
page: 1,
page_size: 200,
order_by: 'name',
};
class JobTemplateForm extends Component { class JobTemplateForm extends Component {
static propTypes = { static propTypes = {
@@ -64,6 +59,7 @@ class JobTemplateForm extends Component {
project: props.template.summary_fields.project, project: props.template.summary_fields.project,
inventory: props.template.summary_fields.inventory, inventory: props.template.summary_fields.inventory,
relatedProjectPlaybooks: props.relatedProjectPlaybooks, relatedProjectPlaybooks: props.relatedProjectPlaybooks,
relatedInstanceGroups: [],
}; };
this.handleNewLabel = this.handleNewLabel.bind(this); this.handleNewLabel = this.handleNewLabel.bind(this);
this.loadLabels = this.loadLabels.bind(this); this.loadLabels = this.loadLabels.bind(this);
@@ -74,21 +70,29 @@ class JobTemplateForm extends Component {
); );
} }
async componentDidMount() { componentDidMount() {
const { validateField } = this.props; const { validateField } = this.props;
await this.loadLabels(QSConfig);
validateField('project'); validateField('project');
this.setState({ contentError: null, hasContentLoading: true });
Promise.all([this.loadLabels(), this.loadRelatedInstanceGroups()]).then(
() => {
this.setState({ hasContentLoading: false });
}
);
} }
async loadLabels(QueryConfig) { async loadLabels() {
// This function assumes that the user has no more than 400 // This function assumes that the user has no more than 400
// labels. For the vast majority of users this will be more thans // labels. For the vast majority of users this will be more thans
// enough.This can be updated to allow more than 400 labels if we // enough. This can be updated to allow more than 400 labels if we
// decide it is necessary. // decide it is necessary.
this.setState({ contentError: null, hasContentLoading: true });
let loadedLabels; let loadedLabels;
try { try {
const { data } = await LabelsAPI.read(QueryConfig); const { data } = await LabelsAPI.read({
page: 1,
page_size: 200,
order_by: 'name',
});
loadedLabels = [...data.results]; loadedLabels = [...data.results];
if (data.next && data.next.includes('page=2')) { if (data.next && data.next.includes('page=2')) {
const { const {
@@ -103,8 +107,19 @@ class JobTemplateForm extends Component {
this.setState({ loadedLabels }); this.setState({ loadedLabels });
} catch (err) { } catch (err) {
this.setState({ contentError: err }); this.setState({ contentError: err });
} finally { }
this.setState({ hasContentLoading: false }); }
async loadRelatedInstanceGroups() {
const { template } = this.props;
if (!template.id) {
return;
}
try {
const { data } = await JobTemplatesAPI.readInstanceGroups(template.id);
console.log(data.results);
} catch (err) {
this.setState({ contentError: err });
} }
} }
@@ -424,101 +439,108 @@ 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={i18n._(t`On`)}
labelOff={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
value={instanceGroups}
onChange={this.handleInstanceGroupsChange}
tooltip={i18n._(
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>
@@ -541,7 +563,7 @@ const FormikApp = withFormik({
verbosity, verbosity,
job_slicing, job_slicing,
timeout, timeout,
diff_mode diff_mode,
summary_fields = { labels: { results: [] } }, summary_fields = { labels: { results: [] } },
} = { ...template }; } = { ...template };