Merge pull request elastic#5 from AlexanderWert/mobile-exploratory-view

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

@@ -13,13 +13,15 @@ import { getKPITrendsLensConfig } from './rum/kpi_over_time_config';
 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';
 
 interface Props {
   reportType: keyof typeof ReportViewTypes;
   indexPattern: IndexPattern;
   dataType: AppDataType;
 }
 
+
 export const getDefaultConfigs = ({ reportType, dataType, indexPattern }: Props) => {
   switch (dataType) {
     case 'ux':
@@ -36,8 +38,10 @@ export const getDefaultConfigs = ({ reportType, dataType, indexPattern }: Props)
       }
       return getSyntheticsKPIConfig({ indexPattern });
     case 'mobile':
+      if (reportType === 'dist') {
+        return getMobileKPIDistributionConfig({ indexPattern });
+      }
       return getMobileKPIConfig({ indexPattern });
-
     default:
       return getKPITrendsLensConfig({ indexPattern });
   }

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

@@ -55,6 +55,7 @@ export const parseCustomFieldName = (
   let fieldName = sourceField;
   let columnType;
   let columnFilters;
+  let timeScale;
   let columnLabel;
 
   const rdf = reportViewConfig.reportDefinitions ?? [];
@@ -70,17 +71,19 @@ export const parseCustomFieldName = (
         );
         columnType = currField?.columnType;
         columnFilters = currField?.columnFilters;
+        timeScale = currField?.timeScale;
         columnLabel = currField?.label;
       }
     } else if (customField.options?.[0].field || customField.options?.[0].id) {
       fieldName = customField.options?.[0].field || customField.options?.[0].id;
       columnType = customField.options?.[0].columnType;
       columnFilters = customField.options?.[0].columnFilters;
+      timeScale = customField.options?.[0].timeScale;
       columnLabel = customField.options?.[0].label;
     }
   }
 
-  return { fieldName, columnType, columnFilters, columnLabel };
+  return { fieldName, columnType, columnFilters, timeScale, columnLabel };
 };
 
 export class LensAttributes {
@@ -263,15 +266,14 @@ export class LensAttributes {
     label?: string,
     colIndex?: number
   ) {
-    const { fieldMeta, columnType, fieldName, columnFilters, columnLabel } = this.getFieldMeta(
-      sourceField
-    );
+    const { fieldMeta, columnType, fieldName, columnFilters, timeScale, columnLabel } = this.getFieldMeta(sourceField);
     const { type: fieldType } = fieldMeta ?? {};
 
     if (fieldName === 'Records' || columnType === FILTER_RECORDS) {
       return this.getRecordsColumn(
         columnLabel || label,
-        colIndex !== undefined ? columnFilters?.[colIndex] : undefined
+        colIndex !== undefined ? columnFilters?.[colIndex] : undefined,
+        timeScale
       );
     }
 
@@ -291,13 +293,11 @@ export class LensAttributes {
   }
 
   getFieldMeta(sourceField: string) {
-    const { fieldName, columnType, columnFilters, columnLabel } = this.getCustomFieldName(
-      sourceField
-    );
+    const { fieldName, columnType, columnFilters, timeScale, columnLabel } = this.getCustomFieldName(sourceField);
 
     const fieldMeta = this.indexPattern.getFieldByName(fieldName);
 
-    return { fieldMeta, fieldName, columnType, columnFilters, columnLabel };
+    return { fieldMeta, fieldName, columnType, columnFilters, timeScale, columnLabel };
   }
 
   getMainYAxis() {
@@ -330,7 +330,7 @@ export class LensAttributes {
     return lensColumns;
   }
 
-  getRecordsColumn(label?: string, columnFilter?: ColumnFilter): CountIndexPatternColumn {
+  getRecordsColumn(label?: string, columnFilter?: ColumnFilter, timeScale?: string): CountIndexPatternColumn {
     return {
       dataType: 'number',
       isBucketed: false,
@@ -339,6 +339,7 @@ export class LensAttributes {
       scale: 'ratio',
       sourceField: 'Records',
       filter: columnFilter,
+      timeScale: timeScale,
     } as CountIndexPatternColumn;
   }
 

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

@@ -0,0 +1,89 @@
+/*
+ * 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, OPERATION_COLUMN, RECORDS_FIELD } from '../constants';
+import { buildPhraseFilter } from '../utils';
+import {
+  METRIC_SYSTEM_CPU_USAGE,
+  METRIC_SYSTEM_MEMORY_USAGE,
+  SERVICE_NAME,
+  TRANSACTION_DURATION,
+} from '../constants/elasticsearch_fieldnames';
+
+export function getMobileKPIDistributionConfig({ indexPattern }: ConfigProps): DataSeries {
+  return {
+    reportType: 'data-distribution',
+    defaultSeriesType: 'bar',
+    seriesTypes: ['line', 'bar'],
+    xAxisColumn: {
+      sourceField: 'performance.metric',
+    },
+    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',
+    ],
+    filters: [
+      ...buildPhraseFilter('agent.name', 'iOS/swift', indexPattern),
+      ...buildPhraseFilter('processor.event', 'transaction', indexPattern)
+  ],
+    labels: {
+      ...FieldLabels,
+      [SERVICE_NAME]: 'Mobile app',
+    },
+    reportDefinitions: [
+      {
+        field: SERVICE_NAME,
+        required: true,
+      },
+      {
+        field: 'performance.metric',
+        custom: true,
+        options: [
+          {
+            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,
+          },
+        ],
+      },
+    ],
+  };
+}

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

@@ -6,7 +6,7 @@
  */
 
 import { ConfigProps, DataSeries } from '../../types';
-import { FieldLabels, OPERATION_COLUMN } from '../constants';
+import { FieldLabels, OPERATION_COLUMN, RECORDS_FIELD } from '../constants';
 import { buildPhrasesFilter } from '../utils';
 import {
   METRIC_SYSTEM_CPU_USAGE,
@@ -84,6 +84,18 @@ export function getMobileKPIConfig({ indexPattern }: ConfigProps): DataSeries {
             id: METRIC_SYSTEM_CPU_USAGE,
             columnType: OPERATION_COLUMN,
           },
+          { 
+            field: RECORDS_FIELD, 
+            id: RECORDS_FIELD, 
+            label: "Transactions per minute",
+            columnFilters: [
+              {
+                language: 'kuery',
+                query: `processor.event: transaction`,
+              }
+            ],
+            timeScale: 'm',
+          },
         ],
       },
     ],

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

@@ -30,10 +30,8 @@ export const ReportTypes: Record<AppDataType, Array<{ id: ReportViewTypeId; labe
     { id: 'cwv', label: 'Core Web Vitals' },
   ],
   mobile: [
-    {
-      id: 'kpi',
-      label: 'KPI over time',
-    },
+    { id: 'kpi', label: 'KPI over time' },
+    { id: 'dist', label: 'Performance distribution' },
   ],
   apm: [],
   infra_logs: [],

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

@@ -47,6 +47,7 @@ export interface ReportDefinition {
     description?: string;
     columnType?: 'range' | 'operation' | 'FILTER_RECORDS';
     columnFilters?: ColumnFilter[];
+    timeScale?: string;
   }>;
 }