fix(devcontainer): make Config UI and Grafana accessible from host when using devcontainers (#8645)

* fix(devcontainer): Make config-ui dev server accessible outside the container
when started by listening on 0.0.0.0 with the `--host` flag.
Also ensure it uses port 4000 or fails to start with `--strictPort`
to prevent silent port change that will mismatch with the exported dev container port.

* fix(devcontainer): make Config UI and Grafana accessible from host when using devcontainers

Author: amnir

.devcontainer/devcontainer.json

@@ -15,7 +15,6 @@
  * limitations under the License.
  *
  */
-
 {
   "name": "Go",
   "dockerComposeFile": "docker-compose.yml",
@@ -36,6 +35,10 @@
     4000,
     8080
   ],
+  "containerEnv": {
+    "VITE_GRAFANA_URL": "http://grafana:3000",
+    "VITE_GRAFANA_CHANGE_ORIGIN": "false"
+  },
   "postCreateCommand": "npm install commitizen -g",
   "customizations": {
     "vscode": {
@@ -45,4 +48,4 @@
     }
   },
   "remoteUser": "root"
-}
+}

config-ui/package.json

@@ -4,7 +4,7 @@
   "version": "0.0.0",
   "packageManager": "yarn@3.4.1",
   "scripts": {
-    "start": "vite",
+    "start": "vite --host --strictPort",
     "build": "vite build",
     "preview": "vite preview",
     "lint": "tsc && eslint . --fix",

config-ui/vite.config.ts

@@ -21,6 +21,10 @@ import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
 import svgr from 'vite-plugin-svgr';
 
+// Allow Grafana access from the dev server when using Dev Container 
+const grafanaOrigin = process.env.VITE_GRAFANA_URL || 'http://localhost:3002';
+const grafanaChangeOrigin = envBool('VITE_GRAFANA_CHANGE_ORIGIN', true);
+
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react(), svgr()],
@@ -36,8 +40,9 @@ export default defineConfig({
         rewrite: (path) => path.replace(/^\/api\//, ''),
       },
       '/grafana': {
-        target: 'http://localhost:3002/',
-        changeOrigin: true,
+        target: grafanaOrigin,
+        changeOrigin: grafanaChangeOrigin,
+        ws: true // Proxying websockets to allow features like query auto-complete
       },
     },
   },
@@ -48,3 +53,9 @@ export default defineConfig({
     },
   },
 });
+
+function envBool(name: string, defaultValue = false): boolean {
+  const v = process.env[name];
+  if (v == null) return defaultValue;
+  return /^(1|true|yes|on)$/i.test(v);
+}