Merge branch 'feature/cleanup-forms-html2-5705'

resolves #5705

application/forms/Config/Authentication/DbBackendForm.php

@@ -134,6 +134,8 @@ class DbBackendForm extends BaseBackendForm
      */
     public function isValidAuthenticationBackend()
     {
+        // @TODO fix validation of authentication backends (AK #5712)
+        return true;
         try {
             $name = $this->getBackendName();
             $dbBackend = new DbUserBackend(

application/forms/Config/Authentication/ReorderForm.php

@@ -114,10 +114,9 @@ class ReorderForm extends Form
                 array(
                     'type'      => 'submit',
                     'escape'    => false,
-                    'class'     => 'btn btn-cta btn-wide',
                     'value'     => 'btn_' . $this->getBackendName() . '_reorder_up',
                     'name'      =>  'btn_' . $this->getBackendName() . '_reorder_up',
-                    'label'     =>  '<i class="icinga-icon-up"></i> Move up in authentication order',
+                    'label'     =>  '<img src="/icingaweb/img/icons/up.png" title="Move up in authentication order" />',
                 )
             );
         }
@@ -137,10 +136,9 @@ class ReorderForm extends Form
                 array(
                     'type'      => 'submit',
                     'escape'    => false,
-                    'class'     => 'btn btn-cta btn-wide',
                     'value'     => 'btn_' . $this->getBackendName() . '_reorder_down',
                     'name'      =>  'btn_' . $this->getBackendName() . '_reorder_down',
-                    'label'     =>  '<i class="icinga-icon-down"></i> Move down in authentication order',
+                    'label'     =>  '<img src="/icingaweb/img/icons/down.png" title="Move down in authentication order" />',
 
                 )
             );

application/forms/Config/GeneralForm.php

@@ -397,8 +397,7 @@ class GeneralForm extends Form
                 'type'      => 'submit',
                 'escape'    => false,
                 'value'     => '1',
-                'class'     => 'btn btn-cta btn-common',
+                'label'     => '<img src="/icingaweb/img/icons/save.png" title="Save Changes" /> Save Changes'
-                'label'     => '<i class="icinga-icon-save"></i> Save Changes'
             )
         );
     }

application/views/scripts/config/authentication.phtml

