foreman_acd 0.0.5 → 0.5.0

data/webpack/components/ApplicationDefinition/ApplicationDefinitionConstants.js

@@ -0,0 +1,14 @@
+export const APPLICATION_DEFINITION_INIT = 'INIT_APPLICATION_DEFINITION_INIT';
+export const APPLICATION_DEFINITION_LOAD_ANSIBLE_DATA_REQUEST = 'APPLICATION_DEFINITION_LOAD_ANSIBLE_DATA_REQUEST';
+export const APPLICATION_DEFINITION_LOAD_ANSIBLE_DATA_SUCCESS = 'APPLICATION_DEFINITION_LOAD_ANSIBLE_DATA_SUCCESS';
+export const APPLICATION_DEFINITION_LOAD_ANSIBLE_DATA_FAILURE = 'APPLICATION_DEFINITION_LOAD_ANSIBLE_DATA_FAILURE';
+export const APPLICATION_DEFINITION_SERVICE_DELETE = 'APPLICATION_DEFINITION_SERVICE_DELETE';
+export const APPLICATION_DEFINITION_SERVICE_ADD = 'APPLICATION_DEFINITION_SERVICE_ADD';
+export const APPLICATION_DEFINITION_SERVICE_EDIT_ACTIVATE = 'APPLICATION_DEFINITION_SERVICE_EDIT_ACTIVATE';
+export const APPLICATION_DEFINITION_SERVICE_EDIT_CONFIRM = 'APPLICATION_DEFINITION_SERVICE_EDIT_CONFIRM';
+export const APPLICATION_DEFINITION_SERVICE_EDIT_CHANGE = 'APPLICATION_DEFINITION_SERVICE_EDIT_CHANGE';
+export const APPLICATION_DEFINITION_SERVICE_EDIT_CANCEL = 'APPLICATION_DEFINITION_SERVICE_EDIT_CANCEL';
+export const APPLICATION_DEFINITION_FOREMAN_PARAMETER_SELECTION_MODAL_OPEN = 'APPLICATION_DEFINITION_FOREMAN_PARAMETER_SELECTION_MODAL_OPEN';
+export const APPLICATION_DEFINITION_FOREMAN_PARAMETER_SELECTION_MODAL_CLOSE = 'APPLICATION_DEFINITION_FOREMAN_PARAMETER_SELECTION_MODAL_CLOSE';
+export const APPLICATION_DEFINITION_ANSIBLE_PARAMETER_SELECTION_MODAL_OPEN = 'APPLICATION_DEFINITION_ANSIBLE_PARAMETER_SELECTION_MODAL_OPEN';
+export const APPLICATION_DEFINITION_ANSIBLE_PARAMETER_SELECTION_MODAL_CLOSE = 'APPLICATION_DEFINITION_ANSIBLE_PARAMETER_SELECTION_MODAL_CLOSE';

data/webpack/components/ApplicationDefinition/ApplicationDefinitionHelper.js

@@ -0,0 +1,26 @@
+export function transformAnsiblePlaybook(playbook) {
+
+  const ansiblePlaybook = new Object;
+  ansiblePlaybook.id = playbook.id;
+  ansiblePlaybook.name = playbook.name;
+  ansiblePlaybook.groups = {};
+
+  if (playbook.hasOwnProperty('groups')) {
+    Object.entries(playbook.groups).forEach(([group_name,group_vars]) => {
+      ansiblePlaybook.groups[group_name] = [];
+
+      let id=0;
+      Object.entries(group_vars).forEach(([var_name,var_value]) => {
+        let entry = {
+          id: id,
+          name: var_name,
+          value: var_value
+        }
+        ansiblePlaybook.groups[group_name].push(entry);
+        id += 1;
+      });
+    });
+  }
+
+  return ansiblePlaybook;
+}

data/webpack/components/ApplicationDefinition/ApplicationDefinitionReducer.js

