From d45bcbe15ce0f94d1c57727824e570db944a910f Mon Sep 17 00:00:00 2001
From: Stephen McLaughlin <44235289+Steve-Mcl@users.noreply.github.com>
Date: Fri, 1 Sep 2023 12:12:19 +0100
Subject: [PATCH] support custom http node root path

closes #163
---
 nodes/config/ui_base.html |  6 +++++-
 ui/src/main.js            | 13 ++++++++++---
 2 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/nodes/config/ui_base.html b/nodes/config/ui_base.html
index d00fdc916..bceae5d18 100644
--- a/nodes/config/ui_base.html
+++ b/nodes/config/ui_base.html
@@ -140,7 +140,11 @@
     const sidebar = $(sidebarContentTemplate)
 
     function uiLink (name, path) {
-        return `<div class="red-ui-sidebar-header"><label>${name}</label><a id="open-dashboard" href="${path}" target="nr-dashboard" class="editor-button editor-button-small nrdb2-sb-list-header-button">Open Dashboard<i style="margin-left: 3px;" class="fa fa-external-link"></i></a></div>`
+        const base = RED.settings.httpNodeRoot || '/'
+        const basePart = base.endsWith('/') ? base : `${base}/`
+        const dashPart = path.startsWith('/') ? path.slice(1) : path
+        const fullPath = `${basePart}${dashPart}`
+        return `<div class="red-ui-sidebar-header"><label>${name}</label><a id="open-dashboard" href="${fullPath}" target="nr-dashboard" class="editor-button editor-button-small nr-db-sb-list-header-button">Open Dashboard<i style="margin-left: 3px;" class="fa fa-external-link"></i></a></div>`
     }
 
     /**
diff --git a/ui/src/main.js b/ui/src/main.js
index 2cbcd3d84..bae1696f6 100644
--- a/ui/src/main.js
+++ b/ui/src/main.js
@@ -45,11 +45,18 @@ const vuetify = createVuetify({
 
 import store from './store/index.js'
 
-/**
+/*
  * Configure SocketIO Client to Interact with Node-RED
  */
-const path = '/dashboard/socket.io'
-console.log(`Connecting to Node-RED via SocketIO at ${path}`)
+// Inspect the current URL to determine the correct path to use for socket.io.
+// for example, the base path might be `:1880/` or if `httpNodeRoot` is set, it could be something like `:1880/nr/endpoints/v1`
+// 1. determine the base path to use (grab everything before the first /dashboard)
+// 2. append '/socket.io' to the base path
+// TODO: determine what to do when /dashboard is called something else (support multiple dashboards github #23 )
+//       possible idea: pass the base path as a query param from the side bar, extract it then redirect?
+const url = new URL(window.location.href)
+const basePath = url.pathname.split('/dashboard')[0]
+const path = basePath + '/dashboard/socket.io'
 const socket = io({
     path
 })