[BUGFIX] Fix promql-query Vue component rendering #516

line · Jun 4, 2024 · d07aa31 · d07aa31
2 parents 96f7900 + d283108
commit d07aa31
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 11 deletions.
diff --git a/promgen/static/js/promgen.vue.js b/promgen/static/js/promgen.vue.js
@@ -189,6 +189,7 @@ app.component("promql-query", {
     data: function () {
         return {
             count: 0,
+            ready: false,
         };
     },
     mixins: [mixins],
@@ -206,19 +207,12 @@ app.component("promql-query", {
     },
     template: '#promql-query-template',
     mounted() {
-        var this_ = this;
         var url = new URL(this.href);
         url.search = new URLSearchParams({ query: this.query });
         fetch(url)
             .then(response => response.json())
-            .then(result => Number.parseInt(result.data.result[0].value[1]))
-            .then(result => {
-                this_.count = result;
-                this_.$el.style.display = "inline";
-            })
-            .catch(error => {
-                this_.$el.style.display = "inline";
-            });
+            .then(result => this.count = Number.parseInt(result.data.result[0].value[1]))
+            .finally(() => this.ready = true);
     },
 });
 

diff --git a/promgen/templates/promgen/vue/promql_query.html b/promgen/templates/promgen/vue/promql_query.html
@@ -1,3 +1,3 @@
-<span style="display: none" :title="percent(load)" :class="classes">
-  [[ localize(count) ]] <slot></slot>
+<span v-show="ready" :title="percent(load)" :class="classes">
+  <slot></slot> [[ localize(count) ]]
 </span>