[Security Solution] Improves the formatting of array values and JSON …

…in the Event and Alert Details panels (#115141) (#115532) ## [Security Solution] Improves the formatting of array values and JSON in the Event and Alert Details panels This PR improves the formatting of array values and JSON in the Event and Alert details panels by: - in the `Table` tab, formatting array values such that each value appears on a separate line, (instead of joining the values on a single line) - in the `JSON` tab, displaying the raw search hit JSON, instead displaying a JSON representation based on the `Fields` API ### Table value formatting In the Event and Alert details `Table` tab, array values were joined on a single line, as shown in the _before_ screenshot below: ![event-details-value-formatting-before](https://user-images.githubusercontent.com/4459398/137524968-6450cd73-3154-457d-b850-32a3e7faaab2.png) _Above: (before) array values were joined on a single line_ Array values are now formatted such that each value appears on a separate line, as shown in the _after_ screenshot below: ![event-details-value-formatting-after](https://user-images.githubusercontent.com/4459398/137436705-b0bec735-5a83-402e-843a-2776e1c80da9.png) _Above: (after) array values each appear on a separte line_ ### JSON formatting The `JSON` tab previously displayed a JSON representation based on the `Fields` API. Array values were previously represented as a joined string, as shown in the _before_ screenshot below: ![event-details-json-formatting-before](https://user-images.githubusercontent.com/4459398/137525039-d1b14f21-5f9c-4201-905e-8b08f00bb5a0.png) _Above: (before) array values were previously represented as a joined string_ The `JSON` tab now displays the raw search hit JSON, per the _after_ screenshot below: ![event-details-json-formatting-after](https://user-images.githubusercontent.com/4459398/137437257-330c5b49-a4ad-418e-a976-923f7a35c0cf.png) _Above: (after) the `JSON` tab displays the raw search hit_ CC @monina-n @paulewing Co-authored-by: Andrew Goldstein <[email protected]>
elastic · Oct 19, 2021 · 51e773f · 51e773f
1 parent 11b35f7
commit 51e773f
Show file tree

Hide file tree

Showing 17 changed files with 872 additions and 169 deletions.
diff --git a/x-pack/plugins/security_solution/cypress/integration/detection_alerts/alerts_details.spec.ts b/x-pack/plugins/security_solution/cypress/integration/detection_alerts/alerts_details.spec.ts
@@ -5,14 +5,14 @@
  * 2.0.
  */
 
-import { ALERT_FLYOUT, CELL_TEXT, JSON_LINES, TABLE_ROWS } from '../../screens/alerts_details';
+import { ALERT_FLYOUT, CELL_TEXT, JSON_TEXT, TABLE_ROWS } from '../../screens/alerts_details';
 
 import {
   expandFirstAlert,
   waitForAlertsIndexToBeCreated,
   waitForAlertsPanelToBeLoaded,
 } from '../../tasks/alerts';
-import { openJsonView, openTable, scrollJsonViewToBottom } from '../../tasks/alerts_details';
+import { openJsonView, openTable } from '../../tasks/alerts_details';
 import { createCustomRuleActivated } from '../../tasks/api_calls/rules';
 import { cleanKibana } from '../../tasks/common';
 import { esArchiverLoad } from '../../tasks/es_archiver';
@@ -36,20 +36,14 @@ describe('Alert details with unmapped fields', () => {
   });
 
   it('Displays the unmapped field on the JSON view', () => {
-    const expectedUnmappedField = { line: 2, text: '  "unmapped": "This is the unmapped field"' };
+    const expectedUnmappedValue = 'This is the unmapped field';
 
     openJsonView();
-    scrollJsonViewToBottom();
 
-    cy.get(ALERT_FLYOUT)
-      .find(JSON_LINES)
-      .then((elements) => {
-        const length = elements.length;
-        cy.wrap(elements)
-          .eq(length - expectedUnmappedField.line)
-          .invoke('text')
-          .should('include', expectedUnmappedField.text);
-      });
+    cy.get(JSON_TEXT).then((x) => {
+      const parsed = JSON.parse(x.text());
+      expect(parsed._source.unmapped).to.equal(expectedUnmappedValue);
+    });
   });
 
   it('Displays the unmapped field on the table', () => {

diff --git a/...ck/plugins/security_solution/cypress/integration/detection_alerts/cti_enrichments.spec.ts b/...ck/plugins/security_solution/cypress/integration/detection_alerts/cti_enrichments.spec.ts
@@ -10,7 +10,7 @@ import { cleanKibana, reload } from '../../tasks/common';
 import { esArchiverLoad, esArchiverUnload } from '../../tasks/es_archiver';
 import { loginAndWaitForPageWithoutDateRange } from '../../tasks/login';
 import {
-  JSON_LINES,
+  JSON_TEXT,
   TABLE_CELL,
   TABLE_ROWS,
   THREAT_DETAILS_VIEW,
@@ -28,11 +28,7 @@ import {
   viewThreatIntelTab,
 } from '../../tasks/alerts';
 import { createCustomIndicatorRule } from '../../tasks/api_calls/rules';
-import {
-  openJsonView,
-  openThreatIndicatorDetails,
-  scrollJsonViewToBottom,
-} from '../../tasks/alerts_details';
+import { openJsonView, openThreatIndicatorDetails } from '../../tasks/alerts_details';
 
 import { ALERTS_URL } from '../../urls/navigation';
 import { addsFieldsToTimeline } from '../../tasks/rule_details';
@@ -76,26 +72,39 @@ describe('CTI Enrichment', () => {
 
   it('Displays persisted enrichments on the JSON view', () => {
     const expectedEnrichment = [
-      { line: 4, text: '  "threat": {' },
       {
-        line: 3,
-        text: '    "enrichments": "{\\"indicator\\":{\\"first_seen\\":\\"2021-03-10T08:02:14.000Z\\",\\"file\\":{\\"size\\":80280,\\"pe\\":{},\\"type\\":\\"elf\\",\\"hash\\":{\\"sha256\\":\\"a04ac6d98ad989312783d4fe3456c53730b212c79a426fb215708b6c6daa3de3\\",\\"tlsh\\":\\"6D7312E017B517CC1371A8353BED205E9128223972AE35302E97528DF957703BAB2DBE\\",\\"ssdeep\\":\\"1536:87vbq1lGAXSEYQjbChaAU2yU23M51DjZgSQAvcYkFtZTjzBht5:8D+CAXFYQChaAUk5ljnQssL\\",\\"md5\\":\\"9b6c3518a91d23ed77504b5416bfb5b3\\"}},\\"type\\":\\"file\\"},\\"matched\\":{\\"atomic\\":\\"a04ac6d98ad989312783d4fe3456c53730b212c79a426fb215708b6c6daa3de3\\",\\"field\\":\\"myhash.mysha256\\",\\"id\\":\\"84cf452c1e0375c3d4412cb550bd1783358468a3b3b777da4829d72c7d6fb74f\\",\\"index\\":\\"logs-ti_abusech.malware\\",\\"type\\":\\"indicator_match_rule\\"}}"',
+        indicator: {
+          first_seen: '2021-03-10T08:02:14.000Z',
+          file: {
+            size: 80280,
+            pe: {},
+            type: 'elf',
+            hash: {
+              sha256: 'a04ac6d98ad989312783d4fe3456c53730b212c79a426fb215708b6c6daa3de3',
+              tlsh: '6D7312E017B517CC1371A8353BED205E9128223972AE35302E97528DF957703BAB2DBE',
+              ssdeep:
+                '1536:87vbq1lGAXSEYQjbChaAU2yU23M51DjZgSQAvcYkFtZTjzBht5:8D+CAXFYQChaAUk5ljnQssL',
+              md5: '9b6c3518a91d23ed77504b5416bfb5b3',
+            },
+          },
+          type: 'file',
+        },
+        matched: {
+          atomic: 'a04ac6d98ad989312783d4fe3456c53730b212c79a426fb215708b6c6daa3de3',
+          field: 'myhash.mysha256',
+          id: '84cf452c1e0375c3d4412cb550bd1783358468a3b3b777da4829d72c7d6fb74f',
+          index: 'logs-ti_abusech.malware',
+          type: 'indicator_match_rule',
+        },
       },
-      { line: 2, text: '  }' },
     ];
 
     expandFirstAlert();
     openJsonView();
-    scrollJsonViewToBottom();
-
-    cy.get(JSON_LINES).then((elements) => {
-      const length = elements.length;
-      expectedEnrichment.forEach((enrichment) => {
-        cy.wrap(elements)
-          .eq(length - enrichment.line)
-          .invoke('text')
-          .should('include', enrichment.text);
-      });
+
+    cy.get(JSON_TEXT).then((x) => {
+      const parsed = JSON.parse(x.text());
+      expect(parsed._source.threat.enrichments).to.deep.equal(expectedEnrichment);
     });
   });
 

diff --git a/x-pack/plugins/security_solution/cypress/screens/alerts_details.ts b/x-pack/plugins/security_solution/cypress/screens/alerts_details.ts
@@ -28,6 +28,8 @@ export const JSON_LINES = '.euiCodeBlock__line';
 
 export const JSON_VIEW_TAB = '[data-test-subj="jsonViewTab"]';
 
+export const JSON_TEXT = '[data-test-subj="jsonView"]';
+
 export const TABLE_CELL = '.euiTableRowCell';
 
 export const TABLE_TAB = '[data-test-subj="tableTab"]';