[Custom threshold] Add log rate analysis to the alert details page fo…

…r one document count aggregation (elastic#174031)

Closes elastic#171163

## Summary

This PR adds log rate analysis to the alert details page for one
document count aggregation if the user has a license above platinum.
This is a similar implementation in the log threshold alert details
page.


![image](https://github.com/elastic/kibana/assets/12370520/29cd29bf-ead5-4574-8121-739d3ed11fe7)

## 🧪 How to test?
- Create a Custom threshold rule with only one document count
aggregation
- Optional filter, document count aggregation filter, and group by
information will be applied to the query of this component.
- Go to the alert details page, you should see the log rate analysis on
this page

---------

Co-authored-by: kibanamachine <[email protected]>

x-pack/plugins/observability/common/custom_threshold_rule/types.ts

@@ -107,6 +107,11 @@ export enum InfraFormatterType {
   percent = 'percent',
 }
 
+// Custom threshold alert types
+
+// Alert fields['kibana.alert.group] type
+export type GroupBy = Array<{ field: string; value: string }>;
+
 /*
  * Utils
  *

x-pack/plugins/observability/common/utils/get_interval_in_seconds.test.ts

@@ -0,0 +1,28 @@
+/*
+ * 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 { getIntervalInSeconds } from './get_interval_in_seconds';
+
+describe('getIntervalInSeconds', () => {
+  const testData = [
+    { interval: '5ms', result: 0.005 },
+    { interval: '70s', result: 70 },
+    { interval: '25m', result: 1500 },
+    { interval: '10h', result: 36000 },
+    { interval: '3d', result: 259200 },
+    { interval: '1w', result: 604800 },
+    { interval: '1y', result: 30758400 },
+  ];
+
+  it.each(testData)('getIntervalInSeconds($interval) = $result', ({ interval, result }) => {
+    expect(getIntervalInSeconds(interval)).toBe(result);
+  });
+
+  it('Throws error if interval is not valid', () => {
+    expect(() => getIntervalInSeconds('invalid')).toThrow('Invalid interval string format.');
+  });
+});

x-pack/plugins/observability/common/utils/get_interval_in_seconds.ts

@@ -0,0 +1,32 @@
+/*
+ * 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.
+ */
+
+const intervalUnits = ['y', 'M', 'w', 'd', 'h', 'm', 's', 'ms'];
+const INTERVAL_STRING_RE = new RegExp('^([0-9\\.]*)\\s*(' + intervalUnits.join('|') + ')$');
+
+interface UnitsToSeconds {
+  [unit: string]: number;
+}
+
+const units: UnitsToSeconds = {
+  ms: 0.001,
+  s: 1,
+  m: 60,
+  h: 3600,
+  d: 86400,
+  w: 86400 * 7,
+  M: 86400 * 30,
+  y: 86400 * 356,
+};
+
+export const getIntervalInSeconds = (interval: string): number => {
+  const matches = interval.match(INTERVAL_STRING_RE);
+  if (matches) {
+    return parseFloat(matches[1]) * units[matches[2]];
+  }
+  throw new Error('Invalid interval string format.');
+};

x-pack/plugins/observability/kibana.jsonc

@@ -20,6 +20,7 @@
       "dataViews",
       "dataViewEditor",
       "embeddable",
+      "fieldFormats",
       "uiActions",
       "presentationUtil",
       "exploratoryView",

x-pack/plugins/observability/public/components/alert_search_bar/alert_search_bar.tsx

@@ -47,15 +47,15 @@ export function ObservabilityAlertSearchBar({
     (alertStatus: AlertStatus) => {
       try {
         onEsQueryChange(
-          buildEsQuery(
-            {
+          buildEsQuery({
+            timeRange: {
               to: rangeTo,
               from: rangeFrom,
             },
             kuery,
-            [...getAlertStatusQuery(alertStatus), ...defaultSearchQueries],
-            getEsQueryConfig(uiSettings)
-          )
+            queries: [...getAlertStatusQuery(alertStatus), ...defaultSearchQueries],
+            config: getEsQueryConfig(uiSettings),
+          })
         );
       } catch (error) {
         toasts.addError(error, {
@@ -89,15 +89,15 @@ export function ObservabilityAlertSearchBar({
     ({ dateRange, query }) => {
       try {
         // First try to create es query to make sure query is valid, then save it in state
-        const esQuery = buildEsQuery(
-          {
+        const esQuery = buildEsQuery({
+          timeRange: {
             to: dateRange.to,
             from: dateRange.from,
           },
-          query,
-          [...getAlertStatusQuery(status), ...defaultSearchQueries],
-          getEsQueryConfig(uiSettings)
-        );
+          kuery: query,
+          queries: [...getAlertStatusQuery(status), ...defaultSearchQueries],
+          config: getEsQueryConfig(uiSettings),
+        });
         if (query) onKueryChange(query);
         timeFilterService.setTime(dateRange);
         onRangeFromChange(dateRange.from);

x-pack/plugins/observability/public/components/custom_threshold/components/alert_details_app_section.test.tsx → x-pack/plugins/observability/public/components/custom_threshold/components/alert_details_app_section/alert_details_app_section.test.tsx

@@ -15,9 +15,9 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import {
   buildCustomThresholdAlert,
   buildCustomThresholdRule,
-} from '../mocks/custom_threshold_rule';
+} from '../../mocks/custom_threshold_rule';
 import AlertDetailsAppSection from './alert_details_app_section';
-import { ExpressionChart } from './expression_chart';
+import { ExpressionChart } from '../expression_chart';
 
 const mockedChartStartContract = chartPluginMock.createStartContract();
 
@@ -33,11 +33,11 @@ jest.mock('@kbn/observability-get-padded-alert-time-range-util', () => ({
   }),
 }));
 
-jest.mock('./expression_chart', () => ({
+jest.mock('../expression_chart', () => ({
   ExpressionChart: jest.fn(() => <div data-test-subj="ExpressionChart" />),
 }));
 
-jest.mock('../../../utils/kibana_react', () => ({
+jest.mock('../../../../utils/kibana_react', () => ({
   useKibana: () => ({
     services: {
       ...mockCoreMock.createStart(),

x-pack/plugins/observability/public/components/custom_threshold/components/alert_details_app_section.tsx → x-pack/plugins/observability/public/components/custom_threshold/components/alert_details_app_section/alert_details_app_section.tsx

@@ -25,15 +25,16 @@ import { Rule, RuleTypeParams } from '@kbn/alerting-plugin/common';
 import { AlertAnnotation, AlertActiveTimeRangeAnnotation } from '@kbn/observability-alert-details';
 import { getPaddedAlertTimeRange } from '@kbn/observability-get-padded-alert-time-range-util';
 import { DataView } from '@kbn/data-views-plugin/common';
-import { MetricsExplorerChartType } from '../../../../common/custom_threshold_rule/types';
-import { useKibana } from '../../../utils/kibana_react';
-import { metricValueFormatter } from '../../../../common/custom_threshold_rule/metric_value_formatter';
-import { AlertSummaryField, TopAlert } from '../../..';
-
-import { ExpressionChart } from './expression_chart';
-import { TIME_LABELS } from './criterion_preview_chart/criterion_preview_chart';
-import { Threshold } from './custom_threshold';
-import { AlertParams, CustomThresholdRuleTypeParams } from '../types';
+import { MetricsExplorerChartType } from '../../../../../common/custom_threshold_rule/types';
+import { useLicense } from '../../../../hooks/use_license';
+import { useKibana } from '../../../../utils/kibana_react';
+import { metricValueFormatter } from '../../../../../common/custom_threshold_rule/metric_value_formatter';
+import { AlertSummaryField, TopAlert } from '../../../..';
+import { AlertParams, CustomThresholdRuleTypeParams } from '../../types';
+import { ExpressionChart } from '../expression_chart';
+import { TIME_LABELS } from '../criterion_preview_chart/criterion_preview_chart';
+import { Threshold } from '../custom_threshold';
+import { LogRateAnalysis } from './log_rate_analysis';
 
 // TODO Use a generic props for app sections https://github.com/elastic/kibana/issues/152690
 export type CustomThresholdRule = Rule<CustomThresholdRuleTypeParams>;
@@ -57,8 +58,11 @@ export default function AlertDetailsAppSection({
   ruleLink,
   setAlertSummaryFields,
 }: AppSectionProps) {
-  const { uiSettings, charts, data } = useKibana().services;
+  const services = useKibana().services;
+  const { uiSettings, charts, data } = services;
   const { euiTheme } = useEuiTheme();
+  const { hasAtLeast } = useLicense();
+  const hasLogRateAnalysisLicense = hasAtLeast('platinum');
   const [dataView, setDataView] = useState<DataView>();
   const [, setDataViewError] = useState<Error>();
   const ruleParams = rule.params as RuleTypeParams & AlertParams;
@@ -83,6 +87,7 @@ export default function AlertDetailsAppSection({
       key={ALERT_TIME_RANGE_ANNOTATION_ID}
     />,
   ];
+
   useEffect(() => {
     setAlertSummaryFields([
       {
@@ -181,6 +186,9 @@ export default function AlertDetailsAppSection({
           </EuiPanel>
         </EuiFlexItem>
       ))}
+      {hasLogRateAnalysisLicense && (
+        <LogRateAnalysis alert={alert} dataView={dataView} rule={rule} services={services} />
+      )}
     </EuiFlexGroup>
   ) : null;