Fix bug that caused the detail view to stay open, even when nothing was selected

fixes #4749

modules/monitoring/application/views/helpers/SelectionToolbar.php

@@ -0,0 +1,27 @@
+<?php
+
+class Zend_View_Helper_SelectionToolbar extends Zend_View_Helper_Abstract
+{
+    /**
+     * Create a selection toolbar
+     *
+     * @param      $type
+     * @param null $target
+     *
+     * @return string
+     */
+    public function selectionToolbar($type, $target = null)
+    {
+        if ($type == 'multi') {
+            return 'Select
+<a href="' . $target . '"> All </a>
+<a href="#"> None </a>';
+
+        } else if ($type == 'single') {
+            return 'Select <a href="#"> None </a>';
+
+        } else {
+            return '';
+        }
+    }
+}

modules/monitoring/application/views/scripts/list/comments.phtml

@@ -15,15 +15,26 @@
   </div>
 </div>
 
-
-
 <div data-icinga-component="app/mainDetailGrid" data-icinga-grid-selection-type="single">
 
-  <?=  $this->sortControl->render($this); ?>
+  <div class="container pull-left">
 
-  <?=  $this->paginationControl($comments, null, null, array('preserve' => $this->preserve)); ?>
+    <div class="row">
+      <div class="col-md-12">
+        <?=  $this->sortControl->render($this); ?>
+      </div>
+    </div>
 
-  <table class="table table-condensed">
+    <div class="row">
+        <?=  $this->paginationControl($comments, null, null, array('preserve' => $this->preserve)); ?>
+    </div>
+
+    <div class="row">
+        <?= $this->selectionToolbar('single'); ?>
+    </div>
+  </div>
+
+  <table class="table table-condensed pull-left">
     <tbody>
     <?php foreach ($comments as $comment): ?>
       <?php
@@ -145,5 +156,7 @@
     </tbody>
   </table>
 
-  <?=  $this->paginationControl($comments, null, null, array('preserve' => $this->preserve)); ?>
+  <div class="container pull-left">
-</div>
+    <?=  $this->paginationControl($comments, null, null, array('preserve' => $this->preserve)); ?>
+  </div>
+</div>

modules/monitoring/application/views/scripts/list/contacts.phtml

@@ -11,21 +11,21 @@ $contactHelper = $this->getHelper('ContactFlags');
   </div>
 </div>
 <div data-icinga-component="app/mainDetailGrid" data-icinga-grid-selection-type="none">
-    <?=  $this->sortControl->render($this); ?>
+
-    <?=  $this->paginationControl($contacts, null, null, array('preserve' => $this->preserve)); ?>
+    <div class="container pull-left">
-    <table class="table table-condensed">
+
-        <thead>
+        <div class="row">
-            <tr>
+          <div class="col-md-12">
-                <th> Contact Name </th>
+            <?=  $this->sortControl->render($this); ?>
-                <th> Alias </th>
+          </div>
-                <th> Email Address </th>
+        </div>
-                <th> Pager Address / Number </th>
+
-                <th> Service Notification Options </th>
+        <div class="row">
-                <th> Host Notification Options </th>
+            <?=  $this->paginationControl($contacts, null, null, array('preserve' => $this->preserve)); ?>
-                <th> Service Notification Period </th>
+        </div>
-                <th> Host Notification Period </th>
+    </div>
-            </tr>
+
-        </thead>
+    <table class="table table-condensed pull-left">
         <tbody>
             <?php foreach($contacts as $contact): ?>
                 <?php $periodLink = $this->href('monitoring/show/contacts', array('contact' => $contact->contact_name)); ?>
@@ -42,5 +42,8 @@ $contactHelper = $this->getHelper('ContactFlags');
             <?php endforeach; ?>
         </tbody>
     </table>
-    <?= $this->paginationControl($contacts, null, null, array('preserve' => $this->preserve)); ?>
+
+    <div class="pull-left">
+        <?= $this->paginationControl($contacts, null, null, array('preserve' => $this->preserve)); ?>
+    </div>
 </div>

modules/monitoring/application/views/scripts/list/downtimes.phtml

@@ -9,63 +9,79 @@ $commandHelper = $this->getHelper('CommandForm');
     <?= $this->tabs->render($this); ?>
   </div>
 </div>
