[7.x] [Exploratory view] Label field filters/breakdowns (#113766)

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

@@ -45,6 +45,7 @@ import {
   TBT_LABEL,
   URL_LABEL,
   BACKEND_TIME_LABEL,
+  LABELS_FIELD,
 } from './labels';
 
 export const DEFAULT_TIME = { from: 'now-1h', to: 'now' };
@@ -85,6 +86,8 @@ export const FieldLabels: Record<string, string> = {
   'performance.metric': METRIC_LABEL,
   'Business.KPI': KPI_LABEL,
   'http.request.method': REQUEST_METHOD,
+  LABEL_FIELDS_FILTER: LABELS_FIELD,
+  LABEL_FIELDS_BREAKDOWN: 'Labels field',
 };
 
 export const DataViewLabels: Record<ReportViewType, string> = {
@@ -113,3 +116,6 @@ export const TERMS_COLUMN = 'TERMS_COLUMN';
 export const OPERATION_COLUMN = 'operation';
 
 export const REPORT_METRIC_FIELD = 'REPORT_METRIC_FIELD';
+
+export const LABEL_FIELDS_FILTER = 'LABEL_FIELDS_FILTER';
+export const LABEL_FIELDS_BREAKDOWN = 'LABEL_FIELDS_BREAKDOWN';

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

@@ -169,6 +169,15 @@ export const TAGS_LABEL = i18n.translate('xpack.observability.expView.fieldLabel
 export const METRIC_LABEL = i18n.translate('xpack.observability.expView.fieldLabels.metric', {
   defaultMessage: 'Metric',
 });
+export const LABELS_FIELD = i18n.translate('xpack.observability.expView.fieldLabels.labels', {
+  defaultMessage: 'Labels',
+});
+export const LABELS_BREAKDOWN = i18n.translate(
+  'xpack.observability.expView.fieldLabels.chooseField',
+  {
+    defaultMessage: 'Labels field',
+  }
+);
 export const KPI_LABEL = i18n.translate('xpack.observability.expView.fieldLabels.kpi', {
   defaultMessage: 'KPI',
 });

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

@@ -6,7 +6,13 @@
  */
 
 import { ConfigProps, SeriesConfig } from '../../types';
-import { FieldLabels, REPORT_METRIC_FIELD, ReportTypes, USE_BREAK_DOWN_COLUMN } from '../constants';
+import {
+  FieldLabels,
+  LABEL_FIELDS_FILTER,
+  REPORT_METRIC_FIELD,
+  ReportTypes,
+  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';
@@ -27,7 +33,7 @@ export function getMobileDeviceDistributionConfig({ indexPattern }: ConfigProps)
       },
     ],
     hasOperationType: false,
-    filterFields: Object.keys(MobileFields),
+    filterFields: [...Object.keys(MobileFields), LABEL_FIELDS_FILTER],
     breakdownFields: Object.keys(MobileFields),
     baseFilters: [
       ...buildPhraseFilter('agent.name', 'iOS/swift', indexPattern),

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

@@ -6,7 +6,13 @@
  */
 
 import { ConfigProps, SeriesConfig } from '../../types';
-import { FieldLabels, RECORDS_FIELD, REPORT_METRIC_FIELD, ReportTypes } from '../constants';
+import {
+  FieldLabels,
+  LABEL_FIELDS_FILTER,
+  RECORDS_FIELD,
+  REPORT_METRIC_FIELD,
+  ReportTypes,
+} from '../constants';
 import { buildPhrasesFilter } from '../utils';
 import {
   METRIC_SYSTEM_CPU_USAGE,
@@ -33,7 +39,7 @@ export function getMobileKPIDistributionConfig({ indexPattern }: ConfigProps): S
       },
     ],
     hasOperationType: false,
-    filterFields: Object.keys(MobileFields),
+    filterFields: [...Object.keys(MobileFields), LABEL_FIELDS_FILTER],
     breakdownFields: Object.keys(MobileFields),
     baseFilters: [
       ...buildPhrasesFilter('agent.name', ['iOS/swift', 'open-telemetry/swift'], indexPattern),

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

@@ -8,6 +8,7 @@
 import { ConfigProps, SeriesConfig } from '../../types';
 import {
   FieldLabels,
+  LABEL_FIELDS_FILTER,
   OPERATION_COLUMN,
   RECORDS_FIELD,
   REPORT_METRIC_FIELD,
@@ -45,7 +46,7 @@ export function getMobileKPIConfig({ indexPattern }: ConfigProps): SeriesConfig
       },
     ],
     hasOperationType: true,
-    filterFields: Object.keys(MobileFields),
+    filterFields: [...Object.keys(MobileFields), LABEL_FIELDS_FILTER],
     breakdownFields: Object.keys(MobileFields),
     baseFilters: [
       ...buildPhrasesFilter('agent.name', ['iOS/swift', 'open-telemetry/swift'], indexPattern),

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

@@ -10,6 +10,7 @@ import { ConfigProps, SeriesConfig } from '../../types';
 import {
   FieldLabels,
   FILTER_RECORDS,
+  LABEL_FIELDS_FILTER,
   REPORT_METRIC_FIELD,
   ReportTypes,
   USE_BREAK_DOWN_COLUMN,
@@ -75,6 +76,7 @@ export function getCoreWebVitalsConfig({ indexPattern }: ConfigProps): SeriesCon
         field: USER_AGENT_NAME,
         nested: USER_AGENT_VERSION,
       },
+      LABEL_FIELDS_FILTER,
     ],
     breakdownFields: [
       SERVICE_NAME,

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

@@ -11,6 +11,7 @@ import {
   REPORT_METRIC_FIELD,
   RECORDS_PERCENTAGE_FIELD,
   ReportTypes,
+  LABEL_FIELDS_FILTER,
 } from '../constants';
 import { buildPhraseFilter } from '../utils';
 import {
@@ -71,6 +72,7 @@ export function getRumDistributionConfig({ indexPattern }: ConfigProps): SeriesC
         field: USER_AGENT_NAME,
         nested: USER_AGENT_VERSION,
       },
+      LABEL_FIELDS_FILTER,
     ],
     breakdownFields: [USER_AGENT_NAME, USER_AGENT_OS, CLIENT_GEO_COUNTRY_NAME, USER_AGENT_DEVICE],
     definitionFields: [SERVICE_NAME, SERVICE_ENVIRONMENT],

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

@@ -8,6 +8,8 @@
 import { ConfigProps, SeriesConfig } from '../../types';
 import {
   FieldLabels,
+  LABEL_FIELDS_BREAKDOWN,
+  LABEL_FIELDS_FILTER,
   OPERATION_COLUMN,
   RECORDS_FIELD,
   REPORT_METRIC_FIELD,
@@ -72,8 +74,15 @@ export function getKPITrendsLensConfig({ indexPattern }: ConfigProps): SeriesCon
         field: USER_AGENT_NAME,
         nested: USER_AGENT_VERSION,
       },
+      LABEL_FIELDS_FILTER,
+    ],
+    breakdownFields: [
+      USER_AGENT_NAME,
+      USER_AGENT_OS,
+      CLIENT_GEO_COUNTRY_NAME,
+      USER_AGENT_DEVICE,
+      LABEL_FIELDS_BREAKDOWN,
     ],
-    breakdownFields: [USER_AGENT_NAME, USER_AGENT_OS, CLIENT_GEO_COUNTRY_NAME, USER_AGENT_DEVICE],
     baseFilters: [
       ...buildPhraseFilter(TRANSACTION_TYPE, 'page-load', indexPattern),
       ...buildPhraseFilter(PROCESSOR_EVENT, 'transaction', indexPattern),

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

@@ -22,6 +22,7 @@ import { IndexPatternState, useAppIndexPatternContext } from './use_app_index_pa
 import { ALL_VALUES_SELECTED } from '../../field_value_suggestions/field_value_combobox';
 import { useTheme } from '../../../../hooks/use_theme';
 import { EuiTheme } from '../../../../../../../../src/plugins/kibana_react/common';
+import { LABEL_FIELDS_BREAKDOWN } from '../configurations/constants';
 
 export const getFiltersFromDefs = (reportDefinitions: SeriesUrl['reportDefinitions']) => {
   return Object.entries(reportDefinitions ?? {})
@@ -69,7 +70,7 @@ export function getLayerConfigs(
         seriesConfig,
         time: series.time,
         name: series.name,
-        breakdown: series.breakdown,
+        breakdown: series.breakdown === LABEL_FIELDS_BREAKDOWN ? undefined : series.breakdown,
         seriesType: series.seriesType,
         operationType: series.operationType,
         reportDefinitions: series.reportDefinitions ?? {},

x-pack/plugins/observability/public/components/shared/exploratory_view/series_editor/columns/breakdowns.tsx → x-pack/plugins/observability/public/components/shared/exploratory_view/series_editor/breakdown/breakdowns.tsx

@@ -9,7 +9,7 @@ import React from 'react';
 import { EuiSuperSelect } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { useSeriesStorage } from '../../hooks/use_series_storage';
-import { USE_BREAK_DOWN_COLUMN } from '../../configurations/constants';
+import { LABEL_FIELDS_BREAKDOWN, USE_BREAK_DOWN_COLUMN } from '../../configurations/constants';
 import { SeriesConfig, SeriesUrl } from '../../types';
 
 interface Props {
@@ -62,9 +62,13 @@ export function Breakdowns({ seriesConfig, seriesId, series }: Props) {
     dropdownDisplay: label,
   }));
 
-  const valueOfSelected =
+  let valueOfSelected =
     selectedBreakdown || (hasUseBreakdownColumn ? options[0].value : NO_BREAKDOWN);
 
+  if (selectedBreakdown?.startsWith('labels.')) {
+    valueOfSelected = LABEL_FIELDS_BREAKDOWN;
+  }
+
   return (
     <EuiSuperSelect
       options={options}

x-pack/plugins/observability/public/components/shared/exploratory_view/series_editor/breakdown/label_breakdown.tsx

@@ -0,0 +1,68 @@
+/*
+ * 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 { EuiComboBox, EuiFlexItem } from '@elastic/eui';
+import React from 'react';
+import { i18n } from '@kbn/i18n';
+import { SeriesConfig, SeriesUrl } from '../../types';
+import { useAppIndexPatternContext } from '../../hooks/use_app_index_pattern';
+import { useSeriesStorage } from '../../hooks/use_series_storage';
+import { LABEL_FIELDS_BREAKDOWN } from '../../configurations/constants';
+
+interface Props {
+  seriesId: number;
+  series: SeriesUrl;
+  seriesConfig?: SeriesConfig;
+}
+export function LabelsBreakdown({ series, seriesId }: Props) {
+  const { indexPattern } = useAppIndexPatternContext(series.dataType);
+
+  const labelFields = indexPattern?.fields.filter((field) => field.name.startsWith('labels.'));
+
+  const { setSeries } = useSeriesStorage();
+
+  const { breakdown } = series;
+
+  const hasLabelBreakdown =
+    breakdown === LABEL_FIELDS_BREAKDOWN || breakdown?.startsWith('labels.');
+
+  if (!hasLabelBreakdown) {
+    return null;
+  }
+
+  const labelFieldOptions = labelFields?.map((field) => {
+    return {
+      label: field.name,
+      value: field.name,
+    };
+  });
+
+  return (
+    <EuiFlexItem grow={false} style={{ minWidth: 200 }}>
+      <EuiComboBox
+        selectedOptions={labelFieldOptions?.filter((labelField) => labelField.label === breakdown)}
+        options={labelFieldOptions}
+        placeholder={CHOOSE_BREAKDOWN_FIELD}
+        onChange={(value) => {
+          setSeries(seriesId, {
+            ...series,
+            breakdown: value?.[0]?.label ?? LABEL_FIELDS_BREAKDOWN,
+          });
+        }}
+        singleSelection={{ asPlainText: true }}
+        isInvalid={series.breakdown === LABEL_FIELDS_BREAKDOWN}
+      />
+    </EuiFlexItem>
+  );
+}
+
+export const CHOOSE_BREAKDOWN_FIELD = i18n.translate(
+  'xpack.observability.expView.seriesBuilder.labelField',
+  {
+    defaultMessage: 'Choose label field',
+  }
+);

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

@@ -26,7 +26,7 @@ describe('FilterExpanded', function () {
         series={mockSeries}
         label={'Browser Family'}
         field={USER_AGENT_NAME}
-        filters={[]}
+        baseFilters={[]}
       />,
       { initSeries }
     );
@@ -45,7 +45,7 @@ describe('FilterExpanded', function () {
         series={mockSeries}
         label={'Browser Family'}
         field={USER_AGENT_NAME}
-        filters={[]}
+        baseFilters={[]}
       />,
       { initSeries }
     );
@@ -69,7 +69,7 @@ describe('FilterExpanded', function () {
         series={mockSeries}
         label={'Browser Family'}
         field={USER_AGENT_NAME}
-        filters={[]}
+        baseFilters={[]}
       />,
       { initSeries }
     );
@@ -99,7 +99,7 @@ describe('FilterExpanded', function () {
         series={mockUxSeries}
         label={'Browser Family'}
         field={USER_AGENT_NAME}
-        filters={[]}
+        baseFilters={[]}
       />,
       { initSeries }
     );