[8.7] [APM] Display numeric labels at the top of metadata section (#151575) (#151694)

# 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](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](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](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>

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

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: [],
         },
       ];

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[] }>;
 }