[APM] Kuery fixes (#21272)

* Links should have basepath

* Fix empty state messages

* Fix padding

* Fix beta label

* Change copy of beta label

* Small font size

x-pack/plugins/apm/public/components/app/ErrorGroupDetails/Distribution/index.js

@@ -32,7 +32,7 @@ function Distribution({ distribution }) {
   const isEmpty = distribution.totalHits === 0;
 
   if (isEmpty) {
-    return <EmptyMessage heading="No errors in the selected time range." />;
+    return <EmptyMessage heading="No errors were found" />;
   }
 
   return (

x-pack/plugins/apm/public/components/app/ErrorGroupDetails/view.js

@@ -13,7 +13,7 @@ import DetailView from './DetailView';
 import Distribution from './Distribution';
 import { KueryBar } from '../../shared/KueryBar';
 
-import { EuiText, EuiBadge } from '@elastic/eui';
+import { EuiText, EuiBadge, EuiSpacer } from '@elastic/eui';
 import {
   unit,
   units,
@@ -89,6 +89,8 @@ function ErrorGroupDetails({ urlParams, location }) {
 
             <KueryBar />
 
+            <EuiSpacer size="s" />
+
             {showDetails && (
               <Titles>
                 <EuiText>

x-pack/plugins/apm/public/components/app/Main/index.js

@@ -9,13 +9,13 @@ import styled from 'styled-components';
 import { Route, Switch } from 'react-router-dom';
 import { routes } from './routeConfig';
 import ScrollToTopOnPathChange from './ScrollToTopOnPathChange';
-import { px, units, unit, elements } from '../../../style/variables';
+import { px, units, unit, topNavHeight } from '../../../style/variables';
 import ConnectRouterToRedux from '../../shared/ConnectRouterToRedux';
 
 const MainContainer = styled.div`
   min-width: ${px(unit * 50)};
   padding: ${px(units.plus)};
-  min-height: calc(100vh - ${elements.topNav});
+  min-height: calc(100vh - ${topNavHeight});
 `;
 
 export default function Main() {

x-pack/plugins/apm/public/components/app/ServiceOverview/view.js

@@ -47,7 +47,7 @@ class ServiceOverview extends Component {
       <EmptyMessage
         heading={
           historicalDataFound
-            ? 'No services with data in the selected time range.'
+            ? 'No services were found'
             : "Looks like you don't have any services with APM installed. Let's add some!"
         }
         subheading={

x-pack/plugins/apm/public/components/app/TransactionDetails/Distribution/view.js

@@ -54,9 +54,7 @@ class Distribution extends Component {
     const unit = timeUnit(xMax);
 
     if (isEmpty) {
-      return (
-        <EmptyMessage heading="No transactions in the selected time range." />
-      );
+      return <EmptyMessage heading="No transactions were found." />;
     }
 
     const bucketIndex = buckets.findIndex(

x-pack/plugins/apm/public/components/app/TransactionDetails/Transaction/view.js

@@ -123,8 +123,8 @@ function Transaction({ transaction, location, urlParams }) {
   if (isEmpty(transaction)) {
     return (
       <EmptyMessage
-        heading="No transaction sample available for this time range."
-        subheading="Please select another time range or another bucket from the distribution histogram."
+        heading="No transaction sample available."
+        subheading="Try another time range, reset the search filter or select another bucket from the distribution histogram."
       />
     );
   }

x-pack/plugins/apm/public/components/app/TransactionDetails/view.js

@@ -5,6 +5,7 @@
  */
 
 import React from 'react';
+import { EuiSpacer } from '@elastic/eui';
 import { HeaderLarge } from '../../shared/UIComponents';
 import Transaction from './Transaction';
 import Distribution from './Distribution';
@@ -21,6 +22,8 @@ function TransactionDetails({ urlParams, location }) {
 
       <KueryBar />
 
+      <EuiSpacer size="s" />
+
       <DetailsChartsRequest
         urlParams={urlParams}
         render={({ data }) => (

x-pack/plugins/apm/public/components/app/TransactionOverview/DynamicBaseline/Flyout.js

@@ -21,7 +21,7 @@ import {
   EuiSpacer,
   EuiBetaBadge
 } from '@elastic/eui';
-import { getMlJobUrl } from '../../../../utils/url';
+import { getMlJobUrl, KibanaLink } from '../../../../utils/url';
 
 export default class DynamicBaselineFlyout extends Component {
   state = {
@@ -159,9 +159,12 @@ export default class DynamicBaselineFlyout extends Component {
                   <span>
                     No APM index pattern available. To create a job, please
                     import the APM index pattern via the{' '}
-                    <a href="/app/kibana#/home/tutorial/apm">
+                    <KibanaLink
+                      pathname={'/app/kibana'}
+                      hash={`/home/tutorial/apm`}
+                    >
                       Setup Instructions
-                    </a>
+                    </KibanaLink>
                   </span>
                 }
                 color="warning"

x-pack/plugins/apm/public/components/shared/EmptyMessage.js

@@ -4,49 +4,21 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React, { Fragment } from 'react';
-import styled from 'styled-components';
+import React from 'react';
 import PropTypes from 'prop-types';
-import { units, px, fontSizes, fontSize } from '../../style/variables';
-import { get } from 'lodash';
-import { KuiTableInfo } from '@kbn/ui-framework/components';
-import { APM_DOCS } from '../../utils/documentation';
-import { ExternalLink } from '../../utils/url';
-
-const Container = styled(KuiTableInfo)`
-  text-align: center;
-  font-size: ${fontSizes.large};
-`;
-
-const HelpMessage = styled.div`
-  text-align: center;
-  font-size: ${fontSize};
-  margin-top: ${px(units.half)};
-`;
+import { EuiEmptyPrompt } from '@elastic/eui';
 
 function EmptyMessage({ heading, subheading, hideSubheading }) {
   if (!subheading) {
-    subheading = (
-      <Fragment>
-        {
-          " Oops! You should try another time range. If that's no good, there's always the "
-        }
-        <ExternalLink href={get(APM_DOCS, 'get-started.url')}>
-          documentation.
-        </ExternalLink>
-      </Fragment>
-    );
+    subheading = 'Try another time range or reset the search filter.';
   }
 
   return (
-    <Container>
-      {heading || 'No data found.'}
-      {!hideSubheading && (
-        <HelpMessage>
-          <span>{subheading}</span>
-        </HelpMessage>
-      )}
-    </Container>
+    <EuiEmptyPrompt
+      titleSize="s"
+      title={<div>{heading || 'No data found.'}</div>}
+      body={!hideSubheading && subheading}
+    />
   );
 }
 

x-pack/plugins/apm/public/components/shared/KueryBar/Typeahead/index.js

@@ -6,6 +6,7 @@
 
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
+import styled from 'styled-components';
 import Suggestions from './Suggestions';
 import ClickOutside from './ClickOutside';
 import {
@@ -14,8 +15,9 @@ import {
   EuiFlexGroup,
   EuiFlexItem,
   EuiProgress,
-  EuiIconTip
+  EuiToolTip
 } from '@elastic/eui';
+import { units, fontSizes } from '../../../../style/variables';
 
 const KEY_CODES = {
   LEFT: 37,
@@ -27,6 +29,15 @@ const KEY_CODES = {
   TAB: 9
 };
 
+const BetaLabel = styled.div`
+  position: absolute;
+  top: 0;
+  right: 0;
+  font-size: ${fontSizes.small};
+  transform: translateY(calc(-100% - ${units.quarter}px));
+  cursor: pointer;
+`;
+
 export class Typeahead extends Component {
   state = {
     isSuggestionsVisible: false,
@@ -169,12 +180,18 @@ export class Typeahead extends Component {
       >
         <EuiFlexGroup alignItems="center">
           <EuiFlexItem style={{ position: 'relative' }}>
+            <BetaLabel>
+              <EuiToolTip content="The Query bar feature is still in beta. Help us report any issues or bugs by using the APM feedback link in the top.">
+                <div>Beta</div>
+              </EuiToolTip>
+            </BetaLabel>
+
             <EuiFieldSearch
               fullWidth
               style={{
                 backgroundImage: 'none'
               }}
-              placeholder="Search transactions or errors… (i.e. transaction.duration.us => 100000)"
+              placeholder="Search transactions and errors... (E.g. transaction.duration.us > 300000 AND context.response.status_code >= 400)"
               inputRef={node => {
                 if (node) {
                   this.inputRef = node;
@@ -207,12 +224,6 @@ export class Typeahead extends Component {
               Search
             </EuiButton>
           </EuiFlexItem>
-          <EuiFlexItem grow={false}>
-            <EuiIconTip
-              content="The Query bar feature is still in beta. Help us report any issues or bugs by using the APM feedback link in the top."
-              position="left"
-            />
-          </EuiFlexItem>
         </EuiFlexGroup>
 
         <Suggestions

x-pack/plugins/apm/public/components/shared/KueryBar/view.js

@@ -12,7 +12,8 @@ import {
   history,
   fromQuery,
   toQuery,
-  legacyEncodeURIComponent
+  legacyEncodeURIComponent,
+  KibanaLink
 } from '../../../utils/url';
 import { Typeahead } from './Typeahead';
 import { getAPMIndexPattern } from '../../../services/rest/savedObjects';
@@ -108,7 +109,12 @@ class KueryBarView extends Component {
               <div>
                 There&#39;s no APM index pattern available. To use the Query
                 bar, please choose to import the APM index pattern in the{' '}
-                <a href="/app/kibana#/home/tutorial/apm">Setup Instructions.</a>
+                <KibanaLink
+                  pathname={'/app/kibana'}
+                  hash={`/home/tutorial/apm`}
+                >
+                  Setup Instructions.
+                </KibanaLink>
               </div>
             }
             color="warning"

x-pack/plugins/apm/public/style/variables.js

@@ -92,6 +92,4 @@ export function truncate(width) {
 }
 
 // height of specific elements
-export const elements = {
-  topNav: '29px'
-};
+export const topNavHeight = '29px';