foreman_acd 0.7.0 → 0.9.0

data/webpack/components/ApplicationInstance/ApplicationInstance.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import {
   Icon,
   Button,
+  MessageDialog,
 } from 'patternfly-react';
 import * as resolve from 'table-resolver';
 import ForemanModal from 'foremanReact/components/ForemanModal';
@@ -12,6 +13,7 @@ import {
 } from 'foremanReact/common/I18n';
 import Select from 'foremanReact/components/common/forms/Select';
 import ParameterSelection from '../ParameterSelection';
+import ExistingHostSelection from '../ExistingHostSelection';
 import AddTableEntry from '../common/AddTableEntry';
 import DeleteTableEntry from '../common/DeleteTableEntry';
 import RailsData from '../common/RailsData';
@@ -41,7 +43,7 @@ class ApplicationInstance extends React.Component {
     return (rowData.backup !== undefined);
   }
 
-  addTableEntryAllowed() {
+  changeDataAllowed() {
     return this.props.editMode || this.props.appDefinition.id == ''
   }
 
@@ -105,29 +107,36 @@ class ApplicationInstance extends React.Component {
       loadApplicationDefinition(appDefinition.id, { url: appDefinitionUrl });
     }
 
+    const already_deployed_msg = __("This is an already deployed host. Changing the parameters is not possible!");
+
     const inlineEditButtonsFormatter = inlineEditFormatterFactory({
       isEditing: additionalData => this.props.editMode,
       renderValue: (value, additionalData) => (
         <td style={{ padding: '2px' }}>
+          { additionalData.rowData.isExistingHost == true ? (
+            <Icon style={{marginRight: 8, marginLeft: 2}} type="pf" name="info" title={already_deployed_msg} />
+          ) : (<span></span>)}
           <Button
             bsStyle="default"
             onClick={() => activateEditApplicationInstanceHost(additionalData)}
           >
-            <Icon type="pf" name="edit" title={__("edit entry")} />
+            <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>
+          { additionalData.rowData.isExistingHost == false ? (
+            <Button
+              bsStyle="default"
+              onClick={() => openForemanParameterSelectionModal(additionalData)}
+            >
+              <Icon type="pf" name="settings" title={__("Change parameters")} />
+            </Button>
+          ) : (<span></span>)}
           &nbsp;
           <Button
             bsStyle="default"
             onClick={() => openAnsibleParameterSelectionModal(additionalData)}
           >
-            <span title={__("change ansible variables")}>A</span>
+            <span title={__("Change ansible variables")}>A</span>
           </Button>
           &nbsp;
           <DeleteTableEntry
@@ -140,13 +149,18 @@ class ApplicationInstance extends React.Component {
       ),
       renderEdit: (value, additionalData) => (
         <td style={{ padding: '2px' }}>
+          { additionalData.rowData.isExistingHost == true ? (
+            <Icon style={{marginRight: 8, marginLeft: 2}} type="pf" name="info" title={already_deployed_msg} />
+          ) : (<span></span>)}
           <Button bsStyle="default" disabled>
             <Icon type="pf" name={__("edit")} />
           </Button>
           &nbsp;
-          <Button bsStyle="default" disabled>
-            <Icon type="pf" name={__("settings")} />
-          </Button>
+          { additionalData.rowData.isExistingHost == false ? (
+            <Button bsStyle="default" disabled>
+              <Icon type="pf" name={__("settings")} />
+            </Button>
+          ) : (<span></span>)}
           &nbsp;
           <Button bsStyle="default" disabled>
             <span>A</span>
@@ -239,6 +253,7 @@ class ApplicationInstance extends React.Component {
   render() {
     const {
       data: { mode, applications, organization, location, foremanDataUrl, appDefinitionUrl },
+      showAlertModal, alertModalText, alertModalTitle, closeAlertModal,
       appDefinition,
       services,
       hosts,
@@ -249,6 +264,8 @@ class ApplicationInstance extends React.Component {
       closeForemanParameterSelectionModal,
       openAnsibleParameterSelectionModal,
       closeAnsibleParameterSelectionModal,
+      openAddExistingHostsModal,
+      closeAddExistingHostsModal,
       changeParameterSelectionMode,
       loadApplicationDefinition,
     } = this.props;
@@ -263,7 +280,17 @@ class ApplicationInstance extends React.Component {
 
     return (
       <span>
-        <div class="service-counter">
+        <MessageDialog
+          show={showAlertModal}
+          onHide={closeAlertModal}
+          primaryAction={closeAlertModal}
+          primaryActionButtonContent={__('OK')}
+          primaryActionButtonBsStyle={"danger"}
+          icon={<Icon type="pf" name="error-circle-o" />}
+          title={alertModalTitle}
+          primaryContent={alertModalText}
+        />
+        <div className="service-counter">
           <ServiceCounter
             title="Service counts"
             serviceList={ services }
@@ -273,6 +300,7 @@ class ApplicationInstance extends React.Component {
         <div>
           <AppDefinitionSelector
             label="Application Definition"
+            hidden={ false }
             editable={ mode == 'newInstance' }
             viewText={ appDefinition.name }
             options={ applications }
@@ -281,9 +309,9 @@ class ApplicationInstance extends React.Component {
             additionalData={{url: appDefinitionUrl}}
           />
           {appDefinition.id == '' ? (
-          <p style={{ paddingTop: 25 }}>
+          <div style={{ paddingTop: 25 }}>
             <pre>{ "App Definition can't be blank" }</pre>
-          </p>
+          </div>
         ) : (<div></div>)}
         </div>
         <div className="form-group">
@@ -309,27 +337,38 @@ class ApplicationInstance extends React.Component {
                 role: 'row',
                 isEditing: () => this.isEditing({ rowData }),
                 onCancel: () => cancelEditApplicationInstanceHost({ rowData, rowIndex }),
-                onConfirm: () => confirmEditApplicationInstanceHost({ rowData, rowIndex }),
+                onConfirm: () => confirmEditApplicationInstanceHost({ rowData, rowIndex, appDefinition }),
                 last: rowIndex === services.length - 1
               })}
             />
           </Table.PfProvider>
           <AddTableEntry
             hidden={ false }
-            disabled={ this.addTableEntryAllowed() }
+            disabled={ this.changeDataAllowed() }
             onAddTableEntry={ addApplicationInstanceHost }
           />
+          <span style={{ marginLeft: 10 }}>
+            <Button
+              bsStyle="default"
+              disabled={ this.changeDataAllowed() }
+              onClick={() => openAddExistingHostsModal({
+                isAllGroup: true
+              })}
+            >
+              <Icon title={__("Add existing hosts")} type="pf" name="server" />
+            </Button>
+          </span>
           <span style={{ marginLeft: 30 }}>
             Ansible group vars 'all':
             <Button
               style={{ marginLeft: 10 }}
               bsStyle="default"
-              disabled={ this.props.editMode }
+              disabled={ this.changeDataAllowed() }
               onClick={() => openAnsibleParameterSelectionModal({
                 isAllGroup: true
               })}
             >
-              <span title={__("change ansible variables for 'all'")}>A</span>
+              <span title={__("Change ansible variables for 'all'")}>A</span>
             </Button>
           </span>
         </div>
@@ -340,7 +379,7 @@ class ApplicationInstance extends React.Component {
             title={__("Foreman Parameter specification for Application Instance")}
           >
             <ForemanModal.Header closeButton={false}>
-              Parameter specification
+              {__("Parameter specification")}
             </ForemanModal.Header>
             {this.props.parametersData ? (
               <ParameterSelection
@@ -368,7 +407,7 @@ class ApplicationInstance extends React.Component {
             title={__("Ansible group variables for Application Instance")}
           >
             <ForemanModal.Header closeButton={false}>
-              Parameter specification
+              {__("Parameter specification")}
             </ForemanModal.Header>
             {this.props.parametersData ? (
               <ParameterSelection
@@ -388,19 +427,42 @@ class ApplicationInstance extends React.Component {
             </ForemanModal.Footer>
           </ForemanModal>
         </div>
+        <div>
+          <ForemanModal
+            id="AppInstanceAddExistingHosts"
+            dialogClassName="add_existing_hosts_modal"
+            title={__("Add existing hosts to an Application Instance")}
+          >
+            <ForemanModal.Header closeButton={false}>
+              {__("Existing hosts selection")}
+            </ForemanModal.Header>
+            <ExistingHostSelection
+              location={ location }
+              organization={ organization }
+              services={ services }
+              allHosts={ this.props.hosts }
+            />
+            <ForemanModal.Footer>
+              <div>
+                <Button bsStyle="primary" disabled={this.props.paramEditMode} onClick={() => closeAddExistingHostsModal({ mode: 'save' })}>{__("Save")}</Button>
+                <Button bsStyle="default" disabled={this.props.paramEditMode} onClick={() => closeAddExistingHostsModal({ mode: 'cancel' })}>{__("Cancel")}</Button>
+              </div>
+            </ForemanModal.Footer>
+          </ForemanModal>
+        </div>
         {validateResult == false ? (
-          <p style={{ paddingTop: 25 }}>
+          <div style={{ paddingTop: 25 }}>
             <pre>{ validateMsg }</pre>
-          </p>
+          </div>
         ) : (<div></div>)}
         <RailsData
-          key='applications_instance'
+          key='application_instance_hosts_data'
           view='app_instance'
           parameter='hosts'
           value={JSON.stringify(this.props.hosts)}
         />
         <RailsData
-          key='applications_instance'
+          key='application_instance_ansible_data'
           view='app_instance'
           parameter='ansible_vars_all'
           value={JSON.stringify(this.props.ansibleVarsAll)}
@@ -411,6 +473,9 @@ class ApplicationInstance extends React.Component {
 
 ApplicationInstance.defaultProps = {
   error: {},
+  showAlertModal: false,
+  alertModalText: '',
+  alertModalTitle: '',
   appDefinition: { "id": '', "name": '' },
   editMode: false,
   services: [],
@@ -424,12 +489,16 @@ ApplicationInstance.defaultProps = {
 
 ApplicationInstance.propTypes = {
   initApplicationInstance: PropTypes.func,
+  showAlertModal: PropTypes.bool,
+  alertModalText: PropTypes.string,
+  alertModalTitle: PropTypes.string,
   editMode: PropTypes.bool.isRequired,
   services: PropTypes.array,
   appDefinition: PropTypes.object,
   columns: PropTypes.array,
   hosts: PropTypes.array,
   ansibleVarsAll: PropTypes.array,
+  closeAlertModal: PropTypes.func,
   loadApplicationDefinition: PropTypes.func,
   addApplicationInstanceHost: PropTypes.func,
   deleteApplicationInstanceHost: PropTypes.func,
@@ -441,6 +510,8 @@ ApplicationInstance.propTypes = {
   closeForemanParameterSelectionModal: PropTypes.func,
   openAnsibleParameterSelectionModal: PropTypes.func,
   closeAnsibleParameterSelectionModal: PropTypes.func,
+  openAddExistingHostsModal: PropTypes.func,
+  closeAddExistingHostsModal: PropTypes.func,
   changeParameterSelectionMode: PropTypes.func,
   parametersData: PropTypes.object,
   paramEditMode: PropTypes.bool,

data/webpack/components/ApplicationInstance/ApplicationInstanceActions.js

@@ -16,16 +16,20 @@ import {
 
 import {
   APPLICATION_INSTANCE_INIT,
+  APPLICATION_INSTANCE_CLOSE_ALERT_MODAL,
   APPLICATION_INSTANCE_HOST_DELETE,
   APPLICATION_INSTANCE_HOST_ADD,
   APPLICATION_INSTANCE_HOST_EDIT_ACTIVATE,
   APPLICATION_INSTANCE_HOST_EDIT_CONFIRM,
   APPLICATION_INSTANCE_HOST_EDIT_CHANGE,
   APPLICATION_INSTANCE_HOST_EDIT_CANCEL,
+  APPLICATION_INSTANCE_HOST_EDIT_ERROR,
   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_ADD_EXISTING_HOSTS_MODAL_OPEN,
+  APPLICATION_INSTANCE_ADD_EXISTING_HOSTS_MODAL_CLOSE,
   APPLICATION_INSTANCE_LOAD_APPLICATION_DEFINITION_REQUEST,
   APPLICATION_INSTANCE_LOAD_APPLICATION_DEFINITION_SUCCESS,
   APPLICATION_INSTANCE_LOAD_APPLICATION_DEFINITION_FAILURE,
@@ -127,6 +131,11 @@ const errorHandler = (msg, err) => {
   return { type: msg, payload: { error } };
 };
 
+export const closeAlertModal = () => ({
+  type: APPLICATION_INSTANCE_CLOSE_ALERT_MODAL,
+  payload: {}
+});
+
 export const loadApplicationDefinition = (
   applicationDefinitionId,
   additionalData,
@@ -167,12 +176,84 @@ export const activateEditApplicationInstanceHost = (additionalData) => ({
   },
 });
 
-export const confirmEditApplicationInstanceHost = (rowData) => ({
-  type: APPLICATION_INSTANCE_HOST_EDIT_CONFIRM,
-  payload: {
-    ...rowData,
-  },
-});
+export const confirmEditApplicationInstanceHost = (
+  allData
+) => async(dispatch) => {
+
+  // Host name can not be empty
+
+  if (allData.rowData.hostname == '') {
+    dispatch({
+      type: APPLICATION_INSTANCE_HOST_EDIT_ERROR,
+      payload: __("Every host needs to have a valid name"),
+    });
+    return;
+  }
+
+  // Host name can only have specific characters
+
+  const hostname = allData.rowData.hostname.toLowerCase();
+  const hostnameRegex = /^[0-9a-z]([0-9a-z\-]{0,61}[0-9a-z])$/;
+
+  if (hostname.match(hostnameRegex) == undefined) {
+    dispatch({
+      type: APPLICATION_INSTANCE_HOST_EDIT_ERROR,
+      payload: __("The hostname uses not allowed characters. See https://en.wikipedia.org/wiki/Hostname#Syntax for more details."),
+    });
+    return;
+  }
+
+  // Service can not be empty
+
+  if (allData.rowData.service == '') {
+    dispatch({
+      type: APPLICATION_INSTANCE_HOST_EDIT_ERROR,
+      payload: __("Every host needs to be assigned to a service."),
+    });
+    return;
+  }
+
+  // Validation if host name is already used (only for new host entrys)
+
+  const url = '/acd/ui_acd_validate_hostname'
+  const validationData = {};
+
+  validationData['appDefId'] = allData.appDefinition.id;
+  validationData['serviceId'] = allData.rowData.service;
+  validationData['hostname'] = allData.rowData.hostname;
+
+  if (allData.rowData.newEntry === true) {
+    try {
+      const response = await api.get(url, {}, validationData);
+
+      if (response.data.result === true) {
+        dispatch({
+          type: APPLICATION_INSTANCE_HOST_EDIT_CONFIRM,
+          payload: {
+            ...allData,
+          }
+        });
+      } else {
+        dispatch({
+          type: APPLICATION_INSTANCE_HOST_EDIT_ERROR,
+          payload: __('Hostname \''+ allData.rowData.hostname +'\' is already used. This check also includes hosts outside this application instance.'),
+        });
+      }
+    } catch (error) {
+      dispatch({
+        type: APPLICATION_INSTANCE_HOST_EDIT_ERROR,
+        payload: __('Error during validation if hostname is already used.'),
+      });
+    }
+  } else {
+    dispatch({
+      type: APPLICATION_INSTANCE_HOST_EDIT_CONFIRM,
+      payload: {
+        ...allData,
+      }
+    });
+  }
+};
 
 export const cancelEditApplicationInstanceHost = (rowData) => ({
   type: APPLICATION_INSTANCE_HOST_EDIT_CANCEL,
@@ -239,6 +320,31 @@ export const closeAnsibleParameterSelectionModal = (additionalData) => dispatch
   );
 }
 
+export const openAddExistingHostsModal = (additionalData) => dispatch => {
+  dispatch({
+    type: APPLICATION_INSTANCE_ADD_EXISTING_HOSTS_MODAL_OPEN,
+    payload: {
+      ...additionalData,
+    }
+  });
+  dispatch(
+    setModalOpen({ id: 'AppInstanceAddExistingHosts' })
+  );
+}
+
+export const closeAddExistingHostsModal = (additionalData) => dispatch => {
+  dispatch({
+    type: APPLICATION_INSTANCE_ADD_EXISTING_HOSTS_MODAL_CLOSE,
+    payload: {
+      ...additionalData,
+    }
+  });
+
+  dispatch(
+    setModalClosed({ id: 'AppInstanceAddExistingHosts' })
+  );
+}
+
 export const changeParameterSelectionMode = (additionalData) => ({
   type: APPLICATION_INSTANCE_CHANGE_PARAMETER_SELECTION_MODE,
   payload: {

data/webpack/components/ApplicationInstance/ApplicationInstanceConstants.js

@@ -1,4 +1,5 @@
 export const APPLICATION_INSTANCE_INIT = 'APPLICATION_INSTANCE_INIT';
+export const APPLICATION_INSTANCE_CLOSE_ALERT_MODAL = 'APPLICATION_INSTANCE_CLOSE_ALERT_MODAL';
 export const APPLICATION_INSTANCE_LOAD_APPLICATION_DEFINITION_REQUEST = 'APPLICATION_INSTANCE_LOAD_APPLICATION_DEFINITION_REQUEST';
 export const APPLICATION_INSTANCE_LOAD_APPLICATION_DEFINITION_SUCCESS = 'APPLICATION_INSTANCE_LOAD_APPLICATION_DEFINITION_SUCCESS';
 export const APPLICATION_INSTANCE_LOAD_APPLICATION_DEFINITION_FAILURE = 'APPLICATION_INSTANCE_LOAD_APPLICATION_DEFINITION_FAILURE';
@@ -8,8 +9,11 @@ export const APPLICATION_INSTANCE_HOST_EDIT_ACTIVATE = 'APPLICATION_INSTANCE_HOS
 export const APPLICATION_INSTANCE_HOST_EDIT_CONFIRM = 'APPLICATION_INSTANCE_HOST_EDIT_CONFIRM';
 export const APPLICATION_INSTANCE_HOST_EDIT_CHANGE = 'APPLICATION_INSTANCE_HOST_EDIT_CHANGE';
 export const APPLICATION_INSTANCE_HOST_EDIT_CANCEL = 'APPLICATION_INSTANCE_HOST_EDIT_CANCEL';
+export const APPLICATION_INSTANCE_HOST_EDIT_ERROR = 'APPLICATION_INSTANCE_HOST_EDIT_ERROR';
 export const APPLICATION_INSTANCE_FOREMAN_PARAMETER_SELECTION_MODAL_OPEN = 'APPLICATION_INSTANCE_FOREMAN_PARAMETER_SELECTION_MODAL_OPEN';
 export const APPLICATION_INSTANCE_FOREMAN_PARAMETER_SELECTION_MODAL_CLOSE = 'APPLICATION_INSTANCE_FOREMAN_PARAMETER_SELECTION_MODAL_CLOSE';
 export const APPLICATION_INSTANCE_ANSIBLE_PARAMETER_SELECTION_MODAL_OPEN = 'APPLICATION_INSTANCE_ANSIBLE_PARAMETER_SELECTION_MODAL_OPEN';
 export const APPLICATION_INSTANCE_ANSIBLE_PARAMETER_SELECTION_MODAL_CLOSE = 'APPLICATION_INSTANCE_ANSIBLE_PARAMETER_SELECTION_MODAL_CLOSE';
+export const APPLICATION_INSTANCE_ADD_EXISTING_HOSTS_MODAL_OPEN = 'APPLICATION_INSTANCE_ADD_EXISTING_HOSTS_MODAL_OPEN';
+export const APPLICATION_INSTANCE_ADD_EXISTING_HOSTS_MODAL_CLOSE = 'APPLICATION_INSTANCE_ADD_EXISTING_HOSTS_MODAL_CLOSE';
 export const APPLICATION_INSTANCE_CHANGE_PARAMETER_SELECTION_MODE = 'APPLICATION_INSTANCE_CHANGE_PARAMETER_SELECTION_MODE';

data/webpack/components/ApplicationInstance/ApplicationInstanceHelper.js

@@ -0,0 +1,15 @@
+
+function calculateServiceUsage(hostServiceId, services) {
+  const service = services.find(serv => serv['id'] == hostServiceId);
+  if ('currentCount' in service) {
+    service['currentCount'] += 1;
+  } else {
+    service['currentCount'] = 1;
+  }
+
+  return services;
+}
+
+export {
+  calculateServiceUsage,
+};

data/webpack/components/ApplicationInstance/ApplicationInstanceReducer.js

@@ -1,4 +1,6 @@
 import Immutable from 'seamless-immutable';
+import { translate as __ } from 'foremanReact/common/I18n';
+import { calculateServiceUsage } from './ApplicationInstanceHelper';
 
 import {
   cloneDeep,
@@ -8,6 +10,7 @@ import {
 
 import {
   APPLICATION_INSTANCE_INIT,
+  APPLICATION_INSTANCE_CLOSE_ALERT_MODAL,
   APPLICATION_INSTANCE_LOAD_APPLICATION_DEFINITION_FAILURE,
   APPLICATION_INSTANCE_LOAD_APPLICATION_DEFINITION_REQUEST,
   APPLICATION_INSTANCE_LOAD_APPLICATION_DEFINITION_SUCCESS,
@@ -17,10 +20,13 @@ import {
   APPLICATION_INSTANCE_HOST_EDIT_CONFIRM,
   APPLICATION_INSTANCE_HOST_EDIT_CHANGE,
   APPLICATION_INSTANCE_HOST_EDIT_CANCEL,
+  APPLICATION_INSTANCE_HOST_EDIT_ERROR,
   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_ADD_EXISTING_HOSTS_MODAL_OPEN,
+  APPLICATION_INSTANCE_ADD_EXISTING_HOSTS_MODAL_CLOSE,
   APPLICATION_INSTANCE_CHANGE_PARAMETER_SELECTION_MODE,
 } from './ApplicationInstanceConstants';
 
@@ -41,7 +47,15 @@ const applicationInstanceConf = (state = initialState, action) => {
     case APPLICATION_INSTANCE_INIT: {
       return state.merge(payload);
     }
+    case APPLICATION_INSTANCE_CLOSE_ALERT_MODAL: {
+      return state.merge({
+        showAlertModal: false,
+        alertModalTitle: '',
+        alertModalText: '',
+      });
+    }
    case APPLICATION_INSTANCE_LOAD_APPLICATION_DEFINITION_FAILURE: {
+      console.log("Error while loading application definition data: "+ payload.error);
       return state.merge({ error: payload.error, loading: false });
     }
     case APPLICATION_INSTANCE_LOAD_APPLICATION_DEFINITION_REQUEST: {
@@ -87,7 +101,7 @@ const applicationInstanceConf = (state = initialState, action) => {
         index = Math.max(...hosts.map(e => e.id)) + 1;
       }
 
-      const newRow = {id: index, hostname: "", description: '', service: '', foremanParameters: [], ansibleParameters: [], newEntry: true };
+      const newRow = {id: index, hostname: "", description: '', service: '', isExistingHost: false, foremanParameters: [], ansibleParameters: [], newEntry: true };
       newRow.backup = cloneDeep(newRow)
       hosts.push(newRow);
 
@@ -125,48 +139,28 @@ const applicationInstanceConf = (state = initialState, action) => {
     case APPLICATION_INSTANCE_HOST_EDIT_CONFIRM: {
       const hosts = cloneDeep(state.hosts);
       const index = findIndex(hosts, { id: payload.rowData.id });
-      const services = cloneDeep(state.services);
+      let services = cloneDeep(state.services);
 
       const thisHost = hosts[index];
 
-      if (thisHost.hostname == '') {
-        window.alert("Every host needs to have a valid name");
-        return state;
-      }
-
       // hostnames are lower case
       thisHost.hostname = thisHost.hostname.toLowerCase();
 
-      const hostnameRegex = /^[0-9a-z]([0-9a-z\-]{0,61}[0-9a-z])$/;
-
-      if (thisHost.hostname.match(hostnameRegex) == undefined) {
-        window.alert("The hostname uses not allowed characters. See https://en.wikipedia.org/wiki/Hostname#Syntax for more details.")
-        return state;
-      }
-
-      if (thisHost.service == '') {
-        window.alert("Every host needs to be assigned to a service.");
-        return state;
-      }
-
       if (state.hosts.filter(v => v.hostname === thisHost.hostname && v.id != thisHost.id).length > 0) {
-        window.alert("Host name already used in this Application Instance. Please make sure that every host name is unique.");
-        return state;
+        return state.merge({
+          showAlertModal: true,
+          alertModalTitle: __("Error"),
+          alertModalText: __("Host name already used in this Application Instance. Please make sure that every host name is unique."),
+        });
       }
 
       // Initialize the new Instance with the parameters of the Application Definition.
       if (thisHost.newEntry === true) {
-          const selectedService = state.services.filter(entry => entry.id == payload.rowData.service)[0];
+          const hostServiceId = Number(thisHost.service);
+          const selectedService = services.filter(entry => entry.id == hostServiceId)[0];
           hosts[index].foremanParameters = selectedService.foremanParameters;
           hosts[index].ansibleParameters = selectedService.ansibleParameters;
-
-          const hostServiceId = Number(thisHost.service);
-          const service = services.find(serv => serv['id'] == hostServiceId);
-          if ('currentCount' in service) {
-            service['currentCount'] += 1;
-          } else {
-            service['currentCount'] = 1;
-          }
+          services = calculateServiceUsage(hostServiceId, services);
       }
 
       delete hosts[index].backup;
@@ -202,6 +196,13 @@ const applicationInstanceConf = (state = initialState, action) => {
         hosts: hosts
       });
     }
+    case APPLICATION_INSTANCE_HOST_EDIT_ERROR: {
+      return state.merge({
+        showAlertModal: true,
+        alertModalTitle: __("Error"),
+        alertModalText: payload,
+      });
+    }
     case APPLICATION_INSTANCE_FOREMAN_PARAMETER_SELECTION_MODAL_OPEN: {
       let parametersData = {};
 
@@ -298,6 +299,46 @@ const applicationInstanceConf = (state = initialState, action) => {
       }
       return state.merge(newState);
     }
+    case APPLICATION_INSTANCE_ADD_EXISTING_HOSTS_MODAL_OPEN: {
+    }
+    case APPLICATION_INSTANCE_ADD_EXISTING_HOSTS_MODAL_CLOSE: {
+      if (payload.mode == 'save') {
+        let newState;
+        let hosts = [];
+        let index = 1;
+        let services = cloneDeep(state.services);
+
+        if ('hosts' in state && state.hosts !== undefined && state.hosts.length > 0) {
+          hosts = cloneDeep(state.hosts);
+          index = Math.max(...hosts.map(e => e.id));
+        }
+
+        payload.selectedHosts.forEach(host => {
+          if ((state.hosts == undefined) || (state.hosts.find(h => h.hostname == host.hostname) == undefined)) {
+            index += 1;
+            const selectedService = services.filter(entry => entry.id == host.serviceId)[0];
+            const newRow = {
+              id: index,
+              hostname: host.hostname,
+              description: '',
+              service: host.serviceId,
+              isExistingHost: true,
+              foremanParameters: [], // we will never set this because we don't want to change a already existing host.
+              ansibleParameters: selectedService.ansibleParameters,
+            }
+            hosts.push(newRow);
+            services = calculateServiceUsage(host.serviceId, services);
+          }
+        });
+
+        return state.merge({
+          hosts: hosts,
+          services, services
+        });
+      } else {
+        return state;
+      }
+    }
     case APPLICATION_INSTANCE_CHANGE_PARAMETER_SELECTION_MODE: {
       return state.merge({ paramEditMode: payload.mode });
     }

data/webpack/components/ApplicationInstance/ApplicationInstanceSelectors.js

@@ -1,5 +1,8 @@
 const applicationInstanceConf = state => state.foremanAcd.applicationInstanceConf;
 
+export const selectShowAlertModal = state => applicationInstanceConf(state).showAlertModal;
+export const selectAlertModalText = state => applicationInstanceConf(state).alertModalText;
+export const selectAlertModalTitle = state => applicationInstanceConf(state).alertModalTitle;
 export const selectEditMode = state => applicationInstanceConf(state).editMode;
 export const selectAppDefinition = state => applicationInstanceConf(state).appDefinition;
 export const selectHosts = state => applicationInstanceConf(state).hosts;

data/webpack/components/ApplicationInstance/__fixtures__/applicationInstanceReducer.fixtures.js

@@ -20,6 +20,8 @@ export const editState = Immutable(editClone);
 
 // Payload Data
 export const initApplicationInstancePayload = applicationInstanceConfData_1;
+
+export const closeAlertModalPayload = { };
 export const addHostPayload = { };
 export const deleteHostPayload = {
   rowData: {

data/webpack/components/ApplicationInstance/__tests__/ApplicationInstance.test.js

@@ -13,6 +13,7 @@ const fixtures = {
       hosts: [],
       ansibleVarsAll: [],
     },
+    closeAlertModal: noop,
     loadApplicationDefinition: noop,
     initApplicationInstance: noop,
     addApplicationInstanceHost: noop,