PMM-14901: RTA details arrows respect filters

ui/apps/pmm/src/pages/rta/overview/RealtimeOverview.navigation.test.tsx

@@ -0,0 +1,146 @@
+/**
+ * Details-pane prev/next must follow the table's filtered rows (navigableQueries),
+ * not the full list returned by the API.
+ *
+ * In the app, OverviewTable syncs navigableQueries from Material React Table after
+ * filters are applied. RealtimeOverview uses that list for arrow navigation.
+ *
+ * We mock OverviewTable here so we can fix navigableQueries (query-1, query-2) while
+ * the API still returns an extra query (query-3) that would be next if we used the
+ * unfiltered array. RealtimeOverview.test.tsx keeps the real table for other behavior.
+ */
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { FC, useEffect } from 'react';
+import { MemoryRouter, Route, Routes } from 'react-router-dom';
+import { wrapWithQueryProvider } from 'utils/testUtils';
+import { TEST_MONGO_DB_QUERY_DATA, TEST_REAL_TIME_SESSION } from 'utils/testStubs';
+import { QueryData } from 'types/rta.types';
+import RealtimeOverview from './RealtimeOverview';
+
+const queryOne: QueryData = {
+  ...TEST_MONGO_DB_QUERY_DATA,
+  queryId: 'query-1',
+};
+
+const queryTwo: QueryData = {
+  ...TEST_MONGO_DB_QUERY_DATA,
+  queryId: 'query-2',
+};
+
+const queryFilteredOut: QueryData = {
+  ...TEST_MONGO_DB_QUERY_DATA,
+  queryId: 'query-3',
+};
+
+const navigableQueries = [queryOne, queryTwo];
+
+const { searchQueries, getRunningSessions } = vi.hoisted(() => ({
+  searchQueries: vi.fn(),
+  getRunningSessions: vi.fn(),
+}));
+
+vi.mock('api/rta', () => ({
+  searchQueries,
+  getRunningSessions,
+}));
+
+vi.mock('./table/OverviewTable', () => {
+  const MockOverviewTable: FC<{
+    onQuerySelected: (query: QueryData) => void;
+    onNavigableQueriesChange: (queries: QueryData[]) => void;
+  }> = ({ onQuerySelected, onNavigableQueriesChange }) => {
+    useEffect(() => {
+      onNavigableQueriesChange(navigableQueries);
+    }, [onNavigableQueriesChange]);
+
+    return (
+      <button
+        type="button"
+        data-testid="mock-select-first-query"
+        onClick={() => onQuerySelected(queryOne)}
+      >
+        Select first query
+      </button>
+    );
+  };
+
+  return { default: MockOverviewTable };
+});
+
+const renderComponent = () =>
+  render(
+    wrapWithQueryProvider(
+      <MemoryRouter
+        initialEntries={[
+          `/rta/overview?serviceIds=${TEST_REAL_TIME_SESSION.serviceId}`,
+        ]}
+      >
+        <Routes>
+          <Route path="/rta/overview" element={<RealtimeOverview />} />
+        </Routes>
+      </MemoryRouter>
+    )
+  );
+
+const openDetailsPaneOnFirstQuery = async () => {
+  await waitFor(() =>
+    expect(screen.getByTestId('mock-select-first-query')).toBeInTheDocument()
+  );
+  fireEvent.click(screen.getByTestId('mock-select-first-query'));
+  await waitFor(() =>
+    expect(screen.getByTestId('query-details-pane')).toHaveAttribute(
+      'aria-hidden',
+      'false'
+    )
+  );
+};
+
+const getOperationId = () => screen.getByTestId('operation-id-value');
+
+describe('RealtimeOverview details pane navigation', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+
+    searchQueries.mockResolvedValue({
+      queries: [...navigableQueries, queryFilteredOut],
+    });
+
+    getRunningSessions.mockResolvedValue([TEST_REAL_TIME_SESSION]);
+  });
+
+  it('navigates to the next visible query, not the next API query', async () => {
+    renderComponent();
+    await openDetailsPaneOnFirstQuery();
+
+    expect(getOperationId()).toHaveTextContent('query-1');
+
+    fireEvent.click(screen.getByTestId('details-pane-next-button'));
+
+    expect(getOperationId()).toHaveTextContent('query-2');
+    expect(getOperationId()).not.toHaveTextContent('query-3');
+  });
+
+  it('navigates to the previous visible query', async () => {
+    renderComponent();
+    await openDetailsPaneOnFirstQuery();
+
+    fireEvent.click(screen.getByTestId('details-pane-next-button'));
+    expect(getOperationId()).toHaveTextContent('query-2');
+
+    fireEvent.click(screen.getByTestId('details-pane-prev-button'));
+    expect(getOperationId()).toHaveTextContent('query-1');
+  });
+
+  it('disables prev on the first visible query and next on the last', async () => {
+    renderComponent();
+    await openDetailsPaneOnFirstQuery();
+
+    expect(screen.getByTestId('details-pane-prev-button')).toBeDisabled();
+    expect(screen.getByTestId('details-pane-next-button')).not.toBeDisabled();
+
+    fireEvent.click(screen.getByTestId('details-pane-next-button'));
+
+    expect(screen.getByTestId('details-pane-prev-button')).not.toBeDisabled();
+    expect(screen.getByTestId('details-pane-next-button')).toBeDisabled();
+  });
+});

