feat: introduce application mode

app/vmui/packages/vmui/src/components/Home/Configurator/Query/ServerConfigurator.tsx

@@ -1,9 +1,10 @@
-import React, {FC, useState} from "react";
+import React, {FC, useEffect, useState} from "react";
 import {Box, TextField, Tooltip, IconButton} from "@mui/material";
 import SecurityIcon from "@mui/icons-material/Security";
 import {useAppDispatch, useAppState} from "../../../../state/common/StateContext";
 import {AuthDialog} from "../Auth/AuthDialog";
 import {ErrorTypes} from "../../../../types";
+import {getAppModeEnable, getAppModeParams} from "../../../../utils/app-mode";
 
 export interface ServerConfiguratorProps {
   error?: ErrorTypes | string;
@@ -11,6 +12,9 @@ export interface ServerConfiguratorProps {
 
 const ServerConfigurator: FC<ServerConfiguratorProps> = ({error}) => {
 
+  const appModeEnable = getAppModeEnable();
+  const {serverURL: appServerUrl} = getAppModeParams();
+
   const {serverUrl} = useAppState();
   const dispatch = useAppDispatch();
 
@@ -19,9 +23,13 @@ const ServerConfigurator: FC<ServerConfiguratorProps> = ({error}) => {
   };
   const [dialogOpen, setDialogOpen] = useState(false);
 
+  useEffect(() => {
+    if (appModeEnable) dispatch({type: "SET_SERVER", payload: appServerUrl});
+  }, [appServerUrl]);
+
   return <>
     <Box display="grid" gridTemplateColumns="1fr auto" gap="4px" alignItems="center" width="100%" mb={2} minHeight={50}>
-      <TextField variant="outlined" fullWidth label="Server URL" value={serverUrl}
+      <TextField variant="outlined" fullWidth label="Server URL" value={serverUrl || ""} disabled={appModeEnable}
         error={error === ErrorTypes.validServer || error === ErrorTypes.emptyServer}
         inputProps={{style: {fontFamily: "Monospace"}}}
         onChange={onSetServer}/>

app/vmui/packages/vmui/src/components/Home/Configurator/Query/useFetchQuery.ts

@@ -6,6 +6,10 @@ import {isValidHttpUrl} from "../../../../utils/url";
 import {useAuthState} from "../../../../state/auth/AuthStateContext";
 import {ErrorTypes, TimeParams} from "../../../../types";
 import {useGraphState} from "../../../../state/graph/GraphStateContext";
+import {getAppModeEnable, getAppModeParams} from "../../../../utils/app-mode";
+
+const appModeEnable = getAppModeEnable();
+const {serverURL: appServerUrl} = getAppModeParams();
 
 export const useFetchQuery = (): {
   fetchUrl?: string[],
@@ -80,18 +84,19 @@ export const useFetchQuery = (): {
   };
 
   const fetchUrl = useMemo(() => {
+    const server = appModeEnable ? appServerUrl : serverUrl;
     if (!period) return;
-    if (!serverUrl) {
+    if (!server) {
       setError(ErrorTypes.emptyServer);
     } else if (query.every(q => !q.trim())) {
       setError(ErrorTypes.validQuery);
-    } else if (isValidHttpUrl(serverUrl)) {
+    } else if (isValidHttpUrl(server)) {
       const duration = (period.end - period.start) / 2;
       const bufferPeriod = {...period, start: period.start - duration, end: period.end + duration};
       if (customStep.enable) bufferPeriod.step = customStep.value;
       return query.filter(q => q.trim()).map(q => displayType === "chart"
-        ? getQueryRangeUrl(serverUrl, q, bufferPeriod, nocache)
-        : getQueryUrl(serverUrl, q, period));
+        ? getQueryRangeUrl(server, q, bufferPeriod, nocache)
+        : getQueryUrl(server, q, period));
     } else {
       setError(ErrorTypes.validServer);
     }

app/vmui/packages/vmui/src/utils/app-mode.ts

@@ -0,0 +1,12 @@
+export interface AppParams {
+  serverURL: string
+}
+
+const getAppModeParams = (): AppParams => {
+  const dataParams = document.getElementById("root")?.dataset.params || "{}";
+  return JSON.parse(dataParams);
+};
+
+const getAppModeEnable = (): boolean => !!Object.keys(getAppModeParams()).length;
+
+export {getAppModeEnable, getAppModeParams};

app/vmui/packages/vmui/src/utils/query-string.ts

@@ -1,5 +1,6 @@
 import qs from "qs";
 import get from "lodash.get";
+import {getAppModeEnable} from "./app-mode";
 
 const stateToUrlParams = {
   "time.duration": "range_input",
@@ -8,6 +9,8 @@ const stateToUrlParams = {
   "displayType": "tab"
 };
 
+const appModeEnable = getAppModeEnable();
+
 // TODO need function for detect types.
 // const decoder = (value: string)  => {
 // This function does not parse dates
@@ -31,12 +34,16 @@ const stateToUrlParams = {
 export const setQueryStringWithoutPageReload = (qsValue: string): void => {
   const w = window;
   if (w) {
-    const newurl = `${w.location.protocol}//${w.location.host}${w.location.pathname}?${qsValue}`;
+    const newurl = `${w.location.protocol}//${w.location.host}${w.location.pathname}${qsValue ? "?" : ""}${qsValue}`;
     w.history.pushState({ path: newurl }, "", newurl);
   }
 };
 
 export const setQueryStringValue = (newValue: Record<string, unknown>): void => {
+  if (appModeEnable) {
+    setQueryStringWithoutPageReload("");
+    return;
+  }
   const queryMap = new Map(Object.entries(stateToUrlParams));
   const query = get(newValue, "query", "") as string[];
   const newQsValue: string[] = [];