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 <peluja1012@gmail.com>

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 → 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,

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

@@ -8,8 +8,7 @@ import { createStore, compose, applyMiddleware, Store } from 'redux';
 import { CoreStart } from 'kibana/public';
 import { appSagaFactory } from './saga';
 import { appReducer } from './reducer';
-
-export { GlobalState } from './reducer';
+import { alertMiddlewareFactory } from './alerts/middleware';
 
 const composeWithReduxDevTools = (window as any).__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
   ? (window as any).__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({ name: 'EndpointApp' })
@@ -19,7 +18,9 @@ export const appStoreFactory = (coreStart: CoreStart): [Store, () => void] => {
   const sagaReduxMiddleware = appSagaFactory(coreStart);
   const store = createStore(
     appReducer,
-    composeWithReduxDevTools(applyMiddleware(sagaReduxMiddleware))
+    composeWithReduxDevTools(
+      applyMiddleware(alertMiddlewareFactory(coreStart), appSagaFactory(coreStart))
+    )
   );
 
   sagaReduxMiddleware.start();

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

@@ -4,13 +4,12 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 import { combineReducers, Reducer } from 'redux';
-import { endpointListReducer, EndpointListState } from './endpoint_list';
-import { AppAction } from './actions';
-
-export interface GlobalState {
-  endpointList: EndpointListState;
-}
+import { endpointListReducer } from './endpoint_list';
+import { AppAction } from './action';
+import { alertListReducer } from './alerts';
+import { GlobalState } from '../types';
 
 export const appReducer: Reducer<GlobalState, AppAction> = combineReducers({
   endpointList: endpointListReducer,
+  alertList: alertListReducer,
 });

x-pack/plugins/endpoint/public/applications/endpoint/store/routing/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 { PageId } from '../../../../../common/types';
+
+interface UserNavigatedToPage {
+  readonly type: 'userNavigatedToPage';
+  readonly payload: PageId;
+}
+
+export type RoutingAction = UserNavigatedToPage;

x-pack/plugins/endpoint/public/applications/endpoint/store/routing/index.ts

@@ -0,0 +1,7 @@
+/*
+ * 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.
+ */
+
+export { RoutingAction } from './action';

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

@@ -0,0 +1,31 @@
+/*
+ * 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 { GlobalState } from '../types';
+import * as alertListSelectors from './alerts/selectors';
+
+export const alertListData = composeSelectors(
+  alertListStateSelector,
+  alertListSelectors.alertListData
+);
+
+/**
+ * Returns the alert list state from within Global State
+ */
+function alertListStateSelector(state: GlobalState) {
+  return state.alertList;
+}
+
+/**
+ * Calls the `secondSelector` with the result of the `selector`. Use this when re-exporting a
+ * concern-specific selector. `selector` should return the concern-specific state.
+ */
+function composeSelectors<OuterState, InnerState, ReturnValue>(
+  selector: (state: OuterState) => InnerState,
+  secondSelector: (state: InnerState) => ReturnValue
+): (state: OuterState) => ReturnValue {
+  return state => secondSelector(selector(state));
+}

x-pack/plugins/endpoint/public/applications/endpoint/types.ts

@@ -0,0 +1,26 @@
+/*
+ * 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 { Dispatch, MiddlewareAPI } from 'redux';
+import { CoreStart } from 'kibana/public';
+import { Immutable, AlertData } from '../../../common/types';
+import { EndpointListState } from './store/endpoint_list';
+import { AppAction } from './store/action';
+
+export type MiddlewareFactory = (
+  coreStart: CoreStart
+) => (
+  api: MiddlewareAPI<Dispatch<AppAction>, GlobalState>
+) => (next: Dispatch<AppAction>) => (action: AppAction) => unknown;
+
+export type AlertListState = Immutable<{
+  alerts: AlertData[];
+}>;
+
+export interface GlobalState {
+  readonly endpointList: EndpointListState;
+  readonly alertList: AlertListState;
+}