Implement overlay as a link target

application/controllers/NodeController.php

@@ -3,7 +3,6 @@
 use Icinga\Module\Businessprocess\Controller;
 use Icinga\Module\Businessprocess\Simulation;
 use Icinga\Module\Businessprocess\Forms\ProcessForm;
-use Icinga\Module\Businessprocess\Forms\SimulationForm;
 use Icinga\Web\Url;
 
 /*
@@ -46,27 +45,16 @@ class Businessprocess_NodeController extends Controller
     {
         $bp = $this->loadBpConfig();
         $nodename = $this->getParam('node');
-        $node = $bp->getNode($nodename);
-        $details = Url::fromPath(
-            'businessprocess/node/simulate',
-            array(
-                'config' => $this->view->configName,
-                'node'   => $nodename
-            )
-        );
-        $url = sprintf(
-            'businessprocess/process/show?unlocked&config=%s#!%s',
-            $bp->getName(),
-            $details->getAbsoluteUrl()
-        );
+        $node = $this->view->node = $bp->getNode($nodename);
 
-        $this->view->form = SimulationForm::construct()
-             ->setSimulation(new Simulation($bp, $this->session()))
+        $this->view->form = $this->loadForm('simulation')
              ->setNode($node)
-              // TODO: find a better way to handle redirects
-             ->setRedirectUrl($url)
+             ->setSimulation(new Simulation($bp, $this->session()))
              ->handleRequest();
-        $this->view->node = $node;
+
+        if ($this->view->form->succeeded()) {
+            $this->render('empty');
+        }
     }
 
     public function addAction()

public/css/module.less

@@ -519,3 +519,60 @@ table.sourcecode {
         margin-right: 1px;
     }
 }
+
+#bp-overlay-container {
+  display: none;
+  position: absolute;
+  background-color: rgba(250, 250, 255, 0.98);
+  border: 0.25em solid @icinga-blue;
+  z-index: 3000;
+  top: 10%;
+  left: 20%;
+  right: 20%;
+  height: 40em;
+  max-width: 60em;
+
+  .bp-overlay-controls {
+    background-color: @icinga-blue;
+    color: white;
+    height: 2em;
+
+    a {
+        float: right;
+        line-height: 2em;
+        margin-right: 1em;
+    }
+  }
+}
+
+#layout.minimal-layout #bp-overlay-container {
+  position: fixed;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: auto;
+  height: auto;
+  border: none;
+  overflow: auto;
+
+  #bp-overlay {
+    height: auto;
+  }
+}
+
+#layout.poor-layout #bp-overlay-container {
+  left: 2%;
+  right: 2%;
+}
+
+#layout.compact-layout #bp-overlay-container {
+  left: 5%;
+  right: 5%;
+} 
+
+#bp-overlay {
+  padding: 1em;
+  overflow: auto;
+  height: 37.5em;
+}

public/js/module.js

@@ -22,19 +22,44 @@
              * Tell Icinga about our event handlers
              */
             this.module.on('beforerender', this.rememberOpenedBps);
-            this.module.on('rendered',     this.fixOpenedBps);
+            this.module.on('rendered',     this.rendered);
 
             this.module.on('click', 'table.bp.process > tbody > tr:first-child > td > a:last-child', this.processTitleClick);
             this.module.on('click', 'table.bp > tbody > tr:first-child > th', this.processOperatorClick);
+            this.module.on('click', '.bp-overlay-controls a', this.closeOverlay);
+            this.module.on('click', 'a', this.checkOverlay);
 
             this.module.on('mouseenter', 'table.bp > tbody > tr > td > a', this.procMouseOver);
             this.module.on('mouseenter', 'table.bp > tbody > tr > th', this.procMouseOver);
             this.module.on('mouseenter', 'table.node.missing > tbody > tr > td > span', this.procMouseOver);
             this.module.on('mouseleave', 'div.bp', this.procMouseOut);
+            if ($('#bp-overlay').length < 1) {
+                $('#layout').append('<div id="bp-module-overlay" class="icinga-module module-businessprocess"><div id="bp-overlay-container"><div class="bp-overlay-controls"><a href="">X</a></div><div id="bp-overlay" class="container"></div></div></div>');
+            }
 
             this.module.icinga.logger.debug('BP module loaded');
         },
 
+        closeOverlay: function(event) {
+            $('#bp-overlay-container').hide();
+            $('#bp-overlay').html('');
+        },
+
+        checkOverlay: function(event) {
+            $el = $(event.currentTarget);
+            $sourceContainer = $el.closest('.container');
+            $target = $el.closest('[data-base-target]');
+            if ($target.length < 1) { return; }
+
+            targetId = $target.data('baseTarget');
+            if ($target.data('baseTarget') !== 'bp-overlay') { return; }
+
+            $('#bp-overlay').data('sourceContainer', $sourceContainer.attr('id'));
+            $('#bp-overlay-container').css({
+                'display': 'block'
+            });
+        },
+
         processTitleClick: function (event) {
             event.stopPropagation();
             var $el = $(event.currentTarget).closest('table.bp');
@@ -133,15 +158,22 @@
             });*/
         },
 
-        fixOpenedBps: function(event) {
+        rendered: function(event) {
             var $container = $(event.currentTarget);
+            if ($container.attr('id') === 'bp-overlay') {
+                this.onOverlayRendered();
+            }
+            this.fixOpenedBps($container);
+        },
+
+        fixOpenedBps: function($container) {
             var container_id = $container.attr('id');
 
             if (typeof this.idCache[container_id] === 'undefined') {
                 return;
             }
             var $procs = $('table.process', $container);
-            $.each(this.idCache[$container.attr('id')], function(idx, id) {
+            $.each(this.idCache[container_id], function(idx, id) {
                 var $el = $('#' + id);
                 $procs = $procs.not($el);
 
@@ -154,6 +186,18 @@
             $procs.addClass('collapsed');
         },
 
+        onOverlayRendered: function()
+        {
+            // close overlay if required:
+            $overlay = $('#bp-overlay');
+            $overlayContainer = $('#bp-overlay-container');
+            if ($overlayContainer.css('display') === 'block' && $overlay.html().match(/^__CLOSEME__/)) {
+                $source = $('#' + $overlay.data('sourceContainer'));
+                $overlayContainer.hide();
+                self.icinga.loader.loadUrl($source.data('icingaUrl'), $source, undefined, undefined, undefined, true);
+            }
+        },
+
         /**
          * Get a list of all currently opened BPs.
          *