[6.4] [APM] Kuery fixes (#21272) | Update beta color and remove searc…

…h button (#21643) (#21672) * [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 * Update beta color and remove search button (#21643)
elastic · Aug 4, 2018 · 6cd267a · 6cd267a
1 parent b46de1e
commit 6cd267a
Show file tree

Hide file tree

Showing 12 changed files with 86 additions and 106 deletions.
diff --git a/x-pack/plugins/apm/public/components/app/ErrorGroupDetails/Distribution/index.js b/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 (

diff --git a/x-pack/plugins/apm/public/components/app/ErrorGroupDetails/view.js b/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>

diff --git a/x-pack/plugins/apm/public/components/app/Main/index.js b/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() {

diff --git a/x-pack/plugins/apm/public/components/app/ServiceOverview/view.js b/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={

diff --git a/x-pack/plugins/apm/public/components/app/TransactionDetails/Distribution/view.js b/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(

diff --git a/x-pack/plugins/apm/public/components/app/TransactionDetails/Transaction/view.js b/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."
       />
     );
   }

diff --git a/x-pack/plugins/apm/public/components/app/TransactionDetails/view.js b/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 }) => (

diff --git a/x-pack/plugins/apm/public/components/app/TransactionOverview/DynamicBaseline/Flyout.js b/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"

diff --git a/x-pack/plugins/apm/public/components/shared/EmptyMessage.js b/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}
+    />
   );
 }
 

diff --git a/x-pack/plugins/apm/public/components/shared/KueryBar/Typeahead/index.js b/x-pack/plugins/apm/public/components/shared/KueryBar/Typeahead/index.js
@@ -6,16 +6,11 @@
 
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
+import styled from 'styled-components';
 import Suggestions from './Suggestions';
 import ClickOutside from './ClickOutside';
-import {
-  EuiButton,
-  EuiFieldSearch,
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiProgress,
-  EuiIconTip
-} from '@elastic/eui';
+import { EuiFieldSearch, EuiProgress, EuiToolTip } from '@elastic/eui';
+import { units, fontSizes, colors } from '../../../../style/variables';
 
 const KEY_CODES = {
   LEFT: 37,
@@ -27,6 +22,16 @@ 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;
+  color: ${colors.gray2};
+`;
+
 export class Typeahead extends Component {
   state = {
     isSuggestionsVisible: false,
@@ -167,53 +172,46 @@ export class Typeahead extends Component {
         onClickOutside={this.onClickOutside}
         style={{ position: 'relative' }}
       >
-        <EuiFlexGroup alignItems="center">
-          <EuiFlexItem style={{ position: 'relative' }}>
-            <EuiFieldSearch
-              fullWidth
+        <div 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 and errors... (E.g. transaction.duration.us > 300000 AND context.response.status_code >= 400)"
+            inputRef={node => {
+              if (node) {
+                this.inputRef = node;
+              }
+            }}
+            disabled={this.props.disabled}
+            value={this.state.value}
+            onKeyDown={this.onKeyDown}
+            onKeyUp={this.onKeyUp}
+            onChange={this.onChangeInputValue}
+            onClick={this.onClickInput}
+            autoComplete="off"
+            spellCheck={false}
+          />
+
+          {this.props.isLoading && (
+            <EuiProgress
+              size="xs"
+              color="accent"
+              position="absolute"
               style={{
-                backgroundImage: 'none'
-              }}
-              placeholder="Search transactions or errors… (i.e. transaction.duration.us => 100000)"
-              inputRef={node => {
-                if (node) {
-                  this.inputRef = node;
-                }
+                bottom: 0,
+                top: 'initial'
               }}
-              disabled={this.props.disabled}
-              value={this.state.value}
-              onKeyDown={this.onKeyDown}
-              onKeyUp={this.onKeyUp}
-              onChange={this.onChangeInputValue}
-              onClick={this.onClickInput}
-              autoComplete="off"
-              spellCheck={false}
-            />
-
-            {this.props.isLoading && (
-              <EuiProgress
-                size="xs"
-                color="accent"
-                position="absolute"
-                style={{
-                  bottom: 0,
-                  top: 'initial'
-                }}
-              />
-            )}
-          </EuiFlexItem>
-          <EuiFlexItem grow={false}>
-            <EuiButton onClick={this.onSubmit} disabled={this.props.disabled}>
-              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>
+          )}
+        </div>
 
         <Suggestions
           show={this.state.isSuggestionsVisible}

diff --git a/x-pack/plugins/apm/public/components/shared/KueryBar/view.js b/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"

diff --git a/x-pack/plugins/apm/public/style/variables.js b/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';