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

Collapsible plugin output

modules/monitoring/application/views/helpers/Customvar.php

@@ -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>}";
     }
 }

modules/monitoring/application/views/helpers/Perfdata.php

@@ -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)
             );
         }

modules/monitoring/application/views/scripts/partials/object/detail-content.phtml

@@ -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>

modules/monitoring/application/views/scripts/show/components/notes.phtml

@@ -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>

modules/monitoring/application/views/scripts/show/components/output.phtml

@@ -1,3 +1,5 @@
 <h2><?= $this->translate('Plugin Output') ?></h2>
+<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>

modules/monitoring/application/views/scripts/show/components/perfdata.phtml

@@ -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 ?>

public/css/icinga/main.less

@@ -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;
   }
 }

public/js/icinga/behavior/collapsible.js

@@ -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 actualHeight >= maxHeight * 2;
-                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;
         }
     };
 

public/js/icinga/storage.js

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