mudhorn/prometheus
1
0
Fork 0
mirror of https://github.com/prometheus/prometheus.git synced 2024-11-13 17:14:05 -08:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

Minor style improvements for native histograms in table view (#14448)

Browse source 
Signed-off-by: Julius Volz <julius.volz@gmail.com>
This commit is contained in:
Julius Volz 2024-07-10 13:16:15 +02:00 committed by GitHub
parent 373f09796d
commit c21a18a8dd
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 14 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
web/ui/mantine-ui/src/pages/query/DataTable.module.css
View file

@ -8,16 +8,3 @@
text-align: right; text-align: right;
font-variant-numeric: tabular-nums; font-variant-numeric: tabular-nums;
} }
.histogramSummaryWrapper {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
}
.histogramSummary {
display: flex;
align-items: center;
gap: 1rem;
}

33
web/ui/mantine-ui/src/pages/query/DataTable.tsx
View file

@ -7,6 +7,8 @@ import {
LoadingOverlay, LoadingOverlay,
SegmentedControl, SegmentedControl,
ScrollArea, ScrollArea,
Group,
Stack,
} from "@mantine/core"; } from "@mantine/core";
import { IconAlertTriangle, IconInfoCircle } from "@tabler/icons-react"; import { IconAlertTriangle, IconInfoCircle } from "@tabler/icons-react";
import { import {
@ -125,22 +127,22 @@ const DataTable: FC<DataTableProps> = ({ expr, evalTime, retriggerIdx }) => {
<Table.Td className={classes.numberCell}> <Table.Td className={classes.numberCell}>
{s.value && s.value[1]} {s.value && s.value[1]}
{s.histogram && ( {s.histogram && (
<> <Stack>
<HistogramChart <HistogramChart
histogram={s.histogram[1]} histogram={s.histogram[1]}
index={idx} index={idx}
scale={scale} scale={scale}
/> />
<div className={classes.histogramSummaryWrapper}> <Group justify="space-between" align="center" p={10}>
<div className={classes.histogramSummary}> <Group align="center" gap="1rem">
<span> <span>
<strong>Total count:</strong> {s.histogram[1].count} <strong>Count:</strong> {s.histogram[1].count}
</span> </span>
<span> <span>
<strong>Sum:</strong> {s.histogram[1].sum} <strong>Sum:</strong> {s.histogram[1].sum}
</span> </span>
</div> </Group>
<div className={classes.histogramSummary}> <Group align="center" gap="1rem">
<span>x-axis scale:</span> <span>x-axis scale:</span>
<SegmentedControl <SegmentedControl
size={"xs"} size={"xs"}
@ -148,10 +150,10 @@ const DataTable: FC<DataTableProps> = ({ expr, evalTime, retriggerIdx }) => {
onChange={setScale} onChange={setScale}
data={["exponential", "linear"]} data={["exponential", "linear"]}
/> />
</div> </Group>
</div> </Group>
{histogramTable(s.histogram[1])} {histogramTable(s.histogram[1])}
</> </Stack>
)} )}
</Table.Td> </Table.Td>
</Table.Tr> </Table.Tr>
@ -203,14 +205,7 @@ const DataTable: FC<DataTableProps> = ({ expr, evalTime, retriggerIdx }) => {
}; };
const histogramTable = (h: Histogram): ReactNode => ( const histogramTable = (h: Histogram): ReactNode => (
<Table> <Table withTableBorder fz="xs">
<Table.Thead>
<Table.Tr>
<Table.Th style={{ textAlign: "center" }} colSpan={2}>
Bucket counts
</Table.Th>
</Table.Tr>
</Table.Thead>
<Table.Tbody <Table.Tbody
style={{ style={{
display: "flex", display: "flex",
@ -225,10 +220,10 @@ const histogramTable = (h: Histogram): ReactNode => (
justifyContent: "space-between", justifyContent: "space-between",
}} }}
> >
<Table.Th>Range</Table.Th> <Table.Th>Bucket range</Table.Th>
<Table.Th>Count</Table.Th> <Table.Th>Count</Table.Th>
</Table.Tr> </Table.Tr>
<ScrollArea w={"100%"} h={250}> <ScrollArea w={"100%"} h={265}>
{h.buckets?.map((b, i) => ( {h.buckets?.map((b, i) => (
<Table.Tr key={i}> <Table.Tr key={i}>
<Table.Td style={{ textAlign: "left" }}> <Table.Td style={{ textAlign: "left" }}>