@@ -0,0 +1,243 @@
+import Immutable from 'seamless-immutable';
+
+import {
+  cloneDeep,
+  findIndex,
+  findLastIndex,
+} from 'lodash';
+
+import {
+  APPLICATION_DEFINITION_INIT,
+  APPLICATION_DEFINITION_LOAD_ANSIBLE_DATA_REQUEST,
+  APPLICATION_DEFINITION_LOAD_ANSIBLE_DATA_SUCCESS,
+  APPLICATION_DEFINITION_LOAD_ANSIBLE_DATA_FAILURE,
+  APPLICATION_DEFINITION_SERVICE_DELETE,
+  APPLICATION_DEFINITION_SERVICE_ADD,
+  APPLICATION_DEFINITION_SERVICE_EDIT_ACTIVATE,
+  APPLICATION_DEFINITION_SERVICE_EDIT_CONFIRM,
+  APPLICATION_DEFINITION_SERVICE_EDIT_CHANGE,
+  APPLICATION_DEFINITION_SERVICE_EDIT_CANCEL,
+  APPLICATION_DEFINITION_FOREMAN_PARAMETER_SELECTION_MODAL_OPEN,
+  APPLICATION_DEFINITION_FOREMAN_PARAMETER_SELECTION_MODAL_CLOSE,
+  APPLICATION_DEFINITION_ANSIBLE_PARAMETER_SELECTION_MODAL_OPEN,
+  APPLICATION_DEFINITION_ANSIBLE_PARAMETER_SELECTION_MODAL_CLOSE,
+} from './ApplicationDefinitionConstants';
+
+import {
+  PARAMETER_SELECTION_PARAM_TYPE_FOREMAN,
+  PARAMETER_SELECTION_PARAM_TYPE_ANSIBLE,
+} from '../ParameterSelection/ParameterSelectionConstants';
+
+import {
+  transformAnsiblePlaybook,
+} from './ApplicationDefinitionHelper';
+
+export const initialState = Immutable({
+  name: false,
+  error: { errorMsg: '', status: '', statusText: '' },
+});
+
+const applicationDefinitionConf = (state = initialState, action) => {
+  const { payload } = action;
+
+  switch (action.type) {
+    case APPLICATION_DEFINITION_INIT: {
+      return state.merge(payload);
+    }
+
+   case APPLICATION_DEFINITION_LOAD_ANSIBLE_DATA_FAILURE: {
+      return state.merge({ error: payload.error, loading: false });
+    }
+    case APPLICATION_DEFINITION_LOAD_ANSIBLE_DATA_REQUEST: {
+      return state.set('loading', true);
+    }
+    case APPLICATION_DEFINITION_LOAD_ANSIBLE_DATA_SUCCESS: {
+      let newState = {};
+      let allVars = [];
+
+      const ansiblePlaybook = transformAnsiblePlaybook(payload);
+
+      if (ansiblePlaybook.hasOwnProperty('groups')) {
+        allVars = ansiblePlaybook.groups['all']
+      }
+
+      newState = {
+        ansiblePlaybook: ansiblePlaybook,
+        ansibleVarsAll: allVars
+      }
+
+      return state.merge(newState);
+    }
+    case APPLICATION_DEFINITION_SERVICE_ADD: {
+      let services = [];
+      let index = 1;
+
+      if ('services' in state && state.services !== undefined && state.services.length > 0) {
+        services = cloneDeep(state.services);
+        index = Math.max(...services.map(e => e.id)) + 1;
+      }
+
+      const newRow = { id: index, name: "", description: '', hostgroup: '',
+                       ansibleGroup: '', minCount: '', maxCount: '',
+                       foremanParameters: [], ansibleParameters: [], newEntry: true };
+      newRow.backup = cloneDeep(newRow)
+      services.push(newRow);
+
+      return state.merge({
+        editMode: true,
+        services: services
+      });
+    }
+    case APPLICATION_DEFINITION_SERVICE_DELETE: {
+      const services = state.services.filter(v => v.id !== payload.rowData.id);
+      return state.merge({
+        services: services,
+      })
+    }
+    case APPLICATION_DEFINITION_SERVICE_EDIT_ACTIVATE: {
+      const services = cloneDeep(state.services);
+      const index = findIndex(services, { id: payload.rowData.id });
+
+      services[index].backup = cloneDeep(services[index]);
+
+      return state.merge({
+        editMode: true,
+        services: services
+      });
+    }
+    case APPLICATION_DEFINITION_SERVICE_EDIT_CONFIRM: {
+      const services = cloneDeep(state.services);
+      const index = findIndex(services, { id: payload.rowData.id });
+
+      delete services[index].backup;
+      delete services[index].newEntry;
+
+      let ansibleParameters = [];
+      const selectedGroup = services[index].ansibleGroup;
+
+      if (selectedGroup) {
+        services[index].ansibleParameters = state.ansiblePlaybook.groups[selectedGroup];
+      }
+
+      return state.merge({
+        editMode: false,
+        services: services,
+      });
+    }
+    case APPLICATION_DEFINITION_SERVICE_EDIT_CHANGE: {
+      const services = cloneDeep(state.services);
+      const index = findIndex(services, { id: payload.rowData.id });
+
+      services[index][payload.property] = payload.value;
+
+      return state.set('services', services);
+    }
+    case APPLICATION_DEFINITION_SERVICE_EDIT_CANCEL: {
+      const services = cloneDeep(state.services);
+      const index = findIndex(services, { id: payload.rowData.id });
+
+      services[index] = cloneDeep(services[index].backup);
+      delete services[index].backup;
+
+      if (services[index].newEntry === true) {
+        services.splice(index, 1);
+      }
+
+      return state.merge({
+        editMode: false,
+        services: services
+      });
+    }
+    case APPLICATION_DEFINITION_FOREMAN_PARAMETER_SELECTION_MODAL_OPEN: {
+      let parametersData = {};
+
+      parametersData.paramDefinition = {
+        id: payload.rowData.id,
+        name: payload.rowData.name,
+        dataId: payload.rowData.hostgroup
+      }
+
+      parametersData.type = PARAMETER_SELECTION_PARAM_TYPE_FOREMAN;
+      parametersData.parameters = payload.rowData.foremanParameters;
+      parametersData.useDefaultValue = true;
+      parametersData.allowRowAdjustment = true;
+      parametersData.allowNameAdjustment = true;
+      parametersData.allowDescriptionAdjustment = true;
+
+      return state.merge({
+        parametersData: parametersData,
+      });
+    }
+    case APPLICATION_DEFINITION_FOREMAN_PARAMETER_SELECTION_MODAL_CLOSE: {
+      if (payload.mode == 'save') {
+        const services = cloneDeep(state.services);
+        const index = findIndex(services, { id: state.parametersData.paramDefinition.id });
+        services[index].foremanParameters = cloneDeep(payload.parameterSelection);
+
+        return state.merge({
+          parametersData: null,
+          services: services,
+        });
+      } else {
+        return state.merge({
+          parametersData: null,
+        });
+      }
+    }
+    case APPLICATION_DEFINITION_ANSIBLE_PARAMETER_SELECTION_MODAL_OPEN: {
+      let parametersData = {};
+
+      if ((payload.hasOwnProperty('isAllGroup')) && (payload.isAllGroup == true)) {
+        parametersData.parameters = state.ansibleVarsAll;
+        parametersData.paramDefinition = {
+          isAllGroup: true,
+        }
+      } else  {
+        parametersData.parameters = payload.rowData.ansibleParameters;
+        parametersData.paramDefinition = {
+          id: payload.rowData.id,
+          name: payload.rowData.name,
+        }
+      }
+
+      parametersData.type = PARAMETER_SELECTION_PARAM_TYPE_ANSIBLE;
+      parametersData.useDefaultValue = false;
+      parametersData.allowRowAdjustment = true;
+      parametersData.allowNameAdjustment = true;
+      parametersData.allowDescriptionAdjustment = true;
+
+      return state.merge({
+        parametersData: parametersData,
+      });
+    }
+    case APPLICATION_DEFINITION_ANSIBLE_PARAMETER_SELECTION_MODAL_CLOSE: {
+      let newState = {};
+      if (payload.mode == 'save') {
+        if ((state.parametersData.paramDefinition.hasOwnProperty('isAllGroup')) && (state.parametersData.paramDefinition.isAllGroup == true)) {
+          newState = {
+            parametersData: null,
+            ansibleVarsAll: cloneDeep(payload.parameterSelection),
+          };
+        } else {
+          const services = cloneDeep(state.services);
+          const index = findIndex(services, { id: state.parametersData.paramDefinition.id });
+          services[index].ansibleParameters = cloneDeep(payload.parameterSelection);
+
+          newState = {
+            parametersData: null,
+            services: services,
+          };
+        }
+      } else {
+        newState = {
+          parametersData: null,
+        };
+      }
+      return state.merge(newState);
+    }
+    default:
+      return state;
+  }
+};
+
+export default applicationDefinitionConf;

