[ResponseOps][Window Maintenance] Add window maintenance to alerting plugin public folder and add create form

x-pack/plugins/alerting/common/index.ts

@@ -57,3 +57,4 @@ export const BASE_ALERTING_API_PATH = '/api/alerting';
 export const INTERNAL_BASE_ALERTING_API_PATH = '/internal/alerting';
 export const ALERTS_FEATURE_ID = 'alerts';
 export const MONITORING_HISTORY_LIMIT = 200;
+export const ENABLE_MAINTENANCE_WINDOWS = false;

x-pack/plugins/alerting/kibana.jsonc

@@ -20,7 +20,10 @@
       "features",
       "kibanaUtils",
       "licensing",
-      "taskManager"
+      "taskManager",
+      "kibanaReact",
+      "management",
+      "esUiShared",
     ],
     "optionalPlugins": [
       "usageCollection",

x-pack/plugins/alerting/public/application/maintenance_windows.tsx

@@ -0,0 +1,79 @@
+/*
+ * 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 ReactDOM from 'react-dom';
+import { Router, Switch } from 'react-router-dom';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { Route } from '@kbn/shared-ux-router';
+import { CoreStart } from '@kbn/core/public';
+import { EuiThemeProvider } from '@kbn/kibana-react-plugin/common';
+import { KibanaContextProvider, KibanaThemeProvider } from '@kbn/kibana-react-plugin/public';
+import { Storage } from '@kbn/kibana-utils-plugin/public';
+import { ManagementAppMountParams } from '@kbn/management-plugin/public';
+import { AlertingPluginStart } from '../plugin';
+import { routes } from '../routes';
+
+const App = React.memo(() => {
+  return (
+    <>
+      <Switch>
+        {Object.keys(routes.maintenanceWindows).map((path) => {
+          const { handler, exact } = routes.maintenanceWindows[path];
+          const Wrapper = () => handler();
+          return <Route key={path} path={path} exact={exact} component={Wrapper} />;
+        })}
+      </Switch>
+    </>
+  );
+});
+App.displayName = 'App';
+
+export const renderApp = ({
+  core,
+  plugins,
+  mountParams,
+  kibanaVersion,
+}: {
+  core: CoreStart;
+  plugins: AlertingPluginStart;
+  mountParams: ManagementAppMountParams;
+  kibanaVersion: string;
+}) => {
+  const { element, history, theme$ } = mountParams;
+  const i18nCore = core.i18n;
+  const isDarkMode = core.uiSettings.get('theme:darkMode');
+
+  const queryClient = new QueryClient();
+
+  ReactDOM.render(
+    <KibanaThemeProvider theme$={theme$}>
+      <KibanaContextProvider
+        services={{
+          ...core,
+          ...plugins,
+          storage: new Storage(localStorage),
+          kibanaVersion,
+        }}
+      >
+        <Router history={history}>
+          <EuiThemeProvider darkMode={isDarkMode}>
+            <i18nCore.Context>
+              <QueryClientProvider client={queryClient}>
+                <App />
+              </QueryClientProvider>
+            </i18nCore.Context>
+          </EuiThemeProvider>
+        </Router>
+      </KibanaContextProvider>
+    </KibanaThemeProvider>,
+    element
+  );
+  return () => {
+    ReactDOM.unmountComponentAtNode(element);
+  };
+};

x-pack/plugins/alerting/public/config/index.ts

@@ -0,0 +1,10 @@
+/*
+ * 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 { paths, AlertingDeepLinkId, APP_ID, MAINTENANCE_WINDOWS_APP_ID } from './paths';
+
+export type { IAlertingDeepLinkId } from './paths';

x-pack/plugins/alerting/public/config/paths.ts

@@ -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.
+ */
+
+export const MAINTENANCE_WINDOWS_APP_ID = 'maintenanceWindows';
+export const APP_ID = 'management';
+
+export const paths = {
+  alerting: {
+    maintenanceWindows: `/${MAINTENANCE_WINDOWS_APP_ID}`,
+    maintenanceWindowsCreate: 'create',
+  },
+};
+
+export const AlertingDeepLinkId = {
+  maintenanceWindows: MAINTENANCE_WINDOWS_APP_ID,
+  maintenanceWindowsCreate: 'create',
+};
+
+export type IAlertingDeepLinkId = typeof AlertingDeepLinkId[keyof typeof AlertingDeepLinkId];

x-pack/plugins/alerting/public/hooks/use_breadcrumbs.test.tsx

@@ -0,0 +1,74 @@
+/*
+ * 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 { renderHook } from '@testing-library/react-hooks';
+import { useBreadcrumbs } from './use_breadcrumbs';
+import { AlertingDeepLinkId } from '../config';
+import { AppMockRenderer, createAppMockRenderer } from '../lib/test_utils';
+
+const mockSetBreadcrumbs = jest.fn();
+const mockSetTitle = jest.fn();
+
+jest.mock('../utils/kibana_react', () => {
+  const originalModule = jest.requireActual('../utils/kibana_react');
+  return {
+    ...originalModule,
+    useKibana: () => {
+      const { services } = originalModule.useKibana();
+      return {
+        services: {
+          ...services,
+          chrome: { setBreadcrumbs: mockSetBreadcrumbs, docTitle: { change: mockSetTitle } },
+        },
+      };
+    },
+  };
+});
+
+jest.mock('./use_navigation', () => {
+  const originalModule = jest.requireActual('./use_navigation');
+  return {
+    ...originalModule,
+    useNavigation: jest.fn().mockReturnValue({
+      getAppUrl: jest.fn((params?: { deepLinkId: string }) => params?.deepLinkId ?? '/test'),
+    }),
+  };
+});
+
+let appMockRenderer: AppMockRenderer;
+
+describe('useBreadcrumbs', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    appMockRenderer = createAppMockRenderer();
+  });
+
+  test('set maintenance windows breadcrumbs', () => {
+    renderHook(() => useBreadcrumbs(AlertingDeepLinkId.maintenanceWindows), {
+      wrapper: appMockRenderer.AppWrapper,
+    });
+    expect(mockSetBreadcrumbs).toHaveBeenCalledWith([
+      { href: '/test', onClick: expect.any(Function), text: 'Stack Management' },
+      { text: 'Maintenance Windows' },
+    ]);
+  });
+
+  test('set create maintenance windows breadcrumbs', () => {
+    renderHook(() => useBreadcrumbs(AlertingDeepLinkId.maintenanceWindowsCreate), {
+      wrapper: appMockRenderer.AppWrapper,
+    });
+    expect(mockSetBreadcrumbs).toHaveBeenCalledWith([
+      { href: '/test', onClick: expect.any(Function), text: 'Stack Management' },
+      {
+        href: AlertingDeepLinkId.maintenanceWindows,
+        onClick: expect.any(Function),
+        text: 'Maintenance Windows',
+      },
+      { text: 'Create' },
+    ]);
+  });
+});

x-pack/plugins/alerting/public/hooks/use_breadcrumbs.ts

@@ -0,0 +1,95 @@
+/*
+ * 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';
+import { ChromeBreadcrumb } from '@kbn/core/public';
+import { MouseEvent, useEffect } from 'react';
+import { useKibana } from '../utils/kibana_react';
+import { useNavigation } from './use_navigation';
+import { APP_ID, AlertingDeepLinkId, IAlertingDeepLinkId } from '../config';
+
+const breadcrumbTitle: Record<IAlertingDeepLinkId, string> = {
+  [AlertingDeepLinkId.maintenanceWindows]: i18n.translate(
+    'xpack.alerting.breadcrumbs.maintenanceWindowsLinkText',
+    {
+      defaultMessage: 'Maintenance Windows',
+    }
+  ),
+  [AlertingDeepLinkId.maintenanceWindowsCreate]: i18n.translate(
+    'xpack.alerting.breadcrumbs.createMaintenanceWindowsLinkText',
+    {
+      defaultMessage: 'Create',
+    }
+  ),
+};
+
+const topLevelBreadcrumb: Record<string, IAlertingDeepLinkId> = {
+  [AlertingDeepLinkId.maintenanceWindowsCreate]: AlertingDeepLinkId.maintenanceWindows,
+};
+
+function addClickHandlers(
+  breadcrumbs: ChromeBreadcrumb[],
+  navigateToHref?: (url: string) => Promise<void>
+) {
+  return breadcrumbs.map((bc) => ({
+    ...bc,
+    ...(bc.href
+      ? {
+          onClick: (event: MouseEvent) => {
+            if (navigateToHref && bc.href) {
+              event.preventDefault();
+              navigateToHref(bc.href);
+            }
+          },
+        }
+      : {}),
+  }));
+}
+
+function getTitleFromBreadCrumbs(breadcrumbs: ChromeBreadcrumb[]) {
+  return breadcrumbs.map(({ text }) => text?.toString() ?? '').reverse();
+}
+
+export const useBreadcrumbs = (pageDeepLink: IAlertingDeepLinkId) => {
+  const {
+    services: {
+      chrome: { docTitle, setBreadcrumbs },
+      application: { navigateToUrl },
+    },
+  } = useKibana();
+  const setTitle = docTitle.change;
+  const { getAppUrl } = useNavigation(APP_ID);
+
+  useEffect(() => {
+    const breadcrumbs = [
+      {
+        text: i18n.translate('xpack.alerting.breadcrumbs.stackManagementLinkText', {
+          defaultMessage: 'Stack Management',
+        }),
+        href: getAppUrl(),
+      },
+      ...(topLevelBreadcrumb[pageDeepLink]
+        ? [
+            {
+              text: breadcrumbTitle[topLevelBreadcrumb[pageDeepLink]],
+              href: getAppUrl({ deepLinkId: topLevelBreadcrumb[pageDeepLink] }),
+            },
+          ]
+        : []),
+      {
+        text: breadcrumbTitle[pageDeepLink],
+      },
+    ];
+
+    if (setBreadcrumbs) {
+      setBreadcrumbs(addClickHandlers(breadcrumbs, navigateToUrl));
+    }
+    if (setTitle) {
+      setTitle(getTitleFromBreadCrumbs(breadcrumbs));
+    }
+  }, [pageDeepLink, getAppUrl, navigateToUrl, setBreadcrumbs, setTitle]);
+};

x-pack/plugins/alerting/public/hooks/use_create_maintenance_window.test.tsx

@@ -0,0 +1,86 @@
+/*
+ * 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 { act, renderHook } from '@testing-library/react-hooks/dom';
+import { waitFor } from '@testing-library/dom';
+
+import { MaintenanceWindow } from '../pages/maintenance_windows/types';
+import { AppMockRenderer, createAppMockRenderer } from '../lib/test_utils';
+import { useCreateMaintenanceWindow } from './use_create_maintenance_window';
+
+const mockAddDanger = jest.fn();
+const mockAddSuccess = jest.fn();
+
+jest.mock('../utils/kibana_react', () => {
+  const originalModule = jest.requireActual('../utils/kibana_react');
+  return {
+    ...originalModule,
+    useKibana: () => {
+      const { services } = originalModule.useKibana();
+      return {
+        services: {
+          ...services,
+          notifications: { toasts: { addSuccess: mockAddSuccess, addDanger: mockAddDanger } },
+        },
+      };
+    },
+  };
+});
+jest.mock('../services/maintenance_windows_api/create', () => ({
+  createMaintenanceWindow: jest.fn(),
+}));
+
+const { createMaintenanceWindow } = jest.requireMock('../services/maintenance_windows_api/create');
+
+const maintenanceWindow: MaintenanceWindow = {
+  title: 'test',
+  duration: 1,
+  rRule: {
+    dtstart: '2023-03-23T19:16:21.293Z',
+    tzid: 'America/New_York',
+    freq: 3,
+    interval: 1,
+    byweekday: ['TH'],
+  },
+};
+
+let appMockRenderer: AppMockRenderer;
+
+describe('useCreateMaintenanceWindow', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+
+    appMockRenderer = createAppMockRenderer();
+    createMaintenanceWindow.mockResolvedValue(maintenanceWindow);
+  });
+
+  it('should call onSuccess if api succeeds', async () => {
+    const { result } = renderHook(() => useCreateMaintenanceWindow(), {
+      wrapper: appMockRenderer.AppWrapper,
+    });
+
+    await act(async () => {
+      await result.current.mutate(maintenanceWindow);
+    });
+    await waitFor(() => expect(mockAddSuccess).toBeCalledWith("Created maintenance window 'test'"));
+  });
+
+  it('should call onError if api fails', async () => {
+    createMaintenanceWindow.mockRejectedValue('');
+
+    const { result } = renderHook(() => useCreateMaintenanceWindow(), {
+      wrapper: appMockRenderer.AppWrapper,
+    });
+
+    await act(async () => {
+      await result.current.mutate(maintenanceWindow);
+    });
+
+    await waitFor(() =>
+      expect(mockAddDanger).toBeCalledWith('Failed to create maintenance window.')
+    );
+  });
+});