mirrors/prometheus
1
0
Fork 0
mirror of https://github.com/prometheus/prometheus.git synced 2025-11-28 22:21:21 +01:00
Code Issues Projects Releases Wiki Activity

Nav link size cleanups

Browse Source 
Signed-off-by: Julius Volz <julius.volz@gmail.com>
This commit is contained in:
Julius Volz 2024-03-14 12:04:24 +01:00
parent e29ad4a83b
commit 143917cfe0
1 changed files with 16 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -68,17 +68,19 @@ import { updateSettings } from "./state/settingsSlice";
const queryClient = new QueryClient(); const queryClient = new QueryClient();
const navIconStyle = { width: rem(15), height: rem(15) };
const mainNavPages = [ const mainNavPages = [
{ {
title: "Query", title: "Query",
path: "/query", path: "/query",
icon: <IconDatabaseSearch style={{ width: rem(14), height: rem(14) }} />, icon: <IconDatabaseSearch style={navIconStyle} />,
element: <QueryPage />, element: <QueryPage />,
}, },
{ {
title: "Alerts", title: "Alerts",
path: "/alerts", path: "/alerts",
icon: <IconBellFilled style={{ width: rem(14), height: rem(14) }} />, icon: <IconBellFilled style={navIconStyle} />,
element: <AlertsPage />, element: <AlertsPage />,
}, },
]; ];
@ -87,21 +89,19 @@ const monitoringStatusPages = [
{ {
title: "Targets", title: "Targets",
path: "/targets", path: "/targets",
icon: <IconHeartRateMonitor style={{ width: rem(14), height: rem(14) }} />, icon: <IconHeartRateMonitor style={navIconStyle} />,
element: <TargetsPage />, element: <TargetsPage />,
}, },
{ {
title: "Rules", title: "Rules",
path: "/rules", path: "/rules",
icon: <IconTable style={{ width: rem(14), height: rem(14) }} />, icon: <IconTable style={navIconStyle} />,
element: <RulesPage />, element: <RulesPage />,
}, },
{ {
title: "Service discovery", title: "Service discovery",
path: "/service-discovery", path: "/service-discovery",
icon: ( icon: <IconCloudDataConnection style={navIconStyle} />,
<IconCloudDataConnection style={{ width: rem(14), height: rem(14) }} />
),
element: <ServiceDiscoveryPage />, element: <ServiceDiscoveryPage />,
}, },
]; ];
@ -110,25 +110,25 @@ const serverStatusPages = [
{ {
title: "Runtime & build information", title: "Runtime & build information",
path: "/status", path: "/status",
icon: <IconInfoCircle style={{ width: rem(14), height: rem(14) }} />, icon: <IconInfoCircle style={navIconStyle} />,
element: <StatusPage />, element: <StatusPage />,
}, },
{ {
title: "TSDB status", title: "TSDB status",
path: "/tsdb-status", path: "/tsdb-status",
icon: <IconDatabase style={{ width: rem(14), height: rem(14) }} />, icon: <IconDatabase style={navIconStyle} />,
element: <TSDBStatusPage />, element: <TSDBStatusPage />,
}, },
{ {
title: "Command-line flags", title: "Command-line flags",
path: "/flags", path: "/flags",
icon: <IconFlag style={{ width: rem(14), height: rem(14) }} />, icon: <IconFlag style={navIconStyle} />,
element: <FlagsPage />, element: <FlagsPage />,
}, },
{ {
title: "Configuration", title: "Configuration",
path: "/config", path: "/config",
icon: <IconServerCog style={{ width: rem(14), height: rem(14) }} />, icon: <IconServerCog style={navIconStyle} />,
element: <ConfigPage />, element: <ConfigPage />,
}, },
]; ];
@ -168,7 +168,6 @@ const getPathPrefix = (path: string) => {
return path.slice(0, path.length - pagePath.length); return path.slice(0, path.length - pagePath.length);
}; };
const navLinkIconSize = 15;
const navLinkXPadding = "md"; const navLinkXPadding = "md";
function App() { function App() {
@ -208,10 +207,10 @@ function App() {
to={p.path} to={p.path}
className={classes.link} className={classes.link}
leftSection={p.icon} leftSection={p.icon}
rightSection={<IconChevronDown size={navLinkIconSize} />} rightSection={<IconChevronDown style={navIconStyle} />}
px={navLinkXPadding} px={navLinkXPadding}
> >
Status <IconChevronRight size={navLinkIconSize} /> {p.title} Status <IconChevronRight style={navIconStyle} /> {p.title}
</Button> </Button>
</Menu.Target> </Menu.Target>
} }
@ -225,8 +224,8 @@ function App() {
component={NavLink} component={NavLink}
to="/" to="/"
className={classes.link} className={classes.link}
leftSection={<IconFileAnalytics size={navLinkIconSize} />} leftSection={<IconFileAnalytics style={navIconStyle} />}
rightSection={<IconChevronDown size={navLinkIconSize} />} rightSection={<IconChevronDown style={navIconStyle} />}
onClick={(e) => { onClick={(e) => {
e.preventDefault(); e.preventDefault();
}} }}
@ -271,7 +270,7 @@ function App() {
component="a" component="a"
href="https://prometheus.io/docs/prometheus/latest/getting_started/" href="https://prometheus.io/docs/prometheus/latest/getting_started/"
className={classes.link} className={classes.link}
leftSection={<IconHelp size={navLinkIconSize} />} leftSection={<IconHelp style={navIconStyle} />}
target="_blank" target="_blank"
px={navLinkXPadding} px={navLinkXPadding}
> >