Adapt OSSMC to Kiali release v1.88 (kiali#339)

* Copy of Kiali frontend source code Kiali frontend source originated from: * git ref: v1.88 * git commit: 139b6e879b2fc36f807fcd0d94d43b3fc7dc64e4 * GitHub URL: https://github.com/kiali/kiali/tree/139b6e879b2fc36f807fcd0d94d43b3fc7dc64e4/frontend/src Signed-off-by: Fernando Hoyos <[email protected]> * Adapt OSSMC to Kiali release v1.88 --------- Signed-off-by: Fernando Hoyos <[email protected]>
ferhoyos · Jul 31, 2024 · 9ec0679 · 9ec0679
1 parent c5bcb85
commit 9ec0679
Show file tree

Hide file tree

Showing 157 changed files with 1,822 additions and 1,685 deletions.
diff --git a/plugin/src/kiali/README.md b/plugin/src/kiali/README.md
@@ -2,6 +2,6 @@
 
 Copy of Kiali frontend source code
 Kiali frontend source originated from:
-* git ref:    v1.87.0
-* git commit: 1913b4cfd5d0f1d4b2261b990fead586c6eed876
-* GitHub URL: https://github.com/kiali/kiali/tree/1913b4cfd5d0f1d4b2261b990fead586c6eed876/frontend/src
+* git ref:    v1.88
+* git commit: 139b6e879b2fc36f807fcd0d94d43b3fc7dc64e4
+* GitHub URL: https://github.com/kiali/kiali/tree/139b6e879b2fc36f807fcd0d94d43b3fc7dc64e4/frontend/src
diff --git a/plugin/src/kiali/actions/__tests__/LoginAction.test.ts b/plugin/src/kiali/actions/__tests__/LoginAction.test.ts
@@ -3,7 +3,7 @@ import { LoginActions } from '../LoginActions';
 import { LoginStatus } from '../../store/Store';
 
 const session = {
-  expiresOn: '018-05-29 21:51:40.186179601 +0200 CEST m=+36039.431579761',
+  expiresOn: '2018-05-29 21:51:40.186179601 +0200 CEST m=+36039.431579761',
   username: 'admin'
 };
 

diff --git a/plugin/src/kiali/app/App.tsx b/plugin/src/kiali/app/App.tsx
@@ -2,13 +2,11 @@ import axios from 'axios';
 import * as React from 'react';
 import { PersistGate } from 'redux-persist/lib/integration/react';
 import { Provider } from 'react-redux';
-import { Router, withRouter } from 'react-router-dom';
 import * as Visibility from 'visibilityjs';
 import { GlobalActions } from '../actions/GlobalActions';
 import { Navigation } from '../components/Nav/Navigation';
 import { persistor, store } from '../store/ConfigStore';
 import { AuthenticationController } from './AuthenticationController';
-import { history } from './History';
 import { InitializingScreen } from './InitializingScreen';
 import { StartupInitializer } from './StartupInitializer';
 import { LoginPage } from '../pages/Login/LoginPage';
@@ -30,12 +28,12 @@ if (Visibility.hidden()) {
   store.dispatch(GlobalActions.setPageVisibilityVisible());
 }
 
-const getIsLoadingState = () => {
+const getIsLoadingState = (): boolean => {
   const state = store.getState();
   return state && state.globalState.loadingCounter > 0;
 };
 
-const decrementLoadingCounter = () => {
+const decrementLoadingCounter = (): void => {
   if (getIsLoadingState()) {
     store.dispatch(GlobalActions.decrementLoadingCounter());
   }
@@ -83,49 +81,25 @@ axios.interceptors.response.use(
   }
 );
 
-type AppState = {
-  isInitialized: boolean;
+export const App: React.FC = () => {
+  const [isInitialized, setIsInitialized] = React.useState<boolean>(false);
+
+  return (
+    <React.Suspense fallback={<InitializingScreen />}>
+      <Provider store={store}>
+        <PersistGate loading={<InitializingScreen />} persistor={persistor}>
+          {isInitialized ? (
+            <AuthenticationController
+              publicAreaComponent={(isPostLoginPerforming: boolean, errorMsg?: string) => (
+                <LoginPage isPostLoginPerforming={isPostLoginPerforming} postLoginErrorMsg={errorMsg} />
+              )}
+              protectedAreaComponent={<Navigation />}
+            />
+          ) : (
+            <StartupInitializer onInitializationFinished={() => setIsInitialized(true)} />
+          )}
+        </PersistGate>
+      </Provider>
+    </React.Suspense>
+  );
 };
-
-export class App extends React.Component<{}, AppState> {
-  private protectedArea: React.ReactNode;
-
-  constructor(props: {}) {
-    super(props);
-    this.state = {
-      isInitialized: false
-    };
-
-    const Navigator = withRouter(Navigation);
-    this.protectedArea = (
-      <Router history={history}>
-        <Navigator />
-      </Router>
-    );
-  }
-
-  render() {
-    return (
-      <React.Suspense fallback={<InitializingScreen />}>
-        <Provider store={store}>
-          <PersistGate loading={<InitializingScreen />} persistor={persistor}>
-            {this.state.isInitialized ? (
-              <AuthenticationController
-                publicAreaComponent={(isPostLoginPerforming: boolean, errorMsg?: string) => (
-                  <LoginPage isPostLoginPerforming={isPostLoginPerforming} postLoginErrorMsg={errorMsg} />
-                )}
-                protectedAreaComponent={this.protectedArea}
-              />
-            ) : (
-              <StartupInitializer onInitializationFinished={this.initializationFinishedHandler} />
-            )}
-          </PersistGate>
-        </Provider>
-      </React.Suspense>
-    );
-  }
-
-  private initializationFinishedHandler = () => {
-    this.setState({ isInitialized: true });
-  };
-}
diff --git a/plugin/src/kiali/app/AuthenticationController.tsx b/plugin/src/kiali/app/AuthenticationController.tsx
@@ -17,7 +17,7 @@ import { setServerConfig, serverConfig, humanDurations } from '../config/ServerC
 import { AuthStrategy } from '../types/Auth';
 import { TracingInfo } from '../types/TracingInfo';
 import { LoginActions } from '../actions/LoginActions';
-import { history } from './History';
+import { location, router } from './History';
 import { NamespaceActions } from 'actions/NamespaceAction';
 import { Namespace } from 'types/Namespace';
 import { UserSettingsActions } from 'actions/UserSettingsActions';
@@ -114,7 +114,7 @@ class AuthenticationControllerComponent extends React.Component<
           stage: LoginStage.LOGGED_IN_AT_LOAD
         });
       } else {
-        this.props.setLandingRoute(history.location.pathname + history.location.search);
+        this.props.setLandingRoute(location.getPathname() + location.getSearch());
       }
     }
 