+
 <div data-icinga-component="app/mainDetailGrid" data-icinga-grid-selection-type="single">
-  <div>
+
-    <?=  $this->sortControl->render($this); ?>
+  <div class="container pull-left">
+    <div class="row">
+      <div class="col-md-12">
+      <?=  $this->sortControl->render($this); ?>
+      </div>
+    </div>
+
+    <div class="row">
+        <?=  $this->paginationControl($downtimes, null, null, array('preserve' => $this->preserve)); ?>
+    </div>
+
+    <div class="row">
+        <?= $this->selectionToolbar('single'); ?>
+    </div>
   </div>
-  <div>
+
-    <?= $this->paginationControl($downtimes, null, null, array('preserve' => $this->preserve)); ?>
+  <?= $this->paginationControl($downtimes, null, null, array('preserve' => $this->preserve)); ?>
-    <table class="table table-condensed">
+  <table class="table table-condensed">
-      <tbody>
+    <tbody>
-      <?php foreach ($downtimes as $downtime): ?>
+    <?php foreach ($downtimes as $downtime): ?>
-      <tr>
+    <tr>
-        <td>
+      <td>
-          <?= $this->dateFormat()->formatDateTime((int) $downtime->downtime_start); ?> -
+        <?= $this->dateFormat()->formatDateTime((int) $downtime->downtime_start); ?> -
-          <?= $this->dateFormat()->formatDateTime((int) $downtime->downtime_end); ?>
+        <?= $this->dateFormat()->formatDateTime((int) $downtime->downtime_end); ?>
-          <br />
+        <br />
-          <small>Duration: <?= $this->util()->showHourMin((int) $downtime->downtime_duration); ?></small>
+        <small>Duration: <?= $this->util()->showHourMin((int) $downtime->downtime_duration); ?></small>
-          <br />
+        <br />
-          <small>The <?php if($downtime->downtime_is_flexible): ?>flexible<?php else: ?>fixed<?php endif; ?> downtime is <?php if(!$downtime->downtime_is_in_effect): ?>not <?php endif; ?>in effect</small>
+        <small>The <?php if($downtime->downtime_is_flexible): ?>flexible<?php else: ?>fixed<?php endif; ?> downtime is <?php if(!$downtime->downtime_is_in_effect): ?>not <?php endif; ?>in effect</small>
-        </td>
+      </td>
-        <td>
+      <td>
-          <?php if (isset($downtime->service)): ?>
+        <?php if (isset($downtime->service)): ?>
-            <a href="<?= $this->href('monitoring/show/service', array(
+          <a href="<?= $this->href('monitoring/show/service', array(
-              'host'    => (string) $downtime->host,
+            'host'    => (string) $downtime->host,
-              'service' => (string) $downtime->service
+            'service' => (string) $downtime->service
-            )); ?>"><?= $downtime->service ?></a>
+          )); ?>"><?= $downtime->service ?></a>
-            <small>on <?= $downtime->host ?></small>
+          <small>on <?= $downtime->host ?></small>
-          <?php else: ?>
+        <?php else: ?>
-            <a href="<?= $this->href('monitoring/show/host', array(
+          <a href="<?= $this->href('monitoring/show/host', array(
-              'host'    => (string) $downtime->host
+            'host'    => (string) $downtime->host
-            )); ?>"><?= $downtime->host ?> </a>
+          )); ?>"><?= $downtime->host ?> </a>
-          <?php endif; ?>
+        <?php endif; ?>
-          <br />
+        <br />
-          <?= $downtime->downtime_author ?>: <?= $downtime->downtime_comment ?>
+        <?= $downtime->downtime_author ?>: <?= $downtime->downtime_comment ?>
-          <br />
+        <br />
-          <small>Entry Time: <?= ($downtime->downtime_entry_time) ? $this->dateFormat()->formatDateTime((int) $downtime->downtime_entry_time) : ''; ?>
+        <small>Entry Time: <?= ($downtime->downtime_entry_time) ? $this->dateFormat()->formatDateTime((int) $downtime->downtime_entry_time) : ''; ?>
-          </small>
+        </small>
-        <td>
+      <td>
-            <?php
+          <?php
-              $data = array(
+            $data = array(
-                'downtimeid'    => $downtime->downtime_internal_downtime_id,
+              'downtimeid'    => $downtime->downtime_internal_downtime_id,
-                'host'          => $downtime->host
+              'host'          => $downtime->host
-              );
+            );
-              if (isset($downtime->service)) {
+            if (isset($downtime->service)) {
-                $data['service'] = $downtime->service;
+              $data['service'] = $downtime->service;
-              }
+            }
-              echo $commandHelper->iconSubmitForm(
+            echo $commandHelper->iconSubmitForm(
-                'icinga-icon-remove',
+              'icinga-icon-remove',
-                'Remove Downtime',
+              'Remove Downtime',
-                'btn-small',
+              'btn-small',
-                'removedowntime',
+              'removedowntime',
-                $data
+              $data
-              );
+            );
-            ?>
+          ?>
-        </td>
+      </td>
-      </tr>
+    </tr>
-      <?php endforeach ?>
+    <?php endforeach ?>
-      </tbody>
+    </tbody>
-    </table>
+  </table>
+
+  <div class="container pull-left">
     <?= $this->paginationControl($downtimes, null, null, array('preserve' => $this->preserve)); ?>
   </div>
 </div>

