From af85fb6c9ed77ca86227f3290bc9d19018e902be Mon Sep 17 00:00:00 2001
From: Vicente Olivert Riera <vincent.olivert.riera@linecorp.com>
Date: Fri, 11 Oct 2024 16:39:30 +0900
Subject: [PATCH] Truncate long silence matchers

The value of some silence matchers can be so long that cause the silence list
modal to look awful. To avoid that we truncate very long matchers, but we still
display the whole value when it is hovered with the mouse.
---
 promgen/static/css/promgen.css                      | 13 +++++++++++++
 .../templates/promgen/vue/silence_create_modal.html |  7 ++++++-
 .../templates/promgen/vue/silence_list_modal.html   |  7 ++++++-
 promgen/templates/promgen/vue/silence_row.html      |  7 ++++++-
 4 files changed, 31 insertions(+), 3 deletions(-)

diff --git a/promgen/static/css/promgen.css b/promgen/static/css/promgen.css
index 116e1e60b..72baf4310 100644
--- a/promgen/static/css/promgen.css
+++ b/promgen/static/css/promgen.css
@@ -69,6 +69,11 @@ a[rel]:after {
   margin-bottom: 10px;
 }
 
+.promgen-label-target > span {
+  display: inline-block;
+  vertical-align: middle;
+}
+
 .promgen-label-target:hover {
   text-decoration: none !important;
   color: #000000;
@@ -77,10 +82,18 @@ a[rel]:after {
 .promgen-label-close {
   font-size: 20px;
   margin-left: 10px;
+  margin-top: -2px;
   color: #aaaaaa;
   cursor: pointer;
 }
 
+.promgen-silence-matcher-truncate {
+  max-width: 250px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 /* service-detail */
 .promgen-flex-space-between-center {
   display: flex;
diff --git a/promgen/templates/promgen/vue/silence_create_modal.html b/promgen/templates/promgen/vue/silence_create_modal.html
index 02ddec75e..a9acd6fdc 100644
--- a/promgen/templates/promgen/vue/silence_create_modal.html
+++ b/promgen/templates/promgen/vue/silence_create_modal.html
@@ -55,7 +55,12 @@ <h5>
                 <ul class="list-inline promgen-labels-list">
                   <li v-for="(value, label) in state.labels">
                     <div class="promgen-label-target">
-                      <span>[[label]]=~[[value]]</span>
+                      <span
+                        :title="`${label}:${value}`"
+                        class="promgen-silence-matcher-truncate"
+                      >
+                        [[label]]=~[[value]]
+                      </span>
                       <span @click="removeLabel(label)" aria-hidden="true" class="promgen-label-close">&times;</span>
                     </div>
                   </li>
diff --git a/promgen/templates/promgen/vue/silence_list_modal.html b/promgen/templates/promgen/vue/silence_list_modal.html
index 89e614b58..24c56622c 100644
--- a/promgen/templates/promgen/vue/silence_list_modal.html
+++ b/promgen/templates/promgen/vue/silence_list_modal.html
@@ -31,7 +31,12 @@ <h4 class="modal-title" id="silenceModalLabel">Silence</h4>
                 <ul class="list-inline promgen-labels-list">
                   <li v-for="item in state.labels" :key="`${item.label}-${item.value}`">
                     <div class="promgen-label-target">
-                      <span>[[item.label]]=~[[item.value]]</span>
+                      <span
+                        :title="`${item.label}:${item.value}`"
+                        class="promgen-silence-matcher-truncate"
+                      >
+                        [[item.label]]=~[[item.value]]
+                      </span>
                       <span @click="removeFilterLabel(item.label, item.value)" aria-hidden="true" class="promgen-label-close">&times;</span>
                     </div>
                   </li>
diff --git a/promgen/templates/promgen/vue/silence_row.html b/promgen/templates/promgen/vue/silence_row.html
index 6eb1189f0..9c1f8dc57 100644
--- a/promgen/templates/promgen/vue/silence_row.html
+++ b/promgen/templates/promgen/vue/silence_row.html
@@ -4,7 +4,12 @@
   <td class="col-xs-1">[[ time(silence.endsAt) ]]</td>
   <td class="col-xs-3 text-wrap">
     <ul class="list-inline">
-      <li v-for="matcher in silence.matchers">
+      <li
+        v-for="matcher in silence.matchers"
+        :title="`${matcher.name}:${matcher.value}`"
+        class="promgen-silence-matcher-truncate"
+        style="color: white"
+      >
         <a
           @click="$emit('matcherClick', matcher.name, matcher.value)"
           class="label"