From c40ce1e66f63cee7f40d89d3d627a1bf908d7206 Mon Sep 17 00:00:00 2001
From: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
Date: Tue, 21 Feb 2023 08:22:02 -0500
Subject: [PATCH] [8.7] [APM] Display numeric labels at the top of metadata
 section (#151575) (#151694)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

# Backport

This will backport the following commits from `main` to `8.7`:
- [[APM] Display numeric labels at the top of metadata section
(#151575)](https://github.com/elastic/kibana/pull/151575)

<!--- Backport version: 8.9.7 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Søren
Louv-Jansen","email":"soren.louv@elastic.co"},"sourceCommit":{"committedDate":"2023-02-21T12:15:47Z","message":"[APM]
Display numeric labels at the top of metadata section (#151575)\n\nWe
already display `labels` at the top of metadata to make them easy
to\r\nfind. Recently APM Server split out numeric labels so they are
located\r\nseparately from string labels. This means that the following
will create\r\none numeric label `numeric_labels.time_range_duration`,
and one string\r\nlabel
`labels.app`.\r\n\r\n```ts\r\ntransaction.addLabels({
time_range_duration: 123, app: 'apm' });\r\n```\r\n\r\nRight now the
numeric labels section is far down on the metadata list,\r\nmaking it
hard to find (I missed it and didn't understand what was
going\r\non).\r\n\r\n\r\n![image](https://user-images.githubusercontent.com/209966/219943397-2c9fe2fe-89be-4c9b-8007-0986ed6d4b94.png)\r\n...\r\n\r\n![image](https://user-images.githubusercontent.com/209966/219943400-80442b60-33e7-4275-a110-d592f4b12d60.png)\r\n\r\n\r\n**Change
in this PR**\r\nThis PR moves the the `numeric_labels` to the top of
Metadata, just\r\nbelow the `labels` section.\r\n\r\n<img width=\"1443\"
alt=\"image\"\r\nsrc=\"https://user-images.githubusercontent.com/209966/219975299-709ab77f-8ad7-42c0-9fe5-cbcdb7393c78.png\">","sha":"5ee2b213b602f296677dde711b74d8153950af32","branchLabelMapping":{"^v8.8.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:fix","Team:APM","v8.7.0","v8.8.0"],"number":151575,"url":"https://github.com/elastic/kibana/pull/151575","mergeCommit":{"message":"[APM]
Display numeric labels at the top of metadata section (#151575)\n\nWe
already display `labels` at the top of metadata to make them easy
to\r\nfind. Recently APM Server split out numeric labels so they are
located\r\nseparately from string labels. This means that the following
will create\r\none numeric label `numeric_labels.time_range_duration`,
and one string\r\nlabel
`labels.app`.\r\n\r\n```ts\r\ntransaction.addLabels({
time_range_duration: 123, app: 'apm' });\r\n```\r\n\r\nRight now the
numeric labels section is far down on the metadata list,\r\nmaking it
hard to find (I missed it and didn't understand what was
going\r\non).\r\n\r\n\r\n![image](https://user-images.githubusercontent.com/209966/219943397-2c9fe2fe-89be-4c9b-8007-0986ed6d4b94.png)\r\n...\r\n\r\n![image](https://user-images.githubusercontent.com/209966/219943400-80442b60-33e7-4275-a110-d592f4b12d60.png)\r\n\r\n\r\n**Change
in this PR**\r\nThis PR moves the the `numeric_labels` to the top of
Metadata, just\r\nbelow the `labels` section.\r\n\r\n<img width=\"1443\"
alt=\"image\"\r\nsrc=\"https://user-images.githubusercontent.com/209966/219975299-709ab77f-8ad7-42c0-9fe5-cbcdb7393c78.png\">","sha":"5ee2b213b602f296677dde711b74d8153950af32"}},"sourceBranch":"main","suggestedTargetBranches":["8.7"],"targetPullRequestStates":[{"branch":"8.7","label":"v8.7.0","labelRegex":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"main","label":"v8.8.0","labelRegex":"^v8.8.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/151575","number":151575,"mergeCommit":{"message":"[APM]
Display numeric labels at the top of metadata section (#151575)\n\nWe
already display `labels` at the top of metadata to make them easy
to\r\nfind. Recently APM Server split out numeric labels so they are
located\r\nseparately from string labels. This means that the following
will create\r\none numeric label `numeric_labels.time_range_duration`,
and one string\r\nlabel
`labels.app`.\r\n\r\n```ts\r\ntransaction.addLabels({
time_range_duration: 123, app: 'apm' });\r\n```\r\n\r\nRight now the
numeric labels section is far down on the metadata list,\r\nmaking it
hard to find (I missed it and didn't understand what was
going\r\non).\r\n\r\n\r\n![image](https://user-images.githubusercontent.com/209966/219943397-2c9fe2fe-89be-4c9b-8007-0986ed6d4b94.png)\r\n...\r\n\r\n![image](https://user-images.githubusercontent.com/209966/219943400-80442b60-33e7-4275-a110-d592f4b12d60.png)\r\n\r\n\r\n**Change
in this PR**\r\nThis PR moves the the `numeric_labels` to the top of
Metadata, just\r\nbelow the `labels` section.\r\n\r\n<img width=\"1443\"
alt=\"image\"\r\nsrc=\"https://user-images.githubusercontent.com/209966/219975299-709ab77f-8ad7-42c0-9fe5-cbcdb7393c78.png\">","sha":"5ee2b213b602f296677dde711b74d8153950af32"}}]}]
BACKPORT-->

Co-authored-by: Søren Louv-Jansen <soren.louv@elastic.co>
---
 .../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 c9e0f2aa66745..67e2d2b85500b 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 084729a08146d..f973879c7029f 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 3ce7698460f30..fc08f3de24614 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[] }>;
 }