[ML] More fine grained latency range selection.

elastic · Aug 4, 2021 · a26728a · a26728a
1 parent 69b38d2
commit a26728a
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 24 deletions.
diff --git a/x-pack/plugins/apm/public/components/app/transaction_details/index.tsx b/x-pack/plugins/apm/public/components/app/transaction_details/index.tsx
@@ -60,33 +60,30 @@ export function TransactionDetails() {
     }),
   });
 
-  const selectedSample = flatten(
-    distributionData.buckets.map((bucket) => bucket.samples)
-  ).find(
-    (sample) =>
-      sample.transactionId === urlParams.transactionId &&
-      sample.traceId === urlParams.traceId
-  );
-
-  const bucketWithSample =
-    selectedSample &&
-    distributionData.buckets.find((bucket) =>
-      bucket.samples.includes(selectedSample)
-    );
-
-  const traceSamples = bucketWithSample?.samples ?? [];
-  const bucketIndex = bucketWithSample
-    ? distributionData.buckets.indexOf(bucketWithSample)
-    : -1;
+  const { sampleRangeFrom, sampleRangeTo } = urlParams;
 
-  const selectionFrom = bucketWithSample?.key;
-  const bucketTo = distributionData.buckets[bucketIndex + 1];
-  const selectionTo = bucketTo?.key;
+  const traceSamples: Sample[] =
+    sampleRangeFrom !== undefined && sampleRangeTo !== undefined
+      ? flatten(
+          distributionData.buckets
+            .filter((b) => b.key >= sampleRangeFrom && b.key <= sampleRangeTo)
+            .map((bucket) => bucket.samples)
+        )
+      : flatten(distributionData.buckets.map((bucket) => bucket.samples));
 
   const selectSampleFromChartSelection = (selection: XYBrushArea) => {
     if (selection !== undefined) {
       const { x } = selection;
-      if (x !== undefined) {
+      if (Array.isArray(x)) {
+        history.push({
+          ...history.location,
+          search: fromQuery({
+            ...toQuery(history.location.search),
+            sampleRangeFrom: Math.round(x[0]),
+            sampleRangeTo: Math.round(x[1]),
+          }),
+        });
+
         const filteredSamples: Sample[] = flatten(
           distributionData.buckets
             .filter((b) => b.key > x[0] && b.key < x[1])
@@ -132,8 +129,8 @@ export function TransactionDetails() {
           <MlLatencyCorrelations
             onChartSelection={selectSampleFromChartSelection}
             selection={
-              selectionFrom !== undefined && selectionTo !== undefined
-                ? [selectionFrom, selectionTo]
+              sampleRangeFrom !== undefined && sampleRangeTo !== undefined
+                ? [sampleRangeFrom, sampleRangeTo]
                 : undefined
             }
           />

diff --git a/x-pack/plugins/apm/public/components/shared/Links/url_helpers.ts b/x-pack/plugins/apm/public/components/shared/Links/url_helpers.ts
@@ -65,6 +65,8 @@ export function createHref(
 }
 
 export type APMQueryParams = {
+  sampleRangeFrom?: number;
+  sampleRangeTo?: number;
   transactionId?: string;
   transactionName?: string;
   transactionType?: string;

diff --git a/x-pack/plugins/apm/public/context/url_params_context/resolve_url_params.ts b/x-pack/plugins/apm/public/context/url_params_context/resolve_url_params.ts
@@ -30,6 +30,8 @@ export function resolveUrlParams(location: Location, state: TimeUrlParams) {
   const query = toQuery(location.search);
 
   const {
+    sampleRangeFrom,
+    sampleRangeTo,
     traceId,
     transactionId,
     transactionName,
@@ -73,6 +75,8 @@ export function resolveUrlParams(location: Location, state: TimeUrlParams) {
     pageSize: pageSize ? toNumber(pageSize) : undefined,
     transactionId: toString(transactionId),
     traceId: toString(traceId),
+    sampleRangeFrom: toNumber(sampleRangeFrom),
+    sampleRangeTo: toNumber(sampleRangeTo),
     waterfallItemId: toString(waterfallItemId),
     detailTab: toString(detailTab),
     flyoutDetailTab: toString(flyoutDetailTab),

diff --git a/x-pack/plugins/apm/public/context/url_params_context/types.ts b/x-pack/plugins/apm/public/context/url_params_context/types.ts
@@ -24,6 +24,8 @@ export type IUrlParams = {
   sortDirection?: string;
   sortField?: string;
   start?: string;
+  sampleRangeFrom?: number;
+  sampleRangeTo?: number;
   traceId?: string;
   transactionId?: string;
   transactionName?: string;