progress on eui data grid and query

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

Author: Adam Tackett

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

@@ -81,7 +81,6 @@ interface RenderCustomDataGridParams {
   isTableDataLoading?: boolean;
   tracesTableMode?: string;
   setTracesTableMode?: (mode: string) => void;
-  toggleAttributesButton?: React.ReactNode;
 }
 
 export const RenderCustomDataGrid: React.FC<RenderCustomDataGridParams> = ({
@@ -99,11 +98,18 @@ export const RenderCustomDataGrid: React.FC<RenderCustomDataGridParams> = ({
   isTableDataLoading,
   tracesTableMode,
   setTracesTableMode,
-  toggleAttributesButton
 }) => {
+
+  const defaultVisibleColumns = useMemo(() => {
+    return columns
+      .filter((col) => !col.id.includes('attributes') && !col.id.includes('instrumentation'))
+      .map((col) => col.id);
+  }, [columns]);
+
   const [localVisibleColumns, setLocalVisibleColumns] = useState(
-    visibleColumns ?? columns.map((col) => col.id)
+    visibleColumns ?? defaultVisibleColumns
   );
+  
   const [isFullScreen, setIsFullScreen] = useState(fullScreen);
   const [isPopoverOpen, setIsPopoverOpen] = useState(false);
 
@@ -180,9 +186,8 @@ export const RenderCustomDataGrid: React.FC<RenderCustomDataGridParams> = ({
           })}
       </EuiButtonEmpty>,
       ...toolbarButtons,
-      ...(toggleAttributesButton ? [toggleAttributesButton] : [])
     ],
-    [isFullScreen, toolbarButtons, tracesTableMode, toggleAttributesButton]
+    [isFullScreen, toolbarButtons, tracesTableMode]
   );
 
   const gridStyle = useMemo(

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

@@ -21,7 +21,9 @@ import { TraceAnalyticsMode, TraceQueryMode } from '../../../../../common/types/
 import { appendModeToTraceViewUri, nanoToMilliSec } from '../common/helper_functions';
 
 export const fetchDynamicColumns = (columnItems: string[]) => {
-  return columnItems
+  const safeColumnItems = Array.isArray(columnItems) ? columnItems : [];
+
+  return safeColumnItems
     .filter((col) => col.includes('attributes') || col.includes('instrumentation'))
     .map((col) => ({
       className: 'attributes-column',
@@ -52,7 +54,6 @@ export const fetchDynamicColumns = (columnItems: string[]) => {
 };
 
 export const getTableColumns = (
-  showAttributes: boolean,
   columnItems: string[],
   mode: TraceAnalyticsMode,
   tracesTableMode: TraceQueryMode,
@@ -188,7 +189,7 @@ export const getTableColumns = (
         render: renderDateField,
         className: 'span-group-column',
       },
-      ...(showAttributes ? fetchDynamicColumns(columnItems) : []),
+      ...fetchDynamicColumns(columnItems),
     ] as Array<EuiTableFieldDataColumnType<any>>;
   }
 

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

@@ -74,6 +74,73 @@ export function TracesContent(props: TracesProps) {
   const [includeMetrics, setIncludeMetrics] = useState(false);
   const isNavGroupEnabled = coreRefs?.chrome?.navGroup.getNavGroupEnabled();
 
+  //ADAM TESITNG DELETE console.log
+  const defaultSortField = props.tracesTableMode === 'traces' ? 'last_updated' : 'endTime';
+  const [sortingColumns, setSortingColumns] = useState<{ id: string; direction: "desc" | "asc" }[]>([{ id: defaultSortField, direction: "desc"}]);
+  /** Sorting state */
+  //const [sortingColumns, setSortingColumns] = useState<{ id: string; direction: "desc" | "asc" }[]>([]);
+
+  const [pageIndex, setPageIndex] = useState(0);
+  const [pageSize, setPageSize] = useState(10);
+
+  const onSort = (sortColumns: { id: string; direction: "desc" | "asc" }[]) => {
+    console.log("THE SORTING ADAM", sortColumns);//ADAM DELETE
+  
+    if (!sortColumns || sortColumns.length === 0) {
+      setSortingColumns([]);
+      refresh(undefined, query, pageIndex, pageSize);
+      return;
+    }
+  
+    const sortField = sortColumns[0]?.id;
+    const sortDirection = sortColumns[0]?.direction;
+  
+    if (!sortField || !sortDirection) {
+      console.error("Invalid sorting column:", sortColumns);
+      return;
+    }
+  
+    setSortingColumns(sortColumns);
+    refresh(
+      { field: sortField, direction: sortDirection }, 
+      query, 
+      pageIndex,
+      pageSize
+    );
+  };
+  
+  const [totalHits, setTotalHits] = useState(0);
+
+  const pagination = {
+    pageIndex,
+    pageSize,
+    pageSizeOptions: [5, 10, 15],
+    totalItemCount: totalHits,
+    onChangePage: (newPage) => {
+      setPageIndex(newPage);
+      refresh(
+        sortingColumns.length > 0
+          ? { field: sortingColumns[0].id, direction: sortingColumns[0].direction }
+          : undefined,
+        query,
+        newPage,
+        pageSize
+      );
+    },
+    onChangeItemsPerPage: (newSize) => {
+      setPageSize(newSize);
+      setPageIndex(0);
+      refresh(
+        sortingColumns.length > 0
+          ? { field: sortingColumns[0].id, direction: sortingColumns[0].direction }
+          : undefined,
+        query,
+        0,
+        newSize
+      );
+    },
+  };
+  
   useEffect(() => {
     chrome.setBreadcrumbs([
       ...(isNavGroupEnabled ? [] : [props.parentBreadcrumb]),
@@ -141,7 +208,12 @@ export function TracesContent(props: TracesProps) {
     setFilters(newFilters);
   };
 
-  const refresh = async (sort?: PropertySort, overrideQuery?: string) => {
+  const refresh = async (
+    sort?: PropertySort,
+    overrideQuery?: string,
+    newPageIndex: number = pageIndex,
+    newPageSize: number = pageSize
+  ) => {
     const filterQuery = overrideQuery ?? query;
     const DSL = filtersToDsl(
       mode,
@@ -164,6 +236,7 @@ export function TracesContent(props: TracesProps) {
 
     setIsTraceTableLoading(true);
 
+    //console.log("THE SORTING ADAM",sort?.field, sort?.direction);//ADAM DELETE
     if (mode === 'custom_data_prepper') {
       // Remove serviceName filter from service map query
       const serviceMapDSL = cloneDeep(DSL);
@@ -174,28 +247,31 @@ export function TracesContent(props: TracesProps) {
       const tracesRequest =
         tracesTableMode !== 'traces'
           ? handleCustomIndicesTracesRequest(
-              http,
-              DSL,
-              tableItems,
-              setTableItems,
-              setColumns,
-              mode,
-              props.dataSourceMDSId[0].id,
-              sort,
-              tracesTableMode,
-              isUnderOneHour
-            )
+            http,
+            DSL,
+            tableItems,
+            setTableItems,
+            setColumns,
+            mode,
+            newPageIndex,
+            newPageSize,
+            setTotalHits,
+            props.dataSourceMDSId[0]?.id,
+            sort,
+            tracesTableMode,
+            isUnderOneHour
+          )
           : handleTracesRequest(
-              http,
-              DSL,
-              timeFilterDSL,
-              tableItems,
-              setTableItems,
-              mode,
-              props.dataSourceMDSId[0].id,
-              sort,
-              isUnderOneHour
-            );
+            http,
+            DSL,
+            timeFilterDSL,
+            tableItems,
+            setTableItems,
+            mode,
+            props.dataSourceMDSId[0].id,
+            sort,
+            isUnderOneHour
+          );
 
       tracesRequest.finally(() => setIsTraceTableLoading(false));
 
@@ -272,6 +348,7 @@ export function TracesContent(props: TracesProps) {
             <TracesCustomIndicesTable
               columnItems={columns}
               items={tableItems}
+              totalHits={totalHits}
               refresh={refresh}
               mode={mode}
               loading={isTraceTableLoading}
@@ -281,6 +358,9 @@ export function TracesContent(props: TracesProps) {
               dataPrepperIndicesExist={dataPrepperIndicesExist}
               tracesTableMode={tracesTableMode}
               setTracesTableMode={setTracesTableMode}
+              sorting={sortingColumns}
+              pagination={pagination}
+              onSort={onSort}
             />
           ) : (
             <TracesTable