[Fleet] Consistent display of agent counts on lists (#86827) (#86895)

* move LinkedAgentCount component to top-level components and adjust output
* refactor integration details Policies list to use LinkedAgentCount component
* test cases for agent counts on integrations

x-pack/plugins/fleet/public/applications/fleet/components/linked_agent_count.tsx

@@ -0,0 +1,36 @@
+/*
+ * 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, { memo } from 'react';
+import { EuiLink, EuiLinkAnchorProps } from '@elastic/eui';
+import { useLink } from '../hooks';
+import { AGENT_SAVED_OBJECT_TYPE } from '../constants';
+
+/**
+ * Displays the provided `count` number as a link to the Agents list if it is greater than zero
+ */
+export const LinkedAgentCount = memo<
+  Omit<EuiLinkAnchorProps, 'href'> & { count: number; agentPolicyId: string }
+>(({ count, agentPolicyId, ...otherEuiLinkProps }) => {
+  const { getHref } = useLink();
+  return count > 0 ? (
+    <EuiLink
+      {...otherEuiLinkProps}
+      href={getHref('fleet_agent_list', {
+        kuery: `${AGENT_SAVED_OBJECT_TYPE}.policy_id : ${agentPolicyId}`,
+      })}
+    >
+      {count}
+    </EuiLink>
+  ) : (
+    <span
+      data-test-subj={otherEuiLinkProps['data-test-subj']}
+      className={otherEuiLinkProps.className}
+    >
+      {count}
+    </span>
+  );
+});

x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/components/index.ts

@@ -8,7 +8,7 @@ export { AgentPolicyCopyProvider } from './agent_policy_copy_provider';
 export { AgentPolicyDeleteProvider } from './agent_policy_delete_provider';
 export { PackagePolicyDeleteProvider } from './package_policy_delete_provider';
 export { AgentPolicyYamlFlyout } from './agent_policy_yaml_flyout';
-export { LinkedAgentCount } from './linked_agent_count';
+export { LinkedAgentCount } from '../../../components/linked_agent_count';
 export { ConfirmDeployAgentPolicyModal } from './confirm_deploy_modal';
 export { DangerEuiContextMenuItem } from './danger_eui_context_menu_item';
 export { AgentPolicyActionMenu } from './actions_menu';

x-pack/plugins/fleet/public/applications/fleet/sections/epm/screens/detail/index.test.tsx

@@ -166,11 +166,27 @@ describe('when on integration detail', () => {
 
     it('should link to integration policy detail when an integration policy is clicked', async () => {
       await mockedApi.waitForApi();
-      const firstPolicy = renderResult.getByTestId('integrationNameLink') as HTMLAnchorElement;
+      const firstPolicy = renderResult.getAllByTestId(
+        'integrationNameLink'
+      )[0] as HTMLAnchorElement;
       expect(firstPolicy.href).toEqual(
         'http://localhost/mock/app/fleet#/integrations/edit-integration/e8a37031-2907-44f6-89d2-98bd493f60dc'
       );
     });
+
+    it('should NOT show link for agent count if it is zero', async () => {
+      await mockedApi.waitForApi();
+      const firstRowAgentCount = renderResult.getAllByTestId('rowAgentCount')[0];
+      expect(firstRowAgentCount.textContent).toEqual('0');
+      expect(firstRowAgentCount.tagName).not.toEqual('A');
+    });
+
+    it('should show link for agent count if greater than zero', async () => {
+      await mockedApi.waitForApi();
+      const secondRowAgentCount = renderResult.getAllByTestId('rowAgentCount')[1];
+      expect(secondRowAgentCount.textContent).toEqual('100');
+      expect(secondRowAgentCount.tagName).toEqual('A');
+    });
   });
 });
 
@@ -522,8 +538,87 @@ On Windows, the module was tested with Nginx installed from the Chocolatey repos
         updated_at: '2020-12-09T13:46:31.013Z',
         updated_by: 'elastic',
       },
