tyler.durden
/
icingaweb2
mirror of https://github.com/Icinga/icingaweb2.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'bugfix/fix-multiselection-5765'

This commit is contained in:
Matthias Jentsch 2014-04-28 09:51:02 +02:00
parent 6973b04211 661dbea740
commit 2abd96de39
26 changed files with 1065 additions and 415 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
application/views/helpers/FormTriStateCheckbox.php
View File

@ -44,20 +44,22 @@ class Zend_View_Helper_FormTriStateCheckbox extends Zend_View_Helper_FormElement
* @param array $attribs Attributes for the element tag
*
* @return string The element XHTML
*/
*/
public function formTriStateCheckbox($name, $value = null, $attribs = null)
{
$class = "";
$xhtml = '<div data-icinga-component="app/triStateCheckbox" class="form-group">'
. '<div>' . ($value == 1 ? '{{ICON_ENABLED}}' : ($value === 'unchanged' ? '{{ICON_MIXED}}' : '{{ICON_DISABLED}}' )) . '</div>'
. '<input class="' . $class . '" type="radio" value=1 name="'
. $name . '" ' . ($value == 1 ? 'checked' : '') . ' ">On</input> '
. '<input class="' . $class . '" type="radio" value=0 name="'
. $name . '" ' . ($value == 0 ? 'checked' : '') . ' ">Off</input> ';
$xhtml = '<div class="tristate">'
. '<div>' . ($value == 1 ? ' ' : ($value === 'unchanged' ? ' ' : ' ' )) . '</div>'
. '<input class="' . $class . '" type="radio" value=1 name="'
. $name . '" ' . ($value == 1 ? 'checked' : '') . ' ">On</input> '
. '<input class="' . $class . '" type="radio" value=0 name="'
. $name . '" ' . ($value == 0 ? 'checked' : '') . ' ">Off</input> ';
if ($value === 'unchanged') {
$xhtml = $xhtml . '<input class="' . $class . '" type="radio" value="unchanged" name="'
. $name . '" ' . 'checked "> Mixed </input>';
. $name . '" ' . 'checked "> Undefined </input>';
};
return $xhtml . '</div>';
}

4
library/Icinga/Web/Form/Element/TriStateCheckbox.php
View File

@ -48,9 +48,9 @@ class TriStateCheckbox extends Zend_Form_Element_Xhtml
*/
public $helper = 'formTriStateCheckbox';
public function __construct($spec, $options = null)
public function __construct($name, $options = null)
{
parent::__construct($spec, $options);
parent::__construct($name, $options);
$this->triStateValidator = new TriStateValidator($this->patterns);
$this->addValidator($this->triStateValidator);

1
library/Icinga/Web/StyleSheet.php
View File

@ -19,6 +19,7 @@ class StyleSheet
'css/icinga/widgets.less',
'css/icinga/pagination.less',
'css/icinga/monitoring-colors.less',
'css/icinga/selection-toolbar.less',
'css/icinga/login.less',
);

6
library/Icinga/Web/Widget/Chart/InlinePie.php
View File

