[-] fix webui if opened from a remote host, fixes #526

internal/webui/package.json

@@ -7,8 +7,8 @@
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
-    "lint:ts": "eslint --ext=jsx,ts,tsx internal",
-    "lint:fix": "eslint --ext=jsx,ts,tsx internal --fix",
+    "lint:ts": "eslint --ext=jsx,ts,tsx src",
+    "lint:fix": "eslint --ext=jsx,ts,tsx src --fix",
     "lint:cypress": "eslint --no-eslintrc --ext=ts -c cypress/.eslintrc cypress/e2e",
     "lint:quick": "yarn lint:ts --cache"
   },
@@ -74,5 +74,6 @@
     ]
   },
   "main": "index.js",
-  "license": "MIT"
+  "license": "MIT",
+  "packageManager": "yarn@1.22.22+sha1.ac34549e6aa8e7ead463a7407e1c7390f61a6610"
 }

internal/webui/src/QueryClient.tsx

@@ -1,6 +1,6 @@
 import { QueryClientProvider as ClientProvider, MutationCache, QueryCache, QueryClient } from "@tanstack/react-query";
+import { isUnauthorized } from "api";
 import axios from "axios";
-import { isUnauthorized } from "axiosInstance";
 import { useNavigate } from "react-router-dom";
 import { logout } from "queries/Auth";
 import { useAlert } from "utils/AlertContext";

internal/webui/src/api.ts

@@ -0,0 +1,23 @@
+import axios, { AxiosError } from "axios";
+import { getToken } from "services/Token";
+
+export const apiClient = () => {
+  const apiEndpoint = window.location.origin;
+  const instance = axios.create({
+    baseURL: apiEndpoint,
+  });
+
+  instance.interceptors.request.use(req => {
+    req.headers.set("Token", getToken());
+    return req;
+  });
+
+  return instance;
+};
+
+export const isUnauthorized = (error: AxiosError) => {
+  if (error.response?.status === axios.HttpStatusCode.Unauthorized) {
+    return true;
+  }
+  return false;
+};

internal/webui/src/pages/LogsPage/components/Logs.tsx

@@ -33,7 +33,7 @@ export const Logs = () => {
         callAlert("error", "Connection uninstantiated");
         break;
     }
