From e1063ce3c1d7088214f2e5568edcbf89c4294cd2 Mon Sep 17 00:00:00 2001 From: Yury Molodov Date: Thu, 9 Feb 2023 09:08:59 +0100 Subject: [PATCH] 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 --- .../TenantsConfiguration.tsx | 28 ++++++++++++++++--- .../hooks/useFetchAccountIds.ts | 2 +- .../TenantsConfiguration/style.scss | 14 ++++++++++ docs/CHANGELOG.md | 3 +- 4 files changed, 41 insertions(+), 6 deletions(-) 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 d72f4920c..8627328bc 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 6c5cad4a2..1573766e7 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 af4f63272..3d445f4e2 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).