[Fleet] Improve fleet server upgrade modal (elastic#99796)

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

@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import {
   EuiButton,
   EuiCheckbox,
@@ -24,7 +24,15 @@ import {
 import { FormattedMessage } from '@kbn/i18n/react';
 import { i18n } from '@kbn/i18n';
 
-import { sendPutSettings, useLink, useStartServices } from '../../../hooks';
+import {
+  sendGetAgents,
+  sendGetOneAgentPolicy,
+  sendPutSettings,
+  useLink,
+  useStartServices,
+} from '../../../hooks';
+import type { PackagePolicy } from '../../../types';
+import { FLEET_SERVER_PACKAGE } from '../../../constants';
 
 interface Props {
   onClose: () => void;
@@ -37,6 +45,56 @@ export const FleetServerUpgradeModal: React.FunctionComponent<Props> = ({ onClos
   const isCloud = !!cloud?.cloudId;
 
   const [checked, setChecked] = useState(false);
+  const [isAgentsAndPoliciesLoaded, setAgentsAndPoliciesLoaded] = useState(false);
+
+  // Check if an other agent than the fleet server is already enrolled
+  useEffect(() => {
+    async function check() {
+      try {
+        const agentPoliciesAlreadyChecked: { [k: string]: boolean } = {};
+
+        const res = await sendGetAgents({
+          page: 1,
+          perPage: 10,
+          showInactive: false,
+        });
+
+        if (res.error) {
+          throw res.error;
+        }
+
+        for (const agent of res.data?.list ?? []) {
+          if (!agent.policy_id || agentPoliciesAlreadyChecked[agent.policy_id]) {
+            continue;
+          }
+
+          agentPoliciesAlreadyChecked[agent.policy_id] = true;
+          const policyRes = await sendGetOneAgentPolicy(agent.policy_id);
+          const hasFleetServer =
+            (policyRes.data?.item.package_policies as PackagePolicy[]).some((p: PackagePolicy) => {
+              return p.package?.name === FLEET_SERVER_PACKAGE;
+            }) ?? false;
+          if (!hasFleetServer) {
+            await sendPutSettings({
+              has_seen_fleet_migration_notice: true,
+            });
+            onClose();
+            return;
+          }
+        }
+        setAgentsAndPoliciesLoaded(true);
+      } catch (err) {
+        notifications.toasts.addError(err, {
+          title: i18n.translate('xpack.fleet.fleetServerUpgradeModal.errorLoadingAgents', {
+            defaultMessage: `Error loading agents`,
+          }),
+        });
+      }
+    }
+
+    check();
+  }, [notifications.toasts, onClose]);
+
   const onChange = useCallback(async () => {
     try {
       setChecked(!checked);
@@ -52,18 +110,23 @@ export const FleetServerUpgradeModal: React.FunctionComponent<Props> = ({ onClos
     }
   }, [checked, setChecked, notifications]);
 
+  if (!isAgentsAndPoliciesLoaded) {
+    return null;
+  }
+
   return (
     <EuiModal onClose={onClose}>
       <EuiModalHeader>
         <EuiModalHeaderTitle>
           <FormattedMessage
             id="xpack.fleet.fleetServerUpgradeModal.modalTitle"
-            defaultMessage="This version of Fleet requires a Fleet Server"
+            defaultMessage="Enroll your agents into Fleet Server"
           />
         </EuiModalHeaderTitle>
       </EuiModalHeader>
       <EuiModalBody>
         <EuiImage
+          size="fullWidth"
           src={getAssetsPath('./announcement.jpg')}
           alt={i18n.translate('xpack.fleet.fleetServerUpgradeModal.announcementImageAlt', {
             defaultMessage: 'Fleet Server upgrade announcement',
@@ -74,7 +137,7 @@ export const FleetServerUpgradeModal: React.FunctionComponent<Props> = ({ onClos
           {isCloud ? (
             <FormattedMessage
               id="xpack.fleet.fleetServerUpgradeModal.cloudDescriptionMessage"
-              defaultMessage="Fleet Server is now available and it provides improved scalability and security. If you already had APM on Elastic Cloud, we've upgraded it to APM & Fleet. {existingAgentsMessage} To continue using Fleet, you must install a Fleet Server and the new version of Elastic Agent on each host. Learn more in our {link}."
+              defaultMessage="Fleet Server is now available and it provides improved scalability and security. If you already had an APM instance on Elastic Cloud, we've upgraded it to APM & Fleet. If not, you can add one to your deployment for free. {existingAgentsMessage} To continue using Fleet, you must use Fleet Server and install the new version of Elastic Agent on each host."
               values={{
                 existingAgentsMessage: (
                   <strong>
@@ -84,17 +147,6 @@ export const FleetServerUpgradeModal: React.FunctionComponent<Props> = ({ onClos
                     />
                   </strong>
                 ),
-                link: (
-                  <EuiLink
-                    href="https://www.elastic.co/guide/en/fleet/current/upgrade-elastic-agent.html"
-                    external={true}
-                  >
-                    <FormattedMessage
-                      id="xpack.fleet.fleetServerUpgradeModal.fleetServerMigrationGuide"
-                      defaultMessage="Fleet Server migration guide"
-                    />
-                  </EuiLink>
-                ),
               }}
             />
           ) : (

x-pack/plugins/translations/translations/ja-JP.json

@@ -9514,7 +9514,6 @@
     "xpack.fleet.fleetServerUpgradeModal.breakingChangeMessage": "これは大きい変更であるため、ベータリリースにしています。ご不便をおかけしていることをお詫び申し上げます。ご質問がある場合や、サポートが必要な場合は、{link}を共有してください。",
     "xpack.fleet.fleetServerUpgradeModal.checkboxLabel": "次回以降このメッセージを表示しない",
     "xpack.fleet.fleetServerUpgradeModal.closeButton": "閉じて開始する",
-    "xpack.fleet.fleetServerUpgradeModal.cloudDescriptionMessage": "Fleetサーバーを使用できます。スケーラビリティとセキュリティが強化されました。すでにElastic CloudでAPMを使用している場合は、APM & Fleetにアップグレードされました。{existingAgentsMessage} Fleetを使用し続けるには、Fleetサーバーと新しいバージョンのElasticエージェントを各ホストにインストールする必要があります。詳細については、{link}をご覧ください。",
     "xpack.fleet.fleetServerUpgradeModal.existingAgentText": "既存のElasticエージェントは自動的に登録解除され、データの送信を停止しました。",
     "xpack.fleet.fleetServerUpgradeModal.failedUpdateTitle": "設定の保存エラー",
     "xpack.fleet.fleetServerUpgradeModal.fleetFeedbackLink": "フィードバック",

x-pack/plugins/translations/translations/zh-CN.json

@@ -9603,7 +9603,6 @@
     "xpack.fleet.fleetServerUpgradeModal.breakingChangeMessage": "这是一项重大更改，所以我们在公测版中进行该更改。非常抱歉带来不便。如果您有疑问或需要帮助，请共享 {link}。",
     "xpack.fleet.fleetServerUpgradeModal.checkboxLabel": "不再显示此消息",
     "xpack.fleet.fleetServerUpgradeModal.closeButton": "关闭并开始使用",
-    "xpack.fleet.fleetServerUpgradeModal.cloudDescriptionMessage": "Fleet 服务器现在可用并提供改善的可扩展性和安全性。如果在 Elastic Cloud 上已有 APM，则我们已将其升级到 APM & Fleet。{existingAgentsMessage}要继续使用 Fleet，必须在各个主机上安装 Fleet 服务器和新版 Elastic 代理。详细了解我们的 {link}。",
     "xpack.fleet.fleetServerUpgradeModal.existingAgentText": "您现有的 Elastic 代理已被自动销注且已停止发送数据。",
     "xpack.fleet.fleetServerUpgradeModal.failedUpdateTitle": "保存设置时出错",
     "xpack.fleet.fleetServerUpgradeModal.fleetFeedbackLink": "反馈",