Merge branch 'feature/history-api-4303'

fixes #4303
This commit is contained in:
Marius Hein 2013-06-25 11:46:12 +02:00
commit 1ec6a43c9f
19 changed files with 241 additions and 316 deletions

3
.gitignore vendored
View File

@ -12,3 +12,6 @@ config.log
# cmd tester
test/php/bin/extcmd_test
# misc test output
test/frontend/static/public

View File

@ -1,86 +0,0 @@
/*global Icinga:false, $: false, document: false, define:false require:false base_url:false console:false */
/**
This prototype encapsulates the behaviours registered in the behaviour folder
**/
(function() {
"use strict";
var loaded = {};
define(['logging'],function(log) {
var registerBehaviourFunctions = function(behaviour) {
var enableFn = behaviour.enable, disableFn = behaviour.disable;
behaviour.enable = (function(root) {
root = root || document;
for (var jqMatcher in this.eventHandler) {
for (var event in this.eventHandler[jqMatcher]) {
log.debug("Registered behaviour: ","'"+event+"'", jqMatcher);
$(root).on(event,jqMatcher,this.eventHandler[jqMatcher][event]);
}
}
if(enableFn) {
enableFn.apply(this,arguments);
}
}).bind(behaviour);
behaviour.disable = (function(root) {
for (var jqMatcher in this.eventHandler) {
for (var event in this.eventHandler[jqMatcher]) {
log.debug("Unregistered behaviour: ","'"+event+"'", jqMatcher);
$(root).off(event,jqMatcher,this.eventHandler[jqMatcher][event]);
}
}
if (disableFn) {
disableFn.apply(this,arguments);
}
}).bind(behaviour);
};
var CallInterface = function() {
/**
* Loads a behaviour and calls successCallback with the behaviour as the parameter on success, otherwise
* the errorCallback with the errorstring as the first parameter
*
* @param name
* @param errorCallback
* @param successCallback
*/
this.enableBehaviour = function(name,errorCallback,successCallback) {
require([name],function(behaviour) {
if (typeof behaviour.eventHandler === "object") {
registerBehaviourFunctions(behaviour);
}
if (typeof behaviour.enable === "function") {
behaviour.enable();
}
loaded[name] = {
behaviour: behaviour,
active: true
};
if (typeof successCallback === "function") {
successCallback(behaviour);
}
},function(err) {
errorCallback("Could not load behaviour "+name+" "+err,err);
});
};
this.disableBehaviour = function(name) {
if(loaded[name] && loaded[name].active) {
loaded[name].disable();
}
};
};
return new CallInterface();
});
})();

View File

@ -1,118 +0,0 @@
/*global Icinga:false, document: false, define:false require:false base_url:false console:false */
/**
* ActionTable behaviour as described in
* https://wiki.icinga.org/display/cranberry/Frontend+Components#FrontendComponents-ActionTable
*
* @TODO: Row selection
*/
define(['jquery','logging','icinga/util/async'],function($,log,async) {
"use strict";
var ActionTableBehaviour = function() {
var onTableHeaderClick;
var TABLE_BASE_MATCHER = '.icinga-container table.action';
var linksInActionTable = TABLE_BASE_MATCHER+" tbody tr > a";
var actionTableRow = TABLE_BASE_MATCHER+" tbody tr";
var headerRow = TABLE_BASE_MATCHER+" > th a";
var searchField = ".icinga-container .actiontable.controls input[type=search]";
onTableHeaderClick = function (ev) {
var target = ev.currentTarget,
href = $(target).attr('href'),
destination;
if ($(target).parents('.layout-main-detail').length) {
if ($(target).parents("#icinga-main").length) {
destination = 'icinga-main';
}
else {
destination = 'icinga-detail';
}
} else {
destination = 'icinga-main';
}
async.loadToTarget(destination, href);
ev.preventDefault();
ev.stopImmediatePropagation();
return false;
};
var onLinkTagClick = function(ev) {
var target = ev.currentTarget,
href = $(target).attr('href'),
destination;
if ($(target).parents('.layout-main-detail').length) {
destination = 'icinga-detail';
} else {
destination = 'icinga-main';
}
async.loadToTarget(destination,href);
ev.preventDefault();
ev.stopImmediatePropagation();
return false;
};
var onTableRowClick = function(ev) {
ev.stopImmediatePropagation();
var target = $(ev.currentTarget),
href = target.attr('href'),
destination;
$('tr.active',target.parent('tbody').first()).removeClass("active");
target.addClass('active');
// When the tr has a href, act like it is a link
if(href) {
ev.currentTarget = target.first();
return onLinkTagClick(ev);
}
// Try to find a designated row action
var links = $("a.row-action",target);
if(links.length) {
ev.currentTarget = links.first();
return onLinkTagClick(ev);
}
// otherwise use the first anchor tag
links = $("a",target);
if(links.length) {
ev.currentTarget = links.first();
return onLinkTagClick(ev);
}
log.debug("No target for this table row found");
return false;
};
var onSearchInput = function(ev) {
ev.stopImmediatePropagation();
var txt = $(this).val();
};
this.eventHandler = {};
this.eventHandler[linksInActionTable] = {
'click' : onLinkTagClick
};
this.eventHandler[actionTableRow] = {
'click' : onTableRowClick
};
this.eventHandler[headerRow] = {
'click' : onTableHeaderClick
};
this.eventHandler[searchField] = {
'keyup' : onSearchInput
};
this.enable = function() {
};
};
return new ActionTableBehaviour();
});

