mudhorn/prometheus
1
0
Fork 0
mirror of https://github.com/prometheus/prometheus.git synced 2024-12-25 05:34:05 -08:00
Code Issues Actions 3 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";
import SeriesName from "./SeriesName";
import { useAPIQuery } from "../../api/api";
import classes from "./DataTable.module.css";
const maxFormattableSeries = 1000;
const maxDisplayableSeries = 10000;
@ -102,7 +103,7 @@ const DataTable: FC<TableProps> = ({ expr, evalTime, retriggerIdx }) => {
const doFormat = result.length <= maxFormattableSeries;
return (
<Box pos="relative" mt="lg">
<Box pos="relative" className={classes.tableWrapper}>
<LoadingOverlay
visible={isFetching}
zIndex={1000}
@ -120,7 +121,7 @@ const DataTable: FC<TableProps> = ({ expr, evalTime, retriggerIdx }) => {
<Table.Td>
<SeriesName labels={s.metric} format={doFormat} />
</Table.Td>
<Table.Td>
<Table.Td className={classes.numberCell}>
{s.value && s.value[1]}
{s.histogram && "TODO HISTOGRAM DISPLAY"}
</Table.Td>
@ -132,7 +133,7 @@ const DataTable: FC<TableProps> = ({ expr, evalTime, retriggerIdx }) => {
<Table.Td>
<SeriesName labels={s.metric} format={doFormat} />
</Table.Td>
<Table.Td>
<Table.Td className={classes.numberCell}>
{s.values &&
s.values.map((v, idx) => (
<div key={idx}>
@ -145,7 +146,7 @@ const DataTable: FC<TableProps> = ({ expr, evalTime, retriggerIdx }) => {
) : resultType === "scalar" ? (
<Table.Tr>
<Table.Td>Scalar value</Table.Td>
<Table.Td>{result[1]}</Table.Td>
<Table.Td className={classes.numberCell}>{result[1]}</Table.Td>
</Table.Tr>
) : resultType === "string" ? (
<Table.Tr>
@ -157,9 +158,6 @@ const DataTable: FC<TableProps> = ({ expr, evalTime, retriggerIdx }) => {
color="red"
title="Invalid query response"
icon={<IconAlertTriangle size={14} />}
maw={500}
mx="auto"
mt="lg"
>
Invalid result value type
</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 {
GraphDisplayMode,
removePanel,
setExpr,
setVisualizer,
} from "../../state/queryPageSlice";
@ -44,7 +45,7 @@ const QueryPanel: FC<PanelProps> = ({ idx }) => {
const dispatch = useAppDispatch();
return (
<Stack gap={0} mt="sm">
<Stack gap="lg" mt="sm">
<ExpressionInput
initialExpr={panel.expr}
executeQuery={(expr: string) => {
@ -52,7 +53,7 @@ const QueryPanel: FC<PanelProps> = ({ idx }) => {
dispatch(setExpr({ idx, expr }));
}}
/>
<Tabs mt="md" defaultValue="table" keepMounted={false}>
<Tabs defaultValue="table" keepMounted={false}>
<Tabs.List>
<Tabs.Tab value="table" leftSection={<IconTable style={iconStyle} />}>
Table
@ -61,7 +62,7 @@ const QueryPanel: FC<PanelProps> = ({ idx }) => {
Graph
</Tabs.Tab>
</Tabs.List>
<Tabs.Panel p="sm" value="table">
<Tabs.Panel pt="sm" value="table">
<Stack gap="lg" mt="sm">
<TimeInput
time={panel.visualizer.endTime}
@ -84,7 +85,7 @@ const QueryPanel: FC<PanelProps> = ({ idx }) => {
</Stack>
</Tabs.Panel>
<Tabs.Panel
p="sm"
pt="sm"
value="graph"
// style={{ border: "1px solid lightgrey", borderTop: "none" }}
>