[Alerting] use event log to populate alert details view

x-pack/plugins/triggers_actions_ui/public/application/constants/index.ts

@@ -6,6 +6,7 @@
 
 export { BASE_ALERT_API_PATH } from '../../../../alerting/common';
 export { BASE_ACTION_API_PATH } from '../../../../actions/common';
+export { BASE_EVENT_LOG_API_PATH } from '../../../../event_log/common';
 
 export const BASE_PATH = '/management/insightsAndAlerting/triggersActions';
 

x-pack/plugins/triggers_actions_ui/public/application/lib/alert_api.ts

@@ -10,7 +10,7 @@ import { pipe } from 'fp-ts/lib/pipeable';
 import { fold } from 'fp-ts/lib/Either';
 import { pick } from 'lodash';
 import { alertStateSchema, AlertingFrameworkHealth } from '../../../../alerting/common';
-import { BASE_ALERT_API_PATH } from '../constants';
+import { BASE_ALERT_API_PATH, BASE_EVENT_LOG_API_PATH } from '../constants';
 import { Alert, AlertType, AlertWithoutId, AlertTaskState } from '../../types';
 
 export async function loadAlertTypes({ http }: { http: HttpSetup }): Promise<AlertType[]> {
@@ -220,3 +220,17 @@ export async function unmuteAlerts({
 export async function health({ http }: { http: HttpSetup }): Promise<AlertingFrameworkHealth> {
   return await http.get(`${BASE_ALERT_API_PATH}/_health`);
 }
+
+export async function getEvents({ id, http }: { id: string; http: HttpSetup }): Promise<void> {
+  // per_page: schema.number({ defaultValue: 10, min: 0 }),
+  // page: schema.number({ defaultValue: 1, min: 1 }),
+  // start: optionalDateFieldSchema,
+  // end: optionalDateFieldSchema,
+
+  return await http.get(`${BASE_EVENT_LOG_API_PATH}/alert/${id}`, {
+    query: {
+      per_page: 1000,
+      page: 1,
+    },
+  });
+}

x-pack/plugins/triggers_actions_ui/public/application/sections/alert_details/components/alert_instances.tsx

@@ -21,6 +21,7 @@ import { DEFAULT_SEARCH_PAGE_SIZE } from '../../../constants';
 type AlertInstancesProps = {
   alert: Alert;
   alertState: AlertTaskState;
+  // events: unknown;
   requestRefresh: () => Promise<void>;
   durationEpoch?: number;
 } & Pick<AlertApis, 'muteAlertInstance' | 'unmuteAlertInstance'>;

x-pack/plugins/triggers_actions_ui/public/application/sections/alert_details/components/alert_instances_route.tsx

@@ -19,24 +19,32 @@ import { AlertInstancesWithApi as AlertInstances } from './alert_instances';
 type WithAlertStateProps = {
   alert: Alert;
   requestRefresh: () => Promise<void>;
-} & Pick<AlertApis, 'loadAlertState'>;
+} & Pick<AlertApis, 'loadAlertState' /* | 'getEvents' */>;
 
 export const AlertInstancesRoute: React.FunctionComponent<WithAlertStateProps> = ({
   alert,
   requestRefresh,
   loadAlertState,
+  // getEvents,
 }) => {
   const { toastNotifications } = useAppDependencies();
 
   const [alertState, setAlertState] = useState<AlertTaskState | null>(null);
+  // const [events, setEvents] = useState<unknown | null>(null);
 
   useEffect(() => {
+    // TODO get events here
     getAlertState(alert.id, loadAlertState, setAlertState, toastNotifications);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [alert]);
 
-  return alertState ? (
-    <AlertInstances requestRefresh={requestRefresh} alert={alert} alertState={alertState} />
+  return alertState /* && events */ ? (
+    <AlertInstances
+      requestRefresh={requestRefresh}
+      // events={events}
+      alert={alert}
+      alertState={alertState}
+    />
   ) : (
     <div
       style={{
@@ -73,4 +81,12 @@ export async function getAlertState(
   }
 }
 
+// export async function getEvents(
+//   alertId: string,
+//   loadEvents: AlertApis['getEvents'],
+//   setEvents: React.Dispatch<React.SetStateAction<unknown | null>>,
+//   toastNotifications: Pick<ToastsApi, 'addDanger'>
+// ) {
+// }
+
 export const AlertInstancesRouteWithApi = withBulkAlertOperations(AlertInstancesRoute);

x-pack/plugins/triggers_actions_ui/public/application/sections/common/components/with_bulk_alert_api_operations.tsx

@@ -24,6 +24,7 @@ import {
   loadAlertState,
   loadAlertTypes,
   health,
+  // getEvents,
 } from '../../../lib/alert_api';
 
 export interface ComponentOpts {
@@ -53,6 +54,7 @@ export interface ComponentOpts {
   loadAlertState: (id: Alert['id']) => Promise<AlertTaskState>;
   loadAlertTypes: () => Promise<AlertType[]>;
   getHealth: () => Promise<AlertingFrameworkHealth>;
+  // getEvents: () => Promise<any>;
 }
 
 export type PropsWithOptionalApiHandlers<T> = Omit<T, keyof ComponentOpts> & Partial<ComponentOpts>;
@@ -121,6 +123,7 @@ export function withBulkAlertOperations<T>(
         loadAlertState={async (alertId: Alert['id']) => loadAlertState({ http, alertId })}
         loadAlertTypes={async () => loadAlertTypes({ http })}
         getHealth={async () => health({ http })}
+        // getEvents={async (alertId: Alert['id']) => getEvents({ http, id: alertId })}
       />
     );
   };