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

Fix layout of MultiController views 

refs #5765
This commit is contained in:
Matthias Jentsch 2014-04-09 19:13:46 +02:00
parent cb630d45ad
commit 081b5072a6
18 changed files with 290 additions and 289 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -44,20 +44,19 @@ 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>'
. '<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',
);

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

@ -278,6 +278,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

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

@ -103,11 +103,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 +137,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 +160,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');

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"> Select All </a> </div>';
} else {
return '';
}

3
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',array( 'host' => '*' ))); ?>
</div>
<div class="content">

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

@ -8,6 +8,7 @@ if (!$this->compact): ?>
<!-- <?= $this->filterBox ?>-->
Sort by <?= $this->sortControl ?>
</div>
<?= $this->paginationControl($services, null, null, array('preserve' => $this->preserve)); ?>
</div>

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

@ -1,61 +1,35 @@
<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>
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
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>
</tr>

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

@ -1,10 +1,26 @@
<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>
<!--<?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>

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

@ -1,49 +1,33 @@
<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>
Downtimes
</th>
<td>
<span> <?= count($downtimes) ?> </span> <?= $objectName ?> Selected items are currently in downtime.
</td>
<td>
<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>
</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>
</tr>

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

@ -1,7 +1,35 @@
<?php
/**
* Created by PhpStorm.
* User: mjentsch
* Date: 09.04.14
* Time: 15:29
*/
<?php for ($i = 0; $i < count($objects) && $i < 5; $i++) {
$object = $objects[$i]; ?>
<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 : '' ?> -->
<?php } ?> <?php
if (count($objects) > 5) {
$text = ' ' . (count($objects) - 5) . ' more ...';
} else {
$text = ' show all ... ';
}
if ($this->is_service) {
$link = 'monitoring/list/hosts';
$target = array(
'host' => $this->hostquery // implode(',', $hostnames)
);
} else {
$link = 'monitoring/list/services';
// TODO: Show multiple targets for services
$target = array(
'host' => $this->hostquery,
'service' => $this->servicequery
);
}
?> <a href="<?= $this->href($link, $target); ?>"> <?= $text ?></a>

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

@ -1,93 +1,68 @@
<?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>
<?= $objectName ?>
</th>
<td>
You have selected <?= count($objects) . ' ' . $objectName ?> .
</td>
<td>
<a
href="<?=$this->href(
'monitoring/command/reschedulenextcheck',
array(
'host' => $this->target['host'],
'service' => $this->target['service'],
'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>
</td>
</tr>
<div>
The selected objects have <span class="badge"> <?= $this->problems ?> </span> service problems. <br /><br />
<tr>
<th>
Problems
</th>
<td>
The <?= $objectName ?> have <span> <?= $this->problems ?> </span> problems.
</td>
<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>
</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>
<th>
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>
</td>
</tr>

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

@ -8,30 +8,38 @@ $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>
<?= $this->tabs; ?>
<div class="controls">
<h1> Summary for <?= count($objects) ?> services </h1>
</div>
<?= $this->render('multi/components/comments.phtml'); ?>
<?= $this->render('multi/components/downtimes.phtml'); ?>
<?= $this->render('multi/components/configuration.phtml'); ?>
<div class="content">
<?= $this->render('multi/components/objectlist.phtml'); ?>
<h3> <?=$this->icon('servicegroup.png')?> Service State </h3>
<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>
<h3> <?=$this->icon('configuration.png')?> Options </h3>
<table class="avp newsection">
<tbody>
<?= $this->render('multi/components/configuration.phtml') ?>
</tbody>
</table>
</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
View File

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

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

@ -26,7 +26,7 @@
this.applyGlobalDefaults();
this.applyHandlers($('#layout'));
this.icinga.ui.prepareContainers();
this.icinga.ui.prepareMultiselectTables();
this.icinga.ui.prepareMultiselectTables($(document));
},
// TODO: What's this?
@ -306,10 +306,9 @@
var icinga = self.icinga;
var $tr = $(this);
var $table = $tr.closest('table.multiselect');
var data = $table.data('icinga-multiselect-data').split(',');
var data = $table.data('icinga-multiselect-data') && $table.data('icinga-multiselect-data').split(',');
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') {
@ -323,11 +322,11 @@
// link handled externally
return false;
}
if (!data) {
if (multisel && !data) {
icinga.logger.error('A table with multiselection must define the attribute "data-icinga-multiselect-data"');
return;
}
if (!url) {
if (multisel && !url) {
icinga.logger.error('A table with multiselection must define the attribute "data-icinga-multiselect-url"');
return;
}
@ -347,18 +346,22 @@
icinga.ui.focusTable($table[0]);
// Update url
$trs = $table.find('tr[href].active');
$target = self.getLinkTargetFor($tr);
if ($trs.length > 1) {
// display multiple rows
var query = icinga.events.selectionToQuery($trs, data, icinga);
icinga.loader.loadUrl(url + '?' + query, $target);
} else if ($trs.length === 1) {
// display a single row
icinga.loader.loadUrl($tr.attr('href'), $target);
var $target = self.getLinkTargetFor($tr);
if (multisel) {
var $trs = $table.find('tr[href].active');
if ($trs.length > 1) {
// display multiple rows
var query = icinga.events.selectionToQuery($trs, data, icinga);
icinga.loader.loadUrl(url + '?' + query, $target);
} else if ($trs.length === 1) {
// display a single row
icinga.loader.loadUrl($tr.attr('href'), $target);
} else {
// display nothing
icinga.loader.loadUrl('#');
}
} else {
// display nothing
icinga.loader.loadUrl('#');
icinga.loader.loadUrl($tr.attr('href'), $target);
}
return false;
},

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

@ -393,13 +393,17 @@
* Replace SVG piecharts with jQuery-Sparkline
*/
$('.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>';
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);
});
/**
* Make multiselection-tables not selectable.
*/
this.icinga.ui.prepareMultiselectTables($resp);
/* Should we try to fiddle with responses containing full HTML? */
/*

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

@ -198,12 +198,10 @@
return true;
}
}
this.icinga.logger.error(
'Someone messed up our responsiveness hacks, html font-family is',
layout
);
return false;
},