ui/apps/pmm/src/pages/rta/overview/RealtimeOverview.tsx

@@ -29,39 +29,36 @@ const RealtimeOverviewPage: FC = () => {
       refetchInterval: refreshInterval,
     }
   );
-  const [selectedQueryIndex, setSelectedQueryIndex] = useState<number>();
+  // Synced from the table after filters; details-pane arrows use this list, not the full API result.
+  const [navigableQueries, setNavigableQueries] = useState<QueryData[]>([]);
   const [selectedQuery, setSelectedQuery] = useState<QueryData>();
   // We need to store the previous fetching state to restore it when the details pane is closed
   const previousFetchingState = useRef<boolean>(fetching);
   const { data: sessions = [], isLoading } = useRealtimeSessions();
 
-  const handleQueryChange = (query: QueryData, index: number) => {
+  const selectedQueryIndex = selectedQuery
+    ? navigableQueries.findIndex(
+        (query) => query.queryId === selectedQuery.queryId
+      )
+    : -1;
+
+  const handleQuerySelected = (query: QueryData) => {
     setSelectedQuery(query);
-    setSelectedQueryIndex(index);
     previousFetchingState.current = fetching;
     setFetching(false);
   };
 
   const handleCloseDetails = () => {
     setSelectedQuery(undefined);
-    setSelectedQueryIndex(undefined);
     setFetching(previousFetchingState.current);
   };
 
-  const handleNextQuery = () => {
-    const idx = (selectedQueryIndex || 0) + 1;
-    if (idx >= queries.length) {
-      return;
-    }
-    handleQueryChange(queries[idx], idx);
-  };
-
-  const handlePreviousQuery = () => {
-    const idx = (selectedQueryIndex || 0) - 1;
-    if (idx < 0) {
+  const handleAdjacentQuery = (offset: -1 | 1) => {
+    const nextIndex = selectedQueryIndex + offset;
+    if (nextIndex < 0 || nextIndex >= navigableQueries.length) {
       return;
     }
-    handleQueryChange(queries[idx], idx);
+    handleQuerySelected(navigableQueries[nextIndex]);
   };
 
   const handleServiceIdsChange = (newServiceIds: string[]) => {
@@ -94,7 +91,8 @@ const RealtimeOverviewPage: FC = () => {
     <RealtimePage>
       <OverviewTable
         queries={queries || []}
-        onQuerySelected={handleQueryChange}
+        onQuerySelected={handleQuerySelected}
+        onNavigableQueriesChange={setNavigableQueries}
         actions={() => (
           <Stack
             direction="row"
@@ -177,9 +175,9 @@ const RealtimeOverviewPage: FC = () => {
         query={selectedQuery}
         onClose={handleCloseDetails}
         isFirstQuery={selectedQueryIndex === 0}
-        isLastQuery={selectedQueryIndex === queries.length - 1}
-        onNext={handleNextQuery}
-        onPrevious={handlePreviousQuery}
+        isLastQuery={selectedQueryIndex === navigableQueries.length - 1}
+        onNext={() => handleAdjacentQuery(1)}
+        onPrevious={() => handleAdjacentQuery(-1)}
       />
     </RealtimePage>
   );

ui/apps/pmm/src/pages/rta/overview/table/OverviewTable.tsx

@@ -1,7 +1,11 @@
-import { type MRT_Row } from 'material-react-table';
-import { MaterialReactTableProps } from 'material-react-table';
+import {
+  type MRT_ColumnFiltersState,
+  type MRT_Row,
+  type MRT_TableInstance,
+  MaterialReactTableProps,
+} from 'material-react-table';
 import { Table } from '@percona/percona-ui';
-import { FC } from 'react';
+import { FC, useCallback, useEffect, useRef, useState } from 'react';
 import { QueryData } from 'types/rta.types';
 import { OVERVIEW_TABLE_COLUMNS } from './OverviewTable.constants';
 import { RealtimeTableWrapper } from 'pages/rta/components/rta-table-wrapper';
@@ -11,54 +15,84 @@ import { filterElapsedTime } from './OverviewTable.utils';
 
 interface Props {
   queries: QueryData[];
-  onQuerySelected: (query: QueryData, idx: number) => void;
+  onQuerySelected: (query: QueryData) => void;
+  onNavigableQueriesChange: (queries: QueryData[]) => void;
   actions?: MaterialReactTableProps<QueryData>['renderTopToolbarCustomActions'];
   onRowHover?: () => void;
 }
 
 const OverviewTable: FC<Props> = ({
   queries,
   onQuerySelected,
+  onNavigableQueriesChange,
   actions,
   onRowHover,
-}) => (
-  <RealtimeTableWrapper>
-    <Table
-      tableName="realtime-overview-table"
-      initialState={{
-        pagination: {
-          pageSize: 25,
-          pageIndex: 0,
-        },
-      }}
-      columns={OVERVIEW_TABLE_COLUMNS}
-      data={queries}
-      noDataMessage={Messages.noData}
-      muiTopToolbarProps={{
-        sx: {
-          // vertically center the buttons
-          [`& > .${boxClasses.root}`]: {
-            alignItems: 'center',
-            flexDirection: 'row-reverse',
+}) => {
+  const tableRef = useRef<MRT_TableInstance<QueryData> | null>(null);
+  // Controlled filter state is required to read the filtered row model via tableInstanceRef.
+  const [columnFilters, setColumnFilters] = useState<MRT_ColumnFiltersState>([]);
+  const [globalFilter, setGlobalFilter] = useState('');
+
+  // Pre-pagination so navigation covers all filtered rows, not only the current page.
+  const getNavigableQueries = useCallback(
+    () =>
+      tableRef.current?.getPrePaginationRowModel().rows.map((row) => row.original) ??
+      queries,
+    [queries]
+  );
+
+  useEffect(() => {
+    onNavigableQueriesChange(getNavigableQueries());
+  }, [
+    columnFilters,
+    getNavigableQueries,
+    globalFilter,
+    onNavigableQueriesChange,
+  ]);
+
+  return (
+    <RealtimeTableWrapper>
+      <Table
+        tableName="realtime-overview-table"
+        initialState={{
+          pagination: {
+            pageSize: 25,
+            pageIndex: 0,
+          },
+        }}
+        columns={OVERVIEW_TABLE_COLUMNS}
+        data={queries}
+        noDataMessage={Messages.noData}
+        muiTopToolbarProps={{
+          sx: {
+            // vertically center the buttons
+            [`& > .${boxClasses.root}`]: {
+              alignItems: 'center',
+              flexDirection: 'row-reverse',
+            },
           },
-        },
-      }}
-      enableGlobalFilter={false}
-      enableHiding={false}
-      enableRowHoverAction
-      rowHoverAction={(row) => onQuerySelected(row.original, row.index)}
-      renderTopToolbarCustomActions={actions}
-      filterFns={{
-        // default 'betweenInclusive' filter fails on values like '1.50', discarding the row that has 1.5 seconds
-        timeRangeFilterFn: (row, id, filterValue) =>
-          filterElapsedTime(row as MRT_Row<QueryData>, id, filterValue),
-      }}
-      muiTableBodyRowProps={({ row }) => ({
-        onMouseEnter: onRowHover,
-        'data-testid': `query-${row.original.queryId}-row`,
-      })}
-    />
-  </RealtimeTableWrapper>
-);
+        }}
+        state={{ columnFilters, globalFilter }}
+        onColumnFiltersChange={setColumnFilters}
+        onGlobalFilterChange={setGlobalFilter}
+        enableGlobalFilter={true}
+        enableHiding={false}
+        enableRowHoverAction
+        tableInstanceRef={tableRef}
+        rowHoverAction={(row) => onQuerySelected(row.original)}
+        renderTopToolbarCustomActions={actions}
+        filterFns={{
+          // default 'betweenInclusive' filter fails on values like '1.50', discarding the row that has 1.5 seconds
+          timeRangeFilterFn: (row, id, filterValue) =>
+            filterElapsedTime(row as MRT_Row<QueryData>, id, filterValue),
+        }}
+        muiTableBodyRowProps={({ row }) => ({
+          onMouseEnter: onRowHover,
+          'data-testid': `query-${row.original.queryId}-row`,
+        })}
+      />
+    </RealtimeTableWrapper>
+  );
+};
 
 export default OverviewTable;