From ff2fb3f3794d11c25134fc9077a497fd8da9c307 Mon Sep 17 00:00:00 2001
From: Johannes Meyer <johannes.meyer@icinga.com>
Date: Thu, 7 Oct 2021 11:04:38 +0200
Subject: [PATCH] Merge pull request #4548 from
 Icinga/fix/compress-comment-detail

Compress comment detail in Hosts detail and Comments list.

(cherry picked from commit 736957f7c3a04c0444b69b56427375b7a2175460)
---
 library/Icinga/Web/View/helpers/string.php    | 11 +++++
 .../partials/comment/comment-detail.phtml     |  2 +-
 .../scripts/show/components/comments.phtml    |  6 ++-
 modules/monitoring/public/css/tables.less     | 13 ++++++
 public/css/icinga/main.less                   | 43 +++++++++++++++++++
 5 files changed, 72 insertions(+), 3 deletions(-)

diff --git a/library/Icinga/Web/View/helpers/string.php b/library/Icinga/Web/View/helpers/string.php
index 5e3b06849..b3f667b16 100644
--- a/library/Icinga/Web/View/helpers/string.php
+++ b/library/Icinga/Web/View/helpers/string.php
@@ -23,3 +23,14 @@ $this->addHelperFunction('markdown', function ($content, $containerAttribs = nul
 
     return '<section' . $this->propertiesToString($containerAttribs) . '>' . Markdown::text($content) . '</section>';
 });
+
+$this->addHelperFunction('markdownLine', function ($content, $containerAttribs = null) {
+    if (! isset($containerAttribs['class'])) {
+        $containerAttribs['class'] = 'markdown inline';
+    } else {
+        $containerAttribs['class'] .= ' markdown inline';
+    }
+
+    return '<section' . $this->propertiesToString($containerAttribs) . '>' .
+        Markdown::line($content) . '</section>';
+});
diff --git a/modules/monitoring/application/views/scripts/partials/comment/comment-detail.phtml b/modules/monitoring/application/views/scripts/partials/comment/comment-detail.phtml
index f5fab2036..4293dde38 100644
--- a/modules/monitoring/application/views/scripts/partials/comment/comment-detail.phtml
+++ b/modules/monitoring/application/views/scripts/partials/comment/comment-detail.phtml
@@ -79,4 +79,4 @@
     } ?>
     </span>
 </div>
-<?= $this->nl2br($this->markdown($comment->comment, isset($textId) ? ['id' => $textId] : null)) ?>
+<?= $this->nl2br($this->markdownLine($comment->comment, isset($textId) ? ['id' => $textId,  'class' => 'caption'] : [ 'class' => 'caption'])) ?>
diff --git a/modules/monitoring/application/views/scripts/show/components/comments.phtml b/modules/monitoring/application/views/scripts/show/components/comments.phtml
index a5fddef8f..7bc10e507 100644
--- a/modules/monitoring/application/views/scripts/show/components/comments.phtml
+++ b/modules/monitoring/application/views/scripts/show/components/comments.phtml
@@ -39,13 +39,14 @@ if (empty($object->comments) && ! $addLink) {
         echo '<br>' . $addLink;
     }
     ?></th>
-    <td data-base-target="_self">
+    <td data-base-target="_next">
     <?php if (empty($object->comments)):
         echo $addLink;
     else: ?>
         <dl class="comment-list">
         <?php foreach ($object->comments as $comment): ?>
             <dt>
+                <a href="<?=  $this->href('monitoring/comment/show', array('comment_id' => $comment->id)) ?>">
                 <?= $this->escape($comment->author) ?>
                 <span class="comment-time">
                     <?= $this->translate('commented') ?>
@@ -73,9 +74,10 @@ if (empty($object->comments) && ! $addLink) {
                     );
                     echo $deleteButton;
                 } ?>
+                </a>
             </dt>
             <dd>
-                <?= $this->nl2br($this->createTicketLinks($this->markdown($comment->comment))) ?>
+                <?= $this->nl2br($this->createTicketLinks($this->markdownLine($comment->comment, [ 'class' => 'caption']))) ?>
             </dd>
         <?php endforeach ?>
         </dl>
diff --git a/modules/monitoring/public/css/tables.less b/modules/monitoring/public/css/tables.less
index f470f4aa0..9dea557f9 100644
--- a/modules/monitoring/public/css/tables.less
+++ b/modules/monitoring/public/css/tables.less
@@ -28,6 +28,19 @@
   float: right;
 }
 
+.caption {
+  height: 3em;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+
+  img {
+    max-height: 1em;
+  }
+}
+
 // Type information for backends in the monitoring config
 .config-label-meta {
   font-size: @font-size-small;
diff --git a/public/css/icinga/main.less b/public/css/icinga/main.less
index 17a04bd94..74ecf419d 100644
--- a/public/css/icinga/main.less
+++ b/public/css/icinga/main.less
@@ -46,6 +46,49 @@
   > *:last-child {
     margin-bottom: 0;
   }
+
+  img {
+    max-width: 100%;
+    height: auto;
+  }
+
+  a {
+    border-bottom: 1px @text-color-light dotted;
+
+    &:hover, &:focus {
+      border-bottom: 1px @text-color solid;
+      text-decoration: none;
+    }
+
+    img {
+      max-width: 32em;
+    }
+
+    &.with-thumbnail {
+      img {
+        padding: 1px;
+      }
+
+      &:hover, &:focus {
+        img {
+          padding: 0;
+        }
+      }
+    }
+  }
+
+  table {
+    border-collapse: collapse;
+
+    th {
+      text-align: left;
+      background-color: @gray-lighter;
+    }
+
+    &, th, td {
+      border: 1px solid @gray-light;
+    }
+  }
 }
 
 .no-wrap {