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 && } + + + ) : (