mirror of
https://github.com/prometheus/prometheus.git
synced 2025-03-05 20:59:13 -08:00
95554074d8
* React UI: Support custom path prefixes The challenge was that the path prefix can be set dynamically as a flag on Prometheus, but the React app bundle is statically compiled in to expect a given path prefix. By adding a placeholder value to the React app's index.html and replacing it in Prometheus with the right path prefix during serving, this injects Prometheus's path prefix into the React app via a global const. Threading the path prefix into the different React components could have been done with React's Contexts (https://reactjs.org/docs/context.html), but I found the consumer side of context values to be a bit cumbersome (wrapping entire components in context consumers), so I ended up preferring direct threading of the path prefix values to components that needed them. Also, using contexts in tests is more verbose than just passing in path prefix values directly. Fixes https://github.com/prometheus/prometheus/issues/6163 Signed-off-by: Julius Volz <julius.volz@gmail.com> * Review feedback Signed-off-by: Julius Volz <julius.volz@gmail.com>
20 lines
790 B
TypeScript
Executable file
20 lines
790 B
TypeScript
Executable file
import './globals';
|
|
import React from 'react';
|
|
import ReactDOM from 'react-dom';
|
|
import App from './App';
|
|
import 'bootstrap/dist/css/bootstrap.min.css';
|
|
|
|
// Declared/defined in public/index.html, value replaced by Prometheus when serving bundle.
|
|
declare const PATH_PREFIX: string;
|
|
|
|
let prefix = PATH_PREFIX;
|
|
if (PATH_PREFIX === 'PATH_PREFIX_PLACEHOLDER' || PATH_PREFIX === '/') {
|
|
// Either we are running the app outside of Prometheus, so the placeholder value in
|
|
// the index.html didn't get replaced, or we have a '/' prefix, which we also need to
|
|
// normalize to '' to make concatenations work (prefixes like '/foo/bar/' already get
|
|
// their trailing slash stripped by Prometheus).
|
|
prefix = '';
|
|
}
|
|
|
|
ReactDOM.render(<App pathPrefix={prefix} />, document.getElementById('root'));
|