Data.vulnerability.reference field formatting fix on tables and flyou…

…ts (#7177) * Sample data(vulnerabilities): Change data.vulnerability.references(array) to data.vulnerability.reference(string) * Events(render-columns: Render data.vulnerability.reference correctly * Changelog: Add entry
wazuh · Nov 27, 2024 · 871de7e · 871de7e
1 parent 3761a58
commit 871de7e
Show file tree

Hide file tree

Showing 3 changed files with 165 additions and 154 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -50,6 +50,7 @@ All notable changes to the Wazuh app project will be documented in this file.
 - Fixed the check updates UI was displayed despite it could be configured as disabled [#7156](https://github.com/wazuh/wazuh-dashboard-plugins/pull/7156)
 - Fixed filter by value in document details in safari [#7151](https://github.com/wazuh/wazuh-dashboard-plugins/pull/7151)
 - Fixed error message to prevent pass no strings to the wazuh logger [#7167](https://github.com/wazuh/wazuh-dashboard-plugins/pull/7167)
+- Fixed the rendering of the `data.vunerability.reference` in the table and flyout [#7177](https://github.com/wazuh/wazuh-dashboard-plugins/pull/7177)
 
 ### Removed
 

diff --git a/plugins/main/public/components/common/wazuh-discover/render-columns.tsx b/plugins/main/public/components/common/wazuh-discover/render-columns.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { EuiText, EuiLink, EuiToolTip } from '@elastic/eui';
+import { EuiLink, EuiToolTip } from '@elastic/eui';
 import { tDataGridRenderColumn } from '../data-grid';
 import {
   endpointSummary,
@@ -15,6 +15,38 @@ const renderRequirementsSecurityOperations = (value: []) => {
   return <span>{Array.isArray(value) ? value.join(', ') : value}</span>;
 };
 
+const renderLinksReference = (value: string) => {
+  if (!value) {
+    return '-';
+  }
+
+  const links = (
+    <>
+      {/* We separated the reference value since it is a string separated by
+            commas, causing an issue when returning 2 links. */}
+      {value?.split(', ').map((link, index) => (
+        <span key={index}>
+          {!!index && ', '}
+          <EuiToolTip
+            position='top'
+            content='Navigate to the vulnerability reference'
+          >
+            <EuiLink
+              href={link}
+              target='_blank'
+              rel='noopener noreferrer'
+              external
+            >
+              {link}
+            </EuiLink>
+          </EuiToolTip>
+        </span>
+      ))}
+    </>
+  );
+  return links;
+};
+
 const renderMitreTechnique = technique => (
   <WzLink
     appId={mitreAttack.id}
@@ -75,35 +107,13 @@ export const wzDiscoverRenderColumns: tDataGridRenderColumn[] = [
       );
     },
   },
+  {
+    id: 'data.vulnerability.reference',
+    render: renderLinksReference,
+  },
   {
     id: 'vulnerability.reference',
-    render: value => {
-      const links = (
-        <>
-          {/* We separated the reference value since it is a string separated by
-            commas, causing an issue when returning 2 links. */}
-          {value?.split(', ').map((link, index) => (
-            <span key={index}>
-              {!!index && ', '}
-              <EuiToolTip
-                position='top'
-                content='Navigate to the vulnerability reference'
-              >
-                <EuiLink
-                  href={link}
-                  target='_blank'
-                  rel='noopener noreferrer'
-                  external
-                >
-                  {link}
-                </EuiLink>
-              </EuiToolTip>
-            </span>
-          ))}
-        </>
-      );
-      return links;
-    },
+    render: renderLinksReference,
   },
   {
     id: 'rule.id',