[Security Solution] restyle endpoint details flyout (#102092) (#102221)

kibanamachine · joeypoon · web-flow · commit b0700a8c60ab · 2021-06-15T12:59:35.000-04:00
Co-authored-by: Joey F. Poon &lt;joey.poon@elastic.co&gt;
diff --git a/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/details/components/actions_menu.test.tsx b/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/details/components/actions_menu.test.tsx
@@ -70,6 +70,7 @@ describe('When using the Endpoint Details Actions Menu', () => {
       ['View host details', 'hostLink'],
       ['View agent policy', 'agentPolicyLink'],
       ['View agent details', 'agentDetailsLink'],
+      ['Reassign agent policy', 'agentPolicyReassignLink'],
     ])('should display %s action', async (_, dataTestSubj) => {
       await render();
       expect(renderResult.getByTestId(dataTestSubj)).not.toBeNull();
@@ -80,6 +81,7 @@ describe('When using the Endpoint Details Actions Menu', () => {
       ['View host details', 'hostLink'],
       ['View agent policy', 'agentPolicyLink'],
       ['View agent details', 'agentDetailsLink'],
+      ['Reassign agent policy', 'agentPolicyReassignLink'],
     ])(
       'should navigate via kibana `navigateToApp()` when %s is clicked',
       async (_, dataTestSubj) => {
diff --git a/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/details/endpoint_details.tsx b/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/details/endpoint_details.tsx
@@ -8,10 +8,8 @@
 import styled from 'styled-components';
 import {
   EuiDescriptionList,
-  EuiHorizontalRule,
   EuiListGroup,
   EuiListGroupItem,
-  EuiIcon,
   EuiText,
   EuiFlexGroup,
   EuiFlexItem,
@@ -23,17 +21,14 @@ import { FormattedMessage } from '@kbn/i18n/react';
 import { i18n } from '@kbn/i18n';
 import { isPolicyOutOfDate } from '../../utils';
 import { HostInfo, HostMetadata, HostStatus } from '../../../../../../common/endpoint/types';
-import { useEndpointSelector, useAgentDetailsIngestUrl } from '../hooks';
-import { useNavigateToAppEventHandler } from '../../../../../common/hooks/endpoint/use_navigate_to_app_event_handler';
+import { useEndpointSelector } from '../hooks';
 import { policyResponseStatus, uiQueryParams } from '../../store/selectors';
 import { POLICY_STATUS_TO_BADGE_COLOR, HOST_STATUS_TO_BADGE_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 } from '../../../../common/routing';
 import { SecurityPageName } from '../../../../../app/types';
 import { useFormatUrl } from '../../../../../common/components/link_to';
-import { AgentDetailsReassignPolicyAction } from '../../../../../../../fleet/public';
 import { EndpointPolicyLink } from '../components/endpoint_policy_link';
 import { OutOfDate } from '../components/out_of_date';
 
@@ -44,8 +39,6 @@ const HostIds = styled(EuiListGroupItem)`
   }
 `;
 
-const openReassignFlyoutSearch = '?openReassignFlyout=true';
-
 export const EndpointDetails = memo(
   ({
     details,
@@ -56,19 +49,34 @@ export const EndpointDetails = memo(
     policyInfo?: HostInfo['policy_info'];
     hostStatus: HostStatus;
   }) => {
-    const agentId = details.elastic.agent.id;
-    const {
-      url: agentDetailsUrl,
-      appId: ingestAppId,
-      appPath: agentDetailsAppPath,
-    } = useAgentDetailsIngestUrl(agentId);
     const queryParams = useEndpointSelector(uiQueryParams);
     const policyStatus = useEndpointSelector(
       policyResponseStatus
     ) as keyof typeof POLICY_STATUS_TO_BADGE_COLOR;
     const { formatUrl } = useFormatUrl(SecurityPageName.administration);
 
-    const detailsResultsUpper = useMemo(() => {
+    const [policyResponseUri, policyResponseRoutePath] = useMemo(() => {
+      // eslint-disable-next-line @typescript-eslint/naming-convention
+      const { selected_endpoint, show, ...currentUrlParams } = queryParams;
+      return [
+        formatUrl(
+          getEndpointDetailsPath({
+            name: 'endpointPolicyResponse',
+            ...currentUrlParams,
+            selected_endpoint: details.agent.id,
+          })
+        ),
+        getEndpointDetailsPath({
+          name: 'endpointPolicyResponse',
+          ...currentUrlParams,
+          selected_endpoint: details.agent.id,
+        }),
+      ];
+    }, [details.agent.id, formatUrl, queryParams]);
+
+    const policyStatusClickHandler = useNavigateByRouterEventHandler(policyResponseRoutePath);
+
+    const detailsResults = useMemo(() => {
       return [
         {
           title: i18n.translate('xpack.securitySolution.endpoint.details.os', {
@@ -106,55 +114,9 @@ export const EndpointDetails = memo(
             </EuiText>
           ),
         },
-      ];
-    }, [details, hostStatus]);
-
-    const [policyResponseUri, policyResponseRoutePath] = useMemo(() => {
-      // eslint-disable-next-line @typescript-eslint/naming-convention
-      const { selected_endpoint, show, ...currentUrlParams } = queryParams;
-      return [
-        formatUrl(
-          getEndpointDetailsPath({
-            name: 'endpointPolicyResponse',
-            ...currentUrlParams,
-            selected_endpoint: details.agent.id,
-          })
-        ),
-        getEndpointDetailsPath({
-          name: 'endpointPolicyResponse',
-          ...currentUrlParams,
-          selected_endpoint: details.agent.id,
-        }),
-      ];
-    }, [details.agent.id, formatUrl, queryParams]);
-
-    const agentDetailsWithFlyoutPath = `${agentDetailsAppPath}${openReassignFlyoutSearch}`;
-    const agentDetailsWithFlyoutUrl = `${agentDetailsUrl}${openReassignFlyoutSearch}`;
-    const handleReassignEndpointsClick = useNavigateToAppEventHandler<AgentDetailsReassignPolicyAction>(
-      ingestAppId,
-      {
-        path: agentDetailsWithFlyoutPath,
-        state: {
-          onDoneNavigateTo: [
-            'securitySolution:administration',
-            {
-              path: getEndpointDetailsPath({
-                name: 'endpointDetails',
-                selected_endpoint: details.agent.id,
-              }),
-            },
-          ],
-        },
-      }
-    );
-
-    const policyStatusClickHandler = useNavigateByRouterEventHandler(policyResponseRoutePath);
-
-    const detailsResultsPolicy = useMemo(() => {
-      return [
         {
           title: i18n.translate('xpack.securitySolution.endpoint.details.policy', {
-            defaultMessage: 'Integration Policy',
+            defaultMessage: 'Policy',
           }),
           description: (
             <EuiFlexGroup alignItems="center">
@@ -198,7 +160,7 @@ export const EndpointDetails = memo(
         },
         {
           title: i18n.translate('xpack.securitySolution.endpoint.details.policyStatus', {
-            defaultMessage: 'Policy Response',
+            defaultMessage: 'Policy Status',
           }),
           description: (
             // https://github.com/elastic/eui/issues/4530
@@ -210,7 +172,7 @@ export const EndpointDetails = memo(
               onClick={policyStatusClickHandler}
               onClickAriaLabel={i18n.translate(
                 'xpack.securitySolution.endpoint.details.policyStatus',
-                { defaultMessage: 'Policy Response' }
+                { defaultMessage: 'Policy Status' }
               )}
             >
               <EuiText size="m">
@@ -223,10 +185,12 @@ export const EndpointDetails = memo(
             </EuiBadge>
           ),
         },
-      ];
-    }, [details, policyResponseUri, policyStatus, policyStatusClickHandler, policyInfo]);
-    const detailsResultsLower = useMemo(() => {
-      return [
+        {
+          title: i18n.translate('xpack.securitySolution.endpoint.details.endpointVersion', {
+            defaultMessage: 'Endpoint Version',
+          }),
+          description: <EuiText>{details.agent.version}</EuiText>,
+        },
         {
           title: i18n.translate('xpack.securitySolution.endpoint.details.ipAddress', {
             defaultMessage: 'IP Address',
@@ -241,70 +205,23 @@ export const EndpointDetails = memo(
             </EuiListGroup>
           ),
         },
-        {
-          title: i18n.translate('xpack.securitySolution.endpoint.details.hostname', {
-            defaultMessage: 'Hostname',
-          }),
-          description: <EuiText className="eui-textBreakAll">{details.host.hostname}</EuiText>,
-        },
-        {
-          title: i18n.translate('xpack.securitySolution.endpoint.details.endpointVersion', {
-            defaultMessage: 'Endpoint Version',
-          }),
-          description: <EuiText>{details.agent.version}</EuiText>,
-        },
       ];
-    }, [details.agent.version, details.host.hostname, details.host.ip]);
+    }, [
+      details,
+      hostStatus,
+      policyResponseUri,
+      policyStatus,
+      policyStatusClickHandler,
+      policyInfo,
+    ]);
 
     return (
       <>
         <EuiSpacer size="l" />
         <EuiDescriptionList
           type="column"
-          listItems={detailsResultsUpper}
-          data-test-subj="endpointDetailsUpperList"
-        />
-        <EuiHorizontalRule margin="m" />
-        <EuiDescriptionList
-          type="column"
-          listItems={detailsResultsPolicy}
-          data-test-subj="endpointDetailsPolicyList"
-        />
-        <EuiSpacer size="m" />
-        <LinkToApp
-          appId={ingestAppId}
-          appPath={agentDetailsWithFlyoutPath}
-          href={agentDetailsWithFlyoutUrl}
-          onClick={handleReassignEndpointsClick}
-          data-test-subj="endpointDetailsLinkToIngest"
-        >
-          <EuiFlexGroup
-            direction="row"
-            gutterSize="xs"
-            justifyContent="flexStart"
-            alignItems="center"
-          >
-            <EuiFlexItem grow={false}>
-              <EuiIcon type="managementApp" className="linkToAppIcon" />
-            </EuiFlexItem>
-            <EuiFlexItem grow={false}>
-              <EuiText>
-                <FormattedMessage
-                  id="xpack.securitySolution.endpoint.details.linkToIngestTitle"
-                  defaultMessage="Reassign Policy"
-                />
-              </EuiText>
-            </EuiFlexItem>
-            <EuiFlexItem grow={false}>
-              <EuiIcon type="popout" className="linkToAppPopoutIcon" />
-            </EuiFlexItem>
-          </EuiFlexGroup>
-        </LinkToApp>
-        <EuiHorizontalRule margin="m" />
-        <EuiDescriptionList
-          type="column"
-          listItems={detailsResultsLower}
-          data-test-subj="endpointDetailsLowerList"
+          listItems={detailsResults}
+          data-test-subj="endpointDetailsList"
         />
       </>
     );
diff --git a/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/details/index.tsx b/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/details/index.tsx
@@ -166,14 +166,14 @@ export const EndpointDetailsFlyout = memo(() => {
       style={{ zIndex: 4001 }}
       data-test-subj="endpointDetailsFlyout"
       size="m"
-      paddingSize="m"
+      paddingSize="l"
     >
-      <EuiFlyoutHeader hasBorder>
+      <EuiFlyoutHeader>
         {hostDetailsLoading ? (
           <EuiLoadingContent lines={1} />
         ) : (
           <EuiToolTip content={hostDetails?.host?.hostname} anchorClassName="eui-textTruncate">
-            <EuiTitle size="s">
+            <EuiTitle>
               <h2
                 style={{ overflow: 'hidden', textOverflow: 'ellipsis' }}
                 data-test-subj="endpointDetailsFlyoutTitle"
diff --git a/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/hooks/use_endpoint_action_items.tsx b/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/hooks/use_endpoint_action_items.tsx
@@ -155,6 +155,30 @@ export const useEndpointActionItems = (
             />
           ),
         },
+        {
+          icon: 'gear',
+          key: 'agentPolicyReassignLink',
+          'data-test-subj': 'agentPolicyReassignLink',
+          navigateAppId: 'fleet',
+          navigateOptions: {
+            path: `#${
+              pagePathGetters.fleet_agent_details({
+                agentId: fleetAgentId,
+              })[1]
+            }/activity?openReassignFlyout=true`,
+          },
+          href: `${getUrlForApp('fleet')}#${
+            pagePathGetters.fleet_agent_details({
+              agentId: fleetAgentId,
+            })[1]
+          }/activity?openReassignFlyout=true`,
+          children: (
+            <FormattedMessage
+              id="xpack.securitySolution.endpoint.actions.agentPolicyReassign"
+              defaultMessage="Reassign agent policy"
+            />
+          ),
+        },
       ];
     }
 
diff --git a/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/index.test.tsx b/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/index.test.tsx
@@ -516,7 +516,6 @@ describe('when on the endpoint list page', () => {
 
   describe('when there is a selected host in the url', () => {
     let hostDetails: HostInfo;
-    let elasticAgentId: string;
     let renderAndWaitForData: () => Promise<ReturnType<AppContextTestRender['render']>>;
     const mockEndpointListApi = (mockedPolicyResponse?: HostPolicyResponse) => {
       const {
@@ -546,8 +545,6 @@ describe('when on the endpoint list page', () => {
         query_strategy_version,
       };
 
-      elasticAgentId = hostDetails.metadata.elastic.agent.id;
-
       const policy = docGenerator.generatePolicyPackagePolicy();
       policy.id = hostDetails.metadata.Endpoint.policy.applied.id;
 
@@ -738,37 +735,11 @@ describe('when on the endpoint list page', () => {
       );
     });
 
-    it('should include the link to reassignment in Ingest', async () => {
-      coreStart.application.getUrlForApp.mockReturnValue('/app/fleet');
-      const renderResult = await renderAndWaitForData();
-      const linkToReassign = await renderResult.findByTestId('endpointDetailsLinkToIngest');
-      expect(linkToReassign).not.toBeNull();
-      expect(linkToReassign.textContent).toEqual('Reassign Policy');
-      expect(linkToReassign.getAttribute('href')).toEqual(
-        `/app/fleet#/fleet/agents/${elasticAgentId}/activity?openReassignFlyout=true`
-      );
-    });
-
     it('should show the Take Action button', async () => {
       const renderResult = await renderAndWaitForData();
       expect(renderResult.getByTestId('endpointDetailsActionsButton')).not.toBeNull();
     });
 
-    describe('when link to reassignment in Ingest is clicked', () => {
-      beforeEach(async () => {
-        coreStart.application.getUrlForApp.mockReturnValue('/app/fleet');
-        const renderResult = await renderAndWaitForData();
-        const linkToReassign = await renderResult.findByTestId('endpointDetailsLinkToIngest');
-        reactTestingLibrary.act(() => {
-          reactTestingLibrary.fireEvent.click(linkToReassign);
-        });
-      });
-
-      it('should navigate to Ingest without full page refresh', () => {
-        expect(coreStart.application.navigateToApp.mock.calls).toHaveLength(1);
-      });
-    });
-
     describe('when showing host Policy Response panel', () => {
       let renderResult: ReturnType<typeof render>;
       beforeEach(async () => {
@@ -1139,5 +1110,12 @@ describe('when on the endpoint list page', () => {
       const agentDetailsLink = await renderResult.findByTestId('agentDetailsLink');
       expect(agentDetailsLink.getAttribute('href')).toEqual(`/app/fleet#/fleet/agents/${agentId}`);
     });
+
+    it('navigates to the Ingest Agent Details page with policy reassign', async () => {
+      const agentPolicyReassignLink = await renderResult.findByTestId('agentPolicyReassignLink');
+      expect(agentPolicyReassignLink.getAttribute('href')).toEqual(
+        `/app/fleet#/fleet/agents/${agentId}/activity?openReassignFlyout=true`
+      );
+    });
   });
 });
diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json
@@ -20131,10 +20131,8 @@
     "xpack.securitySolution.endpoint.details.endpointVersion": "エンドポイントバージョン",
     "xpack.securitySolution.endpoint.details.errorBody": "フライアウトを終了して、利用可能なホストを選択してください。",
     "xpack.securitySolution.endpoint.details.errorTitle": "ホストが見つかりませんでした",
-    "xpack.securitySolution.endpoint.details.hostname": "ホスト名",
     "xpack.securitySolution.endpoint.details.ipAddress": "IPアドレス",
     "xpack.securitySolution.endpoint.details.lastSeen": "前回の認識",
-    "xpack.securitySolution.endpoint.details.linkToIngestTitle": "ポリシーの再割り当て",
     "xpack.securitySolution.endpoint.details.noPolicyResponse": "ポリシー応答がありません",
     "xpack.securitySolution.endpoint.details.os": "OS",
     "xpack.securitySolution.endpoint.details.policy": "統合ポリシー",
diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/x-pack/plugins/translations/translations/zh-CN.json
diff --git a/x-pack/test/security_solution_endpoint/apps/endpoint/endpoint_list.ts b/x-pack/test/security_solution_endpoint/apps/endpoint/endpoint_list.ts
