5814 adapt the breadcrum to the new menu

plugins/main/public/components/add-modules-data/add-modules-data-main.tsx

@@ -9,31 +9,24 @@
  *
  * Find more information about this on the LICENSE file.
  */
-import React, { Fragment, Component } from 'react';
+import React, { Component } from 'react';
 
 import {
-	EuiButtonIcon,
-	EuiCard,
-	EuiFlexGrid,
 	EuiFlexGroup,
 	EuiFlexItem,
-	EuiIcon,
 	EuiPage,
 	EuiPageBody,
 	EuiSpacer,
-	EuiTabbedContent,
 	EuiText,
 	EuiTitle,
-	EuiToolTip
 } from '@elastic/eui';
 
-import WzModuleGuide from './module-guide';
 import WzSampleData from './sample-data';
 import modeGuides from './guides';
 
-import { WAZUH_MODULES } from '../../../common/wazuh-modules';
-import { updateGlobalBreadcrumb } from '../../redux/actions/globalBreadcrumbActions';
-import store from '../../redux/store';
+import { compose } from 'redux';
+
+import { withGlobalBreadcrumb } from '../common/hocs';
 
 const guides = Object.keys(modeGuides).map(key => modeGuides[key]).sort((a,b) => {
 	if (a.name < b.name) { return -1 }
@@ -50,7 +43,7 @@ interface IStateWzAddModulesData {
 	selectedGuideCategory: any
 };
 
-export default class WzAddModulesData extends Component<IPropsWzAddModulesData, IStateWzAddModulesData>{
+class WzAddModulesData extends Component<IPropsWzAddModulesData, IStateWzAddModulesData>{
 	tabs: any
 	constructor(props){
 		super(props);
@@ -96,17 +89,7 @@ export default class WzAddModulesData extends Component<IPropsWzAddModulesData,
 		// }
 		// "redirect=sample_data" is injected into the href of the "here" button in the callout notifying of installed sample alerts
 	}
-	setGlobalBreadcrumb() {
-    const breadcrumb = [
-			{ text: '' },
-			{ text: 'Management', href: '#/manager' },
-			{ text: 'Sample data' }
-		];
-    store.dispatch(updateGlobalBreadcrumb(breadcrumb));
-  }
-  componentDidMount() {
-    this.setGlobalBreadcrumb();
-  }
+
 	changeGuide = (guide: string = '') => {
 		this.setState({ guide });
 	}
@@ -117,7 +100,7 @@ export default class WzAddModulesData extends Component<IPropsWzAddModulesData,
 		return category !== '' ? guides.filter(guide => guide.category === category) : guides;
 	}
 	render(){
-		// const { guide, selectedGuideCategory } = this.state; // DON'T DELETE. IT'S FOR MODULE GUIDES. 
+		// const { guide, selectedGuideCategory } = this.state; // DON'T DELETE. IT'S FOR MODULE GUIDES.
 		return (
 			<EuiPage restrictWidth='1200px'>
 				<EuiPageBody>
@@ -177,4 +160,14 @@ export default class WzAddModulesData extends Component<IPropsWzAddModulesData,
 			</EuiPage>
 		)
 	}
-}
+}
+
+
+export default compose(
+  withGlobalBreadcrumb(props => {
+    return [
+      { text: '' },
+      { text: 'Server data' }
+    ];
+  }),
+)(WzAddModulesData);

plugins/main/public/components/agents/stats/agent-stats.tsx

@@ -18,21 +18,33 @@ import {
   EuiPage,
   EuiPageBody,
   EuiSpacer,
-  EuiText
+  EuiText,
 } from '@elastic/eui';
 
-import { withGlobalBreadcrumb, withReduxProvider, withGuard, withUserAuthorizationPrompt, withErrorBoundary } from '../../common/hocs';
+import {
+  withGlobalBreadcrumb,
+  withReduxProvider,
+  withGuard,
+  withUserAuthorizationPrompt,
+  withErrorBoundary,
+} from '../../common/hocs';
 import { compose } from 'redux';
 import { WzRequest, formatUIDate } from '../../../react-services';
 import { AgentStatTable } from './table';
-import { PromptNoActiveAgentWithoutSelect, PromptAgentFeatureVersion } from '../prompts';
+import {
+  PromptNoActiveAgentWithoutSelect,
+  PromptAgentFeatureVersion,
+} from '../prompts';
 import {
   UIErrorLog,
   UI_ERROR_SEVERITIES,
   UILogLevel,
   UIErrorSeverity,
 } from '../../../react-services/error-orchestrator/types';
-import { API_NAME_AGENT_STATUS, UI_LOGGER_LEVELS } from '../../../../common/constants';
+import {
+  API_NAME_AGENT_STATUS,
+  UI_LOGGER_LEVELS,
+} from '../../../../common/constants';
 import { getErrorOrchestrator } from '../../../react-services/common-services';
 
 const tableColumns = [
@@ -50,83 +62,111 @@ const tableColumns = [
     field: 'bytes',
     name: 'Bytes',
     sortable: true,
-  }
-];
-
-const statsAgents: {title: string, field: string, render?: (value) => any}[] = [
-  {
-    title: 'Status',
-    field: 'status',
-  },
-  {
-    title: 'Buffer',
-    field: 'buffer_enabled',
-    render: (value) => value ? 'enabled' : 'disabled'
-  },
-  {
-    title: 'Message buffer',
-    field: 'msg_buffer'
-  },
-  {
-    title: 'Messages count',
-    field: 'msg_count'
-  },
-  {
-    title: 'Messages sent',
-    field: 'msg_sent'
-  },
-  {
-    title: 'Last ack',
-    field: 'last_ack',
-    render: formatUIDate
   },
-  {
-    title: 'Last keep alive',
-    field: 'last_keepalive',
-    render: formatUIDate
-  }
 ];
 
+const statsAgents: { title: string; field: string; render?: (value) => any }[] =
+  [
+    {
+      title: 'Status',
+      field: 'status',
+    },
+    {
+      title: 'Buffer',
+      field: 'buffer_enabled',
+      render: value => (value ? 'enabled' : 'disabled'),
+    },
+    {
+      title: 'Message buffer',
+      field: 'msg_buffer',
+    },
+    {
+      title: 'Messages count',
+      field: 'msg_count',
+    },
+    {
+      title: 'Messages sent',
+      field: 'msg_sent',
+    },
+    {
+      title: 'Last ack',
+      field: 'last_ack',
+      render: formatUIDate,
+    },
+    {
+      title: 'Last keep alive',
+      field: 'last_keepalive',
+      render: formatUIDate,
+    },
+  ];
+
 export const MainAgentStats = compose(
   withErrorBoundary,
   withReduxProvider,
-  withGlobalBreadcrumb(({agent}) => [
+  withGlobalBreadcrumb(({ agent }) => [
     {
-      text: ''
+      text: '',
     },
     {
-      text: 'Agents',
-      href: "#/agents-preview"
+      text: 'IT Hygiene',
     },
     { agent },
     {
-      text: 'Stats'
+      text: 'Stats',
     },
   ]),
-  withUserAuthorizationPrompt(({agent}) => [[
-    {action: 'agent:read', resource: `agent:id:${agent.id}`},
-    ...(agent.group || []).map(group => ({ action: 'agent:read', resource: `agent:group:${group}` }))
-  ]]),
-  withGuard(({agent}) => agent.status !== API_NAME_AGENT_STATUS.ACTIVE, PromptNoActiveAgentWithoutSelect),
-  withGuard(({agent}) => {
-    const [major, minor, patch] = agent.version.replace('Wazuh v','').split('.').map(value => parseInt(value));
-    return !(major >= 4 && minor >= 2 && patch >= 0)
-  }, () => <PromptAgentFeatureVersion version='equal or higher version than 4.2.0'/>)
+  withUserAuthorizationPrompt(({ agent }) => [
+    [
+      { action: 'agent:read', resource: `agent:id:${agent.id}` },
+      ...(agent.group || []).map(group => ({
+        action: 'agent:read',
+        resource: `agent:group:${group}`,
+      })),
+    ],
+  ]),
+  withGuard(
+    ({ agent }) => agent.status !== API_NAME_AGENT_STATUS.ACTIVE,
+    PromptNoActiveAgentWithoutSelect,
+  ),
+  withGuard(
+    ({ agent }) => {
+      const [major, minor, patch] = agent.version
+        .replace('Wazuh v', '')
+        .split('.')
+        .map(value => parseInt(value));
+      return !(major >= 4 && minor >= 2 && patch >= 0);
+    },
+    () => (
+      <PromptAgentFeatureVersion version='equal or higher version than 4.2.0' />
+    ),
+  ),
 )(AgentStats);
 
-function AgentStats({agent}){
+function AgentStats({ agent }) {
   const [loading, setLoading] = useState();
   const [dataStatLogcollector, setDataStatLogcollector] = useState({});
   const [dataStatAgent, setDataStatAgent] = useState();
   useEffect(() => {
-    (async function(){
+    (async function () {
       setLoading(true);
-      try{
-        const responseDataStatLogcollector = await WzRequest.apiReq('GET', `/agents/${agent.id}/stats/logcollector`, {});
-        const responseDataStatAgent = await WzRequest.apiReq('GET', `/agents/${agent.id}/stats/agent`, {});
-        setDataStatLogcollector(responseDataStatLogcollector?.data?.data?.affected_items?.[0] || {});
-        setDataStatAgent(responseDataStatAgent?.data?.data?.affected_items?.[0] || undefined);
-      } catch(error) {
+      try {
+        const responseDataStatLogcollector = await WzRequest.apiReq(
+          'GET',
+          `/agents/${agent.id}/stats/logcollector`,
+          {},
+        );
+        const responseDataStatAgent = await WzRequest.apiReq(
+          'GET',
+          `/agents/${agent.id}/stats/agent`,
+          {},
+        );
+        setDataStatLogcollector(
+          responseDataStatLogcollector?.data?.data?.affected_items?.[0] || {},
+        );
+        setDataStatAgent(
+          responseDataStatAgent?.data?.data?.affected_items?.[0] || undefined,
+        );
+      } catch (error) {
         const options: UIErrorLog = {
           context: `${AgentStats.name}.useEffect`,
           level: UI_LOGGER_LEVELS.ERROR as UILogLevel,
@@ -141,18 +181,31 @@ function AgentStats({agent}){
       } finally {
         setLoading(false);
       }
-    })()
+    })();
   }, []);
   return (
     <EuiPage>
       <EuiPageBody>
         <EuiFlexGroup>
           <EuiFlexItem>
-            <EuiPanel paddingSize="m">
+            <EuiPanel paddingSize='m'>
               <EuiFlexGroup>
                 {statsAgents.map(stat => (
                   <EuiFlexItem key={`agent-stat-${stat.field}`} grow={false}>
-                    <EuiText>{stat.title}: {loading ? <EuiLoadingSpinner size="s" /> : <strong>{dataStatAgent !== undefined ? (stat.render ? stat.render(dataStatAgent[stat.field]) : dataStatAgent?.[stat.field]) : '-'}</strong>}</EuiText>
+                    <EuiText>
+                      {stat.title}:{' '}
+                      {loading ? (
+                        <EuiLoadingSpinner size='s' />
+                      ) : (
+                        <strong>
+                          {dataStatAgent !== undefined
+                            ? stat.render
+                              ? stat.render(dataStatAgent[stat.field])
+                              : dataStatAgent?.[stat.field]
+                            : '-'}
+                        </strong>
+                      )}
+                    </EuiText>
                   </EuiFlexItem>
                 ))}
               </EuiFlexGroup>
@@ -186,5 +239,5 @@ function AgentStats({agent}){
         </EuiFlexGroup>
       </EuiPageBody>
     </EuiPage>
-  )
+  );
 }

plugins/main/public/components/agents/syscollector/main.tsx

@@ -11,7 +11,29 @@
  */
 
 import React from 'react';
-import { withErrorBoundary } from '../../common/hocs';
+import {
+  withErrorBoundary,
+  withGlobalBreadcrumb,
+  withReduxProvider,
+} from '../../common/hocs';
 import { SyscollectorInventory } from './inventory';
+import { compose } from 'redux';
 
-export const MainSyscollector = withErrorBoundary(SyscollectorInventory);
+export const MainSyscollector = compose(
+  withReduxProvider,
+  withErrorBoundary,
+  withGlobalBreadcrumb(({ agent }) => {
+    return [
+      {
+        text: '',
+      },
+      {
+        text: 'IT Hygiene',
+      },
+      { agent },
+      {
+        text: 'Inventory Data',
+      },
+    ];
+  }),
+)(SyscollectorInventory);