Fix discover flyout and improve events columns

CHANGELOG.md

@@ -21,7 +21,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)
+- 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) [#6691](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6691)
 - Develop logic of a new index for the fim module [#6227](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6227)
 - 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)

plugins/main/public/components/agents/syscollector/__snapshots__/inventory.test.tsx.snap

@@ -2,18 +2,16 @@
 
 exports[`Inventory component A Apple agent should be well rendered. 1`] = `
 <div
-  style="overflow:hidden"
+  style="overflow:hidden;margin:12px 16px 12px 16px"
 >
   <div
     class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiFlexGroup--responsive"
   >
     <div
       class="euiFlexItem"
-      style="margin-bottom:0"
     >
       <div
         class="euiPanel euiPanel--paddingSmall euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
-        style="margin:16px"
       >
         <div
           class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
@@ -123,10 +121,9 @@ exports[`Inventory component A Apple agent should be well rendered. 1`] = `
   >
     <div
       class="euiFlexItem euiFlexItem--flexGrow2"
-      style="margin-right:4px;margin-top:0"
     >
       <div
-        class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow wz-agent-inventory-panel"
+        class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
       >
         <div
           class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionColumn"
@@ -526,10 +523,9 @@ exports[`Inventory component A Apple agent should be well rendered. 1`] = `
     </div>
     <div
       class="euiFlexItem euiFlexItem--flexGrow2"
-      style="margin-left:4px;margin-top:0"
     >
       <div
-        class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow wz-agent-inventory-panel"
+        class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
       >
         <div
           class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionColumn"
@@ -879,10 +875,9 @@ exports[`Inventory component A Apple agent should be well rendered. 1`] = `
   >
     <div
       class="euiFlexItem euiFlexItem--flexGrow3"
-      style="margin-right:4px"
     >
       <div
-        class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow wz-agent-inventory-panel"
+        class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
       >
         <div
           class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionColumn"
@@ -1288,7 +1283,7 @@ exports[`Inventory component A Apple agent should be well rendered. 1`] = `
       class="euiFlexItem"
     >
       <div
-        class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow wz-agent-inventory-panel"
+        class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
       >
         <div
           class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionColumn"
@@ -1696,7 +1691,7 @@ exports[`Inventory component A Apple agent should be well rendered. 1`] = `
       class="euiFlexItem"
     >
       <div
-        class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow wz-agent-inventory-panel"
+        class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
       >
         <div
           class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionColumn"
@@ -2150,18 +2145,16 @@ exports[`Inventory component A Apple agent should be well rendered. 1`] = `
 
 exports[`Inventory component A Linux agent should be well rendered. 1`] = `
 <div
-  style="overflow:hidden"
+  style="overflow:hidden;margin:12px 16px 12px 16px"
 >
   <div
     class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiFlexGroup--responsive"
   >
     <div
       class="euiFlexItem"
-      style="margin-bottom:0"
     >
       <div
         class="euiPanel euiPanel--paddingSmall euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
-        style="margin:16px"
       >
         <div
           class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
@@ -2271,10 +2264,9 @@ exports[`Inventory component A Linux agent should be well rendered. 1`] = `
   >
     <div
       class="euiFlexItem euiFlexItem--flexGrow2"
-      style="margin-right:4px;margin-top:0"
     >
       <div
-        class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow wz-agent-inventory-panel"
+        class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
       >
         <div
           class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionColumn"
@@ -2673,10 +2665,9 @@ exports[`Inventory component A Linux agent should be well rendered. 1`] = `
     </div>
     <div
       class="euiFlexItem euiFlexItem--flexGrow2"
-      style="margin-left:4px;margin-top:0"
     >
       <div
-        class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow wz-agent-inventory-panel"
+        class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
       >
         <div
           class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionColumn"
@@ -3057,10 +3048,9 @@ exports[`Inventory component A Linux agent should be well rendered. 1`] = `
   >
     <div
       class="euiFlexItem euiFlexItem--flexGrow3"
-      style="margin-right:4px"
     >
       <div
-        class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow wz-agent-inventory-panel"
+        class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
       >
         <div
           class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionColumn"
@@ -3465,7 +3455,7 @@ exports[`Inventory component A Linux agent should be well rendered. 1`] = `
       class="euiFlexItem"
     >
       <div
-        class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow wz-agent-inventory-panel"
+        class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
       >
         <div
           class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionColumn"
@@ -3873,7 +3863,7 @@ exports[`Inventory component A Linux agent should be well rendered. 1`] = `
       class="euiFlexItem"
     >
       <div
-        class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow wz-agent-inventory-panel"
+        class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
       >
         <div
           class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionColumn"
@@ -4448,18 +4438,16 @@ exports[`Inventory component A Linux agent should be well rendered. 1`] = `
 
 exports[`Inventory component A Windows agent should be well rendered. 1`] = `
 <div
-  style="overflow:hidden"
+  style="overflow:hidden;margin:12px 16px 12px 16px"
 >
   <div
     class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiFlexGroup--responsive"
   >
     <div
       class="euiFlexItem"
-      style="margin-bottom:0"
     >
       <div
         class="euiPanel euiPanel--paddingSmall euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
-        style="margin:16px"
       >
         <div
           class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
@@ -4569,10 +4557,9 @@ exports[`Inventory component A Windows agent should be well rendered. 1`] = `
   >
     <div
       class="euiFlexItem euiFlexItem--flexGrow2"
-      style="margin-right:4px;margin-top:0"
     >
       <div
-        class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow wz-agent-inventory-panel"
+        class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
       >
         <div
           class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionColumn"
@@ -4972,10 +4959,9 @@ exports[`Inventory component A Windows agent should be well rendered. 1`] = `
     </div>
     <div
       class="euiFlexItem euiFlexItem--flexGrow2"
-      style="margin-left:4px;margin-top:0"
     >
       <div
-        class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow wz-agent-inventory-panel"
+        class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
       >
         <div
           class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionColumn"
@@ -5349,10 +5335,9 @@ exports[`Inventory component A Windows agent should be well rendered. 1`] = `
   >
     <div
       class="euiFlexItem euiFlexItem--flexGrow3"
-      style="margin-right:4px"
     >
       <div
-        class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow wz-agent-inventory-panel"
+        class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
       >
         <div
           class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionColumn"
@@ -5752,10 +5737,9 @@ exports[`Inventory component A Windows agent should be well rendered. 1`] = `
     </div>
     <div
       class="euiFlexItem euiFlexItem--flexGrow1"
-      style="margin-left:4px"
     >
       <div
-        class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow wz-agent-inventory-panel"
+        class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
       >
         <div
           class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionColumn"
@@ -6065,7 +6049,7 @@ exports[`Inventory component A Windows agent should be well rendered. 1`] = `
       class="euiFlexItem"
     >
       <div
-        class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow wz-agent-inventory-panel"
+        class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
       >
         <div
           class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionColumn"
@@ -6449,7 +6433,7 @@ exports[`Inventory component A Windows agent should be well rendered. 1`] = `
       class="euiFlexItem"
     >
       <div
-        class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow wz-agent-inventory-panel"
+        class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
       >
         <div
           class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionColumn"

plugins/main/public/components/common/data-grid/use-data-grid.ts

@@ -4,7 +4,6 @@ import {
   EuiDataGridProps,
   EuiDataGridSorting,
 } from '@elastic/eui';
-import dompurify from 'dompurify';
 import React, { useEffect, useMemo, useState, Fragment } from 'react';
 import { SearchResponse } from '@opensearch-project/opensearch/api/types';
 // ToDo: check how create this methods
@@ -19,16 +18,17 @@ const MAX_ENTRIES_PER_QUERY = 10000;
 const DEFAULT_PAGE_SIZE_OPTIONS = [20, 50, 100];
 
 export type tDataGridColumn = {
-  render?: (
-    value: any,
-    rowItem: object
-  ) => string | React.ReactNode;
+  render?: (value: any, rowItem: object) => string | React.ReactNode;
 } & EuiDataGridColumn;
 
+export type tDataGridRenderColumn = Required<Pick<tDataGridColumn, 'render'>> &
+  Omit<tDataGridColumn, 'render'>;
+
 export type tDataGridProps = {
   indexPattern: IndexPattern;
   results: SearchResponse;
   defaultColumns: tDataGridColumn[];
+  renderColumns?: tDataGridRenderColumn[];
   DocViewInspectButton: ({
     rowIndex,
   }: EuiDataGridCellValueElementProps) => React.JSX.Element;
@@ -42,6 +42,7 @@ export const useDataGrid = (props: tDataGridProps): EuiDataGridProps => {
     DocViewInspectButton,
     results,
     defaultColumns,
+    renderColumns,
     pagination: defaultPagination,
   } = props;
   /** Columns **/
@@ -115,11 +116,19 @@ export const useDataGrid = (props: tDataGridProps): EuiDataGridProps => {
       // check if column have render method initialized
       const column = columns.find(column => column.id === columnId);
       if (column && column.render) {
-        return column.render(
+        return column.render(fieldFormatted, rowsParsed[relativeRowIndex]);
+      }
+      // check if column have render method in renderColumns prop
+      const renderColumn = renderColumns?.find(
+        column => column.id === columnId,
+      );
+      if (renderColumn) {
+        return renderColumn.render(
           fieldFormatted,
-          rowsParsed[relativeRowIndex]
+          rowsParsed[relativeRowIndex],
         );
       }
+
       return fieldFormatted;
     }
     return null;

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

@@ -0,0 +1,81 @@
+import React from 'react';
+import { EuiLink } 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 { AppNavigate, formatUIDate } from '../../../react-services';
+
+export const MAX_ENTRIES_PER_QUERY = 10000;
+
+const navigateTo = (ev, section, params) => {
+  AppNavigate.navigateToModule(ev, section, params);
+};
+
+const renderMitreTechnique = (technique: string) => <EuiLink
+  onClick={e =>
+    navigateTo(e, 'overview', {
+      tab: 'mitre',
+      tabView: 'intelligence',
+      tabRedirect: 'techniques',
+      idToRedirect: technique,
+    })
+  }
+>
+  {technique}
+</EuiLink>
+
+export const wzDiscoverRenderColumns: tDataGridRenderColumn[] = [
+  {
+    id: 'agent.id',
+    render: (value) => {
+      if (value === '000') return value
+
+      return <RedirectAppLinks application={getCore().application}>
+        <EuiLink
+          href={`${endpointSummary.id}#/agents?tab=welcome&agent=${value}`}
+        >
+          {value}
+        </EuiLink>
+      </RedirectAppLinks>
+    }
+  },
+  {
+    id: 'agent.name',
+    render: (value, row) => {
+      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>
+    }
+  },
+  {
+    id: 'rule.id',
+    render: (value) => <RedirectAppLinks application={getCore().application}>
+      <EuiLink href={`${rules.id}#/manager/?tab=rules&redirectRule=${value}`}>
+        {value}
+      </EuiLink>
+    </RedirectAppLinks>
+  },
+  {
+    id: 'rule.mitre.id',
+    render: (value) => Array.isArray(value) ? <div style={{ display: 'flex', gap: 10 }}>
+      {value?.map(technique => (
+        <div key={technique}>
+          {renderMitreTechnique(technique)}
+        </div>
+      ))}
+    </div> : <div>
+      {renderMitreTechnique(value)}
+    </div>
+  },
+  {
+    id: 'timestamp',
+    render: (value) => formatUIDate(value)
+  },
+]