Migrate to Vue 3

In order to have better control of the version we are using, we have placed the Vue import into a dedicated folder that includes the version on its name. We started importing the production build of Vue, which is recommended. When doing development we easily change that manually. The 'Vue.config' line to enable the development tools is now irrelevant so we have removed it. Moreover, 'Vue.config' is undefined in Vue 3. In Vue 3, variables that are meant to be reactive (Vue tracks them and updates the DOM whenever their value changes) need to be created making use of the 'ref' or 'reactive' functions. In Vue 3, apps are created with 'Vue.createApp' instead of 'new Vue'. In Vue 3, 'Vue.set' does not exist, so all the code making use of that has been rewritten appropriately. In Vue 3, whitespace characters between elements that contain newlines are removed by default. Because of that, we need to use the 'whitespace' compiler option to change that behaviour, otherwise our UI elements such as buttons will be rendered next to each other without any space in between. In Vue 3, components are not created using 'Vue.component'. Instead, the application instance provides a 'component' method for registering app-scoped components. We have moved the instruction for mounting the Vue app at the end of the 'base.html' file to ensure all the necessary DOM elements are ready. The 'exporter-test-result' component was being mounted on demand using a 'target' property, and also made visible by changing CSS properties from JavaScript. That has been replaced by directly placing the component element in the right location and controlling its visibility with a 'show' property.
line · Oct 30, 2023 · b1b3aaf · b1b3aaf
1 parent 8ad2ed7
commit b1b3aaf
Show file tree

Hide file tree

Showing 7 changed files with 60 additions and 42 deletions.
diff --git a/promgen/static/js/promgen.vue.js b/promgen/static/js/promgen.vue.js
@@ -3,26 +3,24 @@
  * These sources are released under the terms of the MIT license: see LICENSE
  */
 
-Vue.config.devtools = true
-
-const globalStore = {
+const globalStore = Vue.reactive({
     state: {
         messages: []
     },
     setMessages(messages) {
         this.state.messages = [...messages];
     }
-};
+});
 
-const dataStore = {
+const dataStore = Vue.reactive({
     global: globalStore.state,
     components: {},
     selectedHosts: [],
     globalSilences: [],
     globalAlerts: []
-};
+});
 
