[Fleet] Fix view agent activity for large action (#170971)

x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_list_page/components/agent_activity_flyout.tsx

@@ -26,6 +26,7 @@ import {
   EuiButtonEmpty,
   EuiFlyoutFooter,
   EuiSpacer,
+  EuiToolTip,
 } from '@elastic/eui';
 import styled from 'styled-components';
 
@@ -57,6 +58,8 @@ const FlyoutFooterWPadding = styled(EuiFlyoutFooter)`
   padding: 16px 24px !important;
 `;
 
+const MAX_VIEW_AGENTS_COUNT = 2000;
+
 export const AgentActivityFlyout: React.FunctionComponent<{
   onClose: () => void;
   onAbortSuccess: () => void;
@@ -702,17 +705,42 @@ const ViewAgentsButton: React.FunctionComponent<{
   action: ActionStatus;
   onClickViewAgents: (action: ActionStatus) => void;
 }> = ({ action, onClickViewAgents }) => {
-  return action.type !== 'UPDATE_TAGS' ? (
+  if (action.type === 'UPDATE_TAGS') {
+    return null;
+  }
+
+  const button = (
     <EuiButtonEmpty
       size="m"
       onClick={() => onClickViewAgents(action)}
       flush="left"
       data-test-subj="agentActivityFlyout.viewAgentsButton"
+      disabled={action.nbAgentsActionCreated > MAX_VIEW_AGENTS_COUNT}
     >
       <FormattedMessage
         id="xpack.fleet.agentActivityFlyout.viewAgentsButton"
         defaultMessage="View Agents"
       />
     </EuiButtonEmpty>
-  ) : null;
+  );
+
+  if (action.nbAgentsActionCreated <= MAX_VIEW_AGENTS_COUNT) {
+    return button;
+  }
+
+  return (
+    <EuiToolTip
+      content={
+        <FormattedMessage
+          id="xpack.fleet.agentActivityFlyout.viewAgentsButtonDisabledMaxTooltip"
+          defaultMessage="The view agents feature is only available for action impacting less then {agentCount} agents"
+          values={{
+            agentCount: MAX_VIEW_AGENTS_COUNT,
+          }}
+        />
+      }
+    >
+      {button}
+    </EuiToolTip>
+  );
 };

x-pack/plugins/fleet/scripts/create_agents/create_agents.ts

@@ -43,7 +43,7 @@ const ES_PASSWORD = 'password';
 
 const DEFAULT_AGENT_COUNT = 50000;
 
-const INDEX_BULK_OP = '{ "index":{ } }\n';
+const INDEX_BULK_OP = '{ "index":{ "_id": "{{id}}" } }\n';
 
 const {
   delete: deleteAgentsFirst = false,
@@ -145,6 +145,10 @@ function createAgentWithStatus({
   hostname: string;
 }) {
   const baseAgent = {
+    agent: {
+      id: uuidv4(),
+      version,
+    },
     access_api_key_id: 'api-key-1',
     active: true,
     policy_id: policyId,
@@ -235,7 +239,12 @@ async function deleteAgents() {
 
 async function createAgentDocsBulk(agents: Agent[]) {
   const auth = 'Basic ' + Buffer.from(ES_SUPERUSER + ':' + ES_PASSWORD).toString('base64');
-  const body = agents.flatMap((agent) => [INDEX_BULK_OP, JSON.stringify(agent) + '\n']).join('');
+  const body = agents
+    .flatMap((agent) => [
+      INDEX_BULK_OP.replace(/{{id}}/, agent.agent?.id ?? ''),
+      JSON.stringify(agent) + '\n',
+    ])
+    .join('');
   const res = await fetch(`${ES_URL}/.fleet-agents/_bulk`, {
     method: 'post',
     body,