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

…in the Event and Alert Details panels (elastic#115141)

## [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

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', () => {

x-pack/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);
     });
   });
 

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"]';