init

line · Sep 9, 2024 · 59f703c · 59f703c
1 parent cc69d63
commit 59f703c
Show file tree

Hide file tree

Showing 6 changed files with 192 additions and 11 deletions.
diff --git a/promgen/static/css/promgen.css b/promgen/static/css/promgen.css
@@ -50,7 +50,7 @@ a[rel]:after {
   font-family: monospace;
 }
 
-/* silence-modal */
+/* silence-create-modal */
 .promgen-labels-list {
   padding: 10px 5px;
   min-height: 116px;

diff --git a/promgen/static/js/promgen.vue.js b/promgen/static/js/promgen.vue.js
@@ -39,6 +39,31 @@ 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) {
@@ -83,6 +108,9 @@ const app = Vue.createApp({
             this.setSilenceLabels(event.target.dataset);
             this.addSilenceLabel('instance', this.selectedHosts.join('|'));
         },
+        openSilenceListModal() {
+            silenceListStore.showModal();
+        },
         fetchSilences: function () {
             fetch('/proxy/v1/silences')
                 .then(response => response.json())
@@ -167,8 +195,8 @@ app.component("silence-row", {
     },
 });
 
-app.component('silence-modal', {
-    template: '#silence-modal-template',
+app.component('silence-create-modal', {
+    template: '#silence-create-modal-template',
     delimiters: ['[[', ']]'],
     data: () => ({
         state: silenceStore.state,
@@ -215,7 +243,7 @@ app.component('silence-modal', {
                 });
         },
         hideModal() {
-            const modal = $('#silenceModal');
+            const modal = $('#silenceCreateModal');
             if (modal.length) {
                 globalStore.setMessages([]);
                 this.form = {};
@@ -224,7 +252,7 @@ app.component('silence-modal', {
             }
         },
         showModal() {
-            const modal = $('#silenceModal');
+            const modal = $('#silenceCreateModal');
             if (modal.length) {
                 // Detect when the modal is closed, and update the state accordingly. This is
                 // necessary in case the user closes the modal by clicking outside of it, instead of
@@ -323,3 +351,92 @@ app.component('exporter-test', {
         }
     }
 });
+
+app.component('silence-list-modal', {
+    template: '#silence-list-modal-template',
+    delimiters: ['[[', ']]'],
+    mixins: [mixins],
+    data() {
+        return {
+            state: silenceListStore.state,
+            form: {
+                labels: [],
+                label: '',
+                value: ''
+            },
+            store: dataStore
+        };
+    },
+    computed: {
+        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.form.labels.some(filterLabel => {
+                    return silence.matchers.some(matcher => 
+                        matcher.name === filterLabel.label &&
+                        matcher.value === filterLabel.value
+                    );
+                });
+            }); 
+        }
+    },
+    methods: {
+        hideModal() {
+            const modal = $('#silenceListModal');
+            if (modal.length) {
+                globalStore.setMessages([]);
+                this.form.labels = [];
+                modal.modal('hide');
+            }
+        },
+        showModal() {
+            const modal = $('#silenceListModal');
+            if (modal.length) {
+                modal.on('hidden.bs.modal', () => {
+                    silenceListStore.hideModal();
+                });
+                modal.modal('show');
+            }
+        },
+        addFilterLabel(label, value) {
+            if (label && value) {
+                if (!this.form.labels.some(item => item.label === label && item.value === value)) {
+                    this.form.labels.push({ 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 });
+                }
+                silenceListStore.addFilterLabel(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);
+        },
+    },
+    watch: {
+        "state.show"(val) {
+            if (val) {
+                this.showModal();
+            } else {
+                this.hideModal();
+            }
+        },
+        "state.labels": {
+            handler(newLabels) {
+                this.form.labels = newLabels.map(label => ({ ...label }));
+            },
+            deep: true
+        }
+    },
+});
diff --git a/promgen/templates/base.html b/promgen/templates/base.html
@@ -23,7 +23,8 @@
     {% endblock %}
     <div class="container">
       {% include 'promgen/global_messages.html' %}
-      <silence-modal></silence-modal>
+      <silence-create-modal></silence-create-modal>
+      <silence-list-modal></silence-list-modal>
       {% include 'promgen/global_alerts.html' %}
       {% include 'promgen/global_silences.html' %}
       {% block content %}{% endblock %}
@@ -52,11 +53,14 @@
   <script type="text/x-template" id="promql-query-template">
     {% include 'promgen/vue/promql_query.html' %}
   </script>
-  <script type="text/x-template" id="silence-modal-template">
-    {% include 'promgen/vue/silence_modal.html' %}
+  <script type="text/x-template" id="silence-create-modal-template">
+    {% include 'promgen/vue/silence_create_modal.html' %}
   </script>
   <script type="text/x-template" id="silence-row-template">
     {% include 'promgen/vue/silence_row.html' %}
+  </script>  
+  <script type="text/x-template" id="silence-list-modal-template">
+    {% include 'promgen/vue/silence_list_modal.html' %}
   </script>
   <script src="{% static 'js/promgen.js' %}"></script>
   <script src="{% static 'js/mixins.vue.js' %}"></script>

diff --git a/promgen/templates/promgen/navbar.html b/promgen/templates/promgen/navbar.html
@@ -51,11 +51,10 @@
                 Alerts
                 <span v-text="activeAlerts.length" class="badge"></span>
             </a>
-            <a @click="toggleComponent('global-silences')" class="btn btn-warning navbar-btn" role="button">
+            <a @click="openSilenceListModal" class="btn btn-warning navbar-btn" role="button">    
                 Silences
                 <span v-text="activeSilences.length" class="badge"></span>
             </a>
-
             <ul class="nav navbar-nav navbar-right" v-pre>
                 <li class="dropdown">
                     <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">

diff --git a/.../templates/promgen/vue/silence_modal.html → ...tes/promgen/vue/silence_create_modal.html b/.../templates/promgen/vue/silence_modal.html → ...tes/promgen/vue/silence_create_modal.html
@@ -1,4 +1,4 @@
-<div id="silenceModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="silenceModalLabel">
+<div id="silenceCreateModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="silenceModalLabel">
   <div class="modal-dialog modal-lg" role="document">
     <div class="modal-content">
       <div class="modal-header">

diff --git a/promgen/templates/promgen/vue/silence_list_modal.html b/promgen/templates/promgen/vue/silence_list_modal.html
@@ -0,0 +1,61 @@
+{% load i18n %}
+{% load promgen %}
+<div id="silenceListModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="silenceModalLabel">
+  <div class="modal-dialog modal-lg" role="document">
+    <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">Silence</h4>
+      </div>
+      <div class="modal-body" style="padding:10px 30px;">
+
+        <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">
+              <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>
+        </div>
+
+
+        <div class="row mb-4">
+            <div class="col-md-12">
+              <div class="labels">
+                <ul class="list-inline promgen-labels-list">
+                  <li v-for="item in state.labels" :key="`${item.label}-${item.value}`">
+                    <div class="promgen-label-target">
+                      <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>
+              </div>
+            </div>
+          </div>
+
+        <table class="table table-bordered table-condensed table-responsive">
+          <thead>
+            <tr>
+                <th>Starts</th>
+                <th>Ends</th>
+                <th>Matchers</th>
+                <th>Comment</th>
+                <th>Created by</th>
+                <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" />
+            </template>
+          </tbody>
+
+      </table>
+      </div>
+    </div>
+  </div>
+</div>