Remove kuery from uiFilters (#91932)

* Make kuery a standalone query parameter instead of part of uiFilters * Move getEsFilters helper to RUM * Move query utils from "common" to "server" (it uses esKuery from the data plugin, which is exported from server, not common.) * Move uiFiltersRt to RUM routes References #84526.
elastic · Feb 23, 2021 · 57dfb81 · 57dfb81
1 parent 4f8cd83
commit 57dfb81
Show file tree

Hide file tree

Showing 149 changed files with 644 additions and 672 deletions.
diff --git a/x-pack/plugins/apm/public/components/app/ErrorGroupDetails/index.tsx b/x-pack/plugins/apm/public/components/app/ErrorGroupDetails/index.tsx
@@ -67,9 +67,8 @@ type ErrorGroupDetailsProps = RouteComponentProps<{
 
 export function ErrorGroupDetails({ location, match }: ErrorGroupDetailsProps) {
   const { serviceName, groupId } = match.params;
-  const { urlParams, uiFilters } = useUrlParams();
-  const { environment, start, end } = urlParams;
-
+  const { urlParams } = useUrlParams();
+  const { environment, kuery, start, end } = urlParams;
   const { data: errorGroupData } = useFetcher(
     (callApmApi) => {
       if (start && end) {
@@ -82,15 +81,15 @@ export function ErrorGroupDetails({ location, match }: ErrorGroupDetailsProps) {
             },
             query: {
               environment,
+              kuery,
               start,
               end,
-              uiFilters: JSON.stringify(uiFilters),
             },
           },
         });
       }
     },
-    [environment, serviceName, start, end, groupId, uiFilters]
+    [environment, kuery, serviceName, start, end, groupId]
   );
 
   const { errorDistributionData } = useErrorGroupDistributionFetcher({

diff --git a/x-pack/plugins/apm/public/components/app/correlations/error_correlations.tsx b/x-pack/plugins/apm/public/components/app/correlations/error_correlations.tsx
@@ -49,9 +49,10 @@ export function ErrorCorrelations({ onClose }: Props) {
   ] = useState<SelectedSignificantTerm | null>(null);
 
   const { serviceName } = useParams<{ serviceName?: string }>();
-  const { urlParams, uiFilters } = useUrlParams();
+  const { urlParams } = useUrlParams();
   const {
     environment,
+    kuery,
     transactionName,
     transactionType,
     start,
@@ -71,12 +72,12 @@ export function ErrorCorrelations({ onClose }: Props) {
           params: {
             query: {
               environment,
+              kuery,
               serviceName,
               transactionName,
               transactionType,
               start,
               end,
-              uiFilters: JSON.stringify(uiFilters),
               fieldNames: fieldNames.join(','),
             },
           },
@@ -85,12 +86,12 @@ export function ErrorCorrelations({ onClose }: Props) {
     },
     [
       environment,
+      kuery,
       serviceName,
       start,
       end,
       transactionName,
       transactionType,
-      uiFilters,
       fieldNames,
     ]
   );

diff --git a/x-pack/plugins/apm/public/components/app/correlations/latency_correlations.tsx b/x-pack/plugins/apm/public/components/app/correlations/latency_correlations.tsx
@@ -47,9 +47,10 @@ export function LatencyCorrelations({ onClose }: Props) {
   ] = useState<SelectedSignificantTerm | null>(null);
 
   const { serviceName } = useParams<{ serviceName?: string }>();
-  const { urlParams, uiFilters } = useUrlParams();
+  const { urlParams } = useUrlParams();
   const {
     environment,
+    kuery,
     transactionName,
     transactionType,
     start,
@@ -76,12 +77,12 @@ export function LatencyCorrelations({ onClose }: Props) {
           params: {
             query: {
               environment,
+              kuery,
               serviceName,
               transactionName,
               transactionType,
               start,
               end,
-              uiFilters: JSON.stringify(uiFilters),
               durationPercentile: durationPercentile.toString(10),
               fieldNames: fieldNames.join(','),
             },
@@ -91,12 +92,12 @@ export function LatencyCorrelations({ onClose }: Props) {
     },
     [
       environment,
+      kuery,
       serviceName,
       start,
       end,
       transactionName,
       transactionType,
-      uiFilters,
       durationPercentile,
       fieldNames,
     ]

diff --git a/x-pack/plugins/apm/public/components/app/error_group_overview/index.tsx b/x-pack/plugins/apm/public/components/app/error_group_overview/index.tsx
@@ -27,8 +27,9 @@ interface ErrorGroupOverviewProps {
 }
 
 export function ErrorGroupOverview({ serviceName }: ErrorGroupOverviewProps) {
-  const { urlParams, uiFilters } = useUrlParams();
-  const { environment, start, end, sortField, sortDirection } = urlParams;
+  const {
+    urlParams: { environment, kuery, start, end, sortField, sortDirection },
+  } = useUrlParams();
   const { errorDistributionData } = useErrorGroupDistributionFetcher({
     serviceName,
     groupId: undefined,
@@ -47,17 +48,17 @@ export function ErrorGroupOverview({ serviceName }: ErrorGroupOverviewProps) {
             },
             query: {
               environment,
+              kuery,
               start,
               end,
               sortField,
               sortDirection: normalizedSortDirection,
-              uiFilters: JSON.stringify(uiFilters),
             },
           },
         });
       }
     },
-    [environment, serviceName, start, end, sortField, sortDirection, uiFilters]
+    [environment, kuery, serviceName, start, end, sortField, sortDirection]
   );
 
   useTrackPageview({

diff --git a/x-pack/plugins/apm/public/components/app/service_inventory/index.tsx b/x-pack/plugins/apm/public/components/app/service_inventory/index.tsx
@@ -36,10 +36,12 @@ const initialData = {
 let hasDisplayedToast = false;
 
 function useServicesFetcher() {
-  const { urlParams, uiFilters } = useUrlParams();
+  const {
+    urlParams: { environment, kuery, start, end },
+  } = useUrlParams();
   const { core } = useApmPluginContext();
   const upgradeAssistantHref = useUpgradeAssistantHref();
-  const { environment, start, end } = urlParams;
+
   const { data = initialData, status } = useFetcher(
     (callApmApi) => {
       if (start && end) {
@@ -48,15 +50,15 @@ function useServicesFetcher() {
           params: {
             query: {
               environment,
+              kuery,
               start,
               end,
-              uiFilters: JSON.stringify(uiFilters),
             },
           },
         });
       }
     },
-    [environment, start, end, uiFilters]
+    [environment, kuery, start, end]
   );
 
   useEffect(() => {

diff --git a/x-pack/plugins/apm/public/components/app/service_node_metrics/index.tsx b/x-pack/plugins/apm/public/components/app/service_node_metrics/index.tsx
@@ -57,11 +57,12 @@ type ServiceNodeMetricsProps = RouteComponentProps<{
 }>;
 
 export function ServiceNodeMetrics({ match }: ServiceNodeMetricsProps) {
-  const { urlParams, uiFilters } = useUrlParams();
+  const {
+    urlParams: { kuery, start, end },
+  } = useUrlParams();
   const { serviceName, serviceNodeName } = match.params;
   const { agentName } = useApmServiceContext();
   const { data } = useServiceMetricChartsFetcher({ serviceNodeName });
-  const { start, end } = urlParams;
 
   const { data: { host, containerId } = INITIAL_DATA, status } = useFetcher(
     (callApmApi) => {
@@ -72,15 +73,15 @@ export function ServiceNodeMetrics({ match }: ServiceNodeMetricsProps) {
           params: {
             path: { serviceName, serviceNodeName },
             query: {
+              kuery,
               start,
               end,
-              uiFilters: JSON.stringify(uiFilters),
             },
           },
         });
       }
     },
-    [serviceName, serviceNodeName, start, end, uiFilters]
+    [kuery, serviceName, serviceNodeName, start, end]
   );
 
   const isLoading = status === FETCH_STATUS.LOADING;

diff --git a/x-pack/plugins/apm/public/components/app/service_node_overview/index.tsx b/x-pack/plugins/apm/public/components/app/service_node_overview/index.tsx
@@ -35,8 +35,9 @@ interface ServiceNodeOverviewProps {
 }
 
 function ServiceNodeOverview({ serviceName }: ServiceNodeOverviewProps) {
-  const { uiFilters, urlParams } = useUrlParams();
-  const { start, end } = urlParams;
+  const {
+    urlParams: { kuery, start, end },
+  } = useUrlParams();
 
   const { data: items = [] } = useFetcher(
     (callApmApi) => {
@@ -50,14 +51,14 @@ function ServiceNodeOverview({ serviceName }: ServiceNodeOverviewProps) {
             serviceName,
           },
           query: {
+            kuery,
             start,
             end,
-            uiFilters: JSON.stringify(uiFilters),
           },
         },
       });
     },
-    [serviceName, start, end, uiFilters]
+    [kuery, serviceName, start, end]
   );
 
   const columns: Array<ITableColumn<typeof items[0]>> = [

diff --git a/...lugins/apm/public/components/app/service_overview/service_overview_errors_table/index.tsx b/...lugins/apm/public/components/app/service_overview/service_overview_errors_table/index.tsx
@@ -43,8 +43,7 @@ const INITIAL_STATE = {
 
 export function ServiceOverviewErrorsTable({ serviceName }: Props) {
   const {
-    urlParams: { environment, start, end },
-    uiFilters,
+    urlParams: { environment, kuery, start, end },
   } = useUrlParams();
   const { transactionType } = useApmServiceContext();
   const [tableOptions, setTableOptions] = useState<{
@@ -72,9 +71,9 @@ export function ServiceOverviewErrorsTable({ serviceName }: Props) {
           path: { serviceName },
           query: {
             environment,
+            kuery,
             start,
             end,
-            uiFilters: JSON.stringify(uiFilters),
             transactionType,
           },
         },
@@ -85,7 +84,7 @@ export function ServiceOverviewErrorsTable({ serviceName }: Props) {
         };
       });
     },
-    [environment, start, end, serviceName, uiFilters, transactionType]
+    [environment, kuery, start, end, serviceName, transactionType]
   );
 
   const { requestId, items } = data;
@@ -116,9 +115,10 @@ export function ServiceOverviewErrorsTable({ serviceName }: Props) {
           params: {
             path: { serviceName },
             query: {
+              environment,
+              kuery,
               start,
               end,
-              uiFilters: JSON.stringify(uiFilters),
               numBuckets: 20,
               transactionType,
               groupIds,

diff --git a/...apm/public/components/app/service_overview/service_overview_instances_chart_and_table.tsx b/...apm/public/components/app/service_overview/service_overview_instances_chart_and_table.tsx
@@ -25,8 +25,7 @@ export function ServiceOverviewInstancesChartAndTable({
   const { transactionType } = useApmServiceContext();
 
   const {
-    urlParams: { environment, latencyAggregationType, start, end },
-    uiFilters,
+    urlParams: { environment, kuery, latencyAggregationType, start, end },
   } = useUrlParams();
 
   const { data = [], status } = useFetcher(
@@ -44,24 +43,24 @@ export function ServiceOverviewInstancesChartAndTable({
           },
           query: {
             environment,
+            kuery,
             latencyAggregationType,
             start,
             end,
             transactionType,
-            uiFilters: JSON.stringify(uiFilters),
             numBuckets: 20,
           },
         },
       });
     },
     [
       environment,
+      kuery,
       latencyAggregationType,
       start,
       end,
       serviceName,
       transactionType,
-      uiFilters,
     ]
   );
 

diff --git a/.../plugins/apm/public/components/app/service_overview/service_overview_throughput_chart.tsx b/.../plugins/apm/public/components/app/service_overview/service_overview_throughput_chart.tsx
@@ -28,9 +28,10 @@ export function ServiceOverviewThroughputChart({
 }) {
   const theme = useTheme();
   const { serviceName } = useParams<{ serviceName?: string }>();
-  const { urlParams, uiFilters } = useUrlParams();
+  const {
+    urlParams: { environment, kuery, start, end },
+  } = useUrlParams();
   const { transactionType } = useApmServiceContext();
-  const { environment, start, end } = urlParams;
 
   const { data = INITIAL_STATE, status } = useFetcher(
     (callApmApi) => {
@@ -43,16 +44,16 @@ export function ServiceOverviewThroughputChart({
             },
             query: {
               environment,
+              kuery,
               start,
               end,
               transactionType,
-              uiFilters: JSON.stringify(uiFilters),
             },
           },
         });
       }
     },
-    [environment, serviceName, start, end, uiFilters, transactionType]
+    [environment, kuery, serviceName, start, end, transactionType]
   );
 
   return (

diff --git a/.../apm/public/components/app/service_overview/service_overview_transactions_table/index.tsx b/.../apm/public/components/app/service_overview/service_overview_transactions_table/index.tsx
@@ -57,8 +57,7 @@ export function ServiceOverviewTransactionsTable({ serviceName }: Props) {
 
   const { transactionType } = useApmServiceContext();
   const {
-    uiFilters,
-    urlParams: { environment, start, end, latencyAggregationType },
+    urlParams: { environment, kuery, start, end, latencyAggregationType },
   } = useUrlParams();
 
   const { data = INITIAL_STATE, status } = useFetcher(
@@ -73,9 +72,9 @@ export function ServiceOverviewTransactionsTable({ serviceName }: Props) {
           path: { serviceName },
           query: {
             environment,
+            kuery,
             start,
             end,
-            uiFilters: JSON.stringify(uiFilters),
             transactionType,
             latencyAggregationType,
           },
@@ -89,10 +88,10 @@ export function ServiceOverviewTransactionsTable({ serviceName }: Props) {
     },
     [
       environment,
+      kuery,
       serviceName,
       start,
       end,
-      uiFilters,
       transactionType,
       latencyAggregationType,
     ]
@@ -128,9 +127,9 @@ export function ServiceOverviewTransactionsTable({ serviceName }: Props) {
             path: { serviceName },
             query: {
               environment,
+              kuery,
               start,
               end,
-              uiFilters: JSON.stringify(uiFilters),
               numBuckets: 20,
               transactionType,
               latencyAggregationType,