+      {
+        id: 'e3t37031-2907-44f6-89d2-5555555555',
+        version: 'WrrrMiwxXQ==',
+        name: 'nginx-2',
+        description: '',
+        namespace: 'default',
+        policy_id: '125c1b70-3976-11eb-ad1c-3baa423085y6',
+        enabled: true,
+        output_id: '',
+        inputs: [
+          {
+            type: 'logfile',
+            enabled: true,
+            streams: [
+              {
+                enabled: true,
+                data_stream: { type: 'logs', dataset: 'nginx.access' },
+                vars: { paths: { value: ['/var/log/nginx/access.log*'], type: 'text' } },
+                id: 'logfile-nginx.access-e8a37031-2907-44f6-89d2-98bd493f60dc',
+                compiled_stream: {
+                  paths: ['/var/log/nginx/access.log*'],
+                  exclude_files: ['.gz$'],
+                  processors: [{ add_locale: null }],
+                },
+              },
+              {
+                enabled: true,
+                data_stream: { type: 'logs', dataset: 'nginx.error' },
+                vars: { paths: { value: ['/var/log/nginx/error.log*'], type: 'text' } },
+                id: 'logfile-nginx.error-e8a37031-2907-44f6-89d2-98bd493f60dc',
+                compiled_stream: {
+                  paths: ['/var/log/nginx/error.log*'],
+                  exclude_files: ['.gz$'],
+                  multiline: {
+                    pattern: '^\\d{4}\\/\\d{2}\\/\\d{2} ',
+                    negate: true,
+                    match: 'after',
+                  },
+                  processors: [{ add_locale: null }],
+                },
+              },
+              {
+                enabled: false,
+                data_stream: { type: 'logs', dataset: 'nginx.ingress_controller' },
+                vars: { paths: { value: ['/var/log/nginx/ingress.log*'], type: 'text' } },
+                id: 'logfile-nginx.ingress_controller-e8a37031-2907-44f6-89d2-98bd493f60dc',
+              },
+            ],
+          },
+          {
+            type: 'nginx/metrics',
+            enabled: true,
+            streams: [
+              {
+                enabled: true,
+                data_stream: { type: 'metrics', dataset: 'nginx.stubstatus' },
+                vars: {
+                  period: { value: '10s', type: 'text' },
+                  server_status_path: { value: '/nginx_status', type: 'text' },
+                },
+                id: 'nginx/metrics-nginx.stubstatus-e8a37031-2907-44f6-89d2-98bd493f60dc',
+                compiled_stream: {
+                  metricsets: ['stubstatus'],
+                  hosts: ['http://127.0.0.1:80'],
+                  period: '10s',
+                  server_status_path: '/nginx_status',
+                },
+              },
+            ],
+            vars: { hosts: { value: ['http://127.0.0.1:80'], type: 'text' } },
+          },
+        ],
+        package: { name: 'nginx', title: 'Nginx', version: '0.3.7' },
+        revision: 3,
+        created_at: '2020-12-09T13:46:31.013Z',
+        created_by: 'elastic',
+        updated_at: '2020-12-09T13:46:31.013Z',
+        updated_by: 'elastic',
+      },
     ],
-    total: 1,
+    total: 2,
     page: 1,
     perPage: 20,
   };
@@ -548,8 +643,22 @@ On Windows, the module was tested with Nginx installed from the Chocolatey repos
         updated_by: 'elastic',
         agents: 0,
       },
+      {
+        id: '125c1b70-3976-11eb-ad1c-3baa423085y6',
+        name: 'EU Healthy agents',
+        namespace: 'default',
+        description: 'Protect EU from COVID',
+        status: 'active',
+        package_policies: ['e8a37031-2907-44f6-89d2-98bd493f60cd'],
+        is_default: false,
+        monitoring_enabled: ['logs', 'metrics'],
+        revision: 2,
+        updated_at: '2020-12-09T13:46:31.840Z',
+        updated_by: 'elastic',
+        agents: 100,
+      },
     ],
-    total: 1,
+    total: 2,
     page: 1,
     perPage: 100,
   };

x-pack/plugins/fleet/public/applications/fleet/sections/epm/screens/detail/package_policies_panel.tsx

@@ -17,17 +17,15 @@ import { FormattedRelative, FormattedMessage } from '@kbn/i18n/react';
 import { useGetPackageInstallStatus } from '../../hooks';
 import { InstallStatus } from '../../../../types';
 import { useLink } from '../../../../hooks';
-import {
-  AGENT_SAVED_OBJECT_TYPE,
-  PACKAGE_POLICY_SAVED_OBJECT_TYPE,
-} from '../../../../../../../common/constants';
+import { PACKAGE_POLICY_SAVED_OBJECT_TYPE } from '../../../../../../../common/constants';
 import { useUrlPagination } from '../../../../hooks';
 import {
   PackagePolicyAndAgentPolicy,
   usePackagePoliciesWithAgentPolicy,
 } from './use_package_policies_with_agent_policy';
 import { LinkAndRevision, LinkAndRevisionProps } from '../../../../components';
 import { Persona } from './persona';
+import { LinkedAgentCount } from '../../../../components/linked_agent_count';
 
 const IntegrationDetailsLink = memo<{
   packagePolicy: PackagePolicyAndAgentPolicy['packagePolicy'];
@@ -66,22 +64,6 @@ const AgentPolicyDetailLink = memo<{
   );
 });
 
-const PolicyAgentListLink = memo<{ agentPolicyId: string; children: ReactNode }>(
-  ({ agentPolicyId, children }) => {
-    const { getHref } = useLink();
-    return (
-      <EuiLink
-        className="eui-textTruncate"
-        href={getHref('fleet_agent_list', {
-          kuery: `${AGENT_SAVED_OBJECT_TYPE}.policy_id:%20${agentPolicyId}`,
-        })}
-      >
-        {children}
-      </EuiLink>
-    );
-  }
-);
-
 interface PackagePoliciesPanelProps {
   name: string;
   version: string;
@@ -156,9 +138,12 @@ export const PackagePoliciesPanel = ({ name, version }: PackagePoliciesPanelProp
         width: '8ch',
         render({ packagePolicy, agentPolicy }: PackagePolicyAndAgentPolicy) {
           return (
-            <PolicyAgentListLink agentPolicyId={packagePolicy.policy_id}>
-              {agentPolicy?.agents ?? 0}
-            </PolicyAgentListLink>
+            <LinkedAgentCount
+              count={agentPolicy?.agents ?? 0}
+              agentPolicyId={packagePolicy.policy_id}
+              className="eui-textTruncate"
+              data-test-subj="rowAgentCount"
+            />
           );
         },
       },