From 4fe78d38f61552f4c0d61acb697451879ba62827 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Klemen=20Ko=C5=A1ir?= <klemen.kosir@kream.io>
Date: Sat, 13 Nov 2021 15:17:01 +0900
Subject: [PATCH] [IMPROVEMENT] Improve performance of rendering alerts and
 silences

---
 promgen/static/js/promgen.vue.js              | 29 ++++++++-----------
 promgen/templates/promgen/global_alerts.html  |  4 +--
 .../templates/promgen/global_silences.html    |  6 ++--
 promgen/templates/promgen/navbar.html         |  7 +++--
 promgen/templates/promgen/project_detail.html |  8 ++---
 promgen/templates/promgen/rule_detail.html    |  6 ++--
 promgen/templates/promgen/rule_update.html    |  6 ++--
 promgen/templates/promgen/service_block.html  | 12 ++++----
 promgen/templates/promgen/silence_form.html   |  6 ++--
 9 files changed, 39 insertions(+), 45 deletions(-)

diff --git a/promgen/static/js/promgen.vue.js b/promgen/static/js/promgen.vue.js
index 8630b343d..514aee47e 100644
--- a/promgen/static/js/promgen.vue.js
+++ b/promgen/static/js/promgen.vue.js
@@ -6,6 +6,7 @@
 Vue.config.devtools = true
 
 var dataStore = {
+    components: {},
     selectedHosts: [],
     newSilence: { 'labels': {} },
     globalSilences: [],
@@ -18,7 +19,11 @@ var app = new Vue({
     delimiters: ['[[', ']]'],
     data: dataStore,
     methods: {
-        toggleTarget: function (target) {
+        toggleComponent: function (component) {
+            let state = Boolean(this.components[component]);
+            this.$set(this.components, component, !state);
+        },
+        toggleCollapse: function (target) {
             let tgt = document.getElementById(target);
             tgt.classList.toggle('collapse');
         },
@@ -52,7 +57,7 @@ var app = new Vue({
             this.$delete(this.newSilence.labels, label)
         },
         showSilenceForm: function (event) {
-            document.getElementById('silence-form').classList.remove('collapse');
+            this.$set(this.components, 'silence-form', true);
             scroll(0, 0);
         },
         silenceAppendLabel: function (event) {
@@ -123,43 +128,33 @@ var app = new Vue({
     },
     computed: {
         alertLabelsService: function () {
-            return new Set(this.globalAlerts
-                .filter(x => x.status.state == 'active')
+            return new Set(this.filterActiveAlerts
                 .filter(x => x.labels.service)
                 .map(x => x.labels.service)
-                .sort()
             );
         },
         alertLabelsProject: function () {
-            return new Set(this.globalAlerts
-                .filter(x => x.status.state == 'active')
+            return new Set(this.filterActiveAlerts
                 .filter(x => x.labels.project)
                 .map(x => x.labels.project)
-                .sort()
             );
         },
         alertLabelsRule: function () {
-            return new Set(this.globalAlerts
-                .filter(x => x.status.state == 'active')
+            return new Set(this.filterActiveAlerts
                 .filter(x => x.labels.alertname)
                 .map(x => x.labels.alertname)
-                .sort()
             );
         },
         silenceLabelsService: function () {
-            return new Set(this.globalSilences
-                .filter(x => x.status.state == 'active')
+            return new Set(this.filterActiveSilences
                 .filter(x => x.labels.service)
                 .map(x => x.labels.service)
-                .sort()
             );
         },
         silenceLabelsProject: function () {
-            return new Set(this.globalSilences
-                .filter(x => x.status.state == 'active')
+            return new Set(this.filterActiveSilences
                 .filter(x => x.labels.project)
                 .map(x => x.labels.project)
-                .sort()
             );
         },
         filterActiveAlerts: function () {
diff --git a/promgen/templates/promgen/global_alerts.html b/promgen/templates/promgen/global_alerts.html
index 68bb6552f..70a9f7bca 100644
--- a/promgen/templates/promgen/global_alerts.html
+++ b/promgen/templates/promgen/global_alerts.html
@@ -1,7 +1,7 @@
-<div class="panel panel-danger collapse" id="globalAlerts">
+<div v-cloak v-if="components['global-alerts']" class="panel panel-danger">
     <div class="panel-heading">
         Alerts
-        <a @click.prevent="toggleTarget('globalAlerts')" class="close" role="button">&times;</a>
+        <a @click="toggleComponent('global-alerts')" class="close" role="button">&times;</a>
     </div>
 
     <table class="table table-bordered table-condensed">
diff --git a/promgen/templates/promgen/global_silences.html b/promgen/templates/promgen/global_silences.html
index f79029da5..cc4c2798b 100644
--- a/promgen/templates/promgen/global_silences.html
+++ b/promgen/templates/promgen/global_silences.html
@@ -1,9 +1,7 @@
-<div class="panel panel-warning collapse" id="globalSilences">
+<div v-cloak v-if="components['global-silences']" class="panel panel-warning">
     <div class="panel-heading">
         Silences
-        <a @click.prevent="toggleTarget('globalSilences')" class="close" role="button" href="#">
-            &times;
-        </a>
+        <a @click="toggleComponent('global-silences')" class="close" role="button">&times;</a>
     </div>
     <table class="table table-bordered table-condensed table-responsive">
         <tr>
diff --git a/promgen/templates/promgen/navbar.html b/promgen/templates/promgen/navbar.html
index 7082e02df..8c7b5bd65 100644
--- a/promgen/templates/promgen/navbar.html
+++ b/promgen/templates/promgen/navbar.html
@@ -25,7 +25,7 @@
                         <li><a href="{% url 'audit-list' %}">Edit History</a></li>
                         <li><a href="{% url 'alert-list' %}">Alert History</a></li>
                         <li role="separator" class="divider"></li>
-                        
+
                         <li><a href="{% url 'site-detail' %}">Shared</a></li>
                         <li><a href="{% url 'farm-list' %}">Farms</a></li>
                         <li><a href="{% url 'host-list' %}">Hosts</a></li>
@@ -55,10 +55,11 @@
                 </div>
                 <button type="submit" class="btn btn-default">Search</button>
             </form>
-            <a @click.prevent="toggleTarget('globalAlerts')" id="toggleAlerts" class="btn btn-danger navbar-btn" role="button">Alerts
+            <a @click="toggleComponent('global-alerts')" class="btn btn-danger navbar-btn" role="button">
+                Alerts
                 <span v-text="filterActiveAlerts.length" class="badge"></span>
             </a>
-            <a @click.prevent="toggleTarget('globalSilences')" id="toggleSilences" class="btn btn-warning navbar-btn" role="button">
+            <a @click="toggleComponent('global-silences')" class="btn btn-warning navbar-btn" role="button">
                 Silences
                 <span v-text="filterActiveSilences.length" class="badge"></span>
             </a>
diff --git a/promgen/templates/promgen/project_detail.html b/promgen/templates/promgen/project_detail.html
index 40f6f42b1..98382c605 100644
--- a/promgen/templates/promgen/project_detail.html
+++ b/promgen/templates/promgen/project_detail.html
@@ -29,9 +29,9 @@ <h1>
 
 {% include "promgen/project_detail_configuration.html" %}
 
-<div class="panel panel-danger" v-cloak v-show="alertLabelsProject.has('{{project.name}}')">
+<div class="panel panel-danger" v-cloak v-if="alertLabelsProject.has('{{project.name}}')">
   <div class="panel-heading">
-    <a @click.prevent="toggleTarget('alerts-project-{{project.name|slugify}}')" class="btn btn-danger btn-sm" role="button">Alerts</a>
+    <a @click="toggleCollapse('alerts-project-{{project.name|slugify}}')" class="btn btn-danger btn-sm" role="button">Alerts</a>
   </div>
   <table id="alerts-project-{{project.name|slugify}}" class="table table-bordered table-condensed">
     <tr v-for="(alert, index) in globalAlerts" v-if="alert.labels.project == '{{project.name}}'">
@@ -40,9 +40,9 @@ <h1>
   </table>
 </div>
 
-<div id="silence-project-{{ project.name|slugify }}" class="panel panel-warning" v-cloak v-show="silenceLabelsProject.has('{{project.name}}')">
+<div id="silence-project-{{ project.name|slugify }}" class="panel panel-warning" v-cloak v-if="silenceLabelsProject.has('{{project.name}}')">
   <div class="panel-heading">
-    <a @click.prevent="toggleTarget('silences-project-{{project.name|slugify}}')" class="btn btn-warning btn-sm" role="button">Silences</a>
+    <a @click="toggleCollapse('silences-project-{{project.name|slugify}}')" class="btn btn-warning btn-sm" role="button">Silences</a>
   </div>
   <table id="silences-project-{{project.name|slugify}}" class="table table-bordered table-condensed">
     <tr v-for="(silence, index) in filterActiveSilences" v-if="silence.labels.project == '{{project.name}}'">
diff --git a/promgen/templates/promgen/rule_detail.html b/promgen/templates/promgen/rule_detail.html
index 6066206a8..a3730b352 100644
--- a/promgen/templates/promgen/rule_detail.html
+++ b/promgen/templates/promgen/rule_detail.html
@@ -14,11 +14,11 @@ <h1>Rule: {{ rule.name }}</h1>
 
 {% breadcrumb rule  %}
 
-<div class="panel panel-danger" v-cloak v-show="alertLabelsRule.has('{{rule.name}}')" data-service="{{rule.name}}">
+<div class="panel panel-danger" v-cloak v-if="alertLabelsRule.has('{{rule.name}}')" data-service="{{rule.name}}">
     <div class="panel-heading">
-        <a @click.prevent="toggleTarget('alerts-service-{{rule.name|slugify}}')" class="btn btn-danger btn-sm" role="button">Alerts</a>
+        <a @click="toggleComponent('alerts-service-{{rule.name|slugify}}')" class="btn btn-danger btn-sm" role="button">Alerts</a>
     </div>
-    <table id="alerts-service-{{rule.name|slugify}}" class="table table-bordered table-condensed collapse">
+    <table v-if="components['alerts-service-{{rule.name|slugify}}']" class="table table-bordered table-condensed">
         <tr v-for="(alert, index) in globalAlerts" v-if="alert.labels.alertname == '{{rule.name}}'">
             {% include 'promgen/alert_row.html' %}
         </tr>
diff --git a/promgen/templates/promgen/rule_update.html b/promgen/templates/promgen/rule_update.html
index 33e7efe21..0b1f3d5c7 100644
--- a/promgen/templates/promgen/rule_update.html
+++ b/promgen/templates/promgen/rule_update.html
@@ -14,11 +14,11 @@ <h1>Rule: {{ rule.name }}</h1>
 
 {% breadcrumb rule 'Edit Rule' %}
 
-<div data-service="{{rule.name}}" class="panel panel-danger" v-cloak v-show="alertLabelsRule.has('{{rule.name}}')">
+<div data-service="{{rule.name}}" class="panel panel-danger" v-cloak v-if="alertLabelsRule.has('{{rule.name}}')">
   <div class="panel-heading">
-    <a @click.prevent="toggleTarget('alerts-service-{{rule.name|slugify}}')" class="btn btn-danger btn-sm" role="button">Alerts</a>
+    <a @click="toggleComponent('alerts-service-{{rule.name|slugify}}')" class="btn btn-danger btn-sm" role="button">Alerts</a>
   </div>
-  <table id="alerts-service-{{rule.name|slugify}}" class="table table-bordered table-condensed collapse">
+  <table v-if="components['alerts-service-{{rule.name|slugify}}']" class="table table-bordered table-condensed">
     <tr v-for="(alert, index) in globalAlerts" v-if="alert.labels.alertname == '{{rule.name}}'">
       {% include 'promgen/alert_row.html' %}
     </tr>
diff --git a/promgen/templates/promgen/service_block.html b/promgen/templates/promgen/service_block.html
index 7d9318ed6..51bfa5a41 100644
--- a/promgen/templates/promgen/service_block.html
+++ b/promgen/templates/promgen/service_block.html
@@ -1,22 +1,22 @@
 {% load i18n %}
 {% load promgen %}
 <div class="well">
-  <div data-service="{{service.name}}" class="panel panel-danger" v-cloak v-show="alertLabelsService.has('{{service.name}}')">
+  <div data-service="{{service.name}}" class="panel panel-danger" v-cloak v-if="alertLabelsService.has('{{service.name}}')">
     <div class="panel-heading">
-      <a @click.prevent="toggleTarget('alerts-service-{{service.name|slugify}}')" class="btn btn-danger btn-sm" role="button">Alerts</a>
+      <a @click="toggleComponent('alerts-service-{{service.name|slugify}}')" class="btn btn-danger btn-sm" role="button">Alerts</a>
     </div>
-    <table id="alerts-service-{{service.name|slugify}}" class="table table-bordered table-condensed collapse">
+    <table v-if="components['alerts-service-{{service.name|slugify}}']" class="table table-bordered table-condensed">
       <tr v-for="(alert, index) in globalAlerts" v-if="alert.labels.service == '{{service.name}}'">
         {% include 'promgen/alert_row.html' %}
       </tr>
     </table>
   </div>
 
-  <div id="silence-service-{{ service.name|slugify }}" class="panel panel-warning" v-cloak v-show="silenceLabelsService.has('{{service.name}}')">
+  <div id="silence-service-{{ service.name|slugify }}" class="panel panel-warning" v-cloak v-if="silenceLabelsService.has('{{service.name}}')">
     <div class="panel-heading">
-      <a @click.prevent="toggleTarget('silences-service-{{service.name|slugify}}')" class="btn btn-warning btn-sm" role="button">Silences</a>
+      <a @click="toggleComponent('silences-service-{{service.name|slugify}}')" class="btn btn-warning btn-sm" role="button">Silences</a>
     </div>
-    <table id="silences-service-{{service.name|slugify}}" class="table table-bordered table-condensed collapse">
+    <table v-if="components['silences-service-{{service.name|slugify}}']" class="table table-bordered table-condensed">
       <tr v-for="(silence, index) in filterActiveSilences" v-if="silence.labels.service == '{{service.name}}'">
         {% include 'promgen/silence_row.html' %}
       </tr>
diff --git a/promgen/templates/promgen/silence_form.html b/promgen/templates/promgen/silence_form.html
index 70686ea62..f3e755e1b 100644
--- a/promgen/templates/promgen/silence_form.html
+++ b/promgen/templates/promgen/silence_form.html
@@ -1,12 +1,12 @@
 {% load i18n %}
-<form @submit.prevent="silenceSubmit" method="post" action="{% url 'proxy-silence' %}">
+<form v-cloak v-if="components['silence-form']" @submit.prevent="silenceSubmit" method="post" action="{% url 'proxy-silence' %}">
   <input name="next" type="hidden" value="{{ request.get_full_path }}" />
   {% csrf_token %}
 
-  <div class="panel panel-warning collapse" id="silence-form">
+  <div class="panel panel-warning">
     <div class="panel-heading">
       Silence
-      <a @click.prevent="toggleTarget('silence-form')" type="button" class="close">&times;</a>
+      <a @click="toggleComponent('silence-form')" type="button" class="close">&times;</a>
     </div>
 
     <div class="labels panel-body">