From b61a952cfd4e37b692f28af103ead8224cc5dce5 Mon Sep 17 00:00:00 2001
From: Johannes Meyer <johannes.meyer@icinga.com>
Date: Thu, 18 Jul 2019 10:35:30 +0200
Subject: [PATCH 1/9] output.phtml: Collapse plugin output if it exceeds 100px

refs #3566
---
 .../application/views/scripts/show/components/output.phtml  | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/modules/monitoring/application/views/scripts/show/components/output.phtml b/modules/monitoring/application/views/scripts/show/components/output.phtml
index c450319a1..34d82689b 100644
--- a/modules/monitoring/application/views/scripts/show/components/output.phtml
+++ b/modules/monitoring/application/views/scripts/show/components/output.phtml
@@ -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>

From f42a49d4a9b151860e5dc976ad3f376d99dc447d Mon Sep 17 00:00:00 2001
From: Johannes Meyer <johannes.meyer@icinga.com>
Date: Thu, 18 Jul 2019 10:45:29 +0200
Subject: [PATCH 2/9] perfdata.phtml: Collapse perfdata values if they exceed 5
 lines

refs #3566
---
 modules/monitoring/application/views/helpers/Perfdata.php       | 2 +-
 .../application/views/scripts/show/components/perfdata.phtml    | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/modules/monitoring/application/views/helpers/Perfdata.php b/modules/monitoring/application/views/helpers/Perfdata.php
index 6b9113830..e7bc72b38 100644
--- a/modules/monitoring/application/views/helpers/Perfdata.php
+++ b/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)
             );
         }
diff --git a/modules/monitoring/application/views/scripts/show/components/perfdata.phtml b/modules/monitoring/application/views/scripts/show/components/perfdata.phtml
index f3cff23cc..78ea6d274 100644
--- a/modules/monitoring/application/views/scripts/show/components/perfdata.phtml
+++ b/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 ?>

From 226b58ac9d852f363d61d959c1ddda56bc2cb5d4 Mon Sep 17 00:00:00 2001
From: Johannes Meyer <johannes.meyer@icinga.com>
Date: Thu, 18 Jul 2019 14:10:40 +0200
Subject: [PATCH 3/9] customvars.phtml: Collapse custom variables if they
 exceed 5 rows

Also collapses customvar values if they're JSON blobs and exceed
5 rows.

refs #3566
---
 modules/monitoring/application/views/helpers/Customvar.php    | 4 ++++
 .../views/scripts/partials/object/detail-content.phtml        | 2 +-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/modules/monitoring/application/views/helpers/Customvar.php b/modules/monitoring/application/views/helpers/Customvar.php
index 168c18b38..8bfdc3a52 100644
--- a/modules/monitoring/application/views/helpers/Customvar.php
+++ b/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>}";
     }
 }
diff --git a/modules/monitoring/application/views/scripts/partials/object/detail-content.phtml b/modules/monitoring/application/views/scripts/partials/object/detail-content.phtml
index dbd8abc21..3ab6dab17 100644
--- a/modules/monitoring/application/views/scripts/partials/object/detail-content.phtml
+++ b/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>

From 21795189048c7f339b5d4659b2f158c01c48bc3f Mon Sep 17 00:00:00 2001
From: Johannes Meyer <johannes.meyer@icinga.com>
Date: Thu, 25 Jul 2019 10:14:48 +0200
Subject: [PATCH 4/9] storage.js: Properly check if we have any keys left
 before clearing the storage

---
 public/js/icinga/storage.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/public/js/icinga/storage.js b/public/js/icinga/storage.js
index d9df2c668..f85d14b33 100644
--- a/public/js/icinga/storage.js
+++ b/public/js/icinga/storage.js
@@ -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);
         }
 

From 74cb0ef3c918569b37a54778b88b6f74291e218a Mon Sep 17 00:00:00 2001
From: Johannes Meyer <johannes.meyer@icinga.com>
Date: Thu, 25 Jul 2019 10:40:29 +0200
Subject: [PATCH 5/9] collapsible.js: Don't enforce `data-visible-rows` for
 tables and lists

---
 public/js/icinga/behavior/collapsible.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/public/js/icinga/behavior/collapsible.js b/public/js/icinga/behavior/collapsible.js
index 080e8beff..1676aa5eb 100644
--- a/public/js/icinga/behavior/collapsible.js
+++ b/public/js/icinga/behavior/collapsible.js
@@ -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')) {

From 1fd673a034448756d55ef0b7fc380849635006d7 Mon Sep 17 00:00:00 2001
From: Johannes Meyer <johannes.meyer@icinga.com>
Date: Thu, 25 Jul 2019 11:52:14 +0200
Subject: [PATCH 6/9] collapsible.js: Let fade effect look good in containers
 with .impact

---
 public/css/icinga/main.less | 20 +++++++++++++++++++-
 1 file changed, 19 insertions(+), 1 deletion(-)

diff --git a/public/css/icinga/main.less b/public/css/icinga/main.less
index 42a34cc2b..39bc13d0f 100644
--- a/public/css/icinga/main.less
+++ b/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;
   }
 }

From 74bf1bdc8951317c8b25deb03c76c2d01273ebba Mon Sep 17 00:00:00 2001
From: Johannes Meyer <johannes.meyer@icinga.com>
Date: Thu, 25 Jul 2019 13:20:54 +0200
Subject: [PATCH 7/9] notes.phtml: Collapse notes if they exceed 200px

---
 .../application/views/scripts/show/components/notes.phtml   | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/modules/monitoring/application/views/scripts/show/components/notes.phtml b/modules/monitoring/application/views/scripts/show/components/notes.phtml
index 87907cfb4..c868c955f 100644
--- a/modules/monitoring/application/views/scripts/show/components/notes.phtml
+++ b/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>
\ No newline at end of file

From 91a8bdf7862d2634d5ca9b71a4db4d564d259d21 Mon Sep 17 00:00:00 2001
From: Johannes Meyer <johannes.meyer@icinga.com>
Date: Fri, 26 Jul 2019 07:35:04 +0200
Subject: [PATCH 8/9] collapsible.js: Don't collapse until at least twice the
 visible space is required

---
 public/js/icinga/behavior/collapsible.js | 12 ++++--------
 1 file changed, 4 insertions(+), 8 deletions(-)

diff --git a/public/js/icinga/behavior/collapsible.js b/public/js/icinga/behavior/collapsible.js
index 1676aa5eb..37c156a1e 100644
--- a/public/js/icinga/behavior/collapsible.js
+++ b/public/js/icinga/behavior/collapsible.js
@@ -166,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;
         }
     };
 

From a4848803c8e0faa34ea4fde255117a1da7ff3d53 Mon Sep 17 00:00:00 2001
From: Johannes Meyer <johannes.meyer@icinga.com>
Date: Fri, 26 Jul 2019 16:23:18 +0200
Subject: [PATCH 9/9] collapsible.js: Listen on `#layout` for rendered events

---
 public/js/icinga/behavior/collapsible.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/public/js/icinga/behavior/collapsible.js b/public/js/icinga/behavior/collapsible.js
index 37c156a1e..205ec8d1a 100644
--- a/public/js/icinga/behavior/collapsible.js
+++ b/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