[ML] Explain log rate spikes: Page setup

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,45 @@
+/*
+ * 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';
+
+export interface ExplainLogRateSpikesProps {
+  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;

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

@@ -0,0 +1,37 @@
+/*
+ * 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 {
+  API_ACTION_NAME,
+  AiopsExplainLogRateSpikesApiAction,
+} from '../../../common/api/explain_log_rate_spikes';
+
+interface StreamState {
+  fields: string[];
+}
+
+export const initialState: StreamState = {
+  fields: [],
+};
+
+export function streamReducer(
+  state: StreamState,
+  action: AiopsExplainLogRateSpikesApiAction | AiopsExplainLogRateSpikesApiAction[]
+): StreamState {
+  if (Array.isArray(action)) {
+    return action.reduce(streamReducer, state);
+  }
+
+  switch (action.type) {
+    case API_ACTION_NAME.ADD_FIELDS:
+      return {
+        fields: [...state.fields, ...action.payload],
+      };
+    default:
+      return state;
+  }
+}