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.

In Vue 3, the devtools are not enabled through 'Vue.config'. They are
always enabled in the development build of Vue 3, and disabled in the
production one.
From now on, when running Promgen in debug mode we will use the
development build of Vue 3. When running Promgen in production mode we
will use the production build of Vue 3, as recommended [1].

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.

1: https://vuejs.org/guide/best-practices/production-deployment.html

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))
         }
     }