Basic Functionality Alert List (#55800)

* sets up initial grid and data type

* data feeds in from backend but doesnt update

* sample data feeding in correctly

* Fix combineReducers issue by importing Redux type from 'redux' package

* Add usePageId hook that fires action when user navigates to page

* Strict typing for middleware

* addresses comments and uses better types

* move types to common/types.ts

* Move types to endpoint/types.ts, address PR comments

blah 2

Co-authored-by: Pedro Jaramillo <[email protected]>

Author: dplumlee

x-pack/plugins/endpoint/common/types.ts

@@ -4,6 +4,24 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+/**
+ * A deep readonly type that will make all children of a given object readonly recursively
+ */
+export type Immutable<T> = T extends undefined | null | boolean | string | number
+  ? T
+  : T extends Array<infer U>
+  ? ImmutableArray<U>
+  : T extends Map<infer K, infer V>
+  ? ImmutableMap<K, V>
+  : T extends Set<infer M>
+  ? ImmutableSet<M>
+  : ImmutableObject<T>;
+
+export type ImmutableArray<T> = ReadonlyArray<Immutable<T>>;
+export type ImmutableMap<K, V> = ReadonlyMap<Immutable<K>, Immutable<V>>;
+export type ImmutableSet<T> = ReadonlySet<Immutable<T>>;
+export type ImmutableObject<T> = { readonly [K in keyof T]: Immutable<T[K]> };
+
 export class EndpointAppConstants {
   static ENDPOINT_INDEX_NAME = 'endpoint-agent*';
 }
@@ -44,3 +62,37 @@ export interface EndpointMetadata {
     };
   };
 }
+
+export interface AlertData {
+  value: {
+    source: {
+      endgame: {
+        data: {
+          file_operation: string;
+          malware_classification: {
+            score: number;
+          };
+        };
+        metadata: {
+          key: string;
+        };
+        timestamp_utc: Date;
+      };
+      labels: {
+        endpoint_id: string;
+      };
+      host: {
+        hostname: string;
+        ip: string;
+        os: {
+          name: string;
+        };
+      };
+    };
+  };
+}
+
+/**
+ * The PageId type is used for the payload when firing userNavigatedToPage actions
+ */
+export type PageId = 'alertsPage' | 'endpointListPage';

x-pack/plugins/endpoint/public/applications/endpoint/index.tsx

@@ -12,6 +12,7 @@ import { Route, BrowserRouter, Switch } from 'react-router-dom';
 import { Provider } from 'react-redux';
 import { Store } from 'redux';
 import { appStoreFactory } from './store';
+import { AlertIndex } from './view/alerts';
 
 /**
  * This module will be loaded asynchronously to reduce the bundle size of your plugin's main bundle.
@@ -64,6 +65,7 @@ const AppRoot: React.FunctionComponent<RouterProps> = React.memo(({ basename, st
               );
             }}
           />
+          <Route path="/alerts" component={AlertIndex} />
           <Route
             render={() => (
               <FormattedMessage id="xpack.endpoint.notFound" defaultMessage="Page Not Found" />

x-pack/plugins/endpoint/public/applications/endpoint/lib/saga.ts

@@ -5,7 +5,7 @@
  */
 
 import { AnyAction, Dispatch, Middleware, MiddlewareAPI } from 'redux';
-import { GlobalState } from '../store';
+import { GlobalState } from '../types';
 
 interface QueuedAction<TAction = AnyAction> {
   /**

x-pack/plugins/endpoint/public/applications/endpoint/store/action.ts

@@ -0,0 +1,11 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { EndpointListAction } from './endpoint_list';
+import { AlertAction } from './alerts';
+import { RoutingAction } from './routing';
+
+export type AppAction = EndpointListAction | AlertAction | RoutingAction;

x-pack/plugins/endpoint/public/applications/endpoint/store/alerts/action.ts

@@ -0,0 +1,14 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { AlertData, Immutable } from '../../../../../common/types';
+
+type ServerReturnedAlertsData = Immutable<{
+  type: 'serverReturnedAlertsData';
+  payload: AlertData[];
+}>;
+
+export type AlertAction = ServerReturnedAlertsData;

x-pack/plugins/endpoint/public/applications/endpoint/store/actions.ts renamed to x-pack/plugins/endpoint/public/applications/endpoint/store/alerts/index.ts

@@ -4,6 +4,5 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { EndpointListAction } from './endpoint_list';
-
-export type AppAction = EndpointListAction;
+export { alertListReducer } from './reducer';
+export { AlertAction } from './action';

x-pack/plugins/endpoint/public/applications/endpoint/store/alerts/middleware.ts

@@ -0,0 +1,19 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { AlertData, ImmutableArray } from '../../../../../common/types';
+import { AppAction } from '../action';
+import { MiddlewareFactory } from '../../types';
+
+export const alertMiddlewareFactory: MiddlewareFactory = coreStart => {
+  return api => next => async (action: AppAction) => {
+    next(action);
+    if (action.type === 'userNavigatedToPage' && action.payload === 'alertsPage') {
+      const response: ImmutableArray<AlertData> = await coreStart.http.get('/api/endpoint/alerts');
+      api.dispatch({ type: 'serverReturnedAlertsData', payload: response });
+    }
+  };
+};

x-pack/plugins/endpoint/public/applications/endpoint/store/alerts/reducer.ts

@@ -0,0 +1,29 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { Reducer } from 'redux';
+import { AlertListState } from '../../types';
+import { AppAction } from '../action';
+
+const initialState = (): AlertListState => {
+  return {
+    alerts: [],
+  };
+};
+
+export const alertListReducer: Reducer<AlertListState, AppAction> = (
+  state = initialState(),
+  action
+) => {
+  if (action.type === 'serverReturnedAlertsData') {
+    return {
+      ...state,
+      alerts: action.payload,
+    };
+  }
+
+  return state;
+};

x-pack/plugins/endpoint/public/applications/endpoint/store/alerts/selectors.ts

@@ -0,0 +1,9 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { AlertListState } from '../../types';
+
+export const alertListData = (state: AlertListState) => state.alerts;

x-pack/plugins/endpoint/public/applications/endpoint/store/endpoint_list/reducer.ts

@@ -4,8 +4,9 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import { Reducer } from 'redux';
 import { EndpointListState } from './types';
-import { EndpointListAction } from './action';
+import { AppAction } from '../action';
 
 const initialState = (): EndpointListState => {
   return {
@@ -16,7 +17,10 @@ const initialState = (): EndpointListState => {
   };
 };
 
-export const endpointListReducer = (state = initialState(), action: EndpointListAction) => {
+export const endpointListReducer: Reducer<EndpointListState, AppAction> = (
+  state = initialState(),
+  action
+) => {
   if (action.type === 'serverReturnedEndpointList') {
     return {
       ...state,