Add Edit Silence feature

We have added a new feature that allows users to easily edit an existing Silence instead of
expiring it and creating a new one. Now, users can select a Silence from the list to edit fields
such as matchers, startsAt, endsAt, duration and comment.

Author: hoangpn

promgen/serializers.py

@@ -130,6 +130,7 @@ class MatcherSerializer(serializers.Serializer):
 
 
 class SilenceSerializer(serializers.Serializer):
+    id = serializers.CharField(required=False)
     matchers = MatcherSerializer(many=True)
     startsAt = serializers.CharField(required=False)
     endsAt = serializers.CharField(required=False)

promgen/static/js/promgen.js

@@ -156,6 +156,16 @@ function activateTabFromHash() {
   }
 }
 
+function UTCToFormattedLocalDateTime(utcString) {
+  const date = new Date(utcString);
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, "0");
+  const day = String(date.getDate()).padStart(2, "0");
+  const hours = String(date.getHours()).padStart(2, "0");
+  const minutes = String(date.getMinutes()).padStart(2, "0");
+  return `${year}-${month}-${day}T${hours}:${minutes}`;
+}
+
 $(document).ready(function() {
   $('[data-toggle="popover"]').popover();
   $('[data-toggle="tooltip"]').tooltip();

promgen/static/js/promgen.vue.js

@@ -23,7 +23,8 @@ const dataStore = Vue.reactive({
 const silenceStore = Vue.reactive({
     state: {
         show: false,
-        labels: {}
+        labels: {},
+        silence: null,
     },
     setLabels(labels) {
         this.state.labels = { ...labels };
@@ -47,6 +48,10 @@ const silenceStore = Vue.reactive({
         }
         this.state.labels[label] = value;
     },
+    setSilence(silence) {
+        this.state.silence = silence;
+        this.setLabels(silence.labels);
+    },
     showModal() {
         this.state.show = true;
     },
@@ -159,6 +164,11 @@ const app = Vue.createApp({
                 silencesMatchService.includes(silence)
             );
         },
+        editSilence: function (silence) {
+            silenceListStore.hideModal();
+            silenceStore.setSilence(silence);
+            silenceStore.showModal();
+        }
     },
     computed: {
         activeServiceAlerts: function () {
@@ -255,6 +265,7 @@ app.component('silence-create-modal', {
             }
 
             const body = JSON.stringify({
+                id: this.state.silence?.id,
                 matchers: matchers,
                 startsAt: this.form.startsAt,
                 endsAt: this.form.endsAt,
@@ -287,11 +298,17 @@ app.component('silence-create-modal', {
             if (modal.length) {
                 globalStore.setMessages([]);
                 this.form = {operator: "="};
+                silenceStore.state.silence = null;
                 this.state = silenceStore.state;
                 modal.modal('hide');
             }
         },
         showModal() {
+            if (this.state.silence) {
+                this.form.startsAt = UTCToFormattedLocalDateTime(this.state.silence.startsAt);
+                this.form.endsAt = UTCToFormattedLocalDateTime(this.state.silence.endsAt);
+                this.form.comment = this.state.silence.comment;
+            }
             const modal = $('#silenceCreateModal');
             if (modal.length) {
                 // Detect when the modal is closed, and update the state accordingly. This is

promgen/templates/base.html

@@ -64,9 +64,9 @@
   <script type="text/x-template" id="silence-list-modal-template">
     {% include 'promgen/vue/silence_list_modal.html' %}
   </script>
-  <script src="{% static 'js/promgen.js' %}?v=5"></script>
+  <script src="{% static 'js/promgen.js' %}?v=6"></script>
   <script src="{% static 'js/mixins.vue.js' %}"></script>
-  <script src="{% static 'js/promgen.vue.js' %}?v=5"></script>
+  <script src="{% static 'js/promgen.vue.js' %}?v=6"></script>
   {% block javascript %}{% endblock %}
 
   <datalist style="display:none" id="common.labels">

promgen/templates/promgen/vue/silence_create_modal.html

@@ -3,7 +3,10 @@
     <div class="modal-content">
       <div class="modal-header">
         <button type="button" class="close" @click="state.show = false" aria-label="Close"><span aria-hidden="true">&times;</span></button>
-        <h4 class="modal-title" id="silenceModalLabel">New Silence</h4>
+        <h4 class="modal-title" id="silenceModalLabel">
+            <div v-if="!state.silence">New Silence</div>
+            <div v-else>Edit Silence: [[state.silence.id]]</div>
+        </h4>
       </div>
       <div class="modal-body" style="padding:10px 30px;">
 
@@ -100,7 +103,10 @@ <h5>
         </form>
       </div>
       <div class="modal-footer">
-        <button type="button" class="btn btn-primary" @click="submit()">Create</button>
+        <button type="button" class="btn btn-primary" @click="submit()">
+            <div v-if="!state.silence">Create</div>
+            <div v-else>Save</div>
+        </button>
       </div>
     </div>
   </div>

promgen/templates/promgen/vue/silence_row.html

@@ -21,12 +21,12 @@
     </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"
-    >
+  <td class="col-xs-2">[[ silence.createdBy ]]</td>
+  <td class="col-xs-2">
+    <a @click="$root.editSilence(silence)" class="btn btn-warning btn-xs">
+      {% translate "Edit" %}
+    </a>
+    <a @click="$root.expireSilence(silence.id)" class="btn btn-warning btn-xs">
       {% translate "Expire" %}
     </a>
   </td>