[IMPROVEMENT] Truncate long silence matchers #550

line · Oct 15, 2024 · b3f6cab · b3f6cab
2 parents 599eb7b + af85fb6
commit b3f6cab
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"