- {SHOW_SEVERITY_LEVELS && (
+ {globalConfig.get().showSeverityLevels && (
)}
diff --git a/src/config.tsx b/src/config.tsx
index adf292e7..f01e38bb 100644
--- a/src/config.tsx
+++ b/src/config.tsx
@@ -1,13 +1,75 @@
-export const BACKEND_URL = process.env.REACT_APP_BACKEND_URL || "";
-export const ENABLE_WEBSOCKETS_SUPPORT = process.env.REACT_APP_ENABLE_WEBSOCKETS_SUPPORT === "true" || false;
-export const BACKEND_WS_URL = process.env.REACT_APP_BACKEND_WS_URL || "";
-export const USE_SECURE_COOKIE = process.env.REACT_APP_USE_SECURE_COOKIE !== "false";
-export const DEBUG = process.env.REACT_APP_DEBUG === "true" || false;
-export const FRONTEND_VERSION = require('../package.json').version;
-export const API_VERSION = require('../package.json').apiVersion;
+// Config values that must be explicitly provided in runtime-config.json
+export interface RequiredConfigValues {
+ backendUrl: string;
+ cookieDomain: string;
+}
+
+// Config values that could be omitted in runtime-config.json and will be set to reasonable default values
+export interface OptionalConfigValues {
+ useSecureCookie: boolean;
+ showSeverityLevels: boolean;
+ enableWebsocketSupport: boolean;
+ backendWSUrl: string;
+ debug: boolean;
+ defaultAutoRefreshInterval: number;
+ realtimeServiceMaxRetries: number;
+ use24hTime: boolean;
+ timestampDateFormat: string;
+ timestampTimeFormat: string;
+ timestampTimeNoSeconds: string;
+ timestampTimezoneOffsetFormat: string;
+ timestampFormat: string;
+}
+
+export type EditableConfig = RequiredConfigValues & Partial
+
+export class Config {
+ // Fixed values
+ readonly apiVersion: string = require('../package.json').version;
+ readonly frontendVersion: string = require('../package.json').version;
+
+ // Required values
+ backendUrl: string;
+ cookieDomain: string;
+
+ // Optional values
+ backendWSUrl: string;
+ debug: boolean;
+ defaultAutoRefreshInterval: number;
+ enableWebsocketSupport: boolean;
+ showSeverityLevels: boolean;
+ useSecureCookie: boolean;
+ realtimeServiceMaxRetries: number;
+ timestampDateFormat: string;
+ timestampFormat: string;
+ timestampTimeFormat: string;
+ timestampTimeNoSeconds: string;
+ timestampTimezoneOffsetFormat: string;
+ use24hTime: boolean;
+
+ constructor(config: EditableConfig) {
-// Inspired by https://stackoverflow.com/a/8498668
-export const COOKIE_DOMAIN = process.env.REACT_APP_COOKIE_DOMAIN || document.createElement('a').hostname;
+ if (config.backendUrl !== undefined &&
+ config.cookieDomain !== undefined) {
+ this.backendUrl = config.backendUrl;
+ this.cookieDomain = config.cookieDomain;
+ } else throw new Error("Missing one or more of the required configuration values.")
+
+ this.useSecureCookie = config.useSecureCookie || process.env.REACT_APP_USE_SECURE_COOKIE !== "false";
+ this.showSeverityLevels = config.showSeverityLevels !== undefined ? config.showSeverityLevels : true;
+ this.backendWSUrl = config.backendWSUrl || process.env.REACT_APP_BACKEND_WS_URL || "";
+ this.debug = config.debug || process.env.REACT_APP_DEBUG === "true" || false;
+ this.defaultAutoRefreshInterval = config.defaultAutoRefreshInterval || refreshInterval;
+ this.enableWebsocketSupport = config.enableWebsocketSupport || process.env.REACT_APP_ENABLE_WEBSOCKETS_SUPPORT === "true" || false;
+ this.realtimeServiceMaxRetries = config.realtimeServiceMaxRetries || rtsRetries;
+ this.timestampFormat = config.timestampFormat || "{date} {time}{timezone_offset}";
+ this.timestampTimeNoSeconds = config.timestampTimeNoSeconds || "HH:mm";
+ this.timestampDateFormat = config.timestampDateFormat || "yyyy-MM-dd";
+ this.timestampTimeFormat = config.timestampTimeFormat || "HH:mm:ss";
+ this.timestampTimezoneOffsetFormat = config.timestampTimezoneOffsetFormat || "xxx";
+ this.use24hTime = config.use24hTime !== undefined ? config.use24hTime : true;
+ }
+}
let refreshInterval = 30;
if (process.env.REACT_APP_DEFAULT_AUTO_REFRESH_INTERVAL) {
@@ -15,37 +77,28 @@ if (process.env.REACT_APP_DEFAULT_AUTO_REFRESH_INTERVAL) {
if (parsedInterval > 0) refreshInterval = parsedInterval;
}
-export const DEFAULT_AUTO_REFRESH_INTERVAL = refreshInterval; // seconds
-
let rtsRetries = 7;
if (process.env.REACT_APP_REALTIME_SERVICE_MAX_RETRIES) {
const parsedRetries = Number.parseInt(process.env.REACT_APP_REALTIME_SERVICE_MAX_RETRIES);
if (parsedRetries > 0) rtsRetries = parsedRetries;
}
-// The number of times the realtime service will try to establish
-// a websocket connection, with exponential backoff, before declaring
-// it a failure, and stops retrying.
-export const REALTIME_SERVICE_MAX_RETRIES = rtsRetries;
-
-// Will be replaced by user-settable config later
-// NOTE: You need to update the TIMESTAMP_TIME_FORMAT
-// if you want timestamps to be 24h/AM-PM
-export const USE_24H_TIME = true;
-
-// The full timestamp format should include seconds and timezone offset
-// See here for format syntax: https://date-fns.org/v2.17.0/docs/format
-export const TIMESTAMP_DATE_FORMAT = "yyyy-MM-dd";
-export const TIMESTAMP_TIME_FORMAT = "HH:mm:ss";
-export const TIMESTAMP_TIME_NO_SECONDS = "HH:mm";
-export const TIMESTAMP_TIMEZONE_OFFSET_FORMAT = "xxx";
+export const defaultRequiredConfigValues: RequiredConfigValues = {
+ backendUrl: process.env.REACT_APP_BACKEND_URL || "",
+ cookieDomain: process.env.REACT_APP_COOKIE_DOMAIN || document.createElement('a').hostname
+}
-// String replacements are used on this format string to build
-// the timestamp. This allows for switching of time, and disabling
-// of timezone offset, etc.
-export const TIMESTAMP_FORMAT = "{date} {time}{timezone_offset}";
+class GlobalConfig {
+ config: Config = new Config(defaultRequiredConfigValues);
-// Flag used to toggle whether severity levels will be shown in the frontend or not
-export const SHOW_SEVERITY_LEVELS = true;
+ public get(): Config {
+ return this.config;
+ }
+ public set(value: EditableConfig) {
+ this.config = new Config(value);
+ }
+}
+export let globalConfig = new GlobalConfig();
+export const globalConfigUrl = "runtime-config.json";
diff --git a/src/index.tsx b/src/index.tsx
index 7be65725..4ffbfcda 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,19 +1,58 @@
-import React from "react";
+import React, {ReactElement} from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import * as serviceWorker from "./serviceWorker";
-import { AppProvider } from "./state/contexts";
-import { BrowserRouter } from "react-router-dom";
+import {AppProvider} from "./state/contexts";
+import {BrowserRouter} from "react-router-dom";
+import {defaultRequiredConfigValues, globalConfig, globalConfigUrl} from "./config";
+import api from "./api";
+
+// Before rendering, first fetch the global config:
+const app: ReactElement =
+
+
+
+
+
+
+console.log("index.tsx, fetching global config from", globalConfigUrl);
+
+fetch(
+ globalConfigUrl
+ , {
+ headers: {
+ 'Content-Type': 'application/json',
+ 'Accept': 'application/json'
+ }
+ }
+)
+ .then(response => response.json())
+ .then((response) => {
+ globalConfig.set({...response})
+ api.updateBaseUrl(response.backendUrl)
+ return app;
+ })
+ .then((reactElement: ReactElement) => {
+ ReactDOM.render(
+ reactElement,
+ document.getElementById("root"),
+ );
+ })
+ .catch(e => {
+ if (process.env.NODE_ENV === "development") {
+ globalConfig.set(defaultRequiredConfigValues)
+ api.updateBaseUrl(defaultRequiredConfigValues.backendUrl)
+ ReactDOM.render(
+ app,
+ document.getElementById("root"),
+ );
+ } else {
+ console.log(e);
+ }
+ })
+;
-ReactDOM.render(
-
-
-
-
- ,
- document.getElementById("root"),
-);
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
diff --git a/src/services/RealtimeService.ts b/src/services/RealtimeService.ts
index 26f9a656..b82eea62 100644
--- a/src/services/RealtimeService.ts
+++ b/src/services/RealtimeService.ts
@@ -1,4 +1,4 @@
-import { BACKEND_WS_URL, REALTIME_SERVICE_MAX_RETRIES } from "../config";
+import { globalConfig } from "../config";
import type { Incident } from "../api/types.d";
@@ -123,9 +123,9 @@ export class RealtimeService {
return;
}
- if (this.retries > REALTIME_SERVICE_MAX_RETRIES) {
+ if (this.retries > globalConfig.get().realtimeServiceMaxRetries) {
console.error(
- `[RealtimeService ${this.id}] refusing to connected, exceeded ${REALTIME_SERVICE_MAX_RETRIES} retires`,
+ `[RealtimeService ${this.id}] refusing to connected, exceeded ${globalConfig.get().realtimeServiceMaxRetries} retires`,
);
this.setState("failed");
return;
@@ -136,7 +136,7 @@ export class RealtimeService {
this.retries++;
- this.ws = new WebSocket(`${BACKEND_WS_URL}/open/`);
+ this.ws = new WebSocket(`${globalConfig.get().backendWSUrl}/open/`);
this.ws.onmessage = (event: MessageEvent) => {
const data = JSON.parse(event.data);
diff --git a/src/utils.tsx b/src/utils.tsx
index 2968e80c..9be4835f 100644
--- a/src/utils.tsx
+++ b/src/utils.tsx
@@ -5,20 +5,14 @@ import formatDistance from "date-fns/formatDistance";
// Api
import type {Incident, User, Token} from "./api/types.d";
-import api from "./api";
-import auth from "./auth";
// Config
-import {
- DEBUG,
- TIMESTAMP_FORMAT,
- TIMESTAMP_DATE_FORMAT,
- TIMESTAMP_TIME_FORMAT,
- TIMESTAMP_TIME_NO_SECONDS,
- TIMESTAMP_TIMEZONE_OFFSET_FORMAT,
-} from "./config";
+import { globalConfig } from "./config";
import {Destination, DestinationPK, KnownProperties, Media} from "./api/types.d";
+import api from "./api";
+import auth from "./auth";
+
export type ErrorType = string | Error;
export interface IncidentWithFormattedTimestamp extends Incident {
@@ -71,8 +65,7 @@ export function getPropertyByPath(obj: T, path: string): any {
return objectGetPropertyByPathArray(obj, path.split("."));
}
-// eslint-disable-next-line
-export const debuglog = DEBUG ? console.log.bind(null, "[DEBUG]") : () => {};
+export const debuglog = console.log.bind(null, "[DEBUG]");
export function identity(inp: T): T {
return inp;
@@ -180,17 +173,17 @@ export type FormatTimestampOptions = Partial<{
export function formatTimestamp(timestamp: Date | string, options?: FormatTimestampOptions): string {
const dateTimestamp = new Date(timestamp);
- let formatString = TIMESTAMP_FORMAT;
- formatString = formatString.replace("{date}", TIMESTAMP_DATE_FORMAT);
+ let formatString = globalConfig.get().timestampFormat;
+ formatString = formatString.replace("{date}", globalConfig.get().timestampDateFormat);
if (options?.withSeconds) {
- formatString = formatString.replace("{time}", TIMESTAMP_TIME_FORMAT);
+ formatString = formatString.replace("{time}", globalConfig.get().timestampTimeFormat);
} else {
- formatString = formatString.replace("{time}", TIMESTAMP_TIME_NO_SECONDS);
+ formatString = formatString.replace("{time}", globalConfig.get().timestampTimeNoSeconds);
}
if (options?.withTimezoneOffset) {
- formatString = formatString.replace("{timezone_offset}", TIMESTAMP_TIMEZONE_OFFSET_FORMAT);
+ formatString = formatString.replace("{timezone_offset}", globalConfig.get().timestampTimezoneOffsetFormat);
} else {
formatString = formatString.replace("{timezone_offset}", "");
}
diff --git a/src/views/incident/IncidentView.tsx b/src/views/incident/IncidentView.tsx
index 8522dfa0..5c57c6dd 100644
--- a/src/views/incident/IncidentView.tsx
+++ b/src/views/incident/IncidentView.tsx
@@ -17,7 +17,7 @@ import {useApiState} from "../../state/hooks";
import SelectedFilterProvider from "../../components/filterprovider";
import IncidentsProvider from "../../components/incidentsprovider";
import {Helmet} from "react-helmet";
-import {FRONTEND_VERSION, API_VERSION} from "../../config";
+import { globalConfig } from "../../config";
import {useBackground} from "../../hooks";
const IncidentComponent = ({ autoUpdateMethod }: { autoUpdateMethod: AutoUpdateMethod }) => {
@@ -77,14 +77,14 @@ const IncidentView: React.FC = () => {
{ isMetadataFetchError ?
- API {API_VERSION},
- frontend v.{FRONTEND_VERSION}
+ API {globalConfig.get().apiVersion},
+ frontend v.{globalConfig.get().frontendVersion}
:
Backend v.{backendVersion},
API {apiVersion},
- frontend v.{FRONTEND_VERSION}
+ frontend v.{globalConfig.get().frontendVersion}
}