[8.9] [RAM][Maintenance Windows][Bug] Show Maintenance Window Ids If Unable to Fetch Maintenance Windows (#160218) (#160553)

# Backport This will backport the following commits from `main` to `8.9`: - [[RAM][Maintenance Windows][Bug] Show Maintenance Window Ids If Unable to Fetch Maintenance Windows (#160218)](https://github.com/elastic/kibana/pull/160218)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)  Co-authored-by: Jiawei Wu <74562234+JiaweiWu@users.noreply.github.com>
2025-04-24 17:59:23 -04:00 · 2023-06-26 14:03:36 -04:00 · 2023-06-26 14:03:36 -04:00 · 4365d08901
commit 4365d08901
parent 02265aef44
3 changed files with 55 additions and 27 deletions
--- a/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_table/maintenance_windows/cell.test.tsx
+++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_table/maintenance_windows/cell.test.tsx
@ -19,7 +19,7 @@ const maintenanceWindowsMap = getMaintenanceWindowMockMap();
 const alert = {
  _id: 'alert-id',
  _index: 'alert-index',
-  [ALERT_MAINTENANCE_WINDOW_IDS]: ['test-mw-id-1'],
+  [ALERT_MAINTENANCE_WINDOW_IDS]: ['test-mw-id-1', 'test-mw-id-2'],
 } as Alert;

 const props: CellComponentProps = {
@ -34,7 +34,7 @@ const props: CellComponentProps = {
 describe('MaintenanceWindowCell', () => {
  it('renders the maintenance window cell', async () => {
    render(<MaintenanceWindowCell {...props} />);
-    expect(screen.getByText('test-title')).toBeInTheDocument();
+    expect(screen.getByText('test-title,')).toBeInTheDocument();
  });

  it('renders the loading skeleton', async () => {
@ -44,8 +44,16 @@ describe('MaintenanceWindowCell', () => {

  it('shows the tooltip', async () => {
    render(<MaintenanceWindowCell {...props} />);
-    expect(screen.getByText('test-title')).toBeInTheDocument();
-    userEvent.hover(screen.getByText('test-title'));
+    expect(screen.getByText('test-title,')).toBeInTheDocument();
+    userEvent.hover(screen.getByText('test-title,'));
    expect(await screen.findByTestId('maintenance-window-tooltip-content')).toBeInTheDocument();
  });
+
+  it('renders the maintenance window IDs if the endpoint could not be fetched', async () => {
+    render(<MaintenanceWindowCell {...props} maintenanceWindows={new Map()} />);
+    expect(screen.queryByText('test-title,')).not.toBeInTheDocument();
+    expect(screen.queryByText('test-title-2')).not.toBeInTheDocument();
+    expect(screen.getByText('test-mw-id-1,')).toBeInTheDocument();
+    expect(screen.getByText('test-mw-id-2')).toBeInTheDocument();
+  });
 });
--- a/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_table/maintenance_windows/cell.tsx
+++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_table/maintenance_windows/cell.tsx
@ -6,7 +6,7 @@
 */

 import React, { memo, useMemo } from 'react';
-import { EuiSkeletonText, EuiToolTip, EuiText } from '@elastic/eui';
+import { EuiSkeletonText, EuiToolTip } from '@elastic/eui';
 import { MaintenanceWindow } from '@kbn/alerting-plugin/common';
 import { ALERT_MAINTENANCE_WINDOW_IDS, TIMESTAMP } from '@kbn/rule-data-utils';
 import { CellComponentProps } from '../types';
@ -18,34 +18,42 @@ const isMaintenanceWindowValid = (mw: MaintenanceWindow | undefined): mw is Main

 interface MaintenanceWindowBaseCellProps {
  maintenanceWindows: MaintenanceWindow[];
+  maintenanceWindowIds: string[];
  timestamp?: string;
  isLoading: boolean;
 }

 export const MaintenanceWindowBaseCell = memo((props: MaintenanceWindowBaseCellProps) => {
-  const { maintenanceWindows, isLoading, timestamp } = props;
+  const { maintenanceWindows, maintenanceWindowIds, isLoading, timestamp } = props;

  const tooltipWithText = useMemo(() => {
-    if (!maintenanceWindows.length) {
-      return null;
-    }
-
-    return maintenanceWindows.map((mw, index) => {
-      return (
-        <>
-          <EuiToolTip
-            key={`${mw.id}_tooltip`}
-            content={<TooltipContent maintenanceWindow={mw} timestamp={timestamp} />}
-          >
-            <EuiText key={`${mw.id}_text`} size="relative">
-              {mw.title}
-            </EuiText>
-          </EuiToolTip>
-          {index !== maintenanceWindows.length - 1 && <>,&nbsp;</>}
-        </>
-      );
-    });
-  }, [maintenanceWindows, timestamp]);
+    const totalLength = maintenanceWindows.length + maintenanceWindowIds.length;
+    return (
+      <>
+        {maintenanceWindows.map((mw, index) => (
+          <>
+            <EuiToolTip
+              key={`${mw.id}_tooltip`}
+              content={<TooltipContent maintenanceWindow={mw} timestamp={timestamp} />}
+            >
+              <span key={`${mw.id}_title`}>
+                {mw.title}
+                {index !== totalLength - 1 && <>, &nbsp;</>}
+              </span>
+            </EuiToolTip>
+          </>
+        ))}
+        {maintenanceWindowIds.map((id, index) => (
+          <>
+            <span key={`${id}_id`}>
+              {id}
+              {index + maintenanceWindows.length !== totalLength - 1 && <>, &nbsp;</>}
+            </span>
+          </>
+        ))}
+      </>
+    );
+  }, [maintenanceWindows, maintenanceWindowIds, timestamp]);

  return (
    <EuiSkeletonText
@ -69,13 +77,19 @@ export const MaintenanceWindowCell = memo((props: CellComponentProps) => {
      .filter(isMaintenanceWindowValid);
  }, [alert, maintenanceWindows]);

-  if (validMaintenanceWindows.length === 0) {
+  const idsWithoutMaintenanceWindow = useMemo(() => {
+    const maintenanceWindowIds = alert[ALERT_MAINTENANCE_WINDOW_IDS] || [];
+    return maintenanceWindowIds.filter((id) => !maintenanceWindows.get(id));
+  }, [alert, maintenanceWindows]);
+
+  if (validMaintenanceWindows.length === 0 && idsWithoutMaintenanceWindow.length === 0) {
    return <>--</>;
  }

  return (
    <MaintenanceWindowBaseCell
      maintenanceWindows={validMaintenanceWindows}
+      maintenanceWindowIds={idsWithoutMaintenanceWindow}
      isLoading={isLoading}
      timestamp={alert[TIMESTAMP]?.[0]}
    />
--- a/x-pack/plugins/triggers_actions_ui/public/application/sections/rule_details/components/rule_alert_list.tsx
+++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/rule_details/components/rule_alert_list.tsx
@ -72,10 +72,16 @@ const RuleAlertListMaintenanceWindowCell = (props: RuleAlertListMaintenanceWindo
      .filter(isMaintenanceWindowValid);
  }, [alert, maintenanceWindows]);

+  const idsWithoutMaintenanceWindow = useMemo(() => {
+    const maintenanceWindowIds = alert.maintenanceWindowIds || [];
+    return maintenanceWindowIds.filter((id) => !maintenanceWindows.get(id));
+  }, [alert, maintenanceWindows]);
+
  return (
    <MaintenanceWindowBaseCell
      timestamp={alert.start?.toISOString()}
      maintenanceWindows={validMaintenanceWindows}
+      maintenanceWindowIds={idsWithoutMaintenanceWindow}
      isLoading={isLoading}
    />
  );