mudhorn/prometheus
1
0
Fork 0
mirror of https://github.com/prometheus/prometheus.git synced 2025-01-12 06:17: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 (
<>
<Card p="xs" className={codeboxClasses.codebox} radius="sm" shadow="none">
<Card p="xs" className={codeboxClasses.codebox} shadow="xs">
<CodeMirror
basicSetup={false}
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 = () => {
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">
<IconSpy size={22} />
<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
code={yaml}
language="yaml"
miw="30vw"
miw="50vw"
w="fit-content"
maw="calc(100vw - 75px)"
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 (
<Card shadow="xs" maw={1000} mx="auto" mt="lg" withBorder>
<Card shadow="xs" maw={1000} mx="auto" mt="xs" withBorder>
<TextInput
placeholder="Filter by flag name or value"
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` });
return (
<>
<Stack mt="xs">
{data.data.groups.map((g, i) => (
<Card
shadow="xs"
withBorder
radius="md"
p="md"
mb="md"
key={i} // TODO: Find a stable and definitely unique key.
@ -153,6 +152,6 @@ export default function RulesPage() {
</Table>
</Card>
))}
</>
</Stack>
);
}

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

@ -36,8 +36,8 @@ export default function StatusPage() {
});
return (
<Stack gap="lg" maw={1000} mx="auto" mt="lg">
<Card shadow="xs" withBorder radius="md" p="md">
<Stack gap="lg" maw={1000} mx="auto" mt="xs">
<Card shadow="xs" withBorder p="md">
<Group wrap="nowrap" align="center" ml="xs" mb="sm" gap="xs">
<IconWall size={22} />
<Text fz="xl" fw={600}>
@ -55,7 +55,7 @@ export default function StatusPage() {
</Table.Tbody>
</Table>
</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">
<IconRun size={22} />
<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 (
<Stack gap="lg" maw={1000} mx="auto" mt="lg">
<Stack gap="lg" maw={1000} mx="auto" mt="xs">
{[
{
title: "TSDB Head Status",
@ -64,7 +64,7 @@ export default function TSDBStatusPage() {
formatAsCode: true,
},
].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">
<Text fz="xl" fw={600}>
{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 {
IconAlertCircle,
IconAlertTriangle,
@ -40,13 +40,12 @@ export default function QueryPage() {
const browserTime = new Date().getTime() / 1000;
const serverTime = timeResult.data.result[0];
console.log(browserTime, serverTime, Math.abs(browserTime - serverTime));
setTimeDelta(Math.abs(browserTime - serverTime));
}
}, [timeResult]);
return (
<>
<Box mt="xs">
<Stack gap="sm">
{metricNamesError && (
<Alert
@ -107,6 +106,6 @@ export default function QueryPage() {
>
Add query
</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();
return (
<Stack gap="lg" mt="sm">
<Stack gap="lg">
<ExpressionInput
initialExpr={panel.expr}
metricNames={metricNames}