foreman_acd 0.7.0 → 0.9.2

data/webpack/components/ApplicationDefinition/ApplicationDefinitionReducer.js

@@ -1,4 +1,5 @@
 import Immutable from 'seamless-immutable';
+import { translate as __ } from 'foremanReact/common/I18n';
 
 import {
   cloneDeep,
@@ -8,6 +9,7 @@ import {
 
 import {
   APPLICATION_DEFINITION_INIT,
+  APPLICATION_DEFINITION_CLOSE_ALERT_MODAL,
   APPLICATION_DEFINITION_LOAD_ANSIBLE_DATA_REQUEST,
   APPLICATION_DEFINITION_LOAD_ANSIBLE_DATA_SUCCESS,
   APPLICATION_DEFINITION_LOAD_ANSIBLE_DATA_FAILURE,
@@ -45,8 +47,15 @@ const applicationDefinitionConf = (state = initialState, action) => {
     case APPLICATION_DEFINITION_INIT: {
       return state.merge(payload);
     }
-
+    case APPLICATION_DEFINITION_CLOSE_ALERT_MODAL: {
+      return state.merge({
+        showAlertModal: false,
+        alertModalTitle: '',
+        alertModalText: '',
+      });
+    }
    case APPLICATION_DEFINITION_LOAD_ANSIBLE_DATA_FAILURE: {
+      console.log("Error while loading ansible data: "+ payload.error);
       return state.merge({ error: payload.error, loading: false });
     }
     case APPLICATION_DEFINITION_LOAD_ANSIBLE_DATA_REQUEST: {
@@ -113,23 +122,35 @@ const applicationDefinitionConf = (state = initialState, action) => {
       const thisService = services[index];
 
       if (thisService.name == '') {
-        window.alert("Every service needs to have a valid name.");
-        return state;
+        return state.merge({
+          showAlertModal: true,
+          alertModalTitle: __("Error"),
+          alertModalText: __("Every service needs to have a valid name."),
+        });
       }
 
       if (thisService.hostgroup == '') {
-        window.alert("Every service needs to be assigned to a hostgroup.");
-        return state;
+        return state.merge({
+          showAlertModal: true,
+          alertModalTitle: __("Error"),
+          alertModalText: __("Every service needs to be assigned to a hostgroup."),
+        });
       }
 
       if (thisService.ansibleGroup == '') {
-        window.alert("Every service needs to be assigned to a ansible group.");
-        return state;
+        return state.merge({
+          showAlertModal: true,
+          alertModalTitle: __("Error"),
+          alertModalText: __("Every service needs to be assigned to an ansible group."),
+        });
       }
 
       if (state.services.filter(v => v.name === thisService.name && v.id != thisService.id).length > 0) {
-        window.alert("Service name already used in this Application Definition. Please make sure that every service name is unique.");
-        return state;
+        return state.merge({
+          showAlertModal: true,
+          alertModalTitle: __("Error"),
+          alertModalText: __("Service name already used in this Application Definition. Please make sure that every service name is unique."),
+        });
       }
 
       delete services[index].backup;

data/webpack/components/ApplicationDefinition/ApplicationDefinitionSelectors.js

@@ -1,9 +1,13 @@
 const applicationDefinitionConf = state => state.foremanAcd.applicationDefinitionConf;
 
+export const selectShowAlertModal = state => applicationDefinitionConf(state).showAlertModal;
+export const selectAlertModalText = state => applicationDefinitionConf(state).alertModalText;
+export const selectAlertModalTitle = state => applicationDefinitionConf(state).alertModalTitle;
 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 selectHiddenForemanParameterTypes = state => applicationDefinitionConf(state).hiddenForemanParameterTypes;
 export const selectParametersData = state => applicationDefinitionConf(state).parametersData;
 export const selectAnsibleVarsAll = state => applicationDefinitionConf(state).ansibleVarsAll;
 export const selectParamEditMode = state => applicationDefinitionConf(state).paramEditMode;

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

@@ -15,6 +15,7 @@ const fixtures = {
       services: [],
       ansibleVarsAll: [],
     },
+    closeAlertModal: noop,
     loadAnsibleData: noop,
     initApplicationDefinition: noop,
     addApplicationDefinitionService: noop,

data/webpack/components/ApplicationDefinition/__tests__/ApplicationDefinitionSelectors.test.js

@@ -1,10 +1,14 @@
 import { testSelectorsSnapshotWithFixtures } from 'react-redux-test-utils';
 
 import {
+  selectShowAlertModal,
+  selectAlertModalText,
+  selectAlertModalTitle,
   selectEditMode,
   selectAnsiblePlaybook,
   selectServices,
   selectColumns,
+  selectHiddenForemanParameterTypes,
   selectParametersData,
   selectAnsibleVarsAll,
   selectParamEditMode,
@@ -21,6 +25,12 @@ const stateFactory = obj => ({
 });
 
 const fixtures = {
+  'should return showAlertModal from applicationDefinitionConfData_1 fixtures': () =>
+    selectShowAlertModal(stateFactory(applicationDefinitionConfData_1)),
+  'should return alertModalText from applicationDefinitionConfData_1 fixtures': () =>
+    selectAlertModalText(stateFactory(applicationDefinitionConfData_1)),
+  'should return alertModalTitle from applicationDefinitionConfData_1 fixtures': () =>
+    selectAlertModalTitle(stateFactory(applicationDefinitionConfData_1)),
   'should return editMode from applicationDefinitionConfData_1 fixtures': () =>
     selectEditMode(stateFactory(applicationDefinitionConfData_1)),
   'should return ansiblePlaybook from applicationDefinitionConfData_1 fixtures': () =>
@@ -31,6 +41,8 @@ const fixtures = {
     selectParametersData(stateFactory(applicationDefinitionConfData_1)),
   'should return columns from applicationDefinitionConfData_1 fixtures': () =>
     selectColumns(stateFactory(applicationDefinitionConfData_1)),
+  'should return hiddenForemanParameterTypes from applicationDefinitionConfData_1 fixtures': () =>
+    selectHiddenForemanParameterTypes(stateFactory(applicationDefinitionConfData_1)),
   'should return ansibleVarsAll from applicationDefinitionConfData_1 fixtures': () =>
     selectAnsibleVarsAll(stateFactory(applicationDefinitionConfData_1)),
   'should return ParamEditMode from applicationDefinitionConfData_1 fixtures': () =>

data/webpack/components/ApplicationDefinition/__tests__/__snapshots__/ApplicationDefinition.test.js.snap

@@ -2,6 +2,30 @@
 
 exports[`ApplicationDefinition should render application definition 1`] = `
 <span>
+  <MessageDialog
+    accessibleDescription=""
+    accessibleName=""
+    className=""
+    enforceFocus={true}
+    footer={null}
+    icon={
+      <Icon
+        name="error-circle-o"
+        type="pf"
+      />
+    }
+    onHide={[Function]}
+    primaryAction={[Function]}
+    primaryActionButtonBsStyle="danger"
+    primaryActionButtonContent="OK"
+    primaryContent=""
+    secondaryAction={[Function]}
+    secondaryActionButtonBsStyle="default"
+    secondaryActionButtonContent={null}
+    secondaryContent={null}
+    show={false}
+    title=""
+  />
   <div>
     <AnsiblePlaybookSelector
       additionalData={
@@ -10,12 +34,13 @@ exports[`ApplicationDefinition should render application definition 1`] = `
         }
       }
       editable={false}
+      hidden={false}
       label="Ansible Playbook"
       onChange={[Function]}
       selectValue=""
       viewText=""
     />
-    <p
+    <div
       style={
         Object {
           "paddingTop": 25,
@@ -25,7 +50,7 @@ exports[`ApplicationDefinition should render application definition 1`] = `
       <pre>
         Ansible Playbook can't be blank
       </pre>
-    </p>
+    </div>
   </div>
   <div
     className="form-group"
@@ -88,7 +113,7 @@ exports[`ApplicationDefinition should render application definition 1`] = `
         }
       >
         <span
-          title="change ansible variables for 'all'"
+          title="Change ansible variables for 'all'"
         >
           A
         </span>
@@ -109,6 +134,7 @@ exports[`ApplicationDefinition should render application definition 1`] = `
       <Connect(ParameterSelection)
         data={Object {}}
         editModeCallback={[Function]}
+        hiddenParameterTypes={Array []}
         location="Default Location"
         organization="Default Organization"
         paramDataUrl="url/does/not/exist"
@@ -185,13 +211,13 @@ exports[`ApplicationDefinition should render application definition 1`] = `
     </ForemanModal>
   </div>
   <RailsData
-    key="applications_definition"
+    key="application_definition_services_data"
     parameter="services"
     value="[]"
     view="app_definition"
   />
   <RailsData
-    key="applications_definition"
+    key="application_definition_ansible_data"
     parameter="ansible_vars_all"
     value="[]"
     view="app_definition"

data/webpack/components/ApplicationDefinition/__tests__/__snapshots__/ApplicationDefinitionSelectors.test.js.snap

@@ -2,6 +2,10 @@
 
 exports[`ApplicationDefinitionSelectors should return ParamEditMode from applicationDefinitionConfData_1 fixtures 1`] = `undefined`;
 
+exports[`ApplicationDefinitionSelectors should return alertModalText from applicationDefinitionConfData_1 fixtures 1`] = `undefined`;
+
+exports[`ApplicationDefinitionSelectors should return alertModalTitle from applicationDefinitionConfData_1 fixtures 1`] = `undefined`;
+
 exports[`ApplicationDefinitionSelectors should return ansiblePlaybook from applicationDefinitionConfData_1 fixtures 1`] = `
 Object {
   "groups": Object {
@@ -214,6 +218,8 @@ Array [
 
 exports[`ApplicationDefinitionSelectors should return editMode from applicationDefinitionConfData_1 fixtures 1`] = `undefined`;
 
+exports[`ApplicationDefinitionSelectors should return hiddenForemanParameterTypes from applicationDefinitionConfData_1 fixtures 1`] = `undefined`;
+
 exports[`ApplicationDefinitionSelectors should return parametersData from applicationDefinitionConfData_1 fixtures 1`] = `undefined`;
 
 exports[`ApplicationDefinitionSelectors should return services from applicationDefinitionConfData_1 fixtures 1`] = `
@@ -297,3 +303,5 @@ Array [
   },
 ]
 `;
+
+exports[`ApplicationDefinitionSelectors should return showAlertModal from applicationDefinitionConfData_1 fixtures 1`] = `undefined`;

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

@@ -27,7 +27,7 @@ const AnsiblePlaybookSelector= ({
           additionalData={additionalData}
         />
         <RailsData
-          key='ansible_playbook_id'
+          key='ansible_playbook_data'
           view='app_definition'
           parameter='acd_ansible_playbook_id'
           value={selectValue}

data/webpack/components/ApplicationDefinition/components/__tests__/__snapshots__/AnsiblePlaybookSelector.test.js.snap

@@ -31,7 +31,7 @@ exports[`AnsiblePlaybookSelector should render ansible playbook selector 1`] = `
       viewText="myText"
     />
     <RailsData
-      key="ansible_playbook_id"
+      key="ansible_playbook_data"
       parameter="acd_ansible_playbook_id"
       value="1"
       view="app_definition"
@@ -71,7 +71,7 @@ exports[`AnsiblePlaybookSelector should render hidden ansible playbook selector
       viewText="myText"
     />
     <RailsData
-      key="ansible_playbook_id"
+      key="ansible_playbook_data"
       parameter="acd_ansible_playbook_id"
       value="1"
       view="app_definition"
@@ -111,7 +111,7 @@ exports[`AnsiblePlaybookSelector should render not editable ansible playbook sel
       viewText="myText"
     />
     <RailsData
-      key="ansible_playbook_id"
+      key="ansible_playbook_data"
       parameter="acd_ansible_playbook_id"
       value="1"
       view="app_definition"

data/webpack/components/ApplicationDefinition/index.js

@@ -6,20 +6,28 @@ import ApplicationDefinition from './ApplicationDefinition';
 import * as ApplicationDefinitionActions from './ApplicationDefinitionActions';
 
 import {
+  selectShowAlertModal,
+  selectAlertModalText,
+  selectAlertModalTitle,
   selectEditMode,
   selectAnsiblePlaybook,
   selectServices,
   selectColumns,
+  selectHiddenForemanParameterTypes,
   selectParametersData,
   selectAnsibleVarsAll,
   selectParamEditMode,
 } from './ApplicationDefinitionSelectors';
 
 const mapStateToProps = state => ({
+  showAlertModal: selectShowAlertModal(state),
+  alertModalText: selectAlertModalText(state),
+  alertModalTitle: selectAlertModalTitle(state),
   editMode: selectEditMode(state),
   ansiblePlaybook: selectAnsiblePlaybook(state),
   services: selectServices(state),
   columns: selectColumns(state),
+  hiddenForemanParameterTypes: selectHiddenForemanParameterTypes(state),
   parametersData: selectParametersData(state),
   ansibleVarsAll: selectAnsibleVarsAll(state),
   paramEditMode: selectParamEditMode(state),

data/webpack/components/ApplicationDefinitionImport/ApplicationDefinitionImport.js

@@ -0,0 +1,214 @@
+import React, { useState } from 'react';
+import {
+  cloneDeep,
+} from 'lodash';
+import PropTypes from 'prop-types';
+import {
+  Icon,
+  Button,
+  MessageDialog,
+} from 'patternfly-react';
+import * as resolve from 'table-resolver';
+import Select from 'foremanReact/components/common/forms/Select';
+import CommonForm from 'foremanReact/components/common/forms/CommonForm';
+import AddTableEntry from '../common/AddTableEntry';
+import DeleteTableEntry from '../common/DeleteTableEntry';
+import RailsData from '../common/RailsData';
+import { EasyHeaderFormatter } from '../../helper';
+import { translate as __ } from 'foremanReact/common/I18n';
+
+import {
+  Table,
+  FormControl,
+  inlineEditFormatterFactory,
+} from 'patternfly-react';
+
+class ApplicationDefinitionImport extends React.Component {
+
+  constructor(props) {
+    super(props);
+  }
+
+  onFileChange = event => {
+    // Update the state
+    this.setState({ selectedFile: event.target.files[0] });
+
+  };
+
+  isEditing({rowData}) {
+    return (rowData.backup !== undefined);
+  }
+
+  setAnsiblePlaybookServices() {
+    this.setState({ansiblePlaybookServices: this.props.ansiblePlaybookServices});
+  }
+
+  componentDidMount() {
+    const {
+      mode,
+      ansiblePlaybookServices,
+      hostgroups, } = this.props;
+
+    const {
+      initApplicationDefinitionImport,
+      changeEditApplicationDefinitionImportService,
+      handleImportAnsiblePlaybook,
+    } = this.props;
+
+    this.headerFormatter = EasyHeaderFormatter;
+
+    const inlineEditFormatterImpl = {
+      renderValue: (value, additionalData) => (
+        <td>
+          <span className="static">{value}</span>
+        </td>
+      ),
+      renderEditSelect: (value, additionalData, options) => (
+        <td className="editing">
+          <Select
+            value={value.toString()}
+            onChange={e => changeEditApplicationDefinitionImportService(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 == 'hostgroup') {
+          prettyValue = hostgroups[value];
+        }
+        return inlineEditFormatterImpl.renderValue(prettyValue, additionalData)
+      },
+      renderEdit: (value, additionalData) => {
+        if (additionalData.property == 'hostgroup') {
+          if (additionalData.rowData) {
+            return inlineEditFormatterImpl.renderEditSelect(value, additionalData, hostgroups);
+          }
+          return inlineEditFormatterImpl.renderValue(hostgroups[value], additionalData)
+        }
+        return inlineEditFormatterImpl.renderValue(value, additionalData);
+      }
+    });
+    this.inlineEditFormatter = inlineEditFormatter;
+
+    initApplicationDefinitionImport(
+      ansiblePlaybookServices,
+      this.headerFormatter,
+      this.inlineEditFormatter,
+    );
+  };
+
+  render() {
+    const {
+      organization,
+      location,
+      foremanDataUrl,
+      mode,} = this.props;
+
+    const {
+      showAlertModal,
+      alertModalText,
+      alertModalTitle,
+      closeAlertModal,
+      ansiblePlaybookServices,
+      columns,
+      handleImportAnsiblePlaybook,
+    } = this.props;
+    let ansibleServices;
+
+    return (
+      <span>
+      {ansibleServices = this.setAnsiblePlaybookServices}
+      {ansibleServices}
+      <MessageDialog
+          show={showAlertModal}
+          onHide={closeAlertModal}
+          primaryAction={closeAlertModal}
+          primaryActionButtonContent={__('OK')}
+          primaryActionButtonBsStyle={"danger"}
+          icon={<Icon type="pf" name="error-circle-o" />}
+          title={alertModalTitle}
+          primaryContent={alertModalText}
+        />
+      <div>
+        <CommonForm label="Application Definition file" className="custom-file-upload">
+        <input
+          type="file"
+          onChange={this.onFileChange}
+        />
+        </CommonForm>
+        <CommonForm>
+        <Button
+          bsStyle="default"
+          onClick={e => handleImportAnsiblePlaybook(this.state.selectedFile, e)}
+          >
+          {__('Import')} </Button>
+        </CommonForm>
+        </div>
+
+        {(Object.keys(this.props.ansiblePlaybookServices).length > 0) ? (
+          <div className="form-group">
+          <Table.PfProvider
+            striped
+            bordered
+            hover
+            dataTable
+            columns={columns}
+            components={{
+              body: {
+                cell: cellProps => cellProps.children
+              }
+            }}
+          >
+            <Table.Header headerRows={resolve.headerRows({ columns })} />
+            <Table.Body
+              rows={this.props.ansiblePlaybookServices}
+              rowKey="id"
+              onRow={(rowData, { rowIndex }) => ({
+                role: 'row',
+                isEditing: () => this.isEditing({ rowData }),
+                last: rowIndex === this.props.ansiblePlaybookServices.length - 1
+              })}
+            />
+          </Table.PfProvider>
+        </div>) : null }
+        <RailsData
+          key='applications_definition_import'
+          view='app_definition_import'
+          parameter='services'
+          value={JSON.stringify(this.props.ansiblePlaybookServices)}
+        />
+      </span>
+    )};
+}
+
+ApplicationDefinitionImport.defaultProps = {
+  error: {},
+  showAlertModal: false,
+  alertModalText: '',
+  alertModalTitle: '',
+  editMode: false,
+  columns: [],
+  ansiblePlaybookServices: {},
+  editParamsOfRowId: null,
+}
+
+ApplicationDefinitionImport.propTypes = {
+  initApplicationDefinitionImport: PropTypes.func,
+  editMode: PropTypes.bool.isRequired,
+  columns: PropTypes.array,
+  showAlertModal: PropTypes.bool,
+  alertModalText: PropTypes.string,
+  alertModalTitle: PropTypes.string,
+  closeAlertModal: PropTypes.func,
+  handleImportAnsiblePlaybook: PropTypes.func,
+  changeEditApplicationDefinitionImportService: PropTypes.func,
+};
+
+export default ApplicationDefinitionImport;

data/webpack/components/ApplicationDefinitionImport/ApplicationDefinitionImport.scss

@@ -0,0 +1 @@
+@import '~@theforeman/vendor/scss/variables';

data/webpack/components/ApplicationDefinitionImport/ApplicationDefinitionImportActions.js

@@ -0,0 +1,161 @@
+import React from 'react';
+import { API, actionTypeGenerator } from 'foremanReact/redux/API';
+import { addToast } from 'foremanReact/components/ToastsList';
+import { sprintf, translate as __ } from 'foremanReact/common/I18n';
+
+
+import {
+  setModalOpen,
+  setModalClosed,
+} from 'foremanReact/components/ForemanModal/ForemanModalActions';
+
+import {
+  actionHeaderCellFormatter,
+} from 'patternfly-react';
+
+import {
+  propsToSnakeCase,
+  propsToCamelCase,
+} from 'foremanReact/common/helpers';
+
+import {
+  APPLICATION_DEFINITION_IMPORT_INIT,
+  APPLICATION_DEFINITION_IMPORT_CLOSE_ALERT_MODAL,
+  APPLICATION_DEFINITION_IMPORT_SERVICE_EDIT_CHANGE,
+  APPLICATION_DEFINITION_IMPORT_FILE_REQUEST,
+  APPLICATION_DEFINITION_IMPORT_FILE_SUCCESS,
+  APPLICATION_DEFINITION_IMPORT_FILE_FAILURE,
+} from './ApplicationDefinitionImportConstants';
+
+
+export const initApplicationDefinitionImport = (
+  ansiblePlaybookServices,
+  headerFormatter,
+  inlineEditFormatter,
+) => dispatch => {
+  const initialState = {};
+
+  initialState.columns = [
+    {
+      property: 'name',
+      header: {
+        label: 'Service name',
+        formatters: [headerFormatter],
+        props: {
+          index: 0,
+          style: {
+            width: '20%'
+          }
+        },
+      },
+      cell: {
+        props: {
+              index: 0,
+            },
+        formatters: [inlineEditFormatter]
+      }
+    },
+    {
+      property: 'hostgroup',
+      header: {
+        label: 'Hostgroup',
+        formatters: [headerFormatter],
+        props: {
+          index: 1,
+          style: {
+            width: '20%'
+          }
+        },
+      },
+      cell: {
+        props: {
+              index: 1,
+            },
+        formatters: [inlineEditFormatter]
+      }
+    }
+  ];
+
+  initialState.ansiblePlaybookServices = ansiblePlaybookServices;
+
+  dispatch({
+    type: APPLICATION_DEFINITION_IMPORT_INIT,
+    payload: initialState,
+  });
+};
+
+
+const errorHandler = (msg, err) => {
+  const error = {
+    errorMsg: __('Failed to fetch data from server.'),
+    statusText: err,
+  };
+  return { type: msg, payload: { error } };
+};
+
+export const closeAlertModal = () => ({
+  type: APPLICATION_DEFINITION_IMPORT_CLOSE_ALERT_MODAL,
+  payload: {}
+});
+
+export const changeEditApplicationDefinitionImportService = (value, additionalData) => ({
+  type: APPLICATION_DEFINITION_IMPORT_SERVICE_EDIT_CHANGE,
+  payload: {
+    value,
+    ...additionalData,
+  },
+});
+
+
+export const handleImportAnsiblePlaybook = (
+  file, e,) => async dispatch => {
+  e.preventDefault();
+  dispatch({
+    type: APPLICATION_DEFINITION_IMPORT_FILE_REQUEST,
+    payload: {
+      app_definition_file: file,
+    }});
+  try {
+    const formData = new FormData();
+
+    // Update the formData object
+    formData.append(
+      "app_definition_file",
+      file,
+      file.name
+    );
+    const { data } = await API.post(
+      '/acd/app_definitions/handle_file_upload', formData);
+    dispatch(
+        addToast({
+          type: 'success',
+          message: sprintf(
+            __('Sucessfully synced imported app template')
+          ),
+          key: APPLICATION_DEFINITION_IMPORT_FILE_SUCCESS,
+        })
+      );
+      return dispatch({
+        type: APPLICATION_DEFINITION_IMPORT_FILE_SUCCESS,
+        payload: {
+          ansiblePlaybookServices: data,
+        },
+        response: data,
+      });
+    } catch (error) {
+      dispatch(
+        addToast({
+          type: 'error',
+          message: sprintf(__('Error occurred while importing app template: %s'), error.response.data.message),
+          key: APPLICATION_DEFINITION_IMPORT_FILE_FAILURE,
+        })
+      );
+      return dispatch({
+        type: APPLICATION_DEFINITION_IMPORT_FILE_FAILURE,
+        payload: {
+          error: error,
+        },
+        response: error,
+      });
+    }
+};