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

Add PieChart to display hosts and services, improve layout and fix flag 

checkboxes

refs #5765
This commit is contained in:
Matthias Jentsch 2014-04-16 19:43:56 +02:00
parent 081b5072a6
commit b16c6efa05
14 changed files with 314 additions and 118 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -48,12 +48,15 @@ class Zend_View_Helper_FormTriStateCheckbox extends Zend_View_Helper_FormElement
public function formTriStateCheckbox($name, $value = null, $attribs = null)
{
$class = "";
$xhtml = '<div>'
$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 "> Undefined </input>';

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;
}
/**

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

@ -32,6 +32,7 @@ use \Icinga\Web\Controller\ActionController;
use \Icinga\Web\Widget\Tabextension\OutputFormat;
use \Icinga\Module\Monitoring\Backend;
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\ServiceStatus as ServiceStatusView;
@ -89,6 +90,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);
// Handle configuration changes
$this->handleConfigurationForm(array(
@ -99,7 +102,6 @@ class Monitoring_MultiController extends ActionController
'host_event_handler_enabled' => 'Event Handler',
'host_flap_detection_enabled' => 'Flap Detection'
));
$this->view->form->setAction('/icinga2-web/monitoring/multi/host');
}
@ -112,11 +114,11 @@ class Monitoring_MultiController extends ActionController
$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',
@ -139,13 +141,17 @@ class Monitoring_MultiController extends ActionController
);
$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->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);
$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->errors = $errors;
$this->handleConfigurationForm(array(
'service_passive_checks_enabled' => 'Passive Checks',
@ -154,9 +160,9 @@ class Monitoring_MultiController extends ActionController
'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
*
@ -236,6 +242,47 @@ class Monitoring_MultiController extends ActionController
return $problems;
}
private function countStates($objects, $unique = null, $state = 'service_state')
{
$known = array();
$states = array(
'0' => 0,
'1' => 0,
'2' => 0,
'3' => 0,
'99' => 0
);
foreach ($objects as $object) {
if (isset($unique)) {
if (array_key_exists($object->$unique, $known)) {
continue;
}
$known[$object->$unique] = true;
}
$states[$object->$state]++;
}
return array(
'up' => $states['0'],
'down' => $states['1'],
'unreachable' => $states['2'],
'unknown' => $states['3'],
'pending' => $states['99']
);
}
private function createPie($states)
{
$chart = new InlinePie(
array_values($states),
array('#44bb77', '#FF5566', '#FF5566', '#E066FF', '#77AAFF')
);
$chart->setLabels(array_keys($states))
->setHeight(100)
->setWidth(100);
return $chart;
}
private function getComments($objects)
{
$unique = array();

2
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);
}
/**

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

@ -4,20 +4,12 @@
<tr class="newsection">
<th>
Comments
<?= count($comments) ?> Comments
</th>
<td>
There are <a href=" <?= $this->href(
'monitoring/list/comments',
array('comment_id' => implode(',', $this->comments))
);
?>"> <?= count($comments) ?> </a>
comments for the selected <?= $objectName ?>
</td>
<td>
<a
href="<?= $this->href('monitoring/command/removecomment', $this->target); ?>"
>
>
<?= $this->icon('remove_petrol.png') ?> Remove Comments
</a> <br >
<a
@ -32,4 +24,10 @@
<?= $this->icon('acknowledgement_petrol.png') ?> Acknowledge
</a>
</td>
<td>Change <a href=" <?= $this->href(
'monitoring/list/comments',
array('comment_id' => implode(',', $this->comments))
);
?>"> <?= count($comments) ?> </a> comments.
</td>
</tr>

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

@ -1,26 +0,0 @@
<!--<?php echo $this->form->render($this); ?>-->
<form>
<?php foreach($this->form->getElements() as $name => $element):
if ($element instanceof \Icinga\Web\Form\Element\TriStateCheckbox):
$element->setDecorators(array('ViewHelper'));
?>
<tr>
<th>
<?= $element->getLabel() ?>
</th>
<td>
<?= $element->render() ?>
</td>
</tr>
<?php else: ?>
<tr>
<td> <?= $element->render() ?></td>
</tr>
<?php
endif;
endforeach;
?>
<form>

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

@ -4,30 +4,22 @@
<tr class="newsection">
<th>
Downtimes
<?= count($downtimes) ?> Downtimes
</th>
<td>
<span> <?= count($downtimes) ?> </span> <?= $objectName ?> Selected items are currently in downtime.
</td>
<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> <br />
<a
href="<?=$this->href('monitoring/command/removedowntime', $this->target); ?>"
>
<?= $this->icon('remove_petrol.png') ?> Remove Downtimes
</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>
Change <a href="<?= $this->href('') ?>"
> <?= count($downtimes) ?>
</a> downtimes.
</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>

9
modules/monitoring/application/views/scripts/multi/components/objectlist.phtml
View File

@ -6,23 +6,24 @@
'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)
);
}?>" >
<!-- <?= $object->host_name; ?> <?= isset($object->service_description) ? $object->service_description : '' ?> -->
echo '">' . $object->host_name . '</a>';
}?>,
<?php } ?> <?php
if (count($objects) > 5) {
$text = ' ' . (count($objects) - 5) . ' more ...';
} else {
$text = ' show all ... ';
}
if ($this->is_service) {
if (!$this->is_service) {
$link = 'monitoring/list/hosts';
$target = array(
'host' => $this->hostquery // implode(',', $hostnames)
'host' => $this->hostquery
);
} else {
$link = 'monitoring/list/services';

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

@ -7,11 +7,8 @@
<tr>
<th>
<?= $objectName ?>
<?= count($objects) . ' ' . $objectName ?>
</th>
<td>
You have selected <?= count($objects) . ' ' . $objectName ?> .
</td>
<td>
<a
href="<?=$this->href(
@ -28,17 +25,18 @@
</a> <br/>
<a href="<?= $this->href('monitoring/command/reschedulenextcheck', $this->target) ?>">
<?= $this->icon('reschedule_petrol.png') ?> Reschedule
</a>
</a> <br />
</td>
<td>
Perform actions on <?= count($objects) . ' ' . $objectName ?>.
</td>
</tr>
<tr>
<tr class="newsection">
<th>
Problems
<?= $this->problems ?> Problems
</th>
<td>
The <?= $objectName ?> have <span> <?= $this->problems ?> </span> problems.
</td>
<td>
<a
title="Schedule downtimes for all selected hosts"
@ -47,22 +45,28 @@
<?= $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>
Unhandled
<?= count($this->unhandled) ?> Unhandled
</th>
<td>
<span> <?= count($this->unhandled) ?> </span> <?= $objectName ?> are unhandled.
</td>
<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>

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

@ -8,33 +8,67 @@ $this->target = array(
);
?>
<?= $this->tabs; ?>
<div class="controls">
<h1> Summary for <?= count($objects) ?> services </h1>
<?= $this->tabs; ?>
</div>
<div class="content">
<h1> Summary for <?= count($objects) ?> services </h1>
<?= $this->render('multi/components/objectlist.phtml'); ?>
<h3> <?=$this->icon('servicegroup.png')?> Service State </h3>
<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'); ?>
<?= $this->render('multi/components/summary.phtml'); ?>
<?= $this->render('multi/components/comments.phtml'); ?>
<?= $this->render('multi/components/downtimes.phtml'); ?>
</tbody>
</table>
<h3> <?=$this->icon('configuration.png')?> Options </h3>
<table class="avp newsection">
<tbody>
<?= $this->render('multi/components/configuration.phtml') ?>
</tbody>
</table>
<?= $this->render('multi/components/flags.phtml') ?>
</div>
<a
rel="tooltip"
title="Submit passive checkresults"

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

@ -68,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
}
);
});
},
@ -118,6 +134,8 @@
$(document).on('mouseleave', '#sidebar', this.leaveSidebar);
$(document).on('click', '.tree .handle', { self: this }, this.treeNodeToggle);
// Toggle all triStateButtons
$(document).on('click', '.tristate input.tristate', { self: this}, this.clickTriState);
// TBD: a global autocompletion handler
// $(document).on('keyup', 'form.auto input', this.formChangeDelayed);
@ -233,6 +251,39 @@
return event.data.self.submitForm(event, true);
},
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
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';
}
$tristate.data('icinga-value', value);
// also set form value
$tristate.prop('value', value);
var $changed = $tristate.parent().find('.tristate-status').first();
if (old != value) {
$changed.text('changed');
} else {
$changed.empty();
}
$tristate.find('.tristate-status').text(value);
self.icinga.ui.updateTriState(value.toString(), $tristate);
},
/**
*
*/

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

