[Endpoint] Policy List UI route and initial view

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

@@ -95,4 +95,4 @@ export interface AlertData {
 /**
  * The PageId type is used for the payload when firing userNavigatedToPage actions
  */
-export type PageId = 'alertsPage' | 'endpointListPage';
+export type PageId = 'alertsPage' | 'policyListPage' | 'endpointListPage';

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

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

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

@@ -7,5 +7,6 @@
 import { EndpointListAction } from './endpoint_list';
 import { AlertAction } from './alerts';
 import { RoutingAction } from './routing';
+import { PolicyListAction } from './policy_list/action';
 
-export type AppAction = EndpointListAction | AlertAction | RoutingAction;
+export type AppAction = EndpointListAction | AlertAction | RoutingAction | PolicyListAction;

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

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

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

@@ -0,0 +1,23 @@
+/*
+ * 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.
+ */
+
+interface ServerReturnedPolicyListData {
+  type: 'serverReturnedPolicyListData';
+  payload: {
+    policyItems: object[];
+    // tbd...
+  };
+}
+
+interface UserPaginatedPolicyListTable {
+  type: 'userPaginatedPolicyListTable';
+  payload: {
+    pageSize: number;
+    pageIndex: number;
+  };
+}
+
+export type PolicyListAction = ServerReturnedPolicyListData | UserPaginatedPolicyListTable;

x-pack/plugins/endpoint/public/applications/endpoint/store/policy_list/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 { policyListReducer } from './reducer';
+export { PolicyListAction } from './action';
+export { policyListMiddlewareFactory } from './middleware';

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

@@ -0,0 +1,21 @@
+/*
+ * 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 { MiddlewareFactory } from '../../types';
+
+export const policyListMiddlewareFactory: MiddlewareFactory = coreStart => {
+  return ({ getState, dispatch }) => next => async action => {
+    next(action);
+
+    if (
+      (action.type === 'userNavigatedToPage' && action.payload === 'policyListPage') ||
+      action.type === 'userPaginatedPolicyListTable'
+    ) {
+      // load data from API
+      // Refactor tracked via: https://github.com/elastic/endpoint-app-team/issues/150
+    }
+  };
+};

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

@@ -0,0 +1,43 @@
+/*
+ * 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 { PolicyListState } from '../../types';
+import { AppAction } from '../action';
+
+const initialPolicyListState = (): PolicyListState => {
+  return {
+    policyItems: [],
+    pageIndex: 0,
+    pageSize: 0,
+    total: 0,
+  };
+};
+
+export const policyListReducer: Reducer<PolicyListState, AppAction> = (
+  state = initialPolicyListState(),
+  action
+) => {
+  if (action.type === 'serverReturnedPolicyListData') {
+    return {
+      ...state,
+      policyItems: action.payload.policyItems,
+    };
+  }
+
+  if (action.type === 'userPaginatedPolicyListTable') {
+    return {
+      ...state,
+      ...action.payload,
+    };
+  }
+
+  if (action.type === 'userNavigatedFromPage' && action.payload === 'policyListPage') {
+    return initialPolicyListState();
+  }
+
+  return state;
+};

x-pack/plugins/endpoint/public/applications/endpoint/store/policy_list/selectors.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 { PolicyListState } from '../../types';
+
+export const selectPolicyItems = (state: PolicyListState) => state.policyItems;
+
+export const selectPageIndex = (state: PolicyListState) => state.pageIndex;
+
+export const selectPageSize = (state: PolicyListState) => state.pageSize;
+
+export const selectTotal = (state: PolicyListState) => state.total;

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

@@ -8,8 +8,10 @@ import { endpointListReducer } from './endpoint_list';
 import { AppAction } from './action';
 import { alertListReducer } from './alerts';
 import { GlobalState } from '../types';
+import { policyListReducer } from './policy_list';
 
 export const appReducer: Reducer<GlobalState, AppAction> = combineReducers({
   endpointList: endpointListReducer,
   alertList: alertListReducer,
+  policyList: policyListReducer,
 });

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

@@ -11,4 +11,9 @@ interface UserNavigatedToPage {
   readonly payload: PageId;
 }
 
-export type RoutingAction = UserNavigatedToPage;
+interface UserNavigatedFromPage {
+  readonly type: 'userNavigatedFromPage';
+  readonly payload: PageId;
+}
+
+export type RoutingAction = UserNavigatedToPage | UserNavigatedFromPage;

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

@@ -20,7 +20,22 @@ export type AlertListState = Immutable<{
   alerts: AlertData[];
 }>;
 
+/**
+ * Policy list store state
+ */
+export interface PolicyListState {
+  /** Array of policy items  */
+  policyItems: object[];
+  /** total number of policies */
+  total: number;
+  /** Number of policies per page */
+  pageSize: number;
+  /** page number (zero based) */
+  pageIndex: number;
+}
+
 export interface GlobalState {
   readonly endpointList: EndpointListState;
   readonly alertList: AlertListState;
+  readonly policyList: PolicyListState;
 }

x-pack/plugins/endpoint/public/applications/endpoint/view/policy/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 * from './policy_list';

x-pack/plugins/endpoint/public/applications/endpoint/view/policy/policy_hooks.ts

@@ -0,0 +1,12 @@
+/*
+ * 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 { useSelector } from 'react-redux';
+import { GlobalState, PolicyListState } from '../../types';
+
+export function usePolicyListSelector<TSelected>(selector: (state: PolicyListState) => TSelected) {
+  return useSelector((state: GlobalState) => selector(state.policyList));
+}

x-pack/plugins/endpoint/public/applications/endpoint/view/policy/policy_list.tsx

@@ -0,0 +1,151 @@
+/*
+ * 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 React, { useCallback, useMemo } from 'react';
+import {
+  EuiPage,
+  EuiPageBody,
+  EuiPageContent,
+  EuiPageContentBody,
+  EuiPageContentHeader,
+  EuiPageContentHeaderSection,
+  EuiTitle,
+  EuiBasicTable,
+} from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import { FormattedMessage } from '@kbn/i18n/react';
+import { useDispatch } from 'react-redux';
+import { usePageId } from '../use_page_id';
+import {
+  selectPageIndex,
+  selectPageSize,
+  selectPolicyItems,
+  selectTotal,
+} from '../../store/policy_list/selectors';
+import { usePolicyListSelector } from './policy_hooks';
+import { PolicyListAction } from '../../store/policy_list';
+
+interface TTableChangeCallbackArguments {
+  page: { index: number; size: number };
+}
+
+export const PolicyList = React.memo(() => {
+  usePageId('policyListPage');
+
+  const dispatch = useDispatch<(action: PolicyListAction) => void>();
+  const policyItems = usePolicyListSelector(selectPolicyItems);
+  const pageIndex = usePolicyListSelector(selectPageIndex);
+  const pageSize = usePolicyListSelector(selectPageSize);
+  const totalItemCount = usePolicyListSelector(selectTotal);
+  const loading = true;
+
+  const paginationSetup = useMemo(() => {
+    return {
+      pageIndex,
+      pageSize,
+      totalItemCount,
+      pageSizeOptions: [10, 20, 50],
+      hidePerPageOptions: false,
+    };
+  }, [pageIndex, pageSize, totalItemCount]);
+
+  const handleTableChange = useCallback(
+    ({ page: { index, size } }: TTableChangeCallbackArguments) => {
+      dispatch({
+        type: 'userPaginatedPolicyListTable',
+        payload: {
+          pageIndex: index,
+          pageSize: size,
+        },
+      });
+    },
+    [dispatch]
+  );
+
+  const columns = useMemo(
+    () => [
+      {
+        field: 'name',
+        name: i18n.translate('xpack.endpoint.policyList.nameField', {
+          defaultMessage: 'Policy Name',
+        }),
+      },
+      {
+        field: 'total',
+        name: i18n.translate('xpack.endpoint.policyList.totalField', {
+          defaultMessage: 'Total',
+        }),
+      },
+      {
+        field: 'pending',
+        name: i18n.translate('xpack.endpoint.policyList.pendingField', {
+          defaultMessage: 'Pending',
+        }),
+      },
+      {
+        field: 'Failed',
+        name: i18n.translate('xpack.endpoint.policyList.failedField', {
+          defaultMessage: 'Failed',
+        }),
+      },
+      {
+        field: 'created_by',
+        name: i18n.translate('xpack.endpoint.policyList.createdByField', {
+          defaultMessage: 'Created By',
+        }),
+      },
+      {
+        field: 'created',
+        name: i18n.translate('xpack.endpoint.policyList.createdField', {
+          defaultMessage: 'Created',
+        }),
+      },
+      {
+        field: 'updated_by',
+        name: i18n.translate('xpack.endpoint.policyList.updatedByField', {
+          defaultMessage: 'Last Updated By',
+        }),
+      },
+      {
+        field: 'updated',
+        name: i18n.translate('xpack.endpoint.policyList.updatedField', {
+          defaultMessage: 'Last Updated',
+        }),
+      },
+    ],
+    []
+  );
+
+  return (
+    <EuiPage>
+      <EuiPageBody>
+        <EuiPageContent>
+          <EuiPageContentHeader>
+            <EuiPageContentHeaderSection>
+              <EuiTitle>
+                <h2 data-test-subj="policyViewTitle">
+                  <FormattedMessage
+                    id="xpack.endpoint.policyList.viewTitle"
+                    defaultMessage="Policies"
+                  />
+                </h2>
+              </EuiTitle>
+            </EuiPageContentHeaderSection>
+          </EuiPageContentHeader>
+          <EuiPageContentBody>
+            <EuiBasicTable
+              items={policyItems}
+              columns={columns}
+              loading={loading}
+              pagination={paginationSetup}
+              onChange={handleTableChange}
+            />
+          </EuiPageContentBody>
+        </EuiPageContent>
+      </EuiPageBody>
+    </EuiPage>
+  );
+});