[ML] Explain log rate spikes: Page setup (elastic#132121)

Builds out UI/code boilerplate necessary before we start implementing the feature's own UI on a dedicated page.

- Updates navigation to bring up data view/saved search selection before moving on to the explain log spike rates page.
The bar chart race demo page was moved to the aiops/single_endpoint_streaming_demo url. It is kept in this PR so we have two different pages + API endpoints that use streaming. With this still in place it's easier to update the streaming code to be more generic and reusable.
- The url/page aiops/explain_log_rate_spikes has been added with some dummy request that slowly streams a data view's fields to the client. This page will host the actual UI to be brought over from the PoC in follow ups to this PR.
- The structure to embed aiops plugin pages in the ml plugin has been simplified. Instead of a lot of custom code to load the components at runtime in the aiops plugin itself, this now uses React lazy loading with Suspense, similar to how we load Vega charts in other places. We no longer initialize the aiops client side code during startup of the plugin itself and augment it, instead we statically import components and pass on props/contexts from the ml plugin.
- The code to handle streaming chunks on the client side in stream_fetch.ts/use_stream_fetch_reducer.ts has been improved to make better use of TS generics so for a given API endpoint it's able to return the appropriate coresponding return data type and only allows to use the supported reducer actions for that endpoint. Buffering client side actions has been tweaked to handle state updates more quickly if updates from the server are stalling.

x-pack/plugins/aiops/common/api/example_stream.ts

@@ -65,4 +65,7 @@ export function deleteEntityAction(payload: string): ApiActionDeleteEntity {
   };
 }
 
-export type ApiAction = ApiActionUpdateProgress | ApiActionAddToEntity | ApiActionDeleteEntity;
+export type AiopsExampleStreamApiAction =
+  | ApiActionUpdateProgress
+  | ApiActionAddToEntity
+  | ApiActionDeleteEntity;

x-pack/plugins/aiops/common/api/explain_log_rate_spikes.ts

@@ -0,0 +1,34 @@
+/*
+ * 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 { schema, TypeOf } from '@kbn/config-schema';
+
+export const aiopsExplainLogRateSpikesSchema = schema.object({
+  /** The index to query for log rate spikes */
+  index: schema.string(),
+});
+
+export type AiopsExplainLogRateSpikesSchema = TypeOf<typeof aiopsExplainLogRateSpikesSchema>;
+
+export const API_ACTION_NAME = {
+  ADD_FIELDS: 'add_fields',
+} as const;
+export type ApiActionName = typeof API_ACTION_NAME[keyof typeof API_ACTION_NAME];
+
+interface ApiActionAddFields {
+  type: typeof API_ACTION_NAME.ADD_FIELDS;
+  payload: string[];
+}
+
+export function addFieldsAction(payload: string[]): ApiActionAddFields {
+  return {
+    type: API_ACTION_NAME.ADD_FIELDS,
+    payload,
+  };
+}
+
+export type AiopsExplainLogRateSpikesApiAction = ApiActionAddFields;

x-pack/plugins/aiops/common/api/index.ts

@@ -5,15 +5,24 @@
  * 2.0.
  */
 
-import type { AiopsExampleStreamSchema } from './example_stream';
+import type {
+  AiopsExplainLogRateSpikesSchema,
+  AiopsExplainLogRateSpikesApiAction,
+} from './explain_log_rate_spikes';
+import type { AiopsExampleStreamSchema, AiopsExampleStreamApiAction } from './example_stream';
 
 export const API_ENDPOINT = {
   EXAMPLE_STREAM: '/internal/aiops/example_stream',
-  ANOTHER: '/internal/aiops/another',
+  EXPLAIN_LOG_RATE_SPIKES: '/internal/aiops/explain_log_rate_spikes',
 } as const;
 export type ApiEndpoint = typeof API_ENDPOINT[keyof typeof API_ENDPOINT];
 
 export interface ApiEndpointOptions {
   [API_ENDPOINT.EXAMPLE_STREAM]: AiopsExampleStreamSchema;
-  [API_ENDPOINT.ANOTHER]: { anotherOption: string };
+  [API_ENDPOINT.EXPLAIN_LOG_RATE_SPIKES]: AiopsExplainLogRateSpikesSchema;
+}
+
+export interface ApiEndpointActions {
+  [API_ENDPOINT.EXAMPLE_STREAM]: AiopsExampleStreamApiAction;
+  [API_ENDPOINT.EXPLAIN_LOG_RATE_SPIKES]: AiopsExplainLogRateSpikesApiAction;
 }

x-pack/plugins/aiops/kibana.json

@@ -9,7 +9,7 @@
   "description": "AIOps plugin maintained by ML team.",
   "server": true,
   "ui": true,
-  "requiredPlugins": [],
+  "requiredPlugins": ["data"],
   "optionalPlugins": [],
   "requiredBundles": ["kibanaReact"],
   "extraPublicDirs": ["common"]

x-pack/plugins/aiops/public/components/explain_log_rate_spikes/explain_log_rate_spikes.tsx

@@ -0,0 +1,49 @@
+/*
+ * 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, { useEffect, FC } from 'react';
+
+import { EuiBadge, EuiSpacer, EuiText } from '@elastic/eui';
+
+import type { DataView } from '@kbn/data-views-plugin/public';
+
+import { useStreamFetchReducer } from '../../hooks/use_stream_fetch_reducer';
+
+import { initialState, streamReducer } from './stream_reducer';
+
+/**
+ * ExplainLogRateSpikes props require a data view.
+ */
+export interface ExplainLogRateSpikesProps {
+  /** The data view to analyze. */
+  dataView: DataView;
+}
+
+export const ExplainLogRateSpikes: FC<ExplainLogRateSpikesProps> = ({ dataView }) => {
+  const { start, data, isRunning } = useStreamFetchReducer(
+    '/internal/aiops/explain_log_rate_spikes',
+    streamReducer,
+    initialState,
+    { index: dataView.title }
+  );
+
+  useEffect(() => {
+    start();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return (
+    <EuiText>
+      <h2>{dataView.title}</h2>
+      <p>{isRunning ? 'Loading fields ...' : 'Loaded all fields.'}</p>
+      <EuiSpacer size="xs" />
+      {data.fields.map((field) => (
+        <EuiBadge>{field}</EuiBadge>
+      ))}
+    </EuiText>
+  );
+};

x-pack/plugins/aiops/public/components/explain_log_rate_spikes/index.ts

@@ -0,0 +1,13 @@
+/*
+ * 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 type { ExplainLogRateSpikesProps } from './explain_log_rate_spikes';
+import { ExplainLogRateSpikes } from './explain_log_rate_spikes';
+
+// required for dynamic import using React.lazy()
+// eslint-disable-next-line import/no-default-export
+export default ExplainLogRateSpikes;