From d4cdae68bc56429d10ab1c7909eca573d162c057 Mon Sep 17 00:00:00 2001
From: Oliver Newland <onewland@gmail.com>
Date: Mon, 26 Oct 2026 15:26:01 -0700
Subject: [PATCH 1/3] feat(admin): Search all nodes in System Queries instead
 of picking a storage

System Queries made you pick a storage before a host, and the storage list
repeats every cluster under many names. The host field is now one
autocomplete across every node the admin knows about.

Picking a node still sends a storage that lists it, since the backend uses
the storage to find the cluster's credentials and validate the node, so
the backend is unchanged. Manual host entry keeps a storage picker for the
same reason.

The search understands hostnames: separators are optional, runs of words
can be typed as initials (eap for events-analytics-platform), and a typed
separator can skip the rest of a word (err-1 for errors-1). Results rank
word-start matches first, then closer word-break alignment, with
distributed nodes last, and the matched characters are highlighted. The
rules are written up in snuba/admin/static/utils/NODE_SEARCH.md.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
---
 .../clickhouse_queries/query_display.tsx      | 152 ++++----
 snuba/admin/static/select.tsx                 |  93 ++++-
 .../tests/clickhouse_queries/prefill.spec.tsx |  29 +-
 snuba/admin/static/tests/select.spec.tsx      |  88 +++++
 .../utils/clickhouse_node_utils.spec.tsx      | 222 +++++++++++
 snuba/admin/static/utils/NODE_SEARCH.md       |  87 +++++
 .../static/utils/clickhouse_node_utils.tsx    | 358 ++++++++++++++++++
 7 files changed, 949 insertions(+), 80 deletions(-)
 create mode 100644 snuba/admin/static/tests/select.spec.tsx
 create mode 100644 snuba/admin/static/tests/utils/clickhouse_node_utils.spec.tsx
 create mode 100644 snuba/admin/static/utils/NODE_SEARCH.md

diff --git a/snuba/admin/static/clickhouse_queries/query_display.tsx b/snuba/admin/static/clickhouse_queries/query_display.tsx
index 9e415999d69..e5fc15a41a9 100644
--- a/snuba/admin/static/clickhouse_queries/query_display.tsx
+++ b/snuba/admin/static/clickhouse_queries/query_display.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useMemo, useState } from "react";
 import Client from "SnubaAdmin/api_client";
 import QueryEditor from "SnubaAdmin/query_editor";
 import ExecuteButton from "SnubaAdmin/utils/execute_button";
