gamzinav/prometheus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Calculate path prefix directly in initial settings Redux value (#14981)

Browse Source 
Without this, the page that is shown first renders once with an empty path
prefix value, since the settings update takes a render cycle to complete.
However, we only fetch certain data from the API exactly once for a given
page, and not for every re-render with changed path prefix value (and we
also wouldn't want to fetch it from the wrong location initially).

This duplicates the served endpoint list once more, but exporting them from
App.tsx would also have been dirty (hot reload only works when a file only
exports one component and nothing else, thus there'd be a linter warning).

Signed-off-by: Julius Volz <julius.volz@gmail.com>
This commit is contained in:
Julius Volz 2024-09-30 14:22:40 +02:00 committed by GitHub
parent b5569c4070
commit b826c43987
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 31 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
web/ui/mantine-ui/src/App.tsx
View File

@ -56,12 +56,11 @@ import TSDBStatusPage from "./pages/TSDBStatusPage";
import FlagsPage from "./pages/FlagsPage";
import ConfigPage from "./pages/ConfigPage";
import AgentPage from "./pages/AgentPage";
import { Suspense, useEffect } from "react";
import { Suspense } from "react";
import ErrorBoundary from "./components/ErrorBoundary";
import { ThemeSelector } from "./components/ThemeSelector";
import { Notifications } from "@mantine/notifications";
import { useAppDispatch } from "./state/hooks";
import { updateSettings, useSettings } from "./state/settingsSlice";
import { useSettings } from "./state/settingsSlice";
import SettingsMenu from "./components/SettingsMenu";
import ReadinessWrapper from "./components/ReadinessWrapper";
import NotificationsProvider from "./components/NotificationsProvider";
@ -172,37 +171,12 @@ const theme = createTheme({
},
});
// This dynamically/generically determines the pathPrefix by stripping the first known
// endpoint suffix from the window location path. It works out of the box for both direct
// hosting and reverse proxy deployments with no additional configurations required.
const getPathPrefix = (path: string) => {
if (path.endsWith("/")) {
path = path.slice(0, -1);
}
const pagePaths = [
...mainNavPages,
...allStatusPages,
{ path: "/agent" },
].map((p) => p.path);
const pagePath = pagePaths.find((p) => path.endsWith(p));
return path.slice(0, path.length - (pagePath || "").length);
};
const navLinkXPadding = "md";
function App() {
const [opened, { toggle }] = useDisclosure();
const pathPrefix = getPathPrefix(window.location.pathname);
const dispatch = useAppDispatch();
useEffect(() => {
dispatch(updateSettings({ pathPrefix }));
}, [pathPrefix, dispatch]);
const { agentMode, consolesLink } = useSettings();
const { agentMode, consolesLink, pathPrefix } = useSettings();
const navLinks = (
<>

30
web/ui/mantine-ui/src/state/settingsSlice.ts
View File

@ -4,7 +4,7 @@ import { initializeFromLocalStorage } from "./initializeFromLocalStorage";
interface Settings {
consolesLink: string | null;
lookbackDelta: string,
lookbackDelta: string;
agentMode: boolean;
ready: boolean;
pathPrefix: string;
@ -30,6 +30,32 @@ export const localStorageKeyEnableSyntaxHighlighting =
export const localStorageKeyEnableLinter = "settings.enableLinter";
export const localStorageKeyShowAnnotations = "settings.showAnnotations";
// This dynamically/generically determines the pathPrefix by stripping the first known
// endpoint suffix from the window location path. It works out of the box for both direct
// hosting and reverse proxy deployments with no additional configurations required.
const getPathPrefix = (path: string) => {
if (path.endsWith("/")) {
path = path.slice(0, -1);
}
const pagePaths = [
"/query",
"/alerts",
"/targets",
"/rules",
"/service-discovery",
"/status",
"/tsdb-status",
"/flags",
"/config",
"/alertmanager-discovery",
"/agent",
];
const pagePath = pagePaths.find((p) => path.endsWith(p));
return path.slice(0, path.length - (pagePath || "").length);
};
export const initialState: Settings = {
consolesLink:
GLOBAL_CONSOLES_LINK === "CONSOLES_LINK_PLACEHOLDER" ||
@ -44,7 +70,7 @@ export const initialState: Settings = {
GLOBAL_LOOKBACKDELTA === null
? ""
: GLOBAL_LOOKBACKDELTA,
pathPrefix: "",
pathPrefix: getPathPrefix(window.location.pathname),
useLocalTime: initializeFromLocalStorage<boolean>(
localStorageKeyUseLocalTime,
false