foreman_acd 0.2.1 → 0.7.0

data/webpack/components/ApplicationDefinition/index.js

@@ -7,16 +7,22 @@ import * as ApplicationDefinitionActions from './ApplicationDefinitionActions';
 
 import {
   selectEditMode,
+  selectAnsiblePlaybook,
   selectServices,
   selectColumns,
   selectParametersData,
+  selectAnsibleVarsAll,
+  selectParamEditMode,
 } from './ApplicationDefinitionSelectors';
 
 const mapStateToProps = state => ({
   editMode: selectEditMode(state),
+  ansiblePlaybook: selectAnsiblePlaybook(state),
   services: selectServices(state),
   columns: selectColumns(state),
   parametersData: selectParametersData(state),
+  ansibleVarsAll: selectAnsibleVarsAll(state),
+  paramEditMode: selectParamEditMode(state),
 });
 
 const mapDispatchToProps = dispatch =>

data/webpack/components/ApplicationInstance/ApplicationInstance.js

@@ -6,14 +6,19 @@ import {
 } from 'patternfly-react';
 import * as resolve from 'table-resolver';
 import ForemanModal from 'foremanReact/components/ForemanModal';
+import {
+  sprintf,
+  translate as __
+} from 'foremanReact/common/I18n';
 import Select from 'foremanReact/components/common/forms/Select';
 import ParameterSelection from '../ParameterSelection';
 import AddTableEntry from '../common/AddTableEntry';
 import DeleteTableEntry from '../common/DeleteTableEntry';
-import RailsData from '../common/RailsData'
+import RailsData from '../common/RailsData';
 import AppDefinitionSelector from './components/AppDefinitionSelector';
 import ServiceCounter from './components/ServiceCounter';
 import { arrayToObject } from '../../helper';
