Fix issues issues with javascript multiselection

refs #5765

modules/monitoring/application/controllers/MultiController.php

@@ -102,6 +102,61 @@ class Monitoring_MultiController extends ActionController
         $this->view->form->setAction('/icinga2-web/monitoring/multi/host');
     }
 
+
+    public function serviceAction()
+    {
+        $filters = $this->view->queries;
+        $errors = array();
+
+        $backendQuery = ServiceStatusView::fromRequest(
+            $this->_request,
+            array(
+                'host_name',
+                'service_description',
+                'service_handled',
+                'service_state',
+                'service_in_downtime',
+
+                'service_passive_checks_enabled',
+                'service_notifications_enabled',
+                'service_event_handler_enabled',
+                'service_flap_detection_enabled',
+                'service_active_checks_enabled'
+            )
+        )->getQuery();
+        if ($this->_getParam('service') !== '*' && $this->_getParam('host') !== '*') {
+            $this->applyQueryFilter($backendQuery, $filters);
+            $this->applyQueryFilter($backendQuery, $filters);
+        }
+        $services = $backendQuery->fetchAll();
+
+        // Comments
+        $commentQuery = $this->applyQueryFilter(
+            CommentView::fromRequest($this->_request)->getQuery(),
+            $filters,
+            'comment_host',
+            'comment_service'
+        );
+        $comments = array_keys($this->getUniqueValues($commentQuery->fetchAll(), 'comment_internal_id'));
+
+        $this->view->objects = $this->view->services = $services;
+        $this->view->problems = $this->getProblems($services);
+        $this->view->comments = isset($comments) ? $comments : $this->getComments($services);
+        $this->view->hostnames = $this->getProperties($services, 'host_name');
+        $this->view->servicenames = $this->getProperties($services, 'service_description');
+        $this->view->downtimes = $this->getDowntimes($services);
+        $this->view->errors = $errors;
+
+        $this->handleConfigurationForm(array(
+            'service_passive_checks_enabled' => 'Passive Checks',
+            'service_active_checks_enabled'  => 'Active Checks',
+            'service_notifications_enabled'  => 'Notifications',
+            'service_event_handler_enabled'  => 'Event Handler',
+            'service_flap_detection_enabled' => 'Flap Detection'
+        ));
+        $this->view->form->setAction('/icinga2-web/monitoring/multi/service');
+    }
+
     /**
      * Apply the query-filter received
      *
@@ -214,55 +269,6 @@ class Monitoring_MultiController extends ActionController
         return $downtimes;
     }
 
-    public function serviceAction()
-    {
-        $filters = $this->view->queries;
-        $errors = array();
-
-        $backendQuery = ServiceStatusView::fromRequest(
-            $this->_request,
-            array(
-                'host_name',
-                'service_description',
-                'service_handled',
-                'service_state',
-                'service_in_downtime',
-
-                'service_passive_checks_enabled',
-                'service_notifications_enabled',
-                'service_event_handler_enabled',
-                'service_flap_detection_enabled',
-                'service_active_checks_enabled'
-            )
-        )->getQuery();
-        if ($this->_getParam('service') !== '*' && $this->_getParam('host') !== '*') {
-            $this->applyQueryFilter($backendQuery, $filters);
-            $this->applyQueryFilter($backendQuery, $filters);
-        }
-        $services = $backendQuery->fetchAll();
-
-        // Comments
-        $commentQuery = CommentView::fromRequest($this->_request)->getQuery();
-        $this->applyQueryFilter($commentQuery, $filters);
-        $comments = array_keys($this->getUniqueValues($commentQuery->fetchAll(), 'comment_internal_id'));
-
-        $this->view->objects = $this->view->services = $services;
-        $this->view->problems = $this->getProblems($services);
-        $this->view->comments = isset($comments) ? $comments : $this->getComments($services);
-        $this->view->hostnames = $this->getProperties($services, 'host_name');
-        $this->view->servicenames = $this->getProperties($services, 'service_description');
-        $this->view->downtimes = $this->getDowntimes($services);
-        $this->view->errors = $errors;
-
-        $this->handleConfigurationForm(array(
-            'service_passive_checks_enabled' => 'Passive Checks',
-            'service_active_checks_enabled'  => 'Active Checks',
-            'service_notifications_enabled'  => 'Notifications',
-            'service_event_handler_enabled'  => 'Event Handler',
-            'service_flap_detection_enabled' => 'Flap Detection'
-        ));
-        $this->view->form->setAction('/icinga2-web/monitoring/multi/service');
-    }
 
     /**
      * Handle the form to edit configuration flags.

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

@@ -5,7 +5,12 @@ if ($hosts->count() === 0) {
     return;
 }
 
-?><table data-base-target="_next" class="action">
+?><table
+    data-base-target="_next"
+    class="action multiselect"
+    data-icinga-multiselect-url="<?= $this->href("/monitoring/multi/host") ?>"
+    data-icinga-multiselect-data="host"
+>
 <tbody>
 <?php
 

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

@@ -13,7 +13,12 @@ Sort by <?= $this->sortControl ?>
 
 <div class="content">
 <?php endif ?>
-<table data-base-target="_next" class="action multiselect<?php if ($this->compact): ?> compact<?php endif ?>" style="table-layout: auto;">
+<table
+    data-base-target="_next"
+    class="action multiselect <?php if ($this->compact): ?> compact<?php endif ?>" style="table-layout: auto;"
+    data-icinga-multiselect-url="<?= $this->href("/monitoring/multi/service") ?>"
+    data-icinga-multiselect-data="service,host"
+>
   <tbody>
 <?php
 

modules/monitoring/application/views/scripts/multi/components/objectlist.phtml

@@ -0,0 +1,7 @@
+<?php
+/**
+ * Created by PhpStorm.
+ * User: mjentsch
+ * Date: 09.04.14
+ * Time: 15:29
+ */ 

