From 5ee2b213b602f296677dde711b74d8153950af32 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=B8ren=20Louv-Jansen?= <soren.louv@elastic.co>
Date: Tue, 21 Feb 2023 13:15:47 +0100
Subject: [PATCH] [APM] Display numeric labels at the top of metadata section
 (#151575)

We already display `labels` at the top of metadata to make them easy to
find. Recently APM Server split out numeric labels so they are located
separately from string labels. This means that the following will create
one numeric label `numeric_labels.time_range_duration`, and one string
label `labels.app`.

```ts
transaction.addLabels({ time_range_duration: 123, app: 'apm' });
```

Right now the numeric labels section is far down on the metadata list,
making it hard to find (I missed it and didn't understand what was going
on).


![image](https://user-images.githubusercontent.com/209966/219943397-2c9fe2fe-89be-4c9b-8007-0986ed6d4b94.png)
...

![image](https://user-images.githubusercontent.com/209966/219943400-80442b60-33e7-4275-a110-d592f4b12d60.png)


**Change in this PR**
This PR moves the the `numeric_labels` to the top of Metadata, just
below the `labels` section.

<img width="1443" alt="image"
src="https://user-images.githubusercontent.com/209966/219975299-709ab77f-8ad7-42c0-9fe5-cbcdb7393c78.png">
---
 .../apm/public/components/shared/metadata_table/helper.ts     | 2 +-
 .../components/shared/metadata_table/metadata_table.test.tsx  | 4 +---
 .../apm/public/components/shared/metadata_table/types.ts      | 1 -
 3 files changed, 2 insertions(+), 5 deletions(-)

diff --git a/x-pack/plugins/apm/public/components/shared/metadata_table/helper.ts b/x-pack/plugins/apm/public/components/shared/metadata_table/helper.ts
index c9e0f2aa6674..67e2d2b85500 100644
--- a/x-pack/plugins/apm/public/components/shared/metadata_table/helper.ts
+++ b/x-pack/plugins/apm/public/components/shared/metadata_table/helper.ts
@@ -43,7 +43,7 @@ export const getSectionsFromFields = (fields: Record<string, any>) => {
 
   const [labelSections, otherSections] = partition(
     sections,
-    (section) => section.key === 'labels'
+    (section) => section.key === 'labels' || section.key === 'numeric_labels'
   );
 
   return [...labelSections, ...otherSections];
diff --git a/x-pack/plugins/apm/public/components/shared/metadata_table/metadata_table.test.tsx b/x-pack/plugins/apm/public/components/shared/metadata_table/metadata_table.test.tsx
index 084729a08146..f973879c7029 100644
--- a/x-pack/plugins/apm/public/components/shared/metadata_table/metadata_table.test.tsx
+++ b/x-pack/plugins/apm/public/components/shared/metadata_table/metadata_table.test.tsx
@@ -28,11 +28,10 @@ const renderOptions = {
 describe('MetadataTable', () => {
   it('shows sections', () => {
     const sections: SectionDescriptor[] = [
-      { key: 'foo', label: 'Foo', required: true, properties: [] },
+      { key: 'foo', label: 'Foo', properties: [] },
       {
         key: 'bar',
         label: 'Bar',
-        required: false,
         properties: [
           { field: 'props.A', value: ['A'] },
           { field: 'props.B', value: ['B'] },
@@ -59,7 +58,6 @@ describe('MetadataTable', () => {
         {
           key: 'foo',
           label: 'Foo',
-          required: true,
           properties: [],
         },
       ];
diff --git a/x-pack/plugins/apm/public/components/shared/metadata_table/types.ts b/x-pack/plugins/apm/public/components/shared/metadata_table/types.ts
index 3ce7698460f3..fc08f3de2461 100644
--- a/x-pack/plugins/apm/public/components/shared/metadata_table/types.ts
+++ b/x-pack/plugins/apm/public/components/shared/metadata_table/types.ts
@@ -8,6 +8,5 @@
 export interface SectionDescriptor {
   key: string;
   label: string;
-  required?: boolean;
   properties: Array<{ field: string; value: string[] | number[] }>;
 }