[Exploratory view] Fix mobile device distribution (#104626) (#104914)

Co-authored-by: Shahzad <shahzad.muhammad@elastic.co>

Author: kibanamachine

x-pack/plugins/observability/public/components/shared/exploratory_view/configurations/constants/constants.ts

@@ -44,6 +44,7 @@ import {
   TAGS_LABEL,
   TBT_LABEL,
   URL_LABEL,
+  BACKEND_TIME_LABEL,
 } from './labels';
 
 export const DEFAULT_TIME = { from: 'now-1h', to: 'now' };
@@ -66,7 +67,7 @@ export const FieldLabels: Record<string, string> = {
   [TBT_FIELD]: TBT_LABEL,
   [FID_FIELD]: FID_LABEL,
   [CLS_FIELD]: CLS_LABEL,
-  [TRANSACTION_TIME_TO_FIRST_BYTE]: 'Page load time',
+  [TRANSACTION_TIME_TO_FIRST_BYTE]: BACKEND_TIME_LABEL,
 
   'monitor.id': MONITOR_ID_LABEL,
   'monitor.status': MONITOR_STATUS_LABEL,

x-pack/plugins/observability/public/components/shared/exploratory_view/configurations/lens_attributes.test.ts

@@ -411,6 +411,7 @@ describe('Lens Attribute', () => {
         sourceField: USER_AGENT_NAME,
         layerId: 'layer0',
         indexPattern: mockIndexPattern,
+        labels: layerConfig.seriesConfig.labels,
       });
 
       expect(lnsAttr.visualization.layers).toEqual([

x-pack/plugins/observability/public/components/shared/exploratory_view/configurations/lens_attributes.ts

@@ -30,7 +30,6 @@ import {
 import { urlFiltersToKueryString } from '../utils/stringify_kueries';
 import { ExistsFilter, IndexPattern } from '../../../../../../../../src/plugins/data/common';
 import {
-  FieldLabels,
   FILTER_RECORDS,
   USE_BREAK_DOWN_COLUMN,
   TERMS_COLUMN,
@@ -125,17 +124,19 @@ export class LensAttributes {
   getBreakdownColumn({
     sourceField,
     layerId,
+    labels,
     indexPattern,
   }: {
     sourceField: string;
     layerId: string;
+    labels: Record<string, string>;
     indexPattern: IndexPattern;
   }): TermsIndexPatternColumn {
     const fieldMeta = indexPattern.getFieldByName(sourceField);
 
     return {
       sourceField,
-      label: `Top values of ${FieldLabels[sourceField]}`,
+      label: `Top values of ${labels[sourceField]}`,
       dataType: fieldMeta?.type as DataType,
       operationType: 'terms',
       scale: 'ordinal',
@@ -304,6 +305,7 @@ export class LensAttributes {
         layerId,
         indexPattern: layerConfig.indexPattern,
         sourceField: layerConfig.breakdown || layerConfig.seriesConfig.breakdownFields[0],
+        labels: layerConfig.seriesConfig.labels,
       });
     }
 
@@ -590,6 +592,7 @@ export class LensAttributes {
                   layerId,
                   sourceField: breakdown,
                   indexPattern: layerConfig.indexPattern,
+                  labels: layerConfig.seriesConfig.labels,
                 }),
               }
             : {}),

x-pack/plugins/observability/public/components/shared/exploratory_view/configurations/mobile/device_distribution_config.ts

@@ -6,7 +6,7 @@
  */
 
 import { ConfigProps, SeriesConfig } from '../../types';
-import { FieldLabels, USE_BREAK_DOWN_COLUMN } from '../constants';
+import { FieldLabels, REPORT_METRIC_FIELD, USE_BREAK_DOWN_COLUMN } from '../constants';
 import { buildPhraseFilter } from '../utils';
 import { SERVICE_NAME } from '../constants/elasticsearch_fieldnames';
 import { MOBILE_APP, NUMBER_OF_DEVICES } from '../constants/labels';
@@ -22,9 +22,8 @@ export function getMobileDeviceDistributionConfig({ indexPattern }: ConfigProps)
     },
     yAxisColumns: [
       {
-        sourceField: 'labels.device_id',
+        sourceField: REPORT_METRIC_FIELD,
         operationType: 'unique_count',
-        label: NUMBER_OF_DEVICES,
       },
     ],
     hasOperationType: false,
@@ -39,6 +38,13 @@ export function getMobileDeviceDistributionConfig({ indexPattern }: ConfigProps)
       ...MobileFields,
       [SERVICE_NAME]: MOBILE_APP,
     },
+    metricOptions: [
+      {
+        id: 'labels.device_id',
+        field: 'labels.device_id',
+        label: NUMBER_OF_DEVICES,
+      },
+    ],
     definitionFields: [SERVICE_NAME],
   };
 }

x-pack/plugins/observability/public/components/shared/exploratory_view/configurations/mobile/distribution_config.ts

@@ -6,7 +6,7 @@
  */
 
 import { ConfigProps, SeriesConfig } from '../../types';
-import { FieldLabels, OPERATION_COLUMN, RECORDS_FIELD, REPORT_METRIC_FIELD } from '../constants';
+import { FieldLabels, RECORDS_FIELD, REPORT_METRIC_FIELD } from '../constants';
 import { buildPhrasesFilter } from '../utils';
 import {
   METRIC_SYSTEM_CPU_USAGE,
@@ -49,19 +49,16 @@ export function getMobileKPIDistributionConfig({ indexPattern }: ConfigProps): S
         label: RESPONSE_LATENCY,
         field: TRANSACTION_DURATION,
         id: TRANSACTION_DURATION,
-        columnType: OPERATION_COLUMN,
       },
       {
         label: MEMORY_USAGE,
         field: METRIC_SYSTEM_MEMORY_USAGE,
         id: METRIC_SYSTEM_MEMORY_USAGE,
-        columnType: OPERATION_COLUMN,
       },
       {
         label: CPU_USAGE,
         field: METRIC_SYSTEM_CPU_USAGE,
         id: METRIC_SYSTEM_CPU_USAGE,
-        columnType: OPERATION_COLUMN,
       },
     ],
   };