chore(slo): Improve active alerts badge (elastic#155290)

x-pack/plugins/observability/public/components/slo/slo_status_badge/slo_active_alerts_badge.tsx

@@ -8,17 +8,18 @@
 import { EuiBadge, EuiFlexItem } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import React from 'react';
+import { SLOWithSummaryResponse } from '@kbn/slo-schema';
+
 import { paths } from '../../../config/paths';
 import { useKibana } from '../../../utils/kibana_react';
-
 import { ActiveAlerts } from '../../../hooks/slo/use_fetch_active_alerts';
-import { toAlertsPageQueryFilter } from '../../../pages/slos/helpers/alerts_page_query_filter';
 
 export interface Props {
   activeAlerts?: ActiveAlerts;
+  slo: SLOWithSummaryResponse;
 }
 
-export function SloActiveAlertsBadge({ activeAlerts }: Props) {
+export function SloActiveAlertsBadge({ slo, activeAlerts }: Props) {
   const {
     application: { navigateToUrl },
     http: { basePath },
@@ -27,9 +28,9 @@ export function SloActiveAlertsBadge({ activeAlerts }: Props) {
   const handleActiveAlertsClick = () => {
     if (activeAlerts) {
       navigateToUrl(
-        `${basePath.prepend(paths.observability.alerts)}?_a=${toAlertsPageQueryFilter(
-          activeAlerts
-        )}`
+        `${basePath.prepend(paths.observability.alerts)}?_a=(kuery:'slo.id:"${
+          slo.id
+        }"',rangeFrom:now-15m,rangeTo:now,status:active)`
       );
     }
   };

x-pack/plugins/observability/public/hooks/slo/use_fetch_active_alerts.ts

@@ -58,6 +58,13 @@ export function useFetchActiveAlerts({ sloIds = [] }: Params): UseFetchActiveAle
             query: {
               bool: {
                 filter: [
+                  {
+                    range: {
+                      '@timestamp': {
+                        gte: 'now-15m/m',
+                      },
+                    },
+                  },
                   {
                     term: {
                       'kibana.alert.rule.rule_type_id': 'slo.rules.burnRate',

x-pack/plugins/observability/public/pages/slo_details/components/header_title.tsx

@@ -38,7 +38,7 @@ export function HeaderTitle(props: Props) {
       <EuiFlexItem grow={false}>{slo.name}</EuiFlexItem>
       <EuiFlexGroup direction="row" gutterSize="s" alignItems="center" responsive={false}>
         <SloStatusBadge slo={slo} />
-        <SloActiveAlertsBadge activeAlerts={activeAlerts[slo.id]} />
+        <SloActiveAlertsBadge slo={slo} activeAlerts={activeAlerts[slo.id]} />
       </EuiFlexGroup>
     </EuiFlexGroup>
   );

x-pack/plugins/observability/public/pages/slos/components/badges/slo_badges.tsx

@@ -31,7 +31,7 @@ export function SloBadges({ activeAlerts, rules, slo, onClickRuleBadge }: Props)
       <SloStatusBadge slo={slo} />
       <SloIndicatorTypeBadge slo={slo} />
       <SloTimeWindowBadge slo={slo} />
-      <SloActiveAlertsBadge activeAlerts={activeAlerts} />
+      <SloActiveAlertsBadge slo={slo} activeAlerts={activeAlerts} />
       <SloRulesBadge rules={rules} onClick={onClickRuleBadge} />
     </EuiFlexGroup>
   );