+import { EasyHeaderFormatter } from '../../helper';
 
 import {
   Table,
@@ -21,6 +26,11 @@ import {
   inlineEditFormatterFactory,
 } from 'patternfly-react';
 
+import {
+  PARAMETER_SELECTION_PARAM_TYPE_FOREMAN,
+  PARAMETER_SELECTION_PARAM_TYPE_ANSIBLE,
+} from '../ParameterSelection/ParameterSelectionConstants';
+
 class ApplicationInstance extends React.Component {
 
   constructor(props) {
@@ -31,16 +41,20 @@ class ApplicationInstance extends React.Component {
     return (rowData.backup !== undefined);
   }
 
+  addTableEntryAllowed() {
+    return this.props.editMode || this.props.appDefinition.id == ''
+  }
+
   validateParameters() {
     let result = true;
     let msg = "";
 
     this.props.hosts.forEach(h => {
-      if (h.parameters.map(e => e.value).filter(i => i == "").length > 0) {
+      if (h.foremanParameters.map(e => e.value).filter(i => i == "").length > 0) {
         result = false;
 
         if (msg == "") {
-          msg += "For some hosts the values for some parameters are missing. Check the values for these hosts:\n";
+          msg += __("For some hosts the values for some parameters are missing. Check the values for these hosts:\n");
         }
         msg += "- "+ h.hostname +"\n";
       }
@@ -55,33 +69,40 @@ class ApplicationInstance extends React.Component {
       if (msg != "") {
         msg += "\n";
       }
-      msg += "Unachieved service counts: \n";
 
-      invalidMinServices.map(s => { msg += "- service "+ s.name +" expects at least "+ s.minCount +" configured hosts" });
-      invalidMaxServices.map(s => { msg += "- service "+ s.name +" expects no more than "+ s.maxCount +" configured hosts" });
+      msg += __("Unachieved service counts:");
+      msg += "\n";
+
+      invalidMinServices.map(s => { msg += sprintf(
+        __(`- service ${s.name} expects at ${s.minCount} least configured hosts\n`)
+      )});
+
+      invalidMaxServices.map(s => { msg += sprintf(
+        __(`- service ${s.name} expects no more than ${s.axCount} configured hosts\n`)
+      )});
     }
 
-    if (result === false) {
-      window.alert(msg);
+    return {
+      validateResult: result,
+      validateMsg: msg
     }
-    return result;
   }
 
   componentDidMount() {
     const {
-      data: { mode, appDefinition, hosts, loadAppDefinitionUrl },
+      data: { mode, appDefinition, hosts, ansibleVarsAll, appDefinitionUrl },
       initApplicationInstance,
       addApplicationInstanceHost,
       deleteApplicationInstanceHost,
       activateEditApplicationInstanceHost,
       changeEditApplicationInstanceHost,
-      openParameterSelectionModal,
-      closeParameterSelectionModal,
+      openForemanParameterSelectionModal,
+      openAnsibleParameterSelectionModal,
       loadApplicationDefinition,
     } = this.props;
 
     if (mode === 'editInstance') {
-      loadApplicationDefinition(appDefinition.id, { url: loadAppDefinitionUrl });
+      loadApplicationDefinition(appDefinition.id, { url: appDefinitionUrl });
     }
 
     const inlineEditButtonsFormatter = inlineEditFormatterFactory({
@@ -92,14 +113,23 @@ class ApplicationInstance extends React.Component {
             bsStyle="default"
             onClick={() => activateEditApplicationInstanceHost(additionalData)}
           >
-            <Icon type="pf" name="edit" />
+            <Icon type="pf" name="edit" title={__("edit entry")} />
+          </Button>
+          &nbsp;
+          <Button
+            bsStyle="default"
+            onClick={() => openForemanParameterSelectionModal(additionalData)}
+          >
+            <Icon type="pf" name="settings" title={__("change parameters")} />
           </Button>
+          &nbsp;
           <Button
             bsStyle="default"
-            onClick={() => openParameterSelectionModal(additionalData)}
+            onClick={() => openAnsibleParameterSelectionModal(additionalData)}
           >
-            <Icon type="pf" name="settings" />
+            <span title={__("change ansible variables")}>A</span>
           </Button>
+          &nbsp;
           <DeleteTableEntry
             hidden={false}
             disabled={false}
@@ -111,11 +141,17 @@ class ApplicationInstance extends React.Component {
       renderEdit: (value, additionalData) => (
         <td style={{ padding: '2px' }}>
           <Button bsStyle="default" disabled>
-            <Icon type="pf" name="edit" />
+            <Icon type="pf" name={__("edit")} />
+          </Button>
+          &nbsp;
+          <Button bsStyle="default" disabled>
+            <Icon type="pf" name={__("settings")} />
           </Button>
+          &nbsp;
           <Button bsStyle="default" disabled>
-            <Icon type="pf" name="settings" />
+            <span>A</span>
           </Button>
+          &nbsp;
           <DeleteTableEntry
             hidden={false}
             disabled={true}
@@ -127,8 +163,7 @@ class ApplicationInstance extends React.Component {
     });
     this.inlineEditButtonsFormatter = inlineEditButtonsFormatter;
 
-    const headerFormatter = value => <Table.Heading>{value}</Table.Heading>;
-    this.headerFormatter = headerFormatter;
+    this.headerFormatter = EasyHeaderFormatter;
 
     const inlineEditFormatterImpl = {
       renderValue: (value, additionalData) => (
@@ -180,6 +215,12 @@ class ApplicationInstance extends React.Component {
           prettyValue = serviceList[value];
           return inlineEditFormatterImpl.renderValue(prettyValue, additionalData)
         }
+        if (additionalData.property == 'hostname') {
+          if (additionalData.rowData.newEntry === true) {
+            return inlineEditFormatterImpl.renderEditText(value, additionalData);
+          }
+          return inlineEditFormatterImpl.renderValue(prettyValue, additionalData)
+        }
         return inlineEditFormatterImpl.renderEditText(prettyValue, additionalData);
       }
     });
@@ -188,6 +229,7 @@ class ApplicationInstance extends React.Component {
     initApplicationInstance(
       appDefinition,
       hosts,
+      ansibleVarsAll,
       this.headerFormatter,
       this.inlineEditFormatter,
       this.inlineEditButtonsFormatter,
@@ -196,7 +238,7 @@ class ApplicationInstance extends React.Component {
 
   render() {
     const {
-      data: { mode, applications, organization, location, loadForemanDataUrl, loadAppDefinitionUrl },
+      data: { mode, applications, organization, location, foremanDataUrl, appDefinitionUrl },
       appDefinition,
       services,
       hosts,
@@ -204,16 +246,20 @@ class ApplicationInstance extends React.Component {
       addApplicationInstanceHost,
       confirmEditApplicationInstanceHost,
       cancelEditApplicationInstanceHost,
-      openParameterSelectionModal,
-      closeParameterSelectionModal,
-      ParameterSelectionModal,
+      closeForemanParameterSelectionModal,
+      openAnsibleParameterSelectionModal,
+      closeAnsibleParameterSelectionModal,
+      changeParameterSelectionMode,
       loadApplicationDefinition,
     } = this.props;
 
-    // Start from validation when pressing submit. This should be in componentDidMount() but
-    // unfortunatley then the event wasn't fired. To make sure, that the on-click is only added
-    // once, there is a workaround to check if a css class "bound" exists.
-    $('input[type="submit"][name="commit"]:not(.bound)').addClass('bound').on('click', () => this.validateParameters());
+    let { validateResult, validateMsg } = this.validateParameters();
+
+    if (validateResult == false) {
+      $('input[type="submit"][name="commit"]').attr("disabled", true);
+    } else {
+      $('input[type="submit"][name="commit"]').attr("disabled", false);
+    }
 
     return (
       <span>
@@ -232,15 +278,15 @@ class ApplicationInstance extends React.Component {
             options={ applications }
             onChange={ loadApplicationDefinition }
             selectValue={ appDefinition.id.toString() }
-            additionalData={{url: loadAppDefinitionUrl}}
+            additionalData={{url: appDefinitionUrl}}
           />
+          {appDefinition.id == '' ? (
+          <p style={{ paddingTop: 25 }}>
+            <pre>{ "App Definition can't be blank" }</pre>
+          </p>
+        ) : (<div></div>)}
         </div>
         <div className="form-group">
-          <AddTableEntry
-             hidden={ false }
-             disabled={ this.props.editMode }
-             onAddTableEntry={ addApplicationInstanceHost }
-          />
           <Table.PfProvider
             striped
             bordered
@@ -269,43 +315,96 @@ class ApplicationInstance extends React.Component {
             />
           </Table.PfProvider>
           <AddTableEntry
-             hidden={ false }
-             disabled={ this.props.editMode }
-             onAddTableEntry={ addApplicationInstanceHost }
+            hidden={ false }
+            disabled={ this.addTableEntryAllowed() }
+            onAddTableEntry={ addApplicationInstanceHost }
           />
+          <span style={{ marginLeft: 30 }}>
+            Ansible group vars 'all':
+            <Button
+              style={{ marginLeft: 10 }}
+              bsStyle="default"
+              disabled={ this.props.editMode }
+              onClick={() => openAnsibleParameterSelectionModal({
+                isAllGroup: true
+              })}
+            >
+              <span title={__("change ansible variables for 'all'")}>A</span>
+            </Button>
+          </span>
         </div>
         <div>
           <ForemanModal
-            id="AppInstanceParamSelection"
+            id="AppInstanceForemanParamSelection"
             dialogClassName="param_selection_modal"
-            title="Parameter specification for Application Instance"
+            title={__("Foreman Parameter specification for Application Instance")}
           >
             <ForemanModal.Header closeButton={false}>
               Parameter specification
             </ForemanModal.Header>
             {this.props.parametersData ? (
               <ParameterSelection
+                editModeCallback={ (hide) => changeParameterSelectionMode({ mode: hide })}
+                paramType={ PARAMETER_SELECTION_PARAM_TYPE_FOREMAN }
                 location={ location }
                 organization={ organization }
-                loadForemanDataUrl= { loadForemanDataUrl }
+                paramDataUrl= { foremanDataUrl }
                 data={ this.props.parametersData }
               />
             ) : (<span>Empty</span>)
             }
             <ForemanModal.Footer>
               <div>
-                <Button bsStyle="primary" onClick={() => closeParameterSelectionModal({ mode: 'save' })}>Save</Button>
-                <Button bsStyle="default" onClick={() => closeParameterSelectionModal({ mode: 'cancel' })}>Cancel</Button>
+                <Button bsStyle="primary" disabled={this.props.paramEditMode} onClick={() => closeForemanParameterSelectionModal({ mode: 'save' })}>{__("Save")}</Button>
+                <Button bsStyle="default" disabled={this.props.paramEditMode} onClick={() => closeForemanParameterSelectionModal({ mode: 'cancel' })}>{__("Cancel")}</Button>
               </div>
             </ForemanModal.Footer>
           </ForemanModal>
         </div>
+        <div>
+          <ForemanModal
+            id="AppInstanceAnsibleParamSelection"
+            dialogClassName="param_selection_modal"
+            title={__("Ansible group variables for Application Instance")}
+          >
+            <ForemanModal.Header closeButton={false}>
+              Parameter specification
+            </ForemanModal.Header>
+            {this.props.parametersData ? (
+              <ParameterSelection
+                editModeCallback={ (hide) => changeParameterSelectionMode({ mode: hide })}
+                paramType={ PARAMETER_SELECTION_PARAM_TYPE_ANSIBLE }
+                location={ location }
+                organization={ organization }
+                data={ this.props.parametersData }
+              />
+            ) : (<span>Empty</span>)
+            }
+            <ForemanModal.Footer>
+              <div>
+                <Button bsStyle="primary" disabled={this.props.paramEditMode} onClick={() => closeAnsibleParameterSelectionModal({ mode: 'save' })}>{__("Save")}</Button>
+                <Button bsStyle="default" disabled={this.props.paramEditMode} onClick={() => closeAnsibleParameterSelectionModal({ mode: 'cancel' })}>{__("Cancel")}</Button>
+              </div>
+            </ForemanModal.Footer>
+          </ForemanModal>
+        </div>
+        {validateResult == false ? (
+          <p style={{ paddingTop: 25 }}>
+            <pre>{ validateMsg }</pre>
+          </p>
+        ) : (<div></div>)}
         <RailsData
           key='applications_instance'
           view='app_instance'
           parameter='hosts'
           value={JSON.stringify(this.props.hosts)}
         />
+        <RailsData
+          key='applications_instance'
+          view='app_instance'
+          parameter='ansible_vars_all'
+          value={JSON.stringify(this.props.ansibleVarsAll)}
+        />
       </span>
     )};
 }
@@ -316,9 +415,11 @@ ApplicationInstance.defaultProps = {
   editMode: false,
   services: [],
   hosts: [],
+  ansibleVarsAll: [],
   parametersData: {},
   columns: [],
   editParamsOfRowId: null,
+  paramEditMode: false,
 }
 
 ApplicationInstance.propTypes = {
@@ -327,6 +428,8 @@ ApplicationInstance.propTypes = {
   services: PropTypes.array,
   appDefinition: PropTypes.object,
   columns: PropTypes.array,
+  hosts: PropTypes.array,
+  ansibleVarsAll: PropTypes.array,
   loadApplicationDefinition: PropTypes.func,
   addApplicationInstanceHost: PropTypes.func,
   deleteApplicationInstanceHost: PropTypes.func,
@@ -334,9 +437,13 @@ ApplicationInstance.propTypes = {
   confirmEditApplicationInstanceHost: PropTypes.func,
   cancelEditApplicationInstanceHost: PropTypes.func,
   changeEditApplicationInstanceHost: PropTypes.func,
-  openParameterSelectionModal: PropTypes.func,
-  closeParameterSelectionModal: PropTypes.func,
+  openForemanParameterSelectionModal: PropTypes.func,
+  closeForemanParameterSelectionModal: PropTypes.func,
+  openAnsibleParameterSelectionModal: PropTypes.func,
+  closeAnsibleParameterSelectionModal: PropTypes.func,
+  changeParameterSelectionMode: PropTypes.func,
   parametersData: PropTypes.object,
+  paramEditMode: PropTypes.bool,
 };
 
 export default ApplicationInstance;

data/webpack/components/ApplicationInstance/ApplicationInstanceActions.js

@@ -22,16 +22,20 @@ import {
   APPLICATION_INSTANCE_HOST_EDIT_CONFIRM,
   APPLICATION_INSTANCE_HOST_EDIT_CHANGE,
   APPLICATION_INSTANCE_HOST_EDIT_CANCEL,
-  APPLICATION_INSTANCE_PARAMETER_SELECTION_MODAL_OPEN,
-  APPLICATION_INSTANCE_PARAMETER_SELECTION_MODAL_CLOSE,
+  APPLICATION_INSTANCE_FOREMAN_PARAMETER_SELECTION_MODAL_OPEN,
+  APPLICATION_INSTANCE_FOREMAN_PARAMETER_SELECTION_MODAL_CLOSE,
+  APPLICATION_INSTANCE_ANSIBLE_PARAMETER_SELECTION_MODAL_OPEN,
+  APPLICATION_INSTANCE_ANSIBLE_PARAMETER_SELECTION_MODAL_CLOSE,
   APPLICATION_INSTANCE_LOAD_APPLICATION_DEFINITION_REQUEST,
   APPLICATION_INSTANCE_LOAD_APPLICATION_DEFINITION_SUCCESS,
   APPLICATION_INSTANCE_LOAD_APPLICATION_DEFINITION_FAILURE,
+  APPLICATION_INSTANCE_CHANGE_PARAMETER_SELECTION_MODE,
 } from './ApplicationInstanceConstants';
 
 export const initApplicationInstance = (
   appDefinition,
   hosts,
+  ansibleVarsAll,
   headerFormatter,
   inlineEditFormatter,
   inlineEditButtonsFormatter,
@@ -47,7 +51,7 @@ export const initApplicationInstance = (
         props: {
           index: 0,
           style: {
-            width: '20%'
+            width: '30%'
           }
         },
       },
@@ -63,7 +67,7 @@ export const initApplicationInstance = (
         props: {
           index: 1,
           style: {
-            width: '20%'
+            width: '30%'
           }
         },
       },
@@ -107,6 +111,7 @@ export const initApplicationInstance = (
 
   initialState.appDefinition = appDefinition;
   initialState.hosts = hosts;
+  initialState.ansibleVarsAll = ansibleVarsAll;
 
   dispatch({
     type: APPLICATION_INSTANCE_INIT,
@@ -184,27 +189,59 @@ export const changeEditApplicationInstanceHost = (value, additionalData) => ({
   },
 });
 
-export const openParameterSelectionModal = (additionalData) => dispatch => {
+export const openForemanParameterSelectionModal = (additionalData) => dispatch => {
   dispatch({
-    type: APPLICATION_INSTANCE_PARAMETER_SELECTION_MODAL_OPEN,
+    type: APPLICATION_INSTANCE_FOREMAN_PARAMETER_SELECTION_MODAL_OPEN,
     payload: {
       ...additionalData,
     }
   });
   dispatch(
-    setModalOpen({ id: 'AppInstanceParamSelection' })
+    setModalOpen({ id: 'AppInstanceForemanParamSelection' })
   );
 }
 
-export const closeParameterSelectionModal = (additionalData) => dispatch => {
+export const closeForemanParameterSelectionModal = (additionalData) => dispatch => {
   dispatch({
-    type: APPLICATION_INSTANCE_PARAMETER_SELECTION_MODAL_CLOSE,
+    type: APPLICATION_INSTANCE_FOREMAN_PARAMETER_SELECTION_MODAL_CLOSE,
     payload: {
       ...additionalData,
     }
   });
 
   dispatch(
-    setModalClosed({ id: 'AppInstanceParamSelection' })
+    setModalClosed({ id: 'AppInstanceForemanParamSelection' })
   );
 }
+
+export const openAnsibleParameterSelectionModal = (additionalData) => dispatch => {
+  dispatch({
+    type: APPLICATION_INSTANCE_ANSIBLE_PARAMETER_SELECTION_MODAL_OPEN,
+    payload: {
+      ...additionalData,
+    }
+  });
+  dispatch(
+    setModalOpen({ id: 'AppInstanceAnsibleParamSelection' })
+  );
+}
+
+export const closeAnsibleParameterSelectionModal = (additionalData) => dispatch => {
+  dispatch({
+    type: APPLICATION_INSTANCE_ANSIBLE_PARAMETER_SELECTION_MODAL_CLOSE,
+    payload: {
+      ...additionalData,
+    }
+  });
+
+  dispatch(
+    setModalClosed({ id: 'AppInstanceAnsibleParamSelection' })
+  );
+}
+
+export const changeParameterSelectionMode = (additionalData) => ({
+  type: APPLICATION_INSTANCE_CHANGE_PARAMETER_SELECTION_MODE,
+  payload: {
+    ...additionalData,
+  },
+})