[Fleet] Add component to show agents enrolment (#126443)

* [Fleet] Modify status endpoint to check recent agents enrollments

* Create basic component for confirming agent enrollment

* Update openapi and fix parameters order

* Remove test code and fix linter

* Address review comments

x-pack/plugins/fleet/common/openapi/bundled.json

@@ -1094,6 +1094,14 @@
             "name": "policyId",
             "in": "query",
             "required": false
+          },
+          {
+            "schema": {
+              "type": "string"
+            },
+            "name": "kuery",
+            "in": "query",
+            "required": false
           }
         ]
       }

x-pack/plugins/fleet/common/openapi/bundled.yaml

@@ -672,6 +672,11 @@ paths:
           name: policyId
           in: query
           required: false
+        - schema:
+            type: string
+          name: kuery
+          in: query
+          required: false
   /agents:
     get:
       summary: Agents - List

x-pack/plugins/fleet/common/openapi/paths/agent_status.yaml

@@ -41,3 +41,8 @@ get:
       name: policyId
       in: query
       required: false
+    - schema:
+        type: string
+      name: kuery
+      in: query
+      required: false

x-pack/plugins/fleet/public/components/agent_enrollment_flyout/confirm_agent_enrollment.tsx

@@ -0,0 +1,57 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+import { EuiCallOut, EuiButton } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+
+import { useGetAgentStatus } from '../../hooks';
+import { AGENTS_PREFIX } from '../../constants';
+interface Props {
+  policyId: string;
+  onClickViewAgents: () => void;
+}
+
+export const ConfirmAgentEnrollment: React.FunctionComponent<Props> = ({
+  policyId,
+  onClickViewAgents,
+}) => {
+  // Check the agents enrolled in the last 10 minutes
+  const enrolledAt = 'now-10m';
+  const kuery = `${AGENTS_PREFIX}.enrolled_at >= "${enrolledAt}"`;
+  const agentStatusRequest = useGetAgentStatus({ kuery, policyId });
+  const agentsCount = agentStatusRequest.data?.results?.total;
+
+  if (!agentsCount) {
+    return null;
+  }
+
+  return (
+    <EuiCallOut
+      data-test-subj="ConfirmAgentEnrollmentCallOut"
+      title={i18n.translate('xpack.fleet.agentEnrollment.confirmation.title', {
+        defaultMessage:
+          '{agentsCount} {agentsCount, plural, one {agent has} other {agents have}} been enrolled.',
+        values: {
+          agentsCount,
+        },
+      })}
+      color="success"
+      iconType="check"
+    >
+      <EuiButton
+        onClick={onClickViewAgents}
+        color="success"
+        data-test-subj="ConfirmAgentEnrollmentButton"
+      >
+        {i18n.translate('xpack.fleet.agentEnrollment.confirmation.button', {
+          defaultMessage: 'View enrolled agents',
+        })}
+      </EuiButton>
+    </EuiCallOut>
+  );
+};

x-pack/plugins/fleet/server/routes/agent/handlers.ts

@@ -204,9 +204,7 @@ export const getAgentStatusForAgentPolicyHandler: RequestHandler<
   TypeOf<typeof GetAgentStatusRequestSchema.query>
 > = async (context, request, response) => {
   const esClient = context.core.elasticsearch.client.asInternalUser;
-
   try {
-    // TODO change path
     const results = await AgentService.getAgentStatusForAgentPolicy(
       esClient,
       request.query.policyId,