mirrors/prometheus
1
0
Fork 0
mirror of https://github.com/prometheus/prometheus.git synced 2025-08-06 14:17:12 +02:00
Code Issues Projects Releases Wiki Activity

Fix full-page re-rendering when opening status nav menu (#16590)

Browse Source 
When opening the status pages menu while already viewing one of the
status pages, the whole page would be re-rendered because the menu target's
default action of following the current page's URL was not prevented. Also,
we don't need to use a NavLink component for the menu target when we are
not viewing a status page, because then the component won't need to be
highlighted anyways.

Discovered + fixed with the help of react-scan.

Signed-off-by: Julius Volz <julius.volz@gmail.com>
This commit is contained in:
Julius Volz 2025-05-12 12:17:18 +02:00 committed by GitHub
parent 5c06804df8
commit dbf5d01a62
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 7 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -224,6 +224,7 @@ function App() {
leftSection={p.icon} leftSection={p.icon}
rightSection={<IconChevronDown style={navIconStyle} />} rightSection={<IconChevronDown style={navIconStyle} />}
px={navLinkXPadding} px={navLinkXPadding}
onClick={(e) => e.preventDefault()}
> >
Status <IconChevronRight style={navIconStyle} /> {p.title} Status <IconChevronRight style={navIconStyle} /> {p.title}
</Button> </Button>
@ -236,14 +237,9 @@ function App() {
element={ element={
<Menu.Target> <Menu.Target>
<Button <Button
component={NavLink}
to="/"
className={classes.link} className={classes.link}
leftSection={<IconServer style={navIconStyle} />} leftSection={<IconServer style={navIconStyle} />}
rightSection={<IconChevronDown style={navIconStyle} />} rightSection={<IconChevronDown style={navIconStyle} />}
onClick={(e) => {
e.preventDefault();
}}
px={navLinkXPadding} px={navLinkXPadding}
> >
Status Status
@ -339,8 +335,12 @@ function App() {
> >
<Group gap={10} wrap="nowrap"> <Group gap={10} wrap="nowrap">
<img src={PrometheusLogo} height={30} /> <img src={PrometheusLogo} height={30} />
<Text hiddenFrom="sm" fz={20}>Prometheus</Text> <Text hiddenFrom="sm" fz={20}>
<Text visibleFrom="md" fz={20}>Prometheus</Text> Prometheus
</Text>
<Text visibleFrom="md" fz={20}>
Prometheus
</Text>
<Text fz={20}>{agentMode && "Agent"}</Text> <Text fz={20}>{agentMode && "Agent"}</Text>
</Group> </Group>
</Link> </Link>