app/vmui: properly show tenant info if AccountID and ProjectID headers are set by proxy or remove it completely

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

@@ -13,15 +13,17 @@ import TextField from "../../../Main/TextField/TextField";
 import useBoolean from "../../../../hooks/useBoolean";
 import useStateSearchParams from "../../../../hooks/useStateSearchParams";
 import { useSearchParams } from "react-router-dom";
+import { useAppState } from "../../../../state/common/StateContext";
 
 const TenantsFields: FC = () => {
+  const { tenantId } = useAppState();
   const appModeEnable = getAppModeEnable();
   const { isMobile } = useDeviceDetect();
   const timeDispatch = useTimeDispatch();
 
   const [searchParams, setSearchParams] = useSearchParams();
-  const [accountID, setAccountID] = useStateSearchParams("0", "accountID");
-  const [projectID, setProjectID] = useStateSearchParams("0", "projectID");
+  const [accountID, setAccountID] = useStateSearchParams(tenantId?.accountID || "0", "accountID");
+  const [projectID, setProjectID] = useStateSearchParams(tenantId?.projectID || "0", "projectID");
   const formattedTenant = `${accountID}:${projectID}`;
 
   const buttonRef = useRef<HTMLDivElement>(null);
@@ -41,107 +43,134 @@ const TenantsFields: FC = () => {
   };
 
   const handleReset = () => {
-    setAccountID(searchParams.get("accountID") || "0");
-    setProjectID(searchParams.get("projectID") || "0");
+    setAccountID(searchParams.get("accountID") || tenantId?.accountID || "0");
+    setProjectID(searchParams.get("projectID") || tenantId?.projectID || "0");
   };
 
   useEffect(() => {
     if (openPopup) return;
     handleReset();
   }, [openPopup]);
 
+  const isTenantStatic = !!(tenantId?.accountID || tenantId?.projectID);
+  const tooltipMessage = isTenantStatic ? "Static tenant for a current user" : "Define Tenant ID if you need request to another storage";
+
+  const getTenantLabel = () => {
+    return (
+      <div ref={buttonRef}>
+        <div
+          className="vm-mobile-option"
+          onClick={isTenantStatic ? undefined : toggleOpenPopup}
+        >
+          <span className="vm-mobile-option__icon"><StorageIcon/></span>
+          <div className="vm-mobile-option-text">
+            {isMobile && (
+              <span className="vm-mobile-option-text__label">Tenant ID</span>
+            )}
+            <span className="vm-mobile-option-text__value">{formattedTenant}</span>
+          </div>
+          {!isTenantStatic && (
+            <span className="vm-mobile-option__arrow"><ArrowDownIcon/></span>
+          )}
+        </div>
+      </div>
+    );
+  };
+
   return (
-    <div className="vm-tenant-input">
-      <Tooltip title="Define Tenant ID if you need request to another storage">
-        <div ref={buttonRef}>
-          {isMobile ? (
-            <div
-              className="vm-mobile-option"
-              onClick={toggleOpenPopup}
-            >
-              <span className="vm-mobile-option__icon"><StorageIcon/></span>
-              <div className="vm-mobile-option-text">
-                <span className="vm-mobile-option-text__label">Tenant ID</span>
-                <span className="vm-mobile-option-text__value">{formattedTenant}</span>
-              </div>
-              <span className="vm-mobile-option__arrow"><ArrowDownIcon/></span>
-            </div>
+    <div
+      className={classNames({
+        "vm-tenant-input": true,
+        "vm-tenant-input_disabled": isTenantStatic,
+        "vm-tenant-input_mobile": isMobile,
+      })}
+    >
+      {isMobile ? (
+        getTenantLabel()
+      ) : (
+        <Tooltip title={tooltipMessage}>
+          {isTenantStatic ? (
+            getTenantLabel()
           ) : (
-            <Button
-              className={appModeEnable ? "" : "vm-header-button"}
-              variant="contained"
-              color="primary"
-              fullWidth
-              startIcon={<StorageIcon/>}
-              endIcon={(
-                <div
-                  className={classNames({
-                    "vm-execution-controls-buttons__arrow": true,
-                    "vm-execution-controls-buttons__arrow_open": openPopup,
-                  })}
-                >
-                  <ArrowDownIcon/>
-                </div>
-              )}
-              onClick={toggleOpenPopup}
-            >
-              {formattedTenant}
-            </Button>
+            <div ref={buttonRef}>
+              <Button
+                className={appModeEnable ? "" : "vm-header-button"}
+                variant="contained"
+                color="primary"
+                fullWidth
+                startIcon={<StorageIcon/>}
+                endIcon={(
+                  <div
+                    className={classNames({
+                      "vm-execution-controls-buttons__arrow": true,
+                      "vm-execution-controls-buttons__arrow_open": openPopup,
+                    })}
+                  >
+                    <ArrowDownIcon/>
+                  </div>
+                )}
+                onClick={toggleOpenPopup}
+              >
+                {formattedTenant}
+              </Button>
+            </div>
           )}
-        </div>
-      </Tooltip>
-      <Popper
-        open={openPopup}
-        placement="bottom-right"
-        onClose={handleClosePopup}
-        buttonRef={buttonRef}
-        title={isMobile ? "Define Tenant ID" : undefined}
-      >
-        <div
-          className={classNames({
-            "vm-list vm-tenant-input-list": true,
-            "vm-list vm-tenant-input-list_mobile": isMobile,
-            "vm-tenant-input-list_inline": true,
-          })}
+        </Tooltip>
+      )}
+      {!isTenantStatic && (
+        <Popper
+          open={openPopup}
+          placement="bottom-right"
+          onClose={handleClosePopup}
+          buttonRef={buttonRef}
+          title={isMobile ? "Define Tenant ID" : undefined}
         >
-          <TextField
-            autofocus
-            label="accountID"
-            value={accountID}
-            onChange={setAccountID}
-            type="number"
-          />
-          <TextField
-            autofocus
-            label="projectID"
-            value={projectID}
-            onChange={setProjectID}
-            type="number"
-          />
-          <div className="vm-tenant-input-list__buttons">
-            <Tooltip title="Multitenancy in VictoriaLogs documentation">
-              <a
-                href="https://docs.victoriametrics.com/victorialogs/#multitenancy"
-                target="_blank"
-                rel="help noreferrer"
+          <div
+            className={classNames({
+              "vm-list vm-tenant-input-list": true,
+              "vm-list vm-tenant-input-list_mobile": isMobile,
+              "vm-tenant-input-list_inline": true,
+            })}
+          >
+            <TextField
+              autofocus
+              label="accountID"
+              value={accountID}
+              onChange={setAccountID}
+              type="number"
+            />
+            <TextField
+              autofocus
+              label="projectID"
+              value={projectID}
+              onChange={setProjectID}
+              type="number"
+            />
+            <div className="vm-tenant-input-list__buttons">
+              <Tooltip title="Multitenancy in VictoriaLogs documentation">
+                <a
+                  href="https://docs.victoriametrics.com/victorialogs/#multitenancy"
+                  target="_blank"
+                  rel="help noreferrer"
+                >
+                  <Button
+                    variant="text"
+                    color="gray"
+                    startIcon={<QuestionIcon/>}
+                  />
+                </a>
+              </Tooltip>
+              <Button
+                variant="contained"
+                color="primary"
+                onClick={applyChanges}
               >
-                <Button
-                  variant="text"
-                  color="gray"
-                  startIcon={<QuestionIcon/>}
-                />
-              </a>
-            </Tooltip>
-            <Button
-              variant="contained"
-              color="primary"
-              onClick={applyChanges}
-            >
-              Apply
-            </Button>
+                Apply
+              </Button>
+            </div>
           </div>
-        </div>
-      </Popper>
+        </Popper>
+      )}
     </div>
   );
 };

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

@@ -3,6 +3,31 @@
 .vm-tenant-input {
   position: relative;
 
+  &_disabled:not(&_mobile) {
+    .vm-mobile-option {
+      &__icon {
+        color: #fff;
+      }
+      &-text {
+        color: #fff;
+        &__value {
+          color: #fff;
+        }
+      }
+    }
+  }
+
+  &_disabled:is(&_mobile) {
+    .vm-mobile-option {
+      &__icon {
+        color: $color-text-disabled;
+      }
+      &-text {
+        color: $color-text-disabled;
+      }
+    }
+  }
+
   &-list {
     max-height: 300px;
     overflow: auto;

app/vmui/packages/vmui/src/components/Views/JsonView/JsonView.tsx

@@ -12,7 +12,7 @@ export const JsonView: FC<Props> = ({ data }) => {
         return s;
       }
       return JSON.stringify(a);
-    }).join("\n")
+    }).join("\n");
   }, [data]);
   return (
     <pre style="line-height: 1.2em">{jsonStr}</pre>

app/vmui/packages/vmui/src/hooks/useFetchAppConfig.ts

@@ -1,8 +1,9 @@
-import { useAppDispatch } from "../state/common/StateContext";
+import { useAppDispatch, useAppState } from "../state/common/StateContext";
 import { useEffect, useState } from "preact/compat";
 import { ErrorTypes } from "../types";
 
 const useFetchFlags = () => {
+  const { serverUrl } = useAppState();
   const dispatch = useAppDispatch();
 
   const [isLoading, setIsLoading] = useState(false);
@@ -14,17 +15,23 @@ const useFetchFlags = () => {
       setIsLoading(true);
 
       try {
-        const data = await fetch("./config.json");
+        const data = await fetch(`${serverUrl}/select/vmui/config.json`);
         const config = await data.json();
         dispatch({ type: "SET_APP_CONFIG", payload: config || {} });
+        const tenant = {
+          accountID: data.headers.get("AccountID") || "",
+          projectID: data.headers.get("ProjectID") || "",
+          disableTenantInfo: data.headers.get("VL-Disable-Tenant-Controls") == "true",
+        };
+        dispatch({ type: "SET_TENANT_ID", payload: tenant });
       } catch (e) {
         setIsLoading(false);
         if (e instanceof Error) setError(`${e.name}: ${e.message}`);
       }
     };
 
     fetchAppConfig();
-  }, []);
+  }, [serverUrl]);
 
   return { isLoading, error };
 };

