revert unnecessary changes

Author: shahzad31

x-pack/plugins/apm/public/components/app/RumDashboard/PageLoadDistribution/index.tsx

@@ -6,37 +6,44 @@
 
 import React, { useState } from 'react';
 import { EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiTitle } from '@elastic/eui';
+import { useUrlParams } from '../../../../hooks/useUrlParams';
 import { useFetcher } from '../../../../hooks/useFetcher';
 import { I18LABELS } from '../translations';
 import { BreakdownFilter } from '../Breakdowns/BreakdownFilter';
 import { PageLoadDistChart } from '../Charts/PageLoadDistChart';
 import { BreakdownItem } from '../../../../../typings/ui_filters';
 import { ResetPercentileZoom } from './ResetPercentileZoom';
-import { useUxQuery } from '../hooks/useUxQuery';
 
 export interface PercentileRange {
   min?: number | null;
   max?: number | null;
 }
 
 export function PageLoadDistribution() {
+  const { urlParams, uiFilters } = useUrlParams();
+
+  const { start, end, searchTerm } = urlParams;
+
   const [percentileRange, setPercentileRange] = useState<PercentileRange>({
     min: null,
     max: null,
   });
 
   const [breakdown, setBreakdown] = useState<BreakdownItem | null>(null);
 
-  const uxQuery = useUxQuery();
-
   const { data, status } = useFetcher(
     (callApmApi) => {
-      if (uxQuery) {
+      const { serviceName } = uiFilters;
+
+      if (start && end && serviceName) {
         return callApmApi({
           pathname: '/api/apm/rum-client/page-load-distribution',
           params: {
             query: {
-              ...uxQuery,
+              start,
+              end,
+              uiFilters: JSON.stringify(uiFilters),
+              urlQuery: searchTerm,
               ...(percentileRange.min && percentileRange.max
                 ? {
                     minPercentile: String(percentileRange.min),
@@ -49,7 +56,14 @@ export function PageLoadDistribution() {
       }
       return Promise.resolve(null);
     },
-    [uxQuery, percentileRange.min, percentileRange.max]
+    [
+      end,
+      start,
+      uiFilters,
+      percentileRange.min,
+      percentileRange.max,
+      searchTerm,
+    ]
   );
 
   const onPercentileChange = (min: number, max: number) => {

x-pack/plugins/apm/public/components/app/RumDashboard/PageViewsTrend/index.tsx

@@ -6,26 +6,33 @@
 
 import React, { useState } from 'react';
 import { EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiTitle } from '@elastic/eui';
+import { useUrlParams } from '../../../../hooks/useUrlParams';
 import { useFetcher } from '../../../../hooks/useFetcher';
 import { I18LABELS } from '../translations';
 import { BreakdownFilter } from '../Breakdowns/BreakdownFilter';
 import { PageViewsChart } from '../Charts/PageViewsChart';
 import { BreakdownItem } from '../../../../../typings/ui_filters';
-import { useUxQuery } from '../hooks/useUxQuery';
 
 export function PageViewsTrend() {
-  const uxQuery = useUxQuery();
+  const { urlParams, uiFilters } = useUrlParams();
+
+  const { start, end, searchTerm } = urlParams;
 
   const [breakdown, setBreakdown] = useState<BreakdownItem | null>(null);
 
   const { data, status } = useFetcher(
     (callApmApi) => {
-      if (uxQuery) {
+      const { serviceName } = uiFilters;
+
+      if (start && end && serviceName) {
         return callApmApi({
           pathname: '/api/apm/rum-client/page-view-trends',
           params: {
             query: {
-              ...uxQuery,
+              start,
+              end,
+              uiFilters: JSON.stringify(uiFilters),
+              urlQuery: searchTerm,
               ...(breakdown
                 ? {
                     breakdowns: JSON.stringify(breakdown),
@@ -37,7 +44,7 @@ export function PageViewsTrend() {
       }
       return Promise.resolve(undefined);
     },
-    [uxQuery, breakdown]
+    [end, start, uiFilters, breakdown, searchTerm]
   );
 
   return (

x-pack/plugins/apm/public/components/app/RumDashboard/VisitorBreakdown/index.tsx

@@ -9,26 +9,33 @@ import { EuiFlexGroup, EuiFlexItem, EuiTitle, EuiSpacer } from '@elastic/eui';
 import { VisitorBreakdownChart } from '../Charts/VisitorBreakdownChart';
 import { I18LABELS, VisitorBreakdownLabel } from '../translations';
 import { useFetcher } from '../../../../hooks/useFetcher';
-import { useUxQuery } from '../hooks/useUxQuery';
+import { useUrlParams } from '../../../../hooks/useUrlParams';
 
 export function VisitorBreakdown() {
-  const uxQuery = useUxQuery();
+  const { urlParams, uiFilters } = useUrlParams();
+
+  const { start, end, searchTerm } = urlParams;
 
   const { data, status } = useFetcher(
     (callApmApi) => {
-      if (uxQuery) {
+      const { serviceName } = uiFilters;
+
+      if (start && end && serviceName) {
         return callApmApi({
           pathname: '/api/apm/rum-client/visitor-breakdown',
           params: {
             query: {
-              ...uxQuery,
+              start,
+              end,
+              uiFilters: JSON.stringify(uiFilters),
+              urlQuery: searchTerm,
             },
           },
         });
       }
       return Promise.resolve(null);
     },
-    [uxQuery]
+    [end, start, uiFilters, searchTerm]
   );
 
   return (

x-pack/plugins/apm/server/routes/rum_client.ts

@@ -26,10 +26,7 @@ export const percentileRangeRt = t.partial({
 const uxQueryRt = t.intersection([
   uiFiltersRt,
   rangeRt,
-  t.type({
-    percentile: t.string,
-  }),
-  t.partial({ urlQuery: t.string }),
+  t.partial({ urlQuery: t.string, percentile: t.string }),
 ]);
 
 export const rumClientMetricsRoute = createRoute(() => ({