From e51a19d4f7900eaa38a8ec4e4a018d52f00b23f8 Mon Sep 17 00:00:00 2001
From: Blair <dingdingbai0424@gmail.com>
Date: Thu, 29 Aug 2024 20:32:36 +0900
Subject: [PATCH] refactor filter selector

---
 promgen/static/js/promgen.vue.js              | 108 ++++++++++--------
 .../promgen/vue/silence_list_modal.html       |  15 ++-
 2 files changed, 71 insertions(+), 52 deletions(-)

diff --git a/promgen/static/js/promgen.vue.js b/promgen/static/js/promgen.vue.js
index 71857aa8..cc68324c 100644
--- a/promgen/static/js/promgen.vue.js
+++ b/promgen/static/js/promgen.vue.js
@@ -39,31 +39,6 @@ const silenceStore = Vue.reactive({
     },
 });
 
-const silenceListStore = Vue.reactive({
-    state: {
-        show: false,
-        labels: []
-    },
-    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, value) {
-        const index = this.state.labels.findIndex(item => item.label === label && item.value === value);
-        if (index > -1) {
-            this.state.labels.splice(index, 1);
-        }
-    },
-    showModal() {
-        this.state.show = true;
-    },
-    hideModal() {
-        this.state.show = false;
-    },
-});
-
 const exporterTestResultStore = Vue.reactive({
     results: {},
     addResult(url, statusCode) {
@@ -352,6 +327,31 @@ app.component('exporter-test', {
     }
 });
 
+const silenceListStore = Vue.reactive({
+    state: {
+        show: false,
+        labels: []
+    },
+    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, value) {
+        const index = this.state.labels.findIndex(item => item.label === label && item.value === value);
+        if (index > -1) {
+            this.state.labels.splice(index, 1);
+        }
+    },
+    showModal() {
+        this.state.show = true;
+    },
+    hideModal() {
+        this.state.show = false;
+    },
+});
+
 app.component('silence-list-modal', {
     template: '#silence-list-modal-template',
     delimiters: ['[[', ']]'],
@@ -360,7 +360,6 @@ app.component('silence-list-modal', {
         return {
             state: silenceListStore.state,
             form: {
-                labels: [],
                 label: '',
                 value: ''
             },
@@ -372,18 +371,39 @@ app.component('silence-list-modal', {
             return this.$root.activeSilences || [];
         },
         filteredSilences() {
-            if (!this.form.labels || this.form.labels.length === 0) {
+            if (!this.state.labels || this.state.labels.length === 0) {
                 return this.activeSilences;
             }
-            
+
             return this.activeSilences.filter(silence => {
-                return this.form.labels.some(filterLabel => {
+                return this.state.labels.some(filterLabel => {
                     return silence.matchers.some(matcher => 
                         matcher.name === filterLabel.label &&
                         matcher.value === filterLabel.value
                     );
                 });
-            }); 
+            });
+        },
+        uniqueLabels() {
+            const labels = new Set();
+            this.activeSilences.forEach(silence => {
+                silence.matchers.forEach(matcher => {
+                    labels.add(matcher.name);
+                });
+            });
+            return Array.from(labels);
+        },
+        filteredValues() {
+            if (!this.form.label) return [];
+            const values = new Set();
+            this.activeSilences.forEach(silence => {
+                silence.matchers.forEach(matcher => {
+                    if (matcher.name === this.form.label) {
+                        values.add(matcher.value);
+                    }
+                });
+            });
+            return Array.from(values);
         }
     },
     methods: {
@@ -391,7 +411,9 @@ app.component('silence-list-modal', {
             const modal = $('#silenceListModal');
             if (modal.length) {
                 globalStore.setMessages([]);
-                this.form.labels = [];
+                silenceListStore.state.labels = [];
+                this.form.label = ''; 
+                this.form.value = '';
                 modal.modal('hide');
             }
         },
@@ -406,23 +428,23 @@ app.component('silence-list-modal', {
         },
         addFilterLabel(label, value) {
             if (label && value) {
-                if (!this.form.labels.some(item => item.label === label && item.value === value)) {
-                    this.form.labels.push({ label, value });
+                if (!this.state.labels.some(item => item.label === label && item.value === value)) {
+                    silenceListStore.addFilterLabel(label, value);
                 }
-                silenceListStore.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 });
+                if (!this.state.labels.some(item => item.label === this.form.label && item.value === this.form.value)) {
+                    silenceListStore.addFilterLabel(this.form.label, this.form.value);
                 }
-                silenceListStore.addFilterLabel(this.form.label, this.form.value);
-                this.form.label = '';
-                this.form.value = '';
             }
+            this.form.label = '';
+            this.form.value = '';
         },
         removeFilterLabel(label, value) {
-            this.form.labels = this.form.labels.filter(item => !(item.label === label && item.value === value));
             silenceListStore.removeFilterLabel(label, value);
         },
+        updateValueOptions() {
+            this.form.value = '';
+        }
     },
     watch: {
         "state.show"(val) {
@@ -431,12 +453,6 @@ app.component('silence-list-modal', {
             } else {
                 this.hideModal();
             }
-        },
-        "state.labels": {
-            handler(newLabels) {
-                this.form.labels = newLabels.map(label => ({ ...label }));
-            },
-            deep: true
         }
     },
 });
diff --git a/promgen/templates/promgen/vue/silence_list_modal.html b/promgen/templates/promgen/vue/silence_list_modal.html
index dd00e62c..89e614b5 100644
--- a/promgen/templates/promgen/vue/silence_list_modal.html
+++ b/promgen/templates/promgen/vue/silence_list_modal.html
@@ -12,15 +12,19 @@ <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="inpout filter matcher label" v-model="form.label" class="form-control">
+              <select v-model="form.label" class="form-control" @change="updateValueOptions">
+                <option value="">Select a label</option>
+                <option v-for="label in uniqueLabels" :value="label">[[label]]</option>
+              </select>
               <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>
+              <select v-model="form.value" class="form-control" :disabled="!form.label">
+                <option value="">Select a value</option>
+                <option v-for="value in filteredValues" :value="value">[[value]]</option>
+              </select>
+              <button type="button" class="btn btn-primary ml-2" @click="addFilterLabel" :disabled="!form.label || !form.value">&plus;</button>
             </div>
           </div>
         </div>
-
-
         <div class="row mb-4">
             <div class="col-md-12">
               <div class="labels">
@@ -47,7 +51,6 @@ <h4 class="modal-title" id="silenceModalLabel">Silence</h4>
                 <th>Action</th>
             </tr>
           </thead>
-
           <tbody>
             <template v-for="silence in filteredSilences" :key="silence.id">
               <silence-row :silence="silence" label-color="info" @matcher-click="addFilterLabel" />