[Fleet] Fix incomplete agent count message on policy tab (#100497)

elastic · May 24, 2021 · f95bbb3 · f95bbb3
1 parent cc9c5be
commit f95bbb3
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 4 deletions.
diff --git a/x-pack/plugins/fleet/public/applications/fleet/components/linked_agent_count.tsx b/x-pack/plugins/fleet/public/applications/fleet/components/linked_agent_count.tsx
@@ -6,6 +6,7 @@
  */
 
 import React, { memo } from 'react';
+import { FormattedMessage } from '@kbn/i18n/react';
 import type { EuiLinkAnchorProps } from '@elastic/eui';
 import { EuiLink } from '@elastic/eui';
 
@@ -16,24 +17,37 @@ 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 }) => {
+  Omit<EuiLinkAnchorProps, 'href'> & {
+    count: number;
+    agentPolicyId: string;
+    showAgentText?: boolean;
+  }
+>(({ count, agentPolicyId, showAgentText, ...otherEuiLinkProps }) => {
   const { getHref } = useLink();
+  const displayValue = showAgentText ? (
+    <FormattedMessage
+      id="xpack.fleet.agentPolicy.linkedAgentCountText"
+      defaultMessage="{count, plural, one {# agent} other {# agents}}"
+      values={{ count }}
+    />
+  ) : (
+    count
+  );
   return count > 0 ? (
     <EuiLink
       {...otherEuiLinkProps}
       href={getHref('fleet_agent_list', {
         kuery: `${AGENT_SAVED_OBJECT_TYPE}.policy_id : ${agentPolicyId}`,
       })}
     >
-      {count}
+      {displayValue}
     </EuiLink>
   ) : (
     <span
       data-test-subj={otherEuiLinkProps['data-test-subj']}
       className={otherEuiLinkProps.className}
     >
-      {count}
+      {displayValue}
     </span>
   );
 });
diff --git a/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/details_page/index.tsx b/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/details_page/index.tsx
@@ -173,6 +173,7 @@ export const AgentPolicyDetailsPage: React.FunctionComponent = () => {
                 <LinkedAgentCount
                   count={(agentStatus && agentStatus.total) || 0}
                   agentPolicyId={(agentPolicy && agentPolicy.id) || ''}
+                  showAgentText
                 />
               ),
             },