Unification the rendering of flyout columns

CHANGELOG.md

@@ -19,10 +19,11 @@ All notable changes to the Wazuh app project will be documented in this file.
 - 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)
+- Added wz-link component to make redirections [#6848](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6848)
 
 ### Changed
 
-- Removed embedded discover [#6120](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6120) [#6235](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6235) [#6254](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6254) [#6285](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6285) [#6288](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6288) [#6290](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6290) [#6289](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6289) [#6286](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6286) [#6275](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6275) [#6287](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6287) [#6297](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6297) [#6291](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6287) [#6459](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6459) [#6434](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6434) [#6504](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6504) [#6649](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6649) [#6506](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6506) [#6537](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6537) [#6528](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6528) [#6675](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6675) [#6674](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6674) [#6558](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6558) [#6685](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6685) [#6691](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6691) [#6712](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6712) [#6734](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6734) [#6746](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6746) [#6752](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6752) [#6753](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6753) [#6756](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6756) [#6771](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6771) [#6792](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6792) [#6845](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6845) [#6857](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6857) [#6847](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6847) [#6865](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6865)
+- Removed embedded discover [#6120](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6120) [#6235](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6235) [#6254](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6254) [#6285](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6285) [#6288](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6288) [#6290](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6290) [#6289](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6289) [#6286](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6286) [#6275](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6275) [#6287](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6287) [#6297](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6297) [#6291](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6287) [#6459](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6459) [#6434](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6434) [#6504](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6504) [#6649](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6649) [#6506](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6506) [#6537](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6537) [#6528](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6528) [#6675](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6675) [#6674](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6674) [#6558](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6558) [#6685](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6685) [#6691](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6691) [#6712](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6712) [#6734](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6734) [#6746](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6746) [#6752](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6752) [#6753](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6753) [#6756](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6756) [#6771](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6771) [#6792](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6792) [#6845](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6845) [#6857](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6857) [#6847](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6847) [#6865](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6865) [#6848](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6848)
 - Allow editing groups for an agent from Endpoints Summary [#6250](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6250)
 - Change how the configuration is managed in the backend side [#6337](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6337) [#6519](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6519) [#6573](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6573)
 - Change the view of API is down and check connection to Server APIs application [#6337](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6337)
@@ -44,7 +45,7 @@ All notable changes to the Wazuh app project will be documented in this file.
 - Improve margins and paddings in the Events, Inventory and Control tabs [#6708](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6708)
 - Refactored the search bar to correctly handle fixed and user-added filters [#6716](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6716) [#6755](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6755) [#6833](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6833)
 - Generate URL with predefined filters [#6745](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6745)
-- Migrated AngularJS routing to ReactJS [#6689](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6689) [#6775](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6775) [#6790](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6790
+- Migrated AngularJS routing to ReactJS [#6689](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6689) [#6775](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6775) [#6790](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6790)
 - Improvement of the filter management system by implementing new standard modules [#6534](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6534) [#6772](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6772)
 - Changed permalink field in the Events tab table in Virustotal to show an external link [#6839](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6839)
 

plugins/main/docs/wz-link.md

@@ -0,0 +1,50 @@
+## Link component
+
+To make the redirections we have to see if it is in the same application or in another application, depending on that it is necessary to make a type of redirection or another
+So this component was created to simplify the implementation and to be able to control everything in one place.
+
+The component needs as props the `appId` to go to and the `path` to navigate to. The component itself will know in which application it is located in order to display its respective link.
+
+#### Same application
+
+In this case we have to navigate with the React Router because the application does not recognise that we are navigating and does not navigate using the Opensearch Dashboard navigation.
+
+```tsx
+<EuiLink
+  {...otherProps}
+  onClick={() => {
+    NavigationService.getInstance().navigate(path);
+  }}
+>
+  {children}
+</EuiLink>
+```
+
+#### Diferent application
+
+When navigating between applications you can use Opensearch Dashboard navigation and have the path you are going to navigate to when you are over the link.
+
+```tsx
+<RedirectAppLinks application={getCore().application}>
+  <EuiLink
+    {...otherProps}
+    href={NavigationService.getInstance().getUrlForApp(appId, {
+      path: `#${path}`,
+    })}
+  >
+    {children}
+  </EuiLink>
+</RedirectAppLinks>
+```
+
+### Implementation
+
+```tsx
+  <WzLink
+    appId={<Application-to-go-to>}
+    path={<Path-to-navigate-to>}
+    otherPropsForTheEuiLink
+  >
+    whatever you want to render in the link
+  </WzLink>
+```

plugins/main/public/components/common/wazuh-discover/render-columns.tsx

@@ -1,70 +1,76 @@
 import React from 'react';
-import { EuiLink } from '@elastic/eui';
+import { EuiText } from '@elastic/eui';
 import { tDataGridRenderColumn } from '../data-grid';
-import { getCore } from '../../../kibana-services';
-import { RedirectAppLinks } from '../../../../../../src/plugins/opensearch_dashboards_react/public';
 import {
   endpointSummary,
   rules,
   mitreAttack,
 } from '../../../utils/applications';
-import NavigationService from '../../../react-services/navigation-service';
+import { WzLink } from '../../wz-link/wz-link';
 
 export const MAX_ENTRIES_PER_QUERY = 10000;
 
+const renderRequirementsSecurityOperations = (value: []) => {
+  return (
+    <EuiText gutterSize='s' direction='column'>
+      {value.join(', ')}
+    </EuiText>
+  );
+};
+
 const renderMitreTechnique = technique => (
-  <RedirectAppLinks application={getCore().application}>
-    <EuiLink
-      href={NavigationService.getInstance().getUrlForApp(mitreAttack.id, {
-        path: `#/overview?tab=mitre&tabView=intelligence&tabRedirect=techniques&idToRedirect=${technique}`,
-      })}
-    >
-      {technique}
-    </EuiLink>
-  </RedirectAppLinks>
+  <WzLink
+    appId={mitreAttack.id}
+    path={`/overview?tab=mitre&tabView=intelligence&tabRedirect=techniques&idToRedirect=${technique}`}
+  >
+    {technique}
+  </WzLink>
 );
 
 export const wzDiscoverRenderColumns: tDataGridRenderColumn[] = [
   {
     id: 'agent.id',
     render: value => {
-      if (value === '000') return value;
+      if (value === '000') {
+        return value;
+      }
 
       return (
-        <RedirectAppLinks application={getCore().application}>
-          <EuiLink
-            href={`${endpointSummary.id}#/agents?tab=welcome&agent=${value}`}
-          >
-            {value}
-          </EuiLink>
-        </RedirectAppLinks>
+        <WzLink
+          appId={endpointSummary.id}
+          path={`/agents?tab=welcome&agent=${value}`}
+        >
+          {value}
+        </WzLink>
       );
     },
   },
   {
     id: 'agent.name',
     render: (value, row) => {
-      if (row.agent.id === '000') return value;
+      if (row.agent.id === '000') {
+        return value;
+      }
 
       return (
-        <RedirectAppLinks application={getCore().application}>
-          <EuiLink
-            href={`${endpointSummary.id}#/agents?tab=welcome&agent=${row.agent.id}`}
-          >
-            {value}
-          </EuiLink>
-        </RedirectAppLinks>
+        <WzLink
+          appId={endpointSummary.id}
+          path={`/agents?tab=welcome&agent=${row.agent.id}`}
+        >
+          {value}
+        </WzLink>
       );
     },
   },
   {
     id: 'rule.id',
     render: value => (
-      <RedirectAppLinks application={getCore().application}>
-        <EuiLink href={`${rules.id}#/manager/?tab=rules&redirectRule=${value}`}>
-          {value}
-        </EuiLink>
-      </RedirectAppLinks>
+      <WzLink
+        appId={rules.id}
+        path={`/manager/?tab=rules&redirectRule=${value}`}
+      >
+        {value}
+      </WzLink>
     ),
   },
   {
@@ -82,4 +88,25 @@ export const wzDiscoverRenderColumns: tDataGridRenderColumn[] = [
         <div>{renderMitreTechnique(value)}</div>
       ),
   },
+
+  {
+    id: 'rule.pci_dss',
+    render: renderRequirementsSecurityOperations,
+  },
+  {
+    id: 'rule.gdpr',
+    render: renderRequirementsSecurityOperations,
+  },
+  {
+    id: 'rule.nist_800_53',
+    render: renderRequirementsSecurityOperations,
+  },
+  {
+    id: 'rule.hipaa',
+    render: renderRequirementsSecurityOperations,
+  },
+  {
+    id: 'rule.tsc',
+    render: renderRequirementsSecurityOperations,
+  },
 ];

plugins/main/public/components/overview/compliance-table/components/requirement-flyout/requirement-flyout.tsx

@@ -22,11 +22,10 @@ import {
   EuiText,
   EuiFlexItem,
   EuiSpacer,
-  EuiLink,
 } from '@elastic/eui';
 import { AppState } from '../../../../../react-services/app-state';
 import { requirementGoal } from '../../requirement-goal';
-import { getCore, getUiSettings } from '../../../../../kibana-services';
+import { getUiSettings } from '../../../../../kibana-services';
 import {
   FilterManager,
   IndexPattern,
@@ -38,20 +37,7 @@ import { formatUIDate } from '../../../../../react-services';
 import TechniqueRowDetails from '../../../mitre/framework/components/techniques/components/flyout-technique/technique-row-details';
 import { buildPhraseFilter } from '../../../../../../../../src/plugins/data/common';
 import { connect } from 'react-redux';
-import { rules } from '../../../../../utils/applications';
-import { endpointSummary } from '../../../../../utils/applications';
-import { RedirectAppLinks } from '../../../../../../../../src/plugins/opensearch_dashboards_react/public';
-import NavigationService from '../../../../../react-services/navigation-service';
-
-const renderRequirements = (value: []) => {
-  return (
-    <EuiFlexGroup gutterSize='s' direction='column'>
-      {value.map(v => {
-        return <EuiFlexItem key={v}>{v}</EuiFlexItem>;
-      })}
-    </EuiFlexGroup>
-  );
-};
+import { wzDiscoverRenderColumns } from '../../../../common/wazuh-discover/render-columns';
 
 const mapStateToProps = state => ({
   currentAgentData: state.appStateReducers.currentAgentData,
@@ -76,80 +62,66 @@ export const RequirementFlyout = connect(mapStateToProps)(
       this._isMount = true;
     }
 
+    addRenderColumn(columns) {
+      return columns.map(column => {
+        const renderColumn = wzDiscoverRenderColumns.find(
+          columnRender => columnRender.id === column.id,
+        );
+        if (renderColumn) {
+          return { ...column, render: renderColumn.render };
+        }
+        return column;
+      });
+    }
+
     getDiscoverColumns() {
+      const columnsAgent = [
+        {
+          id: 'timestamp',
+          displayAsText: 'Time',
+          render: value => formatUIDate(value),
+        },
+        {
+          id: this.props.getRequirementKey(),
+          displayAsText: 'Requirement(s)',
+        },
+        { id: 'rule.description', displayAsText: 'Description' },
+        { id: 'rule.level', displayAsText: 'Level' },
+        {
+          id: 'rule.id',
+          displayAsText: 'Rule ID',
+        },
+      ];
+
+      const columnsWithoutAgent = [
+        {
+          id: 'timestamp',
+          displayAsText: 'Time',
+          render: value => formatUIDate(value),
+        },
+        {
+          id: 'agent.id',
+          displayAsText: 'Agent',
+        },
+        {
+          id: 'agent.name',
+          displayAsText: 'Agent name',
+        },
+        {
+          id: this.props.getRequirementKey(),
+          displayAsText: 'Requirement',
+        },
+        { id: 'rule.description', displayAsText: 'Description' },
+        { id: 'rule.level', displayAsText: 'Level' },
+        {
+          id: 'rule.id',
+          displayAsText: 'Rule ID',
+        },
+      ];
       const agentId = this.props.currentAgentData?.id;
       return agentId
-        ? [
-            {
-              id: 'timestamp',
-              displayAsText: 'Time',
-              render: value => formatUIDate(value),
-            },
-            {
-              id: this.props.getRequirementKey(),
-              displayAsText: 'Requirement(s)',
-              render: renderRequirements,
-            },
-            { id: 'rule.description', displayAsText: 'Description' },
-            { id: 'rule.level', displayAsText: 'Level' },
-            {
-              id: 'rule.id',
-              displayAsText: 'Rule ID',
-              render: value => (
-                <RedirectAppLinks application={getCore().application}>
-                  <EuiLink
-                    href={`${rules.id}#/manager/?tab=rules&redirectRule=${value}`}
-                  >
-                    {value}
-                  </EuiLink>
-                </RedirectAppLinks>
-              ),
-            },
-          ]
-        : [
-            {
-              id: 'timestamp',
-              displayAsText: 'Time',
-              render: value => formatUIDate(value),
-            },
-            {
-              id: 'agent.id',
-              displayAsText: 'Agent',
-              render: value => (
-                <RedirectAppLinks application={getCore().application}>
-                  <EuiLink
-                    href={`${endpointSummary.id}#/agents/?tab=welcome&agent=${value}`}
-                  >
-                    {value}
-                  </EuiLink>
-                </RedirectAppLinks>
-              ),
-            },
-            {
-              id: 'agent.name',
-              displayAsText: 'Agent name',
-            },
-            {
-              id: this.props.getRequirementKey(),
-              displayAsText: 'Requirement',
-              render: renderRequirements,
-            },
-            { id: 'rule.description', displayAsText: 'Description' },
-            { id: 'rule.level', displayAsText: 'Level' },
-            {
-              id: 'rule.id',
-              displayAsText: 'Rule ID',
-              render: value => (
-                <RedirectAppLinks application={getCore().application}>
-                  <EuiLink
-                    href={`${rules.id}#/manager/?tab=rules&redirectRule=${value}`}
-                  >
-                    {value}
-                  </EuiLink>
-                </RedirectAppLinks>
-              ),
-            },
-          ];
+        ? this.addRenderColumn(columnsAgent)
+        : this.addRenderColumn(columnsWithoutAgent);
     }
 
     renderHeader() {