remove sorting on invalid fields, adjust load more ui

Signed-off-by: Adam Tackett <[email protected]>

Author: Adam Tackett

public/components/trace_analytics/components/common/shared_components/component_helper_functions.tsx

@@ -11,7 +11,8 @@ export const useInjectElementsIntoGrid = (
   maxDisplayRows: number,
   tracesTableMode: string,
   loadMoreHandler?: () => void,
-  maxTraces?: number
+  maxTraces?: number,
+  isLastPage?: boolean
 ) => {
   useEffect(() => {
     setTimeout(() => {
@@ -51,18 +52,16 @@ export const useInjectElementsIntoGrid = (
       }
 
       const pagination = document.querySelector<HTMLElement>('.euiDataGrid__pagination');
+      const existingLoadMoreButton = pagination?.querySelector('.trace-table-load-more');
 
-      if (tracesTableMode !== 'traces') {
-        if (pagination) {
-          const existingLoadMoreButton = pagination.querySelector('.trace-table-load-more');
-          if (existingLoadMoreButton) {
-            existingLoadMoreButton.remove();
-          }
+      if (tracesTableMode !== 'traces' || !pagination || !loadMoreHandler || !isLastPage) {
+        if (existingLoadMoreButton) {
+          existingLoadMoreButton.remove();
         }
         return;
       }
 
-      if (pagination && loadMoreHandler) {
+      if (pagination && loadMoreHandler && isLastPage) {
         pagination.style.display = 'flex';
         pagination.style.alignItems = 'center';
         pagination.style.justifyContent = 'space-between';
@@ -72,13 +71,20 @@ export const useInjectElementsIntoGrid = (
           loadMoreButton = document.createElement('button');
           loadMoreButton.className = 'trace-table-load-more euiButtonEmpty euiButtonEmpty--text';
           loadMoreButton.style.marginLeft = '12px';
-          loadMoreButton.innerText = 'Load more data';
+          loadMoreButton.innerText = '... Load more';
 
           loadMoreButton.onclick = () => loadMoreHandler();
 
-          pagination.appendChild(loadMoreButton);
+          const paginationList = pagination.querySelector('.euiPagination__list');
+
+          if (paginationList) {
+            const listItem = document.createElement('li');
+            listItem.className = 'euiPagination__item trace-table-load-more';
+            listItem.appendChild(loadMoreButton);
+            paginationList.appendChild(listItem);
+          }
         }
       }
     }, 100);
-  }, [rowCount, tracesTableMode, loadMoreHandler, maxTraces, maxDisplayRows]);
+  }, [rowCount, tracesTableMode, loadMoreHandler, maxTraces, maxDisplayRows, isLastPage]);
 };

public/components/trace_analytics/components/common/shared_components/custom_datagrid.tsx

@@ -137,14 +137,26 @@ export const RenderCustomDataGrid: React.FC<RenderCustomDataGridParams> = ({
       )
     : [];
 
+  const isLastPage =
+    tracesTableMode === 'traces' && pagination?.pageSize && maxTraces != null
+      ? (pagination.pageIndex + 1) * pagination.pageSize >= maxTraces &&
+        rowCount > maxTraces &&
+        maxTraces < MAX_DISPLAY_ROWS
+      : false;
+
   useInjectElementsIntoGrid(
     rowCount,
     MAX_DISPLAY_ROWS,
     tracesTableMode ?? '',
     () => {
-      setMaxTraces((prevMax: number) => Math.min(prevMax + 500, MAX_DISPLAY_ROWS));
+      // Add 500 more traces at a time untill all traces present
+      const nextIncrement = Math.min(500, rowCount - maxTraces);
+      if (nextIncrement > 0 && maxTraces < MAX_DISPLAY_ROWS) {
+        setMaxTraces((prevMax) => Math.min(prevMax + nextIncrement, MAX_DISPLAY_ROWS));
+      }
     },
-    maxTraces
+    maxTraces,
+    isLastPage
   );
 
   const disableInteractions = useMemo(() => isFullScreen, [isFullScreen]);

public/components/trace_analytics/components/traces/trace_table_helpers.tsx

@@ -139,30 +139,30 @@ export const getTableColumns = (
         field: 'spanId',
         name: 'Span Id',
         align: 'left',
-        sortable: true,
+        sortable: false,
         render: renderIdField,
         className: 'span-group-column',
       },
       {
         field: 'traceId',
         name: 'Trace Id',
         align: 'left',
-        sortable: true,
+        sortable: false,
         render: renderTraceLinkField,
       },
       {
         field: 'parentSpanId',
         name: 'Parent Span Id',
         align: 'left',
-        sortable: true,
+        sortable: false,
         render: renderIdField,
         className: 'span-group-column',
       },
       {
         field: 'traceGroup',
         name: 'Trace group',
         align: 'left',
-        sortable: true,
+        sortable: false,
         truncateText: true,
       },
       {
@@ -196,16 +196,16 @@ export const getTableColumns = (
     return [
       {
         field: 'trace_id',
-        name: 'Trace ID',
+        name: 'Trace Id',
         align: 'left',
-        sortable: true,
+        sortable: false,
         render: renderTraceLinkField,
       },
       {
         field: 'trace_group',
         name: 'Trace group',
         align: 'left',
-        sortable: true,
+        sortable: false,
         truncateText: true,
       },
       {
@@ -219,7 +219,7 @@ export const getTableColumns = (
         field: 'percentile_in_trace_group',
         name: 'Percentile in trace group',
         align: 'right',
-        sortable: true,
+        sortable: false,
         render: (item) => (item ? `${round(item, 2)}th` : '-'),
       },
       {
@@ -243,9 +243,9 @@ export const getTableColumns = (
   return [
     {
       field: 'trace_id',
-      name: 'Trace ID',
+      name: 'Trace Id',
       align: 'left',
-      sortable: true,
+      sortable: false,
       render: renderTraceLinkField,
     },
     { field: 'latency', name: 'Latency (ms)', align: 'right', sortable: true },

public/components/trace_analytics/components/traces/traces_content.tsx

@@ -100,36 +100,7 @@ export function TracesContent(props: TracesProps) {
 
     setSortingColumns(sortColumns);
 
-    // The columns that can not be used in a query, only rendered on page
-    const localOnlyFields = ['trace_group', 'percentile_in_trace_group', 'trace_id'];
-
     if (tracesTableMode === 'traces') {
-      // Client-side sort if field is local-only
-      if (localOnlyFields.includes(sortField)) {
-        const sorted = [...tableItems].sort((a, b) => {
-          let valueA = a[sortField];
-          let valueB = b[sortField];
-
-          if (typeof valueA === 'string' && typeof valueB === 'string') {
-            valueA = valueA.toLowerCase();
-            valueB = valueB.toLowerCase();
-            return sortDirection === 'asc'
-              ? valueA.localeCompare(valueB)
-              : valueB.localeCompare(valueA);
-          }
-
-          if (typeof valueA === 'number' && typeof valueB === 'number') {
-            return sortDirection === 'asc' ? valueA - valueB : valueB - valueA;
-          }
-
-          return 0;
-        });
-
-        setTableItems(sorted);
-        return;
-      }
-
-      // Server-side sort for supported fields
       const sort = { field: sortField, direction: sortDirection };
       refreshTracesTableData(sort, 0, pageSize);
     } else {
@@ -232,9 +203,24 @@ export function TracesContent(props: TracesProps) {
     startTime,
     endTime,
     props.dataSourceMDSId,
-    maxTraces,
   ]);
 
+  useEffect(() => {
+    if (tracesTableMode !== 'traces') return;
+
+    const currentSort = sortingColumns[0];
+
+    const sort = currentSort
+      ? { field: currentSort.id, direction: currentSort.direction }
+      : undefined;
+
+    refreshTracesTableData(sort, pageIndex, pageSize);
+  }, [maxTraces]);
+
+  useEffect(() => {
+    setPageIndex(0);
+  }, [tracesTableMode]);
+
   const onToggle = (isOpen: boolean) => {
     const newState = isOpen ? 'open' : 'closed';
     setTrigger(newState);

public/components/trace_analytics/requests/queries/traces_queries.ts

@@ -56,6 +56,7 @@ export const getTracesQuery = (
 ) => {
   const field = sort?.field || '_key';
   const direction = sort?.direction || 'asc';
+  // Need aggregation because filtering considers the children
   const jaegerQuery: any = {
     size: 0,
     query: {
@@ -187,7 +188,7 @@ export const getTracesQuery = (
         },
       },
     },
-    track_total_hits: true,
+    track_total_hits: false,
   };
   if (traceId) {
     jaegerQuery.query.bool.filter.push({

public/components/trace_analytics/requests/traces_request_handler.ts

@@ -8,6 +8,7 @@ import { isArray, isObject } from 'lodash';
 import get from 'lodash/get';
 import omitBy from 'lodash/omitBy';
 import round from 'lodash/round';
+import cloneDeep from 'lodash/cloneDeep';
 import moment from 'moment';
 import { v1 as uuid } from 'uuid';
 import { HttpSetup } from '../../../../../../src/core/public';
@@ -157,8 +158,37 @@ export const handleTracesRequest = async (
         })
       : Promise.resolve({});
 
-  return Promise.allSettled([responsePromise, percentileRangesPromise])
-    .then(([responseResult, percentileRangesResult]) => {
+  let rootSpansTotalHitsPromise: Promise<number> | undefined;
+
+  if (setTotalHits && (mode === 'data_prepper' || mode === 'custom_data_prepper')) {
+    const rootSpansDSL = cloneDeep(timeFilterDSL);
+    rootSpansDSL.query.bool.filter.push({
+      term: {
+        parentSpanId: '',
+      },
+    });
+
+    const rootSpansQuery = {
+      size: 0,
+      query: rootSpansDSL.query,
+      index: getTracesQuery(mode).index,
+      track_total_hits: true, // Override default 10,000 cap
+    };
+
+    rootSpansTotalHitsPromise = handleDslRequest(
+      http,
+      {},
+      rootSpansQuery,
+      mode,
+      dataSourceMDSId
+    ).then((res) => res?.hits?.total?.value ?? 0);
+  }
+
+  const promises = [responsePromise, percentileRangesPromise];
+  if (rootSpansTotalHitsPromise) promises.push(rootSpansTotalHitsPromise);
+
+  return Promise.allSettled(promises)
+    .then(([responseResult, percentileRangesResult, totalHitsResult]) => {
       if (responseResult.status === 'rejected') {
         setItems([]);
         return;
@@ -168,9 +198,8 @@ export const handleTracesRequest = async (
         percentileRangesResult.status === 'fulfilled' ? percentileRangesResult.value : {};
       const response = responseResult.value;
 
-      if (setTotalHits) {
-        const totalHits = response?.hits?.total?.value ?? 0;
-        setTotalHits(totalHits);
+      if (setTotalHits && totalHitsResult?.status === 'fulfilled') {
+        setTotalHits(totalHitsResult.value);
       }
 
       if (