Use relative URLs throughout the UI

To allow serving from a subdirectory using a reverse proxy.

ui/components/all-parameters.ts

@@ -140,7 +140,7 @@ const component: ClosureComponent = (): Component => {
         m(
           "a.download-csv",
           {
-            href: `/api/devices/${encodeURIComponent(
+            href: `api/devices/${encodeURIComponent(
               device["DeviceID.ID"].value[0]
             )}.csv`,
             download: "",

ui/devices-page.ts

@@ -47,7 +47,7 @@ const memoizedGetSortable = memoize(p => {
 const getDownloadUrl = memoize((filter, indexParameters) => {
   const columns = {};
   for (const p of indexParameters) columns[p.label] = stringify(p.parameter);
-  return `/api/devices.csv?${m.buildQueryString({
+  return `api/devices.csv?${m.buildQueryString({
     filter: stringify(filter),
     columns: JSON.stringify(columns)
   })}`;

ui/faults-page.ts

@@ -51,7 +51,7 @@ const getDownloadUrl = memoize(filter => {
       attr.id === "timestamp" ? `DATE_STRING(${attr.id})` : attr.id;
   }
 
-  return `/api/faults.csv?${m.buildQueryString({
+  return `api/faults.csv?${m.buildQueryString({
     filter: stringify(filter),
     columns: JSON.stringify(cols)
   })}`;

ui/files-page.ts

@@ -108,7 +108,7 @@ function putActionHandler(action, _object): Promise<ValidationErrors> {
             .xhrRequest({
               method: "PUT",
               headers: headers,
-              url: `/api/files/${encodeURIComponent(id)}`,
+              url: `api/files/${encodeURIComponent(id)}`,
               serialize: body => body, // Identity function to prevent JSON.parse on blob data
               body: file
             })
@@ -132,7 +132,7 @@ function putActionHandler(action, _object): Promise<ValidationErrors> {
 const getDownloadUrl = memoize(filter => {
   const cols = {};
   for (const attr of attributes) cols[attr.label] = attr.id;
-  return `/api/files.csv?${m.buildQueryString({
+  return `api/files.csv?${m.buildQueryString({
     filter: stringify(filter),
     columns: JSON.stringify(cols)
   })}`;

ui/permissions-page.ts

@@ -157,7 +157,7 @@ const formData = {
 const getDownloadUrl = memoize(filter => {
   const cols = {};
   for (const attr of attributes) cols[attr.label] = attr.id;
-  return `/api/permissions.csv?${m.buildQueryString({
+  return `api/permissions.csv?${m.buildQueryString({
     filter: stringify(filter),
     columns: JSON.stringify(cols)
   })}`;

ui/pie-chart-component.ts

@@ -49,7 +49,7 @@ function drawChart(chartData): Children {
         m(
           "a",
           {
-            href: `/#!/devices/?${m.buildQueryString({
+            href: `#!/devices/?${m.buildQueryString({
               filter: memoizedStringify(slice["filter"])
             })}`
           },
@@ -89,7 +89,7 @@ function drawChart(chartData): Children {
         m(
           "a",
           {
-            "xlink:href": `/#!/devices/?${m.buildQueryString({
+            "xlink:href": `#!/devices/?${m.buildQueryString({
               filter: memoizedStringify(slice["filter"])
             })}`
           },

ui/presets-page.ts

@@ -134,7 +134,7 @@ const formData = {
 const getDownloadUrl = memoize(filter => {
   const cols = {};
   for (const attr of attributes) cols[attr.label] = attr.id;
-  return `/api/presets.csv?${m.buildQueryString({
+  return `api/presets.csv?${m.buildQueryString({
     filter: stringify(filter),
     columns: JSON.stringify(cols)
   })}`;
@@ -240,7 +240,7 @@ export const component: ClosureComponent = (): Component => {
 
       const valueCallback = (attr, preset): {} => {
         if (attr.id === "precondition") {
-          let devicesUrl = "/#!/devices";
+          let devicesUrl = "#!/devices";
           if (preset["precondition"].length) {
             devicesUrl += `?${m.buildQueryString({
               filter: preset["precondition"]
@@ -259,7 +259,7 @@ export const component: ClosureComponent = (): Component => {
           return m(
             "a",
             {
-              href: `/#!/admin/provisions?${m.buildQueryString({
+              href: `#!/admin/provisions?${m.buildQueryString({
                 filter: `Q("ID", "${preset["provision"]}")`
               })}`
             },

ui/provisions-page.ts

@@ -114,7 +114,7 @@ const formData = {
 const getDownloadUrl = memoize(filter => {
   const cols = {};
   for (const attr of attributes) cols[attr.label] = attr.id;
-  return `/api/provisions.csv?${m.buildQueryString({
+  return `api/provisions.csv?${m.buildQueryString({
     filter: stringify(filter),
     columns: JSON.stringify(cols)
   })}`;

ui/store.ts

@@ -91,7 +91,7 @@ class QueryResponse {
 
 function checkConnection(): void {
   m.request({
-    url: "/status",
+    url: "status",
     method: "GET",
     background: true,
     extract: xhr => {
@@ -387,7 +387,7 @@ export function fulfill(accessTimestamp, _fulfillTimestamp): Promise<boolean> {
             xhrRequest({
               method: "HEAD",
               url:
-                `/api/${resourceType}/?` +
+                `api/${resourceType}/?` +
                 m.buildQueryString({
                   filter: memoizedStringify(filter)
                 }),
@@ -433,7 +433,7 @@ export function fulfill(accessTimestamp, _fulfillTimestamp): Promise<boolean> {
               xhrRequest({
                 method: "GET",
                 url:
-                  `/api/${resourceType}/?` +
+                  `api/${resourceType}/?` +
                   m.buildQueryString({
                     filter: memoizedStringify(filter),
                     limit: 1,
@@ -526,7 +526,7 @@ export function fulfill(accessTimestamp, _fulfillTimestamp): Promise<boolean> {
               xhrRequest({
                 method: "GET",
                 url:
-                  `/api/${resourceType}/?` +
+                  `api/${resourceType}/?` +
                   m.buildQueryString({
                     filter: memoizedStringify(combinedFilterDiff)
                   })
@@ -588,7 +588,7 @@ export function postTasks(deviceId, tasks): Promise<string> {
 
   return xhrRequest({
     method: "POST",
-    url: `/api/devices/${encodeURIComponent(deviceId)}/tasks`,
+    url: `api/devices/${encodeURIComponent(deviceId)}/tasks`,
     body: tasks,
     extract: xhr => {
       if (xhr.status !== 200) throw new Error(xhr.response);
@@ -609,7 +609,7 @@ export function postTasks(deviceId, tasks): Promise<string> {
 export function updateTags(deviceId, tags): Promise<void> {
   return xhrRequest({
     method: "POST",
-    url: `/api/devices/${encodeURIComponent(deviceId)}/tags`,
+    url: `api/devices/${encodeURIComponent(deviceId)}/tags`,
     body: tags
   });
 }
@@ -617,7 +617,7 @@ export function updateTags(deviceId, tags): Promise<void> {
 export function deleteResource(resourceType, id): Promise<void> {
   return xhrRequest({
     method: "DELETE",
-    url: `/api/${resourceType}/${encodeURIComponent(id)}`
+    url: `api/${resourceType}/${encodeURIComponent(id)}`
   });
 }
 
@@ -626,7 +626,7 @@ export function putResource(resourceType, id, object): Promise<void> {
 
   return xhrRequest({
     method: "PUT",
-    url: `/api/${resourceType}/${encodeURIComponent(id)}`,
+    url: `api/${resourceType}/${encodeURIComponent(id)}`,
     body: object
   });
 }
@@ -646,7 +646,7 @@ export function resourceExists(resource, id): Promise<number> {
   return xhrRequest({
     method: "HEAD",
     url:
-      `/api/${resource}/?` +
+      `api/${resource}/?` +
       m.buildQueryString({
         filter: memoizedStringify(filter)
       }),
@@ -669,7 +669,7 @@ export function changePassword(
   if (authPassword) body["authPassword"] = authPassword;
   return xhrRequest({
     method: "PUT",
-    url: `/api/users/${username}/password`,
+    url: `api/users/${username}/password`,
     background: true,
     body
   });
@@ -678,7 +678,7 @@ export function changePassword(
 export function logIn(username, password): Promise<void> {
   return xhrRequest({
     method: "POST",
-    url: "/login",
+    url: "login",
     background: true,
     body: { username, password }
   });
@@ -687,13 +687,13 @@ export function logIn(username, password): Promise<void> {
 export function logOut(): Promise<void> {
   return xhrRequest({
     method: "POST",
-    url: "/logout"
+    url: "logout"
   });
 }
 
 export function ping(host): Promise<{}> {
   return xhrRequest({
-    url: `/api/ping/${encodeURIComponent(host)}`,
+    url: `api/ping/${encodeURIComponent(host)}`,
     background: true
   });
 }

ui/users-page.ts

@@ -137,7 +137,7 @@ const getDownloadUrl = memoize(filter => {
   const cols = {};
   for (const attr of attributes) cols[attr.label] = attr.id;
 
-  return `/api/users.csv?${m.buildQueryString({
+  return `api/users.csv?${m.buildQueryString({
     filter: stringify(filter),
     columns: JSON.stringify(cols)
   })}`;

ui/virtual-parameters-page.ts

@@ -114,7 +114,7 @@ const formData = {
 const getDownloadUrl = memoize(filter => {
   const cols = {};
   for (const attr of attributes) cols[attr.label] = attr.id;
-  return `/api/virtualParameters.csv?${m.buildQueryString({
+  return `api/virtualParameters.csv?${m.buildQueryString({
     filter: stringify(filter),
     columns: JSON.stringify(cols)
   })}`;

ui/wizard-page.ts

@@ -21,7 +21,7 @@ import m, { ClosureComponent, Component } from "mithril";
 import * as notifications from "./notifications";
 
 export async function init(): Promise<{}> {
-  return m.request({ url: "/init" });
+  return m.request({ url: "init" });
 }
 
 export const component: ClosureComponent = (vnode): Component => {
@@ -82,12 +82,12 @@ export const component: ClosureComponent = (vnode): Component => {
 
               m.request({
                 method: "POST",
-                url: "/init",
+                url: "init",
                 body: opts
               })
                 .then(() => {
                   setTimeout(() => {
-                    m.request({ url: "/init" }).then(o => {
+                    m.request({ url: "init" }).then(o => {
                       e.target.disabled = false;
                       options = o;
                       notifications.push("success", "Initialization complete", {