@ -49,11 +49,12 @@ class InlinePie extends AbstractWidget
* @var string
*/
private $template =<<<'EOD'
<div class="inlinepie">
<img
class='inlinepie'
title="{title}" src="{url}" style="width: {width}px; height: {height}px; {style}"
data-icinga-colors="{colors}" data-icinga-values="{data}"
></img>
</div>
EOD;
/**
@ -118,10 +119,13 @@ EOD;
* The labels to be displayed in the pie-chart
*
* @param null $labels
*
* @return $this
*/
public function setLabels($labels = null)
{
$this->url->setParam('labels', implode(',', $labels));
return $this;
}
/**

2
modules/monitoring/application/controllers/ListController.php
View File

@ -113,6 +113,7 @@ class Monitoring_ListController extends Controller
))->activate('hosts');
$this->setAutorefreshInterval(10);
$this->view->query = $this->_request->getQuery();
$this->view->title = 'Host Status';
$this->compactView = 'hosts-compact';
$dataview = HostStatusView::fromRequest(
@ -176,6 +177,7 @@ class Monitoring_ListController extends Controller
}
}
$this->view->title = 'Service Status';
$this->view->query = $this->_request->getQuery();
$this->setAutorefreshInterval(10);
$query = $this->fetchServices();
$this->applyRestrictions($query);

281
modules/monitoring/application/controllers/MultiController.php
View File

@ -31,12 +31,12 @@ use \Icinga\Web\Form;
use \Icinga\Web\Controller\ActionController;
use \Icinga\Web\Widget\Tabextension\OutputFormat;
use \Icinga\Module\Monitoring\Backend;
use \Icinga\Module\Monitoring\Object\Host;
use \Icinga\Module\Monitoring\Object\Service;
use \Icinga\Data\BaseQuery;
use \Icinga\Web\Widget\Chart\InlinePie;
use \Icinga\Module\Monitoring\Form\Command\MultiCommandFlagForm;
use \Icinga\Module\Monitoring\DataView\HostStatus as HostStatusView;
use \Icinga\Module\Monitoring\DataView\HostStatus as HostStatusView;
use \Icinga\Module\Monitoring\DataView\ServiceStatus as ServiceStatusView;
use \Icinga\Module\Monitoring\DataView\Comment as CommentView;
use \Icinga\Module\Monitoring\DataView\Comment as CommentView;
/**
* Displays aggregations collections of multiple objects.
@ -45,18 +45,17 @@ class Monitoring_MultiController extends ActionController
{
public function init()
{
$this->view->queries = $this->getDetailQueries();
$this->backend = Backend::createBackend($this->_getParam('backend'));
$this->createTabs();
}
public function hostAction()
{
$filters = $this->view->queries;
$errors = array();
$multiFilter = $this->getAllParamsAsArray();
$errors = array();
// Hosts
$backendQuery = HostStatusView::fromRequest(
// Fetch Hosts
$hostQuery = HostStatusView::fromRequest(
$this->_request,
array(
'host_name',
@ -64,58 +63,154 @@ class Monitoring_MultiController extends ActionController
'host_unhandled_service_count',
'host_passive_checks_enabled',
'host_obsessing',
'host_state',
'host_notifications_enabled',
'host_event_handler_enabled',
'host_flap_detection_enabled',
'host_active_checks_enabled'
'host_active_checks_enabled',
// columns intended for filter-request
'host_problem',
'host_handled'
)
)->getQuery();
if ($this->_getParam('host') !== '*') {
$this->applyQueryFilter($backendQuery, $filters);
}
$hosts = $backendQuery->fetchAll();
$this->applyQueryFilter($hostQuery, $multiFilter);
$hosts = $hostQuery->fetchAll();
// Comments
$commentQuery = CommentView::fromRequest($this->_request)->getQuery();
$this->applyQueryFilter($commentQuery, $filters);
$comments = array_keys($this->getUniqueValues($commentQuery->fetchAll(), 'comment_id'));
// Fetch comments
$commentQuery = $this->applyQueryFilter(
CommentView::fromParams(array('backend' => $this->_request->getParam('backend')))->getQuery(),
$multiFilter,
'comment_host'
);
$comments = array_keys($this->getUniqueValues($commentQuery->fetchAll(), 'comment_internal_id'));
$this->view->objects = $this->view->hosts = $hosts;
$this->view->problems = $this->getProblems($hosts);
$this->view->comments = isset($comments) ? $comments : $this->getComments($hosts);
// Populate view
$this->view->objects = $this->view->hosts = $hosts;
$this->view->problems = $this->getProblems($hosts);
$this->view->comments = isset($comments) ? $comments : $this->getComments($hosts);
$this->view->hostnames = $this->getProperties($hosts, 'host_name');
$this->view->downtimes = $this->getDowntimes($hosts);
$this->view->errors = $errors;
$this->view->errors = $errors;
$this->view->states = $this->countStates($hosts, 'host', 'host_name');
$this->view->pie = $this->createPie($this->view->states, $this->view->getHelper('MonitoringState')->getHostStateColors());
// need the query content to list all hosts
$this->view->query = $this->_request->getQuery();
// Handle configuration changes
$this->handleConfigurationForm(array(
'host_passive_checks_enabled' => 'Passive Checks',
'host_active_checks_enabled' => 'Active Checks',
'host_obsessing' => 'Obsessing',
'host_notifications_enabled' => 'Notifications',
'host_event_handler_enabled' => 'Event Handler',
'host_flap_detection_enabled' => 'Flap Detection'
'host_active_checks_enabled' => 'Active Checks',
'host_notifications_enabled' => 'Notifications',
'host_event_handler_enabled' => 'Event Handler',
'host_flap_detection_enabled' => 'Flap Detection',
'host_obsessing' => 'Obsessing'
));
$this->view->form->setAction('/icinga2-web/monitoring/multi/host');
}
/**
* @param $backendQuery BaseQuery The query to apply the filter to
* @param $filter array Containing the filter expressions from the request
*/
private function applyQueryFilter($backendQuery, $filter)
public function serviceAction()
{
$multiFilter = $this->getAllParamsAsArray();
$errors = array();
$backendQuery = ServiceStatusView::fromRequest(
$this->_request,
array(
'host_name',
'host_state',
'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',
'service_obsessing',
// also accept all filter-requests from ListView
'service_problem',
'service_severity',
'service_last_check',
'service_state_type',
'host_severity',
'host_address',
'host_last_check'
)
)->getQuery();
$this->applyQueryFilter($backendQuery, $multiFilter);
$services = $backendQuery->fetchAll();
// Comments
$commentQuery = $this->applyQueryFilter(
CommentView::fromParams(array('backend' => $this->_request->getParam('backend')))->getQuery(),
$multiFilter,
'comment_host',
'comment_service'
);
$comments = array_keys($this->getUniqueValues($commentQuery->fetchAll(), 'comment_internal_id'));
// populate the view
$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->service_states = $this->countStates($services, 'service');
$this->view->host_states = $this->countStates($services, 'host', 'host_name');
$this->view->service_pie = $this->createPie($this->view->service_states, $this->view->getHelper('MonitoringState')->getServiceStateColors());
$this->view->host_pie = $this->createPie($this->view->host_states, $this->view->getHelper('MonitoringState')->getHostStateColors());
$this->view->errors = $errors;
// need the query content to list all hosts
$this->view->query = $this->_request->getQuery();
$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',
'service_obsessing' => 'Obsessing',
));
}
/**
* Apply the query-filter received
*
* @param $backendQuery BaseQuery The query to apply the filter to
* @param $filter array Containing the queries of the current request, converted into an
* array-structure.
* @param $hostColumn string The name of the host-column in the BaseQuery, defaults to 'host_name'
* @param $serviceColumn string The name of the service-column in the BaseQuery, defaults to 'service-description'
*
* @return BaseQuery The given BaseQuery
*/
private function applyQueryFilter(
BaseQuery $backendQuery,
array $filter,
$hostColumn = 'host_name',
$serviceColumn = 'service_description'
) {
// fetch specified hosts
foreach ($filter as $index => $expr) {
// Every query entry must define at least the host.
if (!array_key_exists('host', $expr)) {
$errors[] = 'Query ' . $index . ' misses property host.';
continue;
}
// apply filter expressions from query
$backendQuery->orWhere('host_name', $expr['host']);
$backendQuery->orWhere($hostColumn, $expr['host']);
if (array_key_exists('service', $expr)) {
$backendQuery->andWhere('service_description', $expr['service']);
$backendQuery->andWhere($serviceColumn, $expr['service']);
}
}
return $backendQuery;
}
/**
@ -134,23 +229,25 @@ class Monitoring_MultiController extends ActionController
if (is_array($value)) {
$unique[$value[$key]] = $value[$key];
} else {
$unique[$value->{$key}] = $value->{$key};
$unique[$value->$key] = $value->$key;
}
}
return $unique;
}
/**
* Get the numbers of problems in the given objects
* Get the numbers of problems of the given objects
*
* @param $object array The hosts or services
* @param $objects The objects containing the problems
*
* @return int The problem count
*/
private function getProblems($objects)
{
$problems = 0;
foreach ($objects as $object) {
if (property_exists($object, 'host_unhandled_service_count')) {
$problems += $object->{'host_unhandled_service_count'};
$problems += $object->host_unhandled_service_count;
} else if (
property_exists($object, 'service_handled') &&
!$object->service_handled &&
@ -162,6 +259,34 @@ class Monitoring_MultiController extends ActionController
return $problems;
}
private function countStates($objects, $type = 'host', $unique = null)
{
$known = array();
if ($type === 'host') {
$states = array_fill_keys($this->view->getHelper('MonitoringState')->getHostStateNames(), 0);
} else {
$states = array_fill_keys($this->view->getHelper('MonitoringState')->getServiceStateNames(), 0);
}
foreach ($objects as $object) {
if (isset($unique)) {
if (array_key_exists($object->$unique, $known)) {
continue;
}
$known[$object->$unique] = true;
}
$states[$this->view->monitoringState($object, $type)]++;
}
return $states;
}
private function createPie($states, $colors)
{
$chart = new InlinePie(array_values($states), $colors);
$chart->setLabels(array_keys($states))->setHeight(100)->setWidth(100);
return $chart;
}
private function getComments($objects)
{
$unique = array();
@ -175,7 +300,7 @@ class Monitoring_MultiController extends ActionController
{
$objectnames = array();
foreach ($objects as $object) {
$objectnames[] = $object->{$property};
$objectnames[] = $object->$property;
}
return $objectnames;
}
@ -195,54 +320,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);
}
$services = $backendQuery->fetchAll();
// Comments
$commentQuery = CommentView::fromRequest($this->_request)->getQuery();
$this->applyQueryFilter($commentQuery, $filters);
$comments = array_keys($this->getUniqueValues($commentQuery->fetchAll(), 'comment_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.
@ -252,6 +329,7 @@ class Monitoring_MultiController extends ActionController
private function handleConfigurationForm(array $flags)
{
$this->view->form = $form = new MultiCommandFlagForm($flags);
$this->view->formElements = $form->buildCheckboxes();
$form->setRequest($this->_request);
if ($form->isSubmittedAndValid()) {
// TODO: Handle commands
@ -263,28 +341,37 @@ class Monitoring_MultiController extends ActionController
}
/**
* Fetch all requests from the 'detail' parameter.
* "Flips" the structure of the objects created by _getAllParams
*
* @return array An array of request that contain
* the filter arguments as properties.
* Regularly, _getAllParams would return queries like <b>host[0]=value1&service[0]=value2</b> as
* two entirely separate arrays. Instead, we want it as one single array, containing one single object
* for each index, containing all of its members as keys.
*
* @return array An array of all query parameters (See example above)
* <b>
* array( <br />
* 0 => array(host => value1, service => value2), <br />
* ... <br />
* )
* </b>
*/
private function getDetailQueries()
private function getAllParamsAsArray()
{
$details = $this->_getAllParams();
$objects = array();
$queries = array();
foreach ($details as $property => $values) {
if (!is_array($values)) {
continue;
}
foreach ($values as $index => $value) {
if (!array_key_exists($index, $objects)) {
$objects[$index] = array();
if (!array_key_exists($index, $queries)) {
$queries[$index] = array();
}
$objects[$index][$property] = $value;
$queries[$index][$property] = $value;
}
}
return $objects;
return $queries;
}
/**

35
modules/monitoring/application/forms/Command/MultiCommandFlagForm.php
View File

@ -32,6 +32,7 @@ namespace Icinga\Module\Monitoring\Form\Command;
use \Icinga\Web\Form\Element\TriStateCheckbox;
use \Icinga\Web\Form;
use \Zend_Form_Element_Hidden;
use \Zend_Form;
/**
* A form to edit multiple command flags of multiple commands at once. When some commands have
@ -71,6 +72,7 @@ class MultiCommandFlagForm extends Form {
{
$this->flags = $flags;
parent::__construct();
$this->setEnctype(Zend_Form::ENCTYPE_MULTIPART);
}
/**
@ -103,11 +105,6 @@ class MultiCommandFlagForm extends Form {
return $changed;
}
/**
* Extract the values from a set of items.
*
* @param array $items The items
*/
private function valuesFromObjects($items)
{
$values = array();
@ -142,6 +139,21 @@ class MultiCommandFlagForm extends Form {
return array_merge($values, $old);
}
public function buildCheckboxes()
{
$checkboxes = array();
foreach ($this->flags as $flag => $description) {
$checkboxes[] = new TriStateCheckbox(
$flag,
array(
'label' => $description,
'required' => true
)
);
}
return $checkboxes;
}
/**
* Create the multi flag form
*
@ -150,16 +162,9 @@ class MultiCommandFlagForm extends Form {
public function create()
{
$this->setName('form_flag_configuration');
foreach ($this->flags as $flag => $description) {
$this->addElement(new TriStateCheckbox(
$flag,
array(
'label' => $description,
'required' => true
)
));
$old = new Zend_Form_Element_Hidden($flag . self::OLD_VALUE_MARKER);
foreach ($this->buildCheckboxes() as $checkbox) {
$this->addElement($checkbox);
$old = new Zend_Form_Element_Hidden($checkbox->getName() . self::OLD_VALUE_MARKER);
$this->addElement($old);
}
$this->setSubmitLabel('Save Configuration');

21
modules/monitoring/application/views/helpers/MonitoringState.php
View File

@ -7,7 +7,6 @@ class Zend_View_Helper_MonitoringState extends Zend_View_Helper_Abstract
public function monitoringState($object, $type = 'service')
{
if ($type === 'service') {
return $this->servicestates[$object->service_state];
} elseif ($type === 'host') {
@ -15,6 +14,26 @@ class Zend_View_Helper_MonitoringState extends Zend_View_Helper_Abstract
}
}
public function getServiceStateColors()
{
return array('#44bb77', '#FFCC66', '#FF5566', '#E066FF', '#77AAFF');
}
public function getHostStateColors()
{
return array('#44bb77', '#FF5566', '#E066FF', '#77AAFF');
}
public function getServiceStateNames()
{
return array_values($this->servicestates);
}
public function getHostStateNames()
{
return array_values($this->hoststates);
}
public function getStateFlags($object, $type = 'service')
{
$state_classes = array();

7
modules/monitoring/application/views/helpers/SelectionToolbar.php
View File

@ -13,11 +13,8 @@ class Zend_View_Helper_SelectionToolbar extends Zend_View_Helper_Abstract
public function selectionToolbar($type, $target = null)
{
if ($type == 'multi') {
return '<div class="selection-toolbar"> Select '
. '<a href="' . $target . '"> All </a>'
. '<a href="#"> None </a> </div>';
} else if ($type == 'single') {
return '<div class="selection-toolbar"> Select <a href="#"> None </a> </div>';
return '<div class="selection-toolbar">'
. '<a href="' . $target . '" data-base-target="_next"> Show All </a> </div>';
} else {
return '';
}

7
modules/monitoring/application/views/scripts/list/hosts-compact.phtml
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

12
modules/monitoring/application/views/scripts/list/hosts.phtml
View File

@ -6,8 +6,9 @@ $helper = $this->getHelper('MonitoringState');
<div style="margin: 1em;" class="dontprint">
<!--<?= $this->filterBox ?>-->Sort by <?= $this->sortControl->render($this); ?>
</div>
<!--<?= $this->selectionToolbar('multi', $this->href('monitoring/multi/host',array( 'host' => '*' ))); ?>-->
<?= $this->paginationControl($hosts, null, null, array('preserve' => $this->preserve)); ?>
<?= $this->selectionToolbar('multi', $this->href('monitoring/multi/host', $query)); ?>
</div>
<div class="content">
@ -19,12 +20,17 @@ if ($hosts->count() === 0) {
}
?>
<table data-base-target="_next" class="action multiselect">
<table
data-base-target="_next"
class="action multiselect"
data-icinga-multiselect-url="<?= $this->href("/monitoring/multi/host") ?>"
data-icinga-multiselect-data="host"
>
<tbody>
<?php foreach($hosts as $host):
$hostStateName = strtolower($this->util()->getHostStateName($host->host_state));
$hostLink = $this->href('monitoring/show/host', array('host' => $host->host_name));
$hostLink = $this->href('/monitoring/show/host', array('host' => $host->host_name));
$icons = array();
if (!$host->host_handled && $host->host_state > 0){

3
modules/monitoring/application/views/scripts/list/notifications.phtml
View File

@ -2,7 +2,8 @@
<?= $this->tabs ?>
<div style="margin: 1em" class="dontprint">
Sort by <?= $this->sortControl->render($this) ?>
<!--<?= $this->selectionToolbar('single') ?>-->
<?= $this->selectionToolbar('single') ?>
</div>
<?= $this->paginationControl($notifications, null, null, array('preserve' => $this->preserve)) ?>
</div>

13
modules/monitoring/application/views/scripts/list/services.phtml
View File

@ -8,12 +8,21 @@ if (!$this->compact): ?>
<!-- <?= $this->filterBox ?>-->
Sort by <?= $this->sortControl ?>
</div>
<?= $this->paginationControl($services, null, null, array('preserve' => $this->preserve)); ?>
<?= $this->paginationControl($services, null, null, array('preserve' => $this->preserve));?>
<?= $this->selectionToolbar('multi', $this->href('monitoring/multi/service', $query)); ?>
</div>
<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

92
modules/monitoring/application/views/scripts/multi/components/comments.phtml
View File

@ -1,61 +1,33 @@
<div>
<div class="panel-heading">
<span> <b> Comments </b> </span>
<div class="pull-right">
<a rel="tooltip" title="Create new comments for all selected hosts or services" href="<?=
$this->href(
'monitoring/command/addcomment',
$this->target
);
?>" class="btn-common btn-small button">
<?= $this->icon('comment.png') ?>
<?php
$objectName = $this->is_service ? 'Services' : 'Hosts';
?>
<tr class="newsection">
<th>
<?= count($comments) ?> Comments
</th>
<td>
<a
href="<?= $this->href('monitoring/command/removecomment', $this->target); ?>"
>
<?= $this->icon('remove_petrol.png') ?> Remove Comments
</a> <br >
<a
href="<?= $this->href('monitoring/command/delaynotifications', $this->target); ?>"
>
<?= $this->icon('notification_disabled_petrol.png') ?> Delay Notifications
</a> <br >
<a
title="Acknowledge all problems on the selected hosts or services"
href="<?= $this->href('monitoring/command/acknowledgeproblem', $this->target); ?>"
>
<?= $this->icon('acknowledgement_petrol.png') ?> Acknowledge
</a>
<a rel="tooltip" title="Send custom notifications for all selected hosts or services" href="<?=
$this->href(
'monitoring/command/sendcustomnotification',
$this->target
);
?>" class="btn-common btn-small button">
<?= $this->icon('notification.png') ?>"></i>
</a>
</div>
</div>
<hr class="separator">
<div class="panel-body">
<div class="panel-row">
<?php if (count($comments) > 0) { ?>
<a href=" <?=
$this->href(
'monitoring/list/comments',
array(
'comment_id' => implode(',', $this->comments)
)
);
?>">
There are <?= count($comments);?> comments assigned to the selected items.
</a>
<a href="<?=
$this->href(
'monitoring/command/removecomment',
$this->target
);
?>" class="button btn-common btn-small input-sm pull-right">
<?= $this->icon('remove.png') ?>"></i>
</a>
<?php } else { ?>
There are 0 comments assigned to the selected items.
<?php } ?>
</div>
<a rel="tooltip" title="Delay the noficiations on all selected hosts or services" href="<?=
$this->href(
'monitoring/command/delaynotification',
$this->target
);
?>" class="button btn-cta btn-common btn-half-wide">
Delay Notifications
</a>
</div>
</div>
</td>
<td>Change <a data-base-target='_next' href=" <?= $this->href(
'monitoring/list/comments',
array('comment_internal_id' => implode(',', $this->comments))
);
?>"> <?= count($comments) ?> comments </a>.
</td>
</tr>

10
modules/monitoring/application/views/scripts/multi/components/configuration.phtml
View File

@ -1,10 +0,0 @@
<div>
<div class="panel-heading">
<span><b>Configuration</b></span>
</div>
<hr class="separator">
<div class="panel-body">
Change configuration for <?= count($this->objects) ?> objects.
<?php echo $this->form->render($this); ?>
</div>
</div>

70
modules/monitoring/application/views/scripts/multi/components/downtimes.phtml
View File

@ -1,49 +1,25 @@
<div>
<div class="panel-heading">
<b>Downtimes</b>
<?php
$objectName = $this->is_service ? 'Services' : 'Hosts';
?>
<a rel="tooltip" title="Schedule downtimes for all selected hosts or services" href="<?=
$this->href(
'monitoring/command/scheduledowntime',
$this->target
);
?>" class="button btn-common btn-small input-sm pull-right">
<?= $this->icon('in_downtime.png') ?>
<tr class="newsection">
<th>
<?= count($downtimes) ?> Downtimes
</th>
<td>
<a href="<?=$this->href('monitoring/command/removedowntime', $this->target); ?>">
<?= $this->icon('remove_petrol.png') ?> Remove Downtimes
</a> <br />
<a
title="Schedule downtimes for all selected <?= $objectName ?>"
href="<?= $this->href('monitoring/command/scheduledowntime', $this->target); ?>"
>
<?= $this->icon('in_downtime_petrol.png') ?> Schedule Downtimes
</a>
</div>
<hr class="separator" >
<div class="panel-body">
<div class="panel-row">
<?php if (count($downtimes) > 0) { ?>
<a href="
<?= $this->href(
'monitoring/list/downtimes',
array()
);?>
">
<?= count($downtimes); ?> Selected items are currently in downtime.
</a>
<a href="<?=
$this->href(
'monitoring/command/removedowntime',
$this->target
);
?>" class="button btn-common btn-small input-sm pull-right">
<?= $this->icon('remove.png') ?>
</a>
<?php } else { ?>
0 Selected items are currently in downtime.
<?php } ?>
</div>
<a rel="tooltip" title="Remove all acknowledgements from all selected hosts or services" href="<?=
$this->href(
'monitoring/command/removeacknowledgement',
$target
);
?>" class="button btn-cta btn-common btn-wide">
Remove Acknowledgements
</a>
</div>
</div>
</td>
<td>
Change <a data-base-target='_next' href="<?= $this->href('') ?>"
> <?= count($downtimes) ?> downtimes
</a>.
</td>
</tr>

31
modules/monitoring/application/views/scripts/multi/components/flags.phtml Normal file
View File

@ -0,0 +1,31 @@
<form
id="<?= $form->getId() ?>"
name="<?= $form->getName() ?>"
enctype="<?= $form->getEnctype() ?>"
action="<?= $form->getAction() ?>"
method="post"
>
<table class="avp">
<tr class="newsection"><th></th><td></td></tr>
<?php foreach($this->form->getElements() as $name => $element):
if ($element instanceof \Icinga\Web\Form\Element\TriStateCheckbox):
$element->setDecorators(array('ViewHelper'));
?>
<tr>
<th>
<label for="<?= $element->getName() ?>"> <?= $element->getLabel() ?> </label>
</th>
<td>
<?= $element->render() ?>
</td>
</tr>
<?php else: ?>
<tr>
<td> <?= $element->render() ?></td>
</tr>
<?php
endif;
endforeach;
?>
</table>
</form>

34
modules/monitoring/application/views/scripts/multi/components/objectlist.phtml Normal file
View File

@ -0,0 +1,34 @@
<?php for ($i = 0; $i < count($objects) && $i < 5; $i++) {
$object = $objects[$i]; ?>
<a data-base-target='_next' href="<?php
if ($this->is_service) {
echo $this->href(
'monitoring/show/service',
array('host' => $object->host_name, 'service' => $object->service_description)
);
echo '">' . $object->host_name . ' ' . $object->service_description . '</a>';
} else {
echo $this->href(
'monitoring/show/host',
array('host' => $object->host_name)
);
echo '">' . $object->host_name . '</a>';
}?>,
<?php } ?> <?php
if (count($objects) > 5) {
echo '<i> ... ' . (count($objects) - 5) . ' more ... </i>';
}
if (!$this->is_service) {
$link = 'monitoring/list/hosts';
$target = array(
'host' => $this->hostquery
);
} else {
$link = 'monitoring/list/services';
$target = array(
'host' => $this->hostquery,
'service' => $this->servicequery
);
}
?> <a data-base-target='_next' href='<?= $this->href($link, $this->query); ?>'><b> list all </b></a>

155
modules/monitoring/application/views/scripts/multi/components/summary.phtml
View File

@ -1,93 +1,72 @@
<?php
/** @var Zend_View_Helper_CommandForm $cf */
$cf = $this->getHelper('CommandForm');
$servicequery = isset($this->servicequery) ? $this->servicequery : '';
/** @var Zend_View_Helper_CommandForm $cf */
$cf = $this->getHelper('CommandForm');
$servicequery = isset($this->servicequery) ? $this->servicequery : '';
$objectName = $this->is_service ? 'Services' : 'Hosts';
?>
<div class="container">
<ul class="list-inline">
<?php
for ($i = 0; $i < count($objects) && $i < 10; $i++) {
$object = $objects[$i];
?>
<li>
<a href="<?php
if ($this->is_service) {
echo $this->href(
'monitoring/show/service',
array(
'host' => $object->host_name,
'service' => $object->service_description
)
);
} else {
echo $this->href(
'monitoring/show/host', array('host' => $object->host_name)
);
}?>" >
<?= $object->host_name; ?>
<?= isset($object->service_description) ? $object->service_description : '' ?>
</a>
</li>
<?php } ?>
</ul>
<?php
if (count($objects) > 10) {
$text = ' and ' . (count($objects) - 10) . ' more ...';
} else {
$text = ' show all ...';
}
if ($this->is_service) {
$link = 'monitoring/list/hosts';
$target = array(
'host' => implode(',', $hostnames)
);
} else {
$link = 'monitoring/list/services';
// TODO: Show multiple targets for services
$target = array();
}
?>
<a class="pull-right" href="<?= $this->href($link, $target); ?>"> <?= $text ?></a>
</div>
<br />
<div class="panel-row">
<a href="<?=
$this->href(
'monitoring/command/reschedulenextcheck',
$this->target
);
?>" class="button btn-cta btn-half-left">
Recheck
</a>
<a href="<?=
$this->href(
'monitoring/command/reschedulenextcheck',
$this->target
);
?>" class="button btn-cta btn-half-right">
Reschedule
</a>
</div>
<tr>
<th>
<?= count($objects) . ' ' . $objectName ?>
</th>
<td>
<a
href="<?=$this->href(
'monitoring/command/reschedulenextcheck',
array(
'host' => $this->target['host'],
'service' => array_key_exists('service', $this->target) ? $this->target['service'] : null,
'checktime' => time(),
'forcecheck' => '1'
)
); ?>"
>
<?= $this->icon('refresh_petrol.png') ?> Recheck
</a> <br/>
<a href="<?= $this->href('monitoring/command/reschedulenextcheck', $this->target) ?>">
<?= $this->icon('reschedule_petrol.png') ?> Reschedule
</a> <br />
<div>
The selected objects have <span class="badge"> <?= $this->problems ?> </span> service problems. <br /><br />
</td>
<td>
Perform actions on <?= count($objects) . ' ' . $objectName ?>.
</td>
</tr>
<a rel="tooltip" title="Acknowledge all problems on the selected hosts or services" href="<?=
$this->href(
'monitoring/command/acknowledgeproblem',
$this->target
);
?>" class="button btn-cta btn-half-left">
Acknowledge Problems
</a>
<a rel="tooltip" title="Schedule downtimes for all selected hosts" href="<?=
$this->href(
'monitoring/command/scheduledowntime',
$this->target
);
?>" class="button btn-cta btn-half-right">
Schedule Downtimes
</a>
</div>
<tr class="newsection">
<th>
<?= $this->problems ?> Problems
</th>
<td>
<a
title="Schedule downtimes for all selected hosts"
href="<?= $this->href('monitoring/command/scheduledowntime', $this->target); ?>"
>
<?= $this->icon('in_downtime_petrol.png') ?> Schedule Downtimes
</a>
</td>
<td>
Handle <?= $this->problems ?> problems on <span> <?= count($this->objects) ?> </span> <?= $objectName ?>.
</td>
</tr>
<tr>
<th>
<?= count($this->unhandled) ?> Unhandled
</th>
<td>
<a
title="Acknowledge all problems on the selected hosts or services"
href="<?= $this->href('monitoring/command/acknowledgeproblem', $this->target);?>"
>
<?= $this->icon('acknowledgement_petrol.png') ?> Acknowledge
</a> <br />
<a
title="Remove all acknowledgements from all selected hosts or services"
href="<?=$this->href('monitoring/command/removeacknowledgement', $target);?>"
>
<?= $this->icon('remove_petrol.png') ?> Remove Acknowledgements
</a>
</td>
<td>
</td>
</tr>

78
modules/monitoring/application/views/scripts/multi/host.phtml
View File

@ -1,33 +1,59 @@
<?php
$this->is_service = false;
$this->hostquery = implode($this->hostnames, ',');
$this->target = array(
'host' => $this->hostquery
);
$this->target = array('host' => $this->hostquery);
?>
<?= $this->tabs->render($this); ?>
<div>
<div class="panel panel-heading">
<b> Hosts </b> (<?= count($objects) ?> objects)
<div class="pull-right">
<a rel="tooltip" title="Submit passive checkresults" href="<?=
$this->href(
'monitoring/command/submitpassivecheckresult',
$this->target
);
?>" class="button btn-cta btn-common btn-small">
<i class="icinga-icon-submit"></i>
</a>
</div>
</div>
<hr class="separator" />
<div class="panel panel-body">
<?= $this->render('multi/components/summary.phtml'); ?>
</div>
<div class="controls">
<?= $this->tabs; ?>
</div>
<?= $this->render('multi/components/comments.phtml'); ?>
<?= $this->render('multi/components/downtimes.phtml'); ?>
<?= $this->render('multi/components/configuration.phtml'); ?>
<div class="content">
<h1> Summary for <?= count($objects) ?> hosts </h1>
<?= $this->render('multi/components/objectlist.phtml'); ?>
<table class="avp">
<tr>
<th align="center">
<h3><?= array_sum(array_values($states)) ?> Hosts</h3>
</th>
<th></th>
</tr>
<tr>
<td align="center">
<?= $this->pie->render(); ?>
</td>
<td>
<?php
foreach ($states as $state => $count) {
if ($count > 0) {
echo ucfirst($state) . ': ' . $count . '<br />';
}
}
?>
</td>
<td></td>
</tr>
</table>
<h2> <?=$this->icon('hostgroup.png')?> Host Actions </h2>
<table class="avp newsection">
<tbody>
<?= $this->render('multi/components/summary.phtml'); ?>
<?= $this->render('multi/components/comments.phtml'); ?>
<?= $this->render('multi/components/downtimes.phtml'); ?>
</tbody>
</table>
<?= $this->render('multi/components/flags.phtml') ?>
</div>
<a
rel="tooltip"
title="Submit passive checkresults"
href="<?= $this->href('monitoring/command/submitpassivecheckresult', $this->target); ?>"
class="button btn-cta btn-common btn-small"
>
<i class="icinga-icon-submit"></i>
</a>

92
modules/monitoring/application/views/scripts/multi/service.phtml
View File

@ -8,30 +8,72 @@ $this->target = array(
);
?>
<?= $this->tabs->render($this); ?>
<div>
<div class="panel-heading">
<b> Services </b> (<?= count($objects) ?> objects )
<div class="pull-right">
<a rel="tooltip" title="Submit passive checkresults" href="<?=
$this->href(
'monitoring/command/submitpassivecheckresult',
$this->target
);
?>" class="button btn-cta btn-common btn-small">
<i class="icinga-icon-submit"></i>
</a>
</div>
</div>
<hr class="separator" />
<div class="panel-body">
<?= $this->render('multi/components/summary.phtml'); ?>
</div>
<div class="controls">
<?= $this->tabs; ?>
</div>
<?= $this->render('multi/components/comments.phtml'); ?>
<?= $this->render('multi/components/downtimes.phtml'); ?>
<?= $this->render('multi/components/configuration.phtml'); ?>
<div class="content">
<h1> Summary for <?= count($objects) ?> services </h1>
<?= $this->render('multi/components/objectlist.phtml'); ?>
<table class="avp">
<tr>
<th align="center">
<h3><?= array_sum(array_values($service_states)) ?> Services</h3>
</th>
<th></th>
<th align="center">
<h3><?= array_sum(array_values($host_states)) ?> Hosts</h3>
</th>
<th></th>
</tr>
<tr>
<td align="center">
<?= $this->service_pie->render(); ?>
</td>
<td>
<?php
foreach ($service_states as $state => $count) {
if ($count > 0) {
echo ucfirst($state) . ': ' . $count . '<br />';
}
}
?>
</td>
<td align="center">
<?= $this->host_pie->render(); ?>
</td>
<td>
<?php
foreach ($host_states as $state => $count) {
if ($count > 0) {
echo ucfirst($state) . ': ' . $count . '<br />';
}
}
?>
</td>
<td></td>
</tr>
</table>
<h2> <?=$this->icon('servicegroup.png')?> Service Actions </h2>
<table class="avp newsection">
<tbody>
<?= $this->render('multi/components/summary.phtml'); ?>
<?= $this->render('multi/components/comments.phtml'); ?>
<?= $this->render('multi/components/downtimes.phtml'); ?>
</tbody>
</table>
<?= $this->render('multi/components/flags.phtml') ?>
</div>
<a
rel="tooltip"
title="Submit passive checkresults"
href="<?= $this->href('monitoring/command/submitpassivecheckresult', $this->target); ?>"
class="button btn-cta btn-common btn-small"
>
<i class="icinga-icon-submit"></i>
</a>

8
public/css/icinga/selection-toolbar.less Normal file
View File

@ -0,0 +1,8 @@
div.selection-toolbar {
float: right;
padding-right: 20px;
}
div.selection-toolbar a {
color: #049baf
}

167
public/js/icinga/events.js
View File

@ -13,6 +13,12 @@
Icinga.Events.prototype = {
keyboard: {
ctrlKey: false,
altKey: false,
shiftKey: false
},
/**
* Icinga will call our initialize() function once it's ready
*/
@ -20,6 +26,7 @@
this.applyGlobalDefaults();
this.applyHandlers($('#layout'));
this.icinga.ui.prepareContainers();
this.icinga.ui.prepareMultiselectTables($(document));
},
// TODO: What's this?
@ -61,11 +68,27 @@
$('input.autofocus', el).focus();
$('.inlinepie', el).sparkline('html', {
type: 'pie',
sliceColors: ['#44bb77', '#ffaa44', '#ff5566', '#dcd'],
width: '2em',
height: '2em',
$('div.inlinepie', el).each(function() {
var $img = $(this).find('img');
var title = $img.attr('title'),
values = $img.data('icinga-values'),
colors = $img.data('icinga-colors'),
width = $img.css('width'),
height = $img.css('height');
if (colors) {
colors = colors.split(',');
}
$img.replaceWith(values);
$(this).sparkline(
'html',
{
type: 'pie',
sliceColors: colors || ['#44bb77', '#ffaa44', '#ff5566', '#dcd'],
width: width,
height: height,
tooltipChartTitle: title
}
);
});
},
@ -89,8 +112,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', 'tr[href]', { self: this }, this.linkClicked);
// Select a table row
$(document).on('click', 'table.action tr[href]', { self: this }, this.rowSelected);
$(document).on('click', 'table.action tr a', { self: this }, this.rowSelected);
$(document).on('click', 'button', { self: this }, this.submitForm);
@ -110,6 +134,8 @@
$(document).on('mouseleave', '#sidebar', this.leaveSidebar);
$(document).on('click', '.tree .handle', { self: this }, this.treeNodeToggle);
// Toggle all triStateButtons
$(document).on('click', 'div.tristate .tristate-dummy', { self: this }, this.clickTriState);
// TBD: a global autocompletion handler
// $(document).on('keyup', 'form.auto input', this.formChangeDelayed);
@ -225,6 +251,38 @@
return event.data.self.submitForm(event, true);
},
clickTriState: function (event) {
var $tristate = $(this);
var triState = parseInt($tristate.data('icinga-tristate'), 10);
// load current values
var old = $tristate.data('icinga-old').toString();
var value = $tristate.parent().find('input:radio:checked').first().prop('checked', false).val();
// calculate the new value
if (triState) {
// 1 => 0
// 0 => unchanged
// unchanged => 1
value = value === '1' ? '0' : (value === '0' ? 'unchanged' : '1');
} else {
// 1 => 0
// 0 => 1
value = value === '1' ? '0' : '1';
}
// update form value
$tristate.parent().find('input:radio[value="' + value + '"]').prop('checked', true);
// update dummy
if (value !== old) {
$tristate.parent().find('b.tristate-changed').css('visibility', 'visible');
} else {
$tristate.parent().find('b.tristate-changed').css('visibility', 'hidden');
}
self.icinga.ui.setTriState(value.toString(), $tristate);
},
/**
*
*/
@ -277,6 +335,92 @@
return false;
},
handleExternalTarget: function($node) {
var linkTarget = $node.attr('target');
// TODO: Let remote links pass through. Right now they only work
// combined with target="_blank" or target="_self"
// window.open is used as return true; didn't work reliable
if (linkTarget === '_blank' || linkTarget === '_self') {
window.open(href, linkTarget);
return true;
}
return false;
},
/**
* Handle table selection.
*/
rowSelected: function(event) {
var self = event.data.self;
var icinga = self.icinga;
var $tr = $(this);
var $table = $tr.closest('table.multiselect');
var data = self.icinga.ui.getSelectionKeys($table);
var multisel = $table.hasClass('multiselect');
var url = $table.data('icinga-multiselect-url');
// 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;
}
if (multisel && !data) {
icinga.logger.error('A table with multiselection must define the attribute "data-icinga-multiselect-data"');
return;
}
if (multisel && !url) {
icinga.logger.error('A table with multiselection must define the attribute "data-icinga-multiselect-url"');
return;
}
// update selection
if ((event.ctrlKey || event.metaKey) && multisel) {
icinga.ui.toogleTableRowSelection($tr);
// multi selection
} else if (event.shiftKey && multisel) {
// range selection
icinga.ui.addTableRowRangeSelection($tr);
} else {
// single selection
icinga.ui.setTableRowSelection($tr);
}
// focus only the current table.
icinga.ui.focusTable($table[0]);
// update url
var $target = self.getLinkTargetFor($tr);
if (multisel) {
var $trs = $table.find('tr[href].active');
if ($trs.length > 1) {
var queries = [];
var selectionData = icinga.ui.getSelectionSetData($trs, data);
var query = icinga.ui.selectionDataToQuery(selectionData, data, icinga);
icinga.loader.loadUrl(url + '?' + query, $target);
icinga.ui.storeSelectionData(selectionData);
} else if ($trs.length === 1) {
// display a single row
icinga.loader.loadUrl($tr.attr('href'), $target);
icinga.ui.storeSelectionData($tr.attr('href'));
} else {
// display nothing
icinga.loader.loadUrl('#');
icinga.ui.storeSelectionData(null);
}
} else {
icinga.loader.loadUrl($tr.attr('href'), $target);
}
return false;
},
/**
* Someone clicked a link or tr[href]
*/
@ -299,6 +443,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();
@ -409,7 +558,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.action tr[href]', this.rowSelected);
$(document).off('click', 'table.action tr a', this.rowSelected);
$(document).off('submit', 'form', this.submitForm);
$(document).off('click', 'button', this.submitForm);
$(document).off('change', 'form select.autosubmit', this.submitForm);
@ -417,6 +567,7 @@
$(document).off('mouseleave', '.historycolorgrid td', this.historycolorgidUnhover);
$(document).off('mouseenter', 'li.dropdown', this.dropdownHover);
$(document).off('mouseleave', 'li.dropdown', this.dropdownLeave);
$(document).off('click', 'div.tristate .tristate-dummy', this.clickTriState);
},
destroy: function() {

52
public/js/icinga/loader.js
View File

@ -247,7 +247,9 @@
if (! req.autorefresh) {
// TODO: Hook for response/url?
var $forms = $('[action="' + this.icinga.utils.parseUrl(url).path + '"]');
var $matches = $.merge($('[href="' + url + '"]'), $forms);
$matches.each(function (idx, el) {
if ($(el).closest('#menu').length) {
$('#menu .active').removeClass('active');
@ -273,6 +275,7 @@
});
} else {
// TODO: next container url
// Get first container url?
active = $('[href].active', req.$target).attr('href');
}
@ -387,19 +390,12 @@
this.icinga.history.pushCurrentState();
}
}
this.icinga.ui.initializeTriStates($resp);
/*
* Replace SVG piecharts with jQuery-Sparkline
/**
* Make multiselection-tables not selectable.
*/
$('.inlinepie', $resp).each(function(){
var title = $(this).attr('title'),
style = $(this).attr('style'),
values = $(this).data('icinga-values');
var html = '<div class="inlinepie" style="' + style + '" title="' + title + '">' + values + '</div>';
$(this).replaceWith(html);
});
this.icinga.ui.prepareMultiselectTables($resp);
/* Should we try to fiddle with responses containing full HTML? */
/*
@ -436,7 +432,39 @@
}
if (active) {
$('[href="' + active + '"]', req.$target).addClass('active');
var focusedUrl = this.icinga.ui.getFocusedContainerDataUrl();
var oldSelectionData = this.icinga.ui.loadSelectionData();
if (typeof oldSelectionData === 'string') {
$('[href="' + oldSelectionData + '"]', req.$target).addClass('active');
} else if (oldSelectionData !== null) {
var $container;
if (!focusedUrl) {
$container = $('document').first();
} else {
$container = $('.container[data-icinga-url="' + focusedUrl + '"]');;
}
var $table = $container.find('table.action').first();
var keys = self.icinga.ui.getSelectionKeys($table);
// build map of selected queries
var oldSelectionQueries = {};
$.each(oldSelectionData, function(i, query){
oldSelectionQueries[self.icinga.ui.selectionDataToQueryComp(query)] = true;
});
// set all new selections to active
$table.find('tr[href]').filter(function(){
var $tr = $(this);
var rowData = self.icinga.ui.getSelectionData($tr, keys, self.icinga);
var newSelectionQuery = self.icinga.ui.selectionDataToQueryComp(rowData);
if (oldSelectionQueries[newSelectionQuery]) {
return true;
}
return false;
}).addClass('active');
}
}
req.$target.trigger('rendered');
},

279
public/js/icinga/ui.js
View File

@ -7,6 +7,13 @@
'use strict';
// Stores the icinga-data-url of the last focused table.
var focusedTableDataUrl = null;
// The stored selection data, useful for preserving selections over
// multiple reload-cycles.
var selectionData = null;
Icinga.UI = function (icinga) {
this.icinga = icinga;
@ -198,12 +205,10 @@
return true;
}
}
this.icinga.logger.error(
'Someone messed up our responsiveness hacks, html font-family is',
layout
);
return false;
},
@ -271,6 +276,220 @@
*/
},
/**
* Prepare all multiselectable tables for multi-selection by
* removing the regular text selection.
*/
prepareMultiselectTables: function () {
var $rows = $('table.multiselect tr[href]');
$rows.find('td').attr('unselectable', 'on')
.css('user-select', 'none')
.css('-webkit-user-select', 'none')
.css('-moz-user-select', 'none')
.css('-ms-user-select', 'none');
},
/**
* Add the given table-row to the selection of the closest
* table and deselect all other rows of the closest table.
*
* @param $tr {jQuery} The selected table row.
* @returns {boolean} If the selection was changed.
*/
setTableRowSelection: function ($tr) {
var $table = $tr.closest('table.multiselect');
$table.find('tr[href].active').removeClass('active');
$tr.addClass('active');
return true;
},
/**
* Toggle the given table row to "on" when not selected, or to "off" when
* currently selected.
*
* @param $tr {jQuery} The table row.
* @returns {boolean} If the selection was changed.
*/
toogleTableRowSelection: function ($tr) {
// multi selection
if ($tr.hasClass('active')) {
$tr.removeClass('active');
} else {
$tr.addClass('active');
}
return true;
},
/**
* Add a new selection range to the closest table, using the selected row as
* range target.
*
* @param $tr {jQuery} The target of the selected range.
* @returns {boolean} If the selection was changed.
*/
addTableRowRangeSelection: function ($tr) {
var $table = $tr.closest('table.multiselect');
var $rows = $table.find('tr[href]'),
from, to;
var selected = $tr.first().get(0);
$rows.each(function(i, el) {
if ($(el).hasClass('active') || el === selected) {
if (!from) {
from = el;
}
to = el;
}
});
var inRange = false;
$rows.each(function(i, el){
if (el === from) {
inRange = true;
}
if (inRange) {
$(el).addClass('active');
}
if (el === to) {
inRange = false;
}
});
return false;
},
/**
* Read the data from a whole set of selections.
*
* @param $selections {jQuery} All selected rows in a jQuery-selector.
* @param keys {Array} An array containing all valid keys.
* @returns {Array} An array containing an object with the data for each selection.
*/
getSelectionSetData: function($selections, keys) {
var selections = [];
var icinga = this.icinga;
// read all current selections
$selections.each(function(ind, selected) {
selections.push(icinga.ui.getSelectionData($(selected), keys, icinga));
});
return selections;
},
getSelectionKeys: function($selection)
{
var d = $selection.data('icinga-multiselect-data') && $selection.data('icinga-multiselect-data').split(',');
return d || [];
},
/**
* Read the data from the given selected object.
*
* @param $selection {jQuery} The selected object.
* @param keys {Array} An array containing all valid keys.
* @param icinga {Icinga} The main icinga object.
* @returns {Object} An object containing all key-value pairs associated with this selection.
*/
getSelectionData: function($selection, keys, icinga)
{
var url = $selection.attr('href');
var params = this.icinga.utils.parseUrl(url).params;
var tuple = {};
for (var i = 0; i < keys.length; i++) {
var key = keys[i];
if (params[key]) {
tuple[key] = params[key];
}
}
return tuple;
},
/**
* Convert a set of selection data to a single query.
*
* @param selectionData {Array} The selection data generated from getSelectionData
* @returns {String} The formatted and uri-encoded query-string.
*/
selectionDataToQuery: function (selectionData) {
var queries = [];
// create new url
if (selectionData.length < 2) {
// single-selection
$.each(selectionData[0], function(key, value){
queries.push(key + '=' + encodeURIComponent(value));
});
} else {
// multi-selection
$.each(selectionData, function(i, el){
$.each(el, function(key, value) {
queries.push(key + '[' + i + ']=' + encodeURIComponent(value));
});
});
}
return queries.join('&');
},
/**
* Create a single query-argument (not compatible to selectionDataToQuery)
*
* @param data
* @returns {string}
*/
selectionDataToQueryComp: function(data) {
var queries = [];
$.each(data, function(key, value){
queries.push(key + '=' + encodeURIComponent(value));
});
return queries.join('&');
},
/**
* Store a set of selection-data to preserve it accross page-reloads
*
* @param data {Array|String|Null} The selection-data be an Array of Objects,
* containing the selection data (when multiple rows where selected), a
* String containing a single url (when only a single row was selected) or
* Null when nothing was selected.
*/
storeSelectionData: function(data) {
selectionData = data;
},
/**
* Load the last stored set of selection-data
*
* @returns {Array|String|Null} May be an Array of Objects, containing the selection data
* (when multiple rows where selected), a String containing a single url
* (when only a single row was selected) or Null when nothing was selected.
*/
loadSelectionData: function() {
return selectionData;
},
/**
* 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');
var n = $(table).closest('div.container').attr('data-icinga-url');
focusedTableDataUrl = n;
},
/**
* Return the URL of the last focused table container.
*
* @returns {String} The data-icinga-url of the last focused table, which should be unique in each site.
*/
getFocusedContainerDataUrl: function() {
return focusedTableDataUrl;
},
refreshDebug: function () {
var size = this.getDefaultFontSize().toString();
@ -369,6 +588,62 @@
return $calc.width() / 1000;
},
/**
* Initialize all TriStateCheckboxes in the given html
*/
initializeTriStates: function ($html) {
var self = this;
$('div.tristate', $html).each(function(index, item) {
var $target = $(item);
// hide input boxess and remove text nodes
$target.find("input").hide();
$target.contents().filter(function() { return this.nodeType === 3; }).remove();
// has three states?
var triState = $target.find('input[value="unchanged"]').size() > 0 ? 1 : 0;
// fetch current value from radiobuttons
var value = $target.find('input:checked').first().val();
$target.append(
'<input class="tristate-dummy" ' +
' data-icinga-old="' + value + '" data-icinga-tristate="' + triState + '" type="checkbox" ' +
(value === '1' ? 'checked ' : ( value === 'unchanged' ? 'indeterminate="true" ' : ' ' )) +
'/> <b style="visibility: hidden;" class="tristate-changed"> (changed) </b>'
);
if (triState) {
// TODO: find a better way to activate indeterminate checkboxes after load.
$target.append(
'<script type="text/javascript"> ' +
' $(\'input.tristate-dummy[indeterminate="true"]\').each(function(i, el){ el.indeterminate = true; }); ' +
'</script>'
);
}
});
},
/**
* Set the value of the given TriStateCheckbox
*
* @param value {String} The value to set, can be '1', '0' and 'unchanged'
* @param $checkbox {jQuery} The checkbox
*/
setTriState: function(value, $checkbox)
{
switch (value) {
case ('1'):
$checkbox.prop('checked', true).prop('indeterminate', false);
break;
case ('0'):
$checkbox.prop('checked', false).prop('indeterminate', false);
break;
case ('unchanged'):
$checkbox.prop('checked', false).prop('indeterminate', true);
break;
}
},
initializeControls: function (parent) {
var self = this;

2
public/js/icinga/utils.js
View File

@ -104,7 +104,7 @@
path : a.pathname.replace(/^([^\/])/,'/$1'),
relative: (a.href.match(/tps?:\/\/[^\/]+(.+)/) || [,''])[1],
segments: a.pathname.replace(/^\//,'').split('/'),
params : this.parseParams(a),
params : this.parseParams(a)
};
a = null;