public/js/icinga/events.js

@@ -96,11 +96,9 @@
             // 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
+            // Select a table row
-            $(document).on('click', ':not(table) tr[href]', { self: this }, this.linkClicked);
-
-            // Select a table.
             $(document).on('click', 'table tr[href]', { self: this }, this.rowSelected);
+            $(document).on('click', 'table tr a', { self: this }, this.rowSelected);
 
             $(document).on('click', 'button', { self: this }, this.submitForm);
 
@@ -312,8 +310,15 @@
             var multisel = $table.hasClass('multiselect');
             var url      = $table.data('icinga-multiselect-url');
             var $trs, $target;
+
+            // When the selection points to a link, select the closest row
+            if ($tr.prop('tagName').toLowerCase() === 'a') {
+                $tr = $tr.closest('tr').first();
+            }
+
             event.stopPropagation();
             event.preventDefault();
+
             if (icinga.events.handleExternalTarget($tr)) {
                 // link handled externally
                 return false;
@@ -338,9 +343,11 @@
                 // single selection
                 icinga.ui.setTableRowSelection($tr);
             }
-            $trs = $table.find('tr[href].active');
+            // focuse only the current table.
+            icinga.ui.focusTable($table[0]);
 
             // Update url
+            $trs = $table.find('tr[href].active');
             $target = self.getLinkTargetFor($tr);
             if ($trs.length > 1) {
                 // display multiple rows
@@ -415,6 +422,11 @@
                 return false;
             }
 
+            // ignore links inside of tables.
+            if ($a.closest('table tr').length > 0) {
+                return;
+            }
+
             // Handle all other links as XHR requests
             event.stopPropagation();
             event.preventDefault();
@@ -525,7 +537,8 @@
             $(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('click', 'table tr[href]', this.rowSelected);
+            $(document).off('click', 'table tr a', this.rowSelected);
             $(document).off('submit', 'form', this.submitForm);
             $(document).off('click', 'button', this.submitForm);
             $(document).off('change', 'form select.autosubmit', this.submitForm);

public/js/icinga/ui.js

@@ -286,7 +286,7 @@
 
         /**
          * Add the given table-row to the selection of the closest
-         * table
+         * table and deselect all other rows of the closest table.
          *
          * @param $tr {jQuery}  The selected table row.
          * @returns {boolean}   If the selection was changed.
@@ -320,7 +320,7 @@
 
         /**
          * Add a new selection range to the closest table, using the selected row as
-         * range target
+         * range target.
          *
          * @param $tr {jQuery}  The target of the selected range.
          * @returns {boolean}   If the selection was changed.
@@ -353,6 +353,20 @@
             return false;
         },
 
+        /**
+         * Focus the given table by deselecting all selections on all other tables.
+         *
+         * Focusing a table is important for environments with multiple tables like
+         * the dashboard. It should only be possible to select rows at one table at a time,
+         * when a user selects a row on a table all rows that are not child of the given table
+         * will be removed from the selection.
+         *
+         * @param table {htmlElement}   The table to focus.
+         */
+        focusTable: function (table) {
+            $('table').filter(function(){ return this !== table; }).find('tr[href]').removeClass('active');
+        },
+
         refreshDebug: function () {
 
             var size = this.getDefaultFontSize().toString();