Add master server Web Root config

Add web_root option to the master server and use it create URLs for
resources hosted by it.  This permits hosting the master server web
interface behind reverse proxy under a dedicated path.

CHANGELOG.md

@@ -33,6 +33,8 @@ Version 2.0.0
   server provided the session can be resumed.
 - Added support for having multiple Factorio installs and selecting which
   version to use on a per instance basis.
+- Added config to specify which path the master interface is accessed under,
+  allowing it to be proxied behind web-server.
 
 ### Changes
 

lib/config/definitions.js

@@ -42,6 +42,13 @@ MasterGroup.define({
 	optional: true,
 	initial_value: 8443,
 });
+MasterGroup.define({
+	name: "web_root",
+	title: "Web Root",
+	description: "Sub-path to where the web interface is hosted.  Needed when proxying the web interface.",
+	type: "string",
+	initial_value: "/",
+});
 MasterGroup.define({
 	name: "tls_certificate",
 	title: "TLS Certificate",

master.js

@@ -72,6 +72,7 @@ app.set('views', ['views', 'plugins']);
 
 // give ejs access to some interesting information
 app.use(function(req, res, next){
+	res.locals.root = masterConfig.get("master.web_root");
 	res.locals.res = res;
 	res.locals.req = req;
 	res.locals.masterPlugins = masterPlugins;

plugins/subspace_storage/master.js

@@ -30,12 +30,13 @@ const masterInventoryGauge = new prometheus.Gauge(
 class MasterPlugin extends plugin.BaseMasterPlugin {
 	async init() {
 
+		let root = this.master.config.get("master.web_root");
 		this.ui = {
 			sidebar: [
 				{
 					getHtml: () => `
     <div class="nav-item mr-1">
-        <a class="nav-link align-middle" href="/subspace_storage/storage">Storage</a>
+        <a class="nav-link align-middle" href="${root}subspace_storage/storage">Storage</a>
     </div>`,
 				},
 			],

plugins/subspace_storage/static/storage.js

@@ -62,7 +62,7 @@ function updateInventory() {
 			drawcontents(data);
 		}
 	}
-	xmlhttp.open("GET", "/api/inventory", true);
+	xmlhttp.open("GET", `${root}api/inventory`, true);
 	xmlhttp.send();
 }
 if(JSON.parse(localStorage.settings)["Periodically update storage screen"]) {

plugins/subspace_storage/views/storage.ejs

@@ -1,7 +1,7 @@
 <!doctype HTML>
 <head>
     <%- include("head") %>
-    <script defer src="/subspace_storage/storage.js"></script>
+    <script defer src="<%= locals.root %>subspace_storage/storage.js"></script>
 </head>
 
 <body>

static/main.js

@@ -198,7 +198,7 @@ function getImageFromName(name){
 		return "https://wiki.factorio.com/images/" + capitalizeFirstLetter(replaceAll(factorioLocale["fluid-name"][name], ' ', '_').toLowerCase()) + ".png";
 	} else if(factorioLocale["equipment-name"] && factorioLocale["equipment-name"][name]){
 		return "https://wiki.factorio.com/images/" + capitalizeFirstLetter(replaceAll(factorioLocale["equipment-name"][name], ' ', '_').toLowerCase()) + ".png";
-	} else return "/pictures/unknown-item.png";
+	} else return `${root}pictures/unknown-item.png`;
 }
 window.factorioLocale = {};
 $.getJSON("/api/getFactorioLocale", (locale) => {
@@ -252,6 +252,6 @@ var imagelinks = {
 	"battery-mk2-equipment": "/pictures/Battery_MK2.png",
 	"personal-roboport-mk2-equipment": "/pictures/Personal_roboport_MK2.png",
 }
-var populateImageLinks = async () => (await getJSON("/api/getPictures")).forEach(img => imagelinks[img.name] = img.path)
+var populateImageLinks = async () => (await getJSON(`${root}api/getPictures`)).forEach(img => imagelinks[img.name] = img.path)
 
 populateImageLinks()

views/head.ejs

@@ -1,12 +1,13 @@
 <title>Clusterio</title>
 <link rel="stylesheet" type="text/css" href="/style.css">
-<script src="/external/jquery.js"></script>
-<script src="/external/jquery-ui.js"></script>
-<script src="/external/moment.min.js"></script>
-<script src="/external/mousetrap.min.js"></script>
-<script src="/main.js"></script>
-<link href="/bootstrap.min.css" rel="stylesheet">
-<link href="/external/css/Roboto.css" rel="stylesheet">
+<script>root = "<%= locals.root %>";</script>
+<script src="<%= locals.root %>external/jquery.js"></script>
+<script src="<%= locals.root %>external/jquery-ui.js"></script>
+<script src="<%= locals.root %>external/moment.min.js"></script>
+<script src="<%= locals.root %>external/mousetrap.min.js"></script>
+<script src="<%= locals.root %>main.js"></script>
+<link href="<%= locals.root %>bootstrap.min.css" rel="stylesheet">
+<link href="<%= locals.root %>external/css/Roboto.css" rel="stylesheet">
 <link href="https://fonts.googleapis.com/css?family=Orbitron" rel="stylesheet">
 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.0/css/all.css" integrity="sha384-aOkxzJ5uQz7WBObEZcHvV5JvRW3TUc2rNPA7pe3AwnsUohiw1Vj2Rgx2KSOkF5+h" crossorigin="anonymous">
 <link rel="apple-touch-icon" sizes="57x57" href="/favicon/apple-icon-57x57.png">

views/nav.ejs

@@ -1,12 +1,12 @@
 <nav class="navbar nav-pills nav-fill">
     <div class="nav-item col-3">
         <a class="navbar-brand border-0" href="/">
-            <img src="/pictures/logo.png" width="50" height="50" class="d-inline-block align-middle " alt=""/>
+            <img src="<%= locals.root %>pictures/logo.png" width="50" height="50" class="d-inline-block align-middle " alt=""/>
             <h3 class=" ml-3 nav-title">Clusterio</h3>
         </a>
     </div>
     <div class="nav-item mr-1">
-        <a class="nav-link align-middle" href="/nodes">Slaves</a>
+        <a class="nav-link align-middle" href="<%= locals.root %>nodes">Slaves</a>
     </div><%
 for (let plug of locals.masterPlugins.values()) {
     if (
@@ -24,6 +24,6 @@ for (let plug of locals.masterPlugins.values()) {
     }
 } %>
     <div class="nav-item">
-        <a class="nav-link align-middle" href="/settings">Settings</a>
+        <a class="nav-link align-middle" href="<%= locals.root %>settings">Settings</a>
     </div>
 </nav>