app/vmui: sync tenant selectors from response headers (#865)

Author: Loori-R

app/vmui/packages/vmui/src/pages/QueryPage/hooks/useFetchLogs.ts

@@ -7,6 +7,7 @@ import { useTenant } from "../../../hooks/useTenant";
 import { useSearchParams } from "react-router-dom";
 import { useAppState } from "../../../state/common/StateContext";
 import { mergeSearchParams } from "../../../utils/query-string";
+import { TenantType } from "../../../components/Configurators/GlobalSettings/TenantsConfiguration/Tenants";
 
 interface FetchLogsParams {
   query?: string;
@@ -27,7 +28,7 @@ export type BeforeFetch = (body: Readonly<URLSearchParams>) => Promise<BeforeFet
 export const useFetchLogs = (defaultQuery?: string, defaultLimit?: number) => {
   const { serverUrl } = useAppState();
   const tenant = useTenant();
-  const [searchParams] = useSearchParams();
+  const [searchParams, setSearchParams] = useSearchParams();
 
   const [logs, setLogs] = useState<Logs[]>([]);
   const [queryParams, setQueryParams] = useState<Record<string, string>>({});
@@ -72,6 +73,12 @@ export const useFetchLogs = (defaultQuery?: string, defaultLimit?: number) => {
     };
   };
 
+  const updateTenant = ({ accountId, projectId }: Partial<TenantType>) => {
+    if (accountId) searchParams.set("accountID", accountId);
+    if (projectId) searchParams.set("projectID", projectId);
+    setSearchParams(searchParams);
+  };
+
   const fetchLogs = useCallback(async ({
     query = defaultQuery,
     limit = defaultLimit,
@@ -112,6 +119,16 @@ export const useFetchLogs = (defaultQuery?: string, defaultLimit?: number) => {
         return response;
       }
 
+      const uiAccountId = (options.headers as Record<string, string>)?.AccountID;
+      const vlAccountId = response.headers.get("AccountID");
+      const changedAccountId = vlAccountId && vlAccountId !== uiAccountId;
+      if (changedAccountId) updateTenant({ accountId: vlAccountId });
+
+      const uiProjectId = (options.headers as Record<string, string>)?.ProjectID;
+      const vlProjectId = response.headers.get("ProjectID");
+      const changedProjectId = vlProjectId && vlProjectId !== uiProjectId;
+      if (changedProjectId) updateTenant({ projectId: vlProjectId });
+
       const duration = response.headers.get("vl-request-duration-seconds");
       setDurationMs(duration ? Number(duration) * 1000 : undefined);
 

docs/victorialogs/CHANGELOG.md

@@ -27,6 +27,7 @@ according to the follosing docs:
 * FEATURE: [OpenTelemetry data ingestion](https://docs.victoriametrics.com/victorialogs/data-ingestion/opentelemetry/): parse `EventName` in the `LogRecord` and store it into [log stream fields](https://docs.victoriametrics.com/victorialogs/keyconcepts/#stream-fields). See [#826](https://github.com/VictoriaMetrics/VictoriaLogs/issues/826).
 * FEATURE: [HTTP querying API](https://docs.victoriametrics.com/victorialogs/querying/#http-api): automatically convert the results of [`row_any()`](https://docs.victoriametrics.com/victorialogs/logsql/#row_any-stats), [`row_min()`](https://docs.victoriametrics.com/victorialogs/logsql/#row_min-stats) and [`row_max()`](https://docs.victoriametrics.com/victorialogs/logsql/#row_max-stats) stats functions to labels in [`/select/logsql/stats_query`](https://docs.victoriametrics.com/victorialogs/querying/#querying-log-stats) and [`/select/logsql/stats_query_range`](https://docs.victoriametrics.com/victorialogs/querying/#querying-log-range-stats) functions. This allows obtaining a sample of log message in alerting rules with the following query: `... | stats count() as hits, row_any(_msg) as msg_sample`. See [#81](https://github.com/VictoriaMetrics/VictoriaLogs/issues/81).
 * FEATURE: [web UI](https://docs.victoriametrics.com/victorialogs/querying/#web-ui): show VictoriaLogs version in the vmui's footer. See [#116](https://github.com/VictoriaMetrics/VictoriaLogs/issues/116).
+* FEATURE: [web UI](https://docs.victoriametrics.com/victorialogs/querying/#web-ui): sync selected tenant with AccountID/ProjectID returned in response headers. See [#656](https://github.com/VictoriaMetrics/VictoriaLogs/issues/656).
 * FEATURE: [web UI](https://docs.victoriametrics.com/victorialogs/querying/#web-ui): add hotkeys to toggle series in the hit chart.
 
 * BUGFIX: [web UI](https://docs.victoriametrics.com/victorialogs/querying/#web-ui): fix mobile layout styles.