From 0ced17bb6168bbfeaa4220484401347b0903f92f Mon Sep 17 00:00:00 2001
From: Blair <dingdingbai0424@gmail.com>
Date: Tue, 20 Aug 2024 11:52:38 +0900
Subject: [PATCH] implement filter feature

---
 promgen/static/js/promgen.vue.js              | 87 ++++++++++++-------
 .../promgen/vue/silence_table_modal.html      | 18 ++--
 2 files changed, 66 insertions(+), 39 deletions(-)

diff --git a/promgen/static/js/promgen.vue.js b/promgen/static/js/promgen.vue.js
index a7c2b7c85..2cebbe0eb 100644
--- a/promgen/static/js/promgen.vue.js
+++ b/promgen/static/js/promgen.vue.js
@@ -44,15 +44,14 @@ const silenceTableStore = Vue.reactive({
         show: false,
         labels: []
     },
-    addFilterLabel(label) {
-        if (!this.state.labels.includes(label)) {
-            this.state.labels.push(label);
-        } else {
-            console.log(`Label "${label}" already exists.`);
+    addFilterLabel(label, value) {
+        const existingLabel = this.state.labels.find(item => item.label === label && item.value === value);
+        if (!existingLabel) {
+            this.state.labels.push({ label, value });
         }
     },
-    removeFilterLabel(label) {
-        const index = this.state.labels.indexOf(label);
+    removeFilterLabel(label, value) {
+        const index = this.state.labels.findIndex(item => item.label === label && item.value === value);
         if (index > -1) {
             this.state.labels.splice(index, 1);
         }
@@ -357,26 +356,37 @@ app.component('silence-table-modal', {
     template: '#silence-table-modal-template',
     delimiters: ['[[', ']]'],
     mixins: [mixins],
-    data: () => ({
-        state: silenceTableStore.state,
-        form: {},
-        store: dataStore
-    }),
+    data() {
+        return {
+            state: silenceTableStore.state,
+            form: {
+                labels: [],
+                label: '',
+                value: ''
+            },
+            store: dataStore
+        };
+    },
     computed: {
         globalMessages() {
             return globalStore.state.messages;
         },
         activeSilences() {
-            return this.$root.activeSilences;
+            return this.$root.activeSilences || [];
         },
         filteredSilences() {
+            if (!this.form.labels || this.form.labels.length === 0) {
+                return this.activeSilences;
+            }
+            
             return this.activeSilences.filter(silence => {
-                return this.state.labels.every(label => 
-                  silence.labels[label] !== undefined
-                );
-              });
-  
-           // TODO: Implement filtering 
+                return this.form.labels.some(filterLabel => {
+                    return silence.matchers.some(matcher => 
+                        matcher.name === filterLabel.label &&
+                        matcher.value === filterLabel.value
+                    );
+                });
+            }); 
         }
     },
     methods: {
@@ -384,32 +394,39 @@ app.component('silence-table-modal', {
             const modal = $('#silenceTableModal');
             if (modal.length) {
                 globalStore.setMessages([]);
-                this.form = {};
-                this.state = silenceTableStore.state;
+                this.form.labels = [];
                 modal.modal('hide');
             }
         },
         showModal() {
             const modal = $('#silenceTableModal');
             if (modal.length) {
-                modal.on('hidden.bs.modal', function (e) {
+                modal.on('hidden.bs.modal', () => {
                     silenceTableStore.hideModal();
                 });
                 modal.modal('show');
             }
         },
-        addFilterLabel() {
-            if (this.form.label) {
-                silenceTableStore.addFilterLabel(this.form.label);
+        addFilterLabel(label, value) {
+            if (label && value) {
+                if (!this.form.labels.some(item => item.label === label && item.value === value)) {
+                    this.form.labels.push({ label, value });
+                }
+                silenceTableStore.addFilterLabel(label, value);
+            } else if (this.form.label && this.form.value) {
+                if (!this.form.labels.some(item => item.label === this.form.label && item.value === this.form.value)) {
+                    this.form.labels.push({ label: this.form.label, value: this.form.value });
+                }
+                silenceTableStore.addFilterLabel(this.form.label, this.form.value);
                 this.form.label = '';
-                this.$forceUpdate();
-              }
+                this.form.value = '';
+            }
+        },
+    
+        removeFilterLabel(label, value) {
+            this.form.labels = this.form.labels.filter(item => !(item.label === label && item.value === value));
+            silenceTableStore.removeFilterLabel(label, value);
         },
-
-        removeFilterLabel(label) {
-            silenceTableStore.removeFilterLabel(label);
-            this.$forceUpdate();
-          },
     },
     watch: {
         "state.show"(val) {
@@ -419,5 +436,11 @@ app.component('silence-table-modal', {
                 this.hideModal();
             }
         },
+        "state.labels": {
+            handler(newLabels) {
+                this.form.labels = newLabels.map(label => ({ ...label }));
+            },
+            deep: true
+        }
     },
 });
diff --git a/promgen/templates/promgen/vue/silence_table_modal.html b/promgen/templates/promgen/vue/silence_table_modal.html
index 5c7b9511d..9fd05c698 100644
--- a/promgen/templates/promgen/vue/silence_table_modal.html
+++ b/promgen/templates/promgen/vue/silence_table_modal.html
@@ -12,7 +12,9 @@ <h4 class="modal-title" id="silenceModalLabel">Silence</h4>
         <div class="row mb-4">
           <div class="col-md-12">
             <div style="display: flex;align-items: center;">
-              <input type="text" placeholder="Input filter matchers" v-model="form.label" class="form-control">
+              <input type="text" placeholder="inpout filter matcher label" v-model="form.label" class="form-control">
+              <input type="text" placeholder="=~" style="max-width: 50px; text-align: center;" class="form-control ml-2 mr-2"  disabled>
+              <input type="text" placeholder="input filter matcher value" v-model="form.value" class="form-control">
               <button type="button" class="btn btn-primary ml-2" @click="addFilterLabel">&plus;</button>
             </div>
           </div>
@@ -23,10 +25,10 @@ <h4 class="modal-title" id="silenceModalLabel">Silence</h4>
             <div class="col-md-12">
               <div class="labels">
                 <ul class="list-inline promgen-labels-list">
-                  <li v-for="label in state.labels">
+                  <li v-for="item in state.labels" :key="`${item.label}-${item.value}`">
                     <div class="promgen-label-target">
-                      <span>[[label]]</span>
-                      <span @click="removeFilterLabel(label)" aria-hidden="true" class="promgen-label-close">&times;</span>
+                      <span>[[item.label]]=~[[item.value]]</span>
+                      <span @click="removeFilterLabel(item.label, item.value)" aria-hidden="true" class="promgen-label-close">&times;</span>
                     </div>
                   </li>
                 </ul>
@@ -45,11 +47,13 @@ <h4 class="modal-title" id="silenceModalLabel">Silence</h4>
                 <th>Action</th>
             </tr>
           </thead>
+
           <tbody>
-            <tr v-for="silence in filteredSilences">
-              {% include 'promgen/silence_row.html' %}
-            </tr>
+            <template v-for="silence in filteredSilences" :key="silence.id">
+              <silence-row :silence="silence" label-color="warning" @matcher-click="addFilterLabel" />
+            </template>
           </tbody>
+         
       </table>
       </div>
     </div>