[Logs UI] [Alerting] "Group by" functionality

x-pack/plugins/infra/common/alerting/logs/types.ts

@@ -90,6 +90,17 @@ export interface LogDocumentCountAlertParams {
   criteria: Criterion[];
   timeUnit: 's' | 'm' | 'h' | 'd';
   timeSize: number;
+  groupBy?: string[];
 }
 
 export type TimeUnit = 's' | 'm' | 'h' | 'd';
+
+export interface Aggregations {
+  [key: string]: Record<string, object[]>;
+  interval_buckets: {
+    buckets: Array<{
+      key: Record<string, string>;
+      doc_count: number;
+    }>;
+  };
+}

x-pack/plugins/infra/public/components/alerting/logs/expression_editor/editor.tsx

@@ -22,6 +22,7 @@ import { DocumentCount } from './document_count';
 import { Criteria } from './criteria';
 import { useSourceId } from '../../../../containers/source_id';
 import { LogSourceProvider, useLogSourceContext } from '../../../../containers/logs/log_source';
+import { GroupByExpression } from '../../shared/group_by_expression/group_by_expression';
 
 export interface ExpressionCriteria {
   field?: string;
@@ -172,6 +173,13 @@ export const Editor: React.FC<Props> = (props) => {
     [setAlertParams]
   );
 
+  const updateGroupBy = useCallback(
+    (groups: string[]) => {
+      setAlertParams('groupBy', groups);
+    },
+    [setAlertParams]
+  );
+
   const addCriterion = useCallback(() => {
     const nextCriteria = alertParams?.criteria
       ? [...alertParams.criteria, DEFAULT_CRITERIA]
@@ -219,6 +227,12 @@ export const Editor: React.FC<Props> = (props) => {
         errors={errors as { [key: string]: string[] }}
       />
 
+      <GroupByExpression
+        selectedGroups={alertParams.groupBy}
+        onChange={updateGroupBy}
+        fields={supportedFields}
+      />
+
       <div>
         <EuiButtonEmpty
           color={'primary'}

x-pack/plugins/infra/public/components/alerting/logs/log_threshold_alert_type.ts

@@ -22,7 +22,7 @@ export function getAlertType(): AlertTypeModel {
     defaultActionMessage: i18n.translate(
       'xpack.infra.logs.alerting.threshold.defaultActionMessage',
       {
-        defaultMessage: `\\{\\{context.matchingDocuments\\}\\} log entries have matched the following conditions: \\{\\{context.conditions\\}\\}`,
+        defaultMessage: `\\{\\{context.group\\}\\} - \\{\\{context.matchingDocuments\\}\\} log entries have matched the following conditions: \\{\\{context.conditions\\}\\}`,
       }
     ),
     requiresAppContext: false,

x-pack/plugins/infra/public/components/alerting/shared/group_by_expression/group_by_expression.tsx

@@ -0,0 +1,87 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React, { useState, useMemo } from 'react';
+import { IFieldType } from 'src/plugins/data/public';
+import { i18n } from '@kbn/i18n';
+import {
+  EuiPopoverTitle,
+  EuiFlexItem,
+  EuiFlexGroup,
+  EuiPopover,
+  EuiExpression,
+} from '@elastic/eui';
+import { GroupBySelector } from './selector';
+
+interface Props {
+  selectedGroups?: string[];
+  fields: IFieldType[];
+  onChange: (groupBy: string[]) => void;
+  label?: string;
+}
+
+const DEFAULT_GROUP_BY_LABEL = i18n.translate('xpack.infra.alerting.alertFlyout.groupByLabel', {
+  defaultMessage: 'Group By',
+});
+
+const EVERYTHING_PLACEHOLDER = i18n.translate(
+  'xpack.infra.alerting.alertFlyout.groupBy.placeholder',
+  {
+    defaultMessage: 'Everything (ungrouped)',
+  }
+);
+
+export const GroupByExpression: React.FC<Props> = ({
+  selectedGroups = [],
+  fields,
+  label,
+  onChange,
+}) => {
+  const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+
+  const expressionValue = useMemo(() => {
+    return selectedGroups.length > 0 ? selectedGroups.join(', ') : EVERYTHING_PLACEHOLDER;
+  }, [selectedGroups]);
+
+  const labelProp = useMemo(() => {
+    return label || DEFAULT_GROUP_BY_LABEL;
+  }, [label]);
+
+  return (
+    <EuiFlexGroup gutterSize="s">
+      <EuiFlexItem grow={false}>
+        <EuiPopover
+          id="groupByExpression"
+          button={
+            <EuiExpression
+              description={labelProp}
+              uppercase={true}
+              value={expressionValue}
+              isActive={isPopoverOpen}
+              onClick={() => setIsPopoverOpen(true)}
+            />
+          }
+          isOpen={isPopoverOpen}
+          closePopover={() => setIsPopoverOpen(false)}
+          ownFocus
+          panelPaddingSize="s"
+          anchorPosition="downLeft"
+        >
+          <div style={{ zIndex: 11000 }}>
+            <EuiPopoverTitle>{labelProp}</EuiPopoverTitle>
+            <GroupBySelector
+              selectedGroups={selectedGroups}
+              onChange={onChange}
+              fields={fields}
+              label={labelProp}
+              placeholder={EVERYTHING_PLACEHOLDER}
+            />
+          </div>
+        </EuiPopover>
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  );
+};

x-pack/plugins/infra/public/components/alerting/shared/group_by_expression/selector.tsx

@@ -0,0 +1,58 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { EuiComboBox } from '@elastic/eui';
+import React, { useCallback, useMemo } from 'react';
+import { IFieldType } from 'src/plugins/data/public';
+
+interface Props {
+  selectedGroups?: string[];
+  onChange: (groupBy: string[]) => void;
+  fields: IFieldType[];
+  label: string;
+  placeholder: string;
+}
+
+export const GroupBySelector = ({
+  onChange,
+  fields,
+  selectedGroups = [],
+  label,
+  placeholder,
+}: Props) => {
+  const handleChange = useCallback(
+    (selectedOptions: Array<{ label: string }>) => {
+      const groupBy = selectedOptions.map((option) => option.label);
+      onChange(groupBy);
+    },
+    [onChange]
+  );
+
+  const formattedSelectedGroups = useMemo(() => {
+    return selectedGroups.map((group) => ({ label: group }));
+  }, [selectedGroups]);
+
+  const options = useMemo(() => {
+    return fields
+      .filter((field) => field.aggregatable && field.type === 'string')
+      .map((field) => ({ label: field.name }));
+  }, [fields]);
+
+  return (
+    <div style={{ minWidth: '300px' }}>
+      <EuiComboBox
+        placeholder={placeholder}
+        aria-label={label}
+        fullWidth
+        singleSelection={false}
+        selectedOptions={formattedSelectedGroups}
+        options={options}
+        onChange={handleChange}
+        isClearable={true}
+      />
+    </div>
+  );
+};