Refactor DataTable, record & show query stats

Signed-off-by: Julius Volz <julius.volz@gmail.com>

web/ui/mantine-ui/src/api/api.ts

@@ -22,10 +22,12 @@ const createQueryFn =
     pathPrefix,
     path,
     params,
+    recordResponseTime,
   }: {
     pathPrefix: string;
     path: string;
     params?: Record<string, string>;
+    recordResponseTime?: (time: number) => void;
   }) =>
   async ({ signal }: { signal: AbortSignal }) => {
     const queryString = params
@@ -33,6 +35,8 @@ const createQueryFn =
       : "";
 
     try {
+      const startTime = Date.now();
+
       const res = await fetch(
         `${pathPrefix}/${API_PATH}${path}${queryString}`,
         {
@@ -54,6 +58,10 @@ const createQueryFn =
 
       const apiRes = (await res.json()) as APIResponse<T>;
 
+      if (recordResponseTime) {
+        recordResponseTime(Date.now() - startTime);
+      }
+
       if (apiRes.status === "error") {
         throw new Error(
           apiRes.error !== undefined
@@ -84,6 +92,7 @@ type QueryOptions = {
   path: string;
   params?: Record<string, string>;
   enabled?: boolean;
+  recordResponseTime?: (time: number) => void;
 };
 
 export const useAPIQuery = <T>({
@@ -91,6 +100,7 @@ export const useAPIQuery = <T>({
   path,
   params,
   enabled,
+  recordResponseTime,
 }: QueryOptions) => {
   const { pathPrefix } = useSettings();
 
@@ -100,7 +110,7 @@ export const useAPIQuery = <T>({
     refetchOnWindowFocus: false,
     gcTime: 0,
     enabled,
-    queryFn: createQueryFn({ pathPrefix, path, params }),
+    queryFn: createQueryFn({ pathPrefix, path, params, recordResponseTime }),
   });
 };
 

web/ui/mantine-ui/src/pages/query/DataTable.tsx

@@ -35,6 +35,9 @@ import HistogramChart from "./HistogramChart";
 import { Histogram } from "../../types/types";
 import { bucketRangeString } from "./HistogramHelpers";
 import { useSettings } from "../../state/settingsSlice";
+import { useAppDispatch, useAppSelector } from "../../state/hooks";
+import { setVisualizer } from "../../state/queryPageSlice";
+import TimeInput from "./TimeInput";
 dayjs.extend(timezone);
 
 const maxFormattableSeries = 1000;
@@ -51,14 +54,21 @@ const limitSeries = <S extends InstantSample | RangeSamples>(
 };
 
 export interface DataTableProps {
-  expr: string;
-  evalTime: number | null;
+  panelIdx: number;
   retriggerIdx: number;
 }
 
-const DataTable: FC<DataTableProps> = ({ expr, evalTime, retriggerIdx }) => {
+const DataTable: FC<DataTableProps> = ({ panelIdx, retriggerIdx }) => {
   const [scale, setScale] = useState<string>("exponential");
   const [limitResults, setLimitResults] = useState<boolean>(true);
+  const [responseTime, setResponseTime] = useState<number>(0);
+
+  const { expr, visualizer } = useAppSelector(
+    (state) => state.queryPage.panels[panelIdx]
+  );
+  const dispatch = useAppDispatch();
+
+  const { endTime, range } = visualizer;
 
   const { data, error, isFetching, isLoading, refetch } =
     useAPIQuery<InstantQueryResult>({
@@ -66,14 +76,15 @@ const DataTable: FC<DataTableProps> = ({ expr, evalTime, retriggerIdx }) => {
       path: "/query",
       params: {
         query: expr,
-        time: `${(evalTime !== null ? evalTime : Date.now()) / 1000}`,
+        time: `${(endTime !== null ? endTime : Date.now()) / 1000}`,
       },
       enabled: expr !== "",
+      recordResponseTime: setResponseTime,
     });
 
   useEffect(() => {
     expr !== "" && refetch();
-  }, [retriggerIdx, refetch, expr, evalTime]);
+  }, [retriggerIdx, refetch, expr, endTime]);
 
   useLayoutEffect(() => {
     setLimitResults(true);
@@ -121,130 +132,179 @@ const DataTable: FC<DataTableProps> = ({ expr, evalTime, retriggerIdx }) => {
   const doFormat = result.length <= maxFormattableSeries;
 
   return (
-    <>
-      {limitResults &&
-        ["vector", "matrix"].includes(resultType) &&
-        result.length > maxDisplayableSeries && (
-          <Alert
-            color="red"
-            icon={<IconAlertTriangle size={14} />}
-            title="Showing limited results"
-          >
-            Fetched {data.data.result.length} metrics, only displaying first{" "}
-            {maxDisplayableSeries} for performance reasons.
-            <Anchor ml="md" fz="1em" onClick={() => setLimitResults(false)}>
-              Show all results
-            </Anchor>
-          </Alert>
-        )}
-      {!doFormat && (
-        <Alert
-          title="Formatting turned off"
-          icon={<IconInfoCircle size={14} />}
-        >
-          Showing more than {maxFormattableSeries} series, turning off label
-          formatting for performance reasons.
+    <Stack gap="lg" mt="sm">
+      {isLoading ? (
+        <Box>
+          {Array.from(Array(5), (_, i) => (
+            <Skeleton key={i} height={30} mb={15} />
+          ))}
+        </Box>
+      ) : data === undefined ? (
+        <Alert variant="transparent">No data queried yet</Alert>
+      ) : result.length === 0 ? (
+        <Alert title="Empty query result" icon={<IconInfoCircle size={14} />}>
+          This query returned no data.
         </Alert>
-      )}
-      <Box pos="relative" className={classes.tableWrapper}>
-        <LoadingOverlay
-          visible={isFetching}
-          zIndex={1000}
-          overlayProps={{ radius: "sm", blur: 1 }}
-          loaderProps={{
-            children: <Skeleton m={0} w="100%" h="100%" />,
-          }}
-          styles={{ loader: { width: "100%", height: "100%" } }}
-        />
-        <Table fz="xs">
-          <Table.Tbody>
-            {resultType === "vector" ? (
-              limitSeries<InstantSample>(result, limitResults).map((s, idx) => (
-                <Table.Tr key={idx}>
-                  <Table.Td>
-                    <SeriesName labels={s.metric} format={doFormat} />
-                  </Table.Td>
-                  <Table.Td className={classes.numberCell}>
-                    {s.value && s.value[1]}
-                    {s.histogram && (
-                      <Stack>
-                        <HistogramChart
-                          histogram={s.histogram[1]}
-                          index={idx}
-                          scale={scale}
-                        />
-                        <Group justify="space-between" align="center" p={10}>
-                          <Group align="center" gap="1rem">
-                            <span>
-                              <strong>Count:</strong> {s.histogram[1].count}
-                            </span>
-                            <span>
-                              <strong>Sum:</strong> {s.histogram[1].sum}
-                            </span>
-                          </Group>
-                          <Group align="center" gap="1rem">
-                            <span>x-axis scale:</span>
-                            <SegmentedControl
-                              size={"xs"}
-                              value={scale}
-                              onChange={setScale}
-                              data={["exponential", "linear"]}
-                            />
-                          </Group>
-                        </Group>
-                        {histogramTable(s.histogram[1])}
-                      </Stack>
-                    )}
-                  </Table.Td>
-                </Table.Tr>
-              ))
-            ) : resultType === "matrix" ? (
-              limitSeries<RangeSamples>(result, limitResults).map((s, idx) => (
-                <Table.Tr key={idx}>
-                  <Table.Td>
-                    <SeriesName labels={s.metric} format={doFormat} />
-                  </Table.Td>
-                  <Table.Td className={classes.numberCell}>
-                    {s.values &&
-                      s.values.map((v, idx) => (
-                        <div key={idx}>
-                          {v[1]}{" "}
-                          <Text
-                            span
-                            c="gray.7"
-                            size="1em"
-                            title={formatTimestamp(v[0], useLocalTime)}
-                          >
-                            @ {v[0]}
-                          </Text>
-                        </div>
-                      ))}
-                  </Table.Td>
-                </Table.Tr>
-              ))
-            ) : resultType === "scalar" ? (
-              <Table.Tr>
-                <Table.Td>Scalar value</Table.Td>
-                <Table.Td className={classes.numberCell}>{result[1]}</Table.Td>
-              </Table.Tr>
-            ) : resultType === "string" ? (
-              <Table.Tr>
-                <Table.Td>String value</Table.Td>
-                <Table.Td>{result[1]}</Table.Td>
-              </Table.Tr>
-            ) : (
+      ) : (
+        <>
+          <Group justify="space-between">
+            <TimeInput
+              time={endTime}
+              range={range}
+              description="Evaluation time"
+              onChangeTime={(time) =>
+                dispatch(
+                  setVisualizer({
+                    idx: panelIdx,
+                    visualizer: { ...visualizer, endTime: time },
+                  })
+                )
+              }
+            />
+            <Text size="xs" c="gray">
+              Load time: {responseTime}ms &ensp; Result series: {result.length}
+            </Text>
+          </Group>
+
+          {limitResults &&
+            ["vector", "matrix"].includes(resultType) &&
+            result.length > maxDisplayableSeries && (
               <Alert
                 color="red"
-                title="Invalid query response"
                 icon={<IconAlertTriangle size={14} />}
+                title="Showing limited results"
               >
-                Invalid result value type
+                Fetched {data.data.result.length} metrics, only displaying first{" "}
+                {maxDisplayableSeries} for performance reasons.
+                <Anchor ml="md" fz="1em" onClick={() => setLimitResults(false)}>
+                  Show all results
+                </Anchor>
               </Alert>
             )}
-          </Table.Tbody>
-        </Table>
-      </Box>
-    </>
+
+          {!doFormat && (
+            <Alert
+              title="Formatting turned off"
+              icon={<IconInfoCircle size={14} />}
+            >
+              Showing more than {maxFormattableSeries} series, turning off label
+              formatting for performance reasons.
+            </Alert>
+          )}
+
+          <Box pos="relative" className={classes.tableWrapper}>
+            <LoadingOverlay
+              visible={isFetching}
+              zIndex={1000}
+              overlayProps={{ radius: "sm", blur: 1 }}
+              loaderProps={{
+                children: <Skeleton m={0} w="100%" h="100%" />,
+              }}
+              styles={{ loader: { width: "100%", height: "100%" } }}
+            />
+
+            <Table fz="xs">
+              <Table.Tbody>
+                {resultType === "vector" ? (
+                  limitSeries<InstantSample>(result, limitResults).map(
+                    (s, idx) => (
+                      <Table.Tr key={idx}>
+                        <Table.Td>
+                          <SeriesName labels={s.metric} format={doFormat} />
+                        </Table.Td>
+                        <Table.Td className={classes.numberCell}>
+                          {s.value && s.value[1]}
+                          {s.histogram && (
+                            <Stack>
+                              <HistogramChart
+                                histogram={s.histogram[1]}
+                                index={idx}
+                                scale={scale}
+                              />
+                              <Group
+                                justify="space-between"
+                                align="center"
+                                p={10}
+                              >
+                                <Group align="center" gap="1rem">
+                                  <span>
+                                    <strong>Count:</strong>{" "}
+                                    {s.histogram[1].count}
+                                  </span>
+                                  <span>
+                                    <strong>Sum:</strong> {s.histogram[1].sum}
+                                  </span>
+                                </Group>
+                                <Group align="center" gap="1rem">
+                                  <span>x-axis scale:</span>
+                                  <SegmentedControl
+                                    size={"xs"}
+                                    value={scale}
+                                    onChange={setScale}
+                                    data={["exponential", "linear"]}
+                                  />
+                                </Group>
+                              </Group>
+                              {histogramTable(s.histogram[1])}
+                            </Stack>
+                          )}
+                        </Table.Td>
+                      </Table.Tr>
+                    )
+                  )
+                ) : resultType === "matrix" ? (
+                  limitSeries<RangeSamples>(result, limitResults).map(
+                    (s, idx) => (
+                      <Table.Tr key={idx}>
+                        <Table.Td>
+                          <SeriesName labels={s.metric} format={doFormat} />
+                        </Table.Td>
+                        <Table.Td className={classes.numberCell}>
+                          {s.values &&
+                            s.values.map((v, idx) => (
+                              <div key={idx}>
+                                {v[1]}{" "}
+                                <Text
+                                  span
+                                  c="gray.7"
+                                  size="1em"
+                                  title={formatTimestamp(v[0], useLocalTime)}
+                                >
+                                  @ {v[0]}
+                                </Text>
+                              </div>
+                            ))}
+                        </Table.Td>
+                      </Table.Tr>
+                    )
+                  )
+                ) : resultType === "scalar" ? (
+                  <Table.Tr>
+                    <Table.Td>Scalar value</Table.Td>
+                    <Table.Td className={classes.numberCell}>
+                      {result[1]}
+                    </Table.Td>
+                  </Table.Tr>
+                ) : resultType === "string" ? (
+                  <Table.Tr>
+                    <Table.Td>String value</Table.Td>
+                    <Table.Td>{result[1]}</Table.Td>
+                  </Table.Tr>
+                ) : (
+                  <Alert
+                    color="red"
+                    title="Invalid query response"
+                    icon={<IconAlertTriangle size={14} />}
+                  >
+                    Invalid result value type
+                  </Alert>
+                )}
+              </Table.Tbody>
+            </Table>
+          </Box>
+        </>
+      )}
+    </Stack>
   );
 };
 

web/ui/mantine-ui/src/pages/query/QueryPanel.tsx

@@ -84,26 +84,7 @@ const QueryPanel: FC<PanelProps> = ({ idx, metricNames }) => {
           </Tabs.Tab>
         </Tabs.List>
         <Tabs.Panel pt="sm" value="table">
-          <Stack gap="lg" mt="sm">
-            <TimeInput
-              time={panel.visualizer.endTime}
-              range={panel.visualizer.range}
-              description="Evaluation time"
-              onChangeTime={(time) =>
-                dispatch(
-                  setVisualizer({
-                    idx,
-                    visualizer: { ...panel.visualizer, endTime: time },
-                  })
-                )
-              }
-            />
-            <DataTable
-              expr={panel.expr}
-              evalTime={panel.visualizer.endTime}
-              retriggerIdx={retriggerIdx}
-            />
-          </Stack>
+          <DataTable panelIdx={idx} retriggerIdx={retriggerIdx} />
         </Tabs.Panel>
         <Tabs.Panel
           pt="sm"

web/ui/mantine-ui/src/pages/targets/TargetsPage.tsx

@@ -1,12 +1,4 @@
-import {
-  ActionIcon,
-  Box,
-  Checkbox,
-  Group,
-  Input,
-  Select,
-  Skeleton,
-} from "@mantine/core";
+import { ActionIcon, Box, Group, Input, Select, Skeleton } from "@mantine/core";
 import {
   IconLayoutNavbarCollapse,
   IconLayoutNavbarExpand,

web/ui/mantine-ui/src/state/queryPageSlice.ts

@@ -36,7 +36,7 @@ export const getEffectiveResolution = (
           : resolution.density === "medium"
             ? 250
             : 100;
-      return Math.max(Math.floor(range / factor), 1);
+      return Math.max(Math.floor(range / factor / 1000) * 1000, 1000);
     }
     case "fixed":
       return resolution.value;