mudhorn/prometheus
1
0
Fork 0
mirror of https://github.com/prometheus/prometheus.git synced 2025-03-05 20:59:13 -08:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

Fix a lot of styling in tree view and binop explain view

Browse source 
Signed-off-by: Julius Volz <julius.volz@gmail.com>
This commit is contained in:
Julius Volz 2024-09-08 20:53:44 +02:00
parent 91e93ab3cf
commit cdcd43af5b
2 changed files with 34 additions and 41 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

71
web/ui/mantine-ui/src/pages/query/ExplainViews/BinaryExpr/VectorVector.tsx
View file

@ -14,7 +14,6 @@ import {
Alert, Alert,
Anchor, Anchor,
Box, Box,
Button,
Group, Group,
List, List,
Switch, Switch,
@ -393,7 +392,9 @@ const VectorVectorBinaryExprExplainView: FC<
> >
Too many match groups to display, only showing{" "} Too many match groups to display, only showing{" "}
{Object.keys(matchGroups).length} out of {numGroups} groups. {Object.keys(matchGroups).length} out of {numGroups} groups.
<Anchor onClick={() => setMaxGroups(undefined)}> <br />
<br />
<Anchor fz="sm" onClick={() => setMaxGroups(undefined)}>
Show all groups Show all groups
</Anchor> </Anchor>
</Alert> </Alert>
@ -423,20 +424,6 @@ const VectorVectorBinaryExprExplainView: FC<
error, error,
} = mg; } = mg;
const noLHSMatches = lhs.length === 0;
const noRHSMatches = rhs.length === 0;
const groupColor = colorPool[mgIdx % colorPool.length];
const noMatchesColor = "#e0e0e0";
const lhsGroupColor = noLHSMatches
? noMatchesColor
: groupColor;
const rhsGroupColor = noRHSMatches
? noMatchesColor
: groupColor;
const resultGroupColor =
noLHSMatches || noRHSMatches ? noMatchesColor : groupColor;
const matchGroupTitleRow = (color: string) => ( const matchGroupTitleRow = (color: string) => (
<Table.Tr ta="center"> <Table.Tr ta="center">
<Table.Td <Table.Td
@ -455,16 +442,22 @@ const VectorVectorBinaryExprExplainView: FC<
colorOffset?: number colorOffset?: number
) => ( ) => (
<Box <Box
style={{ borderRadius: 3, border: `2px solid ${color}` }} style={{
borderRadius: 3,
border: "2px solid",
borderColor:
series.length === 0
? "light-dark(var(--mantine-color-gray-4), var(--mantine-color-gray-7))"
: color,
}}
> >
<Table fz="xs" withRowBorders={false} verticalSpacing={5}> <Table fz="xs" withRowBorders={false} verticalSpacing={5}>
<Table.Tbody> <Table.Tbody>
{series.length === 0 ? ( {series.length === 0 ? (
<Table.Tr> <Table.Tr>
<Table.Td <Table.Td
bg="gray.0"
ta="center" ta="center"
c="gray.6" c="light-dark(var(--mantine-color-gray-7), var(--mantine-color-gray-5))"
py="md" py="md"
fw="bold" fw="bold"
> >
@ -510,22 +503,15 @@ const VectorVectorBinaryExprExplainView: FC<
)} )}
{seriesCount > series.length && ( {seriesCount > series.length && (
<Table.Tr> <Table.Tr>
<Table.Td <Table.Td ta="center" py="md" fw="bold" c="gray.6">
bg="gray.0"
ta="center"
c="gray.6"
py="md"
fw="bold"
>
{seriesCount - series.length} more series omitted {seriesCount - series.length} more series omitted
– &nbsp;&nbsp;–&nbsp;&nbsp;
<Button <Anchor
size="sm" size="xs"
variant="link"
onClick={() => setMaxSeriesPerGroup(undefined)} onClick={() => setMaxSeriesPerGroup(undefined)}
> >
show all Show all series
</Button> </Anchor>
</Table.Td> </Table.Td>
</Table.Tr> </Table.Tr>
)} )}
@ -534,11 +520,16 @@ const VectorVectorBinaryExprExplainView: FC<
</Box> </Box>
); );
const lhsTable = matchGroupTable(lhs, lhsCount, lhsGroupColor); const noLHSMatches = lhs.length === 0;
const noRHSMatches = rhs.length === 0;
const groupColor = colorPool[mgIdx % colorPool.length];
const lhsTable = matchGroupTable(lhs, lhsCount, groupColor);
const rhsTable = matchGroupTable( const rhsTable = matchGroupTable(
rhs, rhs,
rhsCount, rhsCount,
rhsGroupColor, groupColor,
rhsColorOffset rhsColorOffset
); );
@ -546,7 +537,11 @@ const VectorVectorBinaryExprExplainView: FC<
<Box <Box
style={{ style={{
borderRadius: 3, borderRadius: 3,
border: `2px solid ${resultGroupColor}`, border: `2px solid`,
borderColor:
noLHSMatches || noRHSMatches || error !== null
? "light-dark(var(--mantine-color-gray-4), var(--mantine-color-gray-7))"
: groupColor,
}} }}
> >
<Table fz="xs" withRowBorders={false} verticalSpacing={5}> <Table fz="xs" withRowBorders={false} verticalSpacing={5}>
@ -554,9 +549,8 @@ const VectorVectorBinaryExprExplainView: FC<
{noLHSMatches || noRHSMatches ? ( {noLHSMatches || noRHSMatches ? (
<Table.Tr> <Table.Tr>
<Table.Td <Table.Td
bg="gray.0"
ta="center" ta="center"
c="gray.6" c="light-dark(var(--mantine-color-gray-7), var(--mantine-color-gray-5))"
py="md" py="md"
fw="bold" fw="bold"
> >
@ -566,9 +560,8 @@ const VectorVectorBinaryExprExplainView: FC<
) : error !== null ? ( ) : error !== null ? (
<Table.Tr> <Table.Tr>
<Table.Td <Table.Td
bg="gray.0"
ta="center" ta="center"
c="gray.6" c="light-dark(var(--mantine-color-gray-7), var(--mantine-color-gray-5))"
py="md" py="md"
fw="bold" fw="bold"
> >

4
web/ui/mantine-ui/src/pages/query/TreeNode.module.css
View file

@ -10,8 +10,8 @@
.nodeText.nodeTextSelected, .nodeText.nodeTextSelected,
.nodeText.nodeTextSelected:hover { .nodeText.nodeTextSelected:hover {
background-color: light-dark( background-color: light-dark(
var(--mantine-color-gray-3), var(--mantine-color-gray-4),
var(--mantine-color-dark-3) var(--mantine-color-gray-7)
); );
border: 2px solid border: 2px solid
light-dark(var(--mantine-color-gray-5), var(--mantine-color-dark-2)); light-dark(var(--mantine-color-gray-5), var(--mantine-color-dark-2));