Left menu changes (#6086)

### Description Changes in the left menu order Change of styles in Home > Overview Changed left menu and breadcrumbs names Redirects were changed so that it does not refresh the page and to have it centralized in the applications file. ### Issues Resolved - wazuh/wazuh-dashboard#94 ### Evidence ![image](https://github.com/wazuh/wazuh-dashboard-plugins/assets/63758389/6915bad3-2a30-4313-9ddf-409a3ff1ba66) ![image](https://github.com/wazuh/wazuh-dashboard-plugins/assets/63758389/140ef5ad-7f89-4ddf-8f23-d8ec870888dc) ![image](https://github.com/wazuh/wazuh-dashboard-plugins/assets/63758389/b7b5fd51-17e3-4a6a-a990-621ff9f86a48) ### Test Legend: :black_circle:: none :green_circle:: pass :yellow_circle:: warning :red_circle:: fail :white_circle:: not applicable ## UI | Test | Chrome | | --- | --- | | See the menu titles without camel case and the sub sections in camel case, in the breadcrumb it should look the same.| :black_circle: | | The Home > Overview icon styles should be the same as those in the menu (test it in dark and light mode) | :black_circle: | | Breadcrumb redirect well to the agent | :black_circle: | | In the agent view: The pinned applications should redirect to the respective application without reloading the page and if you hover it should show the url to which it redirects. | :black_circle: | | In the agent view: When the menu is opened with the `More` button the options should redirect to the respective application without reloading the page and if hovered the url to which it redirects should appear. | :black_circle: | | In the agent view: The Open MITRE ATT&CK button should redirect to the MITRE ATT&CK application without reloading the page and if hovered the url to which it redirects should appear. | :black_circle: | | In the agent view: On the `FIM` card the icon should redirect to `FIM` without reloading the page and if hovered the url should appear. | :black_circle: | | In the agent view: On the `SCA: last scan` card the icon should redirect to `SCA` without reloading the page and if the cursor is hovered over the url it redirects to should appear. | :black_circle: | | In the agent view: On the `SCA: last scan` card the title should redirect to `SCA` without reloading the page and hovering over it should display the url it redirects to. | :black_circle: | | In the agent view: On the `SCA: last scan` card The caption should redirect to `SCA` without reloading the page and if hovered over should display the url to which it redirects. | :black_circle: | | In the overview: Without agents the `Add agent` button should redirect to the `Endpoint Summary` application without making a page reload and if hovered the url to which it redirects should appear. | :black_circle: | | In the overview: The cards should redirect to their respective application without reloading the page and if you hover on the title you should see the url you are redirected to. | :black_circle: | | In the healthcheck: The `Go to settings` button should redirect to the `Server APIs` application without reloading the page and if you hover it should show the url to which it redirects. | :black_circle: | | Applications with sample data: The button that takes you to sample data from the applications should redirect to the `Sample Data` application without making a page reload and if you hover it should appear the url to which it redirects. | :black_circle: | | In Endpoint Summary: The action buttons of the table should redirect to the `IT Hygiene` application without reloading the page and if hovered the url to which it redirects should appear. | :black_circle: | | In the configuration of an agent: The group buttons should redirect to the `Endpoint Groups` application without reloading the page and if hovered the url should be displayed. | :black_circle: | | In statistics: The `Settings` button should redirect to the `App Settings` application without a page reload and if hovered the url to which it redirects should appear. | :black_circle: | **Details** <details> <summary>:black_circle: See the menu titles without camel case and the sub sections in camel case, in the breadcrumb it should look the same. </summary> Chrome - :black_circle: </details> <details> <summary>:black_circle: The Home > Overview icon styles should be the same as those in the menu (test it in dark and light mode)</summary> Chrome - :black_circle: </details> <details> <summary>:black_circle: Breadcrumb redirect well to the agent</summary> Chrome - :black_circle: </details> <details> <summary>:black_circle: In the agent view: The pinned applications should redirect to the respective application without reloading the page and if you hover it should show the url to which it redirects.</summary> Chrome - :black_circle: </details> <details> <summary>:black_circle: In the agent view: When the menu is opened with the `More` button the options should redirect to the respective application without reloading the page and if hovered the url to which it redirects should appear.</summary> Chrome - :black_circle: </details> <details> <summary>:black_circle: In the agent view: The Open MITRE ATT&CK button should redirect to the MITRE ATT&CK application without reloading the page and if hovered the url to which it redirects should appear.</summary> Chrome - :black_circle: </details> <details> <summary>:black_circle: In the agent view: On the `FIM` card the icon should redirect to `FIM` without reloading the page and if hovered the url should appear.</summary> Chrome - :black_circle: </details> <details> <summary>:black_circle: In the agent view: On the `SCA: last scan` card the icon should redirect to `SCA` without reloading the page and if the cursor is hovered over the url it redirects to should appear.</summary> Chrome - :black_circle: </details> <details> <summary>:black_circle: In the agent view: On the `SCA: last scan` card the title should redirect to `SCA` without reloading the page and hovering over it should display the url it redirects to.</summary> Chrome - :black_circle: </details> <details> <summary>:black_circle: In the agent view: On the `SCA: last scan` card The caption should redirect to `SCA` without reloading the page and if hovered over should display the url to which it redirects.</summary> Chrome - :black_circle: </details> <details> <summary>:black_circle: In the overview: Without agents the `Add agent` button should redirect to the `Endpoint Summary` application without making a page reload and if hovered the url to which it redirects should appear.</summary> Chrome - :black_circle: </details> <details> <summary>:black_circle: In the overview: The cards should redirect to their respective application without reloading the page and if you hover on the title you should see the url you are redirected to. </summary> Chrome - :black_circle: </details> <details> <summary>:black_circle: In the healthcheck: The `Go to settings` button should redirect to the `Server APIs` application without reloading the page and if you hover it should show the url to which it redirects.</summary> Chrome - :black_circle: </details> <details> <summary>:black_circle: - Applications with sample data: The button that takes you to sample data from the applications should redirect to the `Sample Data` application without making a page reload and if you hover it should appear the url to which it redirects.</summary> Chrome - :black_circle: </details> <details> <summary>:black_circle: - In Endpoint Summary: The action buttons of the table should redirect to the `IT Hygiene` application without reloading the page and if hovered the url to which it redirects should appear.</summary> Chrome - :black_circle: </details> <details> <summary>:black_circle: - In the configuration of an agent: The group buttons should redirect to the `Endpoint Groups` application without reloading the page and if hovered the url should be displayed.</summary> Chrome - :black_circle: </details> <details> <summary>:black_circle: - In statistics: The `Settings` button should redirect to the `App Settings` application without a page reload and if hovered the url to which it redirects should appear.</summary> Chrome - :black_circle: </details> ### Check List - [ ] All tests pass - [ ] `yarn test:jest` - [ ] New functionality includes testing. - [ ] New functionality has been documented. - [ ] Update [CHANGELOG.md](./../CHANGELOG.md) - [x] Commits are signed per the DCO using --signoff
wazuh · Nov 3, 2023 · 960af00 · 960af00
2 parents 6e693f4 + 628a146
commit 960af00
Show file tree

Hide file tree

Showing 38 changed files with 720 additions and 647 deletions.
diff --git a/plugins/main/public/components/common/globalBreadcrumb/globalBreadcrumb.tsx b/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();

diff --git a/plugins/main/public/components/common/modules/main-agent.tsx b/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 },
         {

diff --git a/plugins/main/public/components/common/modules/overview-current-section.tsx b/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>;
   }
 }
 

diff --git a/plugins/main/public/components/common/util/agent-group-truncate/group-truncate.tsx b/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':

diff --git a/plugins/main/public/components/common/welcome/agents-welcome.js b/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>

diff --git a/...ns/main/public/components/common/welcome/components/fim_events_table/fim_events_table.tsx b/...ns/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) => [

diff --git a/plugins/main/public/components/common/welcome/components/menu-agent.js b/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 &&