feat: make the webui to talk to the https cfm-service with insecure m…

…odel
Seagate · Jan 16, 2025 · c246815 · c246815
1 parent 387eb83
commit c246815
Show file tree

Hide file tree

Showing 13 changed files with 31 additions and 33 deletions.
diff --git a/webui/config.yaml b/webui/config.yaml
@@ -1,3 +1,3 @@
  # Set up the IpAddress with port for the cfm-service to be connected
 api:
-  base_path: "http://127.0.0.1:8080"
+  base_path: "https://127.0.0.1:8080"
diff --git a/webui/src/components/Common/Helpers.vue b/webui/src/components/Common/Helpers.vue
@@ -1,8 +1,11 @@
 <!-- Copyright (c) 2024 Seagate Technology LLC and/or its Affiliates -->
-<script>
+<script lang="ts">
+// Make the API calls in the web UI are prefixed with /api to match the proxy configuration
+export const API_BASE_PATH = "/api";
+
 export default {
   methods: {
-    getColor(item) {
+    getColor(item: string) {
       if (
         item === "Successful" ||
         item === "Success" ||

diff --git a/webui/src/components/Stores/ApplianceStore.ts b/webui/src/components/Stores/ApplianceStore.ts
@@ -6,11 +6,9 @@ import {
   DefaultApi,
   DiscoveredDevice,
 } from "@/axios/api";
-import { BASE_PATH } from "@/axios/base";
 import axios from "axios";
-
 // Use API_BASE_PATH to overwrite the BASE_PATH in the generated client code
-const API_BASE_PATH = process.env.BASE_PATH || BASE_PATH;
+import { API_BASE_PATH } from "../Common/Helpers.vue";
 
 export const useApplianceStore = defineStore("appliance", {
   state: () => ({

diff --git a/webui/src/components/Stores/BladeMemoryStore.ts b/webui/src/components/Stores/BladeMemoryStore.ts
@@ -1,11 +1,9 @@
 // Copyright (c) 2024 Seagate Technology LLC and/or its Affiliates
 import { defineStore } from 'pinia'
 import { MemoryRegion, DefaultApi, ComposeMemoryRequest, AssignMemoryRequest } from "@/axios/api";
-import { BASE_PATH } from "@/axios/base";
 import axios from 'axios';
-
 // Use API_BASE_PATH to overwrite the BASE_PATH in the generated client code
-const API_BASE_PATH = process.env.BASE_PATH || BASE_PATH;
+import { API_BASE_PATH } from "../Common/Helpers.vue";
 
 export const useBladeMemoryStore = defineStore('bladeMemory', {
     state: () => ({

diff --git a/webui/src/components/Stores/BladePortStore.ts b/webui/src/components/Stores/BladePortStore.ts
@@ -1,10 +1,8 @@
 // Copyright (c) 2024 Seagate Technology LLC and/or its Affiliates
 import { defineStore } from 'pinia'
 import { PortInformation, DefaultApi } from "@/axios/api";
-import { BASE_PATH } from "@/axios/base";
-
 // Use API_BASE_PATH to overwrite the BASE_PATH in the generated client code
-const API_BASE_PATH = process.env.BASE_PATH || BASE_PATH;
+import { API_BASE_PATH } from "../Common/Helpers.vue";
 
 export const useBladePortStore = defineStore('bladePort', {
     state: () => ({

diff --git a/webui/src/components/Stores/BladeResourceStore.ts b/webui/src/components/Stores/BladeResourceStore.ts
@@ -1,10 +1,8 @@
 // Copyright (c) 2024 Seagate Technology LLC and/or its Affiliates
 import { defineStore } from 'pinia'
 import { MemoryResourceBlock, DefaultApi } from "@/axios/api";
-import { BASE_PATH } from "@/axios/base";
-
 // Use API_BASE_PATH to overwrite the BASE_PATH in the generated client code
-const API_BASE_PATH = process.env.BASE_PATH || BASE_PATH;
+import { API_BASE_PATH } from "../Common/Helpers.vue";
 
 export const useBladeResourceStore = defineStore('bladeResource', {
     state: () => ({

diff --git a/webui/src/components/Stores/BladeStore.ts b/webui/src/components/Stores/BladeStore.ts
@@ -1,10 +1,9 @@
 // Copyright (c) 2024 Seagate Technology LLC and/or its Affiliates
 import { defineStore } from 'pinia'
 import { Blade, Credentials, DefaultApi } from "@/axios/api";
-import { BASE_PATH } from "@/axios/base";
 import axios from 'axios';
 // Use API_BASE_PATH to overwrite the BASE_PATH in the generated client code
-const API_BASE_PATH = process.env.BASE_PATH || BASE_PATH;
+import { API_BASE_PATH } from "../Common/Helpers.vue";
 
 export const useBladeStore = defineStore('blade', {
     state: () => ({

diff --git a/webui/src/components/Stores/HostMemoryDeviceStore.ts b/webui/src/components/Stores/HostMemoryDeviceStore.ts
@@ -1,10 +1,8 @@
 // Copyright (c) 2024 Seagate Technology LLC and/or its Affiliates
 import { defineStore } from 'pinia'
 import { MemoryDeviceInformation, DefaultApi } from "@/axios/api";
-import { BASE_PATH } from "@/axios/base";
-
 // Use API_BASE_PATH to overwrite the BASE_PATH in the generated client code
-const API_BASE_PATH = process.env.BASE_PATH || BASE_PATH;
+import { API_BASE_PATH } from "../Common/Helpers.vue";
 
 export const useHostMemoryDeviceStore = defineStore('hostMemoryDevices', {
     state: () => ({

diff --git a/webui/src/components/Stores/HostMemoryStore.ts b/webui/src/components/Stores/HostMemoryStore.ts
@@ -1,10 +1,8 @@
 // Copyright (c) 2024 Seagate Technology LLC and/or its Affiliates
 import { defineStore } from 'pinia'
 import { MemoryRegion, DefaultApi } from "@/axios/api";
-import { BASE_PATH } from "@/axios/base";
-
 // Use API_BASE_PATH to overwrite the BASE_PATH in the generated client code
-const API_BASE_PATH = process.env.BASE_PATH || BASE_PATH;
+import { API_BASE_PATH } from "../Common/Helpers.vue";
 
 export const useHostMemoryStore = defineStore('hostMemory', {
     state: () => ({

diff --git a/webui/src/components/Stores/HostPortStore.ts b/webui/src/components/Stores/HostPortStore.ts
@@ -1,10 +1,8 @@
 // Copyright (c) 2024 Seagate Technology LLC and/or its Affiliates
 import { defineStore } from 'pinia'
 import { PortInformation, DefaultApi } from "@/axios/api";
-import { BASE_PATH } from "@/axios/base";
-
 // Use API_BASE_PATH to overwrite the BASE_PATH in the generated client code
-const API_BASE_PATH = process.env.BASE_PATH || BASE_PATH;
+import { API_BASE_PATH } from "../Common/Helpers.vue";
 
 export const useHostPortStore = defineStore('hostPort', {
     state: () => ({

diff --git a/webui/src/components/Stores/HostStore.ts b/webui/src/components/Stores/HostStore.ts
@@ -1,11 +1,9 @@
 // Copyright (c) 2024 Seagate Technology LLC and/or its Affiliates
 import { defineStore } from "pinia";
 import { Host, Credentials, DefaultApi, DiscoveredDevice } from "@/axios/api";
-import { BASE_PATH } from "@/axios/base";
 import axios from "axios";
-
 // Use API_BASE_PATH to overwrite the BASE_PATH in the generated client code
-const API_BASE_PATH = process.env.BASE_PATH || BASE_PATH;
+import { API_BASE_PATH } from "../Common/Helpers.vue";
 
 export const useHostStore = defineStore("host", {
   state: () => ({

diff --git a/webui/src/components/Stores/ServiceStore.ts b/webui/src/components/Stores/ServiceStore.ts
@@ -1,10 +1,8 @@
 // Copyright (c) 2024 Seagate Technology LLC and/or its Affiliates
-import { defineStore } from 'pinia'
+import { defineStore } from 'pinia';
 import { DefaultApi } from "@/axios/api";
-import { BASE_PATH } from "@/axios/base";
-
 // Use API_BASE_PATH to overwrite the BASE_PATH in the generated client code
-const API_BASE_PATH = process.env.BASE_PATH || BASE_PATH;
+import { API_BASE_PATH } from "../Common/Helpers.vue";
 
 export const useServiceStore = defineStore('cfm-service', {
     state: () => ({

diff --git a/webui/vite.config.ts b/webui/vite.config.ts
@@ -63,5 +63,19 @@ export default defineConfig({
       key: fs.existsSync(path.resolve(__dirname, 'incoming/key.pem')) ? fs.readFileSync(path.resolve(__dirname, 'incoming/key.pem')) : undefined,
       cert: fs.existsSync(path.resolve(__dirname, 'incoming/cert.pem')) ? fs.readFileSync(path.resolve(__dirname, 'incoming/cert.pem')) : undefined
     },
+    proxy: {
+      '/api': {
+        target: parsedConfig.api.base_path,
+        secure: false, // This will ignore the self-signed certificate
+        changeOrigin: true,
+        rewrite: (path) => path.replace(/^\/api/, ''),
+        configure: (proxy) => {
+          proxy.on('proxyRes', (proxyRes) => {
+            // Remove the strict-transport-security header
+            delete proxyRes.headers['strict-transport-security'];
+          });
+        },
+      },
+    },
   },
 })