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,7 +120,34 @@ const DataTable: FC<DataTableProps> = ({ expr, evalTime, retriggerIdx }) => {
 
   const doFormat = result.length <= maxFormattableSeries;
 
+  console.log("rendering with", result.length, limitResults);
+
   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.
+        </Alert>
+      )}
       <Box pos="relative" className={classes.tableWrapper}>
         <LoadingOverlay
           visible={isFetching}
@@ -120,7 +161,7 @@ const DataTable: FC<DataTableProps> = ({ expr, evalTime, retriggerIdx }) => {
         <Table fz="xs">
           <Table.Tbody>
             {resultType === "vector" ? (
-            limitSeries<InstantSample>(result).map((s, idx) => (
+              limitSeries<InstantSample>(result, limitResults).map((s, idx) => (
                 <Table.Tr key={idx}>
                   <Table.Td>
                     <SeriesName labels={s.metric} format={doFormat} />
@@ -160,7 +201,7 @@ const DataTable: FC<DataTableProps> = ({ expr, evalTime, retriggerIdx }) => {
                 </Table.Tr>
               ))
             ) : resultType === "matrix" ? (
-            limitSeries<RangeSamples>(result).map((s, idx) => (
+              limitSeries<RangeSamples>(result, limitResults).map((s, idx) => (
                 <Table.Tr key={idx}>
                   <Table.Td>
                     <SeriesName labels={s.metric} format={doFormat} />
@@ -205,6 +246,7 @@ const DataTable: FC<DataTableProps> = ({ expr, evalTime, retriggerIdx }) => {
           </Table.Tbody>
         </Table>
       </Box>
+    </>
   );
 };