-  }, [readyState, callAlert]);
+  }, [readyState]); // eslint-disable-line
 
   return (
     <div className={pageClasses.page}>

internal/webui/src/queries/Log/index.ts

@@ -1,11 +1,16 @@
 import { useWebSocket } from "react-use-websocket/dist/lib/use-websocket";
 import { getToken } from "services/Token";
 
-const socketUrl = "ws://localhost:8080/log";
-const token = getToken();
-
-export const useLogs = () => useWebSocket(socketUrl, {
-  queryParams: {
-    "Token": token ? token : ""
-  }
-});
+export const useLogs = () => {
+  const socketProtocol = window.location.protocol === "https:" ? "wss://" : "ws://";
+  const token = getToken() || "";
+
+  return useWebSocket(
+    `${socketProtocol}${window.location.host}/log`,
+    {
+      queryParams: {
+        "Token": token,
+      },
+    },
+  );
+};

internal/webui/src/services/Auth/index.ts

@@ -1,9 +1,15 @@
-import { axiosInstance } from "axiosInstance";
+import { apiClient } from "api";
+import { AxiosInstance } from "axios";
 import { LoginFormValues } from "pages/LoginPage/components/LoginForm/LoginForm.types";
 
 export default class AuthService {
+  private api: AxiosInstance;
   private static _instance: AuthService;
 
+  constructor() {
+    this.api = apiClient();
+  }
+
   public static getInstance(): AuthService {
     if (!AuthService._instance) {
       AuthService._instance = new AuthService();
@@ -13,7 +19,7 @@ export default class AuthService {
   };
 
   public async login(data: LoginFormValues) {
-    return await axiosInstance.post("login", data).
+    return await this.api.post("/login", data).
       then(response => response.data);
   };
 }

internal/webui/src/services/Metric/index.ts

@@ -1,11 +1,17 @@
-import { axiosInstance } from "axiosInstance";
+import { apiClient } from "api";
+import { AxiosInstance } from "axios";
 import { Metrics } from "types/Metric/Metric";
 import { MetricRequestBody } from "types/Metric/MetricRequestBody";
 
 
 export default class MetricService {
+  private api: AxiosInstance;
   private static _instance: MetricService;
 
+  constructor() {
+    this.api = apiClient();
+  }
+
   public static getInstance(): MetricService {
     if (!MetricService._instance) {
       MetricService._instance = new MetricService();
@@ -15,22 +21,22 @@ export default class MetricService {
   };
 
   public async getMetrics(): Promise<Metrics> {
-    return await axiosInstance.get("metric").
+    return await this.api.get("/metric").
       then(response => response.data);
   };
 
   public async deleteMetric(data: string) {
-    return await axiosInstance.delete("metric", { params: { "key": data } }).
+    return await this.api.delete("/metric", { params: { "key": data } }).
       then(response => response.data);
   };
 
   public async addMetric(data: MetricRequestBody) {
-    return await axiosInstance.post("metric", data.Data, { params: { "name": data.Name } }).
+    return await this.api.post("/metric", data.Data, { params: { "name": data.Name } }).
       then(response => response);
   };
 
   public async editMetric(data: MetricRequestBody) {
-    return await axiosInstance.post("metric", data.Data, { params: { "name": data.Name } }).
+    return await this.api.post("/metric", data.Data, { params: { "name": data.Name } }).
       then(response => response);
   };
 }

internal/webui/src/services/Preset/index.ts

@@ -1,10 +1,16 @@
-import { axiosInstance } from "axiosInstance";
+import { apiClient } from "api";
+import { AxiosInstance } from "axios";
 import { PresetRequestBody } from "types/Preset/PresetRequestBody";
 
 
 export default class PresetService {
+  private api: AxiosInstance;
   private static _instance: PresetService;
 
+  constructor() {
+    this.api = apiClient();
+  }
+
   public static getInstance(): PresetService {
     if (!PresetService._instance) {
       PresetService._instance = new PresetService();
@@ -14,22 +20,22 @@ export default class PresetService {
   };
 
   public async getPresets() {
-    return await axiosInstance.get("preset").
+    return await this.api.get("/preset").
       then(response => response.data);
   };
 
   public async deletePreset(name: string) {
-    return await axiosInstance.delete("preset", { params: { name } }).
+    return await this.api.delete("/preset", { params: { name } }).
       then(response => response.data);
   };
 
   public async addPreset(data: PresetRequestBody) {
-    return await axiosInstance.post("preset", data.Data, { params: { "name": data.Name } }).
+    return await this.api.post("/preset", data.Data, { params: { "name": data.Name } }).
       then(response => response);
   };
 
   public async editPreset(data: PresetRequestBody) {
-    return await axiosInstance.post("preset", data.Data, { params: { "name": data.Name } }).
+    return await this.api.post("/preset", data.Data, { params: { "name": data.Name } }).
       then(response => response);
   };
 };

internal/webui/src/services/Source/index.ts

@@ -1,10 +1,16 @@
-import { axiosInstance } from "axiosInstance";
+import { apiClient } from "api";
+import { AxiosInstance } from "axios";
 import { Source } from "types/Source/Source";
 import { SourceRequestBody } from "types/Source/SourceRequestBody";
 
 export default class SourceService {
+  private api: AxiosInstance;
   private static _instance: SourceService;
 
+  constructor() {
+    this.api = apiClient();
+  }
+
   public static getInstance(): SourceService {
     if (!SourceService._instance) {
       SourceService._instance = new SourceService();
@@ -14,35 +20,35 @@ export default class SourceService {
   };
 
   public async getSources() {
-    return await axiosInstance.get("source").
+    return await this.api.get("/source").
       then(response => response.data);
   };
 
   public async deleteSource(uniqueName: string) {
-    return await axiosInstance.delete("source", { params: { "name": uniqueName } }).
+    return await this.api.delete("/source", { params: { "name": uniqueName } }).
       then(response => response.data);
   };
 
   public async addSource(data: Source) {
-    return await axiosInstance.post("source", data).
+    return await this.api.post("/source", data).
       then(response => response);
   };
 
   public async editSource(data: SourceRequestBody) {
-    return await axiosInstance.post("source", data.data, { params: { "name": data.Name } }).
+    return await this.api.post("/source", data.data, { params: { "name": data.Name } }).
       then(response => response);
   };
 
   public async editSourceEnable(data: Source) {
-    return await axiosInstance.post("source", data, { params: { "name": data.Name } }).
+    return await this.api.post("/source", data, { params: { "name": data.Name } }).
       then(response => response);
   };
 
   public async editSourceHostConfig(data: Source) {
-    return await axiosInstance.post("source", data, { params: { "name": data.Name } });
+    return await this.api.post("/source", data, { params: { "name": data.Name } });
   };
 
   public async testSourceConnection(data: string) {
-    return await axiosInstance.post("test-connect", data);
+    return await this.api.post("/test-connect", data);
   };
 }