modules/monitoring/application/views/scripts/list/eventhistory.phtml

@@ -7,9 +7,18 @@
   </div>
 </div>
 <?php if (!empty($history)): ?>
-    <div data-icinga-component="app/mainDetailGrid">
+    <div data-icinga-component="app/mainDetailGrid" data-icinga-grid-selection-type="single">
-        <?=  $this->paginationControl($history, null, null, array('preserve' => $this->preserve)); ?>
+
-        <table class="table table-condensed">
+        <div class="container pull-left">
+            <div class="row">
+                <?=  $this->paginationControl($history, null, null, array('preserve' => $this->preserve)); ?>
+            </div>
+            <div class="row">
+                <?= $this->selectionToolbar('single'); ?>
+            </div>
+        </div>
+
+        <table class="table table-condensed pull-left">
             <tbody>
             <?php foreach ($history as $event): ?>
                 <?php
@@ -106,6 +115,10 @@
             <? endforeach; ?>
             </tbody>
         </table>
-        <?=  $this->paginationControl($history, null, null, array('preserve' => $this->preserve)); ?>
+
+        <div class="container pull-left">
+            <?=  $this->paginationControl($history, null, null, array('preserve' => $this->preserve)); ?>
+        </div>
+
     </div>
 <?php endif; ?>

modules/monitoring/application/views/scripts/list/hostgroups.phtml

@@ -6,10 +6,25 @@
     <?= $this->tabs->render($this); ?>
   </div>
 </div>
+
 <div data-icinga-component="app/mainDetailGrid" data-icinga-grid-selection-type="single">
-    <?= $this->sortControl->render($this); ?>
+    <div class="container pull-left">
-    <?= $this->paginationControl($hostgroups, null, null, array('preserve' => $this->preserve)); ?>
+        <div class="row">
-    <table>
+            <div class="col-md-12">
+                <?=  $this->sortControl->render($this); ?>
+            </div>
+        </div>
+
+        <div class="row">
+            <?=  $this->paginationControl($hostgroups, null, null, array('preserve' => $this->preserve)); ?>
+        </div>
+
+        <div class="row">
+            <?= $this->selectionToolbar('single'); ?>
+        </div>
+    </div>
+
+    <table class="table table-condensed pull-left">
         <tbody>
         <?php foreach($hostgroups as $hostgroup): ?>
             <tr>
@@ -90,5 +105,8 @@
         <?php endforeach; ?>
         </tbody>
     </table>
-    <?= $this->paginationControl($hostgroups, null, null, array('preserve' => $this->preserve)); ?>
+
+    <div class="container pull-left">
+        <?= $this->paginationControl($hostgroups, null, null, array('preserve' => $this->preserve)); ?>
+    </div>
 </div>

modules/monitoring/application/views/scripts/list/hosts.phtml

@@ -15,19 +15,19 @@ $viewHelper = $this->getHelper('MonitoringState');
   <div class="container pull-left">
     <div class="row">
       <div class="col-md-5">
-      <?=  $this->filterBox->render($this); ?>
+        <?=  $this->filterBox->render($this); ?>
       </div>
       <div class="col-md-7">
       <?=  $this->sortControl->render($this); ?>
       </div>
     </div>
