refactor outofdate into component and fn, move column

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

@@ -0,0 +1,24 @@
+/*
+ * 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 { HostInfo, HostMetadata } from '../../../../common/endpoint/types';
+
+export const isPolicyOutOfDate = (
+  reported: HostMetadata['Endpoint']['policy']['applied'],
+  current: HostInfo['policy_info']
+): boolean => {
+  if (current === undefined || current === null) {
+    return false; // we don't know, can't declare it out-of-date
+  }
+  return !(
+    reported.id === current.endpoint.id && // endpoint package policy not reassigned
+    current.agent.configured.id === current.agent.applied.id && // agent policy wasn't reassigned and not-yet-applied
+    // all revisions match up
+    reported.version >= current.agent.applied.revision &&
+    reported.version >= current.agent.configured.revision &&
+    reported.endpoint_policy_version >= current.endpoint.revision
+  );
+};

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

@@ -0,0 +1,20 @@
+/*
+ * 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 from 'react';
+import { EuiText, EuiIcon } from '@elastic/eui';
+import { FormattedMessage } from '@kbn/i18n/react';
+
+export const OutOfDate = React.memo<{ style?: React.CSSProperties }>(({ style, ...otherProps }) => {
+  return (
+    <EuiText color="subdued" size="xs" className="eui-textNoWrap" style={style} {...otherProps}>
+      <EuiIcon size="m" type="alert" color="warning" />
+      <FormattedMessage id="xpack.securitySolution.outOfDateLabel" defaultMessage="Out-of-date" />
+    </EuiText>
+  );
+});
+
+OutOfDate.displayName = 'OutOfDate';

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

@@ -18,6 +18,7 @@ import {
 import React, { memo, useMemo } from 'react';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { i18n } from '@kbn/i18n';
+import { isPolicyOutOfDate } from '../../utils';
 import { HostInfo, HostMetadata } from '../../../../../../common/endpoint/types';
 import { useEndpointSelector, useAgentDetailsIngestUrl } from '../hooks';
 import { useNavigateToAppEventHandler } from '../../../../../common/hooks/endpoint/use_navigate_to_app_event_handler';
@@ -31,6 +32,7 @@ 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';
 
 const HostIds = styled(EuiListGroupItem)`
   margin-top: 0;
@@ -136,6 +138,7 @@ export const EndpointDetails = memo(
               >
                 {details.Endpoint.policy.applied.name}
               </EndpointPolicyLink>
+              {isPolicyOutOfDate(details.Endpoint.policy.applied, policyInfo) && <OutOfDate />}
             </>
           ),
         },
@@ -144,43 +147,25 @@ export const EndpointDetails = memo(
             defaultMessage: 'Policy Response',
           }),
           description: (
-            <>
-              <EuiHealth
-                color={POLICY_STATUS_TO_HEALTH_COLOR[policyStatus] || 'subdued'}
-                data-test-subj="policyStatusHealth"
+            <EuiHealth
+              color={POLICY_STATUS_TO_HEALTH_COLOR[policyStatus] || 'subdued'}
+              data-test-subj="policyStatusHealth"
+            >
+              {/* eslint-disable-next-line @elastic/eui/href-or-on-click */}
+              <EuiLink
+                data-test-subj="policyStatusValue"
+                href={policyResponseUri}
+                onClick={policyStatusClickHandler}
               >
-                {/* eslint-disable-next-line @elastic/eui/href-or-on-click */}
-                <EuiLink
-                  data-test-subj="policyStatusValue"
-                  href={policyResponseUri}
-                  onClick={policyStatusClickHandler}
-                >
-                  <EuiText size="m">
-                    <FormattedMessage
-                      id="xpack.securitySolution.endpoint.details.policyStatusValue"
-                      defaultMessage="{policyStatus, select, success {Success} warning {Warning} failure {Failed} other {Unknown}}"
-                      values={{ policyStatus }}
-                    />
-                  </EuiText>
-                </EuiLink>
-              </EuiHealth>
-              {policyInfo &&
-                ((details.Endpoint.policy.applied.id === policyInfo.endpoint.id && // package policy wasn't changed
-                  policyInfo.agent.configured.id === policyInfo.agent.applied.id && // agent policy wasn't changed
-                  // all revisions match up
-                  details.Endpoint.policy.applied.version >= policyInfo.agent.applied.revision &&
-                  details.Endpoint.policy.applied.version >= policyInfo.agent.configured.revision &&
-                  details.Endpoint.policy.applied.endpoint_policy_version >=
-                    policyInfo.endpoint.revision) || (
-                  <EuiText color="subdued" size="xs" className="eui-textNoWrap">
-                    <EuiIcon size="m" type="alert" color="warning" />
-                    <FormattedMessage
-                      id="xpack.securitySolution.endpoint.details.outOfDateLabel"
-                      defaultMessage="Out-of-date"
-                    />
-                  </EuiText>
-                ))}
-            </>
+                <EuiText size="m">
+                  <FormattedMessage
+                    id="xpack.securitySolution.endpoint.details.policyStatusValue"
+                    defaultMessage="{policyStatus, select, success {Success} warning {Warning} failure {Failed} other {Unknown}}"
+                    values={{ policyStatus }}
+                  />
+                </EuiText>
+              </EuiLink>
+            </EuiHealth>
           ),
         },
       ];

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

