frontend: add footer with links; rework URL generation

scs · Sep 9, 2021 · df78aa1 · df78aa1
1 parent b91d73a
commit df78aa1
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 14 deletions.
diff --git a/frontend/smartmeter-datacollector-configurator/src/App.vue b/frontend/smartmeter-datacollector-configurator/src/App.vue
@@ -9,17 +9,27 @@
       </div>
     </header>
     <configurator />
+    <footer class="footer has-background-white">
+      <p class="content has-text-centered">
+        <a :href="grafanaUrl" target="_blank">Grafana Web</a> -
+        <a href="https://github.com/scs/smartmeter-datacollector/wiki" target="_blank">Documentation</a> -
+        <a href="https://github.com/scs/smartmeter-datacollector" target="_blank">Source Code</a>
+      </p>
+    </footer>
   </div>
 </template>
 
 <script>
 import Configurator from "./components/Configurator.vue";
-
+import { getGrafanaUrl } from "./utils";
 export default {
   name: "App",
   components: {
     Configurator,
   },
+  computed: {
+    grafanaUrl: getGrafanaUrl,
+  },
 };
 </script>
 

diff --git a/frontend/smartmeter-datacollector-configurator/src/components/Configurator.vue b/frontend/smartmeter-datacollector-configurator/src/components/Configurator.vue
@@ -84,7 +84,7 @@
 
 <script>
 import axios from "axios";
-import { getBaseHostUrl } from "../utils";
+import { getApiUrl } from "../utils";
 import LoggerSink from "./LoggerSink.vue";
 import MqttSink from "./MqttSink.vue";
 import SmartMeter from "./SmartMeter.vue";
@@ -199,7 +199,7 @@ export default {
     },
     loadConfig() {
       axios
-        .get(`${getBaseHostUrl()}/config`, {
+        .get(`${getApiUrl()}/config`, {
           timeout: 3000,
           responseType: "json",
           auth: this.getAuthentication(),
@@ -220,7 +220,7 @@ export default {
     deployConfig() {
       const configJson = JSON.stringify(this.packConfig());
       axios
-        .post(`${getBaseHostUrl()}/config`, configJson, {
+        .post(`${getApiUrl()}/config`, configJson, {
           timeout: 4000,
           auth: this.getAuthentication(),
         })
@@ -247,7 +247,7 @@ export default {
     },
     restartDatacollector() {
       axios
-        .post(`${getBaseHostUrl()}/restart`, null, {
+        .post(`${getApiUrl()}/restart`, null, {
           timeout: 6000,
           auth: this.getAuthentication(),
         })
@@ -271,7 +271,7 @@ export default {
     },
     restartDemo() {
       axios
-        .post(`${getBaseHostUrl()}/restart-demo`, null, {
+        .post(`${getApiUrl()}/restart-demo`, null, {
           timeout: 8000,
           auth: this.getAuthentication(),
         })
@@ -319,7 +319,7 @@ export default {
     },
     changePassword(newPassword) {
       axios
-        .post(`${getBaseHostUrl()}/credentials`, newPassword, {
+        .post(`${getApiUrl()}/credentials`, newPassword, {
           timeout: 4000,
           auth: this.getAuthentication(),
         })

diff --git a/frontend/smartmeter-datacollector-configurator/src/components/SmartMeter.vue b/frontend/smartmeter-datacollector-configurator/src/components/SmartMeter.vue
@@ -29,7 +29,7 @@
 
 <script>
 import axios from "axios";
-import { getBaseHostUrl } from "../utils";
+import { getApiUrl } from "../utils";
 export default {
   props: {
     initConfig: {
@@ -63,7 +63,7 @@ export default {
     },
     loadPorts() {
       axios
-        .get(`${getBaseHostUrl()}/ttydevices`, {
+        .get(`${getApiUrl()}/ttydevices`, {
           timeout: 3000,
           responseType: "json",
         })

diff --git a/frontend/smartmeter-datacollector-configurator/src/utils.js b/frontend/smartmeter-datacollector-configurator/src/utils.js
@@ -1,11 +1,18 @@
 const devMode = process.env.NODE_ENV === "development";
-const devBaseUrl = "http://localhost:8000/api";
+const devApiPort = 8000;
+const prodApiPort = 8000;
+const apiPath = "/api";
+const grafanaPort = 3000;
 
-function getBaseHostUrl() {
+function getApiUrl() {
   if (devMode) {
-    return devBaseUrl;
+    return `http://${location.hostname}:${devApiPort}${apiPath}`;
   }
-  return `http://${location.host}/api`;
+  return `http://${location.hostname}:${prodApiPort}${apiPath}`;
 }
 
-export { getBaseHostUrl };
+function getGrafanaUrl() {
+  return `http://${location.hostname}:${grafanaPort}`;
+}
+
+export { getApiUrl, getGrafanaUrl };