Merge pull request #6 from AlexanderWert/mobile-exploratory-view

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

@@ -11,18 +11,13 @@ import {
   AGENT_HOST_LABEL,
   BROWSER_FAMILY_LABEL,
   BROWSER_VERSION_LABEL,
-  CARRIER_LOCATION,
-  CARRIER_NAME,
   CLS_LABEL,
-  CONNECTION_TYPE,
   CORE_WEB_VITALS_LABEL,
   DEVICE_LABEL,
-  DEVICE_MODEL,
   ENVIRONMENT_LABEL,
   FCP_LABEL,
   FID_LABEL,
   HOST_NAME_LABEL,
-  HOST_OS,
   KIP_OVER_TIME_LABEL,
   KPI_LABEL,
   LCP_LABEL,
@@ -34,12 +29,10 @@ import {
   MONITOR_TYPE_LABEL,
   OBSERVER_LOCATION_LABEL,
   OS_LABEL,
-  OS_PLATFORM,
   PERF_DIST_LABEL,
   PORT_LABEL,
   REQUEST_METHOD,
   SERVICE_NAME_LABEL,
-  SERVICE_VERSION,
   TAGS_LABEL,
   TBT_LABEL,
   URL_LABEL,
@@ -80,16 +73,7 @@ export const FieldLabels: Record<string, string> = {
 
   'performance.metric': METRIC_LABEL,
   'Business.KPI': KPI_LABEL,
-
-  'labels.net_connection_carrier_name': CARRIER_NAME,
   'http.request.method': REQUEST_METHOD,
-  'labels.net_connection_type': CONNECTION_TYPE,
-  'host.os.full': HOST_OS,
-  'service.version': SERVICE_VERSION,
-  'host.os.platform': OS_PLATFORM,
-  'labels.device_model': DEVICE_MODEL,
-  // eslint-disable-next-line @typescript-eslint/naming-convention
-  'labels.net_connection_carrier_isoCountryCode': CARRIER_LOCATION,
 };
 
 export const DataViewLabels: Record<ReportViewTypeId, string> = {
@@ -100,4 +84,5 @@ export const DataViewLabels: Record<ReportViewTypeId, string> = {
 
 export const USE_BREAK_DOWN_COLUMN = 'USE_BREAK_DOWN_COLUMN';
 export const FILTER_RECORDS = 'FILTER_RECORDS';
+export const TERMS_COLUMN = 'TERMS_COLUMN';
 export const OPERATION_COLUMN = 'operation';

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

@@ -284,9 +284,16 @@ export const CPU_USAGE = i18n.translate('xpack.observability.expView.fieldLabels
   defaultMessage: 'CPU Usage',
 });
 
-export const TRANSACTION_PER_MINUTE = i18n.translate(
+export const TRANSACTIONS_PER_MINUTE = i18n.translate(
   'xpack.observability.expView.fieldLabels.transactionPerMinute',
   {
     defaultMessage: 'Transactions per minute',
   }
 );
+
+export const NUMBER_OF_DEVICES = i18n.translate(
+  'xpack.observability.expView.fieldLabels.numberOfDevices',
+  {
+    defaultMessage: 'Number of Devices',
+  }
+);

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

@@ -14,6 +14,8 @@ import { IndexPattern } from '../../../../../../../../src/plugins/data/common';
 import { getCoreWebVitalsConfig } from './rum/core_web_vitals_config';
 import { getMobileKPIConfig } from './mobile/kpi_over_time_config';
 import { getMobileKPIDistributionConfig } from './mobile/distribution_config';
+import { getMobileDeviceDistributionConfig } from './mobile/device_distribution_config';
+
 
 interface Props {
   reportType: keyof typeof ReportViewTypes;
@@ -40,6 +42,9 @@ export const getDefaultConfigs = ({ reportType, dataType, indexPattern }: Props)
       if (reportType === 'dist') {
         return getMobileKPIDistributionConfig({ indexPattern });
       }
+      if (reportType === 'mdd') {
+        return getMobileDeviceDistributionConfig({ indexPattern });
+      }
       return getMobileKPIConfig({ indexPattern });
     default:
       return getKPITrendsLensConfig({ indexPattern });

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

@@ -25,13 +25,14 @@ import {
   FieldBasedIndexPatternColumn,
   SumIndexPatternColumn,
   TermsIndexPatternColumn,
+  CardinalityIndexPatternColumn,
 } from '../../../../../../lens/public';
 import {
   buildPhraseFilter,
   buildPhrasesFilter,
   IndexPattern,
 } from '../../../../../../../../src/plugins/data/common';
-import { FieldLabels, FILTER_RECORDS, USE_BREAK_DOWN_COLUMN } from './constants';
+import { FieldLabels, FILTER_RECORDS, USE_BREAK_DOWN_COLUMN, TERMS_COLUMN } from './constants';
 import { ColumnFilter, DataSeries, UrlFilter, URLReportDefinition } from '../types';
 
 function getLayerReferenceName(layerId: string) {
@@ -186,14 +187,19 @@ export class LensAttributes {
     };
   }
 
+  getCardinalityColumn(sourceField: string,
+    label?: string) {
+      return this.getNumberOperationColumn(sourceField, 'unique_count', label);
+  }
+
   getNumberColumn(
     sourceField: string,
     columnType?: string,
     operationType?: string,
     label?: string
   ) {
     if (columnType === 'operation' || operationType) {
-      if (operationType === 'median' || operationType === 'average' || operationType === 'sum') {
+      if (operationType === 'median' || operationType === 'average' || operationType === 'sum' || operationType === 'unique_count') {
         return this.getNumberOperationColumn(sourceField, operationType, label);
       }
       if (operationType?.includes('th')) {
@@ -205,9 +211,9 @@ export class LensAttributes {
 
   getNumberOperationColumn(
     sourceField: string,
-    operationType: 'average' | 'median' | 'sum',
+    operationType: 'average' | 'median' | 'sum' | 'unique_count',
     label?: string
-  ): AvgIndexPatternColumn | MedianIndexPatternColumn | SumIndexPatternColumn {
+  ): AvgIndexPatternColumn | MedianIndexPatternColumn | SumIndexPatternColumn | CardinalityIndexPatternColumn {
     return {
       ...buildNumberColumn(sourceField),
       label:
@@ -237,7 +243,7 @@ export class LensAttributes {
       params: { percentile: Number(percentileValue.split('th')[0]) },
     };
   }
-
+  
   getDateHistogramColumn(sourceField: string): DateHistogramIndexPatternColumn {
     return {
       sourceField,
@@ -250,6 +256,25 @@ export class LensAttributes {
     };
   }
 
+  getTermsColumn(sourceField: string, label?: string) : TermsIndexPatternColumn{
+    return {
+      operationType: 'terms',
+      sourceField: sourceField,
+      label: label || 'Top values of ' + sourceField,
+      dataType: 'string',
+      isBucketed: true,
+      scale: 'ordinal',
+      params: {
+        size: 10,
+        orderBy: {
+          type: 'alphabetical',
+          fallback: false
+        },
+        orderDirection: 'desc',
+      }
+    };
+  }
+
   getXAxis() {
     const { xAxisColumn } = this.reportViewConfig;
 
@@ -276,6 +301,12 @@ export class LensAttributes {
     } = this.getFieldMeta(sourceField);
     const { type: fieldType } = fieldMeta ?? {};
 
+    if(columnType === TERMS_COLUMN){
+      return this.getTermsColumn(
+        fieldName, columnLabel || label
+      );
+    }
+
     if (fieldName === 'Records' || columnType === FILTER_RECORDS) {
       return this.getRecordsColumn(
         columnLabel || label,
@@ -290,6 +321,9 @@ export class LensAttributes {
     if (fieldType === 'number') {
       return this.getNumberColumn(fieldName, columnType, operationType, columnLabel || label);
     }
+    if (operationType === 'unique_count') {
+      return this.getCardinalityColumn(fieldName, columnLabel || label);
+    }
 
     // FIXME review my approach again
     return this.getDateHistogramColumn(fieldName);

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

@@ -0,0 +1,51 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { ConfigProps, DataSeries } from '../../types';
+import { FieldLabels, 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';
+import { MobileFields } from './mobile_fields';
+
+export function getMobileDeviceDistributionConfig({ indexPattern }: ConfigProps): DataSeries {
+  return {
+    reportType: 'mobile-device-distribution',
+    defaultSeriesType: 'bar',
+    seriesTypes: ['bar', 'bar_horizontal' ],
+    xAxisColumn: {
+      sourceField: USE_BREAK_DOWN_COLUMN,
+    },
+    yAxisColumns: [
+      {
+        sourceField: 'labels.device_id',
+        operationType: 'unique_count',
+        label: NUMBER_OF_DEVICES,
+      },
+    ],
+    hasOperationType: false,
+    defaultFilters: Object.keys(MobileFields),
+    breakdowns: Object.keys(MobileFields),
+    filters: [
+      ...buildPhraseFilter('agent.name', 'iOS/swift', indexPattern),
+      ...buildPhraseFilter('processor.event', 'transaction', indexPattern),
+  ],
+    labels: {
+      ...FieldLabels,
+      ...MobileFields,
+      [SERVICE_NAME]: MOBILE_APP,
+    },
+    reportDefinitions: [
+      {
+        field: SERVICE_NAME,
+        required: true,
+      },
+    ],
+  };
+}

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

@@ -15,7 +15,9 @@ import {
   SERVICE_NAME,
   TRANSACTION_DURATION,
 } from '../constants/elasticsearch_fieldnames';
+
 import { CPU_USAGE, MEMORY_USAGE, MOBILE_APP, RESPONSE_LATENCY } from '../constants/labels';
+import { MobileFields } from './mobile_fields';
 
 export function getMobileKPIDistributionConfig({ indexPattern }: ConfigProps): DataSeries {
   return {
@@ -28,32 +30,17 @@ export function getMobileKPIDistributionConfig({ indexPattern }: ConfigProps): D
     yAxisColumns: [
       {
         sourceField: RECORDS_FIELD,
-        label: 'Transactions',
       },
     ],
     hasOperationType: false,
-    defaultFilters: [
-      'labels.net_connection_carrier_name',
-      'labels.device_model',
-      'labels.net_connection_type',
-      'host.os.platform',
-      'host.os.full',
-      'service.version',
-    ],
-    breakdowns: [
-      'labels.net_connection_carrier_name',
-      'labels.device_model',
-      'labels.net_connection_type',
-      'host.os.platform',
-      'host.os.full',
-      'service.version',
-      'labels.net_connection_carrier_isoCountryCode',
-    ],
+    defaultFilters: Object.keys(MobileFields),
+    breakdowns: Object.keys(MobileFields),
     filters: [
       ...buildPhrasesFilter('agent.name', ['iOS/swift', 'open-telemetry/swift'], indexPattern),
     ],
     labels: {
       ...FieldLabels,
+      ...MobileFields,
       [SERVICE_NAME]: MOBILE_APP,
     },
     reportDefinitions: [

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

@@ -20,14 +20,15 @@ import {
   MEMORY_USAGE,
   MOBILE_APP,
   RESPONSE_LATENCY,
-  TRANSACTION_PER_MINUTE,
+  TRANSACTIONS_PER_MINUTE,
 } from '../constants/labels';
+import { MobileFields } from './mobile_fields';
 
 export function getMobileKPIConfig({ indexPattern }: ConfigProps): DataSeries {
   return {
     reportType: 'kpi-over-time',
     defaultSeriesType: 'line',
-    seriesTypes: ['line', 'bar'],
+    seriesTypes: ['line', 'bar', 'area'],
     xAxisColumn: {
       sourceField: '@timestamp',
     },
@@ -38,28 +39,14 @@ export function getMobileKPIConfig({ indexPattern }: ConfigProps): DataSeries {
       },
     ],
     hasOperationType: true,
-    defaultFilters: [
-      'labels.net_connection_carrier_name',
-      'labels.device_model',
-      'labels.net_connection_type',
-      'host.os.platform',
-      'host.os.full',
-      'service.version',
-    ],
-    breakdowns: [
-      'labels.net_connection_carrier_name',
-      'labels.device_model',
-      'labels.net_connection_type',
-      'host.os.platform',
-      'host.os.full',
-      'service.version',
-      'labels.net_connection_carrier_isoCountryCode',
-    ],
+    defaultFilters: Object.keys(MobileFields),
+    breakdowns: Object.keys(MobileFields),
     filters: [
       ...buildPhrasesFilter('agent.name', ['iOS/swift', 'open-telemetry/swift'], indexPattern),
     ],
     labels: {
       ...FieldLabels,
+      ...MobileFields,
       [TRANSACTION_DURATION]: RESPONSE_LATENCY,
       [SERVICE_NAME]: MOBILE_APP,
       [METRIC_SYSTEM_MEMORY_USAGE]: MEMORY_USAGE,
@@ -99,7 +86,7 @@ export function getMobileKPIConfig({ indexPattern }: ConfigProps): DataSeries {
           {
             field: RECORDS_FIELD,
             id: RECORDS_FIELD,
-            label: TRANSACTION_PER_MINUTE,
+            label: TRANSACTIONS_PER_MINUTE,
             columnFilters: [
               {
                 language: 'kuery',

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

@@ -0,0 +1,19 @@
+import {
+    CARRIER_LOCATION,
+    CARRIER_NAME,
+    CONNECTION_TYPE,
+    DEVICE_MODEL,
+    HOST_OS,
+    OS_PLATFORM,
+    SERVICE_VERSION,
+  } from '../constants/labels';
+
+export const MobileFields : Record<string, string> = {
+    'host.os.platform': OS_PLATFORM,
+    'host.os.full': HOST_OS,
+    'service.version': SERVICE_VERSION,
+    'network.carrier.icc': CARRIER_LOCATION,
+    'network.carrier.name': CARRIER_NAME,
+    'network.connection_type': CONNECTION_TYPE,
+    'labels.device_model': DEVICE_MODEL,
+};

x-pack/plugins/observability/public/components/shared/exploratory_view/series_builder/series_builder.tsx

@@ -32,6 +32,7 @@ export const ReportTypes: Record<AppDataType, Array<{ id: ReportViewTypeId; labe
   mobile: [
     { id: 'kpi', label: 'KPI over time' },
     { id: 'dist', label: 'Performance distribution' },
+    { id: 'mdd', label: 'Device distribution' },
   ],
   apm: [],
   infra_logs: [],