View File

@ -1,94 +0,0 @@
/*global Icinga:false, document: false, define:false require:false base_url:false console:false */
/**
* Main-Detail layout behaviour as described in
* https://wiki.icinga.org/display/cranberry/Frontend+Components#FrontendComponents-Behaviour
*
*/
define(['jquery','logging','icinga/util/async'],function($,log,async) {
"use strict";
var MainDetailBehaviour = function() {
var onOuterLinkClick = function(ev) {
var a = $(ev.currentTarget),
target = a.attr("target"),
href = a.attr("href");
ev.stopImmediatePropagation();
collapseDetailView();
async.loadToTarget("icinga-main",href);
return false;
};
var onLinkTagClick = function(ev) {
var a = $(ev.currentTarget),
target = a.attr("target"),
href = a.attr("href");
// check for protocol://
if(/^[A-Z]{2,10}\:\/\//i.test(href)) {
window.open(href);
ev.stopImmediatePropagation();
return false;
}
// check for link in table header
if(a.parents('th').length > 0) {
ev.stopImmediatePropagation();
return false;
}
if(typeof target === "undefined") {
if(a.parents("#icinga-detail").length) {
async.loadToTarget("icinga-detail",href);
} else {
async.loadToTarget("icinga-main",href);
}
} else {
switch(target) {
case "main":
async.loadToTarget("icinga-main",href);
collapseDetailView();
break;
case "detail":
async.loadToTarget("icinga-detail",href);
break;
case "popup":
async.loadToTarget(null,href);
break;
default:
return true;
}
}
ev.stopImmediatePropagation();
return false;
};
var expandDetailView = function() {
$("#icinga-detail").parents(".collapsed").removeClass('collapsed');
};
var collapseDetailView = function(elementInDetailView) {
$("#icinga-detail").parents(".layout-main-detail").addClass('collapsed');
};
this.expandDetailView = expandDetailView;
this.collapseDetailView = collapseDetailView;
this.eventHandler = {
'.layout-main-detail * a' : {
'click' : onLinkTagClick
},
'a' : {
'click' : onOuterLinkClick
},
'.layout-main-detail .icinga-container#icinga-detail' : {
'focus' : expandDetailView
}
};
};
return new MainDetailBehaviour();
});

View File

@ -34,14 +34,14 @@
}
target.focus();
this.initializeContainers(target);
holder.run();
};
this.updateControlTargets = function(ctrl, req) {
$('a',ctrl).each(function() {
$(this).attr("href",req.url);
});
holder.run();
};
this.initControlBehaviour = function(root) {
@ -86,7 +86,7 @@
this.initExpandables(root);
this.drawImplicitWidgets(root);
this.loadAsyncContainers(root);
holder.run();
};
this.createPopupContainer = function(content,req) {
@ -96,7 +96,7 @@
.append($("<div>").addClass('modal-body').html(content)).appendTo(document.body);
closeButton.on("click",function() {container.remove();});
holder.run();
};
this.getContainer = function(id) {
@ -104,11 +104,11 @@
};
};
define(['jquery','logging','icinga/widgets/checkIcons','icinga/widgets/subTable','Holder'],function($,log,widgets,subTable,holder) {
define(['jquery','logging','icinga/widgets/checkIcons','icinga/widgets/subTable'], function($,log,widgets,subTable) {
if (containerMgrInstance === null) {
containerMgrInstance = new ContainerMgr($,log,widgets,subTable,holder);
containerMgrInstance = new ContainerMgr($,log,widgets,subTable);
}
return containerMgrInstance;
});
})();
})();

View File

