foreman_acd 0.6.0 → 0.9.1

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,
+      });
+    }
+};

data/webpack/components/ApplicationDefinitionImport/ApplicationDefinitionImportConstants.js

@@ -0,0 +1,6 @@
+export const APPLICATION_DEFINITION_IMPORT_INIT = 'INIT_APPLICATION_DEFINITION_IMPORT_INIT';
+export const APPLICATION_DEFINITION_IMPORT_SERVICE_EDIT_CHANGE = 'APPLICATION_DEFINITION_IMPORT_SERVICE_EDIT_CHANGE';
+export const APPLICATION_DEFINITION_IMPORT_FILE_FAILURE = 'APPLICATION_DEFINITION_IMPORT_FILE_FAILURE';
+export const APPLICATION_DEFINITION_IMPORT_FILE_REQUEST = 'APPLICATION_DEFINITION_IMPORT_FILE_REQUEST';
+export const APPLICATION_DEFINITION_IMPORT_FILE_SUCCESS = 'APPLICATION_DEFINITION_IMPORT_FILE_SUCCESS';
+export const APPLICATION_DEFINITION_IMPORT_CLOSE_ALERT_MODAL = 'APPLICATION_DEFINITION_IMPORT_CLOSE_ALERT_MODAL';

data/webpack/components/ApplicationDefinitionImport/ApplicationDefinitionImportReducer.js

@@ -0,0 +1,79 @@
+import Immutable from 'seamless-immutable';
+
+import {
+  cloneDeep,
+  findIndex,
+  findLastIndex,
+} from 'lodash';
+
+import { translate as __ } from 'foremanReact/common/I18n';
+
+import {
+  APPLICATION_DEFINITION_IMPORT_INIT,
+  APPLICATION_DEFINITION_IMPORT_SERVICE_EDIT_CHANGE,
+  APPLICATION_DEFINITION_IMPORT_FILE_FAILURE,
+  APPLICATION_DEFINITION_IMPORT_FILE_REQUEST,
+  APPLICATION_DEFINITION_IMPORT_FILE_SUCCESS,
+  APPLICATION_DEFINITION_IMPORT_CLOSE_ALERT_MODAL,
+} from './ApplicationDefinitionImportConstants';
+
+export const initialState = Immutable({
+  name: false,
+  error: { errorMsg: '', status: '', statusText: '' },
+});
+
+const applicationDefinitionImportConf = (state = initialState, action) => {
+  const { payload } = action;
+
+  switch (action.type) {
+    case APPLICATION_DEFINITION_IMPORT_INIT: {
+      return state.merge(payload);
+    }
+
+    case APPLICATION_DEFINITION_IMPORT_CLOSE_ALERT_MODAL: {
+      return state.merge({
+        showAlertModal: false,
+        alertModalTitle: '',
+        alertModalText: '',
+      });
+    }
+
+    case APPLICATION_DEFINITION_IMPORT_SERVICE_EDIT_CHANGE: {
+      const services = cloneDeep(state.ansiblePlaybookServices);
+      const index = findIndex(services, { id: payload.rowData.id });
+
+      services[index][payload.property] = payload.value;
+
+      return state.set('ansiblePlaybookServices', services);
+    }
+
+    case APPLICATION_DEFINITION_IMPORT_FILE_FAILURE: {
+       return state.merge({ error: payload.error, loading: false });
+     }
+     case APPLICATION_DEFINITION_IMPORT_FILE_REQUEST: {
+       return state.set('loading', true);
+     }
+     case APPLICATION_DEFINITION_IMPORT_FILE_SUCCESS: {
+       let newState = {};
+       let ansibleServices = [];
+       const ansiblePlaybookServices = payload.ansiblePlaybookServices['ansible_services'];
+
+       for (var ind in ansiblePlaybookServices) {
+         const value = ansiblePlaybookServices[ind];
+         const newRow = { id: value['id'], name: value['value'], hostgroup: '' };
+         newRow.backup = cloneDeep(newRow);
+         ansibleServices.push(newRow);
+       }
+
+       newState = {
+         ansiblePlaybookServices: ansibleServices,
+       };
+
+       return state.merge(newState);
+     }
+    default:
+      return state;
+  }
+};
+
+export default applicationDefinitionImportConf;

data/webpack/components/ApplicationDefinitionImport/ApplicationDefinitionImportSelectors.js

@@ -0,0 +1,8 @@
+const applicationDefinitionImportConf = state => state.foremanAcd.applicationDefinitionImportConf;
+
+export const selectEditMode = state => applicationDefinitionImportConf(state).editMode;
+export const selectColumns = state => applicationDefinitionImportConf(state).columns;
+export const selectAnsiblePlaybookServices = state => applicationDefinitionImportConf(state).ansiblePlaybookServices;
+export const selectShowAlertModal = state => applicationDefinitionImportConf(state).showAlertModal;
+export const selectAlertModalText = state => applicationDefinitionImportConf(state).alertModalText;
+export const selectAlertModalTitle = state => applicationDefinitionImportConf(state).alertModalTitle;

data/webpack/components/ApplicationDefinitionImport/__fixtures__/applicationDefinitionImportConfData_1.fixtures.js