data/webpack/components/ApplicationDefinition/ApplicationDefinitionSelectors.js

@@ -0,0 +1,8 @@
+const applicationDefinitionConf = state => state.foremanAcd.applicationDefinitionConf;
+
+export const selectEditMode = state => applicationDefinitionConf(state).editMode;
+export const selectAnsiblePlaybook = state => applicationDefinitionConf(state).ansiblePlaybook;
+export const selectServices = state => applicationDefinitionConf(state).services;
+export const selectColumns = state => applicationDefinitionConf(state).columns;
+export const selectParametersData = state => applicationDefinitionConf(state).parametersData;
+export const selectAnsibleVarsAll = state => applicationDefinitionConf(state).ansibleVarsAll;

data/webpack/components/ApplicationDefinition/components/AnsiblePlaybookSelector.js

@@ -0,0 +1,49 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import ExtSelect from '../../common/ExtSelect';
+import RailsData from '../../common/RailsData'
+
+const AnsiblePlaybookSelector= ({
+  label,
+  hidden,
+  editable,
+  viewText,
+  selectValue,
+  onChange,
+  options,
+  additionalData,
+}) =>{
+  return (
+    <div className="form-group">
+      <label className="col-md-2 control-label">{label}</label>
+      <div className="col-md-4">
+        <ExtSelect
+          editable={editable}
+          viewText={viewText}
+          selectValue={selectValue}
+          onChange={onChange}
+          options={options}
+          additionalData={additionalData}
+        />
+        <RailsData
+          key='ansible_playbook_id'
+          view='app_definition'
+          parameter='acd_ansible_playbook_id'
+          value={selectValue}
+        />
+      </div>
+    </div>
+  );
+};
+
+AnsiblePlaybookSelector.propTypes = {
+  label: PropTypes.string.isRequired,
+  editable: PropTypes.bool.isRequired,
+  viewText: PropTypes.string,
+  selectValue: PropTypes.string,
+  onChange: PropTypes.func.isRequired,
+  options: PropTypes.object,
+  additionalData: PropTypes.object,
+};
+
+export default AnsiblePlaybookSelector;

