Unification the rendering of flyout columns

CHANGELOG.md

@@ -22,7 +22,7 @@ All notable changes to the Wazuh app project will be documented in this file.
 
 ### 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)
+- 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) [#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 +44,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/public/components/common/wazuh-discover/render-columns.tsx

@@ -1,10 +1,9 @@
 import React from 'react';
-import { EuiLink } from '@elastic/eui';
+import { EuiLink, 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 } from '../../../utils/applications';
-import { formatUIDate } from '../../../react-services';
 import NavigationService from '../../../react-services/navigation-service';
 
 export const MAX_ENTRIES_PER_QUERY = 10000;
@@ -13,6 +12,14 @@ const navigateTo = (ev, section, params) => {
   NavigationService.getInstance().navigateToModule(ev, section, params);
 };
 
+const renderRequirementsSecurityOperations = (value: []) => {
+  return (
+    <EuiText gutterSize='s' direction='column'>
+      {value.join(', ')}
+    </EuiText>
+  );
+};
+
 const renderMitreTechnique = (technique: string) => (
   <EuiLink
     onClick={e =>
@@ -32,7 +39,9 @@ export const wzDiscoverRenderColumns: tDataGridRenderColumn[] = [
   {
     id: 'agent.id',
     render: value => {
-      if (value === '000') return value;
+      if (value === '000') {
+        return value;
+      }
 
       return (
         <RedirectAppLinks application={getCore().application}>
@@ -48,7 +57,9 @@ export const wzDiscoverRenderColumns: tDataGridRenderColumn[] = [
   {
     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}>
@@ -86,4 +97,24 @@ 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,67 @@ export const RequirementFlyout = connect(mapStateToProps)(
       this._isMount = true;
     }
 
+    addRenderColumn(columns) {
+      columns.map(column => {
+        const renderColumn = wzDiscoverRenderColumns.find(
+          columnRender => columnRender.id === column.id,
+        );
+        if (renderColumn) {
+          column.render = renderColumn.render;
+        }
+        return column;
+      });
+      return columns;
+    }
+
     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() {

plugins/main/public/components/overview/mitre/framework/components/techniques/components/flyout-technique/flyout-technique-columns.tsx

@@ -1,52 +1,6 @@
 import React from 'react';
 import { formatUIDate } from '../../../../../../../../react-services';
 import { tDataGridColumn } from '../../../../../../../common/data-grid';
-import { EuiLink, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
-import { getCore } from '../../../../../../../../kibana-services';
-import {
-  rules,
-  endpointSummary,
-} from '../../../../../../../../utils/applications';
-import { RedirectAppLinks } from '../../../../../../../../../../../src/plugins/opensearch_dashboards_react/public';
-import NavigationService from '../../../../../../../../react-services/navigation-service';
-
-const navigateTo = (ev, section, params) => {
-  NavigationService.getInstance().navigateToModule(ev, section, params);
-};
-
-const renderTechniques = (value: []) => {
-  const techniques = value.map(technique => {
-    /*
-      ToDo:
-      This link redirect to the Intelligence tab and open the flyout technique detail
-      This must be replaced by the RedirectAppLinks but right now the RedirectAppLinks is not working,
-      doesn't open the tab and the flyout technique, so we are using the AppNavigate.navigateToModule
-    */
-    return (
-      <EuiFlexItem key={technique}>
-        <EuiLink
-          key={technique}
-          onClick={e =>
-            navigateTo(e, 'overview', {
-              tab: 'mitre',
-              tabView: 'intelligence',
-              tabRedirect: 'techniques',
-              idToRedirect: technique,
-            })
-          }
-        >
-          {technique}
-        </EuiLink>
-      </EuiFlexItem>
-    );
-  });
-
-  return (
-    <EuiFlexGroup gutterSize='s' direction='column'>
-      {techniques}
-    </EuiFlexGroup>
-  );
-};
 
 export const techniquesColumns: tDataGridColumn[] = [
   {
@@ -57,34 +11,17 @@ export const techniquesColumns: tDataGridColumn[] = [
   {
     id: 'agent.id',
     displayAsText: 'Agent',
-    render: agentId => (
-      <RedirectAppLinks application={getCore().application}>
-        <EuiLink
-          href={`${endpointSummary.id}#/agents?tab=welcome&agent=${agentId}`}
-        >
-          {agentId}
-        </EuiLink>
-      </RedirectAppLinks>
-    ),
   },
   { id: 'agent.name', displayAsText: 'Agent Name' },
   {
     id: 'rule.mitre.id',
     displayAsText: 'Technique(s)',
-    render: value => renderTechniques(value),
   },
   { id: 'rule.mitre.tactic', displayAsText: 'Tactic(s)' },
   { 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: 'rule.description', displayAsText: 'Description' },
 ];
@@ -98,20 +35,12 @@ export const agentTechniquesColumns: tDataGridColumn[] = [
   {
     id: 'rule.mitre.id',
     displayAsText: 'Technique(s)',
-    render: value => renderTechniques(value),
   },
   { id: 'rule.mitre.tactic', displayAsText: 'Tactic(s)' },
   { 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: 'rule.description', displayAsText: 'Description' },
 ];