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