foreman_acd 0.0.5 → 0.5.0

data/lib/foreman_acd/version.rb

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

data/package.json

@@ -1,6 +1,6 @@
 {
   "name": "foreman_acd",
-  "version": "0.0.5",
+  "version": "0.3.0",
   "description": "foreman application centric deployment",
   "main": "index.js",
   "directories": {
@@ -31,7 +31,6 @@
     "eslint-plugin-react": "^7.4.0",
     "identity-obj-proxy": "^3.0.0",
     "lodash": "^4.17.11",
-    "patternfly-react": "^2.31.0",
     "jest": "^23.6.0",
     "jest-cli": "^23.6.0",
     "jest-prop-type-error": "^1.1.0",

data/webpack/components/ApplicationDefinition/ApplicationDefinition.js

@@ -0,0 +1,378 @@
+import $ from 'jquery';
+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 AnsiblePlaybookSelector from './components/AnsiblePlaybookSelector';
+
+import {
+  Table,
+  FormControl,
+  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) {
+    super(props);
+  }
+
+  isEditing({rowData}) {
+    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: { mode, ansiblePlaybook, ansibleDataUrl, services, ansibleVarsAll, hostgroups },
+      initApplicationDefinition,
+      addApplicationDefinitionService,
+      deleteApplicationDefinitionService,
+      activateEditApplicationDefinitionService,
+      changeEditApplicationDefinitionService,
+      openForemanParameterSelectionModal,
+      openAnsibleParameterSelectionModal,
+      loadAnsibleData,
+    } = this.props;
+
+    const inlineEditButtonsFormatter = inlineEditFormatterFactory({
+      isEditing: additionalData => this.props.editMode,
+      renderValue: (value, additionalData) => (
+        <td style={{ padding: '2px' }}>
+          <Button
+            bsStyle="default"
+            onClick={() => activateEditApplicationDefinitionService(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={deleteApplicationDefinitionService}
+            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={deleteApplicationDefinitionService}
+            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 => changeEditApplicationDefinitionService(e.target.value, additionalData) }
+          />
+        </td>
+      ),
+      renderEditSelect: (value, additionalData, options) => (
+        <td className="editing">
+          <Select
+            value={value.toString()}
+            onChange={e => changeEditApplicationDefinitionService(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];
+        }
+        else if (additionalData.property == 'ansibleGroup') {
+          const ag = this.createAnsibleGroupObject(this.props.ansiblePlaybook.groups);
+          prettyValue = ag[value];
+        }
+        return inlineEditFormatterImpl.renderValue(prettyValue, additionalData)
+      },
+      renderEdit: (value, additionalData) => {
+        if (additionalData.property == 'hostgroup') {
+          if (additionalData.rowData.newEntry === true) {
+            return inlineEditFormatterImpl.renderEditSelect(value, additionalData, hostgroups);
+          }
+          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,
+    );
+  };
+
+  render() {
+    const {
+      data: { organization, location, mode, ansiblePlaybooks, foremanDataUrl, ansibleDataUrl },
+      ansiblePlaybook,
+      services,
+      columns,
+      addApplicationDefinitionService,
+      confirmEditApplicationDefinitionService,
+      cancelEditApplicationDefinitionService,
+      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 }
+          />
+          <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={services}
+              rowKey="id"
+              onRow={(rowData, { rowIndex }) => ({
+                role: 'row',
+                isEditing: () => this.isEditing({ rowData }),
+                onCancel: () => cancelEditApplicationDefinitionService({ rowData, rowIndex }),
+                onConfirm: () => confirmEditApplicationDefinitionService({ rowData, rowIndex }),
+                last: rowIndex === services.length - 1
+              })}
+            />
+          </Table.PfProvider>
+          <AddTableEntry
+            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="AppDefinitionForemanParamSelection"
+            dialogClassName="param_selection_modal"
+            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 }
+                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="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>
+        </div>
+        <RailsData
+          key='applications_definition'
+          view='app_definition'
+          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>
+    )};
+}
+
+ApplicationDefinition.defaultProps = {
+  error: {},
+  editMode: false,
+  ansiblePlaybook: { "id": '', "name": '' },
+  services: [],
+  ansibleVarsAll: [],
+  parametersData: {},
+  columns: [],
+  editParamsOfRowId: null,
+}
+
+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,
+  activateEditApplicationDefinitionService: PropTypes.func,
+  confirmEditApplicationDefinitionService: PropTypes.func,
+  cancelEditApplicationDefinitionService: PropTypes.func,
+  changeEditApplicationDefinitionService: PropTypes.func,
+  openForemanParameterSelectionModal: PropTypes.func,
+  closeForemanParameterSelectionModal: PropTypes.func,
+  openAnsibleParameterSelectionModal: PropTypes.func,
+  closeAnsibleParameterSelectionModal: PropTypes.func,
+  parametersData: PropTypes.object,
+};
+
+export default ApplicationDefinition;

data/webpack/components/ApplicationDefinition/ApplicationDefinition.scss

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

data/webpack/components/ApplicationDefinition/ApplicationDefinitionActions.js

@@ -0,0 +1,295 @@
+import React from 'react';
+import api from 'foremanReact/API';
+
+import {
+  setModalOpen,
+  setModalClosed,
+} from 'foremanReact/components/ForemanModal/ForemanModalActions';
+
+import {
+  actionHeaderCellFormatter,
+} from 'patternfly-react';
+
+import {
+  propsToSnakeCase,
+  propsToCamelCase,
+} from 'foremanReact/common/helpers';
+
+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 {
+  transformAnsiblePlaybook,
+} from './ApplicationDefinitionHelper';
+
+export const initApplicationDefinition = (
+  ansiblePlaybook,
+  services,
+  ansibleVarsAll,
+  headerFormatter,
+  inlineEditFormatter,
+  inlineEditButtonsFormatter,
+) => dispatch => {
+  const initialState = {};
+
+  initialState.columns = [
+    {
+      property: 'name',
+      header: {
+        label: 'Name',
+        formatters: [headerFormatter],
+        props: {
+          index: 0,
+          style: {
+            width: '15%'
+          }
+        },
+      },
+      cell: {
+        formatters: [inlineEditFormatter]
+      }
+    },
+    {
+      property: 'description',
+      header: {
+        label: 'Description',
+        formatters: [headerFormatter],
+        props: {
+          index: 1,
+          style: {
+            width: '10%'
+          }
+        },
+      },
+      cell: {
+        formatters: [inlineEditFormatter]
+      }
+    },
+    {
+      property: 'hostgroup',
+      header: {
+        label: 'Hostgroup',
+        formatters: [headerFormatter],
+        props: {
+          index: 2,
+          style: {
+            width: '20%'
+          }
+        },
+      },
+      cell: {
+        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: 4,
+          style: {
+            width: '10%'
+          }
+        },
+      },
+      cell: {
+        formatters: [inlineEditFormatter]
+      }
+    },
+    {
+      property: 'maxCount',
+      header: {
+        label: 'max count',
+        formatters: [headerFormatter],
+        props: {
+          index: 5,
+          style: {
+            width: '10%'
+          }
+        },
+      },
+      cell: {
+        formatters: [inlineEditFormatter]
+      }
+    },
+    {
+      property: 'actions',
+      header: {
+        label: 'Actions',
+        formatters: [actionHeaderCellFormatter],
+        props: {
+          index: 6,
+          style: {
+            width: '15%'
+          }
+        },
+      },
+      cell: {
+        formatters: [inlineEditButtonsFormatter]
+      }
+    }
+  ];
+
+  if (ansiblePlaybook !== undefined) {
+    initialState.ansiblePlaybook = transformAnsiblePlaybook(ansiblePlaybook);
+  }
+  initialState.services = services;
+  initialState.ansibleVarsAll = ansibleVarsAll;
+
+  dispatch({
+    type: APPLICATION_DEFINITION_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 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: {
+    ...additionalData,
+  },
+});
+
+export const deleteApplicationDefinitionService = (additionalData) => ({
+  type: APPLICATION_DEFINITION_SERVICE_DELETE,
+  payload: {
+    ...additionalData,
+  },
+});
+
+export const activateEditApplicationDefinitionService = (additionalData) => ({
+  type: APPLICATION_DEFINITION_SERVICE_EDIT_ACTIVATE,
+  payload: {
+    ...additionalData,
+  },
+});
+
+export const confirmEditApplicationDefinitionService = (rowData) => ({
+  type: APPLICATION_DEFINITION_SERVICE_EDIT_CONFIRM,
+  payload: {
+    ...rowData,
+  },
+});
+
+export const cancelEditApplicationDefinitionService = (rowData) => ({
+  type: APPLICATION_DEFINITION_SERVICE_EDIT_CANCEL,
+  payload: {
+    ...rowData,
+  },
+});
+
+export const changeEditApplicationDefinitionService = (value, additionalData) => ({
+  type: APPLICATION_DEFINITION_SERVICE_EDIT_CHANGE,
+  payload: {
+    value,
+    ...additionalData,
+  },
+});
+
+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_ANSIBLE_PARAMETER_SELECTION_MODAL_OPEN,
+    payload: {
+      ...additionalData,
+    }
+  });
+  dispatch(
+    setModalOpen({ id: 'AppDefinitionAnsibleParamSelection' })
+  );
+}
+
+export const closeAnsibleParameterSelectionModal = (additionalData) => dispatch => {
+  dispatch({
+    type: APPLICATION_DEFINITION_ANSIBLE_PARAMETER_SELECTION_MODAL_CLOSE,
+    payload: {
+      ...additionalData,
+    }
+  });
+
+  dispatch(
+    setModalClosed({ id: 'AppDefinitionAnsibleParamSelection' })
+  );
+}