"OVDashboard" and "Axios" typescript plugins

ui/src/d.ts/shims-axios.d.ts

@@ -0,0 +1,9 @@
+import axios from "axios";
+
+declare module 'vue/types/vue' {
+  interface Vue {
+    $axios: typeof axios;
+  }
+}
+
+export { };

ui/src/d.ts/shims-ovdashboard.d.ts

@@ -0,0 +1,10 @@
+declare module 'vue/types/vue' {
+  interface Vue {
+    $ovdashboard: {
+      api_url: (endpoint: string) => string;
+    }
+  }
+}
+
+export { };
+

ui/src/main.ts

@@ -1,10 +1,13 @@
 import Vue from 'vue'
 import App from './App.vue'
-import './plugins/axios'
+import axios from './plugins/axios'
+import ovdashboard from './plugins/ovdashboard'
 import './plugins/registerServiceWorker'
 import vuetify from './plugins/vuetify'
 
 Vue.config.productionTip = false
+Vue.use(axios)
+Vue.use(ovdashboard)
 
 new Vue({
   vuetify,

ui/src/plugins/axios.js

@@ -1,63 +0,0 @@
-"use strict";
-
-import axios from "axios";
-import Vue from 'vue';
-
-// Full config:  https://github.com/axios/axios#request-config
-// axios.defaults.baseURL = process.env.baseURL || process.env.apiUrl || '';
-// axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
-// axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
-
-let config = {
-  // baseURL: process.env.baseURL || process.env.apiUrl || ""
-  // timeout: 60 * 1000, // Timeout
-  // withCredentials: true, // Check cross-site Access-Control
-};
-
-const _axios = axios.create(config);
-
-_axios.interceptors.request.use(
-  function (config) {
-    // Do something before request is sent
-    return config;
-  },
-  function (error) {
-    // Do something with request error
-    return Promise.reject(error);
-  }
-);
-
-// Add a response interceptor
-_axios.interceptors.response.use(
-  function (response) {
-    // Do something with response data
-    return response;
-  },
-  function (error) {
-    // Do something with response error
-    return Promise.reject(error);
-  }
-);
-
-Plugin.install = function (Vue, options) {
-  options;
-
-  Vue.axios = _axios;
-  window.axios = _axios;
-  Object.defineProperties(Vue.prototype, {
-    axios: {
-      get() {
-        return _axios;
-      }
-    },
-    $axios: {
-      get() {
-        return _axios;
-      }
-    },
-  });
-};
-
-Vue.use(Plugin)
-
-export default Plugin;

ui/src/plugins/axios.ts

@@ -0,0 +1,46 @@
+import axios from 'axios';
+import _Vue from 'vue';
+
+class AxiosPlugin {
+  public install(Vue: typeof _Vue) {
+    // Full config:  https://github.com/axios/axios#request-config
+    // axios.defaults.baseURL = process.env.baseURL || process.env.apiUrl || '';
+    // axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
+    // axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
+
+    const config = {
+      // baseURL: process.env.baseURL || process.env.apiUrl || ""
+      // timeout: 60 * 1000, // Timeout
+      // withCredentials: true, // Check cross-site Access-Control
+    };
+
+    const _axios = axios.create(config);
+
+    _axios.interceptors.request.use(
+      function (config) {
+        // Do something before request is sent
+        return config;
+      },
+      function (error) {
+        // Do something with request error
+        return Promise.reject(error);
+      }
+    );
+
+    // Add a response interceptor
+    _axios.interceptors.response.use(
+      function (response) {
+        // Do something with response data
+        return response;
+      },
+      function (error) {
+        // Do something with response error
+        return Promise.reject(error);
+      }
+    );
+
+    Vue.prototype.$axios = _axios;
+  }
+}
+
+export default new AxiosPlugin();

ui/src/plugins/ovdashboard.ts

@@ -0,0 +1,30 @@
+import _Vue from 'vue';
+
+class OVDashboardPlugin {
+  public install(Vue: typeof _Vue) {
+    Vue.prototype.$ovdashboard = this;
+  }
+
+  private get api_baseurl(): string {
+    if (process.env.NODE_ENV === "production") {
+      return "//" + window.location.host + "/api/v1";
+
+    } else {
+      if (process.env.NODE_ENV !== "development") {
+        console.warn("Unexpected NODE_ENV value");
+      }
+
+      return "//" + window.location.hostname + ":8000/api/v1";
+    }
+  }
+
+  public api_url(endpoint: string | undefined): string {
+    if (endpoint === undefined)
+      return this.api_baseurl;
+
+    else
+      return this.api_baseurl + "/" + endpoint;
+  }
+}
+
+export default new OVDashboardPlugin();

ui/src/plugins/vue-ovdashboard.js

@@ -1,40 +0,0 @@
-"use strict";
-
-import Vue from 'vue';
-
-function get_baseurl() {
-  if (process.env.NODE_ENV === "production") {
-    return "//" + window.location.host + "/api/v1";
-
-  } else {
-    if (process.env.NODE_ENV !== "development") {
-      console.warn("Unexpected NODE_ENV value");
-    }
-
-    return "//" + window.location.hostname + ":8000/api/v1";
-  }
-}
-
-Plugin.install = function (Vue, options) {
-  options;
-
-  Vue.ovd_api_baseurl = get_baseurl();
-  window.ovd_api_baseurl = get_baseurl();
-
-  Object.defineProperties(Vue.prototype, {
-    ovd_api_baseurl: {
-      get() {
-        return get_baseurl();
-      }
-    },
-    $ovd_api_baseurl: {
-      get() {
-        return get_baseurl();
-      }
-    },
-  });
-};
-
-Vue.use(Plugin)
-
-export default Plugin;