From 1e523b204d8580ecb6c04d903ed735ffb1f231a2 Mon Sep 17 00:00:00 2001
From: Julius Volz <julius.volz@gmail.com>
Date: Thu, 7 Mar 2024 16:58:51 +0100
Subject: [PATCH] Improve query panel / data table layout and spacing

Signed-off-by: Julius Volz <julius.volz@gmail.com>
---
 .../mantine-ui/src/pages/query/DataTable.module.css  | 10 ++++++++++
 web/ui/mantine-ui/src/pages/query/DataTable.tsx      | 12 +++++-------
 web/ui/mantine-ui/src/pages/query/QueryPanel.tsx     |  9 +++++----
 3 files changed, 20 insertions(+), 11 deletions(-)
 create mode 100644 web/ui/mantine-ui/src/pages/query/DataTable.module.css

diff --git a/web/ui/mantine-ui/src/pages/query/DataTable.module.css b/web/ui/mantine-ui/src/pages/query/DataTable.module.css
new file mode 100644
index 0000000000..255173d9bd
--- /dev/null
+++ b/web/ui/mantine-ui/src/pages/query/DataTable.module.css
@@ -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;
+}
diff --git a/web/ui/mantine-ui/src/pages/query/DataTable.tsx b/web/ui/mantine-ui/src/pages/query/DataTable.tsx
index 3f1c371adf..550267088e 100644
--- a/web/ui/mantine-ui/src/pages/query/DataTable.tsx
+++ b/web/ui/mantine-ui/src/pages/query/DataTable.tsx
@@ -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>
diff --git a/web/ui/mantine-ui/src/pages/query/QueryPanel.tsx b/web/ui/mantine-ui/src/pages/query/QueryPanel.tsx
index 514135984a..a3ceecbe98 100644
--- a/web/ui/mantine-ui/src/pages/query/QueryPanel.tsx
+++ b/web/ui/mantine-ui/src/pages/query/QueryPanel.tsx
@@ -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" }}
         >