Gaps callout

x-pack/solutions/security/plugins/security_solution/public/detection_engine/rule_gaps/components/rule_gaps_callout/index.tsx

@@ -0,0 +1,35 @@
+/*
+ * 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 { EuiCallOut, EuiSpacer } from '@elastic/eui';
+import { gapStatus } from '@kbn/alerting-plugin/common';
+import { useGetRuleIdsWithGaps } from '../../api/hooks/use_get_rule_ids_with_gaps';
+import { GapRangeValue } from '../../constants';
+import { useIsExperimentalFeatureEnabled } from '../../../../common/hooks/use_experimental_features';
+import * as i18n from './translations';
+
+export const RuleGapsCallout = () => {
+  const storeGapsInEventLogEnabled = useIsExperimentalFeatureEnabled('storeGapsInEventLogEnabled');
+
+  const { data } = useGetRuleIdsWithGaps({
+    gapRange: GapRangeValue.LAST_24_H,
+    statuses: [gapStatus.UNFILLED, gapStatus.PARTIALLY_FILLED],
+  });
+
+  if (!data || data?.total === 0 || !storeGapsInEventLogEnabled) {
+    return null;
+  }
+
+  return (
+    <>
+      <EuiCallOut color="warning" title={i18n.RULE_GAPS_CALLOUT_TITLE} iconType="warning">
+        <p>{i18n.RULE_GAPS_CALLOUT_MESSAGE}</p>
+      </EuiCallOut>
+      <EuiSpacer size="s" />
+    </>
+  );
+};

x-pack/solutions/security/plugins/security_solution/public/detection_engine/rule_gaps/components/rule_gaps_callout/translations.tsx

@@ -0,0 +1,23 @@
+/*
+ * 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 { i18n } from '@kbn/i18n';
+
+export const RULE_GAPS_CALLOUT_TITLE = i18n.translate(
+  'xpack.securitySolution.ruleGaps.callout.title',
+  {
+    defaultMessage: 'Rule execution gaps detected',
+  }
+);
+
+export const RULE_GAPS_CALLOUT_MESSAGE = i18n.translate(
+  'xpack.securitySolution.ruleGaps.callout.message',
+  {
+    defaultMessage:
+      'Gaps in rule coverage were detected over the past 24 hours. Check the Rule Monitoring tab to learn which rules are affected and to begin remediating gaps.',
+  }
+);

x-pack/solutions/security/plugins/security_solution/public/detection_engine/rule_management_ui/components/rules_table/index.tsx

@@ -14,6 +14,7 @@ import { RulesTables } from './rules_tables';
 import { AllRulesTabs, RulesTableToolbar } from './rules_table_toolbar';
 import { UpgradePrebuiltRulesTable } from './upgrade_prebuilt_rules_table/upgrade_prebuilt_rules_table';
 import { UpgradePrebuiltRulesTableContextProvider } from './upgrade_prebuilt_rules_table/upgrade_prebuilt_rules_table_context';
+import { RuleGapsCallout } from '../../../rule_gaps/components/rule_gaps_callout';
 
 /**
  * Table Component for displaying all Rules for a given cluster. Provides the ability to filter
@@ -31,6 +32,7 @@ export const AllRules = React.memo(() => {
     return (
       <>
         <RulesManagementTour />
+        {tabName !== AllRulesTabs.monitoring && <RuleGapsCallout />}
         <RulesTableToolbar />
         <EuiSpacer />
         <RulesTables selectedTab={tabName as AllRulesTabs} />

x-pack/solutions/security/plugins/security_solution/public/detection_engine/rule_management_ui/components/rules_table/rules_tables.tsx

@@ -325,7 +325,6 @@ export const RulesTables = React.memo<RulesTableProps>(({ selectedTab }) => {
         <>
           {selectedTab === AllRulesTabs.monitoring && storeGapsInEventLogEnabled && (
             <>
-              <EuiSpacer />
               <RulesWithGapsOverviewPanel />
               <EuiSpacer />
             </>