Fix issues issues with javascript multiselection

refs #5765
This commit is contained in:
Matthias Jentsch 2014-04-09 19:11:56 +02:00
parent 3b2bb3c4fc
commit cb630d45ad
7 changed files with 109 additions and 59 deletions

View File

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

View File

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

View File

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

View File

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

View File

View File

@ -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
$(document).on('click', ':not(table) tr[href]', { self: this }, this.linkClicked);
// Select a table.
// Select a table row
$(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);

View File

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