app/vmui: display vmselect version in footer

Signed-off-by: Yury Molodov <yurymolodov@gmail.com>

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

@@ -1,9 +1,10 @@
-import { useAppDispatch } from "../state/common/StateContext";
+import { useAppDispatch, useAppState } from "../state/common/StateContext";
 import { useEffect, useState } from "preact/compat";
 import { ErrorTypes } from "../types";
 import { APP_TYPE_VM } from "../constants/appType";
 
 const useFetchAppConfig = () => {
+  const { serverUrl } = useAppState();
   const dispatch = useAppDispatch();
 
   const [isLoading, setIsLoading] = useState(false);
@@ -16,7 +17,7 @@ const useFetchAppConfig = () => {
       setIsLoading(true);
 
       try {
-        const data = await fetch("./config.json");
+        const data = await fetch(`${serverUrl}/vmui/config.json`);
         const config = await data.json();
         dispatch({ type: "SET_APP_CONFIG", payload: config || {} });
       } catch (e) {
@@ -26,7 +27,7 @@ const useFetchAppConfig = () => {
     };
 
     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 { footerLinksByDefault } from "../../constants/footerLinks";
+import { useAppState } from "../../state/common/StateContext";
 
 interface Props {
   links?: {
@@ -13,10 +14,12 @@ interface Props {
 
 const Footer: FC<Props> = memo(({ links = footerLinksByDefault }) => {
   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 = footerLinksByDefault }) => {
       </a>
     ))}
     <div className="vm-footer__copyright">
-      &copy; {copyrightYears} VictoriaMetrics
+      &copy; {copyrightYears} VictoriaMetrics.
+      {version && <span className="vm-footer__version">&nbsp;{version}</span>}
     </div>
   </footer>;
 });

app/vmui/packages/vmui/src/types/index.ts

@@ -183,6 +183,7 @@ export interface AppConfig {
   vmalert?: {
     enabled: boolean;
   };
+  version?: string;
 }
 
 export interface Group {