@ -247,6 +247,8 @@
if (! req.autorefresh) {
// TODO: Hook for response/url?
var $forms = $('[action="' + this.icinga.utils.parseUrl(url).path + '"]');
console.log('Old URL: ' + url);
var $matches = $.merge($('[href="' + url + '"]'), $forms);
$matches.each(function (idx, el) {
if ($(el).closest('#menu').length) {
@ -273,6 +275,7 @@
});
} else {
// TODO: next container url
// Get first container url?
active = $('[href].active', req.$target).attr('href');
}
@ -387,18 +390,7 @@
this.icinga.history.pushCurrentState();
}
}
/*
* Replace SVG piecharts with jQuery-Sparkline
*/
$('.inlinepie', $resp).each(function(){
var title = $(this).attr('title'),
style = $(this).attr('style'),
values = $(this).data('icinga-values'),
html = '<div class="inlinepie" style="' + style + '" title="' + title + '">' + values + '</div>';
$(this).replaceWith(html);
});
this.icinga.ui.initializeTriStates($resp);
/**
* Make multiselection-tables not selectable.

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

@ -463,6 +463,69 @@
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;
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 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>');
$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>'
);
});
},
/**
* 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
*/
updateTriState: 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;
}
},
initializeControls: function (parent) {
var self = this;