foreman_puppet 0.0.1

data/webpack/index.js

@@ -0,0 +1,18 @@
+/* eslint import/no-unresolved: [2, { ignore: [foremanReact/*] }] */
+/* eslint-disable import/no-extraneous-dependencies */
+/* eslint-disable import/extensions */
+import componentRegistry from 'foremanReact/components/componentRegistry';
+import { registerReducer } from 'foremanReact/common/MountingService';
+import reducers from './src/reducers';
+import ForemanPuppet from './src/ForemanPuppet';
+
+// register reducers
+Object.entries(reducers).forEach(([key, reducer]) =>
+  registerReducer(key, reducer)
+);
+
+// register components for erb mounting
+componentRegistry.register({
+  name: 'ForemanPuppet',
+  type: ForemanPuppet,
+});

data/webpack/src/ForemanPuppet.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import { BrowserRouter } from 'react-router-dom';
+import ForemanPuppetRoute from './Router';
+
+const ForemanPuppet = () => (
+  <BrowserRouter>
+    <ForemanPuppetRoute />
+  </BrowserRouter>
+);
+
+export default ForemanPuppet;

data/webpack/src/Router/__snapshots__/routes.test.js.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ForemanPuppetRoutes should create routes 1`] = `Object {}`;

data/webpack/src/Router/index.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Switch, Route } from 'react-router-dom';
+
+import routes from './routes';
+
+const Router = () => (
+  <Switch>
+    {Object.entries(routes).map(([key, props]) => (
+      <Route key={key} {...props} />
+    ))}
+  </Switch>
+);
+
+export default Router;

data/webpack/src/Router/routes.js

@@ -0,0 +1,3 @@
+const routes = {};
+
+export default routes;

data/webpack/src/Router/routes.test.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { shallow } from '@theforeman/test';
+
+import Routes from './routes';
+
+describe('ForemanPuppetRoutes', () => {
+  it('should create routes', () => {
+    Object.entries(Routes).forEach(([key, Route]) => {
+      const Component = Route.component;
+      const component = shallow(<Component history={{}} some="props" />);
+      Route.renderResult = component;
+    });
+
+    expect(Routes).toMatchSnapshot();
+  });
+});

data/webpack/src/foreman_class_edit.js

@@ -0,0 +1,224 @@
+/* eslint-disable jquery/no-val */
+/* eslint-disable jquery/no-fade */
+/* eslint-disable jquery/no-sizzle */
+/* eslint-disable jquery/no-attr */
+/* eslint-disable jquery/no-trigger */
+/* eslint-disable jquery/no-show */
+/* eslint-disable jquery/no-class */
+/* eslint-disable jquery/no-find */ /**/
+/* eslint-disable jquery/no-parent */
+/* eslint-disable jquery/no-clone */
+/* eslint-disable jquery/no-hide */
+/* eslint-disable jquery/no-each */
+/* eslint-disable jquery/no-in-array */
+/* eslint-disable jquery/no-closest */
+/* eslint-disable jquery/no-data */
+
+import $ from 'jquery';
+import { sprintf, translate as __ } from 'foremanReact/common/I18n';
+
+export function filterPuppetClasses(item) {
+  const term = $(item)
+    .val()
+    .trim();
+  const classElems = $('.available_classes').find(
+    '.puppetclass_group, .puppetclass'
+  );
+  if (term.length > 0) {
+    classElems
+      .hide()
+      .has(`[data-class-name*="${term}"]`)
+      .show();
+  } else {
+    classElems.show();
+  }
+}
+
+export function addPuppetClass(item) {
+  const id = $(item).attr('data-class-id');
+  const type = $(item).attr('data-type');
+  $(item).tooltip('hide');
+  const content = $(item)
+    .closest('li')
+    .clone();
+  content.attr('id', `selected_puppetclass_${id}`);
+  content.append(
+    `<input id='${type}_puppetclass_ids_' name='${type}[puppetclass_ids][]' type='hidden' value=${id}>`
+  );
+
+  const linkIcon = content.children('a.glyphicon');
+  const links = content.find('a');
+
+  links.attr('onclick', 'tfm.classEditor.removePuppetClass(this)');
+  links.attr(
+    'data-original-title',
+    sprintf(__('Click to remove %s'), linkIcon.data('class-name'))
+  );
+  links.tooltip();
+  linkIcon.removeClass('glyphicon-plus-sign').addClass('glyphicon-minus-sign');
+
+  $('#selected_classes').append(content);
+
+  $(`#selected_puppetclass_${id}`).show('highlight', 5000);
+  $(`#puppetclass_${id}`)
+    .addClass('selected-marker')
+    .hide();
+  findElementsForRemoveIcon($(`#puppetclass_${id}`));
+
+  window.tfm.puppetEnc.hostForm.loadPuppetClassParameters(linkIcon);
+}
+
+function addGroupPuppetClass(item) {
+  const id = $(item).attr('data-class-id');
+  $(item).tooltip('hide');
+  const content = $(item)
+    .closest('li')
+    .clone();
+  content.attr('id', `selected_puppetclass_${id}`);
+  content.children('span').tooltip();
+  content.val('');
+
+  const linkIcon = content.children('a.glyphicon');
+  const links = content.find('a');
+  links.attr('onclick', '');
+  links.attr('data-original-title', __('belongs to config group'));
+  links.tooltip();
+  linkIcon.removeClass('glyphicon-plus-sign');
+
+  $('#selected_classes').append(content);
+
+  $(`#selected_puppetclass_${id}`).show('highlight', 5000);
+  $(`#puppetclass_${id}`)
+    .addClass('selected-marker')
+    .hide();
+  findElementsForRemoveIcon($(`#puppetclass_${id}`));
+
+  window.tfm.puppetEnc.hostForm.loadPuppetClassParameters(linkIcon);
+}
+
+export function removePuppetClass(item) {
+  const id = $(item).attr('data-class-id');
+  $(`#puppetclass_${id}`)
+    .removeClass('selected-marker')
+    .show();
+  $(`#puppetclass_${id}`)
+    .parent()
+    .prev()
+    .find('i')
+    .show();
+  $(`#puppetclass_${id}`)
+    .closest('.puppetclass_group')
+    .show();
+  $(`#selected_puppetclass_${id}`)
+    .children('a')
+    .tooltip('hide');
+  $(`#selected_puppetclass_${id}`).remove();
+  $(`#puppetclass_${id}_params_loading`).remove();
+  $(`[id^="puppetclass_${id}_params\\["]`).remove();
+  $('a[href="#puppet_enc_tab"]').removeClass('tab-error');
+  if ($('#puppet_enc_tab').find('.form-group.error').length > 0)
+    $('a[href="#puppet_enc_tab"]').addClass('tab-error');
+
+  return false;
+}
+
+function _getInheritedIds() {
+  return $('#inherited_ids').data('inherited-puppetclass-ids') || [];
+}
+
+export function addConfigGroup(item) {
+  const id = $(item).attr('data-group-id');
+  const type = $(item).attr('data-type');
+  const content = $(item)
+    .closest('li')
+    .clone();
+  content.attr('id', `selected_config_group_${id}`);
+  content.append(
+    `<input id='config_group_ids' name=${type}[config_group_ids][] type='hidden' value=${id}>`
+  );
+  $(`#selected_config_group_${id}`).show('highlight', 5000);
+  $(`#config_group_${id}`)
+    .addClass('selected-marker')
+    .hide();
+  const link = content.children('a.glyphicon');
+  const links = content.find('a');
+  link.attr('onclick', 'tfm.classEditor.removeConfigGroup(this)');
+  link.attr('data-original-title', __('Click to remove config group'));
+  links.tooltip();
+  link.removeClass('glyphicon-plus-sign').addClass('glyphicon-minus-sign');
+  link.text(__(' Remove'));
+
+  $('#selected_config_groups').append(content);
+  $(`#selected_config_group_${id}`).show('highlight', 5000);
+  $(`#config_group_${id}`)
+    .addClass('selected-marker')
+    .hide();
+
+  const puppetclassIds = $.parseJSON($(item).attr('data-puppetclass-ids'));
+  const inheritedIds = _getInheritedIds();
+
+  $.each(puppetclassIds, (index, puppetclassId) => {
+    const pc = $(`li#puppetclass_${puppetclassId}`);
+    const pcLink = $(`#puppetclass_${puppetclassId} > a.glyphicon`);
+    if (
+      pcLink.length > 0 &&
+      pc.length > 0 &&
+      $.inArray(puppetclassId, inheritedIds) === -1
+    ) {
+      if ($(`#selected_puppetclass_${puppetclassId}`).length <= 0) {
+        addGroupPuppetClass(pcLink);
+      }
+    }
+  });
+}
+
+export function removeConfigGroup(item) {
+  const id = $(item).attr('data-group-id');
+  $(`#config_group_${id}`)
+    .removeClass('selected-marker')
+    .show();
+  $(`#selected_config_group_${id}`)
+    .children('a')
+    .tooltip('hide');
+  $(`#selected_config_group_${id}`).remove();
+
+  const puppetclassIds = $.parseJSON($(item).attr('data-puppetclass-ids'));
+  const inheritedIds = _getInheritedIds();
+
+  $.each(puppetclassIds, (index, puppetclassId) => {
+    const pc = $(`#selected_puppetclass_${puppetclassId}`);
+    const pcLink = $(`#puppetclass_${puppetclassId} > a.glyphicon`);
+    // do not remove if manually added - having minus icon
+    if (
+      pcLink.length > 0 &&
+      !pcLink.hasClass('glyphicon-minus-sign') &&
+      pc.length > 0 &&
+      $.inArray(puppetclassId, inheritedIds) === -1
+    ) {
+      removePuppetClass(pcLink);
+    }
+  });
+  return false;
+}
+
+function findElementsForRemoveIcon(element) {
+  const clickedElement = element.parent().prev();
+  const ulId = `#${element.parent().attr('id')}`;
+  removeIconIfEmpty(clickedElement, ulId);
+}
+
+export function expandClassList(clickedElement, toggleSelector) {
+  $(toggleSelector).fadeToggle();
+  $(clickedElement)
+    .find('.glyphicon')
+    .toggleClass('glyphicon-plus glyphicon-minus');
+  removeIconIfEmpty($(clickedElement), toggleSelector);
+}
+
+function removeIconIfEmpty(element, ulId) {
+  if ($(ulId).children(':visible').length === 0) {
+    element.find('.glyphicon').hide();
+  } else {
+    element.find('.glyphicon').show();
+  }
+}

