Show table alerts for limited series or disabled formatting

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

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

@@ -1,4 +1,11 @@
-import { FC, ReactNode, useEffect, useId, useState } from "react";
+import {
+  FC,
+  ReactNode,
+  useEffect,
+  useId,
+  useLayoutEffect,
+  useState,
+} from "react";
 import {
   Table,
   Alert,
@@ -10,6 +17,7 @@ import {
   Group,
   Stack,
   Text,
+  Anchor,
 } from "@mantine/core";
 import { IconAlertTriangle, IconInfoCircle } from "@tabler/icons-react";
 import {
@@ -30,12 +38,13 @@ import { useSettings } from "../../state/settingsSlice";
 dayjs.extend(timezone);
 
 const maxFormattableSeries = 1000;
-const maxDisplayableSeries = 10000;
+const maxDisplayableSeries = 1000;
 
 const limitSeries = <S extends InstantSample | RangeSamples>(
-  series: S[]
+  series: S[],
+  limit: boolean
 ): S[] => {
-  if (series.length > maxDisplayableSeries) {
+  if (limit && series.length > maxDisplayableSeries) {
     return series.slice(0, maxDisplayableSeries);
   }
   return series;
@@ -49,6 +58,7 @@ export interface DataTableProps {
 
 const DataTable: FC<DataTableProps> = ({ expr, evalTime, retriggerIdx }) => {
   const [scale, setScale] = useState<string>("exponential");
+  const [limitResults, setLimitResults] = useState<boolean>(true);
 
   const { data, error, isFetching, isLoading, refetch } =
     useAPIQuery<InstantQueryResult>({
@@ -65,6 +75,10 @@ const DataTable: FC<DataTableProps> = ({ expr, evalTime, retriggerIdx }) => {
     expr !== "" && refetch();
   }, [retriggerIdx, refetch, expr, evalTime]);
 
+  useLayoutEffect(() => {
+    setLimitResults(true);
+  }, [data, isFetching]);
+
   const { useLocalTime } = useSettings();
 
   // Show a skeleton only on the first load, not on subsequent ones.
@@ -106,105 +120,133 @@ const DataTable: FC<DataTableProps> = ({ expr, evalTime, retriggerIdx }) => {
 
   const doFormat = result.length <= maxFormattableSeries;
 
+  console.log("rendering with", result.length, limitResults);
+
   return (
-    <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).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>
+    <>
+      {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.
+        </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>
-                        <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>
+                        {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 === "matrix" ? (
-            limitSeries<RangeSamples>(result).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>
+            ) : resultType === "string" ? (
+              <Table.Tr>
+                <Table.Td>String value</Table.Td>
+                <Table.Td>{result[1]}</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>
+            ) : (
+              <Alert
+                color="red"
+                title="Invalid query response"
+                icon={<IconAlertTriangle size={14} />}
+              >
+                Invalid result value type
+              </Alert>
+            )}
+          </Table.Tbody>
+        </Table>
+      </Box>
+    </>
   );
 };