Merge pull request #38 from Jont828/settings-version

Fetch version using mixin on page load to avoid lag

Author: Jont828

web/src/components/SettingsCard.vue

@@ -31,7 +31,7 @@
           <v-list-item-title>Version</v-list-item-title>
         </v-list-item-content>
         <v-list-item-action>
-          {{ gitVersion }}
+          {{ version }}
         </v-list-item-action>
       </v-list-item>
       <v-list-item
@@ -143,23 +143,14 @@ import { useSettingsStore } from "../stores/settings.js";
 export default {
   name: "SettingsCard",
   components: {},
-  async beforeMount() {
-    await this.fetchVersion();
+  props: {
+    version: String,
   },
   methods: {
     toggleDarkTheme(val) {
       this.$vuetify.theme.dark = val;
     },
-    async fetchVersion() {
-      const response = await Vue.axios.get("/version");
-      if (response.data == null) {
-        console.error("failed getting git version info");
-        return;
-      }
-
-      console.log("Git version is", response.data);
-      this.gitVersion = response.data.gitVersion;
-    }
+    // TODO: Do this once on page load so this doesn't take a minute and lag.
   },
   setup() {
     const store = useSettingsStore();
@@ -170,7 +161,6 @@ export default {
     return {
       fileTypes: ["YAML", "JSON"],
       pollingInterval: ["1s", "5s", "10s", "30s", "1m", "5m", "Off"],
-      gitVersion: "",
     };
   },
 };

web/src/mixins/setVersion.js

@@ -0,0 +1,24 @@
+import Vue from "vue";
+
+export const setVersion = {
+  data() {
+    return {
+      gitVersion: ""
+    }
+  },
+  async beforeMount() {
+    await this.fetchVersion();
+  },
+  methods: {
+    async fetchVersion() {
+      const response = await Vue.axios.get("/version");
+      if (response.data == null) {
+        console.error("Failed getting git version info");
+        return;
+      }
+
+      console.log("Git version:", response.data);
+      this.gitVersion = response.data.gitVersion;
+    }
+  }
+}

web/src/views/DescribeCluster.vue

@@ -69,6 +69,7 @@
       <SettingsCard
         @close="() => { showSettingsOverlay = !showSettingsOverlay }"
         class="settingsCard"
+        :version="gitVersion"
       />
     </v-overlay>
   </div>
@@ -84,6 +85,7 @@ import AlertError from "../components/AlertError.vue";
 import SettingsCard from "../components/SettingsCard.vue";
 
 import { useSettingsStore } from "../stores/settings.js";
+import { setVersion } from "../mixins/setVersion.js";
 
 import _ from "lodash";
 import colors from "vuetify/lib/util/colors";
@@ -97,12 +99,39 @@ export default {
     CustomResourceDefinition,
     AlertError,
   },
+  mixins: [setVersion],
+  data() {
+    return {
+      showSettingsOverlay: false,
+      showAboutOverlay: false,
+      alert: false,
+      errorMessage: "",
+      treeIsReady: false,
+      resourceIsReady: false,
+      resource: {},
+      selected: {},
+      treeData: {},
+      cachedTreeString: "",
+      treeConfig: { nodeWidth: 180, nodeHeight: 50, levelHeight: 120 },
+      scale: 1,
+      legend: {
+        cluster: "Cluster API",
+        bootstrap: "Bootstrap Provider",
+        controlplane: "Control Plane Provider",
+        infrastructure: "Infrastructure Provider",
+        addons: "Add-ons",
+        virtual: "None",
+      },
+      gitVersion: ""
+    };
+  },
   setup() {
     const store = useSettingsStore();
     return { store };
   },
   async beforeMount() {
     await this.fetchCluster();
+    await this.fetchVersion();
   },
   computed: {
     theme() {
@@ -306,30 +335,6 @@ export default {
       );
     },
   },
-  data() {
-    return {
-      showSettingsOverlay: false,
-      showAboutOverlay: false,
-      alert: false,
-      errorMessage: "",
-      treeIsReady: false,
-      resourceIsReady: false,
-      resource: {},
-      selected: {},
-      treeData: {},
-      cachedTreeString: "",
-      treeConfig: { nodeWidth: 180, nodeHeight: 50, levelHeight: 120 },
-      scale: 1,
-      legend: {
-        cluster: "Cluster API",
-        bootstrap: "Bootstrap Provider",
-        controlplane: "Control Plane Provider",
-        infrastructure: "Infrastructure Provider",
-        addons: "Add-Ons",
-        virtual: "None",
-      },
-    };
-  },
 };
 </script>
 

web/src/views/ManagementCluster.vue

@@ -37,7 +37,9 @@ import Vue from "vue";
 import ManagementClusterTree from "../components/ManagementClusterTree.vue";
 import SettingsCard from "../components/SettingsCard.vue";
 import AppBar from "../components/AppBar.vue";
+
 import { useSettingsStore } from "../stores/settings.js";
+import { setVersion } from "../mixins/setVersion.js";
 
 export default {
   name: "ManagementCluster",
@@ -46,6 +48,17 @@ export default {
     SettingsCard,
     AppBar,
   },
+  mixins: [setVersion],
+  data() {
+    return {
+      showSettingsOverlay: false,
+      treeConfig: { nodeWidth: 300, nodeHeight: 140, levelHeight: 275 },
+      treeData: {},
+      cachedTreeString: "",
+      treeIsReady: false,
+      scale: 1,
+    };
+  },
   setup() {
     const store = useSettingsStore();
     return { store };
@@ -66,17 +79,6 @@ export default {
     this.selected = {};
     clearInterval(this.polling);
   },
-  data() {
-    return {
-      showSettingsOverlay: false,
-      treeConfig: { nodeWidth: 300, nodeHeight: 140, levelHeight: 275 },
-      treeData: {},
-      cachedTreeString: "",
-      treeIsReady: false,
-      scale: 1,
-      gitVersion: "",
-    };
-  },
   watch: {
     "store.selectedInterval": function (val) {
       console.log("Overview store.selectedInterval: " + val);