data/webpack/components/ApplicationDefinition/index.js

@@ -0,0 +1,33 @@
+import { bindActionCreators } from 'redux';
+import { connect } from 'react-redux';
+
+import './ApplicationDefinition.scss';
+import ApplicationDefinition from './ApplicationDefinition';
+import * as ApplicationDefinitionActions from './ApplicationDefinitionActions';
+
+import {
+  selectEditMode,
+  selectAnsiblePlaybook,
+  selectServices,
+  selectColumns,
+  selectParametersData,
+  selectAnsibleVarsAll,
+} from './ApplicationDefinitionSelectors';
+
+const mapStateToProps = state => ({
+  editMode: selectEditMode(state),
+  ansiblePlaybook: selectAnsiblePlaybook(state),
+  services: selectServices(state),
+  columns: selectColumns(state),
+  parametersData: selectParametersData(state),
+  ansibleVarsAll: selectAnsibleVarsAll(state),
+});
+
+const mapDispatchToProps = dispatch =>
+  bindActionCreators(ApplicationDefinitionActions, dispatch);
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(ApplicationDefinition);
+

data/webpack/components/ApplicationInstance/ApplicationInstance.js

@@ -0,0 +1,414 @@
+import React, { useState } from 'react'
+import PropTypes from 'prop-types';
+import {
+  Icon,
+  Button,
+} from 'patternfly-react';
+import * as resolve from 'table-resolver';
+import ForemanModal from 'foremanReact/components/ForemanModal';
+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 EasyHeaderFormatter from '../common/EasyHeaderFormatter';
+import AppDefinitionSelector from './components/AppDefinitionSelector';
+import ServiceCounter from './components/ServiceCounter';
+import { arrayToObject } from '../../helper';
+
+import {
+  Table,
+  FormControl,
+  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) {
+    super(props);
+  }
+
+  isEditing({rowData}) {
+    return (rowData.backup !== undefined);
+  }
+
+  validateParameters() {
+    let result = true;
+    let msg = "";
+
+    this.props.hosts.forEach(h => {
+      if (h.parameters.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 += "- "+ h.hostname +"\n";
+      }
+    });
+
+    const invalidMinServices = this.props.services.filter(s => (Number(s.minCount) != 0) && (s.currentCount < s.minCount));
+    const invalidMaxServices = this.props.services.filter(s => (Number(s.maxCount) != 0) && (s.currentCount > s.maxCount));
+
+    if (invalidMinServices.length > 0 || invalidMaxServices.length > 0) {
+      result = false;
+
+      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" });
+    }
+
+    if (result === false) {
+      window.alert(msg);
+    }
+    return result;
+  }
+
+  componentDidMount() {
+    const {
+      data: { mode, appDefinition, hosts, ansibleVarsAll, appDefinitionUrl },
+      initApplicationInstance,
+      addApplicationInstanceHost,
+      deleteApplicationInstanceHost,
+      activateEditApplicationInstanceHost,
+      changeEditApplicationInstanceHost,
+      openForemanParameterSelectionModal,
+      openAnsibleParameterSelectionModal,
+      loadApplicationDefinition,
+    } = this.props;
+
+    if (mode === 'editInstance') {
+      loadApplicationDefinition(appDefinition.id, { url: appDefinitionUrl });
+    }
+
+    const inlineEditButtonsFormatter = inlineEditFormatterFactory({
+      isEditing: additionalData => this.props.editMode,
+      renderValue: (value, additionalData) => (
+        <td style={{ padding: '2px' }}>
+          <Button
+            bsStyle="default"
+            onClick={() => activateEditApplicationInstanceHost(additionalData)}
+          >
+            <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={() => openAnsibleParameterSelectionModal(additionalData)}
+          >
+            <span title="change ansible variables">A</span>
+          </Button>
+          &nbsp;
+          <DeleteTableEntry
+            hidden={false}
+            disabled={false}
+            onDeleteTableEntry={deleteApplicationInstanceHost}
+            additionalData={additionalData}
+          />
+        </td>
+      ),
+      renderEdit: (value, additionalData) => (
+        <td style={{ padding: '2px' }}>
+          <Button bsStyle="default" disabled>
+            <Icon type="pf" name="edit" />
+          </Button>
+          &nbsp;
+          <Button bsStyle="default" disabled>
+            <Icon type="pf" name="settings" />
+          </Button>
+          &nbsp;
+          <Button bsStyle="default" disabled>
+            <span>A</span>
+          </Button>
+          &nbsp;
+          <DeleteTableEntry
+            hidden={false}
+            disabled={true}
+            onDeleteTableEntry={deleteApplicationInstanceHost}
+            additionalData={additionalData}
+          />
+        </td>
+      )
+    });
+    this.inlineEditButtonsFormatter = inlineEditButtonsFormatter;
+
+    this.headerFormatter = EasyHeaderFormatter;
+
+    const inlineEditFormatterImpl = {
+      renderValue: (value, additionalData) => (
+        <td>
+          <span className="static">{value}</span>
+        </td>
+      ),
+      renderEditText: (value, additionalData, subtype='text') => (
+        <td className="editing">
+          <FormControl
+            type={subtype}
+            defaultValue={value}
+            onBlur={e => changeEditApplicationInstanceHost(e.target.value, additionalData) }
+          />
+        </td>
+      ),
+      renderEditSelect: (value, additionalData, options) => (
+        <td className="editing">
+          <Select
+            value={value.toString()}
+            onChange={e => changeEditApplicationInstanceHost(e.target.value, additionalData) }
+            options={options}
+            allowClear
+            key="key"
+          />
+        </td>
+      )
+    };
+
+    const inlineEditFormatter = inlineEditFormatterFactory({
+      isEditing: additionalData => this.isEditing(additionalData),
+      renderValue: (value, additionalData) => {
+        let prettyValue = value;
+        if (additionalData.property == 'service') {
+          const serviceList = arrayToObject(this.props.services, "id", "name");
+          prettyValue = serviceList[value];
+        }
+        return inlineEditFormatterImpl.renderValue(prettyValue, additionalData)
+      },
+      renderEdit: (value, additionalData) => {
+        let prettyValue = value;
+        if (additionalData.property == 'service') {
+          const availableServices = this.props.services.filter(service => ((Number(service['maxCount']) == 0) || (service['currentCount'] < service['maxCount'])));
+          const serviceList = arrayToObject(availableServices, "id", "name");
+
+          if (additionalData.rowData.newEntry === true) {
+            return inlineEditFormatterImpl.renderEditSelect(value, additionalData, serviceList);
+          }
+          prettyValue = serviceList[value];
+          return inlineEditFormatterImpl.renderValue(prettyValue, additionalData)
+        }
+        return inlineEditFormatterImpl.renderEditText(prettyValue, additionalData);
+      }
+    });
+    this.inlineEditFormatter = inlineEditFormatter;
+
+    initApplicationInstance(
+      appDefinition,
+      hosts,
+      ansibleVarsAll,
+      this.headerFormatter,
+      this.inlineEditFormatter,
+      this.inlineEditButtonsFormatter,
+    );
+  };
+
+  render() {
+    const {
+      data: { mode, applications, organization, location, foremanDataUrl, appDefinitionUrl },
+      appDefinition,
+      services,
+      hosts,
+      columns,
+      addApplicationInstanceHost,
+      confirmEditApplicationInstanceHost,
+      cancelEditApplicationInstanceHost,
+      closeForemanParameterSelectionModal,
+      openAnsibleParameterSelectionModal,
+      closeAnsibleParameterSelectionModal,
+      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());
+
+    return (
+      <span>
+        <div class="service-counter">
+          <ServiceCounter
+            title="Service counts"
+            serviceList={ services }
+            hostList={ hosts }
+          />
+        </div>
+        <div>
+          <AppDefinitionSelector
+            label="Application Definition"
+            editable={ mode == 'newInstance' }
+            viewText={ appDefinition.name }
+            options={ applications }
+            onChange={ loadApplicationDefinition }
+            selectValue={ appDefinition.id.toString() }
+            additionalData={{url: appDefinitionUrl}}
+          />
+        </div>
+        <div className="form-group">
+          <AddTableEntry
+             hidden={ false }
+             disabled={ this.props.editMode }
+             onAddTableEntry={ addApplicationInstanceHost }
+          />
+          <Table.PfProvider
+            striped
+            bordered
+            hover
+            dataTable
+            inlineEdit
+            columns={columns}
+            components={{
+              body: {
+                row: Table.InlineEditRow,
+                cell: cellProps => cellProps.children
+              }
+            }}
+          >
+            <Table.Header headerRows={resolve.headerRows({ columns })} />
+            <Table.Body
+              rows={hosts}
+              rowKey="id"
+              onRow={(rowData, { rowIndex }) => ({
+                role: 'row',
+                isEditing: () => this.isEditing({ rowData }),
+                onCancel: () => cancelEditApplicationInstanceHost({ rowData, rowIndex }),
+                onConfirm: () => confirmEditApplicationInstanceHost({ rowData, rowIndex }),
+                last: rowIndex === services.length - 1
+              })}
+            />
+          </Table.PfProvider>
+          <AddTableEntry
+            hidden={ false }
+            disabled={ this.props.editMode }
+            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="AppInstanceForemanParamSelection"
+            dialogClassName="param_selection_modal"
+            title="Foreman Parameter specification for Application Instance"
+          >
+            <ForemanModal.Header closeButton={false}>
+              Parameter specification
+            </ForemanModal.Header>
+            {this.props.parametersData ? (
+              <ParameterSelection
+                paramType={ PARAMETER_SELECTION_PARAM_TYPE_FOREMAN }
+                location={ location }
+                organization={ organization }
+                paramDataUrl= { foremanDataUrl }
+                data={ this.props.parametersData }
+              />
+            ) : (<span>Empty</span>)
+            }
+            <ForemanModal.Footer>
+              <div>
+                <Button bsStyle="primary" onClick={() => closeForemanParameterSelectionModal({ mode: 'save' })}>Save</Button>
+                <Button bsStyle="default" 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
+                paramType={ PARAMETER_SELECTION_PARAM_TYPE_ANSIBLE }
+                location={ location }
+                organization={ organization }
+                data={ this.props.parametersData }
+              />
+            ) : (<span>Empty</span>)
+            }
+            <ForemanModal.Footer>
+              <div>
+                <Button bsStyle="primary" onClick={() => closeAnsibleParameterSelectionModal({ mode: 'save' })}>Save</Button>
+                <Button bsStyle="default" onClick={() => closeAnsibleParameterSelectionModal({ mode: 'cancel' })}>Cancel</Button>
+              </div>
+            </ForemanModal.Footer>
+          </ForemanModal>
+        </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>
+    )};
+}
+
+ApplicationInstance.defaultProps = {
+  error: {},
+  appDefinition: { "id": '', "name": '' },
+  editMode: false,
+  services: [],
+  hosts: [],
+  ansibleVarsAll: [],
+  parametersData: {},
+  columns: [],
+  editParamsOfRowId: null,
+}
+
+ApplicationInstance.propTypes = {
+  initApplicationInstance: PropTypes.func,
+  editMode: PropTypes.bool.isRequired,
+  services: PropTypes.array,
+  appDefinition: PropTypes.object,
+  columns: PropTypes.array,
+  hosts: PropTypes.array,
+  ansibleVarsAll: PropTypes.array,
+  loadApplicationDefinition: PropTypes.func,
+  addApplicationInstanceHost: PropTypes.func,
+  deleteApplicationInstanceHost: PropTypes.func,
+  activateEditApplicationInstanceHost: PropTypes.func,
+  confirmEditApplicationInstanceHost: PropTypes.func,
+  cancelEditApplicationInstanceHost: PropTypes.func,
+  changeEditApplicationInstanceHost: PropTypes.func,
+  openForemanParameterSelectionModal: PropTypes.func,
+  closeForemanParameterSelectionModal: PropTypes.func,
+  openAnsibleParameterSelectionModal: PropTypes.func,
+  closeAnsibleParameterSelectionModal: PropTypes.func,
+  parametersData: PropTypes.object,
+};
+
+export default ApplicationInstance;