Merge branch 'feature/history-api-4303'

fixes #4303

.gitignore

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

public/js/icinga/behaviour.js

@@ -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();
-    });
-
-})();

public/js/icinga/behaviour/actionTable.js

@@ -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();
-
-});

public/js/icinga/behaviour/mainDetail.js

@@ -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();
-});
-

public/js/icinga/container.js

@@ -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,9 +104,9 @@
         };
 
     };
-    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;
 

public/js/icinga/icinga.js

@@ -68,6 +68,11 @@ define([
 
             },
         
+            loadUrl: function(url, target, params) {
+                target = target || "icinga-main";
+                async.loadToTarget(target, url, params);
+            },
+ 
             getFailedModules: function() {
                 return failedModules;
             }

public/js/icinga/util/async.js

@@ -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,9 +119,14 @@
                     });
                     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) {

public/js/main.js

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

test/frontend/cases/historyApiTest.js

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

test/frontend/cases/static-page-test.js

@@ -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");
 });
 

test/frontend/i2w-config.js

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

test/frontend/runtests

@@ -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

test/frontend/static/fragments/testFragment1.html

@@ -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>

test/frontend/static/fragments/testFragment2.html

@@ -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>

test/frontend/static/fragments/testFragment3.html

@@ -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>

test/frontend/static/generic.html

@@ -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>
+

test/frontend/static/moduleMock.js

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

test/frontend/test.xml

@@ -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>