@ -67,7 +67,12 @@ define([
loadIntoContainer: function(ctr) {
},
loadUrl: function(url, target, params) {
target = target || "icinga-main";
async.loadToTarget(target, url, params);
},
getFailedModules: function() {
return failedModules;
}

View File

@ -3,13 +3,39 @@
"use strict";
var asyncMgrInstance = null;
define(['icinga/container','logging','icinga/behaviour','jquery'],function(containerMgr,log,behaviour,$) {
define(['icinga/container','logging','jquery'],function(containerMgr,log,$) {
var pending = {
};
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[encodeURIComponent(keyVal[0])] = encodeURIComponent(keyVal[1]);
});
}
return params;
}
;
var pushGet = function(param, value, url) {
url = url || (window.location.origin+window.location.pathname);
var params = getCurrentGETParameters();
params[encodeURIComponent(param)] = encodeURIComponent(value);
var search = "?";
for (var name in params) {
if(search != "?")
search += "&";
search += name+"="+params[name];
}
return url+search+"#"+window.location.hash;
};
var getDOMForDestination = function(destination) {
var target = destination;
if(typeof destination === "string") {
@ -21,7 +47,6 @@
};
var handleResponse = function(html) {
if(this.destination) {
containerMgr.updateContainer(this.destination,html,this);
} else {
@ -94,11 +119,16 @@
});
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);
}
console.log("New url: ", url);
return req;
};
this.loadCSS = function(name) {
};
@ -106,4 +136,4 @@
return new CallInterface();
});
})();
})();

View File

