[Backport 4.4-1.2-wzd] Render nested field rows in security alerts ta…

…ble (#4470) Render nested field rows in security alerts table (#4428) * Evaluate nested fields and render object array * Removed text color style * Added changelog (cherry picked from commit b2a6c10) Co-authored-by: Federico Rodriguez <federico.rodriguez@wazuh.com>
wazuh · Sep 8, 2022 · cc037a8 · cc037a8
1 parent 34a3a3b
commit cc037a8
Show file tree

Hide file tree

Showing 4 changed files with 70 additions and 10 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -14,7 +14,13 @@ All notable changes to the Wazuh app project will be documented in this file.
 - Changed the HTTP verb from `GET` to `POST` in the requests to login to the Wazuh API [#4103](https://github.com/wazuh/wazuh-kibana-app/pull/4103)
 - Endpoint `/agents/summary/status` response was adapted. [#3874](https://github.com/wazuh/wazuh-kibana-app/pull/3874)
 
-## Wazuh v4.3.7 - OpenSearch Dashboards 1.2.0 - Revision 4308
+### Fixed
+
+- Improved Agents Overview performance [#4363](https://github.com/wazuh/wazuh-kibana-app/pull/4363)
+- Fixed nested fields filtering in dashboards tables and KPIs [#4425](https://github.com/wazuh/wazuh-kibana-app/pull/4425)
+- Fixed nested field rendering in security alerts table details [#4428](https://github.com/wazuh/wazuh-kibana-app/pull/4428)
+
+## Wazuh v4.3.7 - Kibana 7.10.2, 7.16.x, 7.17.x - Revision 4308
 
 ### Fixed
 

diff --git a/public/components/common/modules/discover/discover.scss b/public/components/common/modules/discover/discover.scss
@@ -36,4 +36,19 @@ div.euiPanel.euiComboBoxOptionsList.euiComboBoxOptionsList {
 
 .hover-row{
     background-color: #fbfcfd;
-}
+}
+
+.module-discover-table .module-discover-table-details {
+    td {
+        vertical-align: text-bottom;
+
+        .wzDocViewer__value {
+            display: inline-block;
+            word-break: break-all;
+            word-wrap: break-word;
+            white-space: pre-wrap;
+            vertical-align: top;
+            padding-top: 2px;
+        }
+    }
+}
diff --git a/public/components/common/modules/discover/discover.tsx b/public/components/common/modules/discover/discover.tsx
@@ -336,6 +336,7 @@ export const Discover = compose(
               addFilterOut={(filter) => this.addFilterOut(filter)}
               toggleColumn={(id) => this.addColumn(id)}
               rowDetailsFields={rowDetailsFields}
+              indexPattern={this.indexPattern}
             />
           </div>
         );

diff --git a/public/components/common/modules/discover/row-details.tsx b/public/components/common/modules/discover/row-details.tsx
@@ -10,10 +10,9 @@
  * Find more information about this on the LICENSE file.
  */
 
-import React, { Component, Fragment } from 'react';
+import React, { Component } from 'react';
 import {
   EuiCodeBlock,
-  EuiPanel,
   EuiTitle,
   EuiSpacer,
   EuiIcon,
@@ -31,6 +30,9 @@ import {
   EuiBadge,
   EuiAccordion,
 } from '@elastic/eui';
+import classNames from 'classnames';
+import { DocViewTableRowBtnCollapse } from '../../../../kibana-integrations/discover/application/components/table/table_row_btn_collapse';
+import { arrayContainsObjects, trimAngularSpan } from '../../../../kibana-integrations/discover/application/components/table/table_helper';
 import './discover.scss';
 import { EuiFlexItem } from '@elastic/eui';
 import { WzRequest } from '../../../../react-services/wz-request';
@@ -46,7 +48,8 @@ export class RowDetails extends Component {
       items: Array<any>,
       totalItems: Number
     },
-    hover: string
+    hover: string,
+    isCollapsed: boolean,
   };
 
   complianceEquivalences: Object
@@ -72,6 +75,7 @@ export class RowDetails extends Component {
         items: [],
         totalItems: 0,
       },
+      isCollapsed: true,
       hover: ''
     }
 
@@ -153,7 +157,9 @@ export class RowDetails extends Component {
       </EuiToolTip>)
   }
 
-
+  onToggleCollapse = () => {
+    this.setState({ isCollapsed: !this.state.isCollapsed });
+  }
 
   renderRows() {
     // By default show all available fields, otherwise show the fields specified in rowDetailsFields string array
@@ -222,13 +228,34 @@ export class RowDetails extends Component {
 
           cells.push(keyCell);
 
-          const formattedValue = Array.isArray(value) ? value.join(', ') : value.toString();
+          const formattedValue = Array.isArray(value) ? this.renderArrayValue(value) : value.toString();
+
+          // If the field is an array of objects, show the collapse button to show the nested fields
+          const showCollapseButton = Array.isArray(value) && arrayContainsObjects(value);
+
+          const valueClassName = classNames({
+            // eslint-disable-next-line @typescript-eslint/naming-convention
+            wzDocViewer__value: true,
+            'truncate-by-height': showCollapseButton && this.state.isCollapsed,
+            "hover-row": this.state.hover === key
+          });
 
           const valueCell = <EuiTableRowCell
-            className={this.state.hover === key ? "hover-row" : " "}
+            className={valueClassName}
             style={{ borderTop: 0, borderBottom: 0, padding: 0, margin: 0 }}
             key={key + "2"}>
-            {<div>{formattedValue}</div>}
+            { showCollapseButton && (
+              <DocViewTableRowBtnCollapse onClick={this.onToggleCollapse} isCollapsed={this.state.isCollapsed} />
+            )}
+            <div
+              data-test-subj={`tableDocViewRow-${key}-value`}
+              /*
+               * Justification for dangerouslySetInnerHTML:
+               * We just use values encoded by our field formatters
+               */
+              // eslint-disable-next-line react/no-danger
+              dangerouslySetInnerHTML={{ __html: formattedValue as string }}
+            />
           </EuiTableRowCell>
 
           cells.push(valueCell);
@@ -250,11 +277,22 @@ export class RowDetails extends Component {
     return rows;
   }
 
+  // Render the row value column supporting nested fields
+  renderArrayValue = (value) => {
+    if (arrayContainsObjects(value)) {
+      const formatted = this.props?.indexPattern?.formatHit({ _index: value }, 'html')?._index;
+      return trimAngularSpan(String(formatted));
+    }
+    else {
+      return value.join(', ')
+    }
+  }
+
   getTable() {
     return (
       <div>
         <div>
-          <EuiTable style={{ marginTop: 0 }}>
+          <EuiTable style={{ marginTop: 0 }} className='module-discover-table-details'>
             <EuiTableBody style={{ marginTop: 0 }}>{this.renderRows()}</EuiTableBody>
           </EuiTable>
         </div>