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 index 02d41e7dea1a74..967a0d3e25b20e 100644 --- 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 @@ -14,6 +14,8 @@ import { EuiListGroupItem, EuiIcon, EuiText, + EuiFlexGroup, + EuiFlexItem, } from '@elastic/eui'; import React, { memo, useMemo } from 'react'; import { FormattedMessage } from '@kbn/i18n/react'; @@ -139,7 +141,31 @@ export const EndpointDetails = memo( > {details.Endpoint.policy.applied.name} - {isPolicyOutOfDate(details.Endpoint.policy.applied, policyInfo) && } + + {details.Endpoint.policy.applied.endpoint_policy_version && ( + + + + + + )} + {isPolicyOutOfDate(details.Endpoint.policy.applied, policyInfo) && ( + + + + )} + ), }, 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 index 69889d3d0a881d..487f5ddab5504e 100644 --- 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 @@ -220,6 +220,7 @@ describe('when on the list page', () => { HostInfo['metadata']['Endpoint']['policy']['applied']['status'] > = []; let firstPolicyID: string; + let firstPolicyRev: number; beforeEach(() => { reactTestingLibrary.act(() => { const mockedEndpointData = mockEndpointResultList({ total: 4 }); @@ -227,6 +228,7 @@ describe('when on the list page', () => { const queryStrategyVersion = mockedEndpointData.query_strategy_version; firstPolicyID = hostListData[0].metadata.Endpoint.policy.applied.id; + firstPolicyRev = hostListData[0].metadata.Endpoint.policy.applied.endpoint_policy_version; // add ability to change (immutable) policy type DeepMutable = { -readonly [P in keyof T]: DeepMutable }; @@ -402,6 +404,16 @@ describe('when on the list page', () => { }); }); }); + + it('should show revision number', async () => { + const renderResult = render(); + await reactTestingLibrary.act(async () => { + await middlewareSpy.waitForAction('serverReturnedEndpointList'); + }); + const firstPolicyRevElement = (await renderResult.findAllByTestId('policyListRevNo'))[0]; + expect(firstPolicyRevElement).not.toBeNull(); + expect(firstPolicyRevElement.textContent).toEqual(`rev. ${firstPolicyRev}`); + }); }); }); @@ -586,6 +598,15 @@ describe('when on the list page', () => { ); }); + it('should display policy revision number', async () => { + const renderResult = await renderAndWaitForData(); + const policyDetailsRevElement = await renderResult.findByTestId('policyDetailsRevNo'); + expect(policyDetailsRevElement).not.toBeNull(); + expect(policyDetailsRevElement.textContent).toEqual( + `rev. ${hostDetails.metadata.Endpoint.policy.applied.endpoint_policy_version}` + ); + }); + it('should update the URL when policy name link is clicked', async () => { const renderResult = await renderAndWaitForData(); const policyDetailsLink = await renderResult.findByTestId('policyDetailsValue'); diff --git a/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/index.tsx b/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/index.tsx index a759c9de414156..eaa748d781b9b5 100644 --- a/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/index.tsx +++ b/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/index.tsx @@ -219,6 +219,8 @@ export const EndpointList = () => { const NOOP = useCallback(() => {}, []); + const PAD_LEFT: React.CSSProperties = { paddingLeft: '6px' }; + const handleDeployEndpointsClick = useNavigateToAppEventHandler( 'fleet', { @@ -337,8 +339,22 @@ export const EndpointList = () => { {policy.name} + {policy.endpoint_policy_version && ( + + + + )} {isPolicyOutOfDate(policy, item.policy_info) && ( - + )} );