[Endpoint] Basic Functionality Alert List

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 type AlertData = Immutable<{
+  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/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,15 @@
+/*
+ * 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 } from '../../../../../common/types';
+
+interface ServerReturnedAlertsData {
+  readonly type: 'serverReturnedAlertsData';
+
+  readonly payload: AlertData[];
+}
+
+export type AlertAction = ServerReturnedAlertsData;

x-pack/plugins/endpoint/public/applications/endpoint/store/alerts/index.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.
+ */
+
+export { alertListReducer } from './reducer';
+export { AlertAction } from './action';
+export * from './types';

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

@@ -0,0 +1,28 @@
+/*
+ * 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 { AlertData } from '../../../../../common/types';
+import { GlobalState } from '../reducer';
+import { AppAction } from '../action';
+
+// TODO, move this somewhere
+type MiddlewareFactory = (
+  coreStart: CoreStart
+) => (
+  api: MiddlewareAPI<Dispatch<AppAction>, GlobalState>
+) => (next: Dispatch<AppAction>) => (action: AppAction) => unknown;
+
+export const alertMiddlewareFactory: MiddlewareFactory = coreStart => {
+  return store => next => async (action: AppAction) => {
+    next(action);
+    if (action.type === 'userNavigatedToPage' && action.payload === 'alertsPage') {
+      const response: AlertData[] = await coreStart.http.get('/api/endpoint/alerts');
+      store.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/alerts/types.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 { Immutable, AlertData } from '../../../../../common/types';
+
+export type AlertListState = Immutable<{
+  alerts: AlertData[];
+}>;

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,6 +8,7 @@ import { createStore, compose, applyMiddleware, Store } from 'redux';
 import { CoreStart } from 'kibana/public';
 import { appSagaFactory } from './saga';
 import { appReducer } from './reducer';
+import { alertMiddlewareFactory } from './alerts/middleware';
 
 export { GlobalState } from './reducer';
 
@@ -19,7 +20,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

@@ -5,12 +5,15 @@
  */
 import { combineReducers, Reducer } from 'redux';
 import { endpointListReducer, EndpointListState } from './endpoint_list';
-import { AppAction } from './actions';
+import { AppAction } from './action';
+import { AlertListState, alertListReducer } from './alerts';
 
 export interface GlobalState {
-  endpointList: EndpointListState;
+  readonly endpointList: EndpointListState;
+  readonly alertList: AlertListState;
 }
 
 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/actions.ts → x-pack/plugins/endpoint/public/applications/endpoint/store/routing/index.ts

@@ -4,6 +4,4 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { EndpointListAction } from './endpoint_list';
-
-export type AppAction = EndpointListAction;
+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 './reducer';
+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/view/alerts/index.tsx

@@ -0,0 +1,76 @@
+/*
+ * 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 { memo, useState, useMemo } from 'react';
+import React from 'react';
+import { EuiDataGrid } from '@elastic/eui';
+import { useSelector } from 'react-redux';
+import * as selectors from '../../store/selectors';
+import { usePageId } from '../use_page_id';
+
+export const AlertIndex = memo(() => {
+  usePageId('alertsPage');
+
+  const columns: Array<{ id: string }> = [
+    { id: 'alert_type' },
+    { id: 'event_type' },
+    { id: 'os' },
+    { id: 'ip_address' },
+    { id: 'host_name' },
+    { id: 'timestamp' },
+    { id: 'archived' },
+    { id: 'malware_score' },
+  ];
+
+  const [visibleColumns, setVisibleColumns] = useState(() => columns.map(({ id }) => id));
+
+  const json = useSelector(selectors.alertListData);
+
+  const renderCellValue = useMemo(() => {
+    return ({ rowIndex, columnId }: { rowIndex: number; columnId: string }) => {
+      if (json.length === 0) {
+        return null;
+      }
+
+      if (columnId === 'alert_type') {
+        return json[rowIndex].value.source.endgame.metadata.key;
+      } else if (columnId === 'event_type') {
+        return json[rowIndex].value.source.endgame.data.file_operation;
+      } else if (columnId === 'os') {
+        return json[rowIndex].value.source.host.os.name;
+      } else if (columnId === 'ip_address') {
+        return json[rowIndex].value.source.host.ip;
+      } else if (columnId === 'host_name') {
+        return json[rowIndex].value.source.host.hostname;
+      } else if (columnId === 'timestamp') {
+        return json[rowIndex].value.source.endgame.timestamp_utc;
+      } else if (columnId === 'archived') {
+        return null; // TODO change this once its available in backend
+      } else if (columnId === 'malware_score') {
+        return json[rowIndex].value.source.endgame.data.malware_classification.score;
+      }
+      return null;
+    };
+  }, [json]);
+
+  return (
+    <EuiDataGrid
+      aria-label="Alert List"
+      rowCount={json.length}
+      // Required. Sets up three columns, the last of which has a custom schema we later define down below.
+      // The second column B won't allow clicking in to see the content in a popup.
+      // The first column defines an starting width of 150px and prevents the user from resizing it
+      columns={columns}
+      // This allows you to initially hide columns. Users can still turn them on.
+      columnVisibility={{
+        visibleColumns,
+        setVisibleColumns,
+      }}
+      // Often used in combination with useEffect() to dynamically change the render.
+      renderCellValue={renderCellValue}
+    />
+  );
+});