+
     <div class="row">
     <?=  $this->paginationControl($hosts, null, null, array('preserve' => $this->preserve)); ?>
     </div>
+
     <div class="row">
-        Select
+       <?= $this->selectionToolbar('multi', $this->href('monitoring/multi/host',array( 'host' => '*' ))); ?>
-        <a href='<?=$this->href('monitoring/multi/host',array( 'host' => '*' ))?>'> All </a>
-        <a href='#'> None </a>
     </div>
   </div>
 

modules/monitoring/application/views/scripts/list/notifications.phtml

@@ -9,9 +9,24 @@
 
 <?php if (!empty($notifications)): ?>
 <div data-icinga-component="app/mainDetailGrid" data-icinga-grid-selection-type="single">
-    <?= $this->sortControl->render($this); ?>
+
-    <?= $this->paginationControl($notifications, null, null, array('preserve' => $this->preserve)); ?>
+    <div class="container pull-left">
-    <table class="table table-condensed" >
+      <div class="row">
+        <div class="col-md-12">
+            <?=  $this->sortControl->render($this); ?>
+        </div>
+      </div>
+
+      <div class="row">
+          <?=  $this->paginationControl($notifications, null, null, array('preserve' => $this->preserve)); ?>
+      </div>
+
+      <div class="row">
+          <?= $this->selectionToolbar('single'); ?>
+      </div>
+    </div>
+
+    <table class="table table-condensed pull-left">
         <tbody>
         <?php foreach ($notifications as $notification): ?>
             <?php
@@ -56,7 +71,10 @@
         <?php endforeach; ?>
         </tbody>
     </table>
-    <?= $this->paginationControl($notifications, null, null, array('preserve' => $this->preserve)); ?>
+
+    <div class="container pull-left">
+        <?= $this->paginationControl($notifications, null, null, array('preserve' => $this->preserve)); ?>
+    </div>
 </div>
 <?php else: ?>
 No notifications yet

modules/monitoring/application/views/scripts/list/servicegroups.phtml

@@ -6,11 +6,25 @@
     <?= $this->tabs->render($this); ?>
   </div>
 </div>
-
 <div data-icinga-component="app/mainDetailGrid" data-icinga-grid-selection-type="single">
-    <?= $this->sortControl->render($this); ?>
+
-    <?= $this->paginationControl($servicegroups, null, null, array('preserve' => $this->preserve)); ?>
+    <div class="container pull-left">
-    <table>
+        <div class="row">
+            <div class="col-md-12">
+                <?=  $this->sortControl->render($this); ?>
+            </div>
+        </div>
+
+        <div class="row">
+            <?=  $this->paginationControl($servicegroups, null, null, array('preserve' => $this->preserve)); ?>
+        </div>
+
+        <div class="row">
+            <?= $this->selectionToolbar('single'); ?>
+        </div>
+    </div>
+
+    <table class="table table-condensed pull-left">
         <tbody>
         <?php foreach($servicegroups as $servicegroup): ?>
             <tr>
@@ -91,5 +105,8 @@
         <?php endforeach; ?>
         </tbody>
     </table>
-    <?= $this->paginationControl($servicegroups, null, null, array('preserve' => $this->preserve)); ?>
+
+    <div class="container pull-left">
+        <?= $this->paginationControl($servicegroups, null, null, array('preserve' => $this->preserve)); ?>
+    </div>
 </div>

modules/monitoring/application/views/scripts/list/services.phtml

@@ -24,9 +24,7 @@ $viewHelper = $this->getHelper('MonitoringState');
       <?=  $this->paginationControl($services, null, null, array('preserve' => $this->preserve)); ?>
     </div>
     <div class="row">
-      Select
+      <?= $this->selectionToolbar('multi', $this->href('monitoring/multi/service', array( 'service' => '*', 'host' => '*' ))); ?>
-      <a href='<?=$this->href('monitoring/multi/service',array( 'host' => '*', 'service' => '*' ))?>'> All </a>
-      <a href='#'> None </a>
     </div>
   </div>
 

public/js/icinga/components/container.js

