From f317ba2fdf10e7d744e788bacf16a8a532246a0a Mon Sep 17 00:00:00 2001 From: Blair Date: Tue, 16 Jul 2024 13:20:10 +0900 Subject: [PATCH] init --- promgen/static/css/promgen.css | 2 +- promgen/static/js/promgen.vue.js | 125 +++++++++++++++++- promgen/templates/base.html | 10 +- promgen/templates/promgen/navbar.html | 3 +- ...e_modal.html => silence_create_modal.html} | 2 +- .../promgen/vue/silence_list_modal.html | 61 +++++++++ 6 files changed, 192 insertions(+), 11 deletions(-) rename promgen/templates/promgen/vue/{silence_modal.html => silence_create_modal.html} (97%) create mode 100644 promgen/templates/promgen/vue/silence_list_modal.html diff --git a/promgen/static/css/promgen.css b/promgen/static/css/promgen.css index d106ccbc3..bee2b6754 100644 --- 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 index baac5975e..71857aa8d 100644 --- 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 index a97a880b5..c382f8ee5 100644 --- a/promgen/templates/base.html +++ b/promgen/templates/base.html @@ -23,7 +23,8 @@ {% endblock %}
{% include 'promgen/global_messages.html' %} - + + {% include 'promgen/global_alerts.html' %} {% include 'promgen/global_silences.html' %} {% block content %}{% endblock %} @@ -52,11 +53,14 @@ - + diff --git a/promgen/templates/promgen/navbar.html b/promgen/templates/promgen/navbar.html index bce3861b6..064281d9c 100644 --- a/promgen/templates/promgen/navbar.html +++ b/promgen/templates/promgen/navbar.html @@ -51,11 +51,10 @@ Alerts - + Silences -