-const silenceStore = {
+const silenceStore = Vue.reactive({
     state: {
         show: false,
         labels: {}
@@ -31,22 +29,33 @@ const silenceStore = {
         this.state.show = true;
     },
     setLabels(labels) {
-        Vue.set(this.state, 'labels', { ...labels });
+        this.state.labels = { ...labels };
     },
     addLabel(label, value) {
-        Vue.set(this.state.labels, label, value);
+        this.state.labels[label] = value;
     }
-};
+});
 
-const app = new Vue({
-    el: '#vue',
+const exporterTestResultStore = Vue.reactive({
+    results: {},
+    addResult(url, statusCode) {
+        this.results[url] = statusCode;
+    },
+    setResults(results) {
+        this.results = { ...results };
+    },
+});
+
+const app = Vue.createApp({
     delimiters: ['[[', ']]'],
-    data: dataStore,
+    data() {
+        return dataStore;
+    },
     mixins: [mixins],
     methods: {
         toggleComponent: function (component) {
             let state = Boolean(this.components[component]);
-            this.$set(this.components, component, !state);
+            this.components[component] = !state;
         },
         toggleCollapse: function (target) {
             let tgt = document.getElementById(target);
@@ -138,7 +147,9 @@ const app = new Vue({
     },
 });
 
-Vue.component('silence-form', {
+app.config.compilerOptions.whitespace = "preserve";
+
+app.component('silence-form', {
     template: '#silence-form-template',
     delimiters: ['[[', ']]'],
     data: () => ({
@@ -172,7 +183,7 @@ Vue.component('silence-form', {
     }
 });
 
-Vue.component("promql-query", {
+app.component("promql-query", {
     delimiters: ['[[', ']]'],
     props: ["href", "query", "max"],
     data: function () {
@@ -211,40 +222,41 @@ Vue.component("promql-query", {
     },
 });
 
-Vue.component('bootstrap-panel', {
+app.component('bootstrap-panel', {
     delimiters: ['[[', ']]'],
     props: ['heading'],
     template: '#bootstrap-panel-template',
 });
 
-const ExporterResult = Vue.component('exporter-result', {
+app.component('exporter-result', {
     delimiters: ['[[', ']]'],
     props: ['results'],
     template: '#exporter-result-template',
+    data: () => ({
+        store: exporterTestResultStore,
+    }),
+    computed: {
+        show() {
+            return Object.keys(this.store.results).length > 0;
+        },
+    },
 });
 
-const ExporterTest = Vue.component('exporter-test', {
+app.component('exporter-test', {
     // Exporter Test button for Forms
     // Acts like a regular form submit button, but hijacks the button
     // click and submits it to an alternate URL for testing
     delimiters: ['[[', ']]'],
-    props: ['href', 'target'],
+    props: ['href'],
     template: '#exporter-test-template',
     methods: {
         onTestSubmit: function (event) {
             // Find the parent form our button belongs to so that we can
             // simulate a form submission
             let form = new FormData(event.srcElement.closest('form'))
-            let tgt = document.querySelector(this.target);
             fetch(this.href, { body: form, method: "post", })
                 .then(result => result.json())
-                .then(result => {
-                    // If we have a valid result, then create a new
-                    // ExporterResult component that we can render
-                    var component = new ExporterResult().$mount(tgt);
-                    component.$el.id = tgt.id;
-                    component.$props.results = result;
-                })
+                .then(result => exporterTestResultStore.setResults(result))
                 .catch(error => alert(error))
         }
     }

diff --git a/promgen/static/js/vue-3.3.7/vue.global.prod.js b/promgen/static/js/vue-3.3.7/vue.global.prod.js
diff --git a/promgen/static/js/vue.min.js b/promgen/static/js/vue.min.js
diff --git a/promgen/templates/base.html b/promgen/templates/base.html
@@ -35,7 +35,7 @@
   <script src="{% static 'js/luxon.min.js' %}"></script>
   <script src="{% static 'js/linkify.min.js' %}"></script>
   <script src="{% static 'js/linkify-string.min.js' %}"></script>
-  <script src="{% static 'js/vue.min.js' %}"></script>
+  <script src="{% static 'js/vue-3.3.7/vue.global.prod.js' %}"></script>
   <script type="text/x-template" id="bootstrap-panel-template">
     {% include 'promgen/vue/bootstrap_panel.html' %}
   </script>
@@ -72,6 +72,8 @@
     <option>minor</option>
     <option>debug</option>
   </datalist>
+
+  <script>app.mount("#vue")</script>
 </body>
 
 </html>
diff --git a/promgen/templates/promgen/exporter_form.html b/promgen/templates/promgen/exporter_form.html
@@ -37,7 +37,7 @@ <h1>Project: {{ project.name }}</h1>
         <div class="panel-footer">
           <div class="input-group-btn">
             <button class="btn btn-primary">Register Exporter</button>
-            <exporter-test class="btn btn-info" href="{% url 'exporter-scrape' project.id %}" target="#exporterresult">
+            <exporter-test class="btn btn-info" href="{% url 'exporter-scrape' project.id %}">
               {% trans "Test" %}
             </exporter-test>
           </div>
@@ -60,7 +60,7 @@ <h1>Project: {{ project.name }}</h1>
           <input type="hidden" name="enabled" value="1" />
           <div class="input-group-btn">
             <button style="width:80%" class="btn btn-primary">Register {{ default.job }} :{{ default.port }}{{ default.path }}</button>
-            <exporter-test class="btn btn-info" href="{% url 'exporter-scrape' project.id %}" target="#exporterresult">
+            <exporter-test class="btn btn-info" href="{% url 'exporter-scrape' project.id %}">
               {% trans "Test" %}
             </exporter-test>
           </div>
@@ -71,6 +71,8 @@ <h1>Project: {{ project.name }}</h1>
   </div>
 </div>
 
-<div id="exporterresult" style="display:none;"></div>
+<div>
+  <exporter-result />
+</div>
 
 {% endblock %}
diff --git a/promgen/templates/promgen/project_detail_exporters.html b/promgen/templates/promgen/project_detail_exporters.html
@@ -31,7 +31,7 @@
           <input type="hidden" name="scheme" value="{{ exporter.scheme }}" />
           <input type="hidden" name="port" value="{{ exporter.port }}" />
           <input type="hidden" name="path" value="{{ exporter.path }}" />
-          <exporter-test class="btn btn-info btn-xs" href="{% url 'exporter-scrape' project.id %}" target="#exporterresult">
+          <exporter-test class="btn btn-info btn-xs" href="{% url 'exporter-scrape' project.id %}">
             {% trans "Test" %}
           </exporter-test>
         </form>
@@ -60,4 +60,6 @@
   </div>
 </div>
 
-<div id="exporterresult" style="display:none;"></div>
+<div>
+  <exporter-result />
+</div>
diff --git a/promgen/templates/promgen/vue/exporter_result.html b/promgen/templates/promgen/vue/exporter_result.html
@@ -1,6 +1,6 @@
-<bootstrap-panel class="panel-info" heading="Results">
+<bootstrap-panel v-if="show" class="panel-info" heading="Results">
   <table class="table">
-    <tr v-for="(val, key, index) in results">
+    <tr v-for="(val, key, index) in store.results">
       <td>[[ key ]]</td>
       <td>[[ val ]]</td>
     </tr>