@@ -16,7 +16,6 @@ import {
   EuiSelectableProps,
   EuiSuperDatePicker,
   EuiSpacer,
-  EuiIcon,
   EuiPopover,
   EuiContextMenuItem,
   EuiContextMenuPanel,
@@ -36,6 +35,7 @@ import { NavigateToAppOptions } from 'kibana/public';
 import { EndpointDetailsFlyout } from './details';
 import * as selectors from '../store/selectors';
 import { useEndpointSelector } from './hooks';
+import { isPolicyOutOfDate } from '../utils';
 import {
   HOST_STATUS_TO_HEALTH_COLOR,
   POLICY_STATUS_TO_HEALTH_COLOR,
@@ -58,6 +58,7 @@ import { getEndpointListPath, getEndpointDetailsPath } from '../../../common/rou
 import { useFormatUrl } from '../../../../common/components/link_to';
 import { EndpointAction } from '../store/action';
 import { EndpointPolicyLink } from './components/endpoint_policy_link';
+import { OutOfDate } from './components/out_of_date';
 import { AdminSearchBar } from './components/search_bar';
 import { AdministrationListPage } from '../../../components/administration_list_page';
 import { useKibana } from '../../../../../../../../src/plugins/kibana_react/public';
@@ -323,17 +324,22 @@ export const EndpointList = () => {
         }),
         truncateText: true,
         // eslint-disable-next-line react/display-name
-        render: (policy: HostInfo['metadata']['Endpoint']['policy']['applied']) => {
+        render: (policy: HostInfo['metadata']['Endpoint']['policy']['applied'], item: HostInfo) => {
           return (
-            <EuiToolTip content={policy.name} anchorClassName="eui-textTruncate">
-              <EndpointPolicyLink
-                policyId={policy.id}
-                className="eui-textTruncate"
-                data-test-subj="policyNameCellLink"
-              >
-                {policy.name}
-              </EndpointPolicyLink>
-            </EuiToolTip>
+            <>
+              <EuiToolTip content={policy.name} anchorClassName="eui-textTruncate">
+                <EndpointPolicyLink
+                  policyId={policy.id}
+                  className="eui-textTruncate"
+                  data-test-subj="policyNameCellLink"
+                >
+                  {policy.name}
+                </EndpointPolicyLink>
+              </EuiToolTip>
+              {isPolicyOutOfDate(policy, item.policy_info) && (
+                <OutOfDate style={{ paddingLeft: '6px' }} data-test-subj="rowPolicyOutOfDate" />
+              )}
+            </>
           );
         },
       },
@@ -351,40 +357,18 @@ export const EndpointList = () => {
           });
           const toRouteUrl = formatUrl(toRoutePath);
           return (
-            <>
-              <EuiHealth
-                color={POLICY_STATUS_TO_HEALTH_COLOR[policy.status]}
-                className="eui-textTruncate"
-                data-test-subj="rowPolicyStatus"
-              >
-                <EndpointListNavLink
-                  name={POLICY_STATUS_TO_TEXT[policy.status]}
-                  href={toRouteUrl}
-                  route={toRoutePath}
-                  dataTestSubj="policyStatusCellLink"
-                />
-              </EuiHealth>
-              {item.policy_info &&
-                ((policy.id === item.policy_info.endpoint.id && // package policy wasn't changed
-                  item.policy_info.agent.configured.id === item.policy_info.agent.applied.id && // agent policy wasn't changed
-                  // all revisions match up
-                  policy.version >= item.policy_info.agent.applied.revision &&
-                  policy.version >= item.policy_info.agent.configured.revision &&
-                  policy.endpoint_policy_version >= item.policy_info.endpoint.revision) || (
-                  <EuiText
-                    color="subdued"
-                    size="xs"
-                    className="eui-textNoWrap"
-                    data-test-subj="rowPolicyOutOfDate"
-                  >
-                    <EuiIcon size="m" type="alert" color="warning" />
-                    <FormattedMessage
-                      id="xpack.securitySolution.endpoint.list.outOfDateLabel"
-                      defaultMessage="Out-of-date"
-                    />
-                  </EuiText>
-                ))}
-            </>
+            <EuiHealth
+              color={POLICY_STATUS_TO_HEALTH_COLOR[policy.status]}
+              className="eui-textTruncate"
+              data-test-subj="rowPolicyStatus"
+            >
+              <EndpointListNavLink
+                name={POLICY_STATUS_TO_TEXT[policy.status]}
+                href={toRouteUrl}
+                route={toRoutePath}
+                dataTestSubj="policyStatusCellLink"
+              />
+            </EuiHealth>
           );
         },
       },