Closes #60265. Adds Beta badge to service map (#60482)

elastic · Mar 18, 2020 · 6abb9d7 · 6abb9d7
1 parent a708d69
commit 6abb9d7
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 22 deletions.
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
@@ -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() {
     <EuiFlexGroup
       alignItems="center"
       justifyContent="spaceAround"
-      style={style}
+      style={flexGroupStyle}
     >
-      <EuiFlexItem grow={false}>
-        <EuiPanel grow={false} hasShadow={true}>
-          <EuiEmptyPrompt
-            actions={[
-              <EuiButton fill={true} href={licensePageUrl}>
-                {i18n.translate(
-                  'xpack.apm.serviceMap.licensePromptButtonText',
-                  {
-                    defaultMessage: 'Start 30-day Platinum trial'
-                  }
-                )}
-              </EuiButton>
-            ]}
-            body={<p>{invalidLicenseMessage}</p>}
-            title={
+      <EuiFlexItem grow={false} style={flexItemStyle}>
+        <EuiPanel grow={false} hasShadow={true} paddingSize="none">
+          <EuiPanel
+            betaBadgeLabel={i18n.translate('xpack.apm.serviceMap.betaBadge', {
+              defaultMessage: 'Beta'
+            })}
+            betaBadgeTooltipContent={i18n.translate(
+              'xpack.apm.serviceMap.betaTooltipMessage',
+              {
+                defaultMessage:
+                  'This feature is currently in beta. If you encounter any bugs or have feedback, please open an issue or visit our discussion forum.'
+              }
+            )}
+          >
+            <EuiSpacer size="l" />
+            <EuiTitle>
               <h2>
                 {i18n.translate('xpack.apm.serviceMap.licensePromptTitle', {
                   defaultMessage: 'Service maps is available in Platinum.'
                 })}
               </h2>
-            }
-          />
+            </EuiTitle>
+            <EuiSpacer size="m" />
+            <EuiText grow={false}>
+              <p>{invalidLicenseMessage}</p>
+            </EuiText>
+            <EuiSpacer size="l" />
+            <EuiButton href={licensePageUrl} fill={true}>
+              {i18n.translate('xpack.apm.serviceMap.licensePromptButtonText', {
+                defaultMessage: 'Start 30-day Platinum trial'
+              })}
+            </EuiButton>
+          </EuiPanel>
         </EuiPanel>
       </EuiFlexItem>
     </EuiFlexGroup>

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
@@ -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) {
         <Controls />
         {serviceName && <EmptyBanner />}
         <Popover focusedServiceName={serviceName} />
+        <BetaBadgeContainer>
+          <EuiBetaBadge
+            label={i18n.translate('xpack.apm.serviceMap.betaBadge', {
+              defaultMessage: 'Beta'
+            })}
+            tooltipContent={i18n.translate(
+              'xpack.apm.serviceMap.betaTooltipMessage',
+              {
+                defaultMessage:
+                  'This feature is currently in beta. If you encounter any bugs or have feedback, please open an issue or visit our discussion forum.'
+              }
+            )}
+          />
+        </BetaBadgeContainer>
       </Cytoscape>
     </div>
   ) : (