mudhorn/prometheus
1
0
Fork 0
mirror of https://github.com/prometheus/prometheus.git synced 2025-01-12 14:27:27 -08:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

Make spacing, shadows, and radius sizes more consistent

Browse source 
Signed-off-by: Julius Volz <julius.volz@gmail.com>
This commit is contained in:
Julius Volz 2024-03-14 12:19:41 +01:00
parent 627826783c
commit 9fe8a5dba7
9 changed files with 16 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
web/ui/mantine-ui/src/RuleDefinition.tsx
View file

@ -22,7 +22,7 @@ const RuleDefinition: FC<{ rule: Rule }> = ({ rule }) => {
return ( return (
<> <>
<Card p="xs" className={codeboxClasses.codebox} radius="sm" shadow="none"> <Card p="xs" className={codeboxClasses.codebox} shadow="xs">
<CodeMirror <CodeMirror
basicSetup={false} basicSetup={false}
value={rule.query} value={rule.query}

2
web/ui/mantine-ui/src/pages/AgentPage.tsx
View file

@ -4,7 +4,7 @@ import { FC } from "react";
const AgentPage: FC = () => { const AgentPage: FC = () => {
return ( return (
<Card shadow="xs" withBorder radius="md" p="md"> <Card shadow="xs" withBorder p="md" mt="xs">
<Group wrap="nowrap" align="center" ml="xs" mb="sm" gap="xs"> <Group wrap="nowrap" align="center" ml="xs" mb="sm" gap="xs">
<IconSpy size={22} /> <IconSpy size={22} />
<Text fz="xl" fw={600}> <Text fz="xl" fw={600}>

4
web/ui/mantine-ui/src/pages/ConfigPage.tsx
View file

@ -13,11 +13,11 @@ export default function ConfigPage() {
<CodeHighlight <CodeHighlight
code={yaml} code={yaml}
language="yaml" language="yaml"
miw="30vw" miw="50vw"
w="fit-content" w="fit-content"
maw="calc(100vw - 75px)" maw="calc(100vw - 75px)"
mx="auto" mx="auto"
mt="lg" mt="xs"
/> />
); );
} }

2
web/ui/mantine-ui/src/pages/FlagsPage.tsx
View file

@ -124,7 +124,7 @@ export default function FlagsPage() {
)); ));
return ( return (
<Card shadow="xs" maw={1000} mx="auto" mt="lg" withBorder> <Card shadow="xs" maw={1000} mx="auto" mt="xs" withBorder>
<TextInput <TextInput
placeholder="Filter by flag name or value" placeholder="Filter by flag name or value"
mb="md" mb="md"

5
web/ui/mantine-ui/src/pages/RulesPage.tsx
View file

@ -31,12 +31,11 @@ export default function RulesPage() {
const { data } = useSuspenseAPIQuery<RulesMap>({ path: `/rules` }); const { data } = useSuspenseAPIQuery<RulesMap>({ path: `/rules` });
return ( return (
<> <Stack mt="xs">
{data.data.groups.map((g, i) => ( {data.data.groups.map((g, i) => (
<Card <Card
shadow="xs" shadow="xs"
withBorder withBorder
radius="md"
p="md" p="md"
mb="md" mb="md"
key={i} // TODO: Find a stable and definitely unique key. key={i} // TODO: Find a stable and definitely unique key.
@ -153,6 +152,6 @@ export default function RulesPage() {
</Table> </Table>
</Card> </Card>
))} ))}
</> </Stack>
); );
} }

6
web/ui/mantine-ui/src/pages/StatusPage.tsx
View file

@ -36,8 +36,8 @@ export default function StatusPage() {
}); });
return ( return (
<Stack gap="lg" maw={1000} mx="auto" mt="lg"> <Stack gap="lg" maw={1000} mx="auto" mt="xs">
<Card shadow="xs" withBorder radius="md" p="md"> <Card shadow="xs" withBorder p="md">
<Group wrap="nowrap" align="center" ml="xs" mb="sm" gap="xs"> <Group wrap="nowrap" align="center" ml="xs" mb="sm" gap="xs">
<IconWall size={22} /> <IconWall size={22} />
<Text fz="xl" fw={600}> <Text fz="xl" fw={600}>
@ -55,7 +55,7 @@ export default function StatusPage() {
</Table.Tbody> </Table.Tbody>
</Table> </Table>
</Card> </Card>
<Card shadow="xs" withBorder radius="md" p="md"> <Card shadow="xs" withBorder p="md">
<Group wrap="nowrap" align="center" ml="xs" mb="sm" gap="xs"> <Group wrap="nowrap" align="center" ml="xs" mb="sm" gap="xs">
<IconRun size={22} /> <IconRun size={22} />
<Text fz="xl" fw={600}> <Text fz="xl" fw={600}>

4
web/ui/mantine-ui/src/pages/TSDBStatusPage.tsx
View file

@ -35,7 +35,7 @@ export default function TSDBStatusPage() {
]; ];
return ( return (
<Stack gap="lg" maw={1000} mx="auto" mt="lg"> <Stack gap="lg" maw={1000} mx="auto" mt="xs">
{[ {[
{ {
title: "TSDB Head Status", title: "TSDB Head Status",
@ -64,7 +64,7 @@ export default function TSDBStatusPage() {
formatAsCode: true, formatAsCode: true,
}, },
].map(({ title, unit = "Count", stats, formatAsCode }) => ( ].map(({ title, unit = "Count", stats, formatAsCode }) => (
<Card shadow="xs" withBorder radius="md" p="md"> <Card shadow="xs" withBorder p="md">
<Group wrap="nowrap" align="center" ml="xs" mb="sm" gap="xs"> <Group wrap="nowrap" align="center" ml="xs" mb="sm" gap="xs">
<Text fz="xl" fw={600}> <Text fz="xl" fw={600}>
{title} {title}

7
web/ui/mantine-ui/src/pages/query/QueryPage.tsx
View file

@ -1,4 +1,4 @@
import { Alert, Button, Notification, Stack, rem } from "@mantine/core"; import { Alert, Box, Button, Notification, Stack, rem } from "@mantine/core";
import { import {
IconAlertCircle, IconAlertCircle,
IconAlertTriangle, IconAlertTriangle,
@ -40,13 +40,12 @@ export default function QueryPage() {
const browserTime = new Date().getTime() / 1000; const browserTime = new Date().getTime() / 1000;
const serverTime = timeResult.data.result[0]; const serverTime = timeResult.data.result[0];
console.log(browserTime, serverTime, Math.abs(browserTime - serverTime));
setTimeDelta(Math.abs(browserTime - serverTime)); setTimeDelta(Math.abs(browserTime - serverTime));
} }
}, [timeResult]); }, [timeResult]);
return ( return (
<> <Box mt="xs">
<Stack gap="sm"> <Stack gap="sm">
{metricNamesError && ( {metricNamesError && (
<Alert <Alert
@ -107,6 +106,6 @@ export default function QueryPage() {
> >
Add query Add query
</Button> </Button>
</> </Box>
); );
} }

2
web/ui/mantine-ui/src/pages/query/QueryPanel.tsx
View file

@ -47,7 +47,7 @@ const QueryPanel: FC<PanelProps> = ({ idx, metricNames }) => {
const dispatch = useAppDispatch(); const dispatch = useAppDispatch();
return ( return (
<Stack gap="lg" mt="sm"> <Stack gap="lg">
<ExpressionInput <ExpressionInput
initialExpr={panel.expr} initialExpr={panel.expr}
metricNames={metricNames} metricNames={metricNames}