@@ -455,7 +455,12 @@ define(['jquery', 'logging', 'icinga/componentLoader', 'URIjs/URI', 'URIjs/URITe
 
     $(window).on('hashchange', (function() {
         urlMgr.syncWithUrl();
-        Container.getDetailContainer().replaceDomAsync(urlMgr.detailUrl);
+        if (urlMgr.detailUrl) {
+            Container.getDetailContainer().replaceDomAsync(urlMgr.detailUrl);
+        } else {
+             Container.hideDetail();
+        }
+
     }));
 
 

public/js/icinga/components/mainDetailGrid.js

@@ -167,9 +167,11 @@ function(Container, $, logger, URI, tpl, urlMgr, Selectable, TableMultiSelection
         this.registerTableLinks = function(domContext) {
             domContext = domContext || contentNode;
 
-            $('tbody tr', domContext).on('click', function(ev) {
+            $('tbody tr', domContext).click(function(ev) {
                 var targetEl = ev.target || ev.toElement || ev.relatedTarget,
                     a = $(targetEl).closest('a');
+                ev.preventDefault();
+                ev.stopPropagation();
 
                 var nodeNames = [];
                 nodeNames.push($(targetEl).prop('nodeName').toLowerCase());
@@ -189,15 +191,13 @@ function(Container, $, logger, URI, tpl, urlMgr, Selectable, TableMultiSelection
 
                 switch (selectionMode) {
                     case 'multi':
-                        var selectable = new Selectable(this);
                         if (ev.ctrlKey || ev.metaKey) {
-                            selection.toggle(selectable);
+                            selection.toggle(new Selectable(this));
                         } else if (ev.shiftKey) {
-                            // select range ?
+                            selection.add(new Selectable(this));
-                            selection.add(selectable);
                         } else {
                             selection.clear();
-                            selection.add(selectable);
+                            selection.add(new Selectable(this));
                         }
                         break;
 
@@ -217,7 +217,8 @@ function(Container, $, logger, URI, tpl, urlMgr, Selectable, TableMultiSelection
                 var segments = url.segment();
                 if (selection.size() === 0) {
                     // don't open anything
-                    url.search('?');
+                    urlMgr.setDetailUrl('');
+                    return false;
                 } else if (selection.size() > 1 && segments.length > 3) {
                     // open detail view for multiple objects
                     segments[2] = 'multi';
@@ -228,6 +229,18 @@ function(Container, $, logger, URI, tpl, urlMgr, Selectable, TableMultiSelection
                 urlMgr.setDetailUrl(url);
                 return false;
             });
+
+            /*
+             * Clear the URL when deselected or when a wildcard is used
+             */
+            $(window).on('hashchange', function(){
+                if (
+                    !location.hash ||
+                    location.hash.match(/(host=%2A)|(service=%2A)/)
+                ) {
+                    selection.clear();
+                }
+            });
         };
 
         /**

public/js/icinga/selection/multiSelection.js

@@ -43,6 +43,7 @@ function($, URI, Selectable) {
      * @param {URI}          The query that contains the selected rows.
      */
     return function MultiSelection(table, detailUrl) {
+
         var self = this;
         /**
          * Contains all selected selectables

public/js/icinga/selection/selectable.js

@@ -72,6 +72,11 @@ define(['jquery', 'URIjs/URI'], function($, URI) {
             return href.query(true);
         };
 
+        /**
+         * Set the current selection state
+         *
+         * @param {boolean}     The new state
+         */
         this.setActive = function(value) {
             if (value) {
                 $(tableRow).addClass('active');
@@ -79,5 +84,15 @@ define(['jquery', 'URIjs/URI'], function($, URI) {
                 $(tableRow).removeClass('active');
             }
         };
+
+        /**
+         * Return the current selection state
+         *
+         * @returns {boolean}   True when the object is selected
+         */
+        this.isActive = function()
+        {
+            return $(tableRow).hasClass('active');
+        };
     };
 });

public/js/icinga/util/url.js

@@ -25,7 +25,7 @@
  */
 // {{{ICINGA_LICENSE_HEADER}}}
 
-define(['jquery', 'URIjs/URI'], function($, URI, Container) {
+define(['jquery', 'logging', 'URIjs/URI'], function($, log, URI, Container) {
     "use strict";
 
     var currentUrl = URI(window.location.href);
@@ -126,7 +126,6 @@ define(['jquery', 'URIjs/URI'], function($, URI, Container) {
                 this.detailUrl = url.clone().fragment('').href();
             }
             this.detailAnchor = this.getMainAnchor(url);
-
             window.location.hash = this.getUrlHash();
         };