Try to use alerts count only in the alert widget and close section if…

… there are no alerts
elastic · Jan 30, 2024 · 2e9dcc8 · 2e9dcc8
1 parent e8cdbe9
commit 2e9dcc8
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 19 deletions.
diff --git a/x-pack/plugins/infra/public/components/asset_details/tabs/overview/alerts.tsx b/x-pack/plugins/infra/public/components/asset_details/tabs/overview/alerts.tsx
@@ -4,15 +4,15 @@
  * 2.0; you may not use this file except in compliance with the Elastic License
  * 2.0.
  */
-import React, { useMemo } from 'react';
+import React, { useMemo, useState } from 'react';
 
 import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import { useSummaryTimeRange } from '@kbn/observability-plugin/public';
 import type { TimeRange } from '@kbn/es-query';
 import type { InventoryItemType } from '@kbn/metrics-data-access-plugin/common';
 import { findInventoryFields } from '@kbn/metrics-data-access-plugin/common';
 import { EuiLoadingSpinner } from '@elastic/eui';
-import { FormattedMessage } from '@kbn/i18n-react';
+import { i18n } from '@kbn/i18n';
 import { usePluginConfig } from '../../../../containers/plugin_config_context';
 import type { AlertsEsQuery } from '../../../../common/alerts/types';
 import { createAlertsEsQuery } from '../../../../common/alerts/create_alerts_es_query';
@@ -25,8 +25,8 @@ import { useBoolean } from '../../../../hooks/use_boolean';
 import { ALERT_STATUS_ALL } from '../../../../common/alerts/constants';
 import { AlertsSectionTitle } from '../../components/section_titles';
 import { useAssetDetailsRenderPropsContext } from '../../hooks/use_asset_details_render_props';
-import { CollapsibleSection } from './section/collapsible_section';
-import { AlertsClosedContent } from './alerts_closed_content';
+import { CollapsibleSection, type SectionTriggerValue } from './section/collapsible_section';
+// import { AlertsClosedContent } from './alerts_closed_content';
 import { useAlertsCount } from '../../../../hooks/use_alerts_count';
 
 export const AlertsSummaryContent = ({
@@ -41,6 +41,7 @@ export const AlertsSummaryContent = ({
   const { featureFlags } = usePluginConfig();
   const [isAlertFlyoutVisible, { toggle: toggleAlertFlyout }] = useBoolean(false);
   const { overrides } = useAssetDetailsRenderPropsContext();
+  const [isAlertSectionOpen, setIsAlertSectionOpen] = useState<SectionTriggerValue>('open');
 
   const alertsEsQueryByStatus = useMemo(
     () =>
@@ -82,9 +83,24 @@ export const AlertsSummaryContent = ({
         data-test-subj="infraAssetDetailsAlertsCollapsible"
         id={'alerts'}
         extraAction={<ExtraActions />}
-        closedSectionContent={<AlertsClosedContent alertsEsQuery={alertsEsQueryByStatus} />}
+        closedSectionContent={
+          isAlertSectionOpen === ('closed' as SectionTriggerValue) ? (
+            <span data-test-subj="infraAssetDetailsAlertsClosedContentNoAlerts">
+              {i18n.translate('xpack.infra.assetDetails.noActiveAlertsContentClosedSection', {
+                defaultMessage: 'No active alerts',
+              })}
+            </span>
+          ) : (
+            <></>
+          )
+        }
+        initialTriggerValue={isAlertSectionOpen}
       >
-        <MemoAlertSummaryWidget alertsQuery={alertsEsQueryByStatus} dateRange={dateRange} />
+        <MemoAlertSummaryWidget
+          setIsAlertSectionOpen={setIsAlertSectionOpen}
+          alertsQuery={alertsEsQueryByStatus}
+          dateRange={dateRange}
+        />
       </CollapsibleSection>
 
       {featureFlags.inventoryThresholdAlertRuleEnabled && (
@@ -103,10 +119,11 @@ export const AlertsSummaryContent = ({
 interface MemoAlertSummaryWidgetProps {
   alertsQuery: AlertsEsQuery;
   dateRange: TimeRange;
+  setIsAlertSectionOpen: (value: SectionTriggerValue) => void;
 }
 
 const MemoAlertSummaryWidget = React.memo(
-  ({ alertsQuery, dateRange }: MemoAlertSummaryWidgetProps) => {
+  ({ alertsQuery, dateRange, setIsAlertSectionOpen }: MemoAlertSummaryWidgetProps) => {
     const { services } = useKibanaContextForPlugin();
 
     const summaryTimeRange = useSummaryTimeRange(dateRange);
@@ -118,25 +135,26 @@ const MemoAlertSummaryWidget = React.memo(
       baseTheme: charts.theme.useChartsBaseTheme(),
     };
 
-    const { alertsCount, loading } = useAlertsCount({
+    const { alertsCount, loading, error } = useAlertsCount({
       featureIds: infraAlertFeatureIds,
       query: alertsQuery,
     });
 
-    const NoAlerts =
-      typeof alertsCount?.activeAlertCount === 'number' && alertsCount?.activeAlertCount === 0;
-
     if (loading) {
       return <EuiLoadingSpinner />;
     }
 
-    if (NoAlerts) {
+    const hasActiveAlerts =
+      typeof alertsCount?.activeAlertCount === 'number' && alertsCount?.activeAlertCount > 0;
+
+    if (error) {
       return (
-        <FormattedMessage
-          id="xpack.infra.assetDetails.noActiveAlertsContentClosedSection"
-          defaultMessage="No active alerts"
-          data-test-subj="infraAssetDetailsNoActiveAlerts"
-        />
+        <div>
+          {i18n.translate('xpack.infra.assetDetails.activeAlertsContent.countError', {
+            defaultMessage:
+              'The active alert count was not retrieved correctly, try reloading the page.',
+          })}
+        </div>
       );
     }
 
@@ -146,6 +164,9 @@ const MemoAlertSummaryWidget = React.memo(
         featureIds={infraAlertFeatureIds}
         filter={alertsQuery}
         timeRange={summaryTimeRange}
+        onLoaded={() => {
+          setIsAlertSectionOpen(hasActiveAlerts ? 'open' : 'closed');
+        }}
         fullSize
         hideChart
       />

diff --git a/...ugins/infra/public/components/asset_details/tabs/overview/section/collapsible_section.tsx b/...ugins/infra/public/components/asset_details/tabs/overview/section/collapsible_section.tsx
@@ -6,7 +6,9 @@
  */
 
 import { EuiAccordion, EuiFlexGroup, EuiFlexItem, useGeneratedHtmlId } from '@elastic/eui';
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
+
+export type SectionTriggerValue = 'closed' | 'open';
 
 export const CollapsibleSection = ({
   title,
@@ -16,6 +18,7 @@ export const CollapsibleSection = ({
   shouldCollapse,
   ['data-test-subj']: dataTestSubj,
   id,
+  initialTriggerValue,
 }: {
   title: React.FunctionComponent;
   closedSectionContent?: React.ReactNode;
@@ -25,8 +28,13 @@ export const CollapsibleSection = ({
   shouldCollapse: boolean;
   ['data-test-subj']: string;
   id: string;
+  initialTriggerValue?: SectionTriggerValue;
 }) => {
-  const [trigger, setTrigger] = useState<'closed' | 'open'>('open');
+  const [trigger, setTrigger] = useState<SectionTriggerValue>('open');
+
+  useEffect(() => {
+    setTrigger(initialTriggerValue ?? 'open');
+  }, [initialTriggerValue]);
 
   const Title = title;
   const ButtonContent = () =>