Fix error when changing api in agent preview of endpoints summary (#6802

) * Added HOC withGuard to endpoint summary agent preview syscollector, stats and configuration tabs * Changed HOCs order in agent-stats * Added CHANGELOG * Fixed pinning agent in NavigationService, fixed breadcrumb when there is no agent data and it is elevated to parent component withGuard of unselected agent * Removed unused import and changed navigate path to endpoints summary
wazuh · Jun 26, 2024 · dc13c3c · dc13c3c
1 parent dd2dec5
commit dc13c3c
Show file tree

Hide file tree

Showing 7 changed files with 97 additions and 89 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -18,6 +18,7 @@ All notable changes to the Wazuh app project will be documented in this file.
 - Added HAProxy helper settings to cluster configuration [#6653](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6653)
 - Added ability to open the report file or Reporting application from the toast message [#6558](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6558)
 - Added support for agents to Office 365 [#6558](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6558)
+- Added pinned agent data validation when rendering the Inventory data, Stats and Configuration tabs in Agent preview of Endpoints Summary [#6800](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6800)
 
 ### Changed
 

diff --git a/plugins/main/public/components/common/globalBreadcrumb/platformBreadcrumb.tsx b/plugins/main/public/components/common/globalBreadcrumb/platformBreadcrumb.tsx
@@ -6,34 +6,43 @@ export const setBreadcrumbs = (breadcrumbs, router) => {
   if (breadcrumbs === '' || breadcrumbs === undefined) {
     return;
   }
-  const breadcrumbsCustom = breadcrumbs?.map(breadcrumb =>
-    breadcrumb.agent
-      ? {
-          className:
-            'euiLink euiLink--subdued osdBreadcrumbs wz-vertical-align-middle',
-          onClick: ev => {
-            ev.stopPropagation();
-            if (getWzCurrentAppID() === endpointSummary.id) {
-              NavigationService.getInstance().navigate(
-                `/agents?tab=welcome&agent=${breadcrumb.agent.id}`,
-              );
-            } else {
-              NavigationService.getInstance().navigateToApp(
-                endpointSummary.id,
-                {
-                  path: `#/agents?tab=welcome&agent=${breadcrumb.agent.id}`,
-                },
-              );
-            }
+  const breadcrumbsCustom = breadcrumbs
+    ?.map(breadcrumb =>
+      breadcrumb?.agent?.id
+        ? {
+            className:
+              'euiLink euiLink--subdued osdBreadcrumbs wz-vertical-align-middle',
+            onClick: ev => {
+              ev.stopPropagation();
+              if (getWzCurrentAppID() === endpointSummary.id) {
+                NavigationService.getInstance().navigate(
+                  `/agents?tab=welcome&agent=${breadcrumb.agent.id}`,
+                );
+              } else {
+                NavigationService.getInstance().navigateToApp(
+                  endpointSummary.id,
+                  {
+                    path: `#/agents?tab=welcome&agent=${breadcrumb.agent.id}`,
+                  },
+                );
+              }
+            },
+            truncate: true,
+            text: breadcrumb.agent.name,
+          }
+        : /*
+          Some use cases cause get Breadcrumbs to have the agent property
+          undefined. In this case a null is added and then with the filter it
+          is filtered
+        */
+        typeof breadcrumb.agent !== 'undefined'
+        ? null
+        : {
+            ...breadcrumb,
+            className: 'osdBreadcrumbs',
           },
-          truncate: true,
-          text: breadcrumb.agent.name,
-        }
-      : {
-          ...breadcrumb,
-          className: 'osdBreadcrumbs',
-        },
-  );
+    )
+    .filter(value => value);
 
   getCore().chrome.setBreadcrumbs(breadcrumbsCustom);
 

diff --git a/plugins/main/public/components/common/modules/main-agent.tsx b/plugins/main/public/components/common/modules/main-agent.tsx
@@ -14,7 +14,6 @@ import React, { Component, Fragment } from 'react';
 import {
   EuiFlexGroup,
   EuiFlexItem,
-  EuiCallOut,
   EuiTitle,
   EuiButtonEmpty,
 } from '@elastic/eui';
@@ -106,7 +105,6 @@ export class MainModuleAgent extends Component {
 
   render() {
     const { agent, section, selectView } = this.props;
-    const title = this.renderTitle();
     const ModuleTabView = (this.props.tabs || []).find(
       tab => tab.id === selectView,
     );
@@ -118,11 +116,11 @@ export class MainModuleAgent extends Component {
             : 'wz-module'
         }
       >
-        <div className='wz-module-header-agent-wrapper'>
-          <div className='wz-module-header-agent'>{title}</div>
-        </div>
         {agent && agent.os && (
           <Fragment>
+            <div className='wz-module-header-agent-wrapper'>
+              <div className='wz-module-header-agent'>{this.renderTitle()}</div>
+            </div>
             <div>
               <div
                 className={
@@ -186,14 +184,6 @@ export class MainModuleAgent extends Component {
               )}
           </Fragment>
         )}
-        {(!agent || !agent.os) && (
-          <EuiCallOut
-            style={{ margin: '66px 16px 0 16px' }}
-            title='This agent has never connected'
-            color='warning'
-            iconType='alert'
-          ></EuiCallOut>
-        )}
       </div>
     );
   }

diff --git a/plugins/main/public/components/common/welcome/agents-welcome.js b/plugins/main/public/components/common/welcome/agents-welcome.js
@@ -24,7 +24,6 @@ import {
   EuiToolTip,
   EuiButtonIcon,
   EuiPageBody,
-  EuiLink,
 } from '@elastic/eui';
 import {
   FimEventsTable,
@@ -43,10 +42,7 @@ import { withErrorBoundary, withGlobalBreadcrumb, withGuard } from '../hocs';
 import { compose } from 'redux';
 import { API_NAME_AGENT_STATUS } from '../../../../common/constants';
 import { WAZUH_MODULES } from '../../../../common/wazuh-modules';
-import {
-  PromptAgentNeverConnected,
-  PromptNoSelectedAgent,
-} from '../../agents/prompts';
+import { PromptAgentNeverConnected } from '../../agents/prompts';
 import { WzButton } from '../buttons';
 import {
   Applications,
@@ -83,28 +79,6 @@ export const AgentsWelcome = compose(
         : []),
     ];
   }),
-  withGuard(
-    props => !(props.agent && props.agent.id),
-    () => (
-      <>
-        <PromptNoSelectedAgent
-          body={
-            <>
-              You need to select an agent or return to
-              <RedirectAppLinks application={getCore().application}>
-                <EuiLink
-                  aria-label='go to Endpoint summary'
-                  href={`${endpointSummary.id}#/agents-preview`}
-                >
-                  Endpoint summary
-                </EuiLink>
-              </RedirectAppLinks>
-            </>
-          }
-        />
-      </>
-    ),
-  ),
   withGuard(
     props => props.agent.status === API_NAME_AGENT_STATUS.NEVER_CONNECTED,
     PromptAgentNeverConnected,

diff --git a/plugins/main/public/components/endpoints-summary/agent/index.tsx b/plugins/main/public/components/endpoints-summary/agent/index.tsx
@@ -1,11 +1,15 @@
 import React, { useState, useEffect } from 'react';
-import { EuiPage, EuiPageBody, EuiProgress } from '@elastic/eui';
+import { EuiPage, EuiPageBody, EuiProgress, EuiLink } from '@elastic/eui';
 import { AgentsWelcome } from '../../common/welcome/agents-welcome';
 import { Agent } from '../types';
 import { MainSyscollector } from '../../agents/syscollector/main';
 import { MainAgentStats } from '../../agents/stats';
 import WzManagementConfiguration from '../../../controllers/management/components/management/configuration/configuration-main.js';
-import { withErrorBoundary, withRouteResolvers } from '../../common/hocs';
+import {
+  withErrorBoundary,
+  withGuard,
+  withRouteResolvers,
+} from '../../common/hocs';
 import { compose } from 'redux';
 import { PinnedAgentManager } from '../../wz-agent-selector/wz-agent-selector-service';
 import { MainModuleAgent } from '../../common/modules/main-agent';
@@ -18,11 +22,46 @@ import {
 import { useRouterSearch } from '../../common/hooks/use-router-search';
 import { Redirect, Route, Switch } from '../../router-search';
 import NavigationService from '../../../react-services/navigation-service';
+import { connect } from 'react-redux';
+import { PromptNoSelectedAgent } from '../../agents/prompts';
+import { RedirectAppLinks } from '../../../../../../src/plugins/opensearch_dashboards_react/public';
+import { getCore } from '../../../kibana-services';
+import { endpointSummary } from '../../../utils/applications';
+
+const mapStateToProps = state => ({
+  agent: state.appStateReducers?.currentAgentData,
+});
 
 export const AgentView = compose(
   withErrorBoundary,
   withRouteResolvers({ enableMenu, ip, nestedResolve, savedSearch }),
-)(() => {
+  connect(mapStateToProps),
+  withGuard(
+    props => !(props.agent && props.agent.id),
+    () => (
+      <>
+        <PromptNoSelectedAgent
+          body={
+            <>
+              You need to select an agent or return to
+              <RedirectAppLinks application={getCore().application}>
+                <EuiLink
+                  aria-label='go to Endpoint summary'
+                  href={`${endpointSummary.id}#/agents-preview`}
+                  onClick={() =>
+                    NavigationService.getInstance().navigate(`/agents-preview`)
+                  }
+                >
+                  Endpoint summary
+                </EuiLink>
+              </RedirectAppLinks>
+            </>
+          }
+        />
+      </>
+    ),
+  ),
+)(({ agent: agentData }) => {
   const { tab = 'welcome' } = useRouterSearch();
   const navigationService = NavigationService.getInstance();
 
@@ -35,23 +74,20 @@ export const AgentView = compose(
 
   const pinnedAgentManager = new PinnedAgentManager();
 
-  const [agent, setAgent] = useState<Agent>();
   const [isLoadingAgent, setIsLoadingAgent] = useState(true);
 
-  const getAgent = async () => {
+  const syncAgent = async () => {
     setIsLoadingAgent(true);
     await pinnedAgentManager.syncPinnedAgentSources();
-    const isPinnedAgent = pinnedAgentManager.isPinnedAgent();
-    setAgent(isPinnedAgent ? pinnedAgentManager.getPinnedAgent() : null);
     setIsLoadingAgent(false);
   };
 
   useEffect(() => {
-    getAgent();
+    syncAgent();
   }, [tab]);
 
   const switchTab = (tab: string) => {
-    navigationService.navigate(`/agents?tab=${tab}&agent=${agent?.id}`);
+    navigationService.navigate(`/agents?tab=${tab}&agent=${agentData?.id}`);
   };
 
   if (isLoadingAgent) {
@@ -67,21 +103,21 @@ export const AgentView = compose(
   return (
     <Switch>
       <Route path='?tab=syscollector'>
-        <MainModuleAgent agent={agent} section={tab} />
-        <MainSyscollector agent={agent} />
+        <MainModuleAgent agent={agentData} section={tab} />
+        <MainSyscollector agent={agentData} />
       </Route>
       <Route path='?tab=stats'>
-        <MainModuleAgent agent={agent} section={tab} />
-        <MainAgentStats agent={agent} />
+        <MainModuleAgent agent={agentData} section={tab} />
+        <MainAgentStats agent={agentData} />
       </Route>
       <Route path='?tab=configuration'>
-        <MainModuleAgent agent={agent} section={tab} />
-        <WzManagementConfiguration agent={agent} />
+        <MainModuleAgent agent={agentData} section={tab} />
+        <WzManagementConfiguration agent={agentData} />
       </Route>
       <Route path='?tab=welcome'>
         <AgentsWelcome
           switchTab={switchTab}
-          agent={agent}
+          agent={agentData}
           pinAgent={pinnedAgentManager.pinAgent}
           unPinAgent={pinnedAgentManager.unPinAgent}
         />

diff --git a/plugins/main/public/components/wz-agent-selector/wz-agent-selector-service.ts b/plugins/main/public/components/wz-agent-selector/wz-agent-selector-service.ts
@@ -42,16 +42,15 @@ export class PinnedAgentManager {
     const includesAgentViewURL = this.navigationService
       .getPathname()
       .includes(this.AGENT_VIEW_URL);
+    const params = this.navigationService.getParams();
 
-    const urlSearchParams = this.navigationService.getParams();
-
-    urlSearchParams.set(
+    params.set(
       includesAgentViewURL
         ? PinnedAgentManager.AGENT_ID_VIEW_KEY
         : PinnedAgentManager.AGENT_ID_URL_VIEW_KEY,
       String(agentData?.id),
     );
-    this.navigationService.renewURL(urlSearchParams);
+    this.navigationService.renewURL(params);
   }
 
   unPinAgent(): void {

diff --git a/...n/public/controllers/management/components/management/configuration/configuration-main.js b/...n/public/controllers/management/components/management/configuration/configuration-main.js
@@ -9,7 +9,6 @@
  *
  * Find more information about this on the LICENSE file.
  */
-
 import WzConfigurationSwitch from './configuration-switch';
 import {
   withErrorBoundary,
@@ -23,7 +22,7 @@ export default compose(
   withErrorBoundary,
   withGlobalBreadcrumb(props => {
     let breadcrumb = false;
-    if (props.agent.id === '000') {
+    if (props.agent?.id === '000') {
       breadcrumb = [{ text: settings.breadcrumbLabel }];
     } else {
       breadcrumb = [