Merge pull request #3870 from Icinga/feature/collapsible-plugin-output-3566

Collapsible plugin output
This commit is contained in:
Johannes Meyer 2019-07-29 09:33:58 +02:00 committed by GitHub
commit b6c89bc863
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 47 additions and 19 deletions

View File

@ -34,9 +34,11 @@ class Zend_View_Helper_Customvar extends Zend_View_Helper_Abstract
return '[]';
}
$out = "<ul>\n";
foreach ($array as $val) {
$out .= '<li>' . $this->customvar($val) . "</li>\n";
}
return $out . "</ul>\n";
}
@ -46,6 +48,7 @@ class Zend_View_Helper_Customvar extends Zend_View_Helper_Abstract
return '{}';
}
$out = "{<ul>\n";
foreach ($object as $key => $val) {
$out .= '<li>'
. $this->view->escape($key)
@ -53,6 +56,7 @@ class Zend_View_Helper_Customvar extends Zend_View_Helper_Abstract
. $this->customvar($val)
. "</li>\n";
}
return $out . "</ul>}";
}
}

View File

@ -108,7 +108,7 @@ class Zend_View_Helper_Perfdata extends Zend_View_Helper_Abstract
return '';
}
return sprintf(
'<table class="performance-data-table">%s</table>',
'<table class="performance-data-table collapsible" data-visible-rows="6">%s</table>',
implode("\n", $table)
);
}

View File

@ -43,7 +43,7 @@
<?php if (! empty($object->customvars)): ?>
<h2><?= $this->translate('Custom Variables') ?></h2>
<table class="name-value-table">
<table id="<?= $object->type ?>-customvars" class="name-value-table collapsible" data-visible-height="200">
<tbody>
<?= $this->render('show/components/customvars.phtml') ?>
</tbody>

View File

@ -38,7 +38,11 @@ if (($navigation->isEmpty() || ! $navigation->hasRenderableItems()) && $notes ==
<td>
<?= $navigation->getRenderer() ?>
<?php if ($notes !== ''): ?>
<?= $this->markdown($notes) ?>
<?= $this->markdown($notes, [
'id' => $object->type . '-notes',
'class' => 'collapsible',
'data-visible-height' => 200
]) ?>
<?php endif ?>
</td>
</tr>

View File

@ -1,3 +1,5 @@
<h2><?= $this->translate('Plugin Output') ?></h2>
<?= $this->pluginOutput($object->output, false, $object->check_command) ?>
<?= $this->pluginOutput($object->long_output, false, $object->check_command) ?>
<div id="check-output-<?= $this->escape(str_replace(' ', '-', $object->check_command)) ?>" class="collapsible" data-visible-height="100">
<?= $this->pluginOutput($object->output, false, $object->check_command) ?>
<?= $this->pluginOutput($object->long_output, false, $object->check_command) ?>
</div>

View File

@ -1,4 +1,4 @@
<?php if ($object->perfdata): ?>
<h2><?= $this->translate('Performance data') ?></h2>
<?= $this->perfdata($object->perfdata) ?>
<div id="check-perfdata-<?= $this->escape(str_replace(' ', '-', $object->check_command)) ?>"><?= $this->perfdata($object->perfdata) ?></div>
<?php endif ?>

View File

@ -307,7 +307,7 @@ a:hover > .icon-cancel {
position: relative;
overflow: hidden;
&:before {
&:before, &:after {
content: "";
display: block;
height: 2em;
@ -317,5 +317,23 @@ a:hover > .icon-cancel {
left: 0;
right: 0;
z-index: 1;
opacity: 1;
transition: opacity 2s 1s linear;
}
&:after {
opacity: 0;
background: linear-gradient(rgba(238,238,238,0), #eee);
}
}
.impact .collapsible.collapsed {
&:before {
opacity: 0;
}
&:after {
opacity: 1;
}
}

View File

@ -15,7 +15,7 @@
Icinga.EventListener.call(this, icinga);
this.on('layout-change', this.onLayoutChange, this);
this.on('rendered', '.container', this.onRendered, this);
this.on('rendered', '#layout', this.onRendered, this);
this.on('click', '.collapsible + .collapsible-control', this.onControlClicked, this);
this.icinga = icinga;
@ -40,7 +40,7 @@
Collapsible.prototype.onRendered = function(event) {
var _this = event.data.self;
$('.collapsible:not(.can-collapse)', event.currentTarget).each(function() {
$('.collapsible:not(.can-collapse)', event.target).each(function() {
var $collapsible = $(this);
// Assumes that any newly rendered elements are expanded
@ -143,6 +143,10 @@
* @returns {string}
*/
Collapsible.prototype.getRowSelector = function($collapsible) {
if (!! $collapsible.data('visibleHeight')) {
return '';
}
if ($collapsible.is('table')) {
return '> tbody > tr';
} else if ($collapsible.is('ul, ol')) {
@ -162,18 +166,14 @@
Collapsible.prototype.canCollapse = function($collapsible) {
var rowSelector = this.getRowSelector($collapsible);
if (!! rowSelector) {
return $(rowSelector, $collapsible).length > ($collapsible.data('visibleRows') || this.defaultVisibleRows);
var visibleRows = $collapsible.data('visibleRows') || this.defaultVisibleRows;
return $(rowSelector, $collapsible).length > visibleRows * 2;
} else {
var actualHeight = $collapsible[0].scrollHeight;
var maxHeight = $collapsible.data('visibleHeight') || this.defaultVisibleHeight;
if (actualHeight <= maxHeight) {
return false;
}
// Although the height seems larger than what it should be, make sure it's not just a small fraction
// i.e. more than 12 pixel and at least 10% difference
return actualHeight - maxHeight > 12 && actualHeight / maxHeight >= 1.1;
return actualHeight >= maxHeight * 2;
}
};

View File

@ -234,9 +234,9 @@
}, this);
}
if (!! items && items.length) {
if (!! items && Object.keys(items).length) {
storage.set(key, items);
} else if(items !== null) {
} else if (items !== null) {
storage.remove(key);
}