tyler.durden
/
icingaweb2
mirror of https://github.com/Icinga/icingaweb2.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Add/modify JavaScript components for main/detail and their tests 

This commit introduces the following changes (although they are not
implemented in the templates, this follows):
- links in the top and navigation bar are loaded in the background
- generic main/detail container component handling click/load delegation
- mainDetailGrid implementation handling selection and render targets
- Generic history implementation handling URI change detection and reloading

refs
This commit is contained in:
Jannis Moßhammer 2013-09-11 17:11:13 +02:00
parent 62e98ccbd7
commit e6b3a54e90
9 changed files with 764 additions and 255 deletions

481
public/js/icinga/components/container.js Normal file
View File

@ -0,0 +1,481 @@
/*global Icinga:false, Modernizr: false, document: false, History: false, define:false require:false base_url:false console:false */
// {{{ICINGA_LICENSE_HEADER}}}
/**
* This file is part of Icinga 2 Web.
*
* Icinga 2 Web - Head for multiple monitoring backends.
* Copyright (C) 2013 Icinga Development Team
*
* This program is free software; you can redistribute it and/or
* modify it under the terms of the GNU General Public License
* as published by the Free Software Foundation; either version 2
* of the License, or (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program; if not, write to the Free Software
* Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
*
* @copyright 2013 Icinga Development Team <info@icinga.org>
* @license http://www.gnu.org/licenses/gpl-2.0.txt GPL, version 2
* @author Icinga Development Team <info@icinga.org>
*/
// {{{ICINGA_LICENSE_HEADER}}}
define(['jquery', 'logging', 'icinga/componentLoader', 'URIjs/URI', 'URIjs/URITemplate'], function($, logger, componentLoader, URI) {
"use strict";
/**
* Static reference to the main container, populated on the first 'getMainContainer' call
*
* @type {Container}
*/
var mainContainer = null;
/**
* Static reference to the detail container, populated on the first getDetailContainer call
*
* @type {Container}
*/
var detailContainer = null;
/**
* A handler for accessing icinga containers, i.e. the #icingamain, #icingadetail containers and specific 'app/container'
* components.
*
* This component can be constructed with every object as the parameter and will provide access to the nearest
* container (which could be the applied object itself, if it is a container) wrapping this object.
*
* The windows url should always be modified with this implementation, so an objects context should point to a
* new URL, call new Container('#myObject').updateContainerHref('/my/url')
*
* This requirejs module also registers a global handler catching all links of the main container and rendering
* their content to the main container, in case you don't want to extend the container with additional handlers.
*
* @param {HTMLElement, jQuery, String} target A jQuery resultset, dom element or matcher string
*/
var Container = function(target) {
/**
* Enumeration of possible container types
*
* @type {{GENERIC: string, MAIN: string, DETAIL: string}}
*/
var CONTAINER_TYPES = {
'GENERIC' : 'generic',
'MAIN' : 'icingamain',
'DETAIL': 'icingadetail'
};
/**
* Set to true when no history changes should be made
*
* @type {boolean} true to disable History.js calls, false to reenable them
*/
this.freezeHistory = false;
/**
* Return the container that is at the nearest location to this element, or the element itself if it is a container
*
* Containers are either the icingamain and icingadetail ids or components tagged as app/container
*
* @param {String, jQuery, HTMLElement} target The node to use as the starting point
*
* @returns {HTMLElement|null} The nearest container found or null if target is no container
* and no container is above target
*/
var findNearestContainer = function(target) {
target = $(target);
if (target.attr('data-icinga-component') === 'app/container' ||
target.attr('id') === 'icingamain' || target.attr('id') === 'icingadetail') {
return target;
}
return target.parents('[data-icinga-component="app/container"], #icingamain, #icingadetail')[0];
};
/**
* Find the container responsible for target and determine it's type
*
* @param {HTMLElement, jQuery, String} target A jQuery resultset, dom element or matcher string
*/
this.construct = function(target) {
this.containerDom = $(findNearestContainer(target));
this.containerType = CONTAINER_TYPES.GENERIC;
if (this.containerDom.attr('id') === CONTAINER_TYPES.MAIN) {
this.containerType = CONTAINER_TYPES.MAIN;
} else if (this.containerDom.attr('id') === CONTAINER_TYPES.DETAIL) {
this.containerType = CONTAINER_TYPES.DETAIL;
} else {
this.containerType = CONTAINER_TYPES.GENERIC;
}
};
var getWindowLocationWithoutHost = function() {
return window.location.pathname + window.location.search + window.location.hash;
};
/**
* Extract and return the main container's location from the current Url
*
* This takes the window's Url and removes the detail part
*
* @returns {string} The Url of the main container
*/
var getMainContainerHrefFromUrl = function() {
// main has the url without the icingadetail part
var href = URI(getWindowLocationWithoutHost());
href.removeQuery('detail');
return href.href();
};
/**
* Return the detail container's location from the current Url
*
* This takes the detail parameter of the url and returns it or
* undefined if no location is given
*
* @returns {string|undefined} The Url of the detail container or undefined if no detail container is active
*/
var getDetailContainerHrefFromUrl = function() {
var location = new URI(getWindowLocationWithoutHost());
var href = URI.parseQuery(location.query()).detail;
if (!href) {
return;
}
// detail is a query param, so it is possible that (due to a bug or whatever) multiple
// detail fields are declared and returned as arrays
if (typeof href !== 'string') {
href = href[0];
}
// transform the detail parmameter to an Url
return URI(href).href();
};
/**
* Return the Url of this container
*
* This is mostly determined by the Url of the window, but for generic containers we have to rely on the
* "data-icinga-href" attribute of the container (which is also available for main and detail, but less
* reliable during history changes)
*
* @returns {String|undefined} The Url of the container or undefined if the container has no Url set
*/
this.getContainerHref = function() {
switch (this.containerType) {
case CONTAINER_TYPES.MAIN:
return getMainContainerHrefFromUrl();
case CONTAINER_TYPES.DETAIL:
return getDetailContainerHrefFromUrl();
case CONTAINER_TYPES.GENERIC:
if (this.containerDom.attr('data-icinga-href')) {
return URI(this.containerDom.attr('data-icinga-href'));
} else {
return URI(getWindowLocationWithoutHost()).href();
}
}
};
/**
* Return a href with representing the current view, but url as the main container
*
* @param {URI} url The main Url to use as an URI.js object
*
* @returns {URI} The modified URI.js containing the new main and the current detail link
*/
var setMainContainerHref = function(url) {
var detail = getDetailContainerHrefFromUrl();
if (detail) {
url.addQuery('detail', detail);
}
return url;
};
/**
* Return a complete Href string representing the current detail href and the provided main Url
*
* @param {URI} url The detail Url to use as an URI.js object
*
* @returns {URI} The modified URI.js containing the new detail and the current main link
*/
var setDetailContainerHref = function(url) {
var location = new URI(window.location.href);
location.removeQuery('detail');
if (typeof url !== 'undefined') { // no detail Url given
location.addQuery('detail', url);
}
return location;
};
/**
* Update the Url of this container and let the Url reflect the new changes, if required
*
* This updates the window Url and the data-icinga-href attribute of the container. The latter one is required
* to see which url is the last one the container displayed (e.g. after History changes, the url has changed
* but the containers data-icinga-href still points to the containers element).
*
* @param {String|URI} url An Url string or a URI.js object representing the new Url for this container
*/
this.updateContainerHref = function(url) {
if (typeof url === "string") {
url = URI(url);
}
var containerUrl, windowUrl;
switch (this.containerType) {
case CONTAINER_TYPES.MAIN:
windowUrl = setMainContainerHref(url);
containerUrl = windowUrl.clone().removeQuery('detail');
break;
case CONTAINER_TYPES.DETAIL:
windowUrl = setDetailContainerHref(url);
containerUrl = url;
break;
case CONTAINER_TYPES.GENERIC:
containerUrl = url;
break;
}
if (containerUrl) {
this.containerDom.attr('data-icinga-href', containerUrl);
} else {
this.containerDom.removeAttr('data-icinga-href');
}
if (!this.freezeHistory) {
History.pushState({container: this.containerDom.attr('id')}, document.title, windowUrl.href());
}
return windowUrl;
};
/**
* Synchronize the container with the currently active window Url
*
* This is called mostly after changes in the history and makes sure the container contains the same content
* as the Url refers to. If the Url is the same as the Url in the container (the one in the data-icinga-href
* attribute), the container will be untouched, otherwise it's content and data-icinga-href attribute will be
* updated with the Url from the window.
*/
this.syncWithCurrentUrl = function() {
if (this.containerType === CONTAINER_TYPES.GENERIC) {
return; // generic containers would require this method to be specialised
}
// Catch initial page loading: Here no data-icinga-href is set and no url is given, so we're safe to ignore this
if (typeof this.containerDom.attr('data-icinga-href') === 'undefined' &&
typeof this.getContainerHref() === 'undefined') {
return;
}
// This is the case when an detail is removed on history back
if (typeof this.getContainerHref() === 'undefined' && typeof this.containerDom.attr('data-icinga-href') !== 'undefined') {
this.containerDom.removeAttr('data-icinga-href');
this.containerDom.empty();
this.hideDetail();
logger.debug("Hiding detail panel on Url change");
return;
}
if (!URI(this.getContainerHref()).equals(this.containerDom.attr('data-icinga-href'))) {
logger.debug(
"Applying URL change for ", this.containerType,
"from", this.getContainerHref(),
"to", this.containerDom.attr('data-icinga-href')
);
if (typeof this.containerDom.attr('data-icinga-href') === 'undefined') { // container is empty now
//this.replaceDom('');
} else {
this.freezeHistory = true;
this.replaceDomFromUrl(this.getContainerHref());
this.freezeHistory = false;
}
} else {
logger.debug("No action performed on Url change, same Url for ", this.containerType);
}
};
/**
* Load the provided url, stop all pending requests for this container and call replaceDom for the returned html
*
* This method relaods the page if a 401 (Authorization required) header is encountered
*
* @param {String, URI} url The Url to load or and URI.js object encapsulating it
*/
this.replaceDomFromUrl = function(url) {
if (!Modernizr.history) {
window.location.href = this.updateContainerHref(url);
}
this.updateContainerHref(url);
var scope = this;
if (this.containerDom.pending) {
this.containerDom.pending.abort();
}
this.containerDom.pending = $.ajax({
url: url,
success: function(domNodes) {
scope.replaceDom(domNodes);
},
error: function(response) {
if (response.status === 401) {
window.location.reload();
}
}
});
};
/**
* Remove all dom nodes from this container and replace them with the ones from domNodes
*
* Triggers the custom "updated" event and causes a rescan for components on the DOM nodes
*
* If keepLayout is given, the detail panel won't be expanded if this is an update for the detail panel,
* otherwise it will be automatically shown.
*
* @param {String, jQuery, HTMLElement, Array} domNodes Any valid representation of the Dom nodes to insert
* @param {boolean} keepLayout Whether to keep the layout untouched, even if detail
* is updated end collapsed
*
* @see registerOnUpdate
*/
this.replaceDom = function(domNodes, keepLayout) {
var newDom = $('#icingamain', domNodes);
this.containerDom.empty().append(newDom.children());
this.containerDom.trigger('updated', [domNodes]);
componentLoader.load();
if (!keepLayout) {
if (this.containerType === CONTAINER_TYPES.DETAIL) {
this.showDetail();
}
}
};
/**
* Register a method to be called when this container is updated
*
* @param {function} fn The function to call when the container is updated
*/
this.registerOnUpdate = function(fn) {
this.containerDom.on('updated', fn);
};
this.construct(target);
};
/**
* Static method for detecting whether the given link is external or only browserside (hash links)
*
* @param {String} link The link to test for being site-related
*
* @returns {boolean} True when the link should be executed with the browsers normal behaviour, false
* when the link should be catched and processed internally
*/
Container.isExternalLink = function(link) {
if (link[0] === '#') {
return true;
}
return (/^\/\//).test(URI(link).relativeTo(window.location.href).href());
};
/**
* Return the page's detail container (which is always there)
*
* @returns {Container} The detail container of the page
*/
Container.getDetailContainer = function() {
detailContainer = detailContainer || new Container('#icingadetail');
if(!jQuery.contains(document.body, detailContainer)) {
detailContainer = new Container('#icingadetail');
}
return detailContainer;
};
/**
* Return the page's main container (which is always there)
*
* @returns {Container} The main container of the page
*/
Container.getMainContainer = function() {
mainContainer = mainContainer || new Container('#icingamain');
if(!jQuery.contains(document.body, mainContainer)) {
mainContainer = new Container('#icingamain');
}
return mainContainer;
};
/**
* Expand the detail container and shrinken the main container
*
* Available as a static method on the Container object or as an instance method
*/
Container.prototype.showDetail = Container.showDetail = function() {
var mainDom = Container.getMainContainer().containerDom,
detailDom = Container.getDetailContainer().containerDom;
mainDom.removeClass();
detailDom.removeClass();
mainDom.addClass('hidden-md');
detailDom.addClass('col-md-12');
mainDom.addClass('col-lg-7');
detailDom.addClass('col-lg-5');
mainDom.addClass('hidden-xs');
detailDom.addClass('col-xs-12');
mainDom.addClass('hidden-sm');
detailDom.addClass('col-sm-12');
};
/**
* Hide the detail container and expand the main container
*
* Also updates the Url by removing the detail part
*
* Available as a static method on the Container object or as an instance method
*/
Container.prototype.hideDetail = Container.hideDetail = function() {
var mainDom = Container.getMainContainer().containerDom,
detailDom = Container.getDetailContainer().containerDom;
mainDom.removeClass();
detailDom.removeClass();
mainDom.addClass('col-md-12');
detailDom.addClass('hidden-md');
mainDom.addClass('col-lg-12');
detailDom.addClass('hidden-lg');
mainDom.addClass('col-xs-12');
detailDom.addClass('hidden-xs');
mainDom.addClass('col-sm-12');
detailDom.addClass('hidden-sm');
detailDom.removeAttr('data-icinga-href');
if (typeof this.freezeHistory === 'undefined' || !this.freezeHistory) {
History.replaceState(
{},
document.title,
URI(window.location.href).removeQuery('detail').href()
);
}
};
if (Modernizr.history) {
/**
* Register the click behaviour of the main container, which means that every link, if not catched in a
* more specific handler, causes an update of the main container if it's not external or a browser behaviour link
* (those starting with '#').
*/
$('body').on('click', '#icingamain', function(ev) {
var targetEl = ev.target || ev.toElement || ev.relatedTarget;
if (targetEl.tagName.toLowerCase() !== 'a') {
return true;
}
if (Container.isExternalLink($(targetEl).attr('href'))) {
return true;
} else {
Container.getMainContainer().replaceDomFromUrl(URI($(targetEl).attr('href')).href());
ev.preventDefault();
ev.stopPropagation();
return false;
}
});
}
return Container;
});

20
public/js/icinga/components/form.js
View File

@ -43,17 +43,7 @@ define(['jquery'], function($) {
*/
var ATTR_MODIFIED = 'data-icinga-form-modified';
/**
* Return true when the input element is a autosubmit field
*
* @param {string|DOMElement|jQuery} el The element to test for autosubmission
*
* @returns {boolean} True when the element should be automatically submitted
*/
var isAutoSubmitInput = function(el) {
return $(el).attr('data-icinga-form-autosubmit') === 'true' ||
$(el).attr('data-icinga-form-autosubmit') === '1';
};
/**
* Takes a form and returns an overloaded jQuery object
@ -105,16 +95,16 @@ define(['jquery'], function($) {
*/
var registerFormEventHandler = function(form) {
form.change(function(changed) {
if (isAutoSubmitInput(changed.target)) {
if ($(changed.target).attr('data-icinga-form-autosubmit')) {
form.clearModificationFlag();
form.submit();
} else {
form.setModificationFlag();
}
});
// submissions should clear the modification flag
form.submit(form.clearModificationFlag);
form.submit(function() {
form.clearModificationFlag()
});
};
/**

199
public/js/icinga/components/mainDetailGrid.js Normal file
View File

@ -0,0 +1,199 @@
/*global Icinga:false, document: false, define:false require:false base_url:false console:false */
// {{{ICINGA_LICENSE_HEADER}}}
/**
* This file is part of Icinga 2 Web.
*
* Icinga 2 Web - Head for multiple monitoring backends.
* Copyright (C) 2013 Icinga Development Team
*
* This program is free software; you can redistribute it and/or
* modify it under the terms of the GNU General Public License
* as published by the Free Software Foundation; either version 2
* of the License, or (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program; if not, write to the Free Software
* Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
*
* @copyright 2013 Icinga Development Team <info@icinga.org>
* @license http://www.gnu.org/licenses/gpl-2.0.txt GPL, version 2
* @author Icinga Development Team <info@icinga.org>
*/
// {{{ICINGA_LICENSE_HEADER}}}
define(['components/app/container', 'jquery', 'logging', 'icinga/util/async', 'URIjs/URI', 'URIjs/URITemplate'],
function(Container, $, logger, async, URI) {
"use strict";
/**
* Master/Detail grid component handling history, link behaviour, selection (@TODO 3788) and updates of
* grids
*
* @param {HTMLElement} The outer element to apply the behaviour on
*/
return function(gridDomNode) {
/**
* Reference to the outer container of this component
*
* @type {*|HTMLElement}
*/
gridDomNode = $(gridDomNode);
/**
* A container component to use for updating URLs and content
*
* @type {Container}
*/
this.container = null;
/**
* The node wrapping the table and pagination
*
* @type {jQuery}
*/
var contentNode;
/**
* jQuery matcher result of the form components wrapping the controls
*
* @type {jQuery}
*/
var controlForms;
/**
* Detect and select control forms for this table and return them
*
* Form controls are either all forms underneath the of the component, but not underneath the table
* or in a dom node explicitly tagged with the 'data-icinga-actiongrid-controls' attribute
*
* @param {jQuery|null} domContext The context to use as the root node for matching, if null
* the component node given in the constructor is used
*
* @returns {jQuery} A selector result with all forms modifying this grid
*/
var determineControlForms = function(domContext) {
domContext = domContext || gridDomNode;
var controls = $('[data-icinga-grid-controls]', domContext);
if (controls.length > 0) {
return $('form', controls);
} else {
return $('form', domContext).filter(function () {
return $(this).parentsUntil(domContext, 'table').length === 0;
});
}
};
/**
* Detect and select the dom of all tables displaying content for this mainDetailGrid component
*
* The table can either explicitly tagged with the 'data-icinga-grid-content' attribute, if not every table
* underneath the components root dom will be used
*
* @param {jQuery|null} domContext The context to use as the root node for matching, if null
* the component node given in the constructor is used
*
* @returns {jQuery} A selector result with all tables displaying information in the
* grid
*/
var determineContentTable = function(domContext) {
domContext = domContext || gridDomNode;
var maindetail = $('[data-icinga-grid-content]', domContext);
if (maindetail.length > 0) {
return maindetail;
} else {
return $('table', domContext);
}
};
/**
* Register the row links of tables using the first link found in the table (no matter if visible or not)
*
* Row level links can only be realized via JavaScript, so every row should provide additional links for
* Users that don't have javascript enabled
*
* @param {jQuery|null} domContext The rootnode to use for selecting rows or null to use contentNode
*/
this.registerTableLinks = function(domContext) {
domContext = domContext || contentNode;
this.container.disableClickHandler();
$('tbody tr', domContext).on('click', function(ev) {
var targetEl = ev.target || ev.toElement || ev.relatedTarget;
if (targetEl.nodeName.toLowerCase() === "a") {
// test if the URL is on the current server, if not open it directly
if(Container.isExternalLink($(targetEl).attr('href'))) {
return true;
}
}
Container.getDetailContainer().replaceDomFromUrl($('a', this).attr('href'));
if (!ev.ctrlKey && !ev.metaKey) {
$('tr', $(this).parent()).removeClass('active');
}
$(this).addClass('active');
return false;
});
};
/**
* Register submit handler for the form controls (sorting, filtering, etc). Reloading happens in the
* current container
*/
this.registerControls = function() {
controlForms.on('submit', (function(evt) {
// append the form's parameters to the current container href
var form = $(evt.currentTarget);
var url = URI(this.container.getContainerHref());
url.search(URI.parseQuery(form.serialize()));
// reload this container
this.container.replaceDomFromUrl(url);
evt.preventDefault();
evt.stopPropagation();
return false;
}).bind(this));
};
/**
* Synchronize the current selection with the url displayed in the detail box
*/
this.syncSelectionWithDetail = function() {
$('tr', contentNode).removeClass('active');
var selection = $('a[href="' + Container.getDetailContainer().getContainerHref() + '"]', contentNode).
parentsUntil('table', 'tr');
selection.addClass('active');
};
/**
* Register listener for history changes in the detail box
*/
this.registerHistoryChanges = function() {
Container.getDetailContainer().registerOnUpdate(this.syncSelectionWithDetail.bind(this));
};
/**
* Create this component, setup listeners and behaviour
*/
this.construct = function(target) {
this.container = new Container(target);
logger.debug("Registering table events for ", this.container.containerType);
controlForms = determineControlForms();
contentNode = determineContentTable();
this.registerControls();
this.registerTableLinks();
this.registerHistoryChanges();
};
this.construct(gridDomNode);
};
});

74
public/js/icinga/icinga.js
View File

@ -30,8 +30,10 @@ define([
'jquery',
'logging',
'icinga/util/async',
'icinga/componentLoader'
], function ($, log, async,components) {
'icinga/componentLoader',
'components/app/container',
'URIjs/URI'
], function ($, log, async, components, Container, URI) {
'use strict';
/**
@ -39,15 +41,79 @@ define([
*/
var Icinga = function() {
var ignoreHistoryChanges = false;
var initialize = function () {
components.load();
registerGenericHistoryHandler();
log.debug("Initialization finished");
};
$(document).ready(initialize.bind(this));
/**
* Register handler for handling the history state generically
*
*/
var registerGenericHistoryHandler = function() {
var lastUrl = URI(window.location.href);
History.Adapter.bind(window, 'popstate', function() {
if (ignoreHistoryChanges) {
return;
}
log.debug(URI(History.getState().url).relativeTo(lastUrl).href());
var relativeURLPart = URI(History.getState().url).relativeTo(lastUrl).href();
if (relativeURLPart !== "" && relativeURLPart[0] === '?' ) {
// same controller, different parameters, so only update the container
Container.getMainContainer().syncWithCurrentUrl();
Container.getDetailContainer().syncWithCurrentUrl();
} else {
gotoUrl(History.getState().url);
}
lastUrl = URI(window.location.href);
});
};
var gotoUrl = function(href) {
if (typeof document.body.pending !== 'undefined') {
document.body.pending.abort();
}
$.ajax({
success: function(domNodes) {
ignoreHistoryChanges = true;
History.pushState({}, document.title, href);
$('body').empty().append($(domNodes));
ignoreHistoryChanges = false;
components.load();
},
url: href
});
return false;
};
if (Modernizr.history) {
$(document.body).on('click', '#icinganavigation, #icingatopbar', function(ev) {
var targetEl = ev.target || ev.toElement || ev.relatedTarget;
if (targetEl.tagName.toLowerCase() !== 'a') {
return true;
}
var href = $(targetEl).attr('href');
if (Container.isExternalLink(href)) {
return true;
}
ev.preventDefault();
ev.stopPropagation();
gotoUrl(href);
return false;
});
}
$(document).ready(initialize.bind(this));
return {
components: components
components: components,
gotoUrl: gotoUrl
};
};
return new Icinga();

199
public/js/icinga/util/async.js
View File

@ -1,199 +0,0 @@
// {{{ICINGA_LICENSE_HEADER}}}
/**
* This file is part of Icinga 2 Web.
*
* Icinga 2 Web - Head for multiple monitoring backends.
* Copyright (C) 2013 Icinga Development Team
*
* This program is free software; you can redistribute it and/or
* modify it under the terms of the GNU General Public License
* as published by the Free Software Foundation; either version 2
* of the License, or (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program; if not, write to the Free Software
* Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
*
* @copyright 2013 Icinga Development Team <info@icinga.org>
* @license http://www.gnu.org/licenses/gpl-2.0.txt GPL, version 2
* @author Icinga Development Team <info@icinga.org>
*/
// {{{ICINGA_LICENSE_HEADER}}}
/*global Icinga:false define:false require:false base_url:false console:false */
(function() {
"use strict";
var asyncMgrInstance = null;
define(['logging','jquery'],function(log,$,containerMgr) {
var headerListeners = {};
var pending = {
};
var encodeForURL = function(param) {
return encodeURIComponent(param);
};
var getCurrentGETParameters = function() {
var currentGET = window.location.search.substring(1).split("&");
var params = {};
if(currentGET.length > 0) {
$.each(currentGET, function(idx, elem) {
var keyVal = elem.split("=");
params[keyVal[0]] = encodeForURL(keyVal[1]);
});
}
return params;
}
;
var pushGet = function(param, value, url) {
url = url || (window.location.origin+window.location.pathname);
var params = getCurrentGETParameters();
params[param] = encodeForURL(value);
var search = "?";
for (var name in params) {
if (name === "" || typeof params[name] == "undefined") {
continue;
}
if (search != "?")
search += "&";
search += name+"="+params[name];
}
return url+search+"#"+window.location.hash;
};
var getDOMForDestination = function(destination) {
var target = destination;
if (typeof destination === "string") {
target = containerMgr.getContainer(destination)[0];
} else if(typeof destination.context !== "undefined") {
target = destination[0];
}
return target;
};
var applyHeaderListeners = function(headers) {
for (var header in headerListeners) {
if (headers.getResponseHeader(header) === null) {
// see if the browser/server converts headers to lowercase
if (headers.getResponseHeader(header.toLowerCase()) === null) {
continue;
}
header = header.toLowerCase();
}
var value = headers.getResponseHeader(header);
var listeners = headerListeners[header];
for (var i=0;i<listeners.length;i++) {
listeners[i].fn.apply(listeners[i].scope, [value, header, headers]);
}
}
};
var handleResponse = function(html, status, response) {
applyHeaderListeners(response);
if(this.destination) {
containerMgr.updateContainer(this.destination,html,this);
} else {
// tbd
// containerMgr.createPopupContainer(html,this);
}
};
var handleFailure = function(result,error) {
if(error === "abort") {
return;
}
log.error("Error loading resource",error,arguments);
if(this.destination) {
containerMgr.updateContainer(this.destination,result.responseText,this);
}
};
var isParent = function(dom,parentToCheck) {
while(dom.parentNode) {
dom = dom.parentNode;
if(dom === parentToCheck) {
return true;
}
}
return false;
};
var CallInterface = function() {
this.__internalXHRImplementation = $.ajax;
this.clearPendingRequestsFor = function(destination) {
if(!$.isArray(pending)) {
pending = [];
return;
}
var resultset = [];
for(var x=0;x<pending.length;x++) {
var container = pending[x].DOM;
if(isParent(container,getDOMForDestination(destination))) {
pending[x].request.abort();
} else {
resultset.push(pending[x]);
}
}
pending = resultset;
};
this.createRequest = function(url,data) {
var req = this.__internalXHRImplementation({
type : data ? 'POST' : 'GET',
url : url,
data : data,
headers: { 'X-Icinga-Accept': 'text/html' }
});
req.url = url;
req.done(handleResponse.bind(req));
req.fail(handleFailure.bind(req));
return req;
};
this.loadToTarget = function(destination,url,data) {
if(destination) {
log.debug("Laoding to container", destination, url);
this.clearPendingRequestsFor(destination);
}
var req = this.createRequest(url,data);
if(destination) {
pending.push({
request: req,
DOM: getDOMForDestination(destination)
});
req.destination = destination;
}
if (destination == "icinga-main") {
history.pushState(data, document.title, url);
} else {
url = pushGet("c["+destination+"]", url);
history.pushState(data, document.title, url);
}
return req;
};
this.loadCSS = function(name) {
};
this.registerHeaderListener = function(header, fn, scope) {
headerListeners[header] = headerListeners[header] || [];
headerListeners[header].push({fn: fn, scope:scope});
};
};
return new CallInterface();
});
})();

7
public/js/main.js
View File

@ -1,10 +1,13 @@
requirejs.config({
'baseUrl': window.base_url + '/js',
'urlArgs': "bust=" + (new Date()).getTime(),
'paths': {
'jquery': 'vendor/jquery-1.8.3',
'jqueryPlugins': 'vendor/jqueryPlugins/',
'bootstrap': 'vendor/bootstrap/bootstrap.min',
'history': 'vendor/history',
'logging': 'icinga/util/logging',
'URIjs': 'vendor/uri',
'datetimepicker': 'vendor/bootstrap/datetimepicker.min'
},
'shim': {
@ -18,7 +21,8 @@ requirejs.config({
});
define(['jquery', 'history'], function ($) {
requirejs(['bootstrap'], function() {
requirejs(['bootstrap', 'jqueryPlugins/wookmark'], function() {
requirejs(['datetimepicker']);
});
@ -27,4 +31,5 @@ define(['jquery', 'history'], function ($) {
window.jQuery = $;
window.Icinga = Icinga;
});
});

2
public/js/vendor/history.js vendored
View File

File diff suppressed because one or more lines are too long

34
test/js/test/icinga/asyncTest.js
View File

@ -1,34 +0,0 @@
// {{LICENSE_HEADER}}
// {{LICENSE_HEADER}}
var should = require("should");
var rjsmock = require("requiremock.js");
var asyncMock = require("asyncmock.js");
GLOBAL.document = $('body');
describe('The async module', function() {
it("Allows to react on specific headers", function(done) {
rjsmock.purgeDependencies();
rjsmock.registerDependencies({
'icinga/container' : {
updateContainer : function() {},
createPopupContainer: function() {}
}
});
requireNew("icinga/util/async.js");
var async = rjsmock.getDefine();
var headerValue = null;
asyncMock.setNextAsyncResult(async, "result", false, {
'X-Dont-Care' : 'Ignore-me',
'X-Test-Header' : 'Testme123'
});
async.registerHeaderListener("X-Test-Header", function(value, header) {
should.equal("Testme123", value);
done();
},this);
var test = async.createRequest();
});
});

3
test/js/testlib/requiremock.js
View File

@ -47,7 +47,7 @@ var logger = {
/**
* Mock for the 'define' function of requireJS, behaves exactly the same
* except that it looks up the dependencies in the list provided by registerDepencies()
* except that it looks up the dependencies in the list provided by registerDependencies()
* A module that hasn't been defined with a name can be fetched with getDefined() (without parameter)
*
**/
@ -88,6 +88,7 @@ var defineMock = function() {
**/
function initRequireMethods() {
GLOBAL.$ = require('jquery');
GLOBAL.jQuery = GLOBAL.$;
GLOBAL.requirejs = requireJsMock;
GLOBAL.define = defineMock;
registeredDependencies = {