[Exploratory View] Mobile experience

x-pack/plugins/apm/public/services/rest/apm_observability_overview_fetchers.ts

@@ -53,10 +53,8 @@ export const fetchObservabilityOverviewPageData = async ({
 };
 
 export async function getHasData() {
-  const res = await callApmApi({
+  return await callApmApi({
     endpoint: 'GET /api/apm/observability_overview/has_data',
     signal: null,
   });
-
-  return res.hasData;
 }

x-pack/plugins/apm/server/lib/observability_overview/has_data.ts

@@ -28,9 +28,15 @@ export function getHasData({ setup }: { setup: Setup }) {
       };
 
       const response = await apmEventClient.search(params);
-      return response.hits.total.value > 0;
+      return {
+        hasData: response.hits.total.value > 0,
+        indices: setup.indices['apm_oss.transactionIndices']!,
+      };
     } catch (e) {
-      return false;
+      return {
+        hasData: false,
+        indices: setup.indices['apm_oss.transactionIndices']!,
+      };
     }
   });
 }

x-pack/plugins/apm/server/routes/observability_overview.ts

@@ -21,8 +21,7 @@ const observabilityOverviewHasDataRoute = createApmServerRoute({
   options: { tags: ['access:apm'] },
   handler: async (resources) => {
     const setup = await setupRequest(resources);
-    const res = await getHasData({ setup });
-    return { hasData: res };
+    return await getHasData({ setup });
   },
 });
 

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

@@ -6,7 +6,11 @@
  */
 
 import { FieldFormat } from '../../types';
-import { TRANSACTION_DURATION } from '../constants/elasticsearch_fieldnames';
+import {
+  METRIC_SYSTEM_CPU_USAGE,
+  METRIC_SYSTEM_MEMORY_USAGE,
+  TRANSACTION_DURATION,
+} from '../constants/elasticsearch_fieldnames';
 
 export const apmFieldFormats: FieldFormat[] = [
   {
@@ -21,4 +25,12 @@ export const apmFieldFormats: FieldFormat[] = [
       },
     },
   },
+  {
+    field: METRIC_SYSTEM_MEMORY_USAGE,
+    format: { id: 'bytes', params: {} },
+  },
+  {
+    field: METRIC_SYSTEM_CPU_USAGE,
+    format: { id: 'percent', params: {} },
+  },
 ];

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

