Convert silence_row into a Vue component

promgen/static/js/promgen.vue.js

@@ -150,6 +150,23 @@ const app = Vue.createApp({
 
 app.config.compilerOptions.whitespace = "preserve";
 
+app.component("silence-row", {
+    delimiters: ["[[", "]]"],
+    template: "#silence-row-template",
+    mixins: [mixins],
+    emits: ["matcherClick"],
+    props: {
+        silence: {
+            type: Object,
+            required: true,
+        },
+        labelColor: {
+            type: String,
+            default: "info",
+        },
+    },
+});
+
 app.component('silence-modal', {
     template: '#silence-modal-template',
     delimiters: ['[[', ']]'],

promgen/templates/base.html

@@ -55,6 +55,9 @@
   <script type="text/x-template" id="silence-modal-template">
     {% include 'promgen/vue/silence_modal.html' %}
   </script>
+  <script type="text/x-template" id="silence-row-template">
+    {% include 'promgen/vue/silence_row.html' %}
+  </script>
   <script src="{% static 'js/promgen.js' %}"></script>
   <script src="{% static 'js/mixins.vue.js' %}"></script>
   <script src="{% static 'js/promgen.vue.js' %}"></script>

promgen/templates/promgen/global_silences.html

@@ -4,16 +4,22 @@
         <a @click="toggleComponent('global-silences')" class="close" role="button">&times;</a>
     </div>
     <table class="table table-bordered table-condensed table-responsive">
-        <tr>
-            <th>Starts</th>
-            <th>Ends</th>
-            <th>Matchers</th>
-            <th>Comment</th>
-            <th>Created by</th>
-            <th>&nbsp;</th>
-        </tr>
-        <tr v-for="silence in activeSilences">
-            {% include 'promgen/silence_row.html' %}
-        </tr>
+        <tbody>
+            <tr>
+                <th>Starts</th>
+                <th>Ends</th>
+                <th>Matchers</th>
+                <th>Comment</th>
+                <th>Created by</th>
+                <th>&nbsp;</th>
+            </tr>
+            <template v-for="silence in activeSilences" :key="silence.id">
+                <silence-row
+                    :silence="silence"
+                    label-color="warning"
+                    @matcher-click="addSilenceLabel"
+                />
+            </template>
+        </tbody>
     </table>
 </div>

promgen/templates/promgen/project_detail.html

@@ -45,9 +45,11 @@ <h1>
     <a @click="toggleCollapse('silences-project-{{project.name|slugify}}')" class="btn btn-warning btn-sm" role="button">Silences</a>
   </div>
   <table id="silences-project-{{project.name|slugify}}" class="table table-bordered table-condensed">
-    <tr v-for="silence in activeProjectSilences.get('{{project.name}}')">
-      {% include 'promgen/silence_row.html' %}
-    </tr>
+    <tbody>
+      <template v-for="silence in activeProjectSilences.get('{{project.name}}')" :key="silence.id">
+        <silence-row :silence="silence" label-color="warning" @matcher-click="addSilenceLabel" />
+      </template>
+    </tbody>
   </table>
 </div>
 

promgen/templates/promgen/service_block.html

@@ -17,9 +17,11 @@
       <a @click="toggleComponent('silences-service-{{service.name|slugify}}')" class="btn btn-warning btn-sm" role="button">Silences</a>
     </div>
     <table v-if="components['silences-service-{{service.name|slugify}}']" class="table table-bordered table-condensed">
-      <tr v-for="silence in activeServiceSilences.get('{{service.name}}')">
-        {% include 'promgen/silence_row.html' %}
-      </tr>
+      <tbody>
+        <template v-for="silence in activeServiceSilences.get('{{service.name}}')" :key="silence.id">
+          <silence-row :silence="silence" label-color="warning" @matcher-click="addSilenceLabel" />
+        </template>
+      </tbody>
     </table>
   </div>
 

promgen/templates/promgen/vue/silence_row.html

@@ -0,0 +1,28 @@
+{% load i18n %}
+<tr>
+  <td class="col-xs-1">[[ time(silence.startsAt) ]]</td>
+  <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">
+        <a
+          @click="$emit('matcherClick', matcher.name, matcher.value)"
+          class="label"
+          :class="`label-${labelColor}`"
+        >
+          [[ matcher.name ]]:[[ matcher.value ]]
+        </a>
+      </li>
+    </ul>
+  </td>
+  <td class="col-xs-3" v-html="urlize(silence.comment)"></td>
+  <td class="col-xs-3">[[ silence.createdBy ]]</td>
+  <td style="col-xs-1">
+    <a
+      @click="$root.expireSilence(silence.id)"
+      class="btn btn-warning btn-xs"
+    >
+      {% translate "Expire" %}
+    </a>
+  </td>
+</tr>