inject html to format euidatagrid

Signed-off-by: Adam Tackett <tackadam@amazon.com>

public/components/trace_analytics/components/common/helper_functions.tsx

@@ -8,7 +8,7 @@
 import { EuiEmptyPrompt, EuiSmallButtonEmpty, EuiSpacer, EuiText } from '@elastic/eui';
 import { SpacerSize } from '@elastic/eui/src/components/spacer/spacer';
 import { isEmpty, round } from 'lodash';
-import React from 'react';
+import React, { useEffect } from 'react';
 import {
   DATA_PREPPER_INDEX_NAME,
   DATA_PREPPER_SERVICE_INDEX_NAME,
@@ -252,11 +252,11 @@
 
     const averageLatency = `Average duration: ${
       map[service].latency! >= 0 ? map[service].latency + 'ms' : '-'
-    }`;
+      }`;
 
     const errorRate = `Error rate: ${
       map[service].error_rate! >= 0 ? map[service].error_rate + '%' : '-'
-    }`;
+      }`;
 
     const throughput =
       'Request rate: ' +
@@ -360,7 +360,7 @@
   percentileMaps: Array<{ traceGroupName: string; durationFilter: { gte?: number; lte?: number } }>,
   conditionString: string // >= 95th, < 95th
 ): FilterType => {
   const DSL: any = {
     query: {
       bool: {
         must: [],
@@ -405,12 +405,12 @@
   mode: TraceAnalyticsMode,
   filters: FilterType[],
   query: string,
   startTime: any,
   endTime: any,
   page?: string,
   appConfigs: FilterType[] = []
 ) => {
   const DSL: any = {
     query: {
       bool: {
         must: [],
@@ -677,3 +677,83 @@
     return [];
   }
 };
+
+export const InjectElementsIntoGrid = (
+  rowCount: number,
+  maxDisplayRows: number,
+  tracesTableMode: string,
+  loadMoreHandler?: () => void
+) => {
+  useEffect(() => {
+    setTimeout(() => {
+      const toolbar = document.querySelector('.euiDataGrid__controls') as HTMLElement;
+      if (toolbar && rowCount > maxDisplayRows) {
+        toolbar.style.display = 'flex';
+        toolbar.style.alignItems = 'center';
+        toolbar.style.justifyContent = 'space-between';
+
+        let warningDiv = toolbar.querySelector('.trace-table-warning') as HTMLElement;
+        if (!warningDiv) {
+          warningDiv = document.createElement('div');
+          warningDiv.className = 'trace-table-warning';
+          warningDiv.style.marginLeft = 'auto';
+          warningDiv.style.color = '#a87900';
+          warningDiv.style.fontSize = '13px';
+          warningDiv.style.display = 'flex';
+          warningDiv.style.alignItems = 'center';
+          warningDiv.style.padding = '2px 8px';
+          warningDiv.style.borderRadius = '4px';
+          warningDiv.style.whiteSpace = 'nowrap';
+
+          const icon = document.createElement('span');
+          icon.className = 'euiIcon euiIcon--medium euiIcon--warning';
+          icon.setAttribute('aria-label', 'Warning');
+          icon.style.marginRight = '4px';
+
+          const strongElement = document.createElement('strong');
+          strongElement.textContent = `${maxDisplayRows}`;
+
+          const textSpan = document.createElement('span');
+          textSpan.appendChild(strongElement);
+          textSpan.appendChild(document.createTextNode(" results shown out of "));
+          textSpan.appendChild(document.createTextNode(` ${rowCount}`));
+
+          warningDiv.appendChild(icon);
+          warningDiv.appendChild(textSpan);
+
+          toolbar.appendChild(warningDiv);
+        }
+      }
+
+      const pagination = document.querySelector('.euiDataGrid__pagination') as HTMLElement;
+
+      if (tracesTableMode !== "traces") {
+        if (pagination) {
+          const existingLoadMoreButton = pagination.querySelector('.trace-table-load-more');
+          if (existingLoadMoreButton) {
+            existingLoadMoreButton.remove();
+          }
+        }
+        return;
+      }
+
+      if (pagination && loadMoreHandler) {
+        pagination.style.display = 'flex';
+        pagination.style.alignItems = 'center';
+        pagination.style.justifyContent = 'space-between';
+
+        let loadMoreButton = pagination.querySelector('.trace-table-load-more') as HTMLElement;
+        if (!loadMoreButton) {
+          loadMoreButton = document.createElement('button');
+          loadMoreButton.className = 'trace-table-load-more euiButtonEmpty euiButtonEmpty--text';
+          loadMoreButton.style.marginLeft = '12px';
+          loadMoreButton.innerText = 'Load more data';
+
+          loadMoreButton.onclick = () => loadMoreHandler();
+
+          pagination.appendChild(loadMoreButton);
+        }
+      }
+    }, 100);
+  }, [rowCount, tracesTableMode, loadMoreHandler]);
+};

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

@@ -13,18 +13,16 @@
   EuiFlexItem,
   EuiHighlight,
   EuiIcon,
-  EuiLoadingContent,
-  EuiLoadingSpinner,
   EuiOverlayMask,
   EuiPopover,
   EuiPopoverTitle,
   EuiSelectable,
+  EuiText,
   EuiTextColor,
-  EuiToolTip,
 } from '@elastic/eui';
 import { i18n } from '@osd/i18n';
 import React, { useMemo, useState } from 'react';
-import { NoMatchMessage } from '../helper_functions';
+import { InjectElementsIntoGrid, NoMatchMessage } from '../helper_functions';
 import {
   TRACE_TABLE_OPTIONS,
   TRACE_TABLE_TITLES,
@@ -107,10 +105,10 @@
   noMatchMessageSize = 'xl',
   defaultHeight = '500px',
   visibleColumns,
   isTableDataLoading,
   tracesTableMode,
   setTracesTableMode,
   maxTraces,
   setMaxTraces,
 }) => {
   const defaultVisibleColumns = useMemo(() => {
@@ -127,14 +125,18 @@
   const [isPopoverOpen, setIsPopoverOpen] = useState(false);
 
   const displayedRowCount = rowCount > MAX_DISPLAY_ROWS ? MAX_DISPLAY_ROWS : rowCount;
   const isRowCountLimited = rowCount > MAX_DISPLAY_ROWS;
 
   const tableOptions = tracesTableMode
     ? TRACE_TABLE_OPTIONS.map((obj) =>
       obj.key === tracesTableMode ? { ...obj, checked: 'on' } : obj
     )
     : [];
 
+  InjectElementsIntoGrid(rowCount, MAX_DISPLAY_ROWS, tracesTableMode ?? "", () => {
+    setMaxTraces((prevMax: number) => Math.min(prevMax + 500, MAX_DISPLAY_ROWS));
+  });
+
   const disableInteractions = useMemo(() => isFullScreen, [isFullScreen]);
 
   const tableModeSelector =
@@ -145,29 +147,21 @@
         panelStyle={{ width: '350px' }}
         button={
           <EuiFlexGroup alignItems="center" gutterSize="s" direction="row">
-
-            {isTableDataLoading && (
+            <EuiFlexGroup alignItems="center" gutterSize="xs" direction="row">
               <EuiFlexItem grow={false}>
-                <EuiLoadingSpinner size="m" />
+                <EuiText size="s">
+                  <EuiTextColor
+                    color="success"
+                    onClick={() => setIsPopoverOpen(!isPopoverOpen)}
+                    style={{ cursor: 'pointer', display: 'flex', alignItems: 'center' }}
+                  >
+                    {TRACE_TABLE_TITLES[tracesTableMode]} ({displayedRowCount})
+                    <EuiIcon type="arrowDown" size="s" color="success" style={{ marginLeft: 4 }} />
+                  </EuiTextColor>
+                </EuiText>
               </EuiFlexItem>
-            )}
+            </EuiFlexGroup>
             <EuiFlexItem grow={false}>
-              <EuiButtonEmpty
-                size="xs"
-                onClick={() => setIsPopoverOpen(!isPopoverOpen)}
-                iconType="arrowDown"
-                data-test-subj="traceTableModeSelector"
-                color="text"
-              >
-                {TRACE_TABLE_TITLES[tracesTableMode]} ({displayedRowCount})
-                {isRowCountLimited && (
-                  <EuiToolTip
-                    content={`Actual hits: ${rowCount}. Only ${MAX_DISPLAY_ROWS} can be displayed.`}
-                  >
-                    <EuiIcon type="iInCircle" color="subdued" size="s" style={{ marginLeft: 6 }} />
-                  </EuiToolTip>
-                )}
-              </EuiButtonEmpty>
             </EuiFlexItem>
           </EuiFlexGroup>
         }
@@ -188,7 +182,7 @@
           )}
           onChange={(newOptions) => {
             const selectedMode = newOptions.find((option) => option.checked === 'on')?.key;
-            if (selectedMode) {
+            if (selectedMode && selectedMode !== tracesTableMode) {
               setTracesTableMode(selectedMode);
               sessionStorage.setItem(TRACE_TABLE_TYPE_KEY, selectedMode);
             }
@@ -200,45 +194,39 @@
       </EuiPopover>
     ) : null;
 
-  const LoadMoreButton =
-    tracesTableMode === 'traces' && maxTraces < MAX_DISPLAY_ROWS ? (
-      <EuiButtonEmpty
-        size="xs"
-        onClick={() => {
-          setMaxTraces((prevMax) => Math.min(prevMax + 500, MAX_DISPLAY_ROWS));
-        }}
-        key="loadMore"
-        color="text"
-        data-test-subj="loadMoreButton"
-      >
-        Load more
-      </EuiButtonEmpty>
-    ) : null;
+  const toolbarControls = useMemo(() => {
+    const controls = [];
+
+    if (tableModeSelector) {
+      controls.push(tableModeSelector);
+    }
 
-  const toolbarControls = useMemo(
-    () => [
-      ...(tableModeSelector ? [tableModeSelector] : []),
-      LoadMoreButton,
-      <EuiButtonEmpty
-        size="xs"
-        onClick={() => setIsFullScreen((prev) => !prev)}
-        key="fullScreen"
-        color="text"
+    if (!["all_spans", "root_spans", "service_entry_spans"].includes(tracesTableMode ?? "")) {
+      controls.push(
+        <EuiButtonEmpty
+          size="xs"
+          onClick={() => setIsFullScreen((prev) => !prev)}
+          key="fullScreen"
+          color="text"
         iconType={isFullScreen ? 'cross' : 'fullScreen'}
-        data-test-subj="fullScreenButton"
-      >
-        {isFullScreen
+          data-test-subj="fullScreenButton"
+        >
+          {isFullScreen
           ? i18n.translate('toolbarControls.exitFullScreen', {
             defaultMessage: 'Exit full screen',
-          })
+            })
           : i18n.translate('toolbarControls.fullScreen', {
             defaultMessage: 'Full screen',
-          })}
-      </EuiButtonEmpty>,
-      ...toolbarButtons,
-    ],
-    [isFullScreen, toolbarButtons, tracesTableMode]
-  );
+            })}
+        </EuiButtonEmpty>
+      );
+    }
+
+    controls.push(...toolbarButtons);
+
+    return controls;
+  }, [isFullScreen, toolbarButtons, tracesTableMode]);
+
 
   const gridStyle = useMemo(
     () => ({
@@ -253,11 +241,7 @@
     []
   );
 
-  return false ? ( //isTableDataLoading DELETE ADAM
-    <div>
-      <EuiLoadingContent lines={4} />
-    </div>
-  ) : (
+  return (
     <>
       <FullScreenWrapper isFullScreen={isFullScreen} onClose={() => setIsFullScreen(false)}>
         <div className={isFullScreen ? 'full-wrapper' : 'normal-wrapper'}>

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

@@ -151,9 +151,6 @@ export const getTracesQuery = (
                 if (doc.containsKey('traceGroupFields.durationInNanos') && !doc['traceGroupFields.durationInNanos'].empty) {
                   return Math.round(doc['traceGroupFields.durationInNanos'].value / 10000) / 100.0
                 }
-                if (doc.containsKey('durationInNanos') && !doc['durationInNanos'].empty) {
-                  return Math.round(doc['durationInNanos'].value / 10000) / 100.0
-                }
 
                 return 0
                 `,
@@ -176,19 +173,7 @@ export const getTracesQuery = (
           },
           last_updated: {
             max: {
-              script: {
-                source: `
-                if (doc.containsKey('traceGroupFields.endTime') && !doc['traceGroupFields.endTime'].empty) {
-                  return doc['traceGroupFields.endTime'].value
-                }
-                if (doc.containsKey('endTime') && !doc['endTime'].empty) {
-                  return doc['endTime'].value
-                }
-
-                return 0
-                `,
-                lang: 'painless',
-              },
+              field: 'traceGroupFields.endTime',
             },
           },
         },