[APM] Display all properties by default in flyout (#113221)

Co-authored-by: Kibana Machine <[email protected]>

src/core/types/elasticsearch/search.ts

@@ -48,7 +48,7 @@ type ValueTypeOfField<T> = T extends Record<string, string | number>
 
 type MaybeArray<T> = T | T[];
 
-type Fields = Exclude<Required<estypes.SearchRequest>['body']['fields'], undefined>;
+type Fields = Required<Required<estypes.SearchRequest>['body']>['fields'];
 type DocValueFields = MaybeArray<string | estypes.SearchDocValueField>;
 
 export type SearchHit<

x-pack/plugins/apm/common/elasticsearch_fieldnames.ts

@@ -78,6 +78,7 @@ export const SPAN_DESTINATION_SERVICE_RESPONSE_TIME_SUM =
 // Parent ID for a transaction or span
 export const PARENT_ID = 'parent.id';
 
+export const ERROR_ID = 'error.id';
 export const ERROR_GROUP_ID = 'error.grouping_key';
 export const ERROR_CULPRIT = 'error.culprit';
 export const ERROR_LOG_LEVEL = 'error.log.level';

x-pack/plugins/apm/common/processor_event.ts

@@ -4,6 +4,7 @@
  * 2.0; you may not use this file except in compliance with the Elastic License
  * 2.0.
  */
+import * as t from 'io-ts';
 
 export enum ProcessorEvent {
   transaction = 'transaction',
@@ -12,6 +13,14 @@ export enum ProcessorEvent {
   span = 'span',
   profile = 'profile',
 }
+
+export const processorEventRt = t.union([
+  t.literal(ProcessorEvent.transaction),
+  t.literal(ProcessorEvent.error),
+  t.literal(ProcessorEvent.metric),
+  t.literal(ProcessorEvent.span),
+  t.literal(ProcessorEvent.profile),
+]);
 /**
  * Processor events that are searchable in the UI via the query bar.
  *

x-pack/plugins/apm/public/components/shared/KeyValueTable/index.tsx

@@ -4,7 +4,7 @@
  * 2.0; you may not use this file except in compliance with the Elastic License
  * 2.0.
  */
-
+import { castArray } from 'lodash';
 import React, { TableHTMLAttributes } from 'react';
 import {
   EuiTable,
@@ -26,16 +26,32 @@ export function KeyValueTable({
   return (
     <EuiTable compressed {...tableProps}>
       <EuiTableBody>
-        {keyValuePairs.map(({ key, value }) => (
-          <EuiTableRow key={key}>
-            <EuiTableRowCell>
-              <strong data-test-subj="dot-key">{key}</strong>
-            </EuiTableRowCell>
-            <EuiTableRowCell data-test-subj="value">
-              <FormattedValue value={value} />
-            </EuiTableRowCell>
-          </EuiTableRow>
-        ))}
+        {keyValuePairs.map(({ key, value }) => {
+          const asArray = castArray(value);
+          const valueList =
+            asArray.length <= 1 ? (
+              <FormattedValue value={asArray[0]} />
+            ) : (
+              <ul>
+                {asArray.map((val, index) => (
+                  <li>
+                    <FormattedValue key={index} value={val} />
+                  </li>
+                ))}
+              </ul>
+            );
+
+          return (
+            <EuiTableRow key={key}>
+              <EuiTableRowCell>
+                <strong data-test-subj="dot-key">{key}</strong>
+              </EuiTableRowCell>
+              <EuiTableRowCell data-test-subj="value">
+                {valueList}
+              </EuiTableRowCell>
+            </EuiTableRow>
+          );
+        })}
       </EuiTableBody>
     </EuiTable>
   );

x-pack/plugins/apm/public/components/shared/MetadataTable/ErrorMetadata/index.tsx

@@ -6,19 +6,41 @@
  */
 
 import React, { useMemo } from 'react';
-import { ERROR_METADATA_SECTIONS } from './sections';
 import { APMError } from '../../../../../typings/es_schemas/ui/apm_error';
-import { getSectionsWithRows } from '../helper';
+import { getSectionsFromFields } from '../helper';
 import { MetadataTable } from '..';
+import { FETCH_STATUS, useFetcher } from '../../../../hooks/use_fetcher';
+import { ProcessorEvent } from '../../../../../common/processor_event';
 
 interface Props {
   error: APMError;
 }
 
 export function ErrorMetadata({ error }: Props) {
-  const sectionsWithRows = useMemo(
-    () => getSectionsWithRows(ERROR_METADATA_SECTIONS, error),
-    [error]
+  const { data: errorEvent, status } = useFetcher(
+    (callApmApi) => {
+      return callApmApi({
+        endpoint: 'GET /api/apm/event_metadata/{processorEvent}/{id}',
+        params: {
+          path: {
+            processorEvent: ProcessorEvent.error,
+            id: error.error.id,
+          },
+        },
+      });
+    },
+    [error.error.id]
+  );
+
+  const sections = useMemo(
+    () => getSectionsFromFields(errorEvent?.metadata || {}),
+    [errorEvent?.metadata]
+  );
+
+  return (
+    <MetadataTable
+      sections={sections}
+      isLoading={status === FETCH_STATUS.LOADING}
+    />
   );
-  return <MetadataTable sections={sectionsWithRows} />;
 }