@@ -0,0 +1,129 @@
+export const applicationDefinitionImportConfData_1 = {
+  name: false,
+  error: {
+    errorMsg: '',
+    status: '',
+    statusText: ''
+  },
+  columns: [
+    {
+      property: 'name',
+      header: {
+        label: 'Service name',
+        formatters: [
+          null
+        ],
+        props: {
+          index: 3,
+          style: {
+            width: '20%'
+          }
+        }
+      },
+      cell: {
+        formatters: [
+          null
+        ]
+      }
+    },
+    {
+      property: 'hostgroup',
+      header: {
+        label: 'Hostgroup',
+        formatters: [
+          null
+        ],
+        props: {
+          index: 2,
+          style: {
+            width: '20%'
+          }
+        }
+      },
+      cell: {
+        formatters: [
+          null
+        ]
+      }
+    }
+  ],
+  ansiblePlaybookServices: [
+    {
+      id: 1,
+      name: 'web',
+      description: '',
+      hostgroup: '1',
+      ansibleGroup: 'webservers',
+      minCount: '2',
+      maxCount: '',
+      foremanParameters: [
+        {
+          id: 1,
+          locked: false,
+          name: 'CP',
+          description: '',
+          type: 'computeprofile',
+          value: '1'
+        },
+        {
+          id: 2,
+          locked: true,
+          name: 'LE',
+          description: '',
+          type: 'lifecycleenv',
+          value: '1'
+        }
+      ],
+      ansibleParameters: [
+        {
+          id: 0,
+          name: 'dummy_var',
+          value: '0'
+        }
+      ]
+    },
+    {
+      id: 2,
+      name: 'db',
+      description: '',
+      hostgroup: '1',
+      ansibleGroup: 'dbservers',
+      minCount: '1',
+      maxCount: '',
+      foremanParameters: [],
+      ansibleParameters: [
+        {
+          id: 0,
+          name: 'mysqlservice',
+          value: 'mysqld'
+        },
+        {
+          id: 1,
+          name: 'mysql_port',
+          value: '3306',
+          locked: true
+        },
+        {
+          id: 2,
+          name: 'dbuser',
+          value: 'webapp'
+        },
+        {
+          id: 3,
+          name: 'dbname',
+          value: 'ANSAP01'
+        },
+        {
+          id: 4,
+          name: 'upassword',
+          value: 'Bond@007'
+        },
+        {
+          id: 5,
+          name: 'masterpassword',
+          value: 'MySQL@007'
+        }
+      ]
+    }
+  ]
+}

data/webpack/components/ApplicationDefinitionImport/__fixtures__/applicationDefinitionImportReducer.fixtures.js

@@ -0,0 +1,29 @@
+import Immutable from 'seamless-immutable';
+import {
+   cloneDeep,
+   findIndex,
+   findLastIndex,
+} from 'lodash';
+
+import {
+  applicationDefinitionImportConfData_1,
+} from '../__fixtures__/applicationDefinitionImportConfData_1.fixtures';
+
+export const successState = Immutable(applicationDefinitionImportConfData_1);
+
+const EDIT_ROW_ID = 2;
+
+const editClone = applicationDefinitionImportConfData_1;
+const editIndex = findIndex(editClone.ansiblePlaybookServices, { id: EDIT_ROW_ID })
+editClone["ansiblePlaybookServices"][editIndex].backup = cloneDeep(editClone["ansiblePlaybookServices"][editIndex]);
+export const editState = Immutable(editClone);
+
+// Payload Data
+export const initApplicationDefinitionImportPayload = applicationDefinitionImportConfData_1;
+export const changeEditServicePayload = {
+  value: "helloworld",
+  property: "name",
+  rowData: {
+    id: EDIT_ROW_ID,
+  }
+};

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

@@ -0,0 +1,20 @@
+import { testComponentSnapshotsWithFixtures } from 'react-redux-test-utils';
+
+import ApplicationDefinitionImport from '../ApplicationDefinitionImport';
+
+const noop = () => {};
+
+const fixtures = {
+  'should render application definition import': {
+      location: "Default Location",
+      organization: "Default Organization",
+      hostgroups: [],
+      ansiblePlaybookServices: [],
+    initApplicationDefinitionImport: noop,
+    addApplicationDefinitionImportService: noop,
+    closeAlertModal: noop,
+  },
+};
+
+describe('ApplicationDefinitionImport', () =>
+  testComponentSnapshotsWithFixtures(ApplicationDefinitionImport, fixtures));

data/webpack/components/ApplicationDefinitionImport/__tests__/ApplicationDefinitionImportReducer.test.js

@@ -0,0 +1,43 @@
+import { testReducerSnapshotWithFixtures } from 'react-redux-test-utils';
+import reducer, { initialState } from '../ApplicationDefinitionImportReducer';
+
+import {
+  successState,
+  editState,
+  initApplicationDefinitionImportPayload,
+  changeEditServicePayload,
+} from '../__fixtures__/applicationDefinitionImportReducer.fixtures';
+
+import {
+  APPLICATION_DEFINITION_IMPORT_INIT,
+  APPLICATION_DEFINITION_IMPORT_SERVICE_EDIT_CHANGE,
+  APPLICATION_DEFINITION_IMPORT_SERVICE_EDIT_CANCEL,
+} from '../ApplicationDefinitionImportConstants';
+
+const fixtures = {
+  'should return initial state': {
+    state: initialState,
+    action: {
+      type: undefined,
+      payload: {},
+    },
+  },
+
+  'should initialize component': {
+    state: initialState,
+    action: {
+      type: APPLICATION_DEFINITION_IMPORT_INIT,
+      payload: initApplicationDefinitionImportPayload,
+    },
+  },
+  'should change edit service': {
+    state: editState,
+    action: {
+      type: APPLICATION_DEFINITION_IMPORT_SERVICE_EDIT_CHANGE,
+      payload: changeEditServicePayload,
+    },
+  },
+};
+
+describe('ApplicationDefinitionImportReducer', () =>
+  testReducerSnapshotWithFixtures(reducer, fixtures));