app/vmui/packages/vmui/src/layouts/Footer/Footer.tsx

@@ -2,6 +2,7 @@ import { FC, memo } from "preact/compat";
 import { LogoShortIcon } from "../../components/Main/Icons";
 import "./style.scss";
 import { footerLinksToLogs } from "../../constants/footerLinks";
+import { useAppState } from "../../state/common/StateContext";
 
 interface Props {
   links?: {
@@ -13,10 +14,12 @@ interface Props {
 
 const Footer: FC<Props> = memo(({ links = footerLinksToLogs }) => {
   const copyrightYears = `2019-${new Date().getFullYear()}`;
+  const { appConfig } = useAppState();
+  const version = appConfig?.version;
 
   return <footer className="vm-footer">
     <a
-      className="vm-link vm-footer__website"
+      className="vm-link vm-footer__link"
       target="_blank"
       href="https://victoriametrics.com/"
       rel="me noreferrer"
@@ -37,7 +40,8 @@ const Footer: FC<Props> = memo(({ links = footerLinksToLogs }) => {
       </a>
     ))}
     <div className="vm-footer__copyright">
-      &copy; {copyrightYears} VictoriaMetrics
+      &copy; {copyrightYears} VictoriaMetrics.
+      {version && <span className="vm-footer__version">&nbsp;Version: {version}</span>}
     </div>
   </footer>;
 });

app/vmui/packages/vmui/src/layouts/Header/HeaderControls/HeaderControls.tsx

@@ -55,7 +55,7 @@ const HeaderControls: FC<ControlsProps & HeaderProps> = ({
   if (isMobile) {
     return (
       <>
-        <div>
+        <div className="vm-header-controls">
           <Button
             className={classNames({
               "vm-header-button": !appModeEnable