[APM] Separate useUrlParams hooks for APM/Uptime (elastic#109579)

kibanamachine · Aug 25, 2021 · 769240e · 769240e
1 parent e126836
commit 769240e
Show file tree

Hide file tree

Showing 36 changed files with 205 additions and 112 deletions.
diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/LocalUIFilters/index.tsx b/x-pack/plugins/apm/public/components/app/RumDashboard/LocalUIFilters/index.tsx
@@ -25,7 +25,6 @@ import {
 import { useBreakPoints } from '../../../../hooks/use_break_points';
 import { FieldValueSuggestions } from '../../../../../../observability/public';
 import { URLFilter } from '../URLFilter';
-import { useUrlParams } from '../../../../context/url_params_context/use_url_params';
 import { SelectedFilters } from './SelectedFilters';
 import {
   SERVICE_NAME,
@@ -35,6 +34,7 @@ import { TRANSACTION_PAGE_LOAD } from '../../../../../common/transaction_types';
 import { useIndexPattern } from './use_index_pattern';
 import { environmentQuery } from './queries';
 import { ENVIRONMENT_ALL } from '../../../../../common/environment_filter_values';
+import { useUxUrlParams } from '../../../../context/url_params_context/use_ux_url_params';
 
 const filterNames: UxLocalUIFilterName[] = [
   'location',
@@ -67,7 +67,7 @@ function LocalUIFilters() {
 
   const {
     urlParams: { start, end, serviceName, environment },
-  } = useUrlParams();
+  } = useUxUrlParams();
 
   const getFilters = useMemo(() => {
     const dataFilters: ESFilter[] = [

diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/RumHome.tsx b/x-pack/plugins/apm/public/components/app/RumDashboard/RumHome.tsx
@@ -13,7 +13,7 @@ import { CsmSharedContextProvider } from './CsmSharedContext';
 import { WebApplicationSelect } from './Panels/WebApplicationSelect';
 import { DatePicker } from '../../shared/DatePicker';
 import { useApmPluginContext } from '../../../context/apm_plugin/use_apm_plugin_context';
-import { EnvironmentFilter } from '../../shared/EnvironmentFilter';
+import { UxEnvironmentFilter } from '../../shared/EnvironmentFilter';
 import { UserPercentile } from './UserPercentile';
 import { useBreakPoints } from '../../../hooks/use_break_points';
 
@@ -41,7 +41,7 @@ export function RumHome() {
                 rightSideItems: [
                   <DatePicker />,
                   <div style={envStyle}>
-                    <EnvironmentFilter />
+                    <UxEnvironmentFilter />
                   </div>,
                   <UserPercentile />,
                   <WebApplicationSelect />,
@@ -82,7 +82,7 @@ function PageHeader() {
         </EuiFlexItem>
         <EuiFlexItem grow={false}>
           <div style={envStyle}>
-            <EnvironmentFilter />
+            <UxEnvironmentFilter />
           </div>
         </EuiFlexItem>
       </EuiFlexGroup>

diff --git a/...m/public/components/app/error_group_details/detail_view/__snapshots__/index.test.tsx.snap b/...m/public/components/app/error_group_details/detail_view/__snapshots__/index.test.tsx.snap
diff --git a/x-pack/plugins/apm/public/components/app/error_group_details/detail_view/index.test.tsx b/x-pack/plugins/apm/public/components/app/error_group_details/detail_view/index.test.tsx
@@ -18,7 +18,7 @@ describe('DetailView', () => {
 
   it('should render empty state', () => {
     const wrapper = shallow(
-      <DetailView errorGroup={{} as any} urlParams={{}} />
+      <DetailView errorGroup={{} as any} urlParams={{}} kuery="" />
     );
     expect(wrapper.isEmptyRender()).toBe(true);
   });
@@ -41,7 +41,7 @@ describe('DetailView', () => {
     };
 
     const wrapper = shallow(
-      <DetailView errorGroup={errorGroup} urlParams={{}} />
+      <DetailView errorGroup={errorGroup} urlParams={{}} kuery="" />
     ).find('DiscoverErrorLink');
 
     expect(wrapper.exists()).toBe(true);
@@ -60,7 +60,7 @@ describe('DetailView', () => {
       transaction: undefined,
     };
     const wrapper = shallow(
-      <DetailView errorGroup={errorGroup} urlParams={{}} />
+      <DetailView errorGroup={errorGroup} urlParams={{}} kuery="" />
     ).find('Summary');
 
     expect(wrapper.exists()).toBe(true);
@@ -80,7 +80,7 @@ describe('DetailView', () => {
       } as any,
     };
     const wrapper = shallow(
-      <DetailView errorGroup={errorGroup} urlParams={{}} />
+      <DetailView errorGroup={errorGroup} urlParams={{}} kuery="" />
     ).find('EuiTabs');
 
     expect(wrapper.exists()).toBe(true);
@@ -100,7 +100,7 @@ describe('DetailView', () => {
       } as any,
     };
     const wrapper = shallow(
-      <DetailView errorGroup={errorGroup} urlParams={{}} />
+      <DetailView errorGroup={errorGroup} urlParams={{}} kuery="" />
     ).find('TabContent');
 
     expect(wrapper.exists()).toBe(true);
@@ -124,7 +124,7 @@ describe('DetailView', () => {
       } as any,
     };
     expect(() =>
-      shallow(<DetailView errorGroup={errorGroup} urlParams={{}} />)
+      shallow(<DetailView errorGroup={errorGroup} urlParams={{}} kuery="" />)
     ).not.toThrowError();
   });
 });
diff --git a/x-pack/plugins/apm/public/components/app/error_group_details/detail_view/index.tsx b/x-pack/plugins/apm/public/components/app/error_group_details/detail_view/index.tsx
@@ -20,9 +20,9 @@ import { first } from 'lodash';
 import React from 'react';
 import { useHistory } from 'react-router-dom';
 import { euiStyled } from '../../../../../../../../src/plugins/kibana_react/common';
-import { APIReturnType } from '../../../../services/rest/createCallApmApi';
-import { APMError } from '../../../../../typings/es_schemas/ui/apm_error';
-import type { IUrlParams } from '../../../../context/url_params_context/types';
+import type { APIReturnType } from '../../../../services/rest/createCallApmApi';
+import type { APMError } from '../../../../../typings/es_schemas/ui/apm_error';
+import type { ApmUrlParams } from '../../../../context/url_params_context/types';
 import { TransactionDetailLink } from '../../../shared/Links/apm/transaction_detail_link';
 import { DiscoverErrorLink } from '../../../shared/Links/DiscoverLinks/DiscoverErrorLink';
 import { fromQuery, toQuery } from '../../../shared/Links/url_helpers';
@@ -55,7 +55,8 @@ const TransactionLinkName = euiStyled.div`
 
 interface Props {
   errorGroup: APIReturnType<'GET /api/apm/services/{serviceName}/errors/{groupId}'>;
-  urlParams: IUrlParams;
+  urlParams: ApmUrlParams;
+  kuery: string;
 }
 
 // TODO: Move query-string-based tabs into a re-usable component?
@@ -67,7 +68,7 @@ function getCurrentTab(
   return selectedTab ? selectedTab : first(tabs) || {};
 }
 
-export function DetailView({ errorGroup, urlParams }: Props) {
+export function DetailView({ errorGroup, urlParams, kuery }: Props) {
   const history = useHistory();
   const { transaction, error, occurrencesCount } = errorGroup;
 
@@ -96,7 +97,7 @@ export function DetailView({ errorGroup, urlParams }: Props) {
             )}
           </h3>
         </EuiTitle>
-        <DiscoverErrorLink error={error} kuery={urlParams.kuery}>
+        <DiscoverErrorLink error={error} kuery={kuery}>
           <EuiButtonEmpty iconType="discoverApp">
             {i18n.translate(
               'xpack.apm.errorGroupDetails.viewOccurrencesInDiscoverButtonLabel',

diff --git a/x-pack/plugins/apm/public/components/app/error_group_details/index.tsx b/x-pack/plugins/apm/public/components/app/error_group_details/index.tsx
@@ -220,7 +220,11 @@ export function ErrorGroupDetails() {
       </EuiPanel>
       <EuiSpacer size="s" />
       {showDetails && (
-        <DetailView errorGroup={errorGroupData} urlParams={urlParams} />
+        <DetailView
+          errorGroup={errorGroupData}
+          urlParams={urlParams}
+          kuery={kuery}
+        />
       )}
     </>
   );

diff --git a/x-pack/plugins/apm/public/components/app/service_map/Controls.test.tsx b/x-pack/plugins/apm/public/components/app/service_map/Controls.test.tsx
@@ -9,6 +9,7 @@ import lightTheme from '@elastic/eui/dist/eui_theme_light.json';
 import { render } from '@testing-library/react';
 import cytoscape from 'cytoscape';
 import React, { ReactNode } from 'react';
+import { MemoryRouter } from 'react-router-dom';
 import { ThemeContext } from 'styled-components';
 import { MockApmPluginContextWrapper } from '../../../context/apm_plugin/mock_apm_plugin_context';
 import { Controls } from './Controls';
@@ -21,11 +22,18 @@ const cy = cytoscape({
 function Wrapper({ children }: { children?: ReactNode }) {
   return (
     <CytoscapeContext.Provider value={cy}>
-      <MockApmPluginContextWrapper>
-        <ThemeContext.Provider value={{ eui: lightTheme }}>
-          {children}
-        </ThemeContext.Provider>
-      </MockApmPluginContextWrapper>
+      <MemoryRouter
+        initialEntries={[
+          '/service-map?rangeFrom=now-15m&rangeTo=now&environment=ENVIRONMENT_ALL&kuery=',
+        ]}
+      >
+        <MockApmPluginContextWrapper>
+          <ThemeContext.Provider value={{ eui: lightTheme }}>
+            {children}
+          </ThemeContext.Provider>
+        </MockApmPluginContextWrapper>
+      </MemoryRouter>
+      s
     </CytoscapeContext.Provider>
   );
 }

diff --git a/x-pack/plugins/apm/public/components/app/service_map/Controls.tsx b/x-pack/plugins/apm/public/components/app/service_map/Controls.tsx
@@ -16,6 +16,7 @@ import { getAPMHref } from '../../shared/Links/apm/APMLink';
 import { APMQueryParams } from '../../shared/Links/url_helpers';
 import { CytoscapeContext } from './Cytoscape';
 import { getAnimationOptions, getNodeHeight } from './cytoscape_options';
+import { useApmParams } from '../../../hooks/use_apm_params';
 
 const ControlsContainer = euiStyled('div')`
   left: ${({ theme }) => theme.eui.gutterTypes.gutterMedium};
@@ -103,14 +104,18 @@ export function Controls() {
   const theme = useTheme();
   const cy = useContext(CytoscapeContext);
   const { urlParams } = useUrlParams();
-  const currentSearch = urlParams.kuery ?? '';
+
+  const {
+    query: { kuery },
+  } = useApmParams('/service-map', '/services/:serviceName/service-map');
+
   const [zoom, setZoom] = useState((cy && cy.zoom()) || 1);
   const duration = parseInt(theme.eui.euiAnimSpeedFast, 10);
   const downloadUrl = useDebugDownloadUrl(cy);
   const viewFullMapUrl = getAPMHref({
     basePath,
     path: '/service-map',
-    search: currentSearch,
+    search: `kuery=${encodeURIComponent(kuery)}`,
     query: urlParams as APMQueryParams,
   });
 

diff --git a/...m/public/components/app/service_overview/service_overview_instances_table/get_columns.tsx b/...m/public/components/app/service_overview/service_overview_instances_table/get_columns.tsx
@@ -39,6 +39,7 @@ type ServiceInstanceDetailedStatistics = APIReturnType<'GET /api/apm/services/{s
 
 export function getColumns({
   serviceName,
+  kuery,
   agentName,
   latencyAggregationType,
   detailedStatsData,
@@ -49,6 +50,7 @@ export function getColumns({
   itemIdToOpenActionMenuRowMap,
 }: {
   serviceName: string;
+  kuery: string;
   agentName?: string;
   latencyAggregationType?: LatencyAggregationType;
   detailedStatsData?: ServiceInstanceDetailedStatistics;
@@ -247,6 +249,7 @@ export function getColumns({
             <InstanceActionsMenu
               serviceName={serviceName}
               serviceNodeName={instanceItem.serviceNodeName}
+              kuery={kuery}
               onClose={() => toggleRowActionMenu(instanceItem.serviceNodeName)}
             />
           </ActionMenu>

diff --git a/...ins/apm/public/components/app/service_overview/service_overview_instances_table/index.tsx b/...ins/apm/public/components/app/service_overview/service_overview_instances_table/index.tsx
@@ -26,6 +26,7 @@ import {
 import { OverviewTableContainer } from '../../../shared/overview_table_container';
 import { getColumns } from './get_columns';
 import { InstanceDetails } from './intance_details';
+import { useApmParams } from '../../../../hooks/use_apm_params';
 
 type ServiceInstanceMainStatistics = APIReturnType<'GET /api/apm/services/{serviceName}/service_overview_instances/main_statistics'>;
 type MainStatsServiceInstanceItem = ServiceInstanceMainStatistics['currentPeriod'][0];
@@ -63,6 +64,11 @@ export function ServiceOverviewInstancesTable({
   isLoading,
 }: Props) {
   const { agentName } = useApmServiceContext();
+
+  const {
+    query: { kuery },
+  } = useApmParams('/services/:serviceName');
+
   const {
     urlParams: { latencyAggregationType, comparisonEnabled },
   } = useUrlParams();
@@ -103,6 +109,7 @@ export function ServiceOverviewInstancesTable({
         <InstanceDetails
           serviceNodeName={selectedServiceNodeName}
           serviceName={serviceName}
+          kuery={kuery}
         />
       );
     }
@@ -112,6 +119,7 @@ export function ServiceOverviewInstancesTable({
   const columns = getColumns({
     agentName,
     serviceName,
+    kuery,
     latencyAggregationType,
     detailedStatsData,
     comparisonEnabled,

diff --git a/...nts/app/service_overview/service_overview_instances_table/instance_actions_menu/index.tsx b/...nts/app/service_overview/service_overview_instances_table/instance_actions_menu/index.tsx
@@ -18,7 +18,6 @@ import {
 import { isJavaAgentName } from '../../../../../../common/agent_name';
 import { SERVICE_NODE_NAME } from '../../../../../../common/elasticsearch_fieldnames';
 import { useApmPluginContext } from '../../../../../context/apm_plugin/use_apm_plugin_context';
-import { useUrlParams } from '../../../../../context/url_params_context/use_url_params';
 import { FETCH_STATUS } from '../../../../../hooks/use_fetcher';
 import { pushNewItemToKueryBar } from '../../../../shared/kuery_bar/utils';
 import { useMetricOverviewHref } from '../../../../shared/Links/apm/MetricOverviewLink';
@@ -29,6 +28,7 @@ import { getMenuSections } from './menu_sections';
 interface Props {
   serviceName: string;
   serviceNodeName: string;
+  kuery: string;
   onClose: () => void;
 }
 
@@ -37,6 +37,7 @@ const POPOVER_WIDTH = '305px';
 export function InstanceActionsMenu({
   serviceName,
   serviceNodeName,
+  kuery,
   onClose,
 }: Props) {
   const { core } = useApmPluginContext();
@@ -50,9 +51,6 @@ export function InstanceActionsMenu({
   });
   const metricOverviewHref = useMetricOverviewHref(serviceName);
   const history = useHistory();
-  const {
-    urlParams: { kuery },
-  } = useUrlParams();
 
   if (
     status === FETCH_STATUS.LOADING ||

diff --git a/...omponents/app/service_overview/service_overview_instances_table/instance_details.test.tsx b/...omponents/app/service_overview/service_overview_instances_table/instance_details.test.tsx
@@ -23,7 +23,7 @@ describe('InstanceDetails', () => {
       .spyOn(useInstanceDetailsFetcher, 'useInstanceDetailsFetcher')
       .mockReturnValue({ data: undefined, status: FETCH_STATUS.LOADING });
     const { getByTestId } = renderWithTheme(
-      <InstanceDetails serviceName="foo" serviceNodeName="bar" />
+      <InstanceDetails serviceName="foo" serviceNodeName="bar" kuery="" />
     );
     expect(getByTestId('loadingSpinner')).toBeInTheDocument();
   });
@@ -40,7 +40,7 @@ describe('InstanceDetails', () => {
         status: FETCH_STATUS.SUCCESS,
       });
     const component = renderWithTheme(
-      <InstanceDetails serviceName="foo" serviceNodeName="bar" />
+      <InstanceDetails serviceName="foo" serviceNodeName="bar" kuery="" />
     );
     expectTextsInDocument(component, ['Service', 'Container', 'Cloud']);
   });
@@ -56,7 +56,7 @@ describe('InstanceDetails', () => {
         status: FETCH_STATUS.SUCCESS,
       });
     const component = renderWithTheme(
-      <InstanceDetails serviceName="foo" serviceNodeName="bar" />
+      <InstanceDetails serviceName="foo" serviceNodeName="bar" kuery="" />
     );
     expectTextsInDocument(component, ['Container', 'Cloud']);
     expectTextsNotInDocument(component, ['Service']);
@@ -73,7 +73,7 @@ describe('InstanceDetails', () => {
         status: FETCH_STATUS.SUCCESS,
       });
     const component = renderWithTheme(
-      <InstanceDetails serviceName="foo" serviceNodeName="bar" />
+      <InstanceDetails serviceName="foo" serviceNodeName="bar" kuery="" />
     );
     expectTextsInDocument(component, ['Service', 'Cloud']);
     expectTextsNotInDocument(component, ['Container']);
@@ -90,7 +90,7 @@ describe('InstanceDetails', () => {
         status: FETCH_STATUS.SUCCESS,
       });
     const component = renderWithTheme(
-      <InstanceDetails serviceName="foo" serviceNodeName="bar" />
+      <InstanceDetails serviceName="foo" serviceNodeName="bar" kuery="" />
     );
     expectTextsInDocument(component, ['Service', 'Container']);
     expectTextsNotInDocument(component, ['Cloud']);