foreman_acd 0.2.1 → 0.3.0

data/lib/foreman_acd/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module ForemanAcd
-  VERSION = '0.2.1'
+  VERSION = '0.3.0'
 end

data/package.json

@@ -1,6 +1,6 @@
 {
   "name": "foreman_acd",
-  "version": "0.0.6",
+  "version": "0.3.0",
   "description": "foreman application centric deployment",
   "main": "index.js",
   "directories": {

data/webpack/components/ApplicationDefinition/ApplicationDefinition.js

@@ -1,3 +1,4 @@
+import $ from 'jquery';
 import React, { useState } from 'react'
 import PropTypes from 'prop-types';
 import {
@@ -11,6 +12,7 @@ import ParameterSelection from '../ParameterSelection';
 import AddTableEntry from '../common/AddTableEntry';
 import DeleteTableEntry from '../common/DeleteTableEntry';
 import RailsData from '../common/RailsData'
+import AnsiblePlaybookSelector from './components/AnsiblePlaybookSelector';
 
 import {
   Table,
@@ -18,6 +20,11 @@ import {
   inlineEditFormatterFactory,
 } from 'patternfly-react';
 
+import {
+  PARAMETER_SELECTION_PARAM_TYPE_FOREMAN,
+  PARAMETER_SELECTION_PARAM_TYPE_ANSIBLE,
+} from '../ParameterSelection/ParameterSelectionConstants';
+
 class ApplicationDefinition extends React.Component {
 
   constructor(props) {
@@ -28,16 +35,30 @@ class ApplicationDefinition extends React.Component {
     return (rowData.backup !== undefined);
   }
 
+  createAnsibleGroupObject(ansibleGroups, withAll=false) {
+    const ansibleGroupObj = {};
+
+    const ansibleGroupArray = Object.keys(ansibleGroups);
+    ansibleGroupArray.forEach(e => (ansibleGroupObj[e] = e));
+
+    if ((withAll === false) && (ansibleGroupObj.hasOwnProperty('all'))) {
+      delete ansibleGroupObj.all;
+    }
+
+    return ansibleGroupObj;
+  }
+
   componentDidMount() {
     const {
-      data: { services, hostgroups },
+      data: { mode, ansiblePlaybook, ansibleDataUrl, services, ansibleVarsAll, hostgroups },
       initApplicationDefinition,
       addApplicationDefinitionService,
       deleteApplicationDefinitionService,
       activateEditApplicationDefinitionService,
       changeEditApplicationDefinitionService,
-      openParameterSelectionModal,
-      closeParameterSelectionModal,
+      openForemanParameterSelectionModal,
+      openAnsibleParameterSelectionModal,
+      loadAnsibleData,
     } = this.props;
 
     const inlineEditButtonsFormatter = inlineEditFormatterFactory({
@@ -48,13 +69,21 @@ class ApplicationDefinition extends React.Component {
             bsStyle="default"
             onClick={() => activateEditApplicationDefinitionService(additionalData)}
           >
-            <Icon type="pf" name="edit" />
+            <Icon type="pf" name="edit" title="edit entry" />
           </Button>
+          &nbsp;
           <Button
             bsStyle="default"
-            onClick={() => openParameterSelectionModal(additionalData)}
+            onClick={() => openForemanParameterSelectionModal(additionalData)}
           >
-            <Icon type="pf" name="settings" />
+            <Icon type="pf" name="settings" title="change parameters" />
+          </Button>
+          &nbsp;
+          <Button
+            bsStyle="default"
+            onClick={() => openAnsibleParameterSelectionModal(additionalData)}
+          >
+            <span title="change ansible variables">A</span>
           </Button>
           <DeleteTableEntry
             hidden={false}
@@ -69,9 +98,15 @@ class ApplicationDefinition extends React.Component {
           <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>
           <DeleteTableEntry
             hidden={false}
             disabled={true}
@@ -121,6 +156,10 @@ class ApplicationDefinition extends React.Component {
         if (additionalData.property == 'hostgroup') {
           prettyValue = hostgroups[value];
         }
+        else if (additionalData.property == 'ansibleGroup') {
+          const ag = this.createAnsibleGroupObject(this.props.ansiblePlaybook.groups);
+          prettyValue = ag[value];
+        }
         return inlineEditFormatterImpl.renderValue(prettyValue, additionalData)
       },
       renderEdit: (value, additionalData) => {
@@ -130,13 +169,23 @@ class ApplicationDefinition extends React.Component {
           }
           return inlineEditFormatterImpl.renderValue(hostgroups[value], additionalData)
         }
+        else if (additionalData.property == 'ansibleGroup') {
+          const ag = this.createAnsibleGroupObject(this.props.ansiblePlaybook.groups);
+
+          if (additionalData.rowData.newEntry === true) {
+            return inlineEditFormatterImpl.renderEditSelect(value, additionalData, ag);
+          }
+          return inlineEditFormatterImpl.renderValue(ag[value], additionalData);
+        }
         return inlineEditFormatterImpl.renderEditText(value, additionalData);
       }
     });
     this.inlineEditFormatter = inlineEditFormatter;
 
     initApplicationDefinition(
+      ansiblePlaybook,
       services,
+      ansibleVarsAll,
       this.headerFormatter,
       this.inlineEditFormatter,
       this.inlineEditButtonsFormatter,
@@ -145,24 +194,38 @@ class ApplicationDefinition extends React.Component {
 
   render() {
     const {
-      data: { organization, location, loadForemanDataUrl },
+      data: { organization, location, mode, ansiblePlaybooks, foremanDataUrl, ansibleDataUrl },
+      ansiblePlaybook,
       services,
       columns,
       addApplicationDefinitionService,
       confirmEditApplicationDefinitionService,
       cancelEditApplicationDefinitionService,
-      openParameterSelectionModal,
-      closeParameterSelectionModal,
+      closeForemanParameterSelectionModal,
+      openAnsibleParameterSelectionModal,
+      closeAnsibleParameterSelectionModal,
       ParameterSelectionModal,
+      loadAnsibleData,
     } = this.props;
 
     return (
       <span>
+        <div>
+          <AnsiblePlaybookSelector
+            label="Ansible Playbook"
+            editable={ mode == 'newDefinition' }
+            viewText={ ansiblePlaybook.name }
+            options={ ansiblePlaybooks }
+            onChange={ loadAnsibleData }
+            selectValue={ ansiblePlaybook.id.toString() }
+            additionalData={{url: ansibleDataUrl }}
+          />
+        </div>
         <div className="form-group">
           <AddTableEntry
-             hidden={ false }
-             disabled={ this.props.editMode }
-             onAddTableEntry={ addApplicationDefinitionService }
+            hidden={ false }
+            disabled={ this.props.editMode }
+            onAddTableEntry={ addApplicationDefinitionService }
           />
           <Table.PfProvider
             striped
@@ -192,33 +255,73 @@ class ApplicationDefinition extends React.Component {
             />
           </Table.PfProvider>
           <AddTableEntry
-             hidden={ false }
-             disabled={ this.props.editMode }
-             onAddTableEntry={ addApplicationDefinitionService }
+            hidden={ false }
+            disabled={ this.props.editMode }
+            onAddTableEntry={ addApplicationDefinitionService }
           />
+          <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="AppDefinitionParamSelection"
+            id="AppDefinitionForemanParamSelection"
             dialogClassName="param_selection_modal"
-            title="Parameter definition for Application Definition"
+            title="Foreman Parameter definition for Application Definition"
           >
             <ForemanModal.Header closeButton={false}>
               Parameter definition
             </ForemanModal.Header>
             {this.props.parametersData ? (
               <ParameterSelection
+                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" onClick={() => closeForemanParameterSelectionModal({ mode: 'save' })}>Save</Button>
+                <Button bsStyle="default" onClick={() => closeForemanParameterSelectionModal({ mode: 'cancel' })}>Cancel</Button>
+              </div>
+            </ForemanModal.Footer>
+          </ForemanModal>
+        </div>
+        <div>
+          <ForemanModal
+            id="AppDefinitionAnsibleParamSelection"
+            dialogClassName="param_selection_modal"
+            title="Ansible variables for Application Definition"
+          >
+            <ForemanModal.Header closeButton={false}>
+              Parameter definition
+            </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>
@@ -229,6 +332,12 @@ class ApplicationDefinition extends React.Component {
           parameter='services'
           value={JSON.stringify(this.props.services)}
         />
+        <RailsData
+          key='applications_definition'
+          view='app_definition'
+          parameter='ansible_vars_all'
+          value={JSON.stringify(this.props.ansibleVarsAll)}
+        />
       </span>
     )};
 }
@@ -236,7 +345,9 @@ class ApplicationDefinition extends React.Component {
 ApplicationDefinition.defaultProps = {
   error: {},
   editMode: false,
+  ansiblePlaybook: { "id": '', "name": '' },
   services: [],
+  ansibleVarsAll: [],
   parametersData: {},
   columns: [],
   editParamsOfRowId: null,
@@ -245,7 +356,9 @@ ApplicationDefinition.defaultProps = {
 ApplicationDefinition.propTypes = {
   initApplicationDefinition: PropTypes.func,
   editMode: PropTypes.bool.isRequired,
+  ansiblePlaybook: PropTypes.object,
   services: PropTypes.array,
+  ansibleVarsAll: PropTypes.array,
   columns: PropTypes.array,
   addApplicationDefinitionService: PropTypes.func,
   deleteApplicationDefinitionService: PropTypes.func,
@@ -253,8 +366,10 @@ ApplicationDefinition.propTypes = {
   confirmEditApplicationDefinitionService: PropTypes.func,
   cancelEditApplicationDefinitionService: PropTypes.func,
   changeEditApplicationDefinitionService: PropTypes.func,
-  openParameterSelectionModal: PropTypes.func,
-  closeParameterSelectionModal: PropTypes.func,
+  openForemanParameterSelectionModal: PropTypes.func,
+  closeForemanParameterSelectionModal: PropTypes.func,
+  openAnsibleParameterSelectionModal: PropTypes.func,
+  closeAnsibleParameterSelectionModal: PropTypes.func,
   parametersData: PropTypes.object,
 };
 

data/webpack/components/ApplicationDefinition/ApplicationDefinitionActions.js

@@ -17,18 +17,29 @@ import {
 
 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_PARAMETER_SELECTION_MODAL_OPEN,
-  APPLICATION_DEFINITION_PARAMETER_SELECTION_MODAL_CLOSE,
+  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 {
+  transformAnsiblePlaybook,
+} from './ApplicationDefinitionHelper';
+
 export const initApplicationDefinition = (
+  ansiblePlaybook,
   services,
+  ansibleVarsAll,
   headerFormatter,
   inlineEditFormatter,
   inlineEditButtonsFormatter,
@@ -84,13 +95,29 @@ export const initApplicationDefinition = (
         formatters: [inlineEditFormatter]
       }
     },
+    {
+      property: 'ansibleGroup',
+      header: {
+        label: 'Ansible Group',
+        formatters: [headerFormatter],
+        props: {
+          index: 3,
+          style: {
+            width: '20%'
+          }
+        },
+      },
+      cell: {
+        formatters: [inlineEditFormatter]
+      }
+    },
     {
       property: 'minCount',
       header: {
         label: 'min count',
         formatters: [headerFormatter],
         props: {
-          index: 3,
+          index: 4,
           style: {
             width: '10%'
           }
@@ -106,7 +133,7 @@ export const initApplicationDefinition = (
         label: 'max count',
         formatters: [headerFormatter],
         props: {
-          index: 3,
+          index: 5,
           style: {
             width: '10%'
           }
@@ -122,7 +149,7 @@ export const initApplicationDefinition = (
         label: 'Actions',
         formatters: [actionHeaderCellFormatter],
         props: {
-          index: 4,
+          index: 6,
           style: {
             width: '20%'
           }
@@ -134,7 +161,11 @@ export const initApplicationDefinition = (
     }
   ];
 
+  if (ansiblePlaybook !== undefined) {
+    initialState.ansiblePlaybook = transformAnsiblePlaybook(ansiblePlaybook);
+  }
   initialState.services = services;
+  initialState.ansibleVarsAll = ansibleVarsAll;
 
   dispatch({
     type: APPLICATION_DEFINITION_INIT,
@@ -142,6 +173,34 @@ export const initApplicationDefinition = (
   });
 };
 
+const errorHandler = (msg, err) => {
+  const error = {
+    errorMsg: 'Failed to fetch data from server.',
+    statusText: err,
+  };
+  return { type: msg, payload: { error } };
+};
+
+export const loadAnsibleData = (
+  ansiblePlaybookId,
+  additionalData
+) => dispatch => {
+  dispatch({ type: APPLICATION_DEFINITION_LOAD_ANSIBLE_DATA_REQUEST });
+
+  const baseUrl = additionalData.url;
+  const realUrl = baseUrl.replace("__id__", ansiblePlaybookId);
+
+  return api
+    .get(realUrl, {}, {})
+    .then(({ data }) =>
+      dispatch({
+        type: APPLICATION_DEFINITION_LOAD_ANSIBLE_DATA_SUCCESS,
+        payload: { ...data }
+      })
+    )
+    .catch(error => dispatch(errorHandler(APPLICATION_DEFINITION_LOAD_ANSIBLE_DATA_FAILURE, error)));
+};
+
 export const addApplicationDefinitionService = (additionalData) => ({
   type: APPLICATION_DEFINITION_SERVICE_ADD,
   payload: {
@@ -185,27 +244,52 @@ export const changeEditApplicationDefinitionService = (value, additionalData) =>
   },
 });
 
-export const openParameterSelectionModal = (additionalData) => dispatch => {
+export const openForemanParameterSelectionModal = (additionalData) => dispatch => {
+  dispatch({
+    type: APPLICATION_DEFINITION_FOREMAN_PARAMETER_SELECTION_MODAL_OPEN,
+    payload: {
+      ...additionalData,
+    }
+  });
+  dispatch(
+    setModalOpen({ id: 'AppDefinitionForemanParamSelection' })
+  );
+}
+
+export const closeForemanParameterSelectionModal = (additionalData) => dispatch => {
+  dispatch({
+    type: APPLICATION_DEFINITION_FOREMAN_PARAMETER_SELECTION_MODAL_CLOSE,
+    payload: {
+      ...additionalData,
+    }
+  });
+
+  dispatch(
+    setModalClosed({ id: 'AppDefinitionForemanParamSelection' })
+  );
+}
+
+export const openAnsibleParameterSelectionModal = (additionalData) => dispatch => {
   dispatch({
-    type: APPLICATION_DEFINITION_PARAMETER_SELECTION_MODAL_OPEN,
+    type: APPLICATION_DEFINITION_ANSIBLE_PARAMETER_SELECTION_MODAL_OPEN,
     payload: {
       ...additionalData,
     }
   });
   dispatch(
-    setModalOpen({ id: 'AppDefinitionParamSelection' })
+    setModalOpen({ id: 'AppDefinitionAnsibleParamSelection' })
   );
 }
 
-export const closeParameterSelectionModal = (additionalData) => dispatch => {
+export const closeAnsibleParameterSelectionModal = (additionalData) => dispatch => {
   dispatch({
-    type: APPLICATION_DEFINITION_PARAMETER_SELECTION_MODAL_CLOSE,
+    type: APPLICATION_DEFINITION_ANSIBLE_PARAMETER_SELECTION_MODAL_CLOSE,
     payload: {
       ...additionalData,
     }
   });
 
   dispatch(
-    setModalClosed({ id: 'AppDefinitionParamSelection' })
+    setModalClosed({ id: 'AppDefinitionAnsibleParamSelection' })
   );
 }