diff --git a/app/vmui/packages/vmui/src/components/Configurators/GlobalSettings/TenantsConfiguration/TenantsConfiguration.tsx b/app/vmui/packages/vmui/src/components/Configurators/GlobalSettings/TenantsConfiguration/TenantsConfiguration.tsx index d72f4920c3..8627328bcb 100644 --- a/app/vmui/packages/vmui/src/components/Configurators/GlobalSettings/TenantsConfiguration/TenantsConfiguration.tsx +++ b/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(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 }) => { -
- {accountIds.map(id => ( +
+
+ +
+ {accountIdsFiltered.map(id => (
{ 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); diff --git a/app/vmui/packages/vmui/src/components/Configurators/GlobalSettings/TenantsConfiguration/style.scss b/app/vmui/packages/vmui/src/components/Configurators/GlobalSettings/TenantsConfiguration/style.scss index 6c5cad4a26..1573766e7d 100644 --- a/app/vmui/packages/vmui/src/components/Configurators/GlobalSettings/TenantsConfiguration/style.scss +++ b/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; + } + } } diff --git a/docs/CHANGELOG.md b/docs/CHANGELOG.md index af4f632721..3d445f4e25 100644 --- a/docs/CHANGELOG.md +++ b/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).