@@ -26,6 +26,7 @@ import {
   LOGS_FREQUENCY_LABEL,
   MEMORY_USAGE_LABEL,
   METRIC_LABEL,
+  MOBILE_RESPONSE_LABEL,
   MONITOR_DURATION_LABEL,
   MONITOR_ID_LABEL,
   MONITOR_NAME_LABEL,
@@ -80,6 +81,16 @@ 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> = {
@@ -94,6 +105,7 @@ export const DataViewLabels: Record<ReportViewTypeId, string> = {
   mem: MEMORY_USAGE_LABEL,
   nwk: NETWORK_ACTIVITY_LABEL,
   cwv: CORE_WEB_VITALS_LABEL,
+  mkpi: MOBILE_RESPONSE_LABEL,
 };
 
 export const ReportToDataTypeMap: Record<ReportViewTypeId, AppDataType> = {
@@ -108,6 +120,7 @@ export const ReportToDataTypeMap: Record<ReportViewTypeId, AppDataType> = {
   logs: 'infra_logs',
   cpu: 'infra_metrics',
   cwv: 'ux',
+  mkpi: 'apm',
 };
 
 export const USE_BREAK_DOWN_COLUMN = 'USE_BREAK_DOWN_COLUMN';

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

@@ -86,6 +86,8 @@ export const ERROR_PAGE_URL = 'error.page.url';
 
 // METRICS
 export const METRIC_SYSTEM_FREE_MEMORY = 'system.memory.actual.free';
+export const METRIC_SYSTEM_MEMORY_USAGE = 'system.memory.usage';
+export const METRIC_SYSTEM_CPU_USAGE = 'system.cpu.usage';
 export const METRIC_SYSTEM_TOTAL_MEMORY = 'system.memory.total';
 export const METRIC_SYSTEM_CPU_PERCENT = 'system.cpu.total.norm.pct';
 export const METRIC_PROCESS_CPU_PERCENT = 'system.process.cpu.total.norm.pct';

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

@@ -208,6 +208,13 @@ export const CORE_WEB_VITALS_LABEL = i18n.translate(
   }
 );
 
+export const MOBILE_RESPONSE_LABEL = i18n.translate(
+  'xpack.observability.expView.fieldLabels.mobileReponse',
+  {
+    defaultMessage: 'Mobile response',
+  }
+);
+
 export const MEMORY_USAGE_LABEL = i18n.translate(
   'xpack.observability.expView.fieldLabels.memoryUsage',
   {

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

@@ -18,6 +18,7 @@ import { getNetworkActivityLensConfig } from './metrics/network_activity_config'
 import { getLogsFrequencyLensConfig } from './logs/logs_frequency_config';
 import { IIndexPattern } from '../../../../../../../../src/plugins/data/common/index_patterns';
 import { getCoreWebVitalsConfig } from './rum/core_web_vitals_config';
+import { getMobileKPIConfig } from './mobile/kpi_over_time_config';
 
 interface Props {
   reportType: keyof typeof ReportViewTypes;
@@ -37,6 +38,8 @@ export const getDefaultConfigs = ({ reportType, seriesId, indexPattern }: Props)
       return getMonitorDurationConfig({ seriesId, indexPattern });
     case 'uptime-pings':
       return getMonitorPingsConfig({ seriesId, indexPattern });
+    case 'mobile-kpi':
+      return getMobileKPIConfig({ seriesId, indexPattern });
     case 'service-latency':
       return getServiceLatencyLensConfig({ seriesId, indexPattern });
     case 'service-throughput':

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

@@ -0,0 +1,90 @@
+/*
+ * 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 } 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 getMobileKPIConfig({ seriesId, indexPattern }: ConfigProps): DataSeries {
+  return {
+    id: seriesId,
+    reportType: 'service-latency',
+    defaultSeriesType: 'line',
+    seriesTypes: ['line', 'bar'],
+    xAxisColumn: {
+      sourceField: '@timestamp',
+    },
+    yAxisColumns: [
+      {
+        sourceField: 'business.kpi',
+        operationType: 'median',
+      },
+    ],
+    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',
+    ],
+    filters: [...buildPhraseFilter('agent.name', 'iOS/swift', indexPattern)],
+    labels: {
+      ...FieldLabels,
+      [TRANSACTION_DURATION]: 'Response latency',
+      [SERVICE_NAME]: 'Mobile app',
+      [METRIC_SYSTEM_MEMORY_USAGE]: 'Memory usage',
+      [METRIC_SYSTEM_CPU_USAGE]: 'CPU usage',
+    },
+    reportDefinitions: [
+      {
+        field: SERVICE_NAME,
+        required: true,
+      },
+      {
+        field: 'business.kpi',
+        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/hooks/use_app_index_pattern.tsx

@@ -41,14 +41,15 @@ export function IndexPatternContextProvider({ children }: ProviderProps) {
     synthetics: null,
     ux: null,
     apm: null,
+    mobile: null,
   } as HasAppDataState);
 
   const {
     services: { data },
   } = useKibana<ObservabilityPublicPluginsStart>();
 
   const checkIfAppHasData = async (dataType: AppDataType) => {
-    const handler = getDataHandler(dataType);
+    const handler = getDataHandler(dataType === 'mobile' ? 'apm' : dataType);
     return handler?.hasData();
   };
 

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

@@ -16,6 +16,7 @@ import { ReportToDataTypeMap } from '../../configurations/constants';
 export const dataTypes: Array<{ id: AppDataType; label: string }> = [
   { id: 'synthetics', label: 'Synthetic Monitoring' },
   { id: 'ux', label: 'User Experience (RUM)' },
+  { id: 'mobile', label: 'Mobile Experience' },
   // { id: 'infra_logs', label: 'Logs' },
   // { id: 'infra_metrics', label: 'Metrics' },
   // { id: 'apm', label: 'APM' },

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

@@ -20,6 +20,7 @@ export function ReportFilters({
     <SeriesFilter
       series={dataViewSeries}
       defaultFilters={dataViewSeries.defaultFilters}
+      filters={dataViewSeries.filters}
       seriesId={seriesId}
       isNew={true}
     />

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

@@ -29,6 +29,12 @@ export const ReportTypes: Record<AppDataType, Array<{ id: ReportViewTypeId; labe
     { id: 'kpi', label: 'KPI over time' },
     { id: 'cwv', label: 'Core Web Vitals' },
   ],
+  mobile: [
+    {
+      id: 'mkpi',
+      label: 'KPI over time',
+    },
+  ],
   apm: [
     { id: 'svl', label: 'Latency' },
     { id: 'tpt', label: 'Throughput' },

x-pack/plugins/observability/public/components/shared/exploratory_view/series_editor/columns/filter_expanded.test.tsx

@@ -22,6 +22,7 @@ describe('FilterExpanded', function () {
         label={'Browser Family'}
         field={USER_AGENT_NAME}
         goBack={jest.fn()}
+        filters={[]}
       />,
       { initSeries }
     );
@@ -38,6 +39,7 @@ describe('FilterExpanded', function () {
         label={'Browser Family'}
         field={USER_AGENT_NAME}
         goBack={goBack}
+        filters={[]}
       />,
       { initSeries }
     );
@@ -61,6 +63,7 @@ describe('FilterExpanded', function () {
         label={'Browser Family'}
         field={USER_AGENT_NAME}
         goBack={goBack}
+        filters={[]}
       />,
       { initSeries }
     );
@@ -84,6 +87,7 @@ describe('FilterExpanded', function () {
         label={'Browser Family'}
         field={USER_AGENT_NAME}
         goBack={jest.fn()}
+        filters={[]}
       />,
       { initSeries }
     );

x-pack/plugins/observability/public/components/shared/exploratory_view/series_editor/columns/filter_expanded.tsx

@@ -6,16 +6,20 @@
  */
 
 import React, { useState, Fragment } from 'react';
-import { EuiFieldSearch, EuiSpacer, EuiButtonEmpty, EuiFilterGroup } from '@elastic/eui';
+import { EuiFieldSearch, EuiSpacer, EuiButtonEmpty, EuiFilterGroup, EuiText } from '@elastic/eui';
 import styled from 'styled-components';
 import { rgba } from 'polished';
 import { i18n } from '@kbn/i18n';
+import { QueryDslQueryContainer } from '@elastic/elasticsearch/api/types';
 import { useAppIndexPatternContext } from '../../hooks/use_app_index_pattern';
 import { useSeriesStorage } from '../../hooks/use_series_storage';
-import { UrlFilter } from '../../types';
+import { DataSeries, UrlFilter } from '../../types';
 import { FilterValueButton } from './filter_value_btn';
 import { useValuesList } from '../../../../../hooks/use_values_list';
 import { euiStyled } from '../../../../../../../../../src/plugins/kibana_react/common';
+import { ESFilter } from '../../../../../../../../../typings/elasticsearch';
+import { PersistableFilter } from '../../../../../../../lens/common';
+import { ExistsFilter } from '../../../../../../../../../src/plugins/data/common/es_query/filters';
 
 interface Props {
   seriesId: string;
@@ -24,9 +28,18 @@ interface Props {
   isNegated?: boolean;
   goBack: () => void;
   nestedField?: string;
+  filters: DataSeries['filters'];
 }
 
-export function FilterExpanded({ seriesId, field, label, goBack, nestedField, isNegated }: Props) {
+export function FilterExpanded({
+  seriesId,
+  field,
+  label,
+  goBack,
+  nestedField,
+  isNegated,
+  filters: defaultFilters,
+}: Props) {
   const { indexPattern } = useAppIndexPatternContext();
 
   const [value, setValue] = useState('');
@@ -37,12 +50,25 @@ export function FilterExpanded({ seriesId, field, label, goBack, nestedField, is
 
   const series = getSeries(seriesId);
 
+  const queryFilters: ESFilter[] = [];
+
+  defaultFilters?.forEach((qFilter: PersistableFilter | ExistsFilter) => {
+    if (qFilter.query) {
+      queryFilters.push(qFilter.query);
+    }
+    const asExistFilter = qFilter as ExistsFilter;
+    if (asExistFilter?.exists) {
+      queryFilters.push(asExistFilter.exists as QueryDslQueryContainer);
+    }
+  });
+
   const { values, loading } = useValuesList({
     query: value,
     indexPattern,
     sourceField: field,
     time: series.time,
     keepHistory: true,
+    filters: queryFilters,
   });
 
   const filters = series?.filters ?? [];
@@ -70,6 +96,13 @@ export function FilterExpanded({ seriesId, field, label, goBack, nestedField, is
       />
       <EuiSpacer size="s" />
       <ListWrapper>
+        {displayValues.length === 0 && !loading && (
+          <EuiText>
+            {i18n.translate('xpack.observability.filters.expanded.noFilter', {
+              defaultMessage: 'No filters found.',
+            })}
+          </EuiText>
+        )}
         {displayValues.map((opt) => (
           <Fragment key={opt}>
             <EuiFilterGroup fullWidth={true} color="primary">