[APM] APM-Fleet integration version check & upgrade message (#115297)

x-pack/plugins/apm/common/fleet.ts

@@ -6,3 +6,5 @@
  */
 
 export const POLICY_ELASTIC_AGENT_ON_CLOUD = 'policy-elastic-agent-on-cloud';
+
+export const SUPPORTED_APM_PACKAGE_VERSION = '7.16.0';

x-pack/plugins/apm/public/components/app/Settings/schema/index.tsx

@@ -54,7 +54,8 @@ export function Schema() {
   const isLoading = status !== FETCH_STATUS.SUCCESS;
   const cloudApmMigrationEnabled = !!data.cloud_apm_migration_enabled;
   const hasCloudAgentPolicy = !!data.has_cloud_agent_policy;
-  const hasCloudApmPackagePolicy = !!data.has_cloud_apm_package_policy;
+  const cloudApmPackagePolicy = data.cloud_apm_package_policy;
+  const hasCloudApmPackagePolicy = !!cloudApmPackagePolicy;
   const hasRequiredRole = !!data.has_required_role;
 
   function updateLocalStorage(newStatus: FETCH_STATUS) {
@@ -90,6 +91,7 @@ export function Schema() {
         cloudApmMigrationEnabled={cloudApmMigrationEnabled}
         hasCloudAgentPolicy={hasCloudAgentPolicy}
         hasRequiredRole={hasRequiredRole}
+        cloudApmPackagePolicy={cloudApmPackagePolicy}
       />
       {isSwitchActive && (
         <ConfirmSwitchModal

x-pack/plugins/apm/public/components/app/Settings/schema/migrated/card_footer_content.tsx

@@ -0,0 +1,47 @@
+/*
+ * 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 { EuiButton, EuiSpacer, EuiText } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import { FormattedMessage } from '@kbn/i18n/react';
+import React from 'react';
+import { APMLink } from '../../../../shared/Links/apm/APMLink';
+import { useFleetCloudAgentPolicyHref } from '../../../../shared/Links/kibana';
+
+export function CardFooterContent() {
+  const fleetCloudAgentPolicyHref = useFleetCloudAgentPolicyHref();
+
+  return (
+    <div>
+      <EuiButton href={fleetCloudAgentPolicyHref}>
+        {i18n.translate(
+          'xpack.apm.settings.schema.success.viewIntegrationInFleet.buttonText',
+          { defaultMessage: 'View the APM integration in Fleet' }
+        )}
+      </EuiButton>
+      <EuiSpacer size="xs" />
+      <EuiText size="s">
+        <p>
+          <FormattedMessage
+            id="xpack.apm.settings.schema.success.returnText"
+            defaultMessage="or simply return to the {serviceInventoryLink}."
+            values={{
+              serviceInventoryLink: (
+                <APMLink path="/services">
+                  {i18n.translate(
+                    'xpack.apm.settings.schema.success.returnText.serviceInventoryLink',
+                    { defaultMessage: 'Service inventory' }
+                  )}
+                </APMLink>
+              ),
+            }}
+          />
+        </p>
+      </EuiText>
+    </div>
+  );
+}

x-pack/plugins/apm/public/components/app/Settings/schema/migrated/successful_migration_card.tsx

@@ -0,0 +1,30 @@
+/*
+ * 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 { EuiCard, EuiIcon } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import React from 'react';
+import { CardFooterContent } from './card_footer_content';
+
+export function SuccessfulMigrationCard() {
+  return (
+    <EuiCard
+      icon={<EuiIcon size="xxl" type="checkInCircleFilled" color="success" />}
+      title={i18n.translate('xpack.apm.settings.schema.success.title', {
+        defaultMessage: 'Elastic Agent successfully setup!',
+      })}
+      description={i18n.translate(
+        'xpack.apm.settings.schema.success.description',
+        {
+          defaultMessage:
+            'Your APM integration is now setup and ready to receive data from your currently instrumented agents. Feel free to review the policies applied to your integtration.',
+        }
+      )}
+      footer={<CardFooterContent />}
+    />
+  );
+}

x-pack/plugins/apm/public/components/app/Settings/schema/migrated/upgrade_available_card.tsx

@@ -0,0 +1,51 @@
+/*
+ * 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 { EuiCard, EuiIcon, EuiLink } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import { FormattedMessage } from '@kbn/i18n/react';
+import React from 'react';
+import { useUpgradeApmPackagePolicyHref } from '../../../../shared/Links/kibana';
+import { CardFooterContent } from './card_footer_content';
+
+export function UpgradeAvailableCard({
+  apmPackagePolicyId,
+}: {
+  apmPackagePolicyId: string | undefined;
+}) {
+  const upgradeApmPackagePolicyHref =
+    useUpgradeApmPackagePolicyHref(apmPackagePolicyId);
+
+  return (
+    <EuiCard
+      icon={<EuiIcon size="xxl" type="alert" color="warning" />}
+      title={i18n.translate(
+        'xpack.apm.settings.schema.upgradeAvailable.title',
+        {
+          defaultMessage: 'APM integration upgrade available!',
+        }
+      )}
+      description={
+        <FormattedMessage
+          id="xpack.apm.settings.upgradeAvailable.description"
+          defaultMessage="Even though your APM integration is setup, a new version of the APM integration is available for upgrade with your package policy. {upgradePackagePolicyLink} to get the most out of your setup."
+          values={{
+            upgradePackagePolicyLink: (
+              <EuiLink href={upgradeApmPackagePolicyHref}>
+                {i18n.translate(
+                  'xpack.apm.settings.schema.upgradeAvailable.upgradePackagePolicyLink',
+                  { defaultMessage: 'Upgrade your APM integration' }
+                )}
+              </EuiLink>
+            ),
+          }}
+        />
+      }
+      footer={<CardFooterContent />}
+    />
+  );
+}

x-pack/plugins/apm/public/components/app/Settings/schema/schema_overview.tsx

@@ -19,11 +19,14 @@ import {
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 import React from 'react';
-import { APMLink } from '../../../shared/Links/apm/APMLink';
+import semverLt from 'semver/functions/lt';
+import { SUPPORTED_APM_PACKAGE_VERSION } from '../../../../../common/fleet';
+import { PackagePolicy } from '../../../../../../fleet/common/types';
 import { ElasticDocsLink } from '../../../shared/Links/ElasticDocsLink';
-import { useFleetCloudAgentPolicyHref } from '../../../shared/Links/kibana';
 import rocketLaunchGraphic from './blog-rocket-720x420.png';
 import { MigrationInProgressPanel } from './migration_in_progress_panel';
+import { UpgradeAvailableCard } from './migrated/upgrade_available_card';
+import { SuccessfulMigrationCard } from './migrated/successful_migration_card';
 
 interface Props {
   onSwitch: () => void;
@@ -34,6 +37,7 @@ interface Props {
   cloudApmMigrationEnabled: boolean;
   hasCloudAgentPolicy: boolean;
   hasRequiredRole: boolean;
+  cloudApmPackagePolicy: PackagePolicy | undefined;
 }
 export function SchemaOverview({
   onSwitch,
@@ -44,10 +48,13 @@ export function SchemaOverview({
   cloudApmMigrationEnabled,
   hasCloudAgentPolicy,
   hasRequiredRole,
+  cloudApmPackagePolicy,
 }: Props) {
-  const fleetCloudAgentPolicyHref = useFleetCloudAgentPolicyHref();
   const isDisabled =
     !cloudApmMigrationEnabled || !hasCloudAgentPolicy || !hasRequiredRole;
+  const packageVersion = cloudApmPackagePolicy?.package?.version;
+  const isUpgradeAvailable =
+    packageVersion && semverLt(packageVersion, SUPPORTED_APM_PACKAGE_VERSION);
 
   if (isLoading) {
     return (
@@ -76,54 +83,13 @@ export function SchemaOverview({
         <EuiFlexGroup justifyContent="center">
           <EuiFlexItem />
           <EuiFlexItem grow={2}>
-            <EuiCard
-              icon={
-                <EuiIcon
-                  size="xxl"
-                  type="checkInCircleFilled"
-                  color="success"
-                />
-              }
-              title={i18n.translate('xpack.apm.settings.schema.success.title', {
-                defaultMessage: 'Elastic Agent successfully setup!',
-              })}
-              description={i18n.translate(
-                'xpack.apm.settings.schema.success.description',
-                {
-                  defaultMessage:
-                    'Your APM integration is now setup and ready to receive data from your currently instrumented agents. Feel free to review the policies applied to your integtration.',
-                }
-              )}
-              footer={
-                <div>
-                  <EuiButton href={fleetCloudAgentPolicyHref}>
-                    {i18n.translate(
-                      'xpack.apm.settings.schema.success.viewIntegrationInFleet.buttonText',
-                      { defaultMessage: 'View the APM integration in Fleet' }
-                    )}
-                  </EuiButton>
-                  <EuiSpacer size="xs" />
-                  <EuiText size="s">
-                    <p>
-                      <FormattedMessage
-                        id="xpack.apm.settings.schema.success.returnText"
-                        defaultMessage="or simply return to the {serviceInventoryLink}."
-                        values={{
-                          serviceInventoryLink: (
-                            <APMLink path="/services">
-                              {i18n.translate(
-                                'xpack.apm.settings.schema.success.returnText.serviceInventoryLink',
-                                { defaultMessage: 'Service inventory' }
-                              )}
-                            </APMLink>
-                          ),
-                        }}
-                      />
-                    </p>
-                  </EuiText>
-                </div>
-              }
-            />
+            {isUpgradeAvailable ? (
+              <UpgradeAvailableCard
+                apmPackagePolicyId={cloudApmPackagePolicy?.id}
+              />
+            ) : (
+              <SuccessfulMigrationCard />
+            )}
           </EuiFlexItem>
           <EuiFlexItem />
         </EuiFlexGroup>

x-pack/plugins/apm/public/components/shared/Links/kibana.ts

@@ -26,3 +26,14 @@ export function useFleetCloudAgentPolicyHref() {
   } = useApmPluginContext();
   return basePath.prepend('/app/fleet#/policies/policy-elastic-agent-on-cloud');
 }
+
+export function useUpgradeApmPackagePolicyHref(packagePolicyId = '') {
+  const {
+    core: {
+      http: { basePath },
+    },
+  } = useApmPluginContext();
+  return basePath.prepend(
+    `/app/fleet/policies/policy-elastic-agent-on-cloud/upgrade-package-policy/${packagePolicyId}?from=integrations-policy-list`
+  );
+}

x-pack/plugins/apm/server/lib/fleet/get_apm_package_policy_definition.ts

@@ -5,7 +5,10 @@
  * 2.0.
  */
 
-import { POLICY_ELASTIC_AGENT_ON_CLOUD } from '../../../common/fleet';
+import {
+  POLICY_ELASTIC_AGENT_ON_CLOUD,
+  SUPPORTED_APM_PACKAGE_VERSION,
+} from '../../../common/fleet';
 import { APMPluginSetupDependencies } from '../../types';
 import { APM_PACKAGE_NAME } from './get_cloud_apm_package_policy';
 
@@ -36,7 +39,7 @@ export function getApmPackagePolicyDefinition(
     ],
     package: {
       name: APM_PACKAGE_NAME,
-      version: '0.4.0',
+      version: SUPPORTED_APM_PACKAGE_VERSION,
       title: 'Elastic APM',
     },
   };

x-pack/plugins/apm/server/routes/fleet.ts

@@ -92,7 +92,7 @@ const fleetAgentsRoute = createApmServerRoute({
 });
 
 const saveApmServerSchemaRoute = createApmServerRoute({
-  endpoint: 'POST /internal/apm/fleet/apm_server_schema',
+  endpoint: 'POST /api/apm/fleet/apm_server_schema',
   options: { tags: ['access:apm', 'access:apm_write'] },
   params: t.type({
     body: t.type({
@@ -143,11 +143,13 @@ const getMigrationCheckRoute = createApmServerRoute({
           fleetPluginStart,
         })
       : undefined;
+    const apmPackagePolicy = getApmPackagePolicy(cloudAgentPolicy);
     return {
       has_cloud_agent_policy: !!cloudAgentPolicy,
-      has_cloud_apm_package_policy: !!getApmPackagePolicy(cloudAgentPolicy),
+      has_cloud_apm_package_policy: !!apmPackagePolicy,
       cloud_apm_migration_enabled: cloudApmMigrationEnabled,
       has_required_role: hasRequiredRole,
+      cloud_apm_package_policy: apmPackagePolicy,
     };
   },
 });