From f7bea5cd1933cf42cc1b376530e122b271731218 Mon Sep 17 00:00:00 2001
From: Vicente Olivert Riera <vincent.olivert.riera@linecorp.com>
Date: Fri, 26 Jul 2024 19:56:10 +0900
Subject: [PATCH] Convert silence_row into a Vue component

This will help with future development around the Silence area.

The component allows choosing the color of the matchers, and also emits an event
when a matcher is clicked. That way we can reuse the component for multiple
purposes, displaying the matchers in a different color and doing an different
action when a matcher is clicked.

A few bits had to be added in order to maintain the current style, such as the
template and tbody tags.
---
 promgen/static/js/promgen.vue.js              | 17 +++++++++++
 promgen/templates/base.html                   |  3 ++
 .../templates/promgen/global_silences.html    | 28 +++++++++++--------
 promgen/templates/promgen/project_detail.html |  8 ++++--
 promgen/templates/promgen/service_block.html  |  8 ++++--
 promgen/templates/promgen/silence_row.html    | 18 ------------
 .../templates/promgen/vue/silence_row.html    | 28 +++++++++++++++++++
 7 files changed, 75 insertions(+), 35 deletions(-)
 delete mode 100644 promgen/templates/promgen/silence_row.html
 create mode 100644 promgen/templates/promgen/vue/silence_row.html

diff --git a/promgen/static/js/promgen.vue.js b/promgen/static/js/promgen.vue.js
index be3d63ab8..baac5975e 100644
--- a/promgen/static/js/promgen.vue.js
+++ b/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: ['[[', ']]'],
diff --git a/promgen/templates/base.html b/promgen/templates/base.html
index 4acfea225..a97a880b5 100644
--- a/promgen/templates/base.html
+++ b/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>
diff --git a/promgen/templates/promgen/global_silences.html b/promgen/templates/promgen/global_silences.html
index 627f3f77d..9b7c9784a 100644
--- a/promgen/templates/promgen/global_silences.html
+++ b/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>
diff --git a/promgen/templates/promgen/project_detail.html b/promgen/templates/promgen/project_detail.html
index 772343a8c..6842466bf 100644
--- a/promgen/templates/promgen/project_detail.html
+++ b/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>
 
diff --git a/promgen/templates/promgen/service_block.html b/promgen/templates/promgen/service_block.html
index 7d768bc6d..441752edd 100644
--- a/promgen/templates/promgen/service_block.html
+++ b/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>
 
diff --git a/promgen/templates/promgen/silence_row.html b/promgen/templates/promgen/silence_row.html
deleted file mode 100644
index 6a5038ea2..000000000
--- a/promgen/templates/promgen/silence_row.html
+++ /dev/null
@@ -1,18 +0,0 @@
-{% load i18n %}
-<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="match in silence.matchers">
-            <a @click="addSilenceLabel(match.name, match.value)" class="label label-warning">
-                [[match.name]]:[[match.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="expireSilence(silence.id)" class="btn btn-warning btn-xs">{% trans "Expire" %}</a>
-</td>
diff --git a/promgen/templates/promgen/vue/silence_row.html b/promgen/templates/promgen/vue/silence_row.html
new file mode 100644
index 000000000..6eb1189f0
--- /dev/null
+++ b/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>