Use infinite scroll in metrics explorer for faster rendering

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

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

@@ -9,6 +9,7 @@ import { IconCodePlus, IconCopy, IconZoomCode } from "@tabler/icons-react";
 import LabelsExplorer from "./LabelsExplorer";
 import { useDebouncedValue } from "@mantine/hooks";
 import classes from "./MetricsExplorer.module.css";
+import CustomInfiniteScroll from "../../../components/CustomInfiniteScroll";
 
 const fuz = new Fuzzy({
   pre: '<b style="color: rgb(0, 102, 191)">',
@@ -83,95 +84,100 @@ const MetricsExplorer: FC<MetricsExplorerProps> = ({
         }
         autoFocus
       />
-      <Table>
-        <Table.Thead>
-          <Table.Tr>
-            <Table.Th>Metric</Table.Th>
-            <Table.Th>Type</Table.Th>
-            <Table.Th>Help</Table.Th>
-          </Table.Tr>
-        </Table.Thead>
-        <Table.Tbody>
-          {searchMatches.map((m) => (
-            <Table.Tr key={m.original}>
-              <Table.Td>
-                <Group justify="space-between">
-                  {debouncedFilterText === "" ? (
-                    m.original
-                  ) : (
-                    <div
-                      dangerouslySetInnerHTML={{
-                        __html: sanitizeHTML(m.rendered, sanitizeOpts),
-                      }}
-                    />
-                  )}
-                  <Group gap="xs">
-                    <ActionIcon
-                      size="sm"
-                      color="gray"
-                      variant="light"
-                      title="Explore metric"
-                      onClick={() => {
-                        setSelectedMetric(m.original);
-                      }}
-                    >
-                      <IconZoomCode
-                        style={{ width: "70%", height: "70%" }}
-                        stroke={1.5}
-                      />
-                    </ActionIcon>
-                    <ActionIcon
-                      size="sm"
-                      color="gray"
-                      variant="light"
-                      title="Insert at cursor and close explorer"
-                      onClick={() => {
-                        insertText(m.original);
-                        close();
-                      }}
-                    >
-                      <IconCodePlus
-                        style={{ width: "70%", height: "70%" }}
-                        stroke={1.5}
-                      />
-                    </ActionIcon>
-                    <ActionIcon
-                      size="sm"
-                      color="gray"
-                      variant="light"
-                      title="Copy to clipboard"
-                      onClick={() => {
-                        navigator.clipboard.writeText(m.original);
-                      }}
-                    >
-                      <IconCopy
-                        style={{ width: "70%", height: "70%" }}
-                        stroke={1.5}
-                      />
-                    </ActionIcon>
-                  </Group>
-                </Group>
-              </Table.Td>
-              <Table.Td px="lg">
-                {getMeta(m.original).map((meta, idx) => (
-                  <React.Fragment key={idx}>
-                    <span className={classes.typeLabel}>{meta.type}</span>
-                    <br />
-                  </React.Fragment>
-                ))}
-              </Table.Td>
-              <Table.Td>
-                {getMeta(m.original).map((meta, idx) => (
-                  <React.Fragment key={idx}>
-                    <span className={classes.helpLabel}>{meta.help}</span>
-                    <br />
-                  </React.Fragment>
-                ))}
-              </Table.Td>
-            </Table.Tr>
-          ))}
-        </Table.Tbody>
-      </Table>
+      <CustomInfiniteScroll
+        allItems={searchMatches}
+        child={({ items }) => (
+          <Table>
+            <Table.Thead>
+              <Table.Tr>
+                <Table.Th>Metric</Table.Th>
+                <Table.Th>Type</Table.Th>
+                <Table.Th>Help</Table.Th>
+              </Table.Tr>
+            </Table.Thead>
+            <Table.Tbody>
+              {items.map((m) => (
+                <Table.Tr key={m.original}>
+                  <Table.Td>
+                    <Group justify="space-between">
+                      {debouncedFilterText === "" ? (
+                        m.original
+                      ) : (
+                        <div
+                          dangerouslySetInnerHTML={{
+                            __html: sanitizeHTML(m.rendered, sanitizeOpts),
+                          }}
+                        />
+                      )}
+                      <Group gap="xs">
+                        <ActionIcon
+                          size="sm"
+                          color="gray"
+                          variant="light"
+                          title="Explore metric"
+                          onClick={() => {
+                            setSelectedMetric(m.original);
+                          }}
+                        >
+                          <IconZoomCode
+                            style={{ width: "70%", height: "70%" }}
+                            stroke={1.5}
+                          />
+                        </ActionIcon>
+                        <ActionIcon
+                          size="sm"
+                          color="gray"
+                          variant="light"
+                          title="Insert at cursor and close explorer"
+                          onClick={() => {
+                            insertText(m.original);
+                            close();
+                          }}
+                        >
+                          <IconCodePlus
+                            style={{ width: "70%", height: "70%" }}
+                            stroke={1.5}
+                          />
+                        </ActionIcon>
+                        <ActionIcon
+                          size="sm"
+                          color="gray"
+                          variant="light"
+                          title="Copy to clipboard"
+                          onClick={() => {
+                            navigator.clipboard.writeText(m.original);
+                          }}
+                        >
+                          <IconCopy
+                            style={{ width: "70%", height: "70%" }}
+                            stroke={1.5}
+                          />
+                        </ActionIcon>
+                      </Group>
+                    </Group>
+                  </Table.Td>
+                  <Table.Td px="lg">
+                    {getMeta(m.original).map((meta, idx) => (
+                      <React.Fragment key={idx}>
+                        <span className={classes.typeLabel}>{meta.type}</span>
+                        <br />
+                      </React.Fragment>
+                    ))}
+                  </Table.Td>
+                  <Table.Td>
+                    {getMeta(m.original).map((meta, idx) => (
+                      <React.Fragment key={idx}>
+                        <span className={classes.helpLabel}>{meta.help}</span>
+                        <br />
+                      </React.Fragment>
+                    ))}
+                  </Table.Td>
+                </Table.Tr>
+              ))}
+            </Table.Tbody>
+          </Table>
+        )}
+      />
     </Stack>
   );
 };