vmui: improve tenant selector (#3794)

* fix: change styles tenant selector (#3792)

* docs/CHANGELOG.md: document the change

Updates https://github.com/VictoriaMetrics/VictoriaMetrics/issues/3792

---------

Co-authored-by: Aliaksandr Valialkin <valyala@victoriametrics.com>

app/vmui/packages/vmui/src/components/Configurators/GlobalSettings/TenantsConfiguration/TenantsConfiguration.tsx

@@ -10,6 +10,7 @@ import Popper from "../../../Main/Popper/Popper";
 import { getAppModeEnable } from "../../../../utils/app-mode";
 import Tooltip from "../../../Main/Tooltip/Tooltip";
 import useDeviceDetect from "../../../../hooks/useDeviceDetect";
+import TextField from "../../../Main/TextField/TextField";
 
 const TenantsConfiguration: FC<{accountIds: string[]}> = ({ accountIds }) => {
   const appModeEnable = getAppModeEnable();
@@ -19,9 +20,21 @@ const TenantsConfiguration: FC<{accountIds: string[]}> = ({ accountIds }) => {
   const dispatch = useAppDispatch();
   const timeDispatch = useTimeDispatch();
 
+  const [search, setSearch] = useState("");
   const [openOptions, setOpenOptions] = useState(false);
   const optionsButtonRef = useRef<HTMLDivElement>(null);
 
+  const accountIdsFiltered = useMemo(() => {
+    if (!search) return accountIds;
+    try {
+      const regexp = new RegExp(search, "i");
+      const found = accountIds.filter((item) => regexp.test(item));
+      return found.sort((a,b) => (a.match(regexp)?.index || 0) - (b.match(regexp)?.index || 0));
+    } catch (e) {
+      return [];
+    }
+  }, [search, accountIds]);
+
   const getTenantIdFromUrl = (url: string) => {
     const regexp = /(\/select\/)(\d+|\d.+)(\/)(.+)/;
     return (url.match(regexp) || [])[2];
@@ -92,13 +105,20 @@ const TenantsConfiguration: FC<{accountIds: string[]}> = ({ accountIds }) => {
       </Tooltip>
       <Popper
         open={openOptions}
-        placement="bottom-left"
+        placement="bottom-right"
         onClose={handleCloseOptions}
         buttonRef={optionsButtonRef}
-        fullWidth
       >
-        <div className="vm-list">
+        <div className="vm-list vm-tenant-input-list">
-          {accountIds.map(id => (
+          <div className="vm-tenant-input-list__search">
+            <TextField
+              autofocus
+              label="Search"
+              value={search}
+              onChange={setSearch}
+            />
+          </div>
+          {accountIdsFiltered.map(id => (
             <div
               className={classNames({
                 "vm-list-item": true,

app/vmui/packages/vmui/src/components/Configurators/GlobalSettings/TenantsConfiguration/hooks/useFetchAccountIds.ts

@@ -22,7 +22,7 @@ export const useFetchAccountIds = () => {
         const response = await fetch(fetchUrl);
         const resp = await response.json();
         const data = (resp.data || []) as string[];
-        setAccountIds(data);
+        setAccountIds(data.sort((a, b) => a.localeCompare(b)));
 
         if (response.ok) {
           setError(undefined);

app/vmui/packages/vmui/src/components/Configurators/GlobalSettings/TenantsConfiguration/style.scss

@@ -2,4 +2,18 @@
 
 .vm-tenant-input {
   position: relative;
+
+  &-list {
+    max-height: 300px;
+    overflow: auto;
+    overscroll-behavior: none;
+    border-radius: $border-radius-medium;
+
+    &__search {
+      position: sticky;
+      top: 0;
+      padding: $padding-small;
+      background-color: $color-background-block;
+    }
+  }
 }

docs/CHANGELOG.md

@@ -18,7 +18,8 @@ The following tip changes can be tested by building VictoriaMetrics components f
 * FEATURE: [vmalert](https://docs.victoriametrics.com/vmalert.html): alerts state restore procedure was changed to become asynchronous. It doesn't block groups start anymore which significantly improves vmalert's startup time.
   This also means that `-remoteRead.ignoreRestoreErrors` command-line flag becomes deprecated now and will have no effect if configured.
   While previously state restore attempt was made for all the loaded alerting rules, now it is called only for alerts which became active after the first evaluation. See [this issue](https://github.com/VictoriaMetrics/VictoriaMetrics/issues/2608).
-* FEATURE: [vmui](https://docs.victoriametrics.com/#vmui): optimize VMUI for use from smarthones and tablets. See [this feature request](https://github.com/VictoriaMetrics/VictoriaMetrics/issues/3707).
+* FEATURE: [vmui](https://docs.victoriametrics.com/#vmui): optimize VMUI for use from smartphones and tablets. See [this feature request](https://github.com/VictoriaMetrics/VictoriaMetrics/issues/3707).
+* FEATURE: [vmui](https://docs.victoriametrics.com/#vmui): add ability to search tenants in the drop-down list for the tenant selector. See [this feature request](https://github.com/VictoriaMetrics/VictoriaMetrics/issues/3792).
 * FEATURE: [vmui](https://docs.victoriametrics.com/#vmui): add avg/max/last values to line legends and tooltips for graphs. See [this feature request](https://github.com/VictoriaMetrics/VictoriaMetrics/issues/3706).
 * FEATURE: [vmui](https://docs.victoriametrics.com/#vmui): hide the default `per-job resource usage` dashboard if there is a custom dashboard exists at the directory specified via `-vmui.customDashboardsPath` command-line flag. See [this feature request](https://github.com/VictoriaMetrics/VictoriaMetrics/issues/3740).