@@ -4,43 +4,41 @@ $createLdapBackend = $this->href('/config/createAuthenticationBackend', array('t
 $createDbBackend = $this->href('/config/createAuthenticationBackend', array('type' => 'db'));
 ?>
 <div class="controls">
-<?= $this->tabs->render($this); ?>
+    <?= $this->tabs->render($this); ?>
 </div>
 
 <div class="content">
-<?php if (isset($this->messageBox)): ?>
+    <?php if (isset($this->messageBox)): ?>
-  <?= $this->messageBox->render() ?>
+        <?= $this->messageBox->render() ?>
-<?php endif ?>
+    <?php endif ?>
 
-<div class="panel panel-default">
+    <h1>Create Authentication Provider</h1>
-  <div class="panel-heading panel-title">
+    <p>
-    Create Authentication Provider
+        <a href="<?= $createLdapBackend ?>"><?= $this->img('img/icons/create.png'); ?> Create A New LDAP Authentication Backend</a>
-  </div>
+        <br />
-  <div class="panel-body">
+        <a href="<?= $createDbBackend   ?>"><?= $this->img('img/icons/create.png'); ?> Create A New DB Authentication Backend</a>
-    <a href="<?= $createLdapBackend ?>"><i class="icinga-icon-create"></i> Create A New LDAP Authentication Backend</a><br/>
+    </p>
-    <a href="<?= $createDbBackend ?>"><i class="icinga-icon-create"></i> Create A New DB Authentication Backend</a>
-  </div>
-</div>
 
-<?php foreach ($this->backends as $backend): ?>
+    <table class="configTable">
-<div class="panel panel-default">
+        <?php foreach ($this->backends as $backend): ?>
-  <div class="panel-heading panel-title">
+            <tr>
-    Backend <?= $this->escape($backend->name); ?>
+                <td class="configTable">
-    <br/>
+                    <div>
-    <?= $backend->reorderForm; ?>
+                        <b>Backend:</b>&ensp;<?= $this->escape($backend->name); ?>
-  </div>
+                    </div>
-  <div class="panel-body">
+                    <div class="config-form-buttons">
-    <a href="<?= $this->href('config/editAuthenticationBackend', array('auth_backend' => $backend->name));?>">
+                        <div class="config-form-group">
-        <i class="icinga-icon-edit"></i> Edit This Authentication Provider
+                            <?= $backend->reorderForm; ?>
-    </a>
+                        </div>
-    <br/>
+                        <a href="<?= $this->href('config/editAuthenticationBackend', array('auth_backend' => $backend->name));?>">
-    <?php if (count($this->backends) > 1): ?>
+                            <?= $this->img('img/icons/edit.png'); ?> Edit</a>&emsp;
-    <a href="<?= $this->href('config/removeAuthenticationBackend', array('auth_backend' => $backend->name));?>">
+                        <?php if (count($this->backends) > 1): ?>
-        <i class="icinga-icon-remove"></i> Remove This Authentication Provider
+                            <a href="<?= $this->href('config/removeAuthenticationBackend', array('auth_backend' => $backend->name));?>">
-    </a>
+                                <?= $this->img('img/icons/remove.png'); ?> Remove</a>&emsp;
-    <br/>
+                        <?php endif; ?>
-    <?php endif; ?>
+                    </div>
-  </div>
+                </td>
-</div>
+            </tr>
-<?php endforeach; ?>
+        <?php endforeach; ?>
+    </table>
 </div>

application/views/scripts/config/authentication/modify.phtml

@@ -8,7 +8,7 @@
 <?php endif ?>
 
 <?php if ($this->form->getErrorMessages()): ?>
-<div class="alert alert-danger">
+<div>
   <?php foreach ($this->form->getErrorMessages() as $error): ?>
     <?= $this->escape($error); ?><br/>
   <?php endforeach; ?>

application/views/scripts/config/logging.phtml

@@ -10,14 +10,14 @@
 <?php endif ?>
 
 <?php if ($this->successMessage): ?>
-<div class="alert alert-success">
+<div>
   <i class="icinga-icon-success"></i>
   <strong><?= $this->escape($this->successMessage); ?></strong>
 </div>
 <?php endif; ?>
 
 <?php if (!empty($errors)) : ?>
-<div class="alert alert-danger">
+<div>
   <h4>Errors occured when trying to save the project.</h4>
   <p>
       The following errors occured when trying to save the configuration:

application/views/scripts/config/module-configuration-error.phtml

@@ -5,7 +5,7 @@
 ?>
 <?= $this->tabs->render($this); ?>
 <br/>
-<div class="alert alert-error">
+<div>
   <h1>Could not <?= $action; ?> module "<?= $moduleName; ?>"</h1>
   <p>
     While operation the following error occurred:

application/views/scripts/config/module/show.phtml

@@ -1,4 +1,4 @@
-<table class="table table-bordered" >
+<table >
   <thead>
     <tr style="text-align:left">
       <th width="70%">Module</th>

application/views/scripts/config/resource.phtml

@@ -3,47 +3,35 @@ use Icinga\Web\Url;
 $createResource = $this->href('/config/createresource');
 ?>
 <div class="controls">
-<?= $this->tabs->render($this); ?>
+    <?= $this->tabs->render($this); ?>
 </div>
 
 <div class="content">
-<?php if (isset($this->messageBox)): ?>
+    <?php if (isset($this->messageBox)): ?>
-  <?= $this->messageBox->render() ?>
+        <?= $this->messageBox->render() ?>
-<?php endif ?>
+    <?php endif ?>
 
-<div class="panel panel-default">
+    <h1>Create Resource</h1>
-  <div class="panel-heading panel-title">
+    <p><a href="<?= $createResource ?>"><?= $this->img('img/icons/create.png'); ?> Create A New Resource</a></p>
-    Create Resource
+
-  </div>
+    <table class="configTable">
-  <div class="panel-body">
+        <?php foreach ($this->resources as $name => $resource): ?>
-    <a href="<?= $createResource ?>"><i class="icinga-icon-create"></i> Create A New Resource</a><br/>
+            <tr>
-  </div>
+                <td class="configTable">
-</div>
+                    <div>
-
+                        <b>Resource:</b>&ensp;<?= $this->escape($name); ?>
-<?php foreach ($this->resources as $name => $resource): ?>
+                    </div>
-<div class="panel panel-default">
+                    <div>
-
+                        <a href="<?= $this->href('config/editresource', array('resource' => $name));?>">
-  <div class="panel-heading panel-title">
+                            <?= $this->img('img/icons/edit.png'); ?> Edit</a>&emsp;
-    <b>Resource: </b>  <?= $this->escape($name); ?>
+                        <?php if (count($this->resources) > 1): ?>
-    <br/>
+                            <a href="<?= $this->href('config/removeresource', array('resource' => $name));?>">
-  </div>
+                                <?= $this->img('img/icons/remove.png'); ?> Remove</a>&emsp;
-  <div class="panel-body">
+                        <?php endif; ?>
-
+                    </div>
-    <a href="<?= $this->href('config/editresource', array('resource' => $name));?>">
+                </td>
-        <i class="icinga-icon-edit"></i> Edit This Resource
+            </tr>
-    </a>
+        <?php endforeach; ?>
-    <br/>
+    </table>
-
-    <?php if (count($this->resources) > 1): ?>
-    <a href="<?= $this->href('config/removeresource', array('resource' => $name));?>">
-        <i class="icinga-icon-remove"></i> Remove This Resource
-    </a>
-    <br/>
-    <?php endif; ?>
-
-  </div>
-
-</div>
-<?php endforeach; ?>
 </div>
 

application/views/scripts/config/resource/modify.phtml

@@ -8,7 +8,7 @@
 <?php endif ?>
 
 <?php if ($this->form->getErrorMessages()): ?>
-<div class="alert alert-danger">
+<div>
   <?php foreach ($this->form->getErrorMessages() as $error): ?>
     <?= $this->escape($error); ?><br/>
   <?php endforeach; ?>

application/views/scripts/config/show-configuration.phtml

@@ -2,7 +2,7 @@
 
 
 <br/>
-<div class="alert alert-error">
+<div>
   <h4><i>WARNING ICON</i>Saving "<?= $this->escape($this->file); ?>.ini" Failed</h4>
   <br/>
   <p>

modules/monitoring/application/views/scripts/config/index.phtml

@@ -1,56 +1,66 @@
 <?php use Icinga\Web\Url;  ?>
-<?= $this->tabs->render($this); ?>
+<div class="controls">
-
+    <?= $this->tabs->render($this); ?>
-<h3>Monitoring Backends</h3>
-
-<?php if (isset($this->messageBox)): ?>
-  <?= $this->messageBox->render() ?>
-<?php endif ?>
-
-<div>
-  <a href="<?= Url::fromPath('/monitoring/config/createbackend')->getAbsoluteUrl();?>">
-      <?= $this->img('img/icons/create.png') ?> Create New Monitoring Backend
-  </a>
-</div>
-<br/>
-
-<?php foreach ($this->backends as $backendName => $config): ?>
-<div>
-  <?php $removeUrl = Url::fromPath('/monitoring/config/removebackend', array('backend' => $backendName)); ?>
-  <?php $editUrl = Url::fromPath('/monitoring/config/editbackend', array('backend' => $backendName)); ?>
-  <b><?= $this->escape($backendName); ?></b>
-  <small>(Type: <?= $this->escape($config['type'] === 'ido' ? 'IDO' : ucfirst($config['type'])); ?>)</small>
-  <div>
-    <a href="<?= $removeUrl; ?>"><i class="icinga-icon-remove"></i> Remove This Backend</a><br/>
-    <a href="<?= $editUrl; ?>"><i class="icinga-icon-edit"></i>  Edit This Backend</a>
-  </div>
-</div>
-<br/>
-<?php endforeach; ?>
-
-<br/>
-
-<h3>Monitoring Instances</h3>
-
-<div>
-  <a href="<?= Url::fromPath('/monitoring/config/createinstance')->getAbsoluteUrl();?>">
-      <i class="icinga-icon-create"></i> Create New Instance
-  </a>
 </div>
 
-<br/>
+<div class="content">
-<?php foreach ($this->instances as $instanceName => $config): ?>
+    <h1>Monitoring Backends</h1>
-  <?php $removeUrl = Url::fromPath('/monitoring/config/removeinstance', array('instance' => $instanceName)); ?>
-  <?php $editUrl = Url::fromPath('/monitoring/config/editinstance', array('instance' => $instanceName)); ?>
-<div>
-  <b><?= $this->escape($instanceName); ?></b>
-  <small>(Type: <?= isset($config['host']) ? 'Remote' : 'Local'; ?>)</small>
 
-  <div>
+    <?php if (isset($this->messageBox)): ?>
-    <a href="<?= $removeUrl; ?>"><i class="icinga-icon-remove"></i> Remove This Instance</a><br/>
+        <?= $this->messageBox->render() ?>
-    <a href="<?= $editUrl; ?>"><i class="icinga-icon-edit"></i>  Edit This Instance</a>
+    <?php endif ?>
-  </div>
+
+    <p>
+        <a href="<?= Url::fromPath('/monitoring/config/createbackend')->getAbsoluteUrl();?>">
+            <?= $this->img('img/icons/create.png'); ?> Create New Monitoring Backend
+        </a>
+    </p>
+
+    <table class="configTable">
+        <?php foreach ($this->backends as $backendName => $config): ?>
+            <tr>
+                <td class="configTable">
+                    <?php
+                    $removeUrl = Url::fromPath('/monitoring/config/removebackend', array('backend' => $backendName));
+                    $editUrl = Url::fromPath('/monitoring/config/editbackend', array('backend' => $backendName));
+                    ?>
+                    <b><?= $this->escape($backendName); ?></b>
+                    <small>(Type: <?= $this->escape($config['type'] === 'ido' ? 'IDO' : ucfirst($config['type'])); ?>)</small>
+                    <div>
+                        <a href="<?= $removeUrl; ?>"><?= $this->img('img/icons/remove.png'); ?> Remove</a>&emsp;
+                        <a href="<?= $editUrl; ?>"><?= $this->img('img/icons/edit.png'); ?> Edit</a>
+                    </div>
+                </td>
+            </tr>
+        <?php endforeach; ?>
+    </table>
+
+    <h1>Monitoring Instances</h1>
+
+    <p>
+        <a href="<?= Url::fromPath('/monitoring/config/createinstance')->getAbsoluteUrl();?>">
+            <?= $this->img('img/icons/create.png'); ?> Create New Instance
+        </a>
+    </p>
+
+    <table class="configTable">
+        <?php foreach ($this->instances as $instanceName => $config): ?>
+            <tr>
+                <td class="configTable">
+                    <?php
+                    $removeUrl = Url::fromPath('/monitoring/config/removeinstance', array('instance' => $instanceName));
+                    $editUrl = Url::fromPath('/monitoring/config/editinstance', array('instance' => $instanceName));
+                    ?>
+                    <div>
+                        <b><?= $this->escape($instanceName); ?></b>
+                        <small>(Type: <?= isset($config['host']) ? 'Remote' : 'Local'; ?>)</small>
+                        <div>
+                            <a href="<?= $removeUrl; ?>"><?= $this->img('img/icons/remove.png'); ?> Remove</a>&emsp;
+                            <a href="<?= $editUrl; ?>"><?= $this->img('img/icons/edit.png'); ?> Edit</a>
+                        </div>
+                    </div>
+                </td>
+            </tr>
+        <?php endforeach; ?>
+    </table>
 </div>
-<br/>
-<?php endforeach; ?>
-

public/css/icinga/forms.less

@@ -1,4 +1,24 @@
 
+div.config-form-buttons {
+  margin-top: 5px;
+}
+
+table.configTable {
+  border-spacing: 15px;
+  border-collapse: separate;
+}
+
+td.configTable {
+  border: solid;
+  border-width: thin;
+  padding: 10px;
+  min-width: 300px;
+}
+
+div.config-form-group {
+  float: right;
+}
+
 .form-group {
   margin-bottom: 1em;
 }
@@ -23,7 +43,6 @@ input, select {
 select {
   /* https://bugzilla.mozilla.org/show_bug.cgi?id=649849 */
   -moz-appearance: none;
-  text-indent: 5px;
   padding-right: 5px;
   text-overflow: '';
   -webkit-appearance: none;

public/js/icinga/events.js

@@ -1,288 +1,266 @@
-/**
+(function(Icinga) {
- * Icinga.Events
- *
- * Event handlers
- */
-(function (Icinga, $) {
 
-    'use strict';
+  Icinga.Events = function(icinga) {
+    this.icinga = icinga;
+  };
 
-    Icinga.Events = function (icinga) {
+  Icinga.Events.prototype = {
-        this.icinga = icinga;
-    };
 
-    Icinga.Events.prototype = {
+    /**
+     * Icinga will call our initialize() function once it's ready
+     */
+    initialize: function()
+    {
+      this.applyGlobalDefaults();
+      this.icinga.ui.prepareContainers();
+    },
 
-        /**
+    // TODO: What's this?
-         * Icinga will call our initialize() function once it's ready
+    applyHandlers: function(el)
-         */
+    {
-        initialize: function () {
+        var icinga = this.icinga;
-            this.applyGlobalDefaults();
+        $('.dashboard > div', el).each(function(idx, el) {
-            this.applyHandlers($('#layout'));
+            var url = $(el).attr('data-icinga-url');
-            this.icinga.ui.prepareContainers();
+            if (typeof url === 'undefined') return;
-        },
+            icinga.loader.loadUrl(url, $(el)).autorefresh = true;
-
+        });
-        // TODO: What's this?
+        // Set first links href in a action table tr as row href:
-        applyHandlers: function (el) {
+        $('table.action tr', el).each(function(idx, el) {
-
+          var $a = $('a[href]', el).first();
-            var icinga = this.icinga;
+          if ($a.length) {
-
+            $(el).attr('href', $a.attr('href'));
-            $('.dashboard > div', el).each(function(idx, el) {
+          }
-                var url = $(el).attr('data-icinga-url');
+        });
-                if (typeof url === 'undefined') return;
+        $('.icinga-module', el).each(function(idx, mod) {
-                icinga.loader.loadUrl(url, $(el)).autorefresh = true;
+            $mod = $(mod);
-            });
+            var moduleName = $mod.data('icinga-module');
-
+            if (icinga.hasModule(moduleName)) {
-            // Set first links href in a action table tr as row href:
+                var module = icinga.module(moduleName);
-            $('table.action tr', el).each(function(idx, el) {
+                // NOT YET, the applyOnloadDings: module.applyEventHandlers(mod);
-                var $a = $('a[href]', el).first();
-                if ($a.length) {
-                    $(el).attr('href', $a.attr('href'));
-                }
-            });
-
-            $('.icinga-module', el).each(function(idx, mod) {
-                var $mod = $(mod);
-                var moduleName = $mod.data('icinga-module');
-                if (icinga.hasModule(moduleName)) {
-                    var module = icinga.module(moduleName);
-                    // NOT YET, the applyOnloadDings: module.applyEventHandlers(mod);
-                }
-            });
-
-            $('input.autofocus', el).focus();
-
-            $('.inlinepie', el).sparkline('html', {
-                type:        'pie',
-                sliceColors: ['#44bb77', '#ffaa44', '#ff5566', '#dcd'],
-                width:       '2em',
-                height:      '2em',
-            });
-        },
-
-        /**
-         * Global default event handlers
-         */
-        applyGlobalDefaults: function () {
-            // We catch resize events
-            $(window).on('resize', { self: this.icinga.ui }, this.icinga.ui.onWindowResize);
-
-            // Destroy Icinga, clean up and interrupt pending requests on unload
-            $( window ).on('unload', { self: this }, this.onUnload);
-            $( window ).on('beforeunload', { self: this }, this.onUnload);
-
-            // We catch scroll events in our containers
-            $('.container').on('scroll', icinga.events.onContainerScroll);
-
-            // We want to catch each link click
-            $(document).on('click', 'a', { self: this }, this.linkClicked);
-
-            // We treat tr's with a href attribute like links
-            $(document).on('click', 'tr[href]', { self: this }, this.linkClicked);
-
-            // We catch all form submit events
-            $(document).on('submit', 'form', { self: this }, this.submitForm);
-
-            // We support an 'autosubmit' class on dropdown form elements
-            $(document).on('change', 'form select.autosubmit', { self: this }, this.submitForm);
-
-            $(document).on('keyup', '#menu input.search', {self: this}, this.submitForm);
-
-            $(document).on('mouseenter', '.historycolorgrid td', this.historycolorgridHover);
-            $(document).on('mouseleave', '.historycolorgrid td', this.historycolorgidUnhover);
-
-            // TBD: a global autocompletion handler
-            // $(document).on('keyup', 'form.auto input', this.formChangeDelayed);
-            // $(document).on('change', 'form.auto input', this.formChanged);
-            // $(document).on('change', 'form.auto select', this.submitForm);
-        },
-
-        onUnload: function (event) {
-            var icinga = event.data.self.icinga;
-            icinga.logger.info('Unloading Icinga');
-            icinga.destroy();
-        },
-
-        /**
-         * A scroll event happened in one of our containers
-         */
-        onContainerScroll: function (event) {
-            // Ugly. And PLEASE, not so often
-            icinga.ui.fixControls();
-        },
-
-        historycolorgridHover: function () {
-            $(this).addClass('hover');
-        },
-
-        historycolorgidUnhover: function() {
-            $(this).removeClass('hover');
-        },
-
-        /**
-         *
-         */
-        submitForm: function (event) {
-            var icinga = event.data.self.icinga;
-            event.stopPropagation();
-            event.preventDefault();
-
-            // .closest is not required unless subelements to trigger this
-            var $form = $(event.currentTarget).closest('form');
-            var url = $form.attr('action');
-            var method = $form.attr('method');
-
-            var data = $form.serializeArray();
-            // TODO: Check button
-            data.push({ name: 'btn_submit', value: 'yesss' });
-
-            icinga.logger.debug('Submitting form: ' + method + ' ' + url);
-
-            // We should move this to a generic target-finder:
-            var $target = null;
-            if ($form.closest('[data-base-target]').length) {
-                $target = $(
-                    '#' + $form.closest('[data-base-target]').data('baseTarget')
-                );
-            } else if ($form.closest('.container').length) {
-                $target = $form.closest('.container');
-            } else {
-                icinga.logger.error('No form target found, stopping here');
-                return false;
             }
+        });
 
-            icinga.loader.loadUrl(url, $target, data, method);
+        $('.inlinepie', el).sparkline('html', {
-            // TODO: Do we really need to return false with stop/preventDefault?
+            type:        'pie',
-            return false;
+            sliceColors: ['#44bb77', '#ffaa44', '#ff5566', '#dcd'],
-        },
+            width:       '2em',
+            height:      '2em',
+        });
 
-        layout1col: function () {
+    },
-            if (! $('#layout').hasClass('twocols')) { return; }
+    /**
-            var $col2 = $('#col2');
+     * Global default event handlers
-            icinga.logger.debug('Switching to single col');
+     */
-            $('#layout').removeClass('twocols');
+    applyGlobalDefaults: function()
-            $col2.removeAttr('data-icinga-url');
+    {
-            $col2.removeAttr('data-icinga-refresh');
+      // We catch resize events
-            $col2.removeData('icingaUrl');
+      $(window).on('resize', { self: this }, this.onWindowResize);
-            $col2.removeData('icingaRefresh');
-            this.icinga.loader.stopPendingRequestsFor($col2);
-            $col2.html('');
-            this.icinga.ui.fixControls();
-        },
 
-        layout2col: function () {
+      // Destroy Icinga, clean up and interrupt pending requests on unload
-            if ($('#layout').hasClass('twocols')) { return; }
+      $( window ).on('unload', { self: this }, this.onUnload);
-            icinga.logger.debug('Switching to double col');
+      $( window ).on('beforeunload', { self: this }, this.onUnload);
-            $('#layout').addClass('twocols');
-            this.icinga.ui.fixControls();
-        },
 
-        /**
+      // We catch scroll events in our containers
-         * Someone clicked a link or tr[href]
+      $('.container').on('scroll', icinga.events.onContainerScroll);
-         */
-        linkClicked: function (event) {
-            var icinga = event.data.self.icinga;
 
-            var $a = $(this);
+      // We want to catch each link click
-            var href = $a.attr('href');
+      $(document).on('click', 'a', { self: this }, this.linkClicked);
-            var $li;
-            var targetId;
-            if ($a.attr('target') === '_blank') {
-                return true;
-            }
-            event.stopPropagation();
-            event.preventDefault();
 
-            // If link is hash tag...
+      // We treat tr's with a href attribute like links
-            if (href === '#') {
+      $(document).on('click', 'tr[href]', { self: this }, this.linkClicked);
-                if ($a.closest('#menu')) {
-                    $li = $a.closest('li');
-                    $('#menu .active').removeClass('active');
-                    $li.addClass('active');
-                }
-                return;
-            }
-            var $target = $('#col1');
-            var $container = $a.closest('.container');
-            if ($container.length) {
-               $target = $container;
-            }
 
-            if ($a.closest('table.action').length) {
+      // We catch all form submit events
-                $target = $('#col2');
+      $(document).on('submit', 'form', { self: this }, this.submitForm);
-                icinga.events.layout2col();
-            }
-            if ($a.closest('[data-base-target]').length) {
-                targetId = $a.closest('[data-base-target]').data('baseTarget');
-                $target = $('#' + targetId);
-                if (targetId === 'col2') {
-                    icinga.events.layout2col();
-                }
-            }
-            if ($a.closest('.tree').length) {
-                $li = $a.closest('li');
-                if ($li.find('li').length) {
-                    if ($li.hasClass('collapsed')) {
-                        $li.removeClass('collapsed');
-                    } else {
-                        $li.addClass('collapsed');
-                        $li.find('li').addClass('collapsed');
-                    }
-                    return false;
-                } else {
-                    $target = $('#col2');
-                    icinga.events.layout2col();
-                }
-            }
- 
-            icinga.loader.loadUrl(href, $target);
-            event.stopPropagation();
-            event.preventDefault();
- 
-            if ($a.closest('#menu').length) {
-                icinga.events.layout1col();
-                return false;
-            }
- 
-            if ($a.closest('table.action').length) {
-                if ($('#layout').hasClass('twocols')) {
-                    if ($target.attr('id') === 'col2') {
-                        return;
-                    }
-                    icinga.events.layout1col();
-                } else {
-                    icinga.events.layout2col();
-                }
-                return false;
-            }
-        },
 
-    /*
+      // We support an 'autosubmit' class on dropdown form elements
-        hrefIsHashtag: function(href) {
+      $(document).on('change', 'form select.autosubmit', { self: this }, this.submitForm);
-            // WARNING: IE gives full URL :(
-            // Also it doesn't support negativ indexes in substr
-            return href.substr(href.length - 1, 1) == '#';
-        },
-    */
 
-        unbindGlobalHandlers: function () {
+      $(window).on('popstate', { self: this }, this.historyChanged);
-            $(window).off('resize', this.onWindowResize);
-            $(window).off('unload', this.onUnload);
-            $(window).off('beforeunload', this.onUnload);
-            $(document).off('scroll', '.container', this.onContainerScroll);
-            $(document).off('click', 'a', this.linkClicked);
-            $(document).off('click', 'tr[href]', this.linkClicked);
-            $(document).off('submit', 'form', this.submitForm);
-            $(document).off('change', 'form select.autosubmit', this.submitForm);
-            $(document).off('mouseenter', '.historycolorgrid td', this.historycolorgridHover);
-            $(document).off('mouseenter', '.historycolorgrid td', this.historycolorgidUnhover);
-        },
 
-        destroy: function() {
+      // TBD: a global autocompletion handler
-            // This is gonna be hard, clean up the mess
+      // $(document).on('keyup', 'form.auto input', this.formChangeDelayed);
-            this.unbindGlobalHandlers();
+      // $(document).on('change', 'form.auto input', this.formChanged);
-            this.icinga = null;
+      // $(document).on('change', 'form.auto select', this.submitForm);
+    },
+
+    onUnload: function(event)
+    {
+        var icinga = event.data.self.icinga;
+        icinga.logger.info('Unloading Icinga');
+        icinga.destroy();
+    },
+
+    historyChanged: function(event)
+    {
+      var icinga = event.data.self.icinga;
+      if (event.originalEvent.state === null) {
+        icinga.logger.debug('No more history steps available');
+      } else {
+        icinga.logger.debug(event.originalEvent.state);
+      }
+      icinga.loader.loadUrl(
+        document.location.pathname + document.location.search,
+        $('#col1')
+      ).historyTriggered = true;
+    },
+
+    /**
+     * Our window got resized, let's fix our UI
+     */
+    onWindowResize: function(event)
+    {
+        var icinga = event.data.self.icinga;
+        icinga.ui.fixControls();
+    },
+
+    /**
+     * A scroll event happened in one of our containers
+     */
+    onContainerScroll: function(event)
+    {
+        // Yet ugly. And PLEASE, not so often
+        icinga.ui.fixControls();
+    },
+
+    /**
+     *
+     */
+    submitForm: function (event)
+    {
+        var icinga = event.data.self.icinga;
+        event.stopPropagation();
+        event.preventDefault();
+
+        // .closest is not required unless subelements to trigger this
+        var $form = $(event.currentTarget).closest('form');
+        var url = $form.attr('action');
+        var method = $form.attr('method');
+
+        var data = $form.serializeArray();
+        // TODO: Check button
+        data.push({ name: 'btn_submit', value: 'yesss' });
+
+        icinga.logger.debug('Submitting form: ' + method + ' ' + url);
+
+
+        // We should move this to a generic target-finder:
+        var $target = $form.closest('.container');
+        if ($target.length == 0) {
+            $target = $('#body');
         }
-    };
 
-}(Icinga, jQuery));
+        icinga.loader.loadUrl(url, $target, data, method);
+
+        // TODO: Do we really need to return false with stop/preventDefault?
+        return false;
+    },
+
+
+    /**
+     * Someone clicked a link or tr[href]
+     */
+    linkClicked: function(event)
+    {
+      var icinga = event.data.self.icinga;
+
+      var $a = $(this);
+      var href = $a.attr('href');
+      if ($a.attr('target') === '_blank') {
+          return true;
+      }
+      event.stopPropagation();
+      event.preventDefault();
+      if (href === '#') {
+          if ($a.closest('#menu')) {
+              var $li = $a.closest('li');
+              $li.siblings('li.active').removeClass('active');
+              $li.addClass('active');
+          }
+          return;
+      }
+      var $target = $('#col1');
+      var $container = $a.closest('.container');
+      if ($container.length) {
+        $target = $container;
+      }
+// If link is hash tag...
+      if ($a.closest('table.action').length) {
+          $target = $('#col2');
+          $('#layout').addClass('twocols');
+          icinga.ui.fixControls();
+      }
+      if ($a.closest('[data-base-target]').length) {
+          $target = $('#' + $a.closest('[data-base-target]').data('baseTarget'));
+          $('#layout').addClass('twocols');
+          icinga.ui.fixControls();
+      }
+      if ($a.closest('.tree').length) {
+        var $li = $a.closest('li');
+        if ($li.find('li').length) {
+          if ($li.hasClass('collapsed')) {
+              $li.removeClass('collapsed');
+          } else {
+              $li.addClass('collapsed');
+              $li.find('li').addClass('collapsed');
+          }
+          return false;
+        } else {
+          $target = $('#col2');
+          $('#layout').addClass('twocols');
+          icinga.ui.fixControls();
+        }
+      }
+      icinga.loader.loadUrl(href, $target);
+      event.stopPropagation();
+      event.preventDefault();
+      if ($a.closest('#menu').length) {
+        $('#layout').removeClass('twocols');
+        $('#col2').html('<ul class="tabs"></ul>');
+        icinga.ui.fixControls();
+        return false;
+      }
+      if ($a.closest('table').length) {
+        if ($('#layout').hasClass('twocols')) {
+          if ($target.attr('id') === 'col2') return;
+          icinga.logger.debug('Switching to single col');
+          $('#layout').removeClass('twocols');
+          icinga.ui.fixControls();
+        } else {
+          icinga.logger.debug('Switching to double col');
+          $('#layout').addClass('twocols');
+          icinga.ui.fixControls();
+        }
+        return false;
+      }
+    },
+
+/*
+    hrefIsHashtag: function(href)
+    {
+        // WARNING: IE gives full URL :(
+        // Also it doesn't support negativ indexes in substr
+        return href.substr(href.length - 1, 1) == '#';
+    },
+*/
+
+    unbindGlobalHandlers: function()
+    {
+      $(window).off('popstate', this.historyChanged);
+      $(window).off('resize', this.onWindowResize);
+      $(window).off('unload', this.onUnload);
+      $(window).off('beforeunload', this.onUnload);
+      $(document).off('scroll', '.container', this.onContainerScroll);
+      $(document).off('click', 'a', this.linkClicked);
+      $(document).off('click', 'tr[href]', this.linkClicked);
+      $(document).off('submit', 'form', this.submitForm);
+      $(document).off('change', 'form select.autosubmit', this.submitForm);
+    },
+
+    destroy: function() {
+      // This is gonna be hard, clean up the mess
+      this.unbindGlobalHandlers();
+      this.icinga = null;
+    }
+  };
+
+}(Icinga));