From 8a31be6ffef5ff15014b500d5f7f2a743afc54e9 Mon Sep 17 00:00:00 2001 From: Keith Grant Date: Thu, 22 Aug 2019 14:48:25 -0700 Subject: [PATCH] refactor lookup components --- .../Lookup}/InstanceGroupsLookup.jsx | 0 .../Lookup}/InventoriesLookup.jsx | 0 awx/ui_next/src/components/Lookup/index.js | 2 + .../Organization/shared/OrganizationForm.jsx | 3 +- .../src/screens/Organization/shared/index.js | 2 +- .../Template/shared/JobTemplateForm.jsx | 244 ++++++++++-------- 6 files changed, 137 insertions(+), 114 deletions(-) rename awx/ui_next/src/{screens/Organization/shared => components/Lookup}/InstanceGroupsLookup.jsx (100%) rename awx/ui_next/src/{screens/Template/shared => components/Lookup}/InventoriesLookup.jsx (100%) diff --git a/awx/ui_next/src/screens/Organization/shared/InstanceGroupsLookup.jsx b/awx/ui_next/src/components/Lookup/InstanceGroupsLookup.jsx similarity index 100% rename from awx/ui_next/src/screens/Organization/shared/InstanceGroupsLookup.jsx rename to awx/ui_next/src/components/Lookup/InstanceGroupsLookup.jsx diff --git a/awx/ui_next/src/screens/Template/shared/InventoriesLookup.jsx b/awx/ui_next/src/components/Lookup/InventoriesLookup.jsx similarity index 100% rename from awx/ui_next/src/screens/Template/shared/InventoriesLookup.jsx rename to awx/ui_next/src/components/Lookup/InventoriesLookup.jsx diff --git a/awx/ui_next/src/components/Lookup/index.js b/awx/ui_next/src/components/Lookup/index.js index 5aeea8d028..abd530b8eb 100644 --- a/awx/ui_next/src/components/Lookup/index.js +++ b/awx/ui_next/src/components/Lookup/index.js @@ -1 +1,3 @@ export { default } from './Lookup'; +export { default as InstanceGroupsLookup } from './InstanceGroupsLookup'; +export { default as InventoriesLookup } from './InventoriesLookup'; diff --git a/awx/ui_next/src/screens/Organization/shared/OrganizationForm.jsx b/awx/ui_next/src/screens/Organization/shared/OrganizationForm.jsx index 360a195048..2bc0dcdc4d 100644 --- a/awx/ui_next/src/screens/Organization/shared/OrganizationForm.jsx +++ b/awx/ui_next/src/screens/Organization/shared/OrganizationForm.jsx @@ -15,10 +15,9 @@ import FormRow from '@components/FormRow'; import FormField from '@components/FormField'; import FormActionGroup from '@components/FormActionGroup/FormActionGroup'; import AnsibleSelect from '@components/AnsibleSelect'; +import { InstanceGroupsLookup } from '@components/Lookup/'; import { required, minMaxValue } from '@util/validators'; -import InstanceGroupsLookup from './InstanceGroupsLookup'; - class OrganizationForm extends Component { constructor(props) { super(props); diff --git a/awx/ui_next/src/screens/Organization/shared/index.js b/awx/ui_next/src/screens/Organization/shared/index.js index 7f931cff31..2ddcf675b7 100644 --- a/awx/ui_next/src/screens/Organization/shared/index.js +++ b/awx/ui_next/src/screens/Organization/shared/index.js @@ -1,2 +1,2 @@ -export { default as InstanceGroupsLookup } from './InstanceGroupsLookup'; +/* eslint-disable-next-line import/prefer-default-export */ export { default as OrganizationForm } from './OrganizationForm'; diff --git a/awx/ui_next/src/screens/Template/shared/JobTemplateForm.jsx b/awx/ui_next/src/screens/Template/shared/JobTemplateForm.jsx index 4713fe8b06..13218a68f5 100644 --- a/awx/ui_next/src/screens/Template/shared/JobTemplateForm.jsx +++ b/awx/ui_next/src/screens/Template/shared/JobTemplateForm.jsx @@ -17,18 +17,13 @@ import CollapsibleSection from '@components/CollapsibleSection'; import { required } from '@util/validators'; import styled from 'styled-components'; import { JobTemplate } from '@types'; -import InventoriesLookup from './InventoriesLookup'; +import { InventoriesLookup, InstanceGroupsLookup } from '@components/Lookup'; import ProjectLookup from './ProjectLookup'; -import { LabelsAPI, ProjectsAPI } from '@api'; +import { JobTemplatesAPI, LabelsAPI, ProjectsAPI } from '@api'; const QuestionCircleIcon = styled(PFQuestionCircleIcon)` margin-left: 10px; `; -const QSConfig = { - page: 1, - page_size: 200, - order_by: 'name', -}; class JobTemplateForm extends Component { static propTypes = { @@ -64,6 +59,7 @@ class JobTemplateForm extends Component { project: props.template.summary_fields.project, inventory: props.template.summary_fields.inventory, relatedProjectPlaybooks: props.relatedProjectPlaybooks, + relatedInstanceGroups: [], }; this.handleNewLabel = this.handleNewLabel.bind(this); this.loadLabels = this.loadLabels.bind(this); @@ -74,21 +70,29 @@ class JobTemplateForm extends Component { ); } - async componentDidMount() { + componentDidMount() { const { validateField } = this.props; - await this.loadLabels(QSConfig); 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 // 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. - this.setState({ contentError: null, hasContentLoading: true }); let loadedLabels; try { - const { data } = await LabelsAPI.read(QueryConfig); + const { data } = await LabelsAPI.read({ + page: 1, + page_size: 200, + order_by: 'name', + }); loadedLabels = [...data.results]; if (data.next && data.next.includes('page=2')) { const { @@ -103,8 +107,19 @@ class JobTemplateForm extends Component { this.setState({ loadedLabels }); } catch (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 { - - - {i18n._(t`The number of parallel or simultaneous - processes to use while executing the playbook. An empty value, - or a value less than 1 will use the Ansible default which is - usually 5. The default number of forks can be overwritten - with a change to`)}{' '} - ansible.cfg.{' '} - {i18n._(t`Refer to the Ansible documentation for details - about the configuration file.`)} - - } - /> - - ( - - - - - - - )} - /> - - - ( - - - - -
- - form.setFieldValue(field.name, checked) - } - /> -
- - )} - /> - + + + {i18n._(t`The number of parallel or simultaneous + processes to use while executing the playbook. An empty value, + or a value less than 1 will use the Ansible default which is + usually 5. The default number of forks can be overwritten + with a change to`)}{' '} + ansible.cfg.{' '} + {i18n._(t`Refer to the Ansible documentation for details + about the configuration file.`)} + + } + /> + + ( + + + + + + + )} + /> + + + ( + + + + +
+ + form.setFieldValue(field.name, checked) + } + /> +
+ + )} + /> + + {/* */} @@ -541,7 +563,7 @@ const FormikApp = withFormik({ verbosity, job_slicing, timeout, - diff_mode + diff_mode, summary_fields = { labels: { results: [] } }, } = { ...template };