data/webpack/src/foreman_puppet_host_form.js

@@ -0,0 +1,140 @@
+/* eslint-disable jquery/no-ajax */
+/* eslint-disable jquery/no-class */
+/* eslint-disable jquery/no-html */
+/* eslint-disable jquery/no-data */
+/* eslint-disable jquery/no-show */
+/* eslint-disable jquery/no-hide */
+/* eslint-disable jquery/no-closest */
+
+import $ from 'jquery';
+
+import { translate as __ } from 'foremanReact/common/I18n';
+import store from 'foremanReact/redux';
+import * as LayoutActions from 'foremanReact/components/Layout/LayoutActions';
+
+export function loadPuppetClassParameters(item) {
+  const id = $(item).data('class-id');
+  // host_id could be either host.id OR hostgroup.id depending on which form
+  const $form = $('form.hostresource-form');
+  if ($form.length <= 0) return; // it is not host nor hostgroup form - probably config_group
+  const hostId = $form.data('id');
+  if ($(`#puppetclass_${id}_params_loading`).length > 0) return; // already loading
+  if ($(`[id^="#puppetclass_${id}_params\\["]`).length > 0) return; // already loaded
+  const url = $(item).data('url');
+  let data = window.serializeForm().replace('method=patch', 'method=post');
+  if (url.match('hostgroups')) {
+    data += `&hostgroup_id=${hostId}`;
+  } else {
+    data += `&host_id=${hostId}`;
+  }
+
+  if (!url) return; // no parameters
+  const spinner = window.spinner_placeholder(__('Loading parameters...'));
+  const placeholder = $(
+    `<tr id="puppetclass_${id}_params_loading"><td colspan="5">${spinner}</td></tr>`
+  );
+  $('#puppet_klasses_parameters_table').append(placeholder);
+  $.ajax({
+    type: 'post',
+    url,
+    data,
+    success: (result, textstatus, xhr) => {
+      const params = $(result);
+      placeholder.replaceWith(params);
+      params.find('a[rel="popover"]').popover();
+      if (params.find('.error').length > 0)
+        $('#puppet_enc_tab').addClass('tab-error');
+    },
+  });
+}
+
+export function updatePuppetclasses(element) {
+  const hostId = $('form.hostresource-form').data('id');
+  const url = $('#puppet_klasses_reload_url').data('url');
+  let data = window.serializeForm().replace('method=patch', 'method=post');
+
+  if (element.value === '') return;
+  if (url.match('hostgroups')) {
+    data += `&hostgroup_id=${hostId}`;
+  } else {
+    data += `&host_id=${hostId}`;
+  }
+
+  store.dispatch(LayoutActions.showLoading());
+  window.tfm.tools.showSpinner();
+  $.ajax({
+    type: 'post',
+    url,
+    data,
+    success: request => {
+      $('#puppet_enc_tab').html(request);
+      window.tfm.tools.activateTooltips();
+      checkForUnavailablePuppetclasses();
+    },
+    complete: () => {
+      store.dispatch(LayoutActions.hideLoading());
+      // TODO do only the necessary - we know what we are loading here
+      window.reloadOnAjaxComplete(element);
+    },
+  });
+}
+
+export function reloadPuppetclassParams() {
+  const hostId = $('form.hostresource-form').data('id');
+  const url = $('#puppet_klasses_parameters').data('url');
+  let data = window.serializeForm().replace('method=patch', 'method=post');
+  if (url.match('hostgroups')) {
+    data += `&hostgroup_id=${hostId}`;
+  } else {
+    data += `&host_id=${hostId}`;
+  }
+  window.load_with_placeholder('puppet_klasses_parameters_table', url, data);
+}
+
+export function checkForUnavailablePuppetclasses() {
+  const unavailableClasses = $(
+    '#puppet_enc_tab #selected_classes .unavailable'
+  );
+  const puppetEncTab = $('#puppet_enc_tab');
+  const tab = puppetEncTab
+    .closest('form')
+    .find('.nav-tabs a[href="#puppet_enc_tab"]');
+  const warningMessage = __(
+    'Some Puppet Classes are unavailable in the selected environment'
+  );
+  const warning = `<div class="alert alert-warning" id="puppetclasses_unavailable_warning">
+      <span class="pficon pficon-warning-triangle-o"></span>
+      ${warningMessage}
+    </span>`;
+
+  if (unavailableClasses.size() > 0) {
+    if (puppetEncTab.find('#puppetclasses_unavailable_warning').length <= 0) {
+      tab.prepend('<span class="pficon pficon-warning-triangle-o"></span> ');
+      puppetEncTab.prepend(warning);
+    }
+  } else {
+    puppetEncTab.find('#puppetclasses_unavailable_warning').remove();
+    tab.find('.pficon-warning-triangle-o').remove();
+  }
+}
+
+export function overridePuppetclassParam(item) {
+  const remove = $(item).data('tag') === 'remove';
+  const row = $(item)
+    .closest('tr')
+    .toggleClass('overridden');
+  const value = row.find('textarea') || row.find('select');
+  row
+    .find('[type=checkbox]')
+    .prop('checked', false)
+    .toggle();
+  row.find('input, textarea').prop('disabled', remove);
+  row.find('input, select').prop('disabled', remove);
+  row.find('.send_to_remove').prop('disabled', false);
+  row.find('.destroy').val(remove);
+  value.val(value.attr('data-inherited-value'));
+  $(item)
+    .hide()
+    .siblings('.btn-override')
+    .show();
+}

