vmui: fix bug where tenant list was not displayed (#4162)

* fix: modify the condition for querying tenants

* fix: change getTenantIdFromUrl output to string

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

@@ -4,13 +4,13 @@ import { useTimeDispatch } from "../../../../state/time/TimeStateContext";
 import { ArrowDownIcon, StorageIcon } from "../../../Main/Icons";
 import Button from "../../../Main/Button/Button";
 import "./style.scss";
-import { replaceTenantId } from "../../../../utils/default-server-url";
 import classNames from "classnames";
 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";
+import { getTenantIdFromUrl, replaceTenantId } from "../../../../utils/tenants";
 
 const TenantsConfiguration: FC<{accountIds: string[]}> = ({ accountIds }) => {
   const appModeEnable = getAppModeEnable();
@@ -35,15 +35,7 @@ const TenantsConfiguration: FC<{accountIds: string[]}> = ({ accountIds }) => {
     }
   }, [search, accountIds]);
 
-  const getTenantIdFromUrl = (url: string) => {
+  const showTenantSelector = useMemo(() => accountIds.length > 1, [accountIds]);
-    const regexp = /(\/select\/)(\d+|\d.+)(\/)(.+)/;
-    return (url.match(regexp) || [])[2];
-  };
-
-  const showTenantSelector = useMemo(() => {
-    const id = true; //getTenantIdFromUrl(serverUrl);
-    return accountIds.length > 1 && id;
-  }, [accountIds, serverUrl]);
 
   const toggleOpenOptions = () => {
     setOpenOptions(prev => !prev);

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

@@ -2,10 +2,12 @@ import { useAppState } from "../../../../../state/common/StateContext";
 import { useEffect, useMemo, useState } from "preact/compat";
 import { ErrorTypes } from "../../../../../types";
 import { getAccountIds } from "../../../../../api/accountId";
-import { getAppModeParams } from "../../../../../utils/app-mode";
+import { getAppModeEnable, getAppModeParams } from "../../../../../utils/app-mode";
+import { getTenantIdFromUrl } from "../../../../../utils/tenants";
 
 export const useFetchAccountIds = () => {
   const { useTenantID } = getAppModeParams();
+  const appModeEnable = getAppModeEnable();
   const { serverUrl } = useAppState();
 
   const [isLoading, setIsLoading] = useState(false);
@@ -13,9 +15,11 @@ export const useFetchAccountIds = () => {
   const [accountIds, setAccountIds] = useState<string[]>([]);
 
   const fetchUrl = useMemo(() => getAccountIds(serverUrl), [serverUrl]);
+  const isServerUrlWithTenant = useMemo(() => !!getTenantIdFromUrl(serverUrl), [serverUrl]);
+  const preventFetch = appModeEnable ? !useTenantID : !isServerUrlWithTenant;
 
   useEffect(() => {
-    if (!useTenantID) return;
+    if (preventFetch) return;
     const fetchData = async () => {
       setIsLoading(true);
       try {

app/vmui/packages/vmui/src/utils/tenants.ts

@@ -0,0 +1,9 @@
+const regexp = /(\/select\/)(\d+|\d.+)(\/)(.+)/;
+
+export const replaceTenantId = (serverUrl: string, tenantId: string) => {
+  return serverUrl.replace(regexp, `$1${tenantId}/$4`);
+};
+
+export const getTenantIdFromUrl = (url: string): string => {
+  return url.match(regexp)?.[2] || "";
+};

docs/CHANGELOG.md

@@ -27,6 +27,7 @@ The following tip changes can be tested by building VictoriaMetrics components f
 * BUGFIX: [vmctl](https://docs.victoriametrics.com/vmctl.html): fix performance issue when migrating data from VictoriaMetrics according to [these docs](https://docs.victoriametrics.com/vmctl.html#migrating-data-from-victoriametrics). Add the ability to speed up the data migration via `--vm-native-disable-retries` command-line flag. See [this issue](https://github.com/VictoriaMetrics/VictoriaMetrics/issues/4092).
 * BUGFIX: [MetricsQL](https://docs.victoriametrics.com/MetricsQL.html): fix a panic when the duration in the query contains uppercase `M` suffix. Such a suffix isn't allowed to use in durations, since it clashes with `a million` suffix, e.g. it isn't clear whether `rate(metric[5M])` means rate over 5 minutes, 5 months or 5 million seconds. See [this](https://github.com/VictoriaMetrics/VictoriaMetrics/issues/3589) and [this](https://github.com/VictoriaMetrics/VictoriaMetrics/issues/4120) issues.
 * BUGFIX: [vmalert](https://docs.victoriametrics.com/vmalert.html): retry failed read request on the closed connection one more time. This improves rules execution reliability when connection between vmalert and datasource closes unexpectedly.
+* BUGFIX: [vmui](https://docs.victoriametrics.com/#vmui): fix the display of the tenant selector. See [this issue](https://github.com/VictoriaMetrics/VictoriaMetrics/issues/4160).
 
 ## [v1.90.0](https://github.com/VictoriaMetrics/VictoriaMetrics/releases/tag/v1.90.0)