[AO] Allow providing custom time range for Alert Summary Widget

x-pack/plugins/observability/public/pages/rule_details/helpers/get_alert_summary_time_range.test.tsx

@@ -0,0 +1,19 @@
+/*
+ * 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 moment from 'moment';
+import { getDefaultAlertSummaryTimeRange } from '.';
+
+describe('getDefaultAlertSummaryTimeRange', () => {
+  it('should return default time in UTC format', () => {
+    const defaultTimeRange = getDefaultAlertSummaryTimeRange();
+    const utcFormat = 'YYYY-MM-DDTHH:mm:ss.SSSZ';
+
+    expect(moment(defaultTimeRange.utcFrom, utcFormat, true).isValid()).toBeTruthy();
+    expect(moment(defaultTimeRange.utcTo, utcFormat, true).isValid()).toBeTruthy();
+  });
+});

x-pack/plugins/observability/public/pages/rule_details/helpers/get_alert_summary_time_range.tsx

@@ -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 React from 'react';
+import { getAbsoluteTimeRange } from '@kbn/data-plugin/common';
+import { FormattedMessage } from '@kbn/i18n-react';
+
+export const getDefaultAlertSummaryTimeRange = () => {
+  const { to, from } = getAbsoluteTimeRange({
+    from: 'now-30d',
+    to: 'now',
+  });
+
+  return {
+    utcFrom: from,
+    utcTo: to,
+    title: (
+      <FormattedMessage
+        id="xpack.observability.alertsSummaryWidget.last30days"
+        defaultMessage="Last 30 days"
+      />
+    ),
+  };
+};

x-pack/plugins/observability/public/pages/rule_details/helpers/index.ts

@@ -0,0 +1,8 @@
+/*
+ * 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.
+ */
+
+export { getDefaultAlertSummaryTimeRange } from './get_alert_summary_time_range';

x-pack/plugins/observability/public/pages/rule_details/index.tsx

@@ -41,6 +41,8 @@ import { fromQuery, toQuery } from '../../utils/url';
 import { ObservabilityAlertSearchbarWithUrlSync } from '../../components/shared/alert_search_bar';
 import { DeleteModalConfirmation } from './components/delete_modal_confirmation';
 import { CenterJustifiedSpinner } from './components/center_justified_spinner';
