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/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);
+}