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.
line · Oct 11, 2024 · af85fb6 · af85fb6
1 parent 599eb7b
commit af85fb6
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 3 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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"