@ -17,8 +17,8 @@ requirejs.config({
});
define(['jquery','Holder'], function ($) {
require(['bootstrap']);
require(['icinga/icinga'], function (Icinga) {
requirejs(['bootstrap']);
requirejs(['icinga/icinga'], function (Icinga) {
window.$ = $;
window.jQuery = $;
window.Icinga = Icinga;

1
public/js/vendor/history.js vendored Normal file

File diff suppressed because one or more lines are too long

View File

@ -0,0 +1,61 @@
var i2w = require('./i2w-config');
var casper = i2w.getTestEnv();
casper.start("http://localhost:12999/generic.html");
casper.then(function() {
casper.page.evaluate(i2w.setupRequireJs, {icinga: true});
});
casper.then(function() {
this.test.assertTitle("Icinga test page");
casper.page.evaluate(function() {
requirejs(["icinga/icinga"], function(icinga) {
icinga.loadUrl("/fragments/testFragment1.html");
});
});
/*this.waitFor(function() {
return document.querySelectorAll("#icinga-main a") ;
}, */
casper.waitForSelector("div#icinga-main a", onFirstLink);
});
var onFirstLink = function() {
var links = casper.page.evaluate(function() {
return document.querySelectorAll("div#icinga-main a");
});
// assert no reload
this.test.assertTitle("Icinga test page");
this.test.assertUrlMatch(/.*testFragment1.html/);
this.test.assertEquals(links.length, 2);
casper.clickLabel('Fragment 2');
casper.waitForText('Fragment 1', onSecondLink);
};
var onSecondLink = function() {
var links = casper.page.evaluate(function() {
return document.querySelectorAll("div#icinga-main a");
});
this.test.assertTitle("Icinga test page");
this.test.assertUrlMatch(/.*testFragment2.html/);
this.test.assertEquals(links.length, 2);
casper.page.evaluate(function() {
requirejs(["icinga/icinga"], function(icinga) {
icinga.loadUrl("/fragments/testFragment3.html?this=is_a_param", "icinga-detail");
});
});
this.wait(400, function() {
console.log(casper.page.evaluate(function() {
return window.location.href;
}));
this.test.assertUrlMatch(/testFragment2.html.*testFragment3.html/);
});
};
casper.run(function() {
this.test.done();
});

View File

@ -11,7 +11,6 @@ casper.start("http://localhost:12999/empty.html");
casper.then(function() {
casper.log(this.test);
this.test.assertTitle("Just an empty page");
});

View File

@ -93,6 +93,14 @@ if (path === null)
var openFromBase = function(url, options) {
return copenFrom.apply(casper,[this.getBaseURL(url), options]);
};
casper.on('remote.message', function(message) {
console.log(message);
});
casper.on('page.error', function(message, trace) {
console.error(message, JSON.stringify(trace));
});
exports.getTestEnv = function() {
casper.getBaseURL = getBaseURL;
@ -102,6 +110,49 @@ if (path === null)
return casper;
};
exports.setupRequireJs = function(libraries) {
if (typeof libraries === "undefined") {
libraries = {
jquery: 'vendor/jquery-1.8.3',
bootstrap: 'vendor/bootstrap.min',
eve: 'vendor/raphael/eve'
};
} else {
libraries = libraries || {};
libraries.logging = 'icinga/util/logging';
libraries.jquery = 'vendor/jquery-1.8.3';
libraries["modules/list"] = "/moduleMock";
if (libraries.bootstrap || libraries.icinga) {
libraries.bootstrap = 'vendor/bootstrap.min';
libraries.history = 'vendor/history';
libraries.eve = 'vendor/raphael/eve';
libraries.raphael = 'vendor/raphael/raphael.amd';
libraries["raphael.core"] = 'vendor/raphael/raphael.core';
libraries["raphael.svg"] = 'vendor/raphael/raphael.svg';
libraries["raphael.vml"] = 'vendor/raphael/raphael.vml';
}
if (libraries.ace) {
libraries.ace = 'vendor/ace/ace';
}
}
var bootstrap = libraries.icinga;
delete(libraries.icinga);
requirejs.config({
baseUrl: window.base_url + '/js',
paths: libraries
});
if (bootstrap) {
requirejs(['jquery', 'history']);
requirejs(['bootstrap']);
requirejs(['icinga/icinga'], function (Icinga) {
window.$ = $;
window.jQuery = $;
window.Icinga = Icinga;
window.History = History;
});
}
};
})();

View File

@ -16,6 +16,11 @@ if [ ! -x $CASPER ]; then
"Take a look at http://casperjs.org/installation.html to see how the installation works for your system"
exit 1
fi;
if [ ! -e "${DIR}/static/public" ]; then
echo "!"
ln -s "${DIR}/../../public" "${DIR}/static/public"
fi;
PARAM="0"
for arg in $@;do
@ -108,10 +113,16 @@ if [ "$EXCLUDE" != "" ];then
fi
FILELIST=`echo $FILELIST | grep -v "$NAME"`
fi;
cd $DIR/static
PROC=`ps ax|grep "SimpleHTTPServer 12999"|awk '{ print $1 }'`
if [ "$PROC" != "" ]; then
kill $PROC
fi;
python -m SimpleHTTPServer 12999&
PID=$!
cd $DIR
echo $EXEC $FILELIST
$EXEC $FILELIST
kill $PID

View File

@ -0,0 +1,6 @@
<div>
<h1>Test fragment</h1>
<a href="/fragments/testFragment2.html?this=istesting">Fragment 2</a>
<a href="/fragments/testFragment3.html">Fragment 3</a>
</div>

View File

@ -0,0 +1,6 @@
<div>
<h1>Test fragment 2</h1>
<a href="/fragments/testFragment1.html">Fragment 1</a>
<a href="/fragments/testFragment3.html">Fragment 3</a>
</div>

View File

@ -0,0 +1,6 @@
<div>
<h1>Test fragment 3</h1>
<a href="/fragments/testfragment1.html">Fragment 1</a>
<a href="/fragments/testfragment2.html">Fragment 2</a>
</div>

View File

@ -0,0 +1,39 @@
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Icinga test page</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<script>
window.base_url = "/public";
</script>
<link rel="stylesheet" href="/public/css/normalize.min.css">
<link rel="stylesheet" href="/public/css/vendor/bootstrap.css">
<link rel="stylesheet" href="/public/css/main.css">
<link rel="stylesheet" href="/public/css/vendor/jquery.qtip.min.css">
<script src="/public/js/vendor/modernizr-2.6.2.min.js"></script>
<link rel="stylesheet" href="/public/css/icinga.css">
<link rel="stylesheet" href="/public/css/vendor/bootstrap-responsive.min.css">
<script src="/public/js/vendor/require.js"></script>
</head>
<body class="cranberry">
<div class="main">
<div class="tabbable tabs-left" style="height:100%;">
</div>
<div class="layout-main-detail collapsed">
<div id="icinga-main" container-id="icinga-main" class="icinga-container">
</div>
<div id="icinga-detail" class="icinga-container " container-id="icinga-detail">
</div><!-- End of icinga-detail -->
</div><!-- End of layout-main-detail -->
</div><!-- End of main -->
</body>
</html>

View File

@ -0,0 +1,4 @@
define([], function() {
"use strict";
return {};
});

1
test/frontend/test.xml Normal file
View File

@ -0,0 +1 @@
<testsuite time="0"><testcase classname="cases/static-page-test" name="The jenkins page" time="0.626"><failure type="assertTitle">Page title is: "i4cinga-web test [Jenkins]"</failure></testcase></testsuite>