change endpoint to hosts

x-pack/plugins/security_solution/public/management/common/constants.ts

@@ -10,7 +10,7 @@ import { SecurityPageName } from '../../app/types';
 // --[ ROUTING ]---------------------------------------------------------------------------
 export const MANAGEMENT_APP_ID = `${APP_ID}:${SecurityPageName.management}`;
 export const MANAGEMENT_ROUTING_ROOT_PATH = '';
-export const MANAGEMENT_ROUTING_ENDPOINTS_PATH = `${MANAGEMENT_ROUTING_ROOT_PATH}/:tabName(${ManagementSubTab.endpoints})`;
+export const MANAGEMENT_ROUTING_HOSTS_PATH = `${MANAGEMENT_ROUTING_ROOT_PATH}/:tabName(${ManagementSubTab.hosts})`;
 export const MANAGEMENT_ROUTING_POLICIES_PATH = `${MANAGEMENT_ROUTING_ROOT_PATH}/:tabName(${ManagementSubTab.policies})`;
 export const MANAGEMENT_ROUTING_POLICY_DETAILS_PATH = `${MANAGEMENT_ROUTING_ROOT_PATH}/:tabName(${ManagementSubTab.policies})/:policyId`;
 
@@ -21,5 +21,5 @@ export const MANAGEMENT_STORE_GLOBAL_NAMESPACE: ManagementStoreGlobalNamespace =
 export const MANAGEMENT_STORE_POLICY_LIST_NAMESPACE = 'policyList';
 /** Namespace within the Management state where policy details state is maintained */
 export const MANAGEMENT_STORE_POLICY_DETAILS_NAMESPACE = 'policyDetails';
-/** Namespace within the Management state where endpoints state is maintained */
-export const MANAGEMENT_STORE_ENDPOINTS_NAMESPACE = 'endpoints';
+/** Namespace within the Management state where hosts state is maintained */
+export const MANAGEMENT_STORE_HOSTS_NAMESPACE = 'hosts';

x-pack/plugins/security_solution/public/management/common/routing.ts

@@ -10,7 +10,7 @@ import { generatePath } from 'react-router-dom';
 import querystring from 'querystring';
 
 import {
-  MANAGEMENT_ROUTING_ENDPOINTS_PATH,
+  MANAGEMENT_ROUTING_HOSTS_PATH,
   MANAGEMENT_ROUTING_POLICIES_PATH,
   MANAGEMENT_ROUTING_POLICY_DETAILS_PATH,
 } from './constants';
@@ -32,11 +32,11 @@ const querystringStringify: <ExpectedType extends object, ArgType>(
 ) => string = querystring.stringify;
 
 /** Make `selected_host` required */
-type EndpointDetailsUrlProps = Omit<HostIndexUIQueryParams, 'selected_host'> &
+type HostDetailsUrlProps = Omit<HostIndexUIQueryParams, 'selected_host'> &
   Required<Pick<HostIndexUIQueryParams, 'selected_host'>>;
 