@@ -203,7 +203,7 @@ class AuthenticationControllerComponent extends React.Component<
       this.applyUIDefaults();
 
       if (this.props.landingRoute) {
-        history.replace(this.props.landingRoute);
+        router.navigate(this.props.landingRoute, { replace: true });
         this.props.setLandingRoute(undefined);
       }
 

diff --git a/plugin/src/kiali/app/History.ts → plugin/src/kiali/app/History.tsx b/plugin/src/kiali/app/History.ts → plugin/src/kiali/app/History.tsx
@@ -1,31 +1,45 @@
-import { createBrowserHistory, createMemoryHistory, createHashHistory } from 'history';
+import * as React from 'react';
 import { toValidDuration } from '../config/ServerConfig';
 import { BoundsInMilliseconds } from 'types/Common';
+import { RouteObject, createBrowserRouter, createHashRouter, createMemoryRouter } from 'react-router-dom-v5-compat';
+
+export const createRouter = (routes: RouteObject[], basename?: string): any => {
+  const baseName = basename ?? rootBasename;
 
-const createHistory = (baseName: string): any => {
   return process.env.TEST_RUNNER
-    ? createMemoryHistory()
+    ? createMemoryRouter(routes, { basename: baseName })
     : historyMode === 'hash'
-    ? createHashHistory()
-    : createBrowserHistory({ basename: baseName });
+    ? createHashRouter(routes, { basename: baseName })
+    : createBrowserRouter(routes, { basename: baseName });
 };
 
+export const webRoot = (window as any).WEB_ROOT ?? '/';
+export const rootBasename = webRoot !== '/' ? `${webRoot}/console` : '/console';
+const historyMode = (window as any).HISTORY_MODE ?? 'browser';
+
 /**
  * Some platforms set a different basename for each page (e.g., Openshift Console)
  * A setHistory method is defined to be able to modify the history basename when user
  * routes to a different page within Kiali in these platforms.
  * This method is not used in standalone Kiali application
  */
-export const setHistory = (baseName: string): void => {
-  history = createHistory(baseName);
+export const setRouter = (routes: RouteObject[], basename?: string): void => {
+  router = createRouter(routes, basename);
 };
 
-const webRoot = (window as any).WEB_ROOT ? (window as any).WEB_ROOT : undefined;
-const baseName = webRoot && webRoot !== '/' ? `${webRoot}/console` : '/console';
-const historyMode = (window as any).HISTORY_MODE ? (window as any).HISTORY_MODE : 'browser';
-let history = createHistory(baseName);
+let router = createRouter([{ element: <></> }], rootBasename);
+
+const location = {
+  getPathname: (): string => {
+    return router.state.location.pathname.replace(router.basename, '');
+  },
 
-export { history };
+  getSearch: (): string => {
+    return router.state.location.search;
+  }
+};
+
+export { router, location };
 
 export enum URLParam {
   AGGREGATOR = 'aggregator',
@@ -97,15 +111,17 @@ export enum ParamAction {
 
 export class HistoryManager {
   static setParam = (name: URLParam | string, value: string): void => {
-    const urlParams = new URLSearchParams(history.location.search);
+    const urlParams = new URLSearchParams(location.getSearch());
     urlParams.set(name, value);
-    history.replace(`${history.location.pathname}?${urlParams.toString()}`);
+
+    router.navigate(`${location.getPathname()}?${urlParams.toString()}`, { replace: true });
   };
 
   static getParam = (name: URLParam | string, urlParams?: URLSearchParams): string | undefined => {
     if (!urlParams) {
-      urlParams = new URLSearchParams(history.location.search);
+      urlParams = new URLSearchParams(location.getSearch());
     }
+
     const p = urlParams.get(name);
     return p !== null ? p : undefined;
   };
@@ -120,73 +136,54 @@ export class HistoryManager {
     return p !== undefined ? p === 'true' : undefined;
   };
 
-  static deleteParam = (name: URLParam, historyReplace?: boolean): void => {
-    const urlParams = new URLSearchParams(history.location.search);
+  static deleteParam = (name: URLParam): void => {
+    const urlParams = new URLSearchParams(location.getSearch());
     urlParams.delete(name);
-    if (historyReplace) {
-      history.replace(`${history.location.pathname}?${urlParams.toString()}`);
-    } else {
-      history.push(`${history.location.pathname}?${urlParams.toString()}`);
-    }
-  };
 
-  static setParams = (params: URLParamValue[], paramAction?: ParamAction, historyReplace?: boolean): void => {
-    const urlParams = new URLSearchParams(history.location.search);
-
-    if (params.length > 0 && paramAction === ParamAction.APPEND) {
-      params.forEach(param => urlParams.delete(param.name));
-    }
-
-    params.forEach(param => {
-      if (param.value === '') {
-        urlParams.delete(param.name);
-      } else if (paramAction === ParamAction.APPEND) {
-        urlParams.append(param.name, param.value);
-      } else {
-        urlParams.set(param.name, param.value);
-      }
-    });
-
-    if (historyReplace) {
-      history.replace(`${history.location.pathname}?${urlParams.toString()}`);
-    } else {
-      history.push(`${history.location.pathname}?${urlParams.toString()}`);
-    }
+    router.navigate(`${location.getPathname()}?${urlParams.toString()}`, { replace: true });
   };
 
   static getClusterName = (urlParams?: URLSearchParams): string | undefined => {
     if (!urlParams) {
-      urlParams = new URLSearchParams(history.location.search);
+      urlParams = new URLSearchParams(location.getSearch());
     }
+
     return urlParams.get(URLParam.CLUSTERNAME) || undefined;
   };
 
   static getDuration = (urlParams?: URLSearchParams): number | undefined => {
     const duration = HistoryManager.getNumericParam(URLParam.DURATION, urlParams);
+
     if (duration) {
       return toValidDuration(Number(duration));
     }
+
     return undefined;
   };
 
   static getRangeDuration = (urlParams?: URLSearchParams): number | undefined => {
     const rangeDuration = HistoryManager.getNumericParam(URLParam.RANGE_DURATION, urlParams);
+
     if (rangeDuration) {
       return toValidDuration(Number(rangeDuration));
     }
+
     return undefined;
   };
 
   static getTimeBounds = (urlParams?: URLSearchParams): BoundsInMilliseconds | undefined => {
     const from = HistoryManager.getNumericParam(URLParam.FROM, urlParams);
+
     if (from) {
       const to = HistoryManager.getNumericParam(URLParam.TO, urlParams);
+
       // "to" can be undefined (stands for "now")
       return {
         from: from,
         to: to
       };
     }
+
     return undefined;
   };
 }
diff --git a/plugin/src/kiali/components/About/AboutUIModal.tsx b/plugin/src/kiali/components/About/AboutUIModal.tsx
@@ -16,7 +16,7 @@ import { config, kialiLogoDark } from '../../config';
 import { kialiStyle } from 'styles/StyleUtils';
 import { KialiIcon } from 'config/KialiIcon';
 import { ReactComponent as IstioLogo } from '../../assets/img/mesh/istio.svg';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router-dom-v5-compat';
 import { PFColors } from 'components/Pf/PfColors';
 
 type AboutUIModalProps = {