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

Improve query panel / data table layout and spacing

Browse source 
Signed-off-by: Julius Volz <julius.volz@gmail.com>
This commit is contained in:
Julius Volz 2024-03-07 16:58:51 +01:00
parent 2bb14c5787
commit 1e523b204d
3 changed files with 20 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -0,0 +1,10 @@
.tableWrapper {
border: 1px solid
light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-5));
border-radius: var(--mantine-radius-default);
}
.numberCell {
text-align: right;
font-variant-numeric: tabular-nums;
}

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

@ -8,6 +8,7 @@ import {
} from "../../api/responseTypes/query"; } from "../../api/responseTypes/query";
import SeriesName from "./SeriesName"; import SeriesName from "./SeriesName";
import { useAPIQuery } from "../../api/api"; import { useAPIQuery } from "../../api/api";
import classes from "./DataTable.module.css";
const maxFormattableSeries = 1000; const maxFormattableSeries = 1000;
const maxDisplayableSeries = 10000; const maxDisplayableSeries = 10000;
@ -102,7 +103,7 @@ const DataTable: FC<TableProps> = ({ expr, evalTime, retriggerIdx }) => {
const doFormat = result.length <= maxFormattableSeries; const doFormat = result.length <= maxFormattableSeries;
return ( return (
<Box pos="relative" mt="lg"> <Box pos="relative" className={classes.tableWrapper}>
<LoadingOverlay <LoadingOverlay
visible={isFetching} visible={isFetching}
zIndex={1000} zIndex={1000}
@ -120,7 +121,7 @@ const DataTable: FC<TableProps> = ({ expr, evalTime, retriggerIdx }) => {
<Table.Td> <Table.Td>
<SeriesName labels={s.metric} format={doFormat} /> <SeriesName labels={s.metric} format={doFormat} />
</Table.Td> </Table.Td>
<Table.Td> <Table.Td className={classes.numberCell}>
{s.value && s.value[1]} {s.value && s.value[1]}
{s.histogram && "TODO HISTOGRAM DISPLAY"} {s.histogram && "TODO HISTOGRAM DISPLAY"}
</Table.Td> </Table.Td>
@ -132,7 +133,7 @@ const DataTable: FC<TableProps> = ({ expr, evalTime, retriggerIdx }) => {
<Table.Td> <Table.Td>
<SeriesName labels={s.metric} format={doFormat} /> <SeriesName labels={s.metric} format={doFormat} />
</Table.Td> </Table.Td>
<Table.Td> <Table.Td className={classes.numberCell}>
{s.values && {s.values &&
s.values.map((v, idx) => ( s.values.map((v, idx) => (
<div key={idx}> <div key={idx}>
@ -145,7 +146,7 @@ const DataTable: FC<TableProps> = ({ expr, evalTime, retriggerIdx }) => {
) : resultType === "scalar" ? ( ) : resultType === "scalar" ? (
<Table.Tr> <Table.Tr>
<Table.Td>Scalar value</Table.Td> <Table.Td>Scalar value</Table.Td>
<Table.Td>{result[1]}</Table.Td> <Table.Td className={classes.numberCell}>{result[1]}</Table.Td>
</Table.Tr> </Table.Tr>
) : resultType === "string" ? ( ) : resultType === "string" ? (
<Table.Tr> <Table.Tr>
@ -157,9 +158,6 @@ const DataTable: FC<TableProps> = ({ expr, evalTime, retriggerIdx }) => {
color="red" color="red"
title="Invalid query response" title="Invalid query response"
icon={<IconAlertTriangle size={14} />} icon={<IconAlertTriangle size={14} />}
maw={500}
mx="auto"
mt="lg"
> >
Invalid result value type Invalid result value type
</Alert> </Alert>

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

@ -19,6 +19,7 @@ import { FC, useState } from "react";
import { useAppDispatch, useAppSelector } from "../../state/hooks"; import { useAppDispatch, useAppSelector } from "../../state/hooks";
import { import {
GraphDisplayMode, GraphDisplayMode,
removePanel,
setExpr, setExpr,
setVisualizer, setVisualizer,
} from "../../state/queryPageSlice"; } from "../../state/queryPageSlice";
@ -44,7 +45,7 @@ const QueryPanel: FC<PanelProps> = ({ idx }) => {
const dispatch = useAppDispatch(); const dispatch = useAppDispatch();
return ( return (
<Stack gap={0} mt="sm"> <Stack gap="lg" mt="sm">
<ExpressionInput <ExpressionInput
initialExpr={panel.expr} initialExpr={panel.expr}
executeQuery={(expr: string) => { executeQuery={(expr: string) => {
@ -52,7 +53,7 @@ const QueryPanel: FC<PanelProps> = ({ idx }) => {
dispatch(setExpr({ idx, expr })); dispatch(setExpr({ idx, expr }));
}} }}
/> />
<Tabs mt="md" defaultValue="table" keepMounted={false}> <Tabs defaultValue="table" keepMounted={false}>
<Tabs.List> <Tabs.List>
<Tabs.Tab value="table" leftSection={<IconTable style={iconStyle} />}> <Tabs.Tab value="table" leftSection={<IconTable style={iconStyle} />}>
Table Table
@ -61,7 +62,7 @@ const QueryPanel: FC<PanelProps> = ({ idx }) => {
Graph Graph
</Tabs.Tab> </Tabs.Tab>
</Tabs.List> </Tabs.List>
<Tabs.Panel p="sm" value="table"> <Tabs.Panel pt="sm" value="table">
<Stack gap="lg" mt="sm"> <Stack gap="lg" mt="sm">
<TimeInput <TimeInput
time={panel.visualizer.endTime} time={panel.visualizer.endTime}
@ -84,7 +85,7 @@ const QueryPanel: FC<PanelProps> = ({ idx }) => {
</Stack> </Stack>
</Tabs.Panel> </Tabs.Panel>
<Tabs.Panel <Tabs.Panel
p="sm" pt="sm"
value="graph" value="graph"
// style={{ border: "1px solid lightgrey", borderTop: "none" }} // style={{ border: "1px solid lightgrey", borderTop: "none" }}
> >