@@ -24,7 +24,16 @@ import {
 import { COLORS, SECTION_HEADING_STYLE } from "SnubaAdmin/theme";
 import { PrefillWarning } from "SnubaAdmin/editor_panel";
 import { CustomSelect, getParamFromStorage } from "SnubaAdmin/select";
-import { getHostsForStorage, getErrorDomElement } from "SnubaAdmin/utils/clickhouse_node_utils";
+import {
+  NodeOption,
+  getAllNodes,
+  getErrorDomElement,
+  nodeMatchesSearch,
+  nodeSearchMatch,
+  nodeSelectItem,
+  rankNodes,
+  storageForNode,
+} from "SnubaAdmin/utils/clickhouse_node_utils";
 import { QueryHistoryEntry } from "SnubaAdmin/clickhouse_queries/query_history_entry";
 import {
   clearHashParams,
@@ -42,11 +51,13 @@ import {
 type QueryState = Partial<QueryRequest>;
 
 const HISTORY_KEY = "clickhouse_queries";
-// The storage's first node, to have a host ready as soon as a storage is
-// picked.
-function firstHost(nodeData: ClickhouseNodeData[], storage?: string) {
-  const [first] = getHostsForStorage(nodeData, storage);
-  return first ? parseHostPort(first.value) : {};
+// What picking a node sets on the query: the node, and a storage that lists
+// it so the backend can find its cluster.
+function queryForNode(node: NodeOption, preferredStorage?: string) {
+  return {
+    ...parseHostPort(node.value),
+    storage: storageForNode(node, preferredStorage),
+  };
 }
 
 function QueryDisplay(props: {
@@ -62,6 +73,7 @@ function QueryDisplay(props: {
     prefill !== null
   );
   const [nodeData, setNodeData] = useState<ClickhouseNodeData[]>([]);
+  const nodeOptions = useMemo(() => getAllNodes(nodeData), [nodeData]);
   // The host is filled in once the nodes arrive, so until then it isn't
   // flagged as missing.
   const [nodesLoaded, setNodesLoaded] = useState(false);
@@ -97,41 +109,36 @@ function QueryDisplay(props: {
     props.api.getClickhouseNodes().then((res) => {
       setNodeData(res);
       setNodesLoaded(true);
-      // A linked host the storage's node list doesn't know about can only be
-      // shown (and checked) via manual host entry.
+      const nodes = getAllNodes(res);
+      // A linked host no storage knows about can only be shown (and checked)
+      // via manual host entry.
       if (prefill?.host) {
         const hostPort = `${prefill.host}:${prefill.port}`;
-        const isListed = getHostsForStorage(res, prefill.storage).some(
-          (option) => option.value === hostPort
-        );
-        if (!isListed) {
+        const node = nodes.find((option) => option.value === hostPort);
+        if (node) {
+          setQuery((prevQuery) => ({
+            ...prevQuery,
+            ...queryForNode(node, prefill.storage),
+          }));
+        } else {
           setManualHostInput(hostPort);
           setClusterlessHost(true);
         }
       } else if (!prefill) {
-        // The saved storage comes back without a host.
-        setQuery((prevQuery) =>
-          prevQuery.host
-            ? prevQuery
-            : { ...prevQuery, ...firstHost(res, prevQuery.storage) }
-        );
+        // The node picked last time (the host select saves it).
+        const saved = getParamFromStorage("host");
+        const node = nodes.find((option) => option.value === saved);
+        if (node) {
+          setQuery((prevQuery) => ({ ...prevQuery, ...queryForNode(node) }));
+        }
       }
     });
   }, []);
 
+  // Only for manual host entry, where the storage picks the cluster whose
+  // credentials are used.
   function selectStorage(storage: string) {
-    setQuery((prevQuery) => {
-      // clear old host port
-      delete prevQuery.host;
-      delete prevQuery.port;
-
-      return {
-        ...prevQuery,
-        storage: storage,
-        // A typed host isn't replaced; it's up to the user.
-        ...(prevQuery.clusterless ? {} : firstHost(nodeData, storage)),
-      };
-    });
+    setQuery((prevQuery) => ({ ...prevQuery, storage }));
   }
 
   function setSudo(value: boolean) {
@@ -168,16 +175,15 @@ function QueryDisplay(props: {
     });
   }
 
-  function selectHost(hostString: string) {
-    const [host, portAsString] = hostString.split(":");
-
-    setQuery((prevQuery) => {
-      return {
-        ...prevQuery,
-        host: host,
-        port: parseInt(portAsString, 10),
-      };
-    });
+  function selectNode(hostPort: string) {
+    const node = nodeOptions.find((option) => option.value === hostPort);
+    if (!node) {
+      return;
+    }
+    setQuery((prevQuery) => ({
+      ...prevQuery,
+      ...queryForNode(node, prevQuery.storage),
+    }));
   }
 
   function updateQuerySql(sql: string) {
@@ -230,16 +236,22 @@ function QueryDisplay(props: {
 
   // The first thing still needed before the query can run, if any. It's
   // flagged on its field and explains why Execute is disabled.
-  const missing = !query.storage
-    ? "storage"
-    : !query.host || !query.port
-    ? "host"
+  // Picking a node also sets its storage, so only manual entry asks for one.
+  const missing =
+    query.clusterless && !query.storage
+      ? "storage"
+      : !query.host || !query.port
+      ? "host"
+      : !query.storage
+      ? "storage"
     : !query.sql
     ? "query"
     : null;
   const missingHint = {
     storage: "Select a storage to run the query.",
-    host: "Select a host to run the query.",
+    host: query.clusterless
+      ? "Enter a host to run the query."
+      : "Select a host to run the query.",
     query: "Write or pick a query to run.",
   };
   // What to flag on the page; Execute stays disabled either way.
@@ -292,22 +304,24 @@ function QueryDisplay(props: {
             </PrefillWarning>
           )}
           <div style={targetRowStyle}>
-            <div style={targetFieldStyle}>
-              <Text size="sm" fw={600}>
-                Storage
-              </Text>
-              <div style={flagged === "storage" ? needsInputStyle : undefined}>
-                <CustomSelect
-                  value={query.storage || ""}
-                  onChange={selectStorage}
-                  name="storage"
-                  options={nodeData.map((storage) => storage.storage_name)}
-                />
+            {query.clusterless && (
+              <div style={targetFieldStyle}>
+                <Text size="sm" fw={600}>
+                  Storage
+                </Text>
+                <div style={flagged === "storage" ? needsInputStyle : undefined}>
+                  <CustomSelect
+                    value={query.storage || ""}
+                    onChange={selectStorage}
+                    name="storage"
+                    options={nodeData.map((storage) => storage.storage_name)}
+                  />
+                </div>
+                {flagged === "storage" && (
+                  <p style={needsInputHintStyle}>{missingHint.storage}</p>
+                )}
               </div>
-              {flagged === "storage" && (
-                <p style={needsInputHintStyle}>{missingHint.storage}</p>
-              )}
-            </div>
+            )}
             <div style={targetFieldStyle}>
               {/* The manual-entry rules live in a tooltip so they don't
                   make the row taller. */}
@@ -349,15 +363,23 @@ function QueryDisplay(props: {
                 <>
                   <div style={flagged === "host" ? needsInputStyle : undefined}>
                     <CustomSelect
-                      disabled={!query.storage}
                       value={
                         query.host && query.port
                           ? `${query.host}:${query.port}`
                           : ""
                       }
-                      onChange={selectHost}
-                      name="Host"
-                      options={getHostsForStorage(nodeData, query.storage)}
+                      onChange={selectNode}
+                      name="host"
+                      options={nodeOptions.map(nodeSelectItem)}
+                      filter={(search, item) =>
+                        nodeMatchesSearch(search, item.value)
+                      }
+                      highlight={(search, value) =>
+                        nodeSearchMatch(search, value)?.indexes ?? null
+                      }
+                      sortOptions={(search) =>
+                        rankNodes(search, nodeOptions).map(nodeSelectItem)
+                      }
                     />
                   </div>
                   {flagged === "host" && (
diff --git a/snuba/admin/static/select.tsx b/snuba/admin/static/select.tsx
index 703dd9bcb1e..f2799b3b476 100644
--- a/snuba/admin/static/select.tsx
+++ b/snuba/admin/static/select.tsx
@@ -1,5 +1,5 @@
-import React, { forwardRef } from "react";
-import { Select, SelectItem, Group, Text } from '@mantine/core';
+import React, { createContext, forwardRef, useContext, useState } from "react";
+import { Select, SelectItem, Group, Mark, Text } from '@mantine/core';
 
 type SelectProps = {
   value: string;
@@ -7,11 +7,45 @@ type SelectProps = {
   disabled?: boolean;
   onChange: (value: string) => void;
   options: string[] | SelectItem[];
+  filter?: (search: string, item: SelectItem) => boolean;
+  // The indexes of the label's characters that match the search, to mark
+  // them in the dropdown, or null if none do.
+  highlight?: (search: string, value: string) => number[] | null;
+  // The options in the order to list them for the search.
+  sortOptions?: (search: string, options: SelectItem[]) => SelectItem[];
 }
 
 interface ItemProps extends React.ComponentPropsWithoutRef<'div'> {
   image: string;
   label: string;
+  value: string;
+  description?: string;
+}
+
+// The search's highlight for an item, by value. The dropdown renders items
+// itself, so this reaches them through context.
+const HighlightContext = createContext<
+  ((value: string) => number[] | null) | null
+>(null);
+
+function highlightLabel(label: string, indexes: number[] | null) {
+  if (!indexes || indexes.length === 0) {
+    return label;
+  }
+  const marked = new Set(indexes);
+  // Consecutive matched characters share one mark.
+  const runs: Array<{ text: string; marked: boolean }> = [];
+  Array.from(label).forEach((char, idx) => {
+    const last = runs[runs.length - 1];
+    if (last && last.marked === marked.has(idx)) {
+      last.text += char;
+    } else {
+      runs.push({ text: char, marked: marked.has(idx) });
+    }
+  });
+  return runs.map((run, idx) =>
+    run.marked ? <Mark key={idx}>{run.text}</Mark> : run.text
+  );
 }
 
 export function getParamFromStorage(key: string) {
@@ -20,27 +54,57 @@ export function getParamFromStorage(key: string) {
 }
 
 const SelectItem = forwardRef<HTMLDivElement, ItemProps>(
-  ({ image, label, ...others }: ItemProps, ref) => (
-    <div data-testid={"select-option"} ref={ref} {...others}>
-      <Group noWrap>
-        <div>
-          <Text size="sm">{label}</Text>
-        </div>
-      </Group>
-    </div>
-  )
+  ({ image, label, value, description, ...others }: ItemProps, ref) => {
+    const highlight = useContext(HighlightContext);
+    return (
+      <div data-testid={"select-option"} ref={ref} {...others}>
+        <Group noWrap>
+          <div>
+            <Text size="sm">
+              {highlightLabel(label, highlight ? highlight(value) : null)}
+            </Text>
+            {description && (
+              <Text size="xs" opacity={0.65}>
+                {description}
+              </Text>
+            )}
+          </div>
+        </Group>
+      </div>
+    );
+  }
 );
 
 export function CustomSelect(props: SelectProps) {
-  const {value, onChange, options, name, disabled} = props;
+  const {value, onChange, name, disabled, filter, highlight, sortOptions} =
+    props;
+  const [search, setSearch] = useState("");
   function updateStorage(value: string) {
     if (name) {
       localStorage.setItem(`select-${name}`, value);
     }
     onChange(value);
   }
-  options.sort();
+  // With the selected item's label in the box, the dropdown lists everything,
+  // so there's nothing to mark or rank by.
+  const selected = (props.options as Array<string | SelectItem>).find(
+    (option) => (typeof option === "string" ? option : option.value) === value
+  );
+  const selectedLabel =
+    typeof selected === "string" ? selected : selected?.label ?? selected?.value;
+  const activeSearch = search && search !== selectedLabel ? search : "";
+  const highlightValue =
+    highlight && activeSearch
+      ? (itemValue: string) => highlight(activeSearch, itemValue)
+      : null;
+  let options = props.options;
+  if (sortOptions) {
+    options = sortOptions(activeSearch, options as SelectItem[]);
+  } else {
+    options.sort();
+  }
   return (
+    <HighlightContext.Provider value={highlightValue}>
       <Select
       placeholder={`Select a ${name}`}
       searchable
@@ -51,7 +115,10 @@ export function CustomSelect(props: SelectProps) {
       nothingFound={`Could not find a matching ${name}`}
       onChange={updateStorage}
       data={options}
+      filter={filter}
+      onSearchChange={setSearch}
       data-testid={"select"}
       />
+    </HighlightContext.Provider>
   );
 }
diff --git a/snuba/admin/static/tests/clickhouse_queries/prefill.spec.tsx b/snuba/admin/static/tests/clickhouse_queries/prefill.spec.tsx
index aa258324a62..4e89a32396b 100644
--- a/snuba/admin/static/tests/clickhouse_queries/prefill.spec.tsx
+++ b/snuba/admin/static/tests/clickhouse_queries/prefill.spec.tsx
@@ -223,13 +223,38 @@ describe("QueryDisplay opened from a link", () => {
     expect(screen.queryByLabelText("Open editor")).toBeNull();
   });
 
-  it("fills in the first host for the saved storage", async () => {
-    localStorage.setItem("select-storage", "errors");
+  it("fills in the saved node", async () => {
+    localStorage.setItem("select-host", "clickhouse-01:9000");
     const api = renderWithHash("#system-queries");
     await waitFor(() => expect(api.getClickhouseNodes).toBeCalled());
     expect(await screen.findAllByDisplayValue("clickhouse-01:9000")).not.toHaveLength(0);
   });
 
+  it("sends a storage that lists the linked node", async () => {
+    const api = renderWithHash(
+      "#system-queries?query=SELECT%201&storage=transactions&host=clickhouse-01%3A9000"
+    );
+    await waitFor(() => expect(api.getClickhouseNodes).toBeCalled());
+    await screen.findAllByDisplayValue("clickhouse-01:9000");
+
+    fireEvent.click(screen.getByText("Execute Query"));
+    await waitFor(() => expect(api.executeSystemQuery).toBeCalled());
+    expect(api.executeSystemQuery.mock.calls[0][0]).toMatchObject({
+      storage: "errors",
+      host: "clickhouse-01",
+      port: 9000,
+    });
+  });
+
+  it("only asks for a storage with manual host entry", async () => {
+    const api = renderWithHash("#system-queries");
+    await waitFor(() => expect(api.getClickhouseNodes).toBeCalled());
+    expect(screen.queryByText("Storage")).toBeNull();
+
+    fireEvent.click(screen.getByText("Manual"));
+    expect(screen.getByText("Storage")).toBeTruthy();
+  });
+
   it("leaves the host empty for a link that doesn't name one", async () => {
     const api = renderWithHash("#system-queries?query=SELECT%201&storage=errors");
     await waitFor(() => expect(api.getClickhouseNodes).toBeCalled());
diff --git a/snuba/admin/static/tests/select.spec.tsx b/snuba/admin/static/tests/select.spec.tsx
new file mode 100644
index 00000000000..78bffee247e
--- /dev/null
+++ b/snuba/admin/static/tests/select.spec.tsx
@@ -0,0 +1,88 @@
+import React from "react";
+import { it, expect, describe, afterEach } from "@jest/globals";
+import { act, cleanup, render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { CustomSelect } from "SnubaAdmin/select";
+import {
+  getAllNodes,
+  nodeMatchesSearch,
+  nodeSearchMatch,
+  nodeSelectItem,
+  rankNodes,
+} from "SnubaAdmin/utils/clickhouse_node_utils";
+
+describe("CustomSelect", () => {
+  global.ResizeObserver = require("resize-observer-polyfill");
+  afterEach(cleanup);
+
+  const nodes = getAllNodes(
+    [
+      "snuba-events-analytics-platform-0-0",
+      "snuba-errors-0-0",
+      "snuba-generic-metrics-0-0",
+    ].map((host) => ({
+      storage_name: host,
+      local_table_name: "",
+      local_nodes: [{ host, port: 8123 }],
+      dist_nodes: [],
+      query_node: null as any,
+    }))
+  );
+  const options = nodes.map(nodeSelectItem);
+
+  function renderSelect(value = "") {
+    render(
+      <CustomSelect
+        value={value}
+        onChange={() => {}}
+        options={options}
+        filter={(search, item) => nodeMatchesSearch(search, item.value)}
+        highlight={(search, value) =>
+          nodeSearchMatch(search, value)?.indexes ?? null
+        }
+        sortOptions={(search) => rankNodes(search, nodes).map(nodeSelectItem)}
+      />
+    );
+    return screen.getByTestId("select");
+  }
+
+  it("marks the characters that match the search", async () => {
+    const input = renderSelect();
+    await act(async () => userEvent.type(input, "eap"));
+    const marks = document.querySelectorAll("mark");
+    expect(Array.from(marks, (mark) => mark.textContent)).toEqual([
+      "e",
+      "a",
+      "p",
+    ]);
+  });
+
+  it("marks a match across separators as one run", async () => {
+    const input = renderSelect();
+    await act(async () => userEvent.type(input, "0-0"));
+    const marks = document.querySelectorAll("mark");
+    expect(Array.from(marks, (mark) => mark.textContent)).toEqual([
+      "0-0",
+      "0-0",
+      "0-0",
+    ]);
+  });
+
+  it("lists the best matches first", async () => {
+    const input = renderSelect();
+    await act(async () => userEvent.type(input, "m"));
+    expect(
+      screen.getAllByTestId("select-option").map((item) => item.textContent)
+    ).toEqual([
+      "snuba-generic-metrics-0-0:8123snuba-generic-metrics-0-0",
+      "snuba-events-analytics-platform-0-0:8123snuba-events-analytics-platform-0-0",
+    ]);
+  });
+
+  it("marks nothing while the box shows the selected item", async () => {
+    const input = renderSelect(options[0].value);
+    await act(async () => userEvent.click(input));
+    expect(screen.getAllByTestId("select-option")).toHaveLength(3);
+    expect(document.querySelectorAll("mark")).toHaveLength(0);
+  });
+});
diff --git a/snuba/admin/static/tests/utils/clickhouse_node_utils.spec.tsx b/snuba/admin/static/tests/utils/clickhouse_node_utils.spec.tsx
new file mode 100644
index 00000000000..abd3fbcb8ef
--- /dev/null
+++ b/snuba/admin/static/tests/utils/clickhouse_node_utils.spec.tsx
@@ -0,0 +1,222 @@
+import { it, expect, describe } from "@jest/globals";
+import {
+  getAllNodes,
+  nodeMatchesSearch,
+  nodeSearchMatch,
+  rankNodes,
+  storageForNode,
+} from "SnubaAdmin/utils/clickhouse_node_utils";
+import { ClickhouseNodeData } from "SnubaAdmin/clickhouse_queries/types";
+
+function storage(
+  name: string,
+  local: string[],
+  dist: string[] = [],
+  query: string | null = null
+): ClickhouseNodeData {
+  const node = (host: string) => ({ host, port: 9000 });
+  return {
+    storage_name: name,
+    local_table_name: `${name}_local`,
+    local_nodes: local.map(node),
+    dist_nodes: dist.map(node),
+    query_node: query ? { host: query, port: 9001 } : (null as any),
+  };
+}
+
+describe("getAllNodes", () => {
+  it("lists each node once with every storage that knows it", () => {
+    const nodes = getAllNodes([
+      storage("errors_ro", ["errors-1"], [], "errors-query"),
+      storage("errors", ["errors-1"], ["errors-dist"], "errors-query"),
+      storage("spans", ["spans-1"]),
+    ]);
+    expect(nodes.map((node) => [node.value, node.label, node.storages])).toEqual([
+      ["errors-1:9000", "errors-1:9000", ["errors", "errors_ro"]],
+      ["errors-dist:9000", "errors-dist:9000 (distributed)", ["errors"]],
+      ["errors-query:9001", "errors-query:9001 (query node)", ["errors", "errors_ro"]],
+      ["spans-1:9000", "spans-1:9000", ["spans"]],
+    ]);
+  });
+
+  it("doesn't call a node distributed if it's also local", () => {
+    const [node] = getAllNodes([storage("errors", ["h"], ["h"])]);
+    expect(node.label).toBe("h:9000");
+  });
+
+  it("summarizes long storage lists", () => {
+    const [node] = getAllNodes(
+      ["a", "b", "c", "d", "e"].map((name) => storage(name, ["h"]))
+    );
+    expect(node.description).toBe("a, b, c +2 more");
+  });
+});
+
+describe("storageForNode", () => {
+  const [node] = getAllNodes([
+    storage("errors_ro", ["h"]),
+    storage("errors", ["h"]),
+    storage("search_issues", ["h"]),
+  ]);
+
+  it("keeps the preferred storage if it lists the node", () => {
+    expect(storageForNode(node, "errors_ro")).toBe("errors_ro");
+  });
+
+  it("otherwise uses the shortest storage name", () => {
+    expect(storageForNode(node)).toBe("errors");
+    expect(storageForNode(node, "spans")).toBe("errors");
+  });
+
+  it("prefers querylog for its longer timeout", () => {
+    const [shared] = getAllNodes([storage("errors", ["h"]), storage("querylog", ["h"])]);
+    expect(storageForNode(shared)).toBe("querylog");
+  });
+});
+
+describe("nodeMatchesSearch", () => {
+  const host = "snuba-events-analytics-platform-tier1-0-1:9000";
+
+  it("matches substrings of host:port", () => {
+    expect(nodeMatchesSearch("", host)).toBe(true);
+    expect(nodeMatchesSearch("Analytics", host)).toBe(true);
+    expect(nodeMatchesSearch("tier1-0-1:9000", host)).toBe(true);
+    expect(nodeMatchesSearch("errors", host)).toBe(false);
+  });
+
+  it("matches words shortened to their initials", () => {
+    expect(nodeMatchesSearch("eap", host)).toBe(true);
+    expect(nodeMatchesSearch("snuba-eap-tier1", host)).toBe(true);
+    expect(nodeMatchesSearch("eap-0-1", host)).toBe(false);
+    expect(nodeMatchesSearch("eapt-0-1", host)).toBe(true);
+    expect(nodeMatchesSearch("seap", host)).toBe(true);
+    expect(nodeMatchesSearch("gm", host)).toBe(false);
+  });
+});
+
+describe("nodeSearchMatch", () => {
+  const host = "snuba-events-analytics-platform-0-1:9000";
+  const indexes = (search: string, hostPort = host) =>
+    nodeSearchMatch(search, hostPort)?.indexes ?? null;
+  const marked = (search: string) =>
+    indexes(search)?.map((idx) => host[idx]).join("");
+  const rank = (search: string, hostPort = host) =>
+    nodeSearchMatch(search, hostPort)?.rank ?? null;
+
+  it("returns the matched substring's characters", () => {
+    expect(indexes("")).toEqual([]);
+    expect(indexes("events")).toEqual([6, 7, 8, 9, 10, 11]);
+    expect(indexes("errors")).toBeNull();
+  });
+
+  it("returns the initials of shortened words", () => {
+    expect(indexes("eap")).toEqual([6, 13, 23]);
+    expect(marked("snuba-eap-0-1:90")).toBe("snuba-eap0-1:90");
+    expect(indexes("eap-0")).toEqual([6, 13, 23, 32]);
+  });
+
+  it("ignores separators", () => {
+    expect(marked("eap-1")).toBeUndefined();
+    expect(marked("eap01")).toBe("eap0-1");
+    expect(marked("eap 0-1")).toBe("eap0-1");
+    expect(marked("platform01")).toBe("platform-0-1");
+    expect(rank("eap-1", "snuba-events-analytics-platform-1-0:8123")).toBe(1);
+    expect(rank("eap-1", "snuba-events-analytics-platform-12-0:8123")).toBe(1);
+    expect(rank("eap-1", "snuba-events-analytics-platform-0-1:8123")).toBeNull();
+  });
+
+  it("skips the rest of a word at a typed separator", () => {
+    const errors = "snuba-errors-1-0:8123";
+    expect(
+      nodeSearchMatch("err-1", errors)?.indexes.map((idx) => errors[idx]).join("")
+    ).toBe("err1");
+    expect(nodeSearchMatch("err-1", errors)?.rank).toBe(0);
+    expect(nodeSearchMatch("err1", errors)).toBeNull();
+    expect(nodeSearchMatch("sn-err-1-0", errors)).not.toBeNull();
+    // Only the rest of one word.
+    expect(nodeSearchMatch("snuba-1", errors)).toBeNull();
+  });
+
+  it("prefers a match at the start of a word", () => {
+    // "a" first appears in "snuba", but "analytics" starts with it.
+    expect(indexes("a")).toEqual([13]);
+    expect(rank("a")).toBe(0);
+    expect(rank("eap")).toBe(1);
+    expect(rank("m")).toBe(2);
+    expect(rank("m", "snuba-generic-metrics-0-0:8123")).toBe(0);
+  });
+});
+
+describe("boundaryMisses", () => {
+  const misses = (search: string, hostPort: string) =>
+    nodeSearchMatch(search, hostPort)?.boundaryMisses ?? null;
+  const eap = (shards: string) =>
+    `snuba-events-analytics-platform-${shards}:8123`;
+
+  it("counts word breaks the search and host disagree on", () => {
+    expect(misses("eap-11", eap("11-1"))).toBe(0);
+    expect(misses("eap-11", eap("1-1"))).toBe(1);
+    expect(misses("eap11", eap("11-1"))).toBe(1);
+    expect(misses("eap11", eap("1-1"))).toBe(2);
+    expect(misses("eap-1-1", eap("11-1"))).toBe(1);
+    expect(misses("eap-1-1", eap("1-1"))).toBe(0);
+  });
+
+  it("counts ending partway through a word", () => {
+    expect(misses("eap-1", eap("1-0"))).toBe(0);
+    expect(misses("eap-1", eap("10-0"))).toBe(1);
+    expect(misses("eap-1-1", eap("1-11"))).toBe(1);
+    expect(misses("err-1", "snuba-errors-1-0:8123")).toBe(1);
+    expect(misses("errors-1", "snuba-errors-1-0:8123")).toBe(0);
+    // The port is a word too.
+    expect(misses("eap-1-1:81", eap("1-1"))).toBe(1);
+  });
+
+  it("picks the closest of a node's matches", () => {
+    // "1-1" starts words twice; only the second sits on word breaks.
+    expect(nodeSearchMatch("1-1", "snuba-x-11-1-1:8123")).toEqual({
+      indexes: [11, 12, 13],
+      rank: 0,
+      boundaryMisses: 0,
+    });
+  });
+});
+
+describe("rankNodes", () => {
+  const nodes = getAllNodes([
+    storage("eap", ["snuba-events-analytics-platform-0-0"], ["snuba-eap-dist"]),
+    storage("metrics", ["snuba-generic-metrics-0-0"], ["snuba-metrics-dist"]),
+  ]);
+  const order = (search: string) =>
+    rankNodes(search, nodes).map((node) => node.value);
+
+  it("lists distributed nodes last", () => {
+    expect(order("")).toEqual([
+      "snuba-events-analytics-platform-0-0:9000",
+      "snuba-generic-metrics-0-0:9000",
+      "snuba-eap-dist:9000",
+      "snuba-metrics-dist:9000",
+    ]);
+  });
+
+  it("lists closer matches first", () => {
+    const shards = getAllNodes(
+      ["1-1", "11-1", "1-11"].map((shard) =>
+        storage("eap", [`snuba-events-analytics-platform-${shard}`])
+      )
+    );
+    const order = (search: string) =>
+      rankNodes(search, shards).map((node) => node.value);
+    expect(order("eap-11")[0]).toBe("snuba-events-analytics-platform-11-1:9000");
+    expect(order("eap-1-1")[0]).toBe("snuba-events-analytics-platform-1-1:9000");
+  });
+
+  it("lists word-start matches before mid-word ones", () => {
+    expect(order("m")).toEqual([
+      "snuba-generic-metrics-0-0:9000",
+      "snuba-metrics-dist:9000",
+      "snuba-events-analytics-platform-0-0:9000",
+      "snuba-eap-dist:9000",
+    ]);
+  });
+});
diff --git a/snuba/admin/static/utils/NODE_SEARCH.md b/snuba/admin/static/utils/NODE_SEARCH.md
new file mode 100644
index 00000000000..70b2b36ec98
--- /dev/null
+++ b/snuba/admin/static/utils/NODE_SEARCH.md
@@ -0,0 +1,87 @@
+# System Queries node search
+
+How the **Host** autocomplete in System Queries ("Pick a node" mode) finds, ranks and highlights ClickHouse nodes. The code is in [`clickhouse_node_utils.tsx`](clickhouse_node_utils.tsx) (`getAllNodes`, `nodeSearchMatch`, `rankNodes`), and the select it drives is `CustomSelect` in [`../select.tsx`](../select.tsx).
+
+## The node list
+
+- Every node of every storage in `/clickhouse_nodes` appears once, keyed by `host:port`. This includes local nodes, distributed nodes and query nodes.
+- The label is `host:port`, with `(distributed)` and/or `(query node)` appended where that applies. A node that is also local is never labelled distributed.
+- The line under the label lists the storages whose cluster includes the node, for example `errors, errors_ro, search_issues +4 more`.
+- A node counts as **distributed** for ranking only if it is distributed and nothing else: not local, and not a query node.
+
+## Picking a node sets the storage
+
+The backend still needs a storage, because the storage decides the cluster, which supplies the credentials, database, TLS settings and node validation. When a node is picked, the storage sent with the query is:
+
+1. the current storage (from a shared link or the previous pick), if it lists the node; otherwise
+2. `querylog`, if it lists the node, because querylog queries run without the 25s timeout; otherwise
+3. the shortest storage name, with ties broken alphabetically.
+
+Manual host entry still shows a storage picker, since a typed host has no other way to name a cluster.
+
+## Words
+
+Matching works on **words**:
+
+- The host splits into words on `-`, `_` and `.`. The port is one more word. Case is ignored.
+- `snuba-events-analytics-platform-11-1:8123` has the words `snuba` `events` `analytics` `platform` `11` `1` `8123`.
+
+In the search, the separators are `-`, `_`, `.`, `:` and whitespace.
+
+## Matching rules
+
+A node matches if the search, with its separators removed, can be matched character by character, in order, against the host's words:
+
+1. **Separators don't have to be typed.** Inside the matched span, the host's separators are skipped. `eap1`, `eap-1` and `eap 1` all match `…-platform-1-0`.
+2. **Initials.** Any run of two or more consecutive host words can be typed as their first letters, for example `eap` for `events-analytics-platform`.
+   - Every word in the run has to start with a letter. Number words and the port can't be part of a run.
+   - Only one run per match.
+   - `eapt` would cover `events-analytics-platform-tier1`, but `eap-0-1` can't skip a `tier1` that sits in between.
+3. **A typed separator can skip the rest of a word.** If you type a separator and you're partway through a host word, the next character may jump to the start of the next host word. `err-1` matches `snuba-errors-1-0` as `err`…`1`.
+   - The jump covers only the rest of the current word. `snuba-1` doesn't match `snuba-errors-1-0`, because it would have to skip `errors`.
+   - Without a typed separator there's no jump. `err1` doesn't match `errors-1`.
+4. **The match can start anywhere,** including mid-word, for example `m` in `platform`. These matches rank last; see below.
+
+An empty search matches every node.
+
+## Ranking
+
+The dropdown is re-sorted on every keystroke. Each node is scored by its best match, and the comparison goes in this order:
+
+1. **Match rank**, best first:
+   1. *Word start*: the match starts at the start of a host word and doesn't use initials. `m` matches **m**etrics.
+   2. *Initials*: the match uses at least one initial from rule 2. `eap` matches `events-analytics-platform`.
+   3. *Mid-word*: the match starts inside a word. `m` matches platfor**m**.
+2. **Boundary misses**, fewest first. A miss is one place where the search and the host disagree about word breaks:
+   - The host starts a new word where you typed no separator. Initials typed together don't count.
+   - You typed a separator where the host keeps going in the same word, without skipping (rule 3).
+   - A typed separator skipped the rest of a word (rule 3).
+   - The search ends partway through a host word.
+3. **Distributed nodes last.**
+4. **`host:port`, alphabetically.** Because `-` sorts before digits, `…-1-0` comes before `…-10-0`.
+
+Nodes that don't match are filtered out of the dropdown.
+
+The comparison order means a closer match of a worse rank never beats a word-start match. Distributed nodes only drop to the bottom within a group with the same rank and misses. So typing `m` lists the metrics distributed nodes before the mid-word `platform` matches.
+
+### Examples
+
+| Search | Host | Rank | Misses | Why |
+| --- | --- | --- | --- | --- |
+| `m` | `snuba-generic-metrics-0-0` | word start | 1 | ends partway through `metrics` |
+| `m` | `snuba-events-analytics-platform-0-0` | mid-word | 0 | `m` is the end of `platform` |
+| `eap-11` | `…-platform-11-1` | initials | 0 | breaks line up |
+| `eap-11` | `…-platform-1-1` | initials | 1 | host breaks between the `1`s, search doesn't |
+| `eap-11` | `…-platform-1-11` | initials | 2 | that break, and ends partway through `11` |
+| `eap-1-1` | `…-platform-1-1` | initials | 0 | breaks line up |
+| `eap-1-1` | `…-platform-1-11` | initials | 1 | ends partway through `11` |
+| `eap-1` | `…-platform-10-0` | initials | 1 | ends partway through `10` |
+| `err-1` | `snuba-errors-1-0` | word start | 1 | skips the rest of `errors` |
+| `errors-1` | `snuba-errors-1-0` | word start | 0 | breaks line up |
+
+## Highlighting
+
+- The characters of the node's best match are marked in its label.
+- A separator in the host that sits between two matched characters is marked as well, so `0-0` shows as one block.
+- Separators and letters the match skipped are not marked. For `eap`, only the `e`, `a` and `p` are marked. For `err-1`, only `err` and the `1`.
+- Right after a node is picked, the box shows the node's full label and Mantine lists every option. Until you type something else, nothing is marked or re-sorted.
diff --git a/snuba/admin/static/utils/clickhouse_node_utils.tsx b/snuba/admin/static/utils/clickhouse_node_utils.tsx
index cecbd0912b1..ad1d907bd25 100644
--- a/snuba/admin/static/utils/clickhouse_node_utils.tsx
+++ b/snuba/admin/static/utils/clickhouse_node_utils.tsx
@@ -51,6 +51,364 @@ export function getHostsForStorage(
   return hosts;
 }
 
+export type NodeOption = SelectItem & {
+  value: string;
+  label: string;
+  // Every storage whose cluster lists this node.
+  storages: string[];
+  // Only a distributed node, which is rarely what a system query wants, so
+  // it's listed after the others.
+  distributed: boolean;
+};
+
+/**
+ * Lists every node of every storage once, keyed by host:port, with the
+ * storages that know about it.
+ *
+ * @param nodeData - Array of ClickhouseNodeData
+ * @returns Array of NodeOption, sorted by host:port
+ */
+export function getAllNodes(nodeData: ClickhouseNodeData[]): NodeOption[] {
+  const byHostPort = new Map<
+    string,
+    { storages: Set<string>; local: boolean; dist: boolean; query: boolean }
+  >();
+  function add(
+    node: { host: string; port: number },
+    storage: string,
+    role: "local" | "dist" | "query"
+  ) {
+    const key = `${node.host}:${node.port}`;
+    let entry = byHostPort.get(key);
+    if (!entry) {
+      entry = { storages: new Set(), local: false, dist: false, query: false };
+      byHostPort.set(key, entry);
+    }
+    entry.storages.add(storage);
+    entry[role] = true;
+  }
+  for (const nodeInfo of nodeData) {
+    const name = nodeInfo.storage_name;
+    nodeInfo.local_nodes.forEach((node) => add(node, name, "local"));
+    nodeInfo.dist_nodes.forEach((node) => add(node, name, "dist"));
+    if (nodeInfo.query_node) {
+      add(nodeInfo.query_node, name, "query");
+    }
+  }
+
+  return Array.from(byHostPort.entries())
+    .sort(([a], [b]) => (a < b ? -1 : a > b ? 1 : 0))
+    .map(([hostPort, entry]) => {
+      const roles = [
+        ...(entry.dist && !entry.local ? ["distributed"] : []),
+        ...(entry.query ? ["query node"] : []),
+      ];
+      const storages = Array.from(entry.storages).sort();
+      return {
+        value: hostPort,
+        label: roles.length
+          ? `${hostPort} (${roles.join(", ")})`
+          : hostPort,
+        description:
+          storages.length > 3
+            ? `${storages.slice(0, 3).join(", ")} +${storages.length - 3} more`
+            : storages.join(", "),
+        storages,
+        distributed: entry.dist && !entry.local && !entry.query,
+      };
+    });
+}
+
+/**
+ * The node as a select item. The select hands every field of an item to the
+ * DOM, so this leaves out the node-only ones.
+ */
+export function nodeSelectItem(node: NodeOption): SelectItem {
+  return { value: node.value, label: node.label, description: node.description };
+}
+
+/**
+ * The storage to send with a query to this node. The backend only uses it to
+ * find the node's cluster, so any storage that lists the node works. The
+ * preferred storage is kept if it lists the node; otherwise querylog wins
+ * (its queries get a longer timeout), then the shortest name.
+ */
+export function storageForNode(node: NodeOption, preferred?: string): string {
+  if (preferred && node.storages.includes(preferred)) {
+    return preferred;
+  }
+  if (node.storages.includes("querylog")) {
+    return "querylog";
+  }
+  return [...node.storages].sort(
+    (a, b) => a.length - b.length || (a < b ? -1 : a > b ? 1 : 0)
+  )[0];
+}
+
+// Searchable text without separators, where each of its characters sits in
+// the host:port, which characters start a word, and which are initials
+// standing in for a whole word.
+type SearchVariant = {
+  text: string;
+  indexes: number[];
+  wordStarts: boolean[];
+  initials: boolean[];
+};
+
+const SEPARATORS = /[-_.:\s]/g;
+
+const variantsByHostPort = new Map<string, SearchVariant[]>();
+
+/**
+ * The host:port, then the same with any run of two or more consecutive words
+ * of the host shortened to their initials, so "eap" finds
+ * snuba-events-analytics-platform-0-1 (as snuba-eap-0-1). Separators are
+ * left out, so they don't have to be typed.
+ */
+function searchVariants(hostPort: string): SearchVariant[] {
+  const cached = variantsByHostPort.get(hostPort);
+  if (cached) {
+    return cached;
+  }
+  const separator = hostPort.lastIndexOf(":");
+  const host = separator === -1 ? hostPort : hostPort.slice(0, separator);
+  type Word = { text: string; start: number };
+  const words: Word[] = [];
+  const wordPattern = /[^-_.]+/g;
+  for (let match; (match = wordPattern.exec(host.toLowerCase())); ) {
+    words.push({ text: match[0], start: match.index });
+  }
+  if (separator !== -1) {
+    words.push({ text: hostPort.slice(separator + 1), start: separator + 1 });
+  }
+
+  type Char = { char: string; index: number; wordStart: boolean; initial: boolean };
+  function wordChars(word: Word): Char[] {
+    return Array.from(word.text, (char, k) => ({
+      char,
+      index: word.start + k,
+      wordStart: k === 0,
+      initial: false,
+    }));
+  }
+  function variant(chars: Char[]): SearchVariant {
+    return {
+      text: chars.map(({ char }) => char).join(""),
+      indexes: chars.map(({ index }) => index),
+      wordStarts: chars.map(({ wordStart }) => wordStart),
+      initials: chars.map(({ initial }) => initial),
+    };
+  }
+
+  const hostWords = separator === -1 ? words.length : words.length - 1;
+  const variants = [variant(words.flatMap(wordChars))];
+  for (let start = 0; start < hostWords; start++) {
+    for (let end = start + 2; end <= hostWords; end++) {
+      const run = words.slice(start, end);
+      if (!run.every((word) => /^[a-z]/.test(word.text))) {
+        break;
+      }
+      variants.push(
+        variant([
+          ...words.slice(0, start).flatMap(wordChars),
+          ...run.map((word) => ({
+            char: word.text[0],
+            index: word.start,
+            wordStart: true,
+            initial: true,
+          })),
+          ...words.slice(end).flatMap(wordChars),
+        ])
+      );
+    }
+  }
+  variantsByHostPort.set(hostPort, variants);
+  return variants;
+}
+
+// Adds the separators that sit between two matched characters, so "0-0"
+// is marked as one run.
+function withSeparatorsBetween(hostPort: string, indexes: number[]): number[] {
+  return indexes.flatMap((index, idx) => {
+    const next = indexes[idx + 1];
+    if (next === undefined) {
+      return [index];
+    }
+    const between = hostPort.slice(index + 1, next);
+    return /^[-_.:]+$/.test(between)
+      ? [index, ...Array.from(between, (_, k) => index + 1 + k)]
+      : [index];
+  });
+}
+
+// How well the search matched, best first.
+const MATCH_WORD_START = 0;
+const MATCH_INITIALS = 1;
+const MATCH_MID_WORD = 2;
+
+export type NodeMatch = {
+  // The indexes of the matched characters in host:port.
+  indexes: number[];
+  // MATCH_WORD_START, MATCH_INITIALS or MATCH_MID_WORD.
+  rank: number;
+  // How many places the search and the host disagree on where words break:
+  // the host starts a new word where no separator was typed, or the other
+  // way around, or the search ends partway through a word. Fewer is a closer
+  // match, so "eap-11" is closer to ...-platform-11-1 (none) than to
+  // ...-platform-1-1 (one), and "eap-1-1" is closer to ...-platform-1-1
+  // (none) than to ...-platform-1-11 (one).
+  boundaryMisses: number;
+};
+
+/** Orders matches, best first. */
+function compareMatches(a: NodeMatch, b: NodeMatch): number {
+  return a.rank - b.rank || a.boundaryMisses - b.boundaryMisses;
+}
+
+// Where the needle matched in a variant: the variant positions of its
+// characters, and the boundaryMisses so far.
+type VariantMatch = { positions: number[]; boundaryMisses: number };
+
+/**
+ * The closest match of the needle in the variant starting at `start`, or null.
+ * The needle's characters are matched in order, and where a separator was
+ * typed, the rest of the current host word may be skipped, so "err-1" finds
+ * errors-1.
+ */
+function matchVariantFrom(
+  variant: SearchVariant,
+  needle: string,
+  typedBreaks: boolean[],
+  start: number
+): VariantMatch | null {
+  const { text, wordStarts, initials } = variant;
+  function closest(a: VariantMatch | null, b: VariantMatch | null) {
+    return a === null || (b !== null && b.boundaryMisses < a.boundaryMisses)
+      ? b
+      : a;
+  }
+  function step(k: number, at: number): VariantMatch | null {
+    if (k === needle.length) {
+      // Ending partway through a word is a miss.
+      const endsMidWord = at < text.length && !wordStarts[at];
+      return { positions: [], boundaryMisses: endsMidWord ? 1 : 0 };
+    }
+    function take(position: number, misses: number): VariantMatch | null {
+      if (text[position] !== needle[k]) {
+        return null;
+      }
+      const rest = step(k + 1, position + 1);
+      return (
+        rest && {
+          positions: [position, ...rest.positions],
+          boundaryMisses: rest.boundaryMisses + misses,
+        }
+      );
+    }
+    if (k === 0) {
+      return take(at, 0);
+    }
+    // Initials are each a word, but they're typed together.
+    const hostBreak =
+      wordStarts[at] && !(initials[at] && initials[at - 1]);
+    let best = take(at, hostBreak !== typedBreaks[k] ? 1 : 0);
+    if (typedBreaks[k] && !wordStarts[at]) {
+      // Skip to the next word. Leaving a word unfinished is a miss.
+      let next = at + 1;
+      while (next < text.length && !wordStarts[next]) {
+        next++;
+      }
+      best = closest(best, take(next, 1));
+    }
+    return best;
+  }
+  return step(0, start);
+}
+
+/**
+ * The best match for what was typed into the node search in host:port, or
+ * null if it doesn't match. Separators needn't be typed, so "eap1" finds
+ * snuba-events-analytics-platform-1-0, and a typed one may skip the rest of
+ * a word, so "err-1" finds snuba-errors-1-0. A match at the start of a word
+ * beats one using initials (see searchVariants), which beats one in the
+ * middle of a word, so "m" ranks generic-metrics above
+ * events-analytics-platform. Ties go to the match with fewer boundaryMisses.
+ */
+export function nodeSearchMatch(
+  search: string,
+  hostPort: string
+): NodeMatch | null {
+  const needle = search.toLowerCase().replace(SEPARATORS, "");
+  if (!needle) {
+    return { indexes: [], rank: MATCH_WORD_START, boundaryMisses: 0 };
+  }
+  // Whether a separator was typed before each of the needle's characters.
+  const typedBreaks: boolean[] = [];
+  search
+    .toLowerCase()
+    .split(SEPARATORS)
+    .forEach((piece, idx) =>
+      Array.from(piece).forEach((_, k) => typedBreaks.push(idx > 0 && k === 0))
+    );
+
+  let best: NodeMatch | null = null;
+  for (const variant of searchVariants(hostPort)) {
+    for (let start = 0; start < variant.text.length; start++) {
+      // Nothing beats this.
+      if (best && best.rank === MATCH_WORD_START && best.boundaryMisses === 0) {
+        break;
+      }
+      const found = matchVariantFrom(variant, needle, typedBreaks, start);
+      if (!found) {
+        continue;
+      }
+      const rank = found.positions.some((position) => variant.initials[position])
+        ? MATCH_INITIALS
+        : variant.wordStarts[start]
+        ? MATCH_WORD_START
+        : MATCH_MID_WORD;
+      const match = {
+        indexes: found.positions.map((position) => variant.indexes[position]),
+        rank,
+        boundaryMisses: found.boundaryMisses,
+      };
+      if (best === null || compareMatches(match, best) < 0) {
+        best = match;
+      }
+    }
+  }
+  return best && {
+    ...best,
+    indexes: withSeparatorsBetween(hostPort, best.indexes),
+  };
+}
+
+/** Whether a node matches what was typed into the node search. */
+export function nodeMatchesSearch(search: string, hostPort: string): boolean {
+  return nodeSearchMatch(search, hostPort) !== null;
+}
+
+/**
+ * Orders the nodes for what was typed into the node search: better matches
+ * first (see compareMatches), distributed nodes after the others, then by
+ * host:port. Nodes that don't match go last; the select filters them out.
+ */
+export function rankNodes(search: string, nodes: NodeOption[]): NodeOption[] {
+  const keyed = nodes.map((node) => ({
+    node,
+    match: nodeSearchMatch(search, node.value),
+  }));
+  keyed.sort(
+    (a, b) =>
+      (a.match && b.match
+        ? compareMatches(a.match, b.match)
+        : Number(!a.match) - Number(!b.match)) ||
+      Number(a.node.distributed) - Number(b.node.distributed) ||
+      (a.node.value < b.node.value ? -1 : a.node.value > b.node.value ? 1 : 0)
+  );
+  return keyed.map(({ node }) => node);
+}
+
 /**
  * Renders an error alert with optional collapsible stack trace.
  *

From f7e0b8b2e435d07d590dd8eaa80b9c29c14f344c Mon Sep 17 00:00:00 2001
From: Oliver Newland <onewland@gmail.com>
Date: Mon, 26 Oct 2026 15:32:36 -0700
Subject: [PATCH 2/3] feat(admin): Select a select's contents on focus

Clearing a select's current value to search for another meant deleting
it by hand. Focusing a select now selects its text, so typing replaces
it. The mouseup that ends the focusing click is ignored so it doesn't
put the caret back.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
---
 snuba/admin/static/select.tsx            | 25 +++++++++++++++++++++++-
 snuba/admin/static/tests/select.spec.tsx | 19 +++++++++++++++++-
 2 files changed, 42 insertions(+), 2 deletions(-)

diff --git a/snuba/admin/static/select.tsx b/snuba/admin/static/select.tsx
index f2799b3b476..295b4e00b21 100644
--- a/snuba/admin/static/select.tsx
+++ b/snuba/admin/static/select.tsx
@@ -1,4 +1,10 @@
-import React, { createContext, forwardRef, useContext, useState } from "react";
+import React, {
+  createContext,
+  forwardRef,
+  useContext,
+  useRef,
+  useState,
+} from "react";
 import { Select, SelectItem, Group, Mark, Text } from '@mantine/core';
 
 type SelectProps = {
@@ -79,6 +85,20 @@ export function CustomSelect(props: SelectProps) {
   const {value, onChange, name, disabled, filter, highlight, sortOptions} =
     props;
   const [search, setSearch] = useState("");
+  // Focusing selects the text, so typing replaces the current value. A click
+  // that focuses ends in a mouseup, which would put the caret back, so the
+  // first mouseup after focusing is ignored.
+  const justFocused = useRef(false);
+  function selectAllOnFocus(event: React.FocusEvent<HTMLInputElement>) {
+    event.currentTarget.select();
+    justFocused.current = true;
+  }
+  function keepSelectionOnMouseUp(event: React.MouseEvent<HTMLInputElement>) {
+    if (justFocused.current) {
+      event.preventDefault();
+      justFocused.current = false;
+    }
+  }
   function updateStorage(value: string) {
     if (name) {
       localStorage.setItem(`select-${name}`, value);
@@ -117,6 +137,9 @@ export function CustomSelect(props: SelectProps) {
       data={options}
       filter={filter}
       onSearchChange={setSearch}
+      onFocus={selectAllOnFocus}
+      onMouseUp={keepSelectionOnMouseUp}
+      onBlur={() => (justFocused.current = false)}
       data-testid={"select"}
       />
     </HighlightContext.Provider>
diff --git a/snuba/admin/static/tests/select.spec.tsx b/snuba/admin/static/tests/select.spec.tsx
index 78bffee247e..b03534047cc 100644
--- a/snuba/admin/static/tests/select.spec.tsx
+++ b/snuba/admin/static/tests/select.spec.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import { it, expect, describe, afterEach } from "@jest/globals";
-import { act, cleanup, render, screen } from "@testing-library/react";
+import { act, cleanup, fireEvent, render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { CustomSelect } from "SnubaAdmin/select";
 import {
@@ -79,6 +79,23 @@ describe("CustomSelect", () => {
     ]);
   });
 
+  it("selects the current value on focus, so typing replaces it", async () => {
+    const input = renderSelect(options[0].value) as HTMLInputElement;
+    fireEvent.focus(input);
+    expect(input.selectionStart).toBe(0);
+    expect(input.selectionEnd).toBe(input.value.length);
+    expect(input.value).toBe(options[0].label);
+
+    // The mouseup that ends the focusing click keeps the selection.
+    const mouseUp = new MouseEvent("mouseup", { bubbles: true, cancelable: true });
+    input.dispatchEvent(mouseUp);
+    expect(mouseUp.defaultPrevented).toBe(true);
+    // Later clicks place the caret as usual.
+    const nextMouseUp = new MouseEvent("mouseup", { bubbles: true, cancelable: true });
+    input.dispatchEvent(nextMouseUp);
+    expect(nextMouseUp.defaultPrevented).toBe(false);
+  });
+
   it("marks nothing while the box shows the selected item", async () => {
     const input = renderSelect(options[0].value);
     await act(async () => userEvent.click(input));

From b1d7c6da14e40782c77eefe4421f9e9da5820de0 Mon Sep 17 00:00:00 2001
From: Oliver Newland <onewland@gmail.com>
Date: Mon, 26 Oct 2026 15:37:42 -0700
Subject: [PATCH 3/3] feat(admin): Keep picking System Queries hosts by storage
 as an option

Some people will still want to pick a storage and then one of its hosts.
The host entry toggle is now Search nodes / By storage / Manual. By
storage works as before the node search: picking a storage fills in its
first host and lists only that storage's nodes. The page remembers which
of the two picking modes was used last, and switching between them keeps
the current host and storage.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
---
 .../clickhouse_queries/query_display.tsx      | 127 ++++++++++++++----
 .../tests/clickhouse_queries/prefill.spec.tsx |  26 ++++
 snuba/admin/static/utils/NODE_SEARCH.md       |   4 +-
 3 files changed, 127 insertions(+), 30 deletions(-)

diff --git a/snuba/admin/static/clickhouse_queries/query_display.tsx b/snuba/admin/static/clickhouse_queries/query_display.tsx
index e5fc15a41a9..f54f5394929 100644
--- a/snuba/admin/static/clickhouse_queries/query_display.tsx
+++ b/snuba/admin/static/clickhouse_queries/query_display.tsx
@@ -28,6 +28,7 @@ import {
   NodeOption,
   getAllNodes,
   getErrorDomElement,
+  getHostsForStorage,
   nodeMatchesSearch,
   nodeSearchMatch,
   nodeSelectItem,
@@ -51,6 +52,32 @@ import {
 type QueryState = Partial<QueryRequest>;
 
 const HISTORY_KEY = "clickhouse_queries";
+// Whether hosts are picked by storage, as before the node search.
+const BY_STORAGE_KEY = "system-queries-by-storage";
+
+function getSavedByStorage(): boolean {
+  try {
+    return localStorage.getItem(BY_STORAGE_KEY) === "true";
+  } catch {
+    return false;
+  }
+}
+
+function saveByStorage(value: boolean) {
+  try {
+    localStorage.setItem(BY_STORAGE_KEY, String(value));
+  } catch {
+    // Not remembering the mode is fine.
+  }
+}
+
+// The storage's first node, to have a host ready as soon as a storage is
+// picked.
+function firstHost(nodeData: ClickhouseNodeData[], storage?: string) {
+  const [first] = getHostsForStorage(nodeData, storage);
+  return first ? parseHostPort(first.value) : {};
+}
+
 // What picking a node sets on the query: the node, and a storage that lists
 // it so the backend can find its cluster.
 function queryForNode(node: NodeOption, preferredStorage?: string) {
@@ -78,6 +105,7 @@ function QueryDisplay(props: {
   // flagged as missing.
   const [nodesLoaded, setNodesLoaded] = useState(false);
   const [manualHostInput, setManualHostInput] = useState<string>("");
+  const [byStorage, setByStorage] = useState(getSavedByStorage);
   const [query, setQuery] = useState<QueryState>({
     storage: prefill?.storage ?? getParamFromStorage("storage"),
     host: prefill?.host,
@@ -129,16 +157,39 @@ function QueryDisplay(props: {
         const saved = getParamFromStorage("host");
         const node = nodes.find((option) => option.value === saved);
         if (node) {
-          setQuery((prevQuery) => ({ ...prevQuery, ...queryForNode(node) }));
+          setQuery((prevQuery) => ({
+            ...prevQuery,
+            ...queryForNode(node, prevQuery.storage),
+          }));
         }
       }
     });
   }, []);
 
-  // Only for manual host entry, where the storage picks the cluster whose
-  // credentials are used.
+  // For picking hosts by storage, and for manual host entry, where the
+  // storage picks the cluster whose credentials are used.
   function selectStorage(storage: string) {
-    setQuery((prevQuery) => ({ ...prevQuery, storage }));
+    setQuery((prevQuery) => {
+      if (prevQuery.clusterless) {
+        // A typed host isn't replaced; it's up to the user.
+        return { ...prevQuery, storage };
+      }
+      const { host, port, ...rest } = prevQuery;
+      return { ...rest, storage, ...firstHost(nodeData, storage) };
+    });
+  }
+
+  function setHostEntry(value: string) {
+    setClusterlessHost(value === "manual");
+    if (value !== "manual") {
+      setByStorage(value === "storage");
+      saveByStorage(value === "storage");
+    }
+  }
+
+  // A host picked from the storage's own list keeps that storage.
+  function selectStorageHost(hostPort: string) {
+    setQuery((prevQuery) => ({ ...prevQuery, ...parseHostPort(hostPort) }));
   }
 
   function setSudo(value: boolean) {
@@ -236,9 +287,10 @@ function QueryDisplay(props: {
 
   // The first thing still needed before the query can run, if any. It's
   // flagged on its field and explains why Execute is disabled.
-  // Picking a node also sets its storage, so only manual entry asks for one.
+  // Searching nodes also sets the node's storage, so only the other ways of
+  // picking a host ask for one.
   const missing =
-    query.clusterless && !query.storage
+    (query.clusterless || byStorage) && !query.storage
       ? "storage"
       : !query.host || !query.port
       ? "host"
@@ -304,7 +356,7 @@ function QueryDisplay(props: {
             </PrefillWarning>
           )}
           <div style={targetRowStyle}>
-            {query.clusterless && (
+            {(query.clusterless || byStorage) && (
               <div style={targetFieldStyle}>
                 <Text size="sm" fw={600}>
                   Storage
@@ -362,25 +414,39 @@ function QueryDisplay(props: {
               ) : (
                 <>
                   <div style={flagged === "host" ? needsInputStyle : undefined}>
-                    <CustomSelect
-                      value={
-                        query.host && query.port
-                          ? `${query.host}:${query.port}`
-                          : ""
-                      }
-                      onChange={selectNode}
-                      name="host"
-                      options={nodeOptions.map(nodeSelectItem)}
-                      filter={(search, item) =>
-                        nodeMatchesSearch(search, item.value)
-                      }
-                      highlight={(search, value) =>
-                        nodeSearchMatch(search, value)?.indexes ?? null
-                      }
-                      sortOptions={(search) =>
-                        rankNodes(search, nodeOptions).map(nodeSelectItem)
-                      }
-                    />
+                    {byStorage ? (
+                      <CustomSelect
+                        disabled={!query.storage}
+                        value={
+                          query.host && query.port
+                            ? `${query.host}:${query.port}`
+                            : ""
+                        }
+                        onChange={selectStorageHost}
+                        name="host"
+                        options={getHostsForStorage(nodeData, query.storage)}
+                      />
+                    ) : (
+                      <CustomSelect
+                        value={
+                          query.host && query.port
+                            ? `${query.host}:${query.port}`
+                            : ""
+                        }
+                        onChange={selectNode}
+                        name="host"
+                        options={nodeOptions.map(nodeSelectItem)}
+                        filter={(search, item) =>
+                          nodeMatchesSearch(search, item.value)
+                        }
+                        highlight={(search, value) =>
+                          nodeSearchMatch(search, value)?.indexes ?? null
+                        }
+                        sortOptions={(search) =>
+                          rankNodes(search, nodeOptions).map(nodeSelectItem)
+                        }
+                      />
+                    )}
                   </div>
                   {flagged === "host" && (
                     <p style={needsInputHintStyle}>{missingHint.host}</p>
@@ -394,10 +460,13 @@ function QueryDisplay(props: {
               </Text>
               <SegmentedControl
                 aria-label="Host entry"
-                value={query.clusterless ? "manual" : "pick"}
-                onChange={(value) => setClusterlessHost(value === "manual")}
+                value={
+                  query.clusterless ? "manual" : byStorage ? "storage" : "search"
+                }
+                onChange={setHostEntry}
                 data={[
-                  { label: "Pick a node", value: "pick" },
+                  { label: "Search nodes", value: "search" },
+                  { label: "By storage", value: "storage" },
                   { label: "Manual", value: "manual" },
                 ]}
               />
diff --git a/snuba/admin/static/tests/clickhouse_queries/prefill.spec.tsx b/snuba/admin/static/tests/clickhouse_queries/prefill.spec.tsx
index 4e89a32396b..055b59eff8a 100644
--- a/snuba/admin/static/tests/clickhouse_queries/prefill.spec.tsx
+++ b/snuba/admin/static/tests/clickhouse_queries/prefill.spec.tsx
@@ -306,6 +306,32 @@ describe("QueryDisplay opened from a link", () => {
     expect(screen.getByLabelText("Open editor")).toBeTruthy();
   });
 
+  it("picks hosts by storage, and remembers the mode", async () => {
+    let api = renderWithHash("#system-queries");
+    await waitFor(() => expect(api.getClickhouseNodes).toBeCalled());
+    fireEvent.click(screen.getByText("By storage"));
+    expect(screen.getByText("Storage")).toBeTruthy();
+    expect(screen.getAllByText("Select a storage to run the query.")).not.toHaveLength(0);
+    expect(localStorage.getItem("system-queries-by-storage")).toBe("true");
+
+    cleanup();
+    api = renderWithHash("#system-queries");
+    await waitFor(() => expect(api.getClickhouseNodes).toBeCalled());
+    expect(screen.getByText("Storage")).toBeTruthy();
+  });
+
+  it("keeps the node when switching to picking by storage", async () => {
+    const api = renderWithHash(
+      "#system-queries?query=SELECT%201&host=clickhouse-01%3A9000"
+    );
+    await waitFor(() => expect(api.getClickhouseNodes).toBeCalled());
+    await screen.findAllByDisplayValue("clickhouse-01:9000");
+
+    fireEvent.click(screen.getByText("By storage"));
+    expect(screen.getAllByDisplayValue("errors")).not.toHaveLength(0);
+    expect(screen.getAllByDisplayValue("clickhouse-01:9000")).not.toHaveLength(0);
+  });
+
   it("shows no warning without params", async () => {
     const api = renderWithHash("#system-queries");
     await waitFor(() => expect(api.getClickhouseNodes).toBeCalled());
diff --git a/snuba/admin/static/utils/NODE_SEARCH.md b/snuba/admin/static/utils/NODE_SEARCH.md
index 70b2b36ec98..dc860a4b9c8 100644
--- a/snuba/admin/static/utils/NODE_SEARCH.md
+++ b/snuba/admin/static/utils/NODE_SEARCH.md
@@ -1,6 +1,6 @@
 # System Queries node search
 
-How the **Host** autocomplete in System Queries ("Pick a node" mode) finds, ranks and highlights ClickHouse nodes. The code is in [`clickhouse_node_utils.tsx`](clickhouse_node_utils.tsx) (`getAllNodes`, `nodeSearchMatch`, `rankNodes`), and the select it drives is `CustomSelect` in [`../select.tsx`](../select.tsx).
+How the **Host** autocomplete in System Queries ("Search nodes" mode) finds, ranks and highlights ClickHouse nodes. The code is in [`clickhouse_node_utils.tsx`](clickhouse_node_utils.tsx) (`getAllNodes`, `nodeSearchMatch`, `rankNodes`), and the select it drives is `CustomSelect` in [`../select.tsx`](../select.tsx).
 
 ## The node list
 
@@ -19,6 +19,8 @@ The backend still needs a storage, because the storage decides the cluster, whic
 
 Manual host entry still shows a storage picker, since a typed host has no other way to name a cluster.
 
+"By storage" mode is the old way of picking a host, kept as an alternative: pick a storage, its first host fills in, and the host list shows only that storage's nodes. The page remembers whether you last used "Search nodes" or "By storage". Switching between them keeps the current host and storage.
+
 ## Words
 
 Matching works on **words**: