KIALI-2426 Get serverConfig from static env.js

public/env.js

@@ -1,2 +1,14 @@
-// This file is intentionally left bank.
-// Kiali server may re-generate this file with configuration variables.
+// This file is setup for development mode (such as using "yarn start")
+// Make sure it always matches definition in kiali/config/public_config.go
+// !! WARNING !! KIALI SERVER WILL RE-GENERATE THIS FILE ON STARTUP
+window.serverConfig = {
+  istioNamespace: 'istio-system',
+  istioLabels: {
+    appLabelName: 'app',
+    versionLabelName: 'version'
+  },
+  prometheus: {
+    globalScrapeInterval: 15,
+    storageTsdbRetention: 21600
+  }
+};

src/actions/GraphDataThunkActions.ts

@@ -43,7 +43,7 @@ const GraphDataThunkActions = {
         graphType: graphType,
         injectServiceNodes: injectServiceNodes
       };
-      if (namespaces.find(namespace => namespace.name === serverConfig().istioNamespace)) {
+      if (namespaces.find(namespace => namespace.name === serverConfig.istioNamespace)) {
         restParams['includeIstio'] = true;
       }
 

src/actions/KialiAppAction.ts

@@ -8,7 +8,6 @@ import { LoginAction } from './LoginActions';
 import { MessageCenterAction } from './MessageCenterActions';
 import { NamespaceAction } from './NamespaceAction';
 import { UserSettingsAction } from './UserSettingsActions';
-import { ServerConfigAction } from './ServerConfigActions';
 import { JaegerAction } from './JaegerActions';
 
 export type KialiAppAction =
@@ -21,6 +20,5 @@ export type KialiAppAction =
   | LoginAction
   | MessageCenterAction
   | NamespaceAction
-  | ServerConfigAction
   | UserSettingsAction
   | JaegerAction;

src/actions/LoginThunkActions.ts

@@ -1,12 +1,10 @@
 import { ThunkDispatch } from 'redux-thunk';
-import { HTTP_CODES } from '../types/Common';
-import { KialiAppState, Token, ServerConfig } from '../store/Store';
+import { KialiAppState, Token } from '../store/Store';
 import { KialiAppAction } from './KialiAppAction';
 import HelpDropdownThunkActions from './HelpDropdownThunkActions';
 import GrafanaThunkActions from './GrafanaThunkActions';
 import { LoginActions } from './LoginActions';
 import * as API from '../services/Api';
-import { ServerConfigActions } from './ServerConfigActions';
 
 const ANONYMOUS: string = 'anonymous';
 
@@ -19,31 +17,12 @@ const completeLogin = (
   timeout?: number
 ) => {
   const auth = `Bearer ${token['token']}`;
-  API.getServerConfig(auth).then(
-    response => {
-      // set the serverConfig before completing login so that it is available for
-      // anything needing it to render properly.
-      const serverConfig: ServerConfig = {
-        istioNamespace: response.data.istioNamespace,
-        istioLabels: response.data.istioLabels,
-        prometheus: response.data.prometheus
-      };
-      dispatch(ServerConfigActions.setServerConfig(serverConfig));
+  // complete the login process
+  dispatch(LoginActions.loginSuccess(token, username, timeout));
 
-      // complete the login process
-      dispatch(LoginActions.loginSuccess(token, username, timeout));
-
-      // dispatch requests to be done now but not necessarily requiring immediate completion
-      dispatch(HelpDropdownThunkActions.refresh());
-      dispatch(GrafanaThunkActions.getInfo(auth));
-    },
-    error => {
-      /** Logout user */
-      if (error.response && error.response.status === HTTP_CODES.UNAUTHORIZED) {
-        dispatch(LoginActions.logoutSuccess());
-      }
-    }
-  );
+  // dispatch requests to be done now but not necessarily requiring immediate completion
+  dispatch(HelpDropdownThunkActions.refresh());
+  dispatch(GrafanaThunkActions.getInfo(auth));
 };
 
 // performLogin performs only the authentication part of login. If successful

src/app/History.ts

@@ -1,13 +1,13 @@
 import { createBrowserHistory } from 'history';
 import createMemoryHistory from 'history/createMemoryHistory';
+import { serverConfig, toValidDuration } from '../config/serverConfig';
 
-const webRoot = (window as any).WEB_ROOT ? (window as any).WEB_ROOT : undefined;
-const baseName = webRoot && webRoot !== '/' ? webRoot + '/console' : '/console';
+const baseName = serverConfig.webRoot && serverConfig.webRoot !== '/' ? serverConfig.webRoot + '/console' : '/console';
 const history = process.env.TEST_RUNNER ? createMemoryHistory() : createBrowserHistory({ basename: baseName });
 
 export default history;
 
-export enum URLParams {
+export enum URLParam {
   AGGREGATOR = 'aggregator',
   BY_LABELS = 'bylbl',
   DIRECTION = 'direction',
@@ -28,7 +28,7 @@ export enum URLParams {
 }
 
 export interface URLParamValue {
-  name: URLParams;
+  name: URLParam;
   value: any;
 }
 
@@ -38,18 +38,31 @@ export enum ParamAction {
 }
 
 export namespace HistoryManager {
-  export const setParam = (name: URLParams, value: string) => {
+  export const setParam = (name: URLParam, value: string) => {
     const urlParams = new URLSearchParams(history.location.search);
     urlParams.set(name, value);
     history.replace(history.location.pathname + '?' + urlParams.toString());
   };
 
-  export const getParam = (name: URLParams): string | null => {
-    const urlParams = new URLSearchParams(history.location.search);
-    return urlParams.get(name);
+  export const getParam = (name: URLParam, urlParams?: URLSearchParams): string | undefined => {
+    if (!urlParams) {
+      urlParams = new URLSearchParams(history.location.search);
+    }
+    const p = urlParams.get(name);
+    return p !== null ? p : undefined;
   };
 
-  export const deleteParam = (name: URLParams, historyReplace?: boolean) => {
+  export const getNumericParam = (name: URLParam, urlParams?: URLSearchParams): number | undefined => {
+    const p = getParam(name, urlParams);
+    return p !== undefined ? Number(p) : undefined;
+  };
+
+  export const getBooleanParam = (name: URLParam, urlParams?: URLSearchParams): boolean | undefined => {
+    const p = getParam(name, urlParams);
+    return p !== undefined ? p === 'true' : undefined;
+  };
+
+  export const deleteParam = (name: URLParam, historyReplace?: boolean) => {
     const urlParams = new URLSearchParams(history.location.search);
     urlParams.delete(name);
     if (historyReplace) {
@@ -82,4 +95,12 @@ export namespace HistoryManager {
       history.push(history.location.pathname + '?' + urlParams.toString());
     }
   };
+
+  export const getDuration = (urlParams?: URLSearchParams): number | undefined => {
+    const duration = getParam(URLParam.DURATION, urlParams);
+    if (duration) {
+      return toValidDuration(Number(duration));
+    }
+    return undefined;
+  };
 }

src/components/CytoscapeGraph/CytoscapeToolbar.tsx

@@ -14,8 +14,7 @@ import { CoseGraph } from './graphs/CoseGraph';
 import { DagreGraph } from './graphs/DagreGraph';
 import { KialiAppAction } from '../../actions/KialiAppAction';
 import { GraphActions } from '../../actions/GraphActions';
-import { HistoryManager, URLParams } from '../../app/History';
-import { ListPagesHelper } from '../ListPage/ListPagesHelper';
+import { HistoryManager, URLParam } from '../../app/History';
 import * as LayoutDictionary from './graphs/LayoutDictionary';
 import { GraphFilterActions } from '../../actions/GraphFilterActions';
 
@@ -46,19 +45,19 @@ export class CytoscapeToolbar extends React.PureComponent<CytoscapeToolbarProps>
   constructor(props: CytoscapeToolbarProps) {
     super(props);
     // Let URL override current redux state at construction time. Update URL with unset params.
-    const urlLayout = ListPagesHelper.getSingleQueryParam(URLParams.GRAPH_LAYOUT);
+    const urlLayout = HistoryManager.getParam(URLParam.GRAPH_LAYOUT);
     if (urlLayout) {
       if (urlLayout !== props.layout.name) {
         props.setLayout(LayoutDictionary.getLayoutByName(urlLayout));
       }
     } else {
-      HistoryManager.setParam(URLParams.GRAPH_LAYOUT, props.layout.name);
+      HistoryManager.setParam(URLParam.GRAPH_LAYOUT, props.layout.name);
     }
   }
 
   componentDidUpdate() {
     // ensure redux state and URL are aligned
-    HistoryManager.setParam(URLParams.GRAPH_LAYOUT, this.props.layout.name);
+    HistoryManager.setParam(URLParam.GRAPH_LAYOUT, this.props.layout.name);
   }
 
   render() {

src/components/GraphFilter/GraphFilter.tsx

@@ -16,8 +16,7 @@ import { EdgeLabelMode } from '../../types/GraphFilter';
 import GraphFindContainer from './GraphFind';
 import GraphRefreshContainer from './GraphRefresh';
 import GraphSettingsContainer from './GraphSettings';
-import { HistoryManager, URLParams } from '../../app/History';
-import { ListPagesHelper } from '../../components/ListPage/ListPagesHelper';
+import history, { HistoryManager, URLParam } from '../../app/History';
 import { ToolbarDropdown } from '../ToolbarDropdown/ToolbarDropdown';
 import Namespace, { namespacesToString, namespacesFromString } from '../../types/Namespace';
 import { NamespaceActions } from '../../actions/NamespaceAction';
@@ -75,45 +74,46 @@ export class GraphFilter extends React.PureComponent<GraphFilterProps> {
   constructor(props: GraphFilterProps) {
     super(props);
     // Let URL override current redux state at construction time. Update URL with unset params.
-    const urlEdgeLabelMode = ListPagesHelper.getSingleQueryParam(URLParams.GRAPH_EDGES) as EdgeLabelMode;
+    const urlParams = new URLSearchParams(history.location.search);
+    const urlEdgeLabelMode = HistoryManager.getParam(URLParam.GRAPH_EDGES, urlParams) as EdgeLabelMode;
     if (urlEdgeLabelMode) {
       if (urlEdgeLabelMode !== props.edgeLabelMode) {
         props.setEdgeLabelMode(urlEdgeLabelMode);
       }
     } else {
-      HistoryManager.setParam(URLParams.GRAPH_EDGES, String(this.props.edgeLabelMode));
+      HistoryManager.setParam(URLParam.GRAPH_EDGES, String(this.props.edgeLabelMode));
     }
 
-    const urlGraphType = ListPagesHelper.getSingleQueryParam(URLParams.GRAPH_TYPE) as GraphType;
+    const urlGraphType = HistoryManager.getParam(URLParam.GRAPH_TYPE, urlParams) as GraphType;
     if (urlGraphType) {
       if (urlGraphType !== props.graphType) {
         props.setGraphType(urlGraphType);
       }
     } else {
-      HistoryManager.setParam(URLParams.GRAPH_TYPE, String(this.props.graphType));
+      HistoryManager.setParam(URLParam.GRAPH_TYPE, String(this.props.graphType));
     }
 
-    const urlNamespaces = ListPagesHelper.getSingleQueryParam(URLParams.NAMESPACES);
+    const urlNamespaces = HistoryManager.getParam(URLParam.NAMESPACES, urlParams);
     if (urlNamespaces) {
       if (urlNamespaces !== namespacesToString(props.activeNamespaces)) {
         props.setActiveNamespaces(namespacesFromString(urlNamespaces));
       }
     } else {
       const activeNamespacesString = namespacesToString(props.activeNamespaces);
-      HistoryManager.setParam(URLParams.NAMESPACES, activeNamespacesString);
+      HistoryManager.setParam(URLParam.NAMESPACES, activeNamespacesString);
     }
   }
 
   componentDidUpdate() {
     // ensure redux state and URL are aligned
     const activeNamespacesString = namespacesToString(this.props.activeNamespaces);
     if (this.props.activeNamespaces.length === 0) {
-      HistoryManager.deleteParam(URLParams.NAMESPACES, true);
+      HistoryManager.deleteParam(URLParam.NAMESPACES, true);
     } else {
-      HistoryManager.setParam(URLParams.NAMESPACES, activeNamespacesString);
+      HistoryManager.setParam(URLParam.NAMESPACES, activeNamespacesString);
     }
-    HistoryManager.setParam(URLParams.GRAPH_EDGES, String(this.props.edgeLabelMode));
-    HistoryManager.setParam(URLParams.GRAPH_TYPE, String(this.props.graphType));
+    HistoryManager.setParam(URLParam.GRAPH_EDGES, String(this.props.edgeLabelMode));
+    HistoryManager.setParam(URLParam.GRAPH_TYPE, String(this.props.graphType));
   }
 
   handleRefresh = () => {