address comments

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

@@ -6,7 +6,7 @@
 
 import uuid from 'uuid';
 import seedrandom from 'seedrandom';
-import { AlertEvent, EndpointEvent, EndpointMetadata, OSFields } from './types';
+import { AlertEvent, EndpointEvent, HostMetadata, OSFields } from './types';
 
 export type Event = AlertEvent | EndpointEvent;
 
@@ -94,7 +94,7 @@ export class EndpointDocGenerator {
     this.ip = this.randomArray(3, () => this.randomIP());
   }
 
-  public generateEndpointMetadata(ts = new Date().getTime()): EndpointMetadata {
+  public generateEndpointMetadata(ts = new Date().getTime()): HostMetadata {
     return {
       '@timestamp': ts,
       event: {

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

@@ -83,9 +83,9 @@ export interface AlertResultList {
   prev: string | null;
 }
 
-export interface EndpointResultList {
+export interface HostResultList {
   /* the endpoints restricted by the page size */
-  endpoints: EndpointMetadata[];
+  hosts: HostMetadata[];
   /* the total number of unique endpoints in the index */
   total: number;
   /* the page size requested */
@@ -243,7 +243,7 @@ interface AlertMetadata {
  */
 export type AlertData = AlertEvent & AlertMetadata;
 
-export type EndpointMetadata = Immutable<{
+export type HostMetadata = Immutable<{
   '@timestamp': number;
   event: {
     created: number;

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

@@ -11,6 +11,7 @@ import { I18nProvider, FormattedMessage } from '@kbn/i18n/react';
 import { Route, Switch, BrowserRouter } from 'react-router-dom';
 import { Provider } from 'react-redux';
 import { Store } from 'redux';
+import { useObservable } from 'react-use';
 import { KibanaContextProvider } from '../../../../../../src/plugins/kibana_react/public';
 import { RouteCapture } from './view/route_capture';
 import { EndpointPluginStartDependencies } from '../../plugin';
@@ -20,6 +21,7 @@ import { HostList } from './view/hosts';
 import { PolicyList } from './view/policy';
 import { PolicyDetails } from './view/policy';
 import { HeaderNavigation } from './components/header_nav';
+import { EuiThemeProvider } from '../../../../../legacy/common/eui_styled_components';
 
 /**
  * This module will be loaded asynchronously to reduce the bundle size of your plugin's main bundle.
@@ -48,43 +50,49 @@ interface RouterProps {
 }
 
 const AppRoot: React.FunctionComponent<RouterProps> = React.memo(
-  ({ basename, store, coreStart: { http, notifications }, depsStart: { data } }) => (
-    <Provider store={store}>
-      <I18nProvider>
-        <KibanaContextProvider services={{ http, notifications, data }}>
-          <BrowserRouter basename={basename}>
-            <RouteCapture>
-              <HeaderNavigation basename={basename} />
-              <Switch>
-                <Route
-                  exact
-                  path="/"
-                  render={() => (
-                    <h1 data-test-subj="welcomeTitle">
-                      <FormattedMessage
-                        id="xpack.endpoint.welcomeTitle"
-                        defaultMessage="Hello World"
-                      />
-                    </h1>
-                  )}
-                />
-                <Route path="/hosts" component={HostList} />
-                <Route path="/alerts" component={AlertIndex} />
-                <Route path="/policy" exact component={PolicyList} />
-                <Route path="/policy/:id" exact component={PolicyDetails} />
-                <Route
-                  render={() => (
-                    <FormattedMessage
-                      id="xpack.endpoint.notFound"
-                      defaultMessage="Page Not Found"
+  ({ basename, store, coreStart: { http, notifications, uiSettings }, depsStart: { data } }) => {
+    const isDarkMode = useObservable<boolean>(uiSettings.get$('theme:darkMode'));
+
+    return (
+      <Provider store={store}>
+        <I18nProvider>
+          <KibanaContextProvider services={{ http, notifications, data }}>
+            <EuiThemeProvider darkMode={isDarkMode}>
+              <BrowserRouter basename={basename}>
+                <RouteCapture>
+                  <HeaderNavigation basename={basename} />
+                  <Switch>
+                    <Route
+                      exact
+                      path="/"
+                      render={() => (
+                        <h1 data-test-subj="welcomeTitle">
+                          <FormattedMessage
+                            id="xpack.endpoint.welcomeTitle"
+                            defaultMessage="Hello World"
+                          />
+                        </h1>
+                      )}
+                    />
+                    <Route path="/hosts" component={HostList} />
+                    <Route path="/alerts" component={AlertIndex} />
+                    <Route path="/policy" exact component={PolicyList} />
+                    <Route path="/policy/:id" exact component={PolicyDetails} />
+                    <Route
+                      render={() => (
+                        <FormattedMessage
+                          id="xpack.endpoint.notFound"
+                          defaultMessage="Page Not Found"
+                        />
+                      )}
                     />
-                  )}
-                />
-              </Switch>
-            </RouteCapture>
-          </BrowserRouter>
-        </KibanaContextProvider>
-      </I18nProvider>
-    </Provider>
-  )
+                  </Switch>
+                </RouteCapture>
+              </BrowserRouter>
+            </EuiThemeProvider>
+          </KibanaContextProvider>
+        </I18nProvider>
+      </Provider>
+    );
+  }
 );

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

@@ -5,16 +5,16 @@
  */
 
 import { HostListPagination, ServerApiError } from '../../types';
-import { EndpointResultList, EndpointMetadata } from '../../../../../common/types';
+import { HostResultList, HostMetadata } from '../../../../../common/types';
 
 interface ServerReturnedHostList {
   type: 'serverReturnedHostList';
-  payload: EndpointResultList;
+  payload: HostResultList;
 }
 
 interface ServerReturnedHostDetails {
   type: 'serverReturnedHostDetails';
-  payload: EndpointMetadata;
+  payload: HostMetadata;
 }
 
 interface ServerFailedToReturnHostDetails {
@@ -27,8 +27,7 @@ interface UserPaginatedHostList {
   payload: HostListPagination;
 }
 
-// https://github.com/elastic/endpoint-app-team/issues/273
-
+// Why is FakeActionWithNoPayload here, see: https://github.com/elastic/endpoint-app-team/issues/273
 interface FakeActionWithNoPayload {
   type: 'fakeActionWithNoPayLoad';
 }

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

@@ -32,7 +32,7 @@ describe('HostList store concerns', () => {
 
     test('it creates default state', () => {
       expect(store.getState()).toEqual({
-        endpoints: [],
+        hosts: [],
         pageSize: 10,
         pageIndex: 0,
         total: 0,
@@ -52,7 +52,7 @@ describe('HostList store concerns', () => {
       });
 
       const currentState = store.getState();
-      expect(currentState.endpoints).toEqual(payload.endpoints);
+      expect(currentState.hosts).toEqual(payload.hosts);
       expect(currentState.pageSize).toEqual(payload.request_page_size);
       expect(currentState.pageIndex).toEqual(payload.request_page_index);
       expect(currentState.total).toEqual(payload.total);
@@ -67,7 +67,7 @@ describe('HostList store concerns', () => {
 
     test('it selects `hostListData`', () => {
       const currentState = store.getState();
-      expect(listData(currentState)).toEqual(currentState.endpoints);
+      expect(listData(currentState)).toEqual(currentState.hosts);
     });
   });
 });

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

@@ -8,7 +8,7 @@ import { applyMiddleware, createStore, Dispatch, Store } from 'redux';
 import { coreMock } from '../../../../../../../../src/core/public/mocks';
 import { History, createBrowserHistory } from 'history';
 import { hostListReducer, hostMiddlewareFactory } from './index';
-import { EndpointResultList } from '../../../../../common/types';
+import { HostResultList } from '../../../../../common/types';
 import { HostListState } from '../../types';
 import { AppAction } from '../action';
 import { listData } from './selectors';
@@ -25,7 +25,7 @@ describe('host list middleware', () => {
   let dispatch: Dispatch<AppAction>;
 
   let history: History<never>;
-  const getEndpointListApiResponse = (): EndpointResultList => {
+  const getEndpointListApiResponse = (): HostResultList => {
     return mockHostResultList({ request_page_size: 1, request_page_index: 1, total: 10 });
   };
   beforeEach(() => {
@@ -58,6 +58,6 @@ describe('host list middleware', () => {
         paging_properties: [{ page_index: 0 }, { page_size: 10 }],
       }),
     });
-    expect(listData(getState())).toEqual(apiResponse.endpoints);
+    expect(listData(getState())).toEqual(apiResponse.hosts);
   });
 });

x-pack/plugins/endpoint/public/applications/endpoint/store/hosts/mock_host_result_list.ts

@@ -4,14 +4,14 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { EndpointResultList } from '../../../../../common/types';
+import { HostResultList } from '../../../../../common/types';
 import { EndpointDocGenerator } from '../../../../../common/generate_data';
 
 export const mockHostResultList: (options?: {
   total?: number;
   request_page_size?: number;
   request_page_index?: number;
-}) => EndpointResultList = (options = {}) => {
+}) => HostResultList = (options = {}) => {
   const {
     total = 1,
     request_page_size: requestPageSize = 10,
@@ -24,13 +24,13 @@ export const mockHostResultList: (options?: {
   // total - numberToSkip is the count of non-skipped ones, but return no more than a pageSize, and no less than 0
   const actualCountToReturn = Math.max(Math.min(total - numberToSkip, requestPageSize), 0);
 
-  const endpoints = [];
+  const hosts = [];
   for (let index = 0; index < actualCountToReturn; index++) {
     const generator = new EndpointDocGenerator('seed');
-    endpoints.push(generator.generateEndpointMetadata());
+    hosts.push(generator.generateEndpointMetadata());
   }
-  const mock: EndpointResultList = {
-    endpoints,
+  const mock: HostResultList = {
+    hosts,
     total,
     request_page_size: requestPageSize,
     request_page_index: requestPageIndex,

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

@@ -10,7 +10,7 @@ import { AppAction } from '../action';
 
 const initialState = (): HostListState => {
   return {
-    endpoints: [],
+    hosts: [],
     pageSize: 10,
     pageIndex: 0,
     total: 0,
@@ -27,14 +27,14 @@ export const hostListReducer: Reducer<HostListState, AppAction> = (
 ) => {
   if (action.type === 'serverReturnedHostList') {
     const {
-      endpoints,
+      hosts,
       total,
       request_page_size: pageSize,
       request_page_index: pageIndex,
     } = action.payload;
     return {
       ...state,
-      endpoints,
+      hosts,
       total,
       pageSize,
       pageIndex,

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

@@ -8,7 +8,7 @@ import { createSelector } from 'reselect';
 import { Immutable } from '../../../../../common/types';
 import { HostListState, HostIndexUIQueryParams } from '../../types';
 
-export const listData = (state: HostListState) => state.endpoints;
+export const listData = (state: HostListState) => state.hosts;
 
 export const pageIndex = (state: HostListState) => state.pageIndex;
 

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

@@ -7,7 +7,7 @@
 import { Dispatch, MiddlewareAPI } from 'redux';
 import { IIndexPattern } from 'src/plugins/data/public';
 import {
-  EndpointMetadata,
+  HostMetadata,
   AlertData,
   AlertResultList,
   Immutable,
@@ -26,13 +26,13 @@ export type MiddlewareFactory<S = GlobalState> = (
 ) => (next: Dispatch<AppAction>) => (action: AppAction) => unknown;
 
 export interface HostListState {
-  endpoints: EndpointMetadata[];
-  total: number;
+  hosts: HostMetadata[];
   pageSize: number;
   pageIndex: number;
+  total: number;
   loading: boolean;
   detailsError?: ServerApiError;
-  details?: Immutable<EndpointMetadata>;
+  details?: Immutable<HostMetadata>;
   location?: Immutable<EndpointAppLocation>;
 }
 

x-pack/plugins/endpoint/public/applications/endpoint/view/formatted_date_time.tsx

@@ -8,9 +8,9 @@ import React from 'react';
 import { FormattedDate, FormattedTime, FormattedRelative } from '@kbn/i18n/react';
 
 export const FormattedDateAndTime: React.FC<{ date: Date }> = ({ date }) => {
-  // If date is greater than or equal to 24h (ago), then show it as a date
+  // If date is greater than or equal to 1h (ago), then show it as a date
   // else, show it as relative to "now"
-  return Date.now() - date.getTime() >= 8.64e7 ? (
+  return Date.now() - date.getTime() >= 3.6e6 ? (
     <>
       <FormattedDate value={date} year="numeric" month="short" day="2-digit" />
       {' @'}

x-pack/plugins/endpoint/public/applications/endpoint/view/hosts/details.tsx

@@ -23,20 +23,20 @@ import styled from 'styled-components';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { useKibana } from '../../../../../../../../src/plugins/kibana_react/public';
-import { EndpointMetadata } from '../../../../../common/types';
+import { HostMetadata } from '../../../../../common/types';
 import { useHostListSelector } from './hooks';
 import { urlFromQueryParams } from './url_from_query_params';
 import { FormattedDateAndTime } from '../formatted_date_time';
 import { uiQueryParams, detailsData, detailsError } from './../../store/hosts/selectors';
 
-const HostDetails = memo(({ details }: { details: EndpointMetadata }) => {
-  const HostIds = styled(EuiListGroupItem)`
-    margin-top: 0;
-    .euiListGroupItem__text {
-      padding: 0;
-    }
-  `;
+const HostIds = styled(EuiListGroupItem)`
+  margin-top: 0;
+  .euiListGroupItem__text {
+    padding: 0;
+  }
+`;
 
+const HostDetails = memo(({ details }: { details: HostMetadata }) => {
   const detailsResultsUpper = useMemo(() => {
     return [
       {