[Discover] Breakdown support for fieldstats

packages/kbn-data-view-utils/index.ts

@@ -9,5 +9,6 @@
 
 export * from './src/constants';
 export { convertDatatableColumnToDataViewFieldSpec } from './src/utils/convert_to_data_view_field_spec';
+export { convertDataViewFieldToDatatableColumn } from './src/utils/convert_to_data_table_column';
 export { createRegExpPatternFrom } from './src/utils/create_regexp_pattern_from';
 export { testPatternAgainstAllowedList } from './src/utils/test_pattern_against_allowed_list';

packages/kbn-data-view-utils/src/utils/convert_to_data_table_column.test.ts

@@ -0,0 +1,61 @@
+/*
+ * 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", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import type { FieldSpec } from '@kbn/data-views-plugin/common';
+import { convertDataViewFieldToDatatableColumn } from './convert_to_data_table_column';
+
+describe('convertDataViewFieldToDatatableColumn', () => {
+  it('should return a correct DatatableColumn object for a counter timeseries field', () => {
+    const field: FieldSpec = {
+      name: 'bytes_counter',
+      timeSeriesMetric: 'counter',
+      type: 'number',
+      esTypes: ['long'],
+      searchable: true,
+      aggregatable: false,
+      isNull: false,
+    };
+    const result = convertDataViewFieldToDatatableColumn(field);
+    expect(result).toEqual(
+      expect.objectContaining({
+        id: 'bytes_counter',
+        name: 'bytes_counter',
+        meta: {
+          type: 'number',
+          esType: 'counter_long',
+        },
+        isNull: false,
+      })
+    );
+  });
+
+  it('should return a correct DatatableColumn object for a non-counter timeseries field', () => {
+    const field: FieldSpec = {
+      name: 'bytes',
+      timeSeriesMetric: 'summary',
+      type: 'number',
+      esTypes: ['long'],
+      searchable: true,
+      aggregatable: false,
+      isNull: false,
+    };
+    const result = convertDataViewFieldToDatatableColumn(field);
+    expect(result).toEqual(
+      expect.objectContaining({
+        id: 'bytes',
+        name: 'bytes',
+        meta: {
+          type: 'number',
+          esType: 'long',
+        },
+        isNull: false,
+      })
+    );
+  });
+});

packages/kbn-data-view-utils/src/utils/convert_to_data_table_column.ts

@@ -0,0 +1,30 @@
+/*
+ * 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", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import type { DatatableColumn } from '@kbn/expressions-plugin/common';
+import type { FieldSpec } from '@kbn/data-views-plugin/common';
+
+/**
+ * Convert a DataViewField to a DatatableColumn
+ */
+export function convertDataViewFieldToDatatableColumn(field: FieldSpec): DatatableColumn {
+  const isCounterTimeSeries = field.timeSeriesMetric === 'counter';
+  const esType =
+    isCounterTimeSeries && field.esTypes?.[0] ? `counter_${field.esTypes[0]}` : field.esTypes?.[0];
+
+  return {
+    id: field.name,
+    name: field.name,
+    meta: {
+      type: field.type,
+      esType,
+    },
+    isNull: Boolean(field?.isNull),
+  } as DatatableColumn;
+}

packages/kbn-field-utils/index.ts

@@ -25,6 +25,7 @@ export {
   comboBoxFieldOptionMatcher,
   getFieldSearchMatchingHighlight,
 } from './src/utils/field_name_wildcard_matcher';
+export { fieldSupportsBreakdown } from './src/utils/field_supports_breakdown';
 
 export { FieldIcon, type FieldIconProps, getFieldIconProps } from './src/components/field_icon';
 export { FieldDescription, type FieldDescriptionProps } from './src/components/field_description';

src/plugins/unified_histogram/public/utils/field_supports_breakdown.ts → packages/kbn-field-utils/src/utils/field_supports_breakdown.ts

@@ -7,12 +7,18 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import { DataViewField } from '@kbn/data-views-plugin/public';
+import { type DataViewField } from '@kbn/data-views-plugin/common';
+import { KNOWN_FIELD_TYPES } from './field_types';
 