-export const getEndpointListPath = (
-  props: { name: 'default' | 'endpointList' } & HostIndexUIQueryParams,
+export const getHostListPath = (
+  props: { name: 'default' | 'hostList' } & HostIndexUIQueryParams,
   search?: string
 ) => {
   const { name, ...queryParams } = props;
@@ -45,29 +45,27 @@ export const getEndpointListPath = (
   );
   const urlSearch = `${urlQueryParams && !isEmpty(search) ? '&' : ''}${search ?? ''}`;
 
-  if (name === 'endpointList') {
-    return `${generatePath(MANAGEMENT_ROUTING_ENDPOINTS_PATH, {
-      tabName: ManagementSubTab.endpoints,
+  if (name === 'hostList') {
+    return `${generatePath(MANAGEMENT_ROUTING_HOSTS_PATH, {
+      tabName: ManagementSubTab.hosts,
     })}${appendSearch(`${urlQueryParams ? `${urlQueryParams}${urlSearch}` : urlSearch}`)}`;
   }
   return `${appendSearch(`${urlQueryParams ? `${urlQueryParams}${urlSearch}` : urlSearch}`)}`;
 };
 
-export const getEndpointDetailsPath = (
-  props: { name: 'endpointDetails' | 'endpointPolicyResponse' } & EndpointDetailsUrlProps,
+export const getHostDetailsPath = (
+  props: { name: 'hostDetails' | 'hostPolicyResponse' } & HostDetailsUrlProps,
   search?: string
 ) => {
   const { name, ...queryParams } = props;
-  queryParams.show = (props.name === 'endpointPolicyResponse'
+  queryParams.show = (props.name === 'hostPolicyResponse'
     ? 'policy_response'
     : '') as HostIndexUIQueryParams['show'];
-  const urlQueryParams = querystringStringify<EndpointDetailsUrlProps, typeof queryParams>(
-    queryParams
-  );
+  const urlQueryParams = querystringStringify<HostDetailsUrlProps, typeof queryParams>(queryParams);
   const urlSearch = `${urlQueryParams && !isEmpty(search) ? '&' : ''}${search ?? ''}`;
 
-  return `${generatePath(MANAGEMENT_ROUTING_ENDPOINTS_PATH, {
-    tabName: ManagementSubTab.endpoints,
+  return `${generatePath(MANAGEMENT_ROUTING_HOSTS_PATH, {
+    tabName: ManagementSubTab.hosts,
   })}${appendSearch(`${urlQueryParams ? `${urlQueryParams}${urlSearch}` : urlSearch}`)}`;
 };
 

x-pack/plugins/security_solution/public/management/components/management_page_view.tsx

@@ -11,15 +11,15 @@ import { PageView, PageViewProps } from '../../common/components/endpoint/page_v
 import { ManagementSubTab } from '../types';
 import { SecurityPageName } from '../../app/types';
 import { useFormatUrl } from '../../common/components/link_to';
-import { getEndpointListPath, getPoliciesPath } from '../common/routing';
+import { getHostListPath, getPoliciesPath } from '../common/routing';
 import { useNavigateByRouterEventHandler } from '../../common/hooks/endpoint/use_navigate_by_router_event_handler';
 
 export const ManagementPageView = memo<Omit<PageViewProps, 'tabs'>>((options) => {
   const { formatUrl, search } = useFormatUrl(SecurityPageName.management);
   const { tabName } = useParams<{ tabName: ManagementSubTab }>();
 
   const goToEndpoint = useNavigateByRouterEventHandler(
-    getEndpointListPath({ name: 'endpointList' }, search)
+    getHostListPath({ name: 'hostList' }, search)
   );
 
   const goToPolicies = useNavigateByRouterEventHandler(getPoliciesPath(search));
@@ -31,11 +31,11 @@ export const ManagementPageView = memo<Omit<PageViewProps, 'tabs'>>((options) =>
     return [
       {
         name: i18n.translate('xpack.securitySolution.managementTabs.endpoints', {
-          defaultMessage: 'Endpoints',
+          defaultMessage: 'Hosts',
         }),
-        id: ManagementSubTab.endpoints,
-        isSelected: tabName === ManagementSubTab.endpoints,
-        href: formatUrl(getEndpointListPath({ name: 'endpointList' })),
+        id: ManagementSubTab.hosts,
+        isSelected: tabName === ManagementSubTab.hosts,
+        href: formatUrl(getHostListPath({ name: 'hostList' })),
         onClick: goToEndpoint,
       },
       {

x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/index.tsx

@@ -7,7 +7,7 @@
 import { Switch, Route } from 'react-router-dom';
 import React, { memo } from 'react';
 import { HostList } from './view';
-import { MANAGEMENT_ROUTING_ENDPOINTS_PATH } from '../../common/constants';
+import { MANAGEMENT_ROUTING_HOSTS_PATH } from '../../common/constants';
 import { NotFoundPage } from '../../../app/404';
 
 /**
@@ -16,7 +16,7 @@ import { NotFoundPage } from '../../../app/404';
 export const EndpointsContainer = memo(() => {
   return (
     <Switch>
-      <Route path={MANAGEMENT_ROUTING_ENDPOINTS_PATH} exact component={HostList} />
+      <Route path={MANAGEMENT_ROUTING_HOSTS_PATH} exact component={HostList} />
       <Route path="*" component={NotFoundPage} />
     </Switch>
   );

x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/store/host_pagination.test.ts

@@ -24,7 +24,7 @@ import {
   MiddlewareActionSpyHelper,
   createSpyMiddleware,
 } from '../../../../common/store/test_utils';
-import { getEndpointListPath } from '../../../common/routing';
+import { getHostListPath } from '../../../common/routing';
 
 describe('host list pagination: ', () => {
   let fakeCoreStart: jest.Mocked<CoreStart>;
@@ -56,7 +56,7 @@ describe('host list pagination: ', () => {
     queryParams = () => uiQueryParams(store.getState());
 
     historyPush = (nextQueryParams: HostIndexUIQueryParams): void => {
-      return history.push(getEndpointListPath({ name: 'endpointList', ...nextQueryParams }));
+      return history.push(getHostListPath({ name: 'hostList', ...nextQueryParams }));
     };
   });
 
@@ -70,7 +70,7 @@ describe('host list pagination: ', () => {
         type: 'userChangedUrl',
         payload: {
           ...history.location,
-          pathname: getEndpointListPath({ name: 'endpointList' }),
+          pathname: getHostListPath({ name: 'hostList' }),
         },
       });
       await waitForAction('serverReturnedHostList');

x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/store/middleware.test.ts

@@ -21,7 +21,7 @@ import { listData } from './selectors';
 import { HostState } from '../types';
 import { hostListReducer } from './reducer';
 import { hostMiddlewareFactory } from './middleware';
-import { getEndpointListPath } from '../../../common/routing';
+import { getHostListPath } from '../../../common/routing';
 
 describe('host list middleware', () => {
   let fakeCoreStart: jest.Mocked<CoreStart>;
@@ -60,7 +60,7 @@ describe('host list middleware', () => {
       type: 'userChangedUrl',
       payload: {
         ...history.location,
-        pathname: getEndpointListPath({ name: 'endpointList' }),
+        pathname: getHostListPath({ name: 'hostList' }),
       },
     });
     await waitForAction('serverReturnedHostList');

x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/store/selectors.ts

@@ -15,7 +15,7 @@ import {
   HostPolicyResponseActionStatus,
 } from '../../../../../common/endpoint/types';
 import { HostState, HostIndexUIQueryParams } from '../types';
-import { MANAGEMENT_ROUTING_ENDPOINTS_PATH } from '../../../common/constants';
+import { MANAGEMENT_ROUTING_HOSTS_PATH } from '../../../common/constants';
 
 const PAGE_SIZES = Object.freeze([10, 20, 50]);
 
@@ -114,7 +114,7 @@ export const policyResponseError = (state: Immutable<HostState>) => state.policy
 export const isOnHostPage = (state: Immutable<HostState>) => {
   return (
     matchPath(state.location?.pathname ?? '', {
-      path: MANAGEMENT_ROUTING_ENDPOINTS_PATH,
+      path: MANAGEMENT_ROUTING_HOSTS_PATH,
       exact: true,
     }) !== null
   );

x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/details/host_details.tsx

@@ -26,7 +26,7 @@ import { POLICY_STATUS_TO_HEALTH_COLOR } from '../host_constants';
 import { FormattedDateAndTime } from '../../../../../common/components/endpoint/formatted_date_time';
 import { useNavigateByRouterEventHandler } from '../../../../../common/hooks/endpoint/use_navigate_by_router_event_handler';
 import { LinkToApp } from '../../../../../common/components/endpoint/link_to_app';
-import { getEndpointDetailsPath, getPolicyDetailPath } from '../../../../common/routing';
+import { getHostDetailsPath, getPolicyDetailPath } from '../../../../common/routing';
 import { SecurityPageName } from '../../../../../app/types';
 import { useFormatUrl } from '../../../../../common/components/link_to';
 import { AgentDetailsReassignConfigAction } from '../../../../../../../ingest_manager/public';
@@ -84,14 +84,14 @@ export const HostDetails = memo(({ details }: { details: HostMetadata }) => {
     const { selected_host, show, ...currentUrlParams } = queryParams;
     return [
       formatUrl(
-        getEndpointDetailsPath({
-          name: 'endpointPolicyResponse',
+        getHostDetailsPath({
+          name: 'hostPolicyResponse',
           ...currentUrlParams,
           selected_host: details.host.id,
         })
       ),
-      getEndpointDetailsPath({
-        name: 'endpointPolicyResponse',
+      getHostDetailsPath({
+        name: 'hostPolicyResponse',
         ...currentUrlParams,
         selected_host: details.host.id,
       }),
@@ -108,7 +108,7 @@ export const HostDetails = memo(({ details }: { details: HostMetadata }) => {
       onDoneNavigateTo: [
         'securitySolution:management',
         {
-          path: getEndpointDetailsPath({ name: 'endpointDetails', selected_host: details.host.id }),
+          path: getHostDetailsPath({ name: 'hostDetails', selected_host: details.host.id }),
         },
       ],
     },

x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/details/index.tsx

@@ -38,7 +38,7 @@ import { PolicyResponse } from './policy_response';
 import { HostMetadata } from '../../../../../../common/endpoint/types';
 import { FlyoutSubHeader, FlyoutSubHeaderProps } from './components/flyout_sub_header';
 import { useNavigateByRouterEventHandler } from '../../../../../common/hooks/endpoint/use_navigate_by_router_event_handler';
-import { getEndpointListPath } from '../../../../common/routing';
+import { getHostListPath } from '../../../../common/routing';
 import { SecurityPageName } from '../../../../../app/types';
 import { useFormatUrl } from '../../../../../common/components/link_to';
 
@@ -122,14 +122,14 @@ const PolicyResponseFlyoutPanel = memo<{
   const [detailsUri, detailsRoutePath] = useMemo(
     () => [
       formatUrl(
-        getEndpointListPath({
-          name: 'endpointList',
+        getHostListPath({
+          name: 'hostList',
           ...queryParams,
           selected_host: hostMeta.host.id,
         })
       ),
-      getEndpointListPath({
-        name: 'endpointList',
+      getHostListPath({
+        name: 'hostList',
         ...queryParams,
         selected_host: hostMeta.host.id,
       }),

x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/hooks.ts

@@ -9,14 +9,14 @@ import { useMemo } from 'react';
 import { useKibana } from '../../../../common/lib/kibana';
 import { HostState } from '../types';
 import {
-  MANAGEMENT_STORE_ENDPOINTS_NAMESPACE,
+  MANAGEMENT_STORE_HOSTS_NAMESPACE,
   MANAGEMENT_STORE_GLOBAL_NAMESPACE,
 } from '../../../common/constants';
 import { State } from '../../../../common/store';
 export function useHostSelector<TSelected>(selector: (state: HostState) => TSelected) {
   return useSelector(function (state: State) {
     return selector(
-      state[MANAGEMENT_STORE_GLOBAL_NAMESPACE][MANAGEMENT_STORE_ENDPOINTS_NAMESPACE] as HostState
+      state[MANAGEMENT_STORE_GLOBAL_NAMESPACE][MANAGEMENT_STORE_HOSTS_NAMESPACE] as HostState
     );
   });
 }

x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/index.tsx

@@ -10,6 +10,8 @@ import {
   EuiBasicTable,
   EuiBasicTableColumn,
   EuiText,
+  EuiTitle,
+  EuiSpacer,
   EuiLink,
   EuiHealth,
   EuiToolTip,
@@ -41,11 +43,7 @@ import {
   AgentConfigDetailsDeployAgentAction,
 } from '../../../../../../ingest_manager/public';
 import { SecurityPageName } from '../../../../app/types';
-import {
-  getEndpointListPath,
-  getEndpointDetailsPath,
-  getPolicyDetailPath,
-} from '../../../common/routing';
+import { getHostListPath, getHostDetailsPath, getPolicyDetailPath } from '../../../common/routing';
 import { useFormatUrl } from '../../../../common/components/link_to';
 import { HostAction } from '../store/action';
 
@@ -107,8 +105,8 @@ export const HostList = () => {
       const { index, size } = page;
       // FIXME: PT: if host details is open, table is not displaying correct number of rows
       history.push(
-        getEndpointListPath({
-          name: 'endpointList',
+        getHostListPath({
+          name: 'hostList',
           ...queryParams,
           page_index: JSON.stringify(index),
           page_size: JSON.stringify(size),
@@ -127,12 +125,12 @@ export const HostList = () => {
       state: {
         onCancelNavigateTo: [
           'securitySolution:management',
-          { path: getEndpointListPath({ name: 'endpointList' }) },
+          { path: getHostListPath({ name: 'hostList' }) },
         ],
-        onCancelUrl: formatUrl(getEndpointListPath({ name: 'endpointList' })),
+        onCancelUrl: formatUrl(getHostListPath({ name: 'hostList' })),
         onSaveNavigateTo: [
           'securitySolution:management',
-          { path: getEndpointListPath({ name: 'endpointList' }) },
+          { path: getHostListPath({ name: 'hostList' }) },
         ],
       },
     }
@@ -145,7 +143,7 @@ export const HostList = () => {
     state: {
       onDoneNavigateTo: [
         'securitySolution:management',
-        { path: getEndpointListPath({ name: 'endpointList' }) },
+        { path: getHostListPath({ name: 'hostList' }) },
       ],
     },
   });
@@ -191,10 +189,10 @@ export const HostList = () => {
           defaultMessage: 'Hostname',
         }),
         render: ({ hostname, id }: HostInfo['metadata']['host']) => {
-          const toRoutePath = getEndpointDetailsPath(
+          const toRoutePath = getHostDetailsPath(
             {
               ...queryParams,
-              name: 'endpointDetails',
+              name: 'hostDetails',
               selected_host: id,
             },
             search
@@ -259,8 +257,8 @@ export const HostList = () => {
         }),
         // eslint-disable-next-line react/display-name
         render: (policy: HostInfo['metadata']['Endpoint']['policy']['applied'], item: HostInfo) => {
-          const toRoutePath = getEndpointDetailsPath({
-            name: 'endpointPolicyResponse',
+          const toRoutePath = getHostDetailsPath({
+            name: 'hostPolicyResponse',
             selected_host: item.metadata.host.id,
           });
           const toRouteUrl = formatUrl(toRoutePath);
@@ -371,12 +369,32 @@ export const HostList = () => {
   ]);
 
   return (
+    // i18n.translate('xpack.securitySolution.endpointLis.pageTitle', {
+    //  defaultMessage: 'Hosts',
     <ManagementPageView
       viewType="list"
       data-test-subj="hostPage"
-      headerLeft={i18n.translate('xpack.securitySolution.endpointLis.pageTitle', {
-        defaultMessage: 'Endpoints',
-      })}
+      headerLeft={
+        <>
+          <EuiTitle size="l">
+            <h1>
+              <FormattedMessage
+                id="xpack.securitySolution.hostList.pageTitle"
+                defaultMessage="Hosts"
+              />
+            </h1>
+          </EuiTitle>
+          <EuiSpacer size="s" />
+          <EuiText size="s" color="subdued">
+            <p>
+              <FormattedMessage
+                id="xpack.securitySolution.hostList.pageSubTitle"
+                defaultMessage="Hosts running the Elastic Endpoint"
+              />
+            </p>
+          </EuiText>
+        </>
+      }
     >
       {hasSelectedHost && <HostDetailsFlyout />}
       {listData && listData.length > 0 && (