New Kiali Container that includes MessageCenter (#267)

kiali · Feb 21, 2024 · 87c7e92 · 87c7e92
1 parent d9a8f23
commit 87c7e92
Show file tree

Hide file tree

Showing 9 changed files with 92 additions and 78 deletions.
diff --git a/plugin/src/openshift/components/KialiContainer.tsx b/plugin/src/openshift/components/KialiContainer.tsx
@@ -0,0 +1,41 @@
+import * as React from 'react';
+import { Provider } from 'react-redux';
+import { store } from 'store/ConfigStore';
+import { KialiController } from '../components/KialiController';
+import { MessageCenter } from 'components/MessageCenter';
+import { globalStyle } from 'styles/GlobalStyle';
+import cssVariables from 'styles/variables.module.scss';
+import { kialiStyle } from 'styles/StyleUtils';
+
+import 'tippy.js/dist/tippy.css';
+import 'tippy.js/dist/themes/light-border.css';
+
+// Enables ACE editor YAML themes
+import 'ace-builds/src-noconflict/ace';
+import 'ace-builds/src-noconflict/mode-yaml';
+import 'ace-builds/src-noconflict/theme-eclipse';
+import 'ace-builds/src-noconflict/theme-twilight';
+
+// Enables the search box for the ACE editor
+import 'ace-builds/src-noconflict/ext-searchbox';
+
+const ossmcStyle = kialiStyle({
+  display: 'flex',
+  flexDirection: 'column',
+  overflowY: 'auto'
+});
+
+interface Props {
+  children: React.ReactNode;
+}
+
+export const KialiContainer: React.FC<Props> = ({ children }) => {
+  return (
+    <Provider store={store}>
+      <MessageCenter drawerTitle="Message Center" />
+      <div className={`${globalStyle} ${ossmcStyle} ${cssVariables.style}`}>
+        <KialiController>{children}</KialiController>
+      </div>
+    </Provider>
+  );
+};
diff --git a/plugin/src/openshift/components/KialiController.tsx b/plugin/src/openshift/components/KialiController.tsx
@@ -27,22 +27,8 @@ import { MeshTlsActions } from 'actions/MeshTlsActions';
 import { TLSStatus } from 'types/TLSStatus';
 import { IstioCertsInfoActions } from 'actions/IstioCertsInfoActions';
 import { CertsInfo } from 'types/CertsInfo';
-import { globalStyle } from 'styles/GlobalStyle';
-import { kialiStyle } from 'styles/StyleUtils';
 import { store } from 'store/ConfigStore';
-import cssVariables from 'styles/variables.module.scss';
-
-import 'tippy.js/dist/tippy.css';
-import 'tippy.js/dist/themes/light-border.css';
-
-// Enables ACE editor YAML themes
-import 'ace-builds/src-noconflict/ace';
-import 'ace-builds/src-noconflict/mode-yaml';
-import 'ace-builds/src-noconflict/theme-eclipse';
-import 'ace-builds/src-noconflict/theme-twilight';
-
-// Enables the search box for the ACE editor
-import 'ace-builds/src-noconflict/ext-searchbox';
+import { kialiStyle } from 'styles/StyleUtils';
 
 declare global {
   interface Date {
@@ -58,10 +44,11 @@ Date.prototype.toLocaleStringWithConditionalDate = function () {
   return nowDate === thisDate ? this.toLocaleTimeString() : this.toLocaleString();
 };
 
-const ossmcStyle = kialiStyle({
+const centerVerticalHorizontalStyle = kialiStyle({
+  height: '100%',
   display: 'flex',
-  flexDirection: 'column',
-  overflowY: 'auto'
+  alignItems: 'center',
+  justifyContent: 'center'
 });
 
 interface KialiControllerReduxProps {
@@ -102,9 +89,9 @@ class KialiControllerComponent extends React.Component<KialiControllerProps> {
 
   render(): React.ReactNode {
     return this.state.configLoaded ? (
-      <div className={`${globalStyle} ${ossmcStyle} ${cssVariables.style}`}>{this.props.children}</div>
+      <>{this.props.children}</>
     ) : (
-      false
+      <h1 className={centerVerticalHorizontalStyle}>Loading...</h1>
     );
   }
 

diff --git a/plugin/src/openshift/pages/GraphPage.tsx b/plugin/src/openshift/pages/GraphPage.tsx
@@ -1,17 +1,15 @@
 import * as React from 'react';
-import { Provider } from 'react-redux';
-import { store } from 'store/ConfigStore';
 import { GraphPage } from 'pages/Graph/GraphPage';
 import { GraphPagePF } from 'pages/GraphPF/GraphPagePF';
-import { KialiController } from '../components/KialiController';
 import { getPluginConfig, useInitKialiListeners } from '../utils/KialiIntegration';
 import { useHistory } from 'react-router';
 import { setHistory } from 'app/History';
 import { kialiStyle } from 'styles/StyleUtils';
+import { KialiContainer } from 'openshift/components/KialiContainer';
 
 const containerPadding = kialiStyle({ padding: '0 20px 0 20px' });
 
-const GraphPageOSSMC = () => {
+const GraphPageOSSMC: React.FC<void> = () => {
   useInitKialiListeners();
 
   const [pluginConfig, setPluginConfig] = React.useState({
@@ -30,14 +28,12 @@ const GraphPageOSSMC = () => {
   setHistory(history.location.pathname);
 
   return (
-    <Provider store={store}>
+    <KialiContainer>
       <div className={containerPadding}>
-        <KialiController>
-          {pluginConfig.graph.impl === 'cy' && <GraphPage></GraphPage>}
-          {pluginConfig.graph.impl === 'pf' && <GraphPagePF></GraphPagePF>}
-        </KialiController>
+        {pluginConfig.graph.impl === 'cy' && <GraphPage></GraphPage>}
+        {pluginConfig.graph.impl === 'pf' && <GraphPagePF></GraphPagePF>}
       </div>
-    </Provider>
+    </KialiContainer>
   );
 };
 

diff --git a/plugin/src/openshift/pages/IstioConfigListPage.tsx b/plugin/src/openshift/pages/IstioConfigListPage.tsx
@@ -25,8 +25,6 @@ import * as API from 'services/Api';
 import { Namespace } from 'types/Namespace';
 import { PromisesRegistry } from 'utils/CancelablePromises';
 import { getIstioObject, getReconciliationCondition } from 'utils/IstioConfigUtils';
-import { KialiController } from '../components/KialiController';
-import { store } from 'store/ConfigStore';
 import { ErrorPage, OSSMCError } from 'openshift/components/ErrorPage';
 
 interface IstioConfigObject extends IstioObject {
@@ -175,7 +173,13 @@ const IstioConfigListPage = () => {
 
   // Fetch the Istio configs, convert to istio items and map them into flattened list items
   const fetchIstioConfigs = React.useCallback(async (): Promise<IstioConfigItem[]> => {
-    const validate = store.getState().statusState.istioEnvironment.istioAPIEnabled;
+    const validate = await promises
+      .register('getStatus', API.getStatus())
+      .then(response => response.data.istioEnvironment.istioAPIEnabled)
+      .catch(error => {
+        setLoadError({ title: error.response?.statusText, message: error.response?.data.error });
+        return false;
+      });
 
     if (ns) {
       const getIstioConfigData = promises.register('getIstioConfig', API.getIstioConfig(ns, [], validate, '', ''));
@@ -241,7 +245,7 @@ const IstioConfigListPage = () => {
   const columns = useIstioTableColumns();
 
   return (
-    <KialiController>
+    <>
       {loadError ? (
         <ErrorPage title={loadError.title} message={loadError.message}></ErrorPage>
       ) : (
@@ -257,7 +261,7 @@ const IstioConfigListPage = () => {
           </ListPageBody>
         </>
       )}
-    </KialiController>
+    </>
   );
 };
 

diff --git a/plugin/src/openshift/pages/MeshTab/IstioMesh.tsx b/plugin/src/openshift/pages/MeshTab/IstioMesh.tsx
@@ -1,12 +1,10 @@
 import * as React from 'react';
-import { Provider } from 'react-redux';
 import { useHistory } from 'react-router';
-import { store } from 'store/ConfigStore';
 import { IstioConfigId } from 'types/IstioConfigDetails';
 import { IstioConfigDetailsPage } from 'pages/IstioConfigDetails/IstioConfigDetailsPage';
-import { KialiController } from '../../components/KialiController';
 import { useInitKialiListeners } from '../../utils/KialiIntegration';
 import { setHistory } from 'app/History';
+import { KialiContainer } from 'openshift/components/KialiContainer';
 
 const configTypes = {
   DestinationRule: 'DestinationRules',
@@ -22,7 +20,7 @@ const configTypes = {
   RequestAuthentication: 'RequestAuthentications'
 };
 
-const IstioConfigMeshTab = () => {
+const IstioConfigMeshTab: React.FC<void> = () => {
   useInitKialiListeners();
 
   const history = useHistory();
@@ -41,11 +39,9 @@ const IstioConfigMeshTab = () => {
   };
 
   return (
-    <Provider store={store}>
-      <KialiController>
-        <IstioConfigDetailsPage istioConfigId={istioConfigId}></IstioConfigDetailsPage>
-      </KialiController>
-    </Provider>
+    <KialiContainer>
+      <IstioConfigDetailsPage istioConfigId={istioConfigId}></IstioConfigDetailsPage>
+    </KialiContainer>
   );
 };
 

diff --git a/plugin/src/openshift/pages/MeshTab/ProjectMesh.tsx b/plugin/src/openshift/pages/MeshTab/ProjectMesh.tsx
@@ -1,15 +1,17 @@
 import * as React from 'react';
-import { Provider } from 'react-redux';
 import { useHistory } from 'react-router';
 import { ActionKeys } from 'actions/ActionKeys';
 import { store } from 'store/ConfigStore';
 import { GraphPage } from 'pages/Graph/GraphPage';
 import { GraphPagePF } from 'pages/GraphPF/GraphPagePF';
-import { KialiController } from '../../components/KialiController';
 import { getPluginConfig, useInitKialiListeners } from '../../utils/KialiIntegration';
 import { setHistory } from 'app/History';
+import { KialiContainer } from 'openshift/components/KialiContainer';
+import { kialiStyle } from 'styles/StyleUtils';
 
-const ProjectMeshTab = () => {
+const containerPadding = kialiStyle({ padding: '0 20px 0 20px' });
+
+const ProjectMeshTab: React.FC<void> = () => {
   useInitKialiListeners();
 
   const [pluginConfig, setPluginConfig] = React.useState({
@@ -35,12 +37,12 @@ const ProjectMeshTab = () => {
   store.dispatch({ type: ActionKeys.SET_ACTIVE_NAMESPACES, payload: [{ name: namespace }] });
 
   return (
-    <Provider store={store}>
-      <KialiController>
+    <KialiContainer>
+      <div className={containerPadding}>
         {pluginConfig.graph.impl === 'cy' && <GraphPage></GraphPage>}
         {pluginConfig.graph.impl === 'pf' && <GraphPagePF></GraphPagePF>}
-      </KialiController>
-    </Provider>
+      </div>
+    </KialiContainer>
   );
 };
 

diff --git a/plugin/src/openshift/pages/MeshTab/ServiceMesh.tsx b/plugin/src/openshift/pages/MeshTab/ServiceMesh.tsx
@@ -1,14 +1,12 @@
 import * as React from 'react';
-import { Provider } from 'react-redux';
 import { useHistory } from 'react-router';
-import { store } from 'store/ConfigStore';
 import { ServiceId } from 'types/ServiceId';
 import { ServiceDetailsPage } from 'pages/ServiceDetails/ServiceDetailsPage';
-import { KialiController } from '../../components/KialiController';
 import { useInitKialiListeners } from '../../utils/KialiIntegration';
 import { setHistory } from 'app/History';
+import { KialiContainer } from 'openshift/components/KialiContainer';
 
-const ServiceMeshTab = () => {
+const ServiceMeshTab: React.FC<void> = () => {
   useInitKialiListeners();
 
   const history = useHistory();
@@ -25,11 +23,9 @@ const ServiceMeshTab = () => {
   };
 
   return (
-    <Provider store={store}>
-      <KialiController>
-        <ServiceDetailsPage serviceId={serviceId}></ServiceDetailsPage>
-      </KialiController>
-    </Provider>
+    <KialiContainer>
+      <ServiceDetailsPage serviceId={serviceId}></ServiceDetailsPage>
+    </KialiContainer>
   );
 };
 

diff --git a/plugin/src/openshift/pages/MeshTab/WorkloadMesh.tsx b/plugin/src/openshift/pages/MeshTab/WorkloadMesh.tsx
@@ -1,14 +1,12 @@
 import * as React from 'react';
-import { Provider } from 'react-redux';
 import { useHistory } from 'react-router';
-import { store } from 'store/ConfigStore';
 import { WorkloadId } from 'types/Workload';
 import { WorkloadDetailsPage } from 'pages/WorkloadDetails/WorkloadDetailsPage';
-import { KialiController } from '../../components/KialiController';
 import { useInitKialiListeners } from '../../utils/KialiIntegration';
 import { setHistory } from 'app/History';
+import { KialiContainer } from 'openshift/components/KialiContainer';
 
-const WorkloadMeshTab = () => {
+const WorkloadMeshTab: React.FC<void> = () => {
   useInitKialiListeners();
 
   const history = useHistory();
@@ -43,11 +41,9 @@ const WorkloadMeshTab = () => {
   };
 
   return (
-    <Provider store={store}>
-      <KialiController>
-        <WorkloadDetailsPage workloadId={workloadId}></WorkloadDetailsPage>
-      </KialiController>
-    </Provider>
+    <KialiContainer>
+      <WorkloadDetailsPage workloadId={workloadId}></WorkloadDetailsPage>
+    </KialiContainer>
   );
 };
 

diff --git a/plugin/src/openshift/pages/OverviewPage.tsx b/plugin/src/openshift/pages/OverviewPage.tsx
@@ -1,24 +1,20 @@
 import * as React from 'react';
-import { Provider } from 'react-redux';
-import { store } from 'store/ConfigStore';
 import { OverviewPage } from 'pages/Overview/OverviewPage';
-import { KialiController } from '../components/KialiController';
 import { useInitKialiListeners } from '../utils/KialiIntegration';
 import { setHistory } from 'app/History';
 import { useHistory } from 'react-router';
+import { KialiContainer } from 'openshift/components/KialiContainer';
 
-const OverviewPageOSSMC = () => {
+const OverviewPageOSSMC: React.FC<void> = () => {
   useInitKialiListeners();
 
   const history = useHistory();
   setHistory(history.location.pathname);
 
   return (
-    <Provider store={store}>
-      <KialiController>
-        <OverviewPage></OverviewPage>
-      </KialiController>
-    </Provider>
+    <KialiContainer>
+      <OverviewPage></OverviewPage>
+    </KialiContainer>
   );
 };