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

Fix configuration checkboxes and colors in piecharts 

refs #5765
This commit is contained in:
Matthias Jentsch 2014-04-23 11:35:16 +02:00
parent b16c6efa05
commit b791883fa8
6 changed files with 131 additions and 100 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -64,6 +64,7 @@ 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',
@ -90,8 +91,8 @@ class Monitoring_MultiController extends ActionController
$this->view->hostnames = $this->getProperties($hosts, 'host_name');
$this->view->downtimes = $this->getDowntimes($hosts);
$this->view->errors = $errors;
$this->view->states = $this->countStates($hosts);
$this->view->pie = $this->createPie($this->view->states);
$this->view->states = $this->countStates($hosts, 'host', 'host_name');
$this->view->pie = $this->createPie($this->view->states, $this->view->getHelper('MonitoringState')->getHostStateColors());
// Handle configuration changes
$this->handleConfigurationForm(array(
@ -147,10 +148,10 @@ class Monitoring_MultiController extends ActionController
$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);
$this->view->host_states = $this->countStates($services, 'host_name', 'host_state');
$this->view->service_pie = $this->createPie($this->view->service_states);
$this->view->host_pie = $this->createPie($this->view->host_states);
$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;
$this->handleConfigurationForm(array(
@ -242,16 +243,14 @@ class Monitoring_MultiController extends ActionController
return $problems;
}
private function countStates($objects, $unique = null, $state = 'service_state')
private function countStates($objects, $type = 'host', $unique = null)
{
$known = array();
$states = array(
'0' => 0,
'1' => 0,
'2' => 0,
'3' => 0,
'99' => 0
);
$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)) {
@ -259,22 +258,16 @@ class Monitoring_MultiController extends ActionController
}
$known[$object->$unique] = true;
}
$states[$object->$state]++;
$states[$this->view->monitoringState($object, $type)]++;
}
return array(
'up' => $states['0'],
'down' => $states['1'],
'unreachable' => $states['2'],
'unknown' => $states['3'],
'pending' => $states['99']
);
return $states;
}
private function createPie($states)
private function createPie($states, $colors)
{
$chart = new InlinePie(
array_values($states),
array('#44bb77', '#FF5566', '#FF5566', '#E066FF', '#77AAFF')
$colors
);
$chart->setLabels(array_keys($states))
->setHeight(100)

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

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

@ -15,7 +15,7 @@
'monitoring/command/reschedulenextcheck',
array(
'host' => $this->target['host'],
'service' => $this->target['service'],
'service' => array_key_exists('service', $this->target) ? $this->target['service'] : null,
'checktime' => time(),
'forcecheck' => '1'
)

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>

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

@ -135,7 +135,7 @@
$(document).on('click', '.tree .handle', { self: this }, this.treeNodeToggle);
// Toggle all triStateButtons
$(document).on('click', '.tristate input.tristate', { self: this}, this.clickTriState);
$(document).on('click', 'div.tristate .tristate-dummy', { self: this }, this.clickTriState);
// TBD: a global autocompletion handler
// $(document).on('keyup', 'form.auto input', this.formChangeDelayed);
@ -253,12 +253,13 @@
clickTriState: function (event) {
var $tristate = $(this);
var old = $tristate.data('icinga-old');
var triState = parseInt($tristate.data('icinga-tristate'), 10);
var value = $tristate.data('icinga-value');
var self = event.data.self;
// update value
// load current values
var old = $tristate.data('icinga-old');
var value = $tristate.parent().find('input:radio:checked').first().prop('checked', false).val();
// calculate the new value
if (triState) {
// 1 => 0
// 0 => unchanged
@ -269,19 +270,17 @@
// 0 => 1
value = value === '1' ? '0' : '1';
}
$tristate.data('icinga-value', value);
// update form value
$tristate.parent().find('input:radio[value="' + value + '"]').prop('checked', true);
// update dummy
// also set form value
$tristate.prop('value', value);
var $changed = $tristate.parent().find('.tristate-status').first();
if (old != value) {
$changed.text('changed');
console.log(value + ' === ' + old + ' ?');
if (value !== old) {
$tristate.parent().find('b.tristate-changed').css('visibility', 'visible');
} else {
$changed.empty();
$tristate.parent().find('b.tristate-changed').hide();
}
$tristate.find('.tristate-status').text(value);
self.icinga.ui.updateTriState(value.toString(), $tristate);
self.icinga.ui.setTriState(value.toString(), $tristate);
},
/**
@ -600,6 +599,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() {

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

@ -469,35 +469,32 @@
initializeTriStates: function ($html) {
var self = this;
$('div.tristate', $html).each(function(index, item) {
var target = item;
var $target = $(target);
var value = $target.find('input:checked').first().val();
var triState = value === 'unchanged' ? true : false;
var name = $('input', target).first().attr('name');
var old = value;
var $target = $(item);
var getStateDescription = function(value) {
if (value === 'unchanged') {
return '(mixed values)';
}
return '';
};
$target.empty();
$target.parent().parent()
.find('label')
.append('&#160;&#160;<span class="tristate-changed"></span>');
// 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 name="' + name + '" ' +
'class="tristate" type="checkbox" ' +
'data-icinga-old="' + old + '" ' +
'data-icinga-tristate="' + triState + '" ' +
'data-icinga-value="' + value + '" ' +
( value === 'unchanged' ? 'indeterminate=1 ' : ' ' ) +
( value === '1' ? 'checked ' : ' ' ) +
'></input>' +
'<div class="tristate-status">' + getStateDescription(value) + '</div>'
);
'<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>'
);
}
});
},
@ -507,20 +504,16 @@
* @param value {String} The value to set, can be '1', '0' and 'unchanged'
* @param $checkbox {jQuery} The checkbox
*/
updateTriState: function(value, $checkbox)
setTriState: function(value, $checkbox)
{
console.log($checkbox);
switch (value) {
case ('1'):
console.log('checked true; indeterminate: false');
$checkbox.prop('checked', true).prop('indeterminate', false);
break;
case ('0'):
console.log('checked false; indeterminate: false');
$checkbox.prop('checked', false).prop('indeterminate', false);
break;
case ('unchanged'):
console.log('checked false; indeterminate: true');
$checkbox.prop('checked', false).prop('indeterminate', true);
break;
}