Better top nav page titles, clickable Prometheus brand logo

Signed-off-by: Julius Volz <julius.volz@gmail.com>
This commit is contained in:
Julius Volz 2024-04-03 14:47:38 +02:00
parent b40a029599
commit c2eb4007bb

View file

@ -8,6 +8,7 @@ import PrometheusLogo from "./images/prometheus-logo.svg";
import { import {
ActionIcon, ActionIcon,
Affix, Affix,
Anchor,
AppShell, AppShell,
Box, Box,
Burger, Burger,
@ -44,6 +45,7 @@ import {
} from "@tabler/icons-react"; } from "@tabler/icons-react";
import { import {
BrowserRouter, BrowserRouter,
Link,
NavLink, NavLink,
Navigate, Navigate,
Route, Route,
@ -92,13 +94,13 @@ const mainNavPages = [
const monitoringStatusPages = [ const monitoringStatusPages = [
{ {
title: "Targets", title: "Target health",
path: "/targets", path: "/targets",
icon: <IconHeartRateMonitor style={navIconStyle} />, icon: <IconHeartRateMonitor style={navIconStyle} />,
element: <TargetsPage />, element: <TargetsPage />,
}, },
{ {
title: "Rules", title: "Rule health",
path: "/rules", path: "/rules",
icon: <IconTable style={navIconStyle} />, icon: <IconTable style={navIconStyle} />,
element: <RulesPage />, element: <RulesPage />,
@ -300,10 +302,15 @@ function App() {
<Group h="100%" px="md"> <Group h="100%" px="md">
<Group style={{ flex: 1 }} justify="space-between"> <Group style={{ flex: 1 }} justify="space-between">
<Group gap={65}> <Group gap={65}>
<Group gap={10}> <Link
<img src={PrometheusLogo} height={30} /> to="/"
<Text fz={20}>Prometheus{agentMode && " Agent"}</Text> style={{ textDecoration: "none", color: "white" }}
</Group> >
<Group gap={10}>
<img src={PrometheusLogo} height={30} />
<Text fz={20}>Prometheus{agentMode && " Agent"}</Text>
</Group>
</Link>
<Group gap={12} visibleFrom="sm"> <Group gap={12} visibleFrom="sm">
{navLinks} {navLinks}
</Group> </Group>