[APM] Moving the date picker into APM (elastic#31311)

* WIP moving the date picker into APM * Stable version of EUI date picker controls, still needs layout * Flex layout for kuery bar and date picker * Removes angular time picker logic and layout * Fixes snapshot test * Adds integration tests for date picker * Simplifies refresh cycle with setTimeout over requestAnimationFrame * Removes rison and local state from APM date picker flow * Adds refresh tests, fixes some refresh logic * Moves temporary EUI types out of component * Moves toBoolean helper and fixes TS error * Removes unused Link import * Types for datepicker (WIP) * Updates default date picker values after merging in Søren's type changes * Streamlines new APM query types to prevent duplication * Uses jest fake timers for refresh tests * Updates url handling to remove Rison from APM URLs, keeps Rison in outgoing Kibana links * Move filter bar up and out from within a react-redux-request to avoid catch-22 circular dependency * Separates rison encoding from regular url handling * Sets start and end defaults in urlParams reducer * Adds IUrlParams type to initial state with correct typing * Updated rison-related snapshots * Resolves failing tests related to query param management * Adds more tests for Kibana Link and Kibana Rison Link components * Re-enables the update button for the EUI super date picker * Adds more Discover link tests * Moved getRenderedHref to testHelpers, switched Discover Links integration tests to TS, and added ML link integration test * Changes how getRenderedHref works to make it clearer where location state is coming from * Updates obsolete snapshot * Fixes typescript-discovered errors and type errors * Finishes up url_helpers tests, removes dead commented tests * Removes temporary date picker types from APM * Fixes common case for an existing URL bug by not encoding range params
jasonrhodes · Mar 7, 2019 · d5bc442 · d5bc442
1 parent 0b06c47
commit d5bc442
Show file tree

Hide file tree

Showing 46 changed files with 1,180 additions and 393 deletions.
diff --git a/x-pack/plugins/apm/public/components/app/ErrorGroupDetails/view.tsx b/x-pack/plugins/apm/public/components/app/ErrorGroupDetails/view.tsx
@@ -23,7 +23,7 @@ import {
   units
 } from '../../../style/variables';
 // @ts-ignore
-import { KueryBar } from '../../shared/KueryBar';
+import { FilterBar } from '../../shared/FilterBar';
 import { DetailView } from './DetailView';
 import { ErrorDistribution } from './Distribution';
 
@@ -108,7 +108,7 @@ export function ErrorGroupDetailsView({ urlParams, location }: Props) {
 
             <EuiSpacer size="m" />
 
-            <KueryBar />
+            <FilterBar />
 
             <EuiSpacer size="s" />
 

diff --git a/...m/public/components/app/ErrorGroupOverview/List/__test__/__snapshots__/List.test.tsx.snap b/...m/public/components/app/ErrorGroupOverview/List/__test__/__snapshots__/List.test.tsx.snap
@@ -553,7 +553,7 @@ exports[`ErrorGroupOverview -> List should render with data 1`] = `
             >
               <a
                 className="euiLink euiLink--primary c0"
-                href="#/opbeans-python/errors/a0ce2c8978ef92cdf2ff163ae28576ee?_g=(time:(from:now-24h,mode:quick,to:now))"
+                href="#/opbeans-python/errors/a0ce2c8978ef92cdf2ff163ae28576ee?"
               >
                 a0ce2
               </a>
@@ -582,7 +582,7 @@ exports[`ErrorGroupOverview -> List should render with data 1`] = `
                   <a
                     aria-describedby="error-message-tooltip"
                     className="euiLink euiLink--primary c2"
-                    href="#/opbeans-python/errors/a0ce2c8978ef92cdf2ff163ae28576ee?_g=(time:(from:now-24h,mode:quick,to:now))"
+                    href="#/opbeans-python/errors/a0ce2c8978ef92cdf2ff163ae28576ee?"
                     onBlur={[Function]}
                     onFocus={[Function]}
                   >
@@ -660,7 +660,7 @@ exports[`ErrorGroupOverview -> List should render with data 1`] = `
             >
               <a
                 className="euiLink euiLink--primary c0"
-                href="#/opbeans-python/errors/f3ac95493913cc7a3cfec30a19d2120a?_g=(time:(from:now-24h,mode:quick,to:now))"
+                href="#/opbeans-python/errors/f3ac95493913cc7a3cfec30a19d2120a?"
               >
                 f3ac9
               </a>
@@ -689,7 +689,7 @@ exports[`ErrorGroupOverview -> List should render with data 1`] = `
                   <a
                     aria-describedby="error-message-tooltip"
                     className="euiLink euiLink--primary c2"
-                    href="#/opbeans-python/errors/f3ac95493913cc7a3cfec30a19d2120a?_g=(time:(from:now-24h,mode:quick,to:now))"
+                    href="#/opbeans-python/errors/f3ac95493913cc7a3cfec30a19d2120a?"
                     onBlur={[Function]}
                     onFocus={[Function]}
                   >
@@ -767,7 +767,7 @@ exports[`ErrorGroupOverview -> List should render with data 1`] = `
             >
               <a
                 className="euiLink euiLink--primary c0"
-                href="#/opbeans-python/errors/e90863d04b7a692435305f09bbe8c840?_g=(time:(from:now-24h,mode:quick,to:now))"
+                href="#/opbeans-python/errors/e90863d04b7a692435305f09bbe8c840?"
               >
                 e9086
               </a>
@@ -796,7 +796,7 @@ exports[`ErrorGroupOverview -> List should render with data 1`] = `
                   <a
                     aria-describedby="error-message-tooltip"
                     className="euiLink euiLink--primary c2"
-                    href="#/opbeans-python/errors/e90863d04b7a692435305f09bbe8c840?_g=(time:(from:now-24h,mode:quick,to:now))"
+                    href="#/opbeans-python/errors/e90863d04b7a692435305f09bbe8c840?"
                     onBlur={[Function]}
                     onFocus={[Function]}
                   >
@@ -874,7 +874,7 @@ exports[`ErrorGroupOverview -> List should render with data 1`] = `
             >
               <a
                 className="euiLink euiLink--primary c0"
-                href="#/opbeans-python/errors/8673d8bf7a032e387c101bafbab0d2bc?_g=(time:(from:now-24h,mode:quick,to:now))"
+                href="#/opbeans-python/errors/8673d8bf7a032e387c101bafbab0d2bc?"
               >
                 8673d
               </a>
@@ -903,7 +903,7 @@ exports[`ErrorGroupOverview -> List should render with data 1`] = `
                   <a
                     aria-describedby="error-message-tooltip"
                     className="euiLink euiLink--primary c2"
-                    href="#/opbeans-python/errors/8673d8bf7a032e387c101bafbab0d2bc?_g=(time:(from:now-24h,mode:quick,to:now))"
+                    href="#/opbeans-python/errors/8673d8bf7a032e387c101bafbab0d2bc?"
                     onBlur={[Function]}
                     onFocus={[Function]}
                   >

diff --git a/x-pack/plugins/apm/public/components/app/Main/Home.tsx b/x-pack/plugins/apm/public/components/app/Main/Home.tsx
@@ -12,7 +12,7 @@ import {
   IHistoryTab
 } from 'x-pack/plugins/apm/public/components/shared/HistoryTabs';
 // @ts-ignore
-import { KueryBar } from '../../shared/KueryBar';
+import { FilterBar } from '../../shared/FilterBar';
 import { SetupInstructionsLink } from '../../shared/Links/SetupInstructionsLink';
 import { ServiceOverview } from '../ServiceOverview';
 import { TraceOverview } from '../TraceOverview';
@@ -50,7 +50,7 @@ export function Home() {
 
       <EuiSpacer />
 
-      <KueryBar />
+      <FilterBar />
       <HistoryTabs tabs={homeTabs} />
     </div>
   );

diff --git a/x-pack/plugins/apm/public/components/app/Main/UpdateBreadcrumbs.tsx b/x-pack/plugins/apm/public/components/app/Main/UpdateBreadcrumbs.tsx
@@ -5,10 +5,14 @@
  */
 
 import { Location } from 'history';
-import { last } from 'lodash';
+import { last, pick } from 'lodash';
 import React from 'react';
 import chrome from 'ui/chrome';
-import { toQuery } from '../../shared/Links/url_helpers';
+import {
+  fromQuery,
+  PERSISTENT_APM_PARAMS,
+  toQuery
+} from '../../shared/Links/url_helpers';
 import { Breadcrumb, ProvideBreadcrumbs } from './ProvideBreadcrumbs';
 import { routes } from './routeConfig';
 
@@ -19,10 +23,12 @@ interface Props {
 
 class UpdateBreadcrumbsComponent extends React.Component<Props> {
   public updateHeaderBreadcrumbs() {
-    const { _g = '', kuery = '' } = toQuery(this.props.location.search);
+    const query = toQuery(this.props.location.search);
+    const persistentParams = pick(query, PERSISTENT_APM_PARAMS);
+    const search = fromQuery(persistentParams);
     const breadcrumbs = this.props.breadcrumbs.map(({ value, match }) => ({
       text: value,
-      href: `#${match.url}?_g=${_g}&kuery=${kuery}`
+      href: `#${match.url}?${search}`
     }));
 
     const current = last(breadcrumbs) || { text: '' };

diff --git a/x-pack/plugins/apm/public/components/app/Main/__test__/UpdateBreadcrumbs.test.js b/x-pack/plugins/apm/public/components/app/Main/__test__/UpdateBreadcrumbs.test.js
@@ -37,7 +37,7 @@ jest.mock(
 
 function expectBreadcrumbToMatchSnapshot(route) {
   mount(
-    <MemoryRouter initialEntries={[`${route}?_g=myG&kuery=myKuery`]}>
+    <MemoryRouter initialEntries={[`${route}?kuery=myKuery`]}>
       <UpdateBreadcrumbs />
     </MemoryRouter>
   );

diff --git a/x-pack/plugins/apm/public/components/app/Main/__test__/__snapshots__/Home.test.js.snap b/x-pack/plugins/apm/public/components/app/Main/__test__/__snapshots__/Home.test.js.snap
@@ -32,7 +32,7 @@ exports[`Home component should render 1`] = `
     </EuiFlexItem>
   </EuiFlexGroup>
   <EuiSpacer />
-  <Connect(KueryBarView) />
+  <FilterBar />
   <withRouter(HistoryTabsWithoutRouter)
     tabs={
       Array [

diff --git a/...gins/apm/public/components/app/Main/__test__/__snapshots__/UpdateBreadcrumbs.test.js.snap b/...gins/apm/public/components/app/Main/__test__/__snapshots__/UpdateBreadcrumbs.test.js.snap
@@ -3,11 +3,11 @@
 exports[`Breadcrumbs /:serviceName 1`] = `
 Array [
   Object {
-    "href": "#/?_g=myG&kuery=myKuery",
+    "href": "#/?kuery=myKuery",
     "text": "APM",
   },
   Object {
-    "href": "#/opbeans-node?_g=myG&kuery=myKuery",
+    "href": "#/opbeans-node?kuery=myKuery",
     "text": "opbeans-node",
   },
 ]
@@ -16,15 +16,15 @@ Array [
 exports[`Breadcrumbs /:serviceName/errors 1`] = `
 Array [
   Object {
-    "href": "#/?_g=myG&kuery=myKuery",
+    "href": "#/?kuery=myKuery",
     "text": "APM",
   },
   Object {
-    "href": "#/opbeans-node?_g=myG&kuery=myKuery",
+    "href": "#/opbeans-node?kuery=myKuery",
     "text": "opbeans-node",
   },
   Object {
-    "href": "#/opbeans-node/errors?_g=myG&kuery=myKuery",
+    "href": "#/opbeans-node/errors?kuery=myKuery",
     "text": "Errors",
   },
 ]
@@ -33,19 +33,19 @@ Array [
 exports[`Breadcrumbs /:serviceName/errors/:groupId 1`] = `
 Array [
   Object {
-    "href": "#/?_g=myG&kuery=myKuery",
+    "href": "#/?kuery=myKuery",
     "text": "APM",
   },
   Object {
-    "href": "#/opbeans-node?_g=myG&kuery=myKuery",
+    "href": "#/opbeans-node?kuery=myKuery",
     "text": "opbeans-node",
   },
   Object {
-    "href": "#/opbeans-node/errors?_g=myG&kuery=myKuery",
+    "href": "#/opbeans-node/errors?kuery=myKuery",
     "text": "Errors",
   },
   Object {
-    "href": "#/opbeans-node/errors/myGroupId?_g=myG&kuery=myKuery",
+    "href": "#/opbeans-node/errors/myGroupId?kuery=myKuery",
     "text": "myGroupId",
   },
 ]
@@ -54,15 +54,15 @@ Array [
 exports[`Breadcrumbs /:serviceName/transactions 1`] = `
 Array [
   Object {
-    "href": "#/?_g=myG&kuery=myKuery",
+    "href": "#/?kuery=myKuery",
     "text": "APM",
   },
   Object {
-    "href": "#/opbeans-node?_g=myG&kuery=myKuery",
+    "href": "#/opbeans-node?kuery=myKuery",
     "text": "opbeans-node",
   },
   Object {
-    "href": "#/opbeans-node/transactions?_g=myG&kuery=myKuery",
+    "href": "#/opbeans-node/transactions?kuery=myKuery",
     "text": "Transactions",
   },
 ]
@@ -71,15 +71,15 @@ Array [
 exports[`Breadcrumbs /:serviceName/transactions/:transactionType 1`] = `
 Array [
   Object {
-    "href": "#/?_g=myG&kuery=myKuery",
+    "href": "#/?kuery=myKuery",
     "text": "APM",
   },
   Object {
-    "href": "#/opbeans-node?_g=myG&kuery=myKuery",
+    "href": "#/opbeans-node?kuery=myKuery",
     "text": "opbeans-node",
   },
   Object {
-    "href": "#/opbeans-node/transactions?_g=myG&kuery=myKuery",
+    "href": "#/opbeans-node/transactions?kuery=myKuery",
     "text": "Transactions",
   },
 ]
@@ -88,19 +88,19 @@ Array [
 exports[`Breadcrumbs /:serviceName/transactions/:transactionType/:transactionName 1`] = `
 Array [
   Object {
-    "href": "#/?_g=myG&kuery=myKuery",
+    "href": "#/?kuery=myKuery",
     "text": "APM",
   },
   Object {
-    "href": "#/opbeans-node?_g=myG&kuery=myKuery",
+    "href": "#/opbeans-node?kuery=myKuery",
     "text": "opbeans-node",
   },
   Object {
-    "href": "#/opbeans-node/transactions?_g=myG&kuery=myKuery",
+    "href": "#/opbeans-node/transactions?kuery=myKuery",
     "text": "Transactions",
   },
   Object {
-    "href": "#/opbeans-node/transactions/request/my-transaction-name?_g=myG&kuery=myKuery",
+    "href": "#/opbeans-node/transactions/request/my-transaction-name?kuery=myKuery",
     "text": "my-transaction-name",
   },
 ]
@@ -109,7 +109,7 @@ Array [
 exports[`Breadcrumbs Homepage 1`] = `
 Array [
   Object {
-    "href": "#/?_g=myG&kuery=myKuery",
+    "href": "#/?kuery=myKuery",
     "text": "APM",
   },
 ]

diff --git a/x-pack/plugins/apm/public/components/app/ServiceDetails/ServiceIntegrations/index.tsx b/x-pack/plugins/apm/public/components/app/ServiceDetails/ServiceIntegrations/index.tsx
@@ -5,13 +5,15 @@
  */
 
 import { connect } from 'react-redux';
+import { getServiceDetails } from 'x-pack/plugins/apm/public/store/reactReduxRequest/serviceDetails';
 import { IReduxState } from 'x-pack/plugins/apm/public/store/rootReducer';
 import { selectIsMLAvailable } from 'x-pack/plugins/apm/public/store/selectors/license';
 import { ServiceIntegrationsView } from './view';
 
 function mapStateToProps(state = {} as IReduxState) {
   return {
-    mlAvailable: selectIsMLAvailable(state)
+    mlAvailable: selectIsMLAvailable(state),
+    serviceDetails: getServiceDetails(state).data
   };
 }
 

diff --git a/x-pack/plugins/apm/public/components/app/ServiceDetails/ServiceIntegrations/view.tsx b/x-pack/plugins/apm/public/components/app/ServiceDetails/ServiceIntegrations/view.tsx
@@ -19,10 +19,12 @@ import { IUrlParams } from 'x-pack/plugins/apm/public/store/urlParams';
 import { MachineLearningFlyout } from './MachineLearningFlyout';
 import { WatcherFlyout } from './WatcherFlyout';
 
-interface ServiceIntegrationProps {
+export interface ServiceIntegrationProps {
   mlAvailable: boolean;
   location: Location;
-  serviceTransactionTypes: string[];
+  serviceDetails: {
+    types: string[];
+  };
   urlParams: IUrlParams;
 }
 interface ServiceIntegrationState {
@@ -169,7 +171,7 @@ export class ServiceIntegrationsView extends React.Component<
           isOpen={this.state.activeFlyout === 'ML'}
           onClose={this.closeFlyouts}
           urlParams={this.props.urlParams}
-          serviceTransactionTypes={this.props.serviceTransactionTypes}
+          serviceTransactionTypes={this.props.serviceDetails.types}
         />
         <WatcherFlyout
           location={this.props.location}