From c52d4c1f2299b9f0ebc92dd7a8c32fe215831001 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Klemen=20Ko=C5=A1ir?= Date: Tue, 11 Jan 2022 22:12:12 +0900 Subject: [PATCH 1/2] Move silence form to a separate component --- promgen/static/js/promgen.vue.js | 152 ++++++++++-------- promgen/templates/base.html | 5 +- promgen/templates/promgen/ajax_silence.html | 61 ------- .../promgen/ajax_silence_button.html | 5 - promgen/templates/promgen/alert_row.html | 4 +- .../templates/promgen/global_messages.html | 2 +- .../templates/promgen/global_silences.html | 2 +- promgen/templates/promgen/host_detail.html | 3 +- .../promgen/project_detail_configuration.html | 2 +- .../promgen/project_detail_exporters.html | 3 +- .../promgen/project_detail_hosts.html | 6 +- .../promgen/project_detail_urls.html | 2 +- promgen/templates/promgen/project_row.html | 2 +- promgen/templates/promgen/search.html | 6 +- promgen/templates/promgen/service_block.html | 2 +- promgen/templates/promgen/silence_form.html | 24 +-- promgen/templates/promgen/silence_row.html | 4 +- 17 files changed, 117 insertions(+), 168 deletions(-) delete mode 100644 promgen/templates/promgen/ajax_silence.html delete mode 100644 promgen/templates/promgen/ajax_silence_button.html diff --git a/promgen/static/js/promgen.vue.js b/promgen/static/js/promgen.vue.js index cc5f7c48f..9bfdaa78c 100644 --- a/promgen/static/js/promgen.vue.js +++ b/promgen/static/js/promgen.vue.js @@ -5,13 +5,37 @@ Vue.config.devtools = true +const globalStore = { + state: { + messages: [] + }, + setMessages(messages) { + this.state.messages = [...messages]; + } +}; + const dataStore = { + global: globalStore.state, components: {}, selectedHosts: [], - newSilence: { 'labels': {} }, globalSilences: [], - globalAlerts: [], - globalMessages: [] + globalAlerts: [] +}; + +const silenceStore = { + state: { + show: false, + labels: {} + }, + showForm() { + this.state.show = true; + }, + setLabels(labels) { + Vue.set(this.state, 'labels', { ...labels }); + }, + addLabel(label, value) { + Vue.set(this.state.labels, label, value); + } }; const app = new Vue({ @@ -27,72 +51,33 @@ const app = new Vue({ let tgt = document.getElementById(target); tgt.classList.toggle('collapse'); }, - silenceExpire: function (id) { - fetch('/proxy/v1/silences/' + id, { method: 'DELETE' }).then(function (response) { - location.reload(); - }) - }, - silenceChangeEvent: function (event) { - this.newSilence[event.target.name] = event.target.value; - }, - silenceSubmit: function (event) { - let this_ = this; - fetch('/proxy/v1/silences', { method: 'POST', body: JSON.stringify(this.newSilence) }) - .then(function (response) { - if (response.ok) { - location.reload(); - } else { - return response.json() - } - }) - .then(function (result) { - this_.globalMessages = []; - for (key in result.messages) { - this_.$set(this_.globalMessages, key, result.messages[key]); - } - }) - }, - silenceRemoveLabel: function (label) { - console.debug('silenceRemoveLabel', label) - this.$delete(this.newSilence.labels, label) - }, - showSilenceForm: function (event) { - this.$set(this.components, 'silence-form', true); - scroll(0, 0); - }, - silenceAppendLabel: function (event) { - console.debug('silenceAppendLabel', event.target.dataset); - this.$set(this.newSilence.labels, event.target.dataset.label, event.target.dataset.value); - this.showSilenceForm(event); + expireSilence(id) { + fetch(`/proxy/v1/silences/${id}`, { method: 'DELETE' }) + .then(() => location.reload()); }, - silenceSelectedHosts: function (event) { - this.$set(this.newSilence, 'labels', {}); - this.$set(this.newSilence.labels, "instance", this.selectedHosts.join("|")); - for (key in event.target.dataset) { - this.$set(this.newSilence.labels, key, event.target.dataset[key]); + setSilenceLabels(labels) { + if (labels.target) { + silenceStore.setLabels(labels.target.dataset); + } else { + silenceStore.setLabels(labels); } - this.showSilenceForm(event); + + silenceStore.showForm(); + scroll(0, 0); }, - silenceSetLabels: function (event) { - console.debug('silenceSetLabels', event.target.dataset); - this.$set(this.newSilence, 'labels', {}); - for (key in event.target.dataset) { - this.$set(this.newSilence.labels, key, event.target.dataset[key]); - } - this.showSilenceForm(event); + addSilenceLabel(label, value) { + silenceStore.addLabel(label, value); + silenceStore.showForm(); + scroll(0, 0); }, - silenceAlert: function (alert) { - this.$set(this.newSilence, 'labels', {}); - for (key in alert.labels) { - this.$set(this.newSilence.labels, key, alert.labels[key]); - } - this.showSilenceForm(event); + silenceSelectedHosts(event) { + this.setSilenceLabels(event.target.dataset); + this.addSilenceLabel('instance', this.selectedHosts.join('|')); }, fetchSilences: function () { - let this_ = this; fetch('/proxy/v1/silences') .then(response => response.json()) - .then(function (response) { + .then(response => { let silences = response.data.sort(silence => silence.startsAt); // Pull out the matchers and do a simpler label map @@ -104,15 +89,14 @@ const app = new Vue({ } } - this_.globalSilences = silences; + this.globalSilences = silences; }); }, fetchAlerts: function () { - let this_ = this; fetch('/proxy/v1/alerts') .then(response => response.json()) - .then(function (response) { - this_.globalAlerts = response.data.sort(alert => alert.startsAt); + .then(response => { + this.globalAlerts = response.data.sort(alert => alert.startsAt); }); }, @@ -143,10 +127,10 @@ const app = new Vue({ return groupByLabel(this.activeSilences, 'project'); }, activeAlerts: function () { - return this.globalAlerts.filter(alert => alert.status.state == 'active'); + return this.globalAlerts.filter(alert => alert.status.state === 'active'); }, activeSilences: function () { - return this.globalSilences.filter(silence => silence.status.state != 'expired'); + return this.globalSilences.filter(silence => silence.status.state !== 'expired'); } }, mounted: function () { @@ -155,6 +139,40 @@ const app = new Vue({ }, }); +Vue.component('silence-form', { + template: '#silence-form-template', + delimiters: ['[[', ']]'], + data: () => ({ + state: silenceStore.state, + form: {} + }), + methods: { + removeLabel(label) { + this.$delete(this.state.labels, label); + }, + submit() { + const body = JSON.stringify({ + labels: this.state.labels, + ...this.form + }); + + fetch('/proxy/v1/silences', { method: 'POST', body }) + .then(response => { + if (response.ok) { + location.reload(); + } else { + return response.json(); + } + }) + .then(result => { + if (result) { + globalStore.setMessages(result.messages); + } + }); + }, + } +}); + Vue.filter("localize", function (number) { return number.toLocaleString(); }); diff --git a/promgen/templates/base.html b/promgen/templates/base.html index d918417dd..58f1b7c17 100644 --- a/promgen/templates/base.html +++ b/promgen/templates/base.html @@ -20,7 +20,7 @@ {% endblock %}
{% include 'promgen/global_messages.html' %} - {% include 'promgen/silence_form.html' %} + {% include 'promgen/global_alerts.html' %} {% include 'promgen/global_silences.html' %} {% block content %}{% endblock %} @@ -35,6 +35,9 @@ + {% block javascript %}{% endblock %} diff --git a/promgen/templates/promgen/ajax_silence.html b/promgen/templates/promgen/ajax_silence.html deleted file mode 100644 index f2e8aaaf2..000000000 --- a/promgen/templates/promgen/ajax_silence.html +++ /dev/null @@ -1,61 +0,0 @@ -{% load i18n %} -{% load tz %} -{% spaceless %} -{% if key == 'silence-all' %} -
-
Silences {{ silences|length }}
-{% else %} -
-
- -
-
-{% endif %} - - - - - - - - - -{% for silence in silences|dictsort:"endsAt" %} - - - - - - - - -{% endfor %} -
StartsEndsMatchersCommentCreatedByExpire
{{ silence.startsAt|timezone:TIMEZONE }}{{ silence.endsAt|timezone:TIMEZONE }} - {% for matcher in silence.matchers %} - {{ matcher.name }}:{{ matcher.value }} - {% endfor %} - {{ silence.comment }}{{ silence.createdBy }} -
-
- -
- - - {% csrf_token %} -
-
-{% if key == 'silence-all' %} -
-{% else %} -
-
-{% endif %} -{% endspaceless %} diff --git a/promgen/templates/promgen/ajax_silence_button.html b/promgen/templates/promgen/ajax_silence_button.html deleted file mode 100644 index 91d5961fb..000000000 --- a/promgen/templates/promgen/ajax_silence_button.html +++ /dev/null @@ -1,5 +0,0 @@ -{% spaceless %} - -{% endspaceless %} diff --git a/promgen/templates/promgen/alert_row.html b/promgen/templates/promgen/alert_row.html index 44460e745..d2ca3919a 100644 --- a/promgen/templates/promgen/alert_row.html +++ b/promgen/templates/promgen/alert_row.html @@ -9,7 +9,7 @@
@@ -20,5 +20,5 @@ - {% trans "Silence" %} + {% trans "Silence" %} diff --git a/promgen/templates/promgen/global_messages.html b/promgen/templates/promgen/global_messages.html index db3d16335..95813a5bf 100644 --- a/promgen/templates/promgen/global_messages.html +++ b/promgen/templates/promgen/global_messages.html @@ -7,7 +7,7 @@
{% endfor %} -
+
diff --git a/promgen/templates/promgen/global_silences.html b/promgen/templates/promgen/global_silences.html index bce92173e..627f3f77d 100644 --- a/promgen/templates/promgen/global_silences.html +++ b/promgen/templates/promgen/global_silences.html @@ -9,7 +9,7 @@ Ends Matchers Comment - CreatedBy + Created by   diff --git a/promgen/templates/promgen/host_detail.html b/promgen/templates/promgen/host_detail.html index 19da833d8..f7250d1f2 100644 --- a/promgen/templates/promgen/host_detail.html +++ b/promgen/templates/promgen/host_detail.html @@ -19,10 +19,9 @@

Host: {{ slug }}

{% trans "Silence" %}
diff --git a/promgen/templates/promgen/project_detail_configuration.html b/promgen/templates/promgen/project_detail_configuration.html index 6c431dd7d..f645acb83 100644 --- a/promgen/templates/promgen/project_detail_configuration.html +++ b/promgen/templates/promgen/project_detail_configuration.html @@ -32,7 +32,7 @@
{% trans "Update Project" %} - {% trans "Silence" %} + {% trans "Silence" %}
diff --git a/promgen/templates/promgen/silence_row.html b/promgen/templates/promgen/silence_row.html index d68b1cbe2..524abbcbe 100644 --- a/promgen/templates/promgen/silence_row.html +++ b/promgen/templates/promgen/silence_row.html @@ -4,7 +4,7 @@
  • - + [[match.name]]:[[match.value]]
    • @@ -14,5 +14,5 @@ [[silence.createdBy]] - {% trans "Expire" %} + {% trans "Expire" %} From 089f7db00711a6bfc0b62d69ef5cf7adc3eb7bdc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Klemen=20Ko=C5=A1ir?= Date: Wed, 12 Jan 2022 12:09:07 +0900 Subject: [PATCH 2/2] Address comments --- promgen/static/js/promgen.vue.js | 10 ++++------ promgen/templates/promgen/host_detail.html | 2 +- .../promgen/project_detail_configuration.html | 2 +- .../templates/promgen/project_detail_exporters.html | 2 +- promgen/templates/promgen/project_detail_hosts.html | 2 +- promgen/templates/promgen/project_detail_urls.html | 2 +- promgen/templates/promgen/project_row.html | 2 +- promgen/templates/promgen/search.html | 4 ++-- promgen/templates/promgen/service_block.html | 2 +- 9 files changed, 13 insertions(+), 15 deletions(-) diff --git a/promgen/static/js/promgen.vue.js b/promgen/static/js/promgen.vue.js index 9bfdaa78c..ae8f6d6ef 100644 --- a/promgen/static/js/promgen.vue.js +++ b/promgen/static/js/promgen.vue.js @@ -56,15 +56,13 @@ const app = new Vue({ .then(() => location.reload()); }, setSilenceLabels(labels) { - if (labels.target) { - silenceStore.setLabels(labels.target.dataset); - } else { - silenceStore.setLabels(labels); - } - + silenceStore.setLabels(labels); silenceStore.showForm(); scroll(0, 0); }, + setSilenceDataset(event) { + this.setSilenceLabels(event.target.dataset); + }, addSilenceLabel(label, value) { silenceStore.addLabel(label, value); silenceStore.showForm(); diff --git a/promgen/templates/promgen/host_detail.html b/promgen/templates/promgen/host_detail.html index f7250d1f2..72fb0b362 100644 --- a/promgen/templates/promgen/host_detail.html +++ b/promgen/templates/promgen/host_detail.html @@ -19,7 +19,7 @@

    Host: {{ slug }}

    {% trans "Update Project" %} - {% trans "Silence" %} + {% trans "Silence" %}