-const supportedTypes = new Set(['string', 'boolean', 'number', 'ip']);
+const supportedTypes = new Set([
+  KNOWN_FIELD_TYPES.STRING,
+  KNOWN_FIELD_TYPES.BOOLEAN,
+  KNOWN_FIELD_TYPES.NUMBER,
+  KNOWN_FIELD_TYPES.IP,
+]);
 
 export const fieldSupportsBreakdown = (field: DataViewField) =>
-  supportedTypes.has(field.type) &&
+  supportedTypes.has(field.type as KNOWN_FIELD_TYPES) &&
   field.aggregatable &&
   !field.scripted &&
   field.timeSeriesMetric !== 'counter';

packages/kbn-unified-field-list/src/components/field_popover/field_popover_header.tsx

@@ -27,10 +27,12 @@ import type { AddFieldFilterHandler } from '../../types';
 export interface FieldPopoverHeaderProps {
   field: DataViewField;
   closePopover: EuiPopoverProps['closePopover'];
+  buttonAddBreakdownFieldProps?: Partial<EuiButtonIconProps>;
   buttonAddFieldToWorkspaceProps?: Partial<EuiButtonIconProps>;
   buttonAddFilterProps?: Partial<EuiButtonIconProps>;
   buttonEditFieldProps?: Partial<EuiButtonIconProps>;
   buttonDeleteFieldProps?: Partial<EuiButtonIconProps>;
+  onAddBreakdownField?: (field: DataViewField | undefined) => void;
   onAddFieldToWorkspace?: (field: DataViewField) => unknown;
   onAddFilter?: AddFieldFilterHandler;
   onEditField?: (fieldName: string) => unknown;
@@ -43,10 +45,12 @@ export interface FieldPopoverHeaderProps {
 export const FieldPopoverHeader: React.FC<FieldPopoverHeaderProps> = ({
   field,
   closePopover,
+  buttonAddBreakdownFieldProps,
   buttonAddFieldToWorkspaceProps,
   buttonAddFilterProps,
   buttonEditFieldProps,
   buttonDeleteFieldProps,
+  onAddBreakdownField,
   onAddFieldToWorkspace,
   onAddFilter,
   onEditField,
@@ -82,6 +86,13 @@ export const FieldPopoverHeader: React.FC<FieldPopoverHeaderProps> = ({
     defaultMessage: 'Delete data view field',
   });
 
+  const addBreakdownFieldTooltip = i18n.translate(
+    'unifiedFieldList.fieldPopover.addBreakdownFieldLabel',
+    {
+      defaultMessage: 'Add breakdown',
+    }
+  );
+
   return (
     <>
       <EuiFlexGroup alignItems="center" gutterSize="s" responsive={false}>
@@ -90,6 +101,24 @@ export const FieldPopoverHeader: React.FC<FieldPopoverHeaderProps> = ({
             <h5 className="eui-textBreakWord">{field.displayName}</h5>
           </EuiTitle>
         </EuiFlexItem>
+        {onAddBreakdownField && (
+          <EuiFlexItem grow={false} data-test-subj="fieldPopoverHeader_addBreakdownField">
+            <EuiToolTip
+              content={buttonAddBreakdownFieldProps?.['aria-label'] ?? addBreakdownFieldTooltip}
+            >
+              <EuiButtonIcon
+                data-test-subj={`fieldPopoverHeader_addBreakdownField-${field.name}`}
+                aria-label={addBreakdownFieldTooltip}
+                {...(buttonAddBreakdownFieldProps || {})}
+                iconType="visBarVertical"
+                onClick={() => {
+                  closePopover();
+                  onAddBreakdownField(field);
+                }}
+              />
+            </EuiToolTip>
+          </EuiFlexItem>
+        )}
         {onAddFieldToWorkspace && (
           <EuiFlexItem grow={false} data-test-subj="fieldPopoverHeader_addField">
             <EuiToolTip

packages/kbn-unified-field-list/src/containers/unified_field_list_item/field_list_item.tsx

@@ -15,6 +15,9 @@ import type { FieldsMetadataPublicStart } from '@kbn/fields-metadata-plugin/publ
 import { Draggable } from '@kbn/dom-drag-drop';
 import type { DataView, DataViewField } from '@kbn/data-views-plugin/public';
 import { Filter } from '@kbn/es-query';
+import { fieldSupportsBreakdown } from '@kbn/field-utils';
+import { isESQLColumnGroupable } from '@kbn/esql-utils';
+import { convertDataViewFieldToDatatableColumn } from '@kbn/data-view-utils';
 import type { SearchMode } from '../../types';
 import { FieldItemButton, type FieldItemButtonProps } from '../../components/field_item_button';
 import {
@@ -140,6 +143,10 @@ export interface UnifiedFieldListItemProps {
    * The currently selected data view
    */
   dataView: DataView;
+  /**
+   * Callback to update breakdown field
+   */
+  onAddBreakdownField?: (breakdownField: DataViewField | undefined) => void;
   /**
    * Callback to add/select the field
    */
@@ -215,6 +222,7 @@ function UnifiedFieldListItemComponent({
   field,
   highlight,
   dataView,
+  onAddBreakdownField,
   onAddFieldToWorkspace,
   onRemoveFieldFromWorkspace,
   onAddFilter,
@@ -232,6 +240,11 @@ function UnifiedFieldListItemComponent({
 }: UnifiedFieldListItemProps) {
   const [infoIsOpen, setOpen] = useState(false);
 
+  const isBreakdownSupported =
+    searchMode === 'documents'
+      ? fieldSupportsBreakdown(field)
+      : isESQLColumnGroupable(convertDataViewFieldToDatatableColumn(field.spec));
+
   const addFilterAndClosePopover: typeof onAddFilter | undefined = useMemo(
     () =>
       onAddFilter
@@ -394,13 +407,14 @@ function UnifiedFieldListItemComponent({
       data-test-subj={stateService.creationOptions.dataTestSubj?.fieldListItemPopoverDataTestSubj}
       renderHeader={() => (
         <FieldPopoverHeader
-          services={services}
-          field={field}
           closePopover={closePopover}
+          field={field}
+          onAddBreakdownField={isBreakdownSupported ? onAddBreakdownField : undefined}
           onAddFieldToWorkspace={!isSelected ? toggleDisplay : undefined}
           onAddFilter={onAddFilter}
-          onEditField={onEditField}
           onDeleteField={onDeleteField}
+          onEditField={onEditField}
+          services={services}
           {...customPopoverHeaderProps}
         />
       )}

packages/kbn-unified-field-list/src/containers/unified_field_list_sidebar/field_list_sidebar.tsx

@@ -48,6 +48,7 @@ export type UnifiedFieldListSidebarCustomizableProps = Pick<
   | 'dataView'
   | 'trackUiMetric'
   | 'onAddFilter'
+  | 'onAddBreakdownField'
   | 'onAddFieldToWorkspace'
   | 'onRemoveFieldFromWorkspace'
   | 'additionalFilters'
@@ -161,6 +162,7 @@ export const UnifiedFieldListSidebarComponent: React.FC<UnifiedFieldListSidebarP
   fullWidth,
   isAffectedByGlobalFilter,
   prepend,
+  onAddBreakdownField,
   onAddFieldToWorkspace,
   onRemoveFieldFromWorkspace,
   onAddFilter,
@@ -264,30 +266,31 @@ export const UnifiedFieldListSidebarComponent: React.FC<UnifiedFieldListSidebarP
     ({ field, groupName, groupIndex, itemIndex, fieldSearchHighlight }) => (
       <li key={`field${field.name}`} data-attr-field={field.name}>
         <UnifiedFieldListItem
-          stateService={stateService}
-          searchMode={searchMode}
-          services={services}
+          additionalFilters={additionalFilters}
           alwaysShowActionButton={alwaysShowActionButton}
-          field={field}
-          size={compressed ? 'xs' : 's'}
-          highlight={fieldSearchHighlight}
           dataView={dataView!}
-          onAddFieldToWorkspace={onAddFieldToWorkspace}
-          onRemoveFieldFromWorkspace={onRemoveFieldFromWorkspace}
-          onAddFilter={onAddFilter}
-          trackUiMetric={trackUiMetric}
-          multiFields={multiFieldsMap?.get(field.name)} // ideally we better calculate multifields when they are requested first from the popover
-          onEditField={onEditField}
-          onDeleteField={onDeleteField}
-          workspaceSelectedFieldNames={workspaceSelectedFieldNames}
+          field={field}
           groupIndex={groupIndex}
-          itemIndex={itemIndex}
+          highlight={fieldSearchHighlight}
           isEmpty={groupName === FieldsGroupNames.EmptyFields}
           isSelected={
             groupName === FieldsGroupNames.SelectedFields ||
             Boolean(selectedFieldsState.selectedFieldsMap[field.name])
           }
-          additionalFilters={additionalFilters}
+          itemIndex={itemIndex}
+          multiFields={multiFieldsMap?.get(field.name)} // ideally we better calculate multifields when they are requested first from the popover
+          onAddBreakdownField={onAddBreakdownField}
+          onAddFieldToWorkspace={onAddFieldToWorkspace}
+          onAddFilter={onAddFilter}
+          onDeleteField={onDeleteField}
+          onEditField={onEditField}
+          onRemoveFieldFromWorkspace={onRemoveFieldFromWorkspace}
+          searchMode={searchMode}
+          services={services}
+          size={compressed ? 'xs' : 's'}
+          stateService={stateService}
+          trackUiMetric={trackUiMetric}
+          workspaceSelectedFieldNames={workspaceSelectedFieldNames}
         />
       </li>
     ),
@@ -298,6 +301,7 @@ export const UnifiedFieldListSidebarComponent: React.FC<UnifiedFieldListSidebarP
       alwaysShowActionButton,
       compressed,
       dataView,
+      onAddBreakdownField,
       onAddFieldToWorkspace,
       onRemoveFieldFromWorkspace,
       onAddFilter,

src/plugins/discover/public/application/main/components/layout/discover_layout.tsx

@@ -20,12 +20,12 @@ import {
 import { css } from '@emotion/react';
 import { i18n } from '@kbn/i18n';
 import { isOfAggregateQueryType } from '@kbn/es-query';
-import { appendWhereClauseToESQLQuery } from '@kbn/esql-utils';
+import { appendWhereClauseToESQLQuery, hasTransformationalCommand } from '@kbn/esql-utils';
 import { METRIC_TYPE } from '@kbn/analytics';
 import classNames from 'classnames';
 import { generateFilters } from '@kbn/data-plugin/public';
 import { useDragDropContext } from '@kbn/dom-drag-drop';
-import { DataViewType } from '@kbn/data-views-plugin/public';
+import { type DataViewField, DataViewType } from '@kbn/data-views-plugin/public';
 import {
   SEARCH_FIELDS_FROM_SOURCE,
   SHOW_FIELD_STATISTICS,
@@ -256,6 +256,18 @@ export function DiscoverLayout({ stateContainer }: DiscoverLayoutProps) {
 
   const onFilter = isEsqlMode ? onPopulateWhereClause : onAddFilter;
 
+  const canSetBreakdownField = useMemo(
+    () => (isOfAggregateQueryType(query) ? !hasTransformationalCommand(query.esql) : true),
+    [query]
+  );
+
+  const onSetBreakdownField = useCallback(
+    (field: DataViewField | undefined) => {
+      stateContainer.appState.update({ breakdownField: field?.name });
+    },
+    [stateContainer]
+  );
+
   const onFieldEdited = useCallback(
     async ({ removedFieldName }: { removedFieldName?: string } = {}) => {
       if (removedFieldName && currentColumns.includes(removedFieldName)) {
@@ -423,18 +435,19 @@ export function DiscoverLayout({ stateContainer }: DiscoverLayoutProps) {
             sidebarToggleState$={sidebarToggleState$}
             sidebarPanel={
               <SidebarMemoized
+                additionalFilters={customFilters}
+                columns={currentColumns}
                 documents$={stateContainer.dataState.data$.documents$}
+                onAddBreakdownField={canSetBreakdownField ? onSetBreakdownField : undefined}
                 onAddField={onAddColumnWithTracking}
-                onRemoveField={onRemoveColumnWithTracking}
-                columns={currentColumns}
                 onAddFilter={onFilter}
                 onChangeDataView={stateContainer.actions.onChangeDataView}
-                selectedDataView={dataView}
-                trackUiMetric={trackUiMetric}
-                onFieldEdited={onFieldEdited}
                 onDataViewCreated={stateContainer.actions.onDataViewCreated}
+                onFieldEdited={onFieldEdited}
+                onRemoveField={onRemoveColumnWithTracking}
+                selectedDataView={dataView}
                 sidebarToggleState$={sidebarToggleState$}
-                additionalFilters={customFilters}
+                trackUiMetric={trackUiMetric}
               />
             }
             mainPanel={