Left menu changes

plugins/main/public/components/common/globalBreadcrumb/globalBreadcrumb.tsx

@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import { EuiBreadcrumbs } from '@elastic/eui';
 import { connect } from 'react-redux';
 import { getAngularModule, getCore } from '../../../kibana-services';
+import { itHygiene } from '../../../utils/applications';
 
 class WzGlobalBreadcrumb extends Component {
   props: { state: { breadcrumb: [{ agent; text }] } };
@@ -23,7 +24,7 @@ class WzGlobalBreadcrumb extends Component {
               'euiLink euiLink--subdued osdBreadcrumbs wz-vertical-align-middle',
             onClick: ev => {
               ev.stopPropagation();
-              getCore().application.navigateToApp('it-hygiene', {
+              getCore().application.navigateToApp(itHygiene.id, {
                 path: `#/agents?tab=welcome&agent=${breadcrumb.agent.id}`,
               });
               this.router.reload();

plugins/main/public/components/common/modules/main-agent.tsx

@@ -28,6 +28,7 @@ import { AgentInfo } from '../../common/welcome/agents-info';
 import { getAngularModule } from '../../../kibana-services';
 import { compose } from 'redux';
 import { withGlobalBreadcrumb } from '../hocs';
+import { itHygiene } from '../../../utils/applications';
 
 export class MainModuleAgent extends Component {
   props!: {
@@ -222,22 +223,17 @@ export class MainModuleAgent extends Component {
   }
 }
 
-
 export default compose(
-  withGlobalBreadcrumb(({agent, section}) => {
+  withGlobalBreadcrumb(({ agent, section }) => {
     if (section === 'welcome') {
-      return [
-        { text: '' },
-        { text: 'IT Hygiene' },
-        { text: agent.id },
-      ];
+      return [{ text: '' }, { text: itHygiene.title }, { text: agent.id }];
     } else {
       return [
         {
           text: '',
         },
         {
-          text: 'IT Hygiene',
+          text: itHygiene.title,
         },
         { agent: agent },
         {

plugins/main/public/components/common/modules/overview-current-section.tsx

@@ -15,7 +15,8 @@ import { updateGlobalBreadcrumb } from '../../../redux/actions/globalBreadcrumbA
 import { updateCurrentTab } from '../../../redux/actions/appStateActions';
 import store from '../../../redux/store';
 import { connect } from 'react-redux';
-import { WAZUH_MODULES } from '../../../../common/wazuh-modules';
+import { getWzCurrentAppID } from '../../../kibana-services';
+import { Applications } from '../../../utils/applications';
 
 class WzCurrentOverviewSection extends Component {
   constructor(props) {
@@ -26,16 +27,20 @@ class WzCurrentOverviewSection extends Component {
   setGlobalBreadcrumb() {
     const currentAgent = store.getState().appStateReducers.currentAgentData;
 
-    if (WAZUH_MODULES[this.props.currentTab]) {
+    const section = Applications.find(
+      ({ id }) => getWzCurrentAppID() === id,
+    )?.title;
+
+    if (section) {
       const breadcrumb = currentAgent.id
         ? [
             { text: '' },
             {
-              text: WAZUH_MODULES[this.props.currentTab].title,
+              text: section,
             },
             { agent: currentAgent },
           ]
-        : [{ text: '' }, { text: WAZUH_MODULES[this.props.currentTab].title }];
+        : [{ text: '' }, { text: section }];
       store.dispatch(updateGlobalBreadcrumb(breadcrumb));
       $('#breadcrumbNoTitle').attr('title', '');
     }
@@ -60,16 +65,7 @@ class WzCurrentOverviewSection extends Component {
   }
 
   render() {
-    return (
-      <span>
-        {/*this.props.currentTab && WAZUH_MODULES[this.props.currentTab] && WAZUH_MODULES[this.props.currentTab].title && (
-      <EuiTitle size='s'>
-        <h2>
-          {WAZUH_MODULES[this.props.currentTab].title}
-       </h2>
-      </EuiTitle>)*/}
-      </span>
-    );
+    return <span></span>;
   }
 }
 

plugins/main/public/components/common/util/agent-group-truncate/group-truncate.tsx

@@ -21,6 +21,7 @@ import {
   EuiPopover,
 } from '@elastic/eui';
 import { getCore } from '../../../../kibana-services';
+import { endpointGroups } from '../../../../utils/applications';
 
 export class GroupTruncate extends React.Component {
   _isMount = false;
@@ -51,7 +52,7 @@ export class GroupTruncate extends React.Component {
   action(index, group) {
     switch (this.props.action) {
       case 'redirect':
-        return getCore().application.navigateToApp('endpoint-groups', {
+        return getCore().application.navigateToApp(endpointGroups.id, {
           path: `#/manager/?tab=groups&group=${group}`,
         });
       case 'filter':

plugins/main/public/components/common/welcome/agents-welcome.js

@@ -73,10 +73,12 @@ import {
   Applications,
   configurationAssessment,
   fileIntegrityMonitoring,
+  itHygiene,
   mitreAttack,
   threatHunting,
   vulnerabilityDetection,
 } from '../../../utils/applications';
+import { RedirectAppLinks } from '../../../../../../src/plugins/opensearch_dashboards_react/public';
 
 const mapStateToProps = state => ({
   agent: state.appStateReducers.currentAgentData,
@@ -96,7 +98,7 @@ export const AgentsWelcome = compose(
     return [
       { text: '' },
       {
-        text: 'IT Hygiene',
+        text: itHygiene.title,
       },
       ...(agent?.name
         ? [
@@ -278,21 +280,20 @@ export const AgentsWelcome = compose(
                   grow={false}
                   style={{ marginLeft: 0, marginTop: 7 }}
                 >
-                  <EuiButtonEmpty
-                    onClick={() => {
-                      getCore().application.navigateToApp(applicationId);
-                      this.router.reload();
-                    }}
-                    style={{ cursor: 'pointer' }}
-                  >
-                    <span>
-                      {
-                        Applications.find(({ id }) => id === applicationId)
-                          .title
-                      }
-                      &nbsp;
-                    </span>
-                  </EuiButtonEmpty>
+                  <RedirectAppLinks application={getCore().application}>
+                    <EuiButtonEmpty
+                      href={getCore().application.getUrlForApp(applicationId)}
+                      style={{ cursor: 'pointer' }}
+                    >
+                      <span>
+                        {
+                          Applications.find(({ id }) => id === applicationId)
+                            .title
+                        }
+                        &nbsp;
+                      </span>
+                    </EuiButtonEmpty>
+                  </RedirectAppLinks>
                 </EuiFlexItem>
               );
             }
@@ -498,14 +499,16 @@ export const AgentsWelcome = compose(
                 </EuiFlexItem>
                 <EuiFlexItem grow={false} style={{ alignSelf: 'center' }}>
                   <EuiToolTip position='top' content='Open MITRE ATT&CK'>
-                    <EuiButtonIcon
-                      iconType='popout'
-                      color='primary'
-                      onClick={() => {
-                        getCore().application.navigateToApp('mitre-attack');
-                      }}
-                      aria-label='Open MITRE ATT&CK'
-                    />
+                    <RedirectAppLinks application={getCore().application}>
+                      <EuiButtonIcon
+                        iconType='popout'
+                        color='primary'
+                        href={getCore().application.getUrlForApp(
+                          mitreAttack.id,
+                        )}
+                        aria-label='Open MITRE ATT&CK'
+                      />
+                    </RedirectAppLinks>
                   </EuiToolTip>
                 </EuiFlexItem>
               </EuiFlexGroup>
@@ -635,10 +638,7 @@ export const AgentsWelcome = compose(
                     </EuiFlexGrid>
                     <EuiSpacer size='m' />
                     <EuiFlexGroup>
-                      <FimEventsTable
-                        agent={this.props.agent}
-                        router={this.router}
-                      />
+                      <FimEventsTable agent={this.props.agent} />
                     </EuiFlexGroup>
                     <EuiSpacer size='m' />
                     <EuiFlexGroup>
@@ -668,10 +668,7 @@ export const AgentsWelcome = compose(
                           {this.renderCompliancePanel()}
                         </EuiFlexGroup>
                       </EuiFlexItem>
-                      <FimEventsTable
-                        agent={this.props.agent}
-                        router={this.router}
-                      />
+                      <FimEventsTable agent={this.props.agent} />
                     </EuiFlexGrid>
                     <EuiSpacer size='l' />
                     <EuiFlexGroup>

plugins/main/public/components/common/welcome/components/fim_events_table/fim_events_table.tsx

@@ -33,8 +33,10 @@ import { formatUIDate } from '../../../../../react-services/time-service';
 import { FlyoutDetail } from '../../../../agents/fim/inventory/flyout';
 import { EuiLink } from '@elastic/eui';
 import { getCore, getDataPlugin } from '../../../../../kibana-services';
+import { RedirectAppLinks } from '../../../../../../../../src/plugins/opensearch_dashboards_react/public';
+import { fileIntegrityMonitoring } from '../../../../../utils/applications';
 
-export function FimEventsTable({ agent, router }) {
+export function FimEventsTable({ agent }) {
   return (
     <EuiFlexItem>
       <EuiPanel paddingSize='m'>
@@ -47,12 +49,17 @@ export function FimEventsTable({ agent, router }) {
             </EuiFlexItem>
             <EuiFlexItem grow={false}>
               <EuiToolTip position='top' content='Open FIM'>
-                <EuiButtonIcon
-                  iconType='popout'
-                  color='primary'
-                  onClick={() => navigateToFim(agent, router)}
-                  aria-label='Open FIM'
-                />
+                <RedirectAppLinks application={getCore().application}>
+                  <EuiButtonIcon
+                    iconType='popout'
+                    color='primary'
+                    onClick={() => navigateToFim(agent)}
+                    href={getCore().application.getUrlForApp(
+                      fileIntegrityMonitoring.id,
+                    )}
+                    aria-label='Open FIM'
+                  />
+                </RedirectAppLinks>
               </EuiToolTip>
             </EuiFlexItem>
           </EuiFlexGroup>
@@ -114,9 +121,8 @@ function FimTable({ agent }) {
   );
 }
 
-function navigateToFim(agent, router) {
+function navigateToFim(agent) {
   store.dispatch(updateCurrentAgentData(agent));
-  getCore().application.navigateToApp('file-integrity-monitoring');
 }
 
 const columns = (setFile, setIsOpen) => [

plugins/main/public/components/common/welcome/components/menu-agent.js

@@ -16,6 +16,7 @@ import {
   EuiFlexItem,
   EuiIcon,
   EuiSideNav,
+  EuiLink,
 } from '@elastic/eui';
 import { connect } from 'react-redux';
 import { hasAgentSupportModule } from '../../../../react-services/wz-agents';
@@ -26,6 +27,7 @@ import {
 } from '../../../../kibana-services';
 import { updateCurrentAgentData } from '../../../../redux/actions/appStateActions';
 import { Applications, Categories } from '../../../../utils/applications';
+import { RedirectAppLinks } from '../../../../../../../src/plugins/opensearch_dashboards_react/public';
 
 class WzMenuAgent extends Component {
   constructor(props) {
@@ -71,7 +73,6 @@ class WzMenuAgent extends Component {
   clickMenuItem = appId => {
     this.props.closePopover();
     // do not redirect if we already are in that tab
-    getCore().application.navigateToApp(appId);
     this.props.updateCurrentAgentData(this.props.isAgent);
     this.router.reload();
   };
@@ -107,7 +108,14 @@ class WzMenuAgent extends Component {
             onClick={() => (!item.isTitle ? this.clickMenuItem(item.id) : null)}
             style={{ cursor: !item.isTitle ? 'pointer' : 'normal' }}
           >
-            {item.title}
+            <RedirectAppLinks application={getCore().application}>
+              <EuiLink
+                href={getCore().application.getUrlForApp(item.id)}
+                style={{ cursor: 'pointer' }}
+              >
+                {item.title}
+              </EuiLink>
+            </RedirectAppLinks>
           </EuiFlexItem>
           {this.state.hoverAddFilter === item.id &&
             !item.isTitle &&