init

promgen/static/js/promgen.vue.js

@@ -39,6 +39,32 @@ const silenceStore = Vue.reactive({
     },
 });
 
+const silenceTableStore = Vue.reactive({
+    state: {
+        show: false,
+        labels: []
+    },
+    addFilterLabel(label) {
+        if (!this.state.labels.includes(label)) {
+            this.state.labels.push(label);
+        } else {
+            console.log(`Label "${label}" already exists.`);
+        }
+    },
+    removeFilterLabel(label) {
+        const index = this.state.labels.indexOf(label);
+        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 +109,9 @@ const app = Vue.createApp({
             this.setSilenceLabels(event.target.dataset);
             this.addSilenceLabel('instance', this.selectedHosts.join('|'));
         },
+        openSilenceTableModal() {
+            silenceTableStore.showModal();
+        },
         fetchSilences: function () {
             fetch('/proxy/v1/silences')
                 .then(response => response.json())
@@ -323,3 +352,72 @@ app.component('exporter-test', {
         }
     }
 });
+
+app.component('silence-table-modal', {
+    template: '#silence-table-modal-template',
+    delimiters: ['[[', ']]'],
+    mixins: [mixins],
+    data: () => ({
+        state: silenceTableStore.state,
+        form: {},
+        store: dataStore
+    }),
+    computed: {
+        globalMessages() {
+            return globalStore.state.messages;
+        },
+        activeSilences() {
+            return this.$root.activeSilences;
+        },
+        filteredSilences() {
+            return this.activeSilences.filter(silence => {
+                return this.state.labels.every(label => 
+                  silence.labels[label] !== undefined
+                );
+              });
+
+           // TODO: Implement filtering 
+        }
+    },
+    methods: {
+        hideModal() {
+            const modal = $('#silenceTableModal');
+            if (modal.length) {
+                globalStore.setMessages([]);
+                this.form = {};
+                this.state = silenceTableStore.state;
+                modal.modal('hide');
+            }
+        },
+        showModal() {
+            const modal = $('#silenceTableModal');
+            if (modal.length) {
+                modal.on('hidden.bs.modal', function (e) {
+                    silenceTableStore.hideModal();
+                });
+                modal.modal('show');
+            }
+        },
+        addFilterLabel() {
+            if (this.form.label) {
+                silenceTableStore.addFilterLabel(this.form.label);
+                this.form.label = '';
+                this.$forceUpdate();
+              }
+        },
+
+        removeFilterLabel(label) {
+            silenceTableStore.removeFilterLabel(label);
+            this.$forceUpdate();
+          },
+    },
+    watch: {
+        "state.show"(val) {
+            if (val) {
+                this.showModal();
+            } else {
+                this.hideModal();
+            }
+        },
+    },
+});

promgen/templates/base.html

@@ -24,6 +24,7 @@
     <div class="container">
       {% include 'promgen/global_messages.html' %}
       <silence-modal></silence-modal>
+      <silence-table-modal></silence-table-modal>
       {% include 'promgen/global_alerts.html' %}
       {% include 'promgen/global_silences.html' %}
       {% block content %}{% endblock %}
@@ -57,6 +58,9 @@
   </script>
   <script type="text/x-template" id="silence-row-template">
     {% include 'promgen/vue/silence_row.html' %}
+  </script>  
+  <script type="text/x-template" id="silence-table-modal-template">
+    {% include 'promgen/vue/silence_table_modal.html' %}
   </script>
   <script src="{% static 'js/promgen.js' %}"></script>
   <script src="{% static 'js/mixins.vue.js' %}"></script>

promgen/templates/promgen/navbar.html

@@ -51,10 +51,14 @@
                 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="toggleComponent('global-silences')" class="btn btn-warning navbar-btn" role="button"> -->
+
+            <a @click="openSilenceTableModal" 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">

promgen/templates/promgen/silence_row.html

@@ -0,0 +1,19 @@
+{% 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="$root.expireSilence(silence.id)" class="btn btn-warning btn-xs">{% translate "Expire" %}</a>
+</td>

promgen/templates/promgen/vue/silence_table_modal.html

@@ -0,0 +1,57 @@
+{% load i18n %}
+{% load promgen %}
+<div id="silenceTableModal" 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="Input filter matchers" v-model="form.label" 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="label in state.labels">
+                    <div class="promgen-label-target">
+                      <span>[[label]]</span>
+                      <span @click="removeFilterLabel(label)" 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>
+            <tr v-for="silence in filteredSilences">
+              {% include 'promgen/silence_row.html' %}
+            </tr>
+          </tbody>
+      </table>
+      </div>
+    </div>
+  </div>
+</div>