diff --git a/x-pack/legacy/plugins/apm/public/components/app/ServiceMap/PlatinumLicensePrompt.tsx b/x-pack/legacy/plugins/apm/public/components/app/ServiceMap/PlatinumLicensePrompt.tsx
index 9213349a1492b..77f0b64ba0fb1 100644
--- a/x-pack/legacy/plugins/apm/public/components/app/ServiceMap/PlatinumLicensePrompt.tsx
+++ b/x-pack/legacy/plugins/apm/public/components/app/ServiceMap/PlatinumLicensePrompt.tsx
@@ -6,10 +6,12 @@
import {
EuiButton,
- EuiEmptyPrompt,
+ EuiPanel,
EuiFlexGroup,
EuiFlexItem,
- EuiPanel
+ EuiTitle,
+ EuiText,
+ EuiSpacer
} from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import React from 'react';
@@ -18,7 +20,8 @@ import { useKibanaUrl } from '../../../hooks/useKibanaUrl';
export function PlatinumLicensePrompt() {
// Set the height to give it some top margin
- const style = { height: '60vh' };
+ const flexGroupStyle = { height: '60vh' };
+ const flexItemStyle = { width: 600, textAlign: 'center' as const };
const licensePageUrl = useKibanaUrl(
'/app/kibana',
@@ -29,30 +32,41 @@ export function PlatinumLicensePrompt() {
-
-
-
- {i18n.translate(
- 'xpack.apm.serviceMap.licensePromptButtonText',
- {
- defaultMessage: 'Start 30-day Platinum trial'
- }
- )}
-
- ]}
- body={{invalidLicenseMessage}
}
- title={
+
+
+
+
+
{i18n.translate('xpack.apm.serviceMap.licensePromptTitle', {
defaultMessage: 'Service maps is available in Platinum.'
})}
- }
- />
+
+
+
+ {invalidLicenseMessage}
+
+
+
+ {i18n.translate('xpack.apm.serviceMap.licensePromptButtonText', {
+ defaultMessage: 'Start 30-day Platinum trial'
+ })}
+
+
diff --git a/x-pack/legacy/plugins/apm/public/components/app/ServiceMap/index.tsx b/x-pack/legacy/plugins/apm/public/components/app/ServiceMap/index.tsx
index 1b0486d7d6def..93aa3d406028c 100644
--- a/x-pack/legacy/plugins/apm/public/components/app/ServiceMap/index.tsx
+++ b/x-pack/legacy/plugins/apm/public/components/app/ServiceMap/index.tsx
@@ -15,6 +15,8 @@ import React, {
useRef,
useState
} from 'react';
+import { EuiBetaBadge } from '@elastic/eui';
+import styled from 'styled-components';
import { isValidPlatinumLicense } from '../../../../../../../plugins/apm/common/service_map';
// eslint-disable-next-line @kbn/eslint/no-restricted-paths
import { ServiceMapAPIResponse } from '../../../../../../../plugins/apm/server/lib/service_map/get_service_map';
@@ -56,7 +58,12 @@ ${theme.euiColorLightShade}`,
margin: `-${theme.gutterTypes.gutterLarge}`,
marginTop: 0
};
-
+const BetaBadgeContainer = styled.div`
+ right: ${theme.gutterTypes.gutterMedium};
+ position: absolute;
+ top: ${theme.gutterTypes.gutterSmall};
+ z-index: 1; /* The element containing the cytoscape canvas has z-index = 0. */
+`;
const MAX_REQUESTS = 5;
export function ServiceMap({ serviceName }: ServiceMapProps) {
@@ -184,6 +191,20 @@ export function ServiceMap({ serviceName }: ServiceMapProps) {
{serviceName && }
+
+
+
) : (