[APM] Moves correlations button to service details tabslist row (#91080)

elastic · Feb 16, 2021 · 0f09c0b · 0f09c0b
1 parent cab10a2
commit 0f09c0b
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 20 deletions.
diff --git a/x-pack/plugins/apm/public/components/app/correlations/index.tsx b/x-pack/plugins/apm/public/components/app/correlations/index.tsx
@@ -65,12 +65,10 @@ export function Correlations() {
         iconType="visTagCloud"
       >
         {i18n.translate('xpack.apm.correlations.buttonLabel', {
-          defaultMessage: 'Explore correlations',
+          defaultMessage: 'View correlations',
         })}
       </EuiButton>
 
-      <EuiSpacer size="s" />
-
       {isFlyoutVisible && (
         <EuiPortal>
           <EuiFlyout
@@ -81,14 +79,20 @@ export function Correlations() {
             <EuiFlyoutHeader hasBorder aria-labelledby="correlations-flyout">
               <EuiTitle>
                 <h2 id="correlations-flyout">
-                  {i18n.translate('xpack.apm.correlations.title', {
-                    defaultMessage: 'Correlations',
-                  })}
+                  {CORRELATIONS_TITLE}
                   &nbsp;
                   <EuiBetaBadge
-                    label="Beta"
-                    title="Correlations"
-                    tooltipContent="Correlations is not GA. Please help us by reporting any bugs."
+                    label={i18n.translate('xpack.apm.correlations.betaLabel', {
+                      defaultMessage: 'Beta',
+                    })}
+                    title={CORRELATIONS_TITLE}
+                    tooltipContent={i18n.translate(
+                      'xpack.apm.correlations.betaDescription',
+                      {
+                        defaultMessage:
+                          'Correlations is not GA. Please help us by reporting any bugs.',
+                      }
+                    )}
                   />
                 </h2>
               </EuiTitle>
@@ -142,3 +146,7 @@ export function Correlations() {
     </>
   );
 }
+
+const CORRELATIONS_TITLE = i18n.translate('xpack.apm.correlations.title', {
+  defaultMessage: 'Correlations',
+});
diff --git a/x-pack/plugins/apm/public/components/app/service_details/service_detail_tabs.tsx b/x-pack/plugins/apm/public/components/app/service_details/service_detail_tabs.tsx
@@ -26,6 +26,7 @@ import { ServiceNodeOverview } from '../service_node_overview';
 import { ServiceMetrics } from '../service_metrics';
 import { ServiceOverview } from '../service_overview';
 import { TransactionOverview } from '../transaction_overview';
+import { Correlations } from '../correlations';
 
 interface Tab {
   key: string;
@@ -137,6 +138,9 @@ export function ServiceDetailTabs({ serviceName, tab }: Props) {
             {text}
           </EuiTab>
         ))}
+        <div style={{ marginLeft: 'auto' }}>
+          <Correlations />
+        </div>
       </MainTabs>
       {selectedTab ? selectedTab.render() : null}
     </>

diff --git a/x-pack/plugins/apm/public/components/shared/search_bar.tsx b/x-pack/plugins/apm/public/components/shared/search_bar.tsx
@@ -13,9 +13,6 @@ import { DatePicker } from './DatePicker';
 import { KueryBar } from './KueryBar';
 import { TimeComparison } from './time_comparison';
 import { useBreakPoints } from '../../hooks/use_break_points';
-import { Correlations } from '../app/correlations';
-import { isActivePlatinumLicense } from '../../../common/license_check';
-import { useLicenseContext } from '../../context/license/use_license_context';
 
 const SearchBarFlexGroup = euiStyled(EuiFlexGroup)`
   margin: ${({ theme }) =>
@@ -37,9 +34,6 @@ export function SearchBar({
   showTimeComparison = false,
   showCorrelations = false,
 }: Props) {
-  const license = useLicenseContext();
-  const hasActivePlatinumLicense = isActivePlatinumLicense(license);
-
   const { isMedium, isLarge } = useBreakPoints();
   const itemsStyle = { marginBottom: isLarge ? px(unit) : 0 };
 
@@ -64,11 +58,6 @@ export function SearchBar({
           </EuiFlexItem>
         </EuiFlexGroup>
       </EuiFlexItem>
-      {showCorrelations && hasActivePlatinumLicense && (
-        <EuiFlexItem grow={false}>
-          <Correlations />
-        </EuiFlexItem>
-      )}
     </SearchBarFlexGroup>
   );
 }