+import { getDefaultAlertSummaryTimeRange } from './helpers';
+
 import {
   EXECUTION_TAB,
   ALERTS_TAB,
@@ -108,6 +110,7 @@ export function RuleDetailsPage() {
   const [editFlyoutVisible, setEditFlyoutVisible] = useState<boolean>(false);
   const [isRuleEditPopoverOpen, setIsRuleEditPopoverOpen] = useState(false);
   const [esQuery, setEsQuery] = useState<{ bool: BoolQuery }>();
+  const [defaultAlertTimeRange] = useState(getDefaultAlertSummaryTimeRange);
   const ruleQuery = useRef([
     { query: `kibana.alert.rule.uuid: ${ruleId}`, language: 'kuery' },
   ] as Query[]);
@@ -379,6 +382,7 @@ export function RuleDetailsPage() {
             rule={rule}
             filteredRuleTypes={filteredRuleTypes}
             onClick={(status) => onAlertSummaryWidgetClick(status)}
+            timeRange={defaultAlertTimeRange}
           />
         </EuiFlexItem>
         <EuiSpacer size="m" />

x-pack/plugins/translations/translations/fr-FR.json

@@ -35426,7 +35426,6 @@
     "xpack.triggersActionsUI.sections.ruleDetails.alertsSummary.allAlertsLabel": "Tous",
     "xpack.triggersActionsUI.sections.ruleDetails.alertsSummary.errorLoadingBody": "Une erreur s'est produite lors du chargement du récapitulatif des alertes. Contactez votre administrateur pour obtenir de l'aide.",
     "xpack.triggersActionsUI.sections.ruleDetails.alertsSummary.errorLoadingTitle": "Impossible de charger le récapitulatif des alertes",
-    "xpack.triggersActionsUI.sections.ruleDetails.alertsSummary.last30days": "30 derniers jours",
     "xpack.triggersActionsUI.sections.ruleDetails.alertsSummary.title": "Alertes",
     "xpack.triggersActionsUI.sections.ruleDetails.deleteRuleButtonLabel": "Supprimer la règle",
     "xpack.triggersActionsUI.sections.ruleDetails.disableRuleButtonLabel": "Désactiver",

x-pack/plugins/translations/translations/ja-JP.json

@@ -35398,7 +35398,6 @@
     "xpack.triggersActionsUI.sections.ruleDetails.alertsSummary.allAlertsLabel": "すべて",
     "xpack.triggersActionsUI.sections.ruleDetails.alertsSummary.errorLoadingBody": "アラート概要の読み込みエラーが発生しました。ヘルプについては、管理者にお問い合わせください。",
     "xpack.triggersActionsUI.sections.ruleDetails.alertsSummary.errorLoadingTitle": "アラート概要を読み込めません",
-    "xpack.triggersActionsUI.sections.ruleDetails.alertsSummary.last30days": "過去30日間",
     "xpack.triggersActionsUI.sections.ruleDetails.alertsSummary.title": "アラート",
     "xpack.triggersActionsUI.sections.ruleDetails.deleteRuleButtonLabel": "ルールの削除",
     "xpack.triggersActionsUI.sections.ruleDetails.disableRuleButtonLabel": "無効にする",

x-pack/plugins/translations/translations/zh-CN.json

@@ -35434,7 +35434,6 @@
     "xpack.triggersActionsUI.sections.ruleDetails.alertsSummary.allAlertsLabel": "全部",
     "xpack.triggersActionsUI.sections.ruleDetails.alertsSummary.errorLoadingBody": "加载告警摘要时出现错误。请联系您的管理员寻求帮助。",
     "xpack.triggersActionsUI.sections.ruleDetails.alertsSummary.errorLoadingTitle": "无法加载告警摘要",
-    "xpack.triggersActionsUI.sections.ruleDetails.alertsSummary.last30days": "过去 30 天",
     "xpack.triggersActionsUI.sections.ruleDetails.alertsSummary.title": "告警",
     "xpack.triggersActionsUI.sections.ruleDetails.deleteRuleButtonLabel": "删除规则",
     "xpack.triggersActionsUI.sections.ruleDetails.disableRuleButtonLabel": "禁用",

x-pack/plugins/triggers_actions_ui/public/application/hooks/use_load_rule_alerts_aggregations.test.ts

@@ -8,7 +8,7 @@
 import { ALERTS_FEATURE_ID } from '@kbn/alerting-plugin/common';
 import { renderHook } from '@testing-library/react-hooks';
 import { useKibana } from '../../common/lib/kibana';
-import { mockAggsResponse } from '../mock/rule_details/alert_summary';
+import { mockAggsResponse, mockAlertSummaryTimeRange } from '../mock/alert_summary_widget';
 import { useLoadRuleAlertsAggs } from './use_load_rule_alerts_aggregations';
 
 jest.mock('../../common/lib/kibana');
@@ -26,6 +26,7 @@ describe('useLoadRuleAlertsAggs', () => {
       useLoadRuleAlertsAggs({
         features: ALERTS_FEATURE_ID,
         ruleId: 'c95bc120-1d56-11ed-9cc7-e7214ada1128',
+        timeRange: mockAlertSummaryTimeRange,
       })
     );
     expect(result.current).toEqual({
@@ -44,15 +45,17 @@ describe('useLoadRuleAlertsAggs', () => {
 
   it('should have the correct query body sent to Elasticsearch', async () => {
     const ruleId = 'c95bc120-1d56-11ed-9cc7-e7214ada1128';
+    const { utcFrom, utcTo } = mockAlertSummaryTimeRange;
     const { waitForNextUpdate } = renderHook(() =>
       useLoadRuleAlertsAggs({
         features: ALERTS_FEATURE_ID,
         ruleId,
+        timeRange: mockAlertSummaryTimeRange,
       })
     );
 
     await waitForNextUpdate();
-    const body = `{"index":"mock_index","size":0,"query":{"bool":{"must":[{"term":{"kibana.alert.rule.uuid":"${ruleId}"}},{"range":{"@timestamp":{"gte":"now-30d","lt":"now"}}},{"bool":{"should":[{"term":{"kibana.alert.status":"active"}},{"term":{"kibana.alert.status":"recovered"}}]}}]}},"aggs":{"total":{"filters":{"filters":{"totalActiveAlerts":{"term":{"kibana.alert.status":"active"}},"totalRecoveredAlerts":{"term":{"kibana.alert.status":"recovered"}}}}}}}`;
+    const body = `{"index":"mock_index","size":0,"query":{"bool":{"must":[{"term":{"kibana.alert.rule.uuid":"${ruleId}"}},{"range":{"@timestamp":{"gte":"${utcFrom}","lt":"${utcTo}"}}},{"bool":{"should":[{"term":{"kibana.alert.status":"active"}},{"term":{"kibana.alert.status":"recovered"}}]}}]}},"aggs":{"total":{"filters":{"filters":{"totalActiveAlerts":{"term":{"kibana.alert.status":"active"}},"totalRecoveredAlerts":{"term":{"kibana.alert.status":"recovered"}}}}}}}`;
 
     expect(useKibanaMock().services.http.post).toHaveBeenCalledWith(
       '/internal/rac/alerts/find',

x-pack/plugins/triggers_actions_ui/public/application/hooks/use_load_rule_alerts_aggregations.ts

@@ -11,9 +11,16 @@ import { HttpSetup } from '@kbn/core/public';
 import { BASE_RAC_ALERTS_API_PATH } from '@kbn/rule-registry-plugin/common/constants';
 import { useKibana } from '../../common/lib/kibana';
 
+export interface AlertSummaryTimeRange {
+  utcFrom: string;
+  utcTo: string;
+  title: JSX.Element | string;
+}
+
 interface UseLoadRuleAlertsAggs {
   features: string;
   ruleId: string;
+  timeRange: AlertSummaryTimeRange;
 }
 interface RuleAlertsAggs {
   active: number;
@@ -29,11 +36,12 @@ interface LoadRuleAlertsAggs {
   };
   errorRuleAlertsAggs?: string;
 }
+
 interface IndexName {
   index: string;
 }
 
-export function useLoadRuleAlertsAggs({ features, ruleId }: UseLoadRuleAlertsAggs) {
+export function useLoadRuleAlertsAggs({ features, ruleId, timeRange }: UseLoadRuleAlertsAggs) {
   const { http } = useKibana().services;
   const [ruleAlertsAggs, setRuleAlertsAggs] = useState<LoadRuleAlertsAggs>({
     isLoadingRuleAlertsAggs: true,
@@ -56,6 +64,7 @@ export function useLoadRuleAlertsAggs({ features, ruleId }: UseLoadRuleAlertsAgg
         index,
         ruleId,
         signal: abortCtrlRef.current.signal,
+        timeRange,
       });
       if (error) throw error;
       if (!isCancelledRef.current) {
@@ -79,7 +88,7 @@ export function useLoadRuleAlertsAggs({ features, ruleId }: UseLoadRuleAlertsAgg
         }
       }
     }
-  }, [http, features, ruleId]);
+  }, [features, http, ruleId, timeRange]);
   useEffect(() => {
     loadRuleAlertsAgg();
   }, [loadRuleAlertsAgg]);
@@ -107,11 +116,13 @@ async function fetchRuleAlertsAggByTimeRange({
   index,
   ruleId,
   signal,
+  timeRange: { utcFrom, utcTo },
 }: {
   http: HttpSetup;
   index: string;
   ruleId: string;
   signal: AbortSignal;
+  timeRange: AlertSummaryTimeRange;
 }): Promise<RuleAlertsAggs> {
   try {
     const res = await http.post<AsApiContract<any>>(`${BASE_RAC_ALERTS_API_PATH}/find`, {
@@ -130,8 +141,8 @@ async function fetchRuleAlertsAggByTimeRange({
               {
                 range: {
                   '@timestamp': {
-                    gte: 'now-30d',
-                    lt: 'now',
+                    gte: utcFrom,
+                    lt: utcTo,
                   },
                 },
               },

x-pack/plugins/triggers_actions_ui/public/application/mock/rule_details/alert_summary/index.ts → x-pack/plugins/triggers_actions_ui/public/application/mock/alert_summary_widget/index.ts

@@ -5,7 +5,8 @@
  * 2.0.
  */
 
-import { Rule } from '../../../../types';
+import { AlertSummaryTimeRange } from '../../hooks/use_load_rule_alerts_aggregations';
+import { Rule } from '../../../types';
 
 export const mockRule = (): Rule => {
   return {
@@ -77,3 +78,9 @@ export const mockAggsResponse = () => {
     },
   };
 };
+
+export const mockAlertSummaryTimeRange: AlertSummaryTimeRange = {
+  utcFrom: 'mockedUtcFrom',
+  utcTo: 'mockedUtcTo',
+  title: 'mockedTitle',
+};

x-pack/plugins/triggers_actions_ui/public/application/sections/rule_details/components/alert_summary/components/alert_summary_widget_ui.stories.tsx

@@ -17,7 +17,7 @@ export const Overview = {
   args: {
     active: 15,
     recovered: 53,
-    timeRange: 'Last 30 days',
+    timeRangeTitle: 'Last 30 days',
     onClick: action('clicked'),
   },
 };

x-pack/plugins/triggers_actions_ui/public/application/sections/rule_details/components/alert_summary/components/alert_summary_widget_ui.tsx

@@ -23,7 +23,7 @@ import { AlertsSummaryWidgetUIProps } from './types';
 export const AlertsSummaryWidgetUI = ({
   active,
   recovered,
-  timeRange,
+  timeRangeTitle,
   onClick,
 }: AlertsSummaryWidgetUIProps) => {
   const handleClick = (
@@ -56,11 +56,11 @@ export const AlertsSummaryWidgetUI = ({
                   />
                 </h5>
               </EuiTitle>
-              {!!timeRange && (
+              {!!timeRangeTitle && (
                 <>
                   <EuiSpacer size="s" />
-                  <EuiText size="s" color="subdued">
-                    {timeRange}
+                  <EuiText size="s" color="subdued" data-test-subj="timeRangeTitle">
+                    {timeRangeTitle}
                   </EuiText>
                 </>
               )}

x-pack/plugins/triggers_actions_ui/public/application/sections/rule_details/components/alert_summary/components/types.ts

@@ -10,6 +10,6 @@ import { AlertStatus } from '@kbn/rule-data-utils';
 export interface AlertsSummaryWidgetUIProps {
   active: number;
   recovered: number;
-  timeRange: JSX.Element | string;
+  timeRangeTitle: JSX.Element | string;
   onClick: (status?: AlertStatus) => void;
 }

x-pack/plugins/triggers_actions_ui/public/application/sections/rule_details/components/alert_summary/rule_alerts_summary.test.tsx

@@ -11,7 +11,7 @@ import { RuleAlertsSummary } from './rule_alerts_summary';
 import { mount, ReactWrapper } from 'enzyme';
 import { __IntlProvider as IntlProvider } from '@kbn/i18n-react';
 import { ALERTS_FEATURE_ID } from '@kbn/alerting-plugin/common';
-import { mockRule } from '../../../../mock/rule_details/alert_summary';
+import { mockAlertSummaryTimeRange, mockRule } from '../../../../mock/alert_summary_widget';
 
 jest.mock('@kbn/kibana-react-plugin/public/ui_settings/use_ui_setting', () => ({
   useUiSetting: jest.fn().mockImplementation(() => true),
@@ -48,6 +48,10 @@ const ruleTypes = [
 
 describe('Rule Alert Summary', () => {
   let wrapper: ReactWrapper;
+  const mockedTimeRange = {
+    ...mockAlertSummaryTimeRange,
+    title: <h3 data-test-subj="mockedTimeRangeTitle">mockedTimeRangeTitle</h3>,
+  };
 
   async function setup() {
     const mockedRule = mockRule();
@@ -60,6 +64,7 @@ describe('Rule Alert Summary', () => {
           rule={mockedRule}
           filteredRuleTypes={['apm', 'uptime', 'metric', 'logs']}
           onClick={jest.fn}
+          timeRange={mockedTimeRange}
         />
       </IntlProvider>
     );
@@ -77,5 +82,8 @@ describe('Rule Alert Summary', () => {
     expect(wrapper.find('[data-test-subj="activeAlertsCount"]').text()).toEqual('1');
     expect(wrapper.find('[data-test-subj="recoveredAlertsCount"]').text()).toBe('7');
     expect(wrapper.find('[data-test-subj="totalAlertsCount"]').text()).toBe('8');
+    expect(wrapper.find('[data-test-subj="mockedTimeRangeTitle"]').text()).toBe(
+      'mockedTimeRangeTitle'
+    );
   });
 });

x-pack/plugins/triggers_actions_ui/public/application/sections/rule_details/components/alert_summary/rule_alerts_summary.tsx

@@ -7,14 +7,18 @@
 
 import { EuiLoadingSpinner } from '@elastic/eui';
 import { ALERTS_FEATURE_ID } from '@kbn/alerting-plugin/common';
-import { FormattedMessage } from '@kbn/i18n-react';
 import React, { useEffect, useState } from 'react';
 import { useLoadRuleAlertsAggs } from '../../../../hooks/use_load_rule_alerts_aggregations';
 import { useLoadRuleTypes } from '../../../../hooks/use_load_rule_types';
 import { RuleAlertsSummaryProps } from '.';
 import { AlertSummaryWidgetError, AlertsSummaryWidgetUI } from './components';
 
-export const RuleAlertsSummary = ({ rule, filteredRuleTypes, onClick }: RuleAlertsSummaryProps) => {
+export const RuleAlertsSummary = ({
+  rule,
+  filteredRuleTypes,
+  onClick,
+  timeRange,
+}: RuleAlertsSummaryProps) => {
   const [features, setFeatures] = useState<string>('');
   const { ruleTypes } = useLoadRuleTypes({
     filteredRuleTypes,
@@ -26,6 +30,7 @@ export const RuleAlertsSummary = ({ rule, filteredRuleTypes, onClick }: RuleAler
   } = useLoadRuleAlertsAggs({
     ruleId: rule.id,
     features,
+    timeRange,
   });
 
   useEffect(() => {
@@ -42,12 +47,7 @@ export const RuleAlertsSummary = ({ rule, filteredRuleTypes, onClick }: RuleAler
       active={active}
       onClick={onClick}
       recovered={recovered}
-      timeRange={
-        <FormattedMessage
-          id="xpack.triggersActionsUI.sections.ruleDetails.alertsSummary.last30days"
-          defaultMessage="Last 30 days"
-        />
-      }
+      timeRangeTitle={timeRange.title}
     />
   );
 };

x-pack/plugins/triggers_actions_ui/public/application/sections/rule_details/components/alert_summary/types.ts

@@ -6,10 +6,12 @@
  */
 
 import { AlertStatus } from '@kbn/rule-data-utils';
+import { AlertSummaryTimeRange } from '../../../../hooks/use_load_rule_alerts_aggregations';
 import { Rule } from '../../../../../types';
 
 export interface RuleAlertsSummaryProps {
   rule: Rule;
   filteredRuleTypes: string[];
   onClick: (status?: AlertStatus) => void;
+  timeRange: AlertSummaryTimeRange;
 }