data/webpack/src/foreman_puppet_host_form.test.js

@@ -0,0 +1,65 @@
+/* eslint-disable jquery/no-size */
+
+import $ from 'jquery';
+
+import { checkForUnavailablePuppetclasses } from './foreman_puppet_host_form';
+
+jest.unmock('jquery');
+jest.unmock('./foreman_puppet_host_form');
+
+describe('checkForUnavailablePuppetclasses', () => {
+  beforeEach(() => {
+    document.body.innerHTML = `<div>
+        <ul class="nav-tabs">
+          <li><a href="#puppet_enc_tab" data-toggle="tab">Puppet Classes</a></li>
+        </ul>
+        <div class="tab-content">
+          <form>
+            <div class="tab-pane active" id="hostgroup">
+                <div class="form-group">
+                  <div>
+                    <input id="hostgroup_environment_id"/>
+                  </div>
+                  <span class="help-block"></span>
+                </div>
+            </div>
+            <div class="tab-pane" id="puppet_enc_tab">
+              <div id="selected_classes"></div>
+            </div>
+          </form>
+        </div>
+      </div>`;
+  });
+
+  it('adds a warning if an unavailable class is found', () => {
+    $('#selected_classes').append(
+      '<li class="unavailable">Unavailable Class</li>'
+    );
+
+    checkForUnavailablePuppetclasses();
+    expect($('#puppetclasses_unavailable_warning').size()).toBe(1);
+  });
+
+  it('does not add a warning if no unavailable classes are found', () => {
+    $('#hostgroup .help-block').empty();
+    $('#selected_classes').empty();
+
+    checkForUnavailablePuppetclasses();
+    expect(
+      $('#hostgroup .help-block')
+        .first()
+        .children()
+        .size()
+    ).toBe(0);
+  });
+
+  it('adds a warning sign to the tab if unavailable classes are found', () => {
+    $('#selected_classes').append(
+      '<li class="unavailable">Unavailable Class</li>'
+    );
+    checkForUnavailablePuppetclasses();
+    setTimeout(() => {
+      expect($('a .pficon').size()).toBe(1);
+    }, 100);
+  });
+});