feat(ui): add infinite scroll pagination to chat completions/responses logs table

## Summary:

  This commit adds infinite scroll pagination to the
  chat completions and responses tables.


## Test Plan:
  1. Run unit tests: npm run test
  2. Manual testing: Navigate to chat
  completions/responses pages
  3. Verify infinite scroll triggers when approaching
  bottom
  4. Added playwright tests: npm run test:e2e
This commit is contained in:
Eric Huang 2025-06-17 16:26:06 -07:00
parent 15f630e5da
commit 66e217fea7
20 changed files with 1145 additions and 388 deletions

View file

@ -0,0 +1,61 @@
import { test, expect } from "@playwright/test";
test.describe("LogsTable Scroll and Progressive Loading", () => {
test.beforeEach(async ({ page }) => {
// Navigate to the chat completions page
await page.goto("/logs/chat-completions");
// Wait for initial data to load
await page.waitForSelector("table tbody tr", { timeout: 10000 });
});
test("should progressively load more data to fill tall viewports", async ({
page,
}) => {
// Set a tall viewport (1400px height)
await page.setViewportSize({ width: 1200, height: 1400 });
// Wait for the table to be visible
await page.waitForSelector("table");
// Wait a bit for progressive loading to potentially trigger
await page.waitForTimeout(3000);
// Count the number of rows loaded
const rowCount = await page.locator("table tbody tr").count();
// With a 1400px viewport, we should have more than the default 20 rows
// Assuming each row is ~50px, we should fit at least 25-30 rows
expect(rowCount).toBeGreaterThan(20);
});
test("should trigger infinite scroll when scrolling near bottom", async ({
page,
}) => {
// Set a medium viewport
await page.setViewportSize({ width: 1200, height: 800 });
// Wait for initial load
await page.waitForSelector("table tbody tr");
// Get initial row count
const initialRowCount = await page.locator("table tbody tr").count();
// Find the scrollable container
const scrollContainer = page.locator("div.overflow-auto").first();
// Scroll to near the bottom
await scrollContainer.evaluate((element) => {
element.scrollTop = element.scrollHeight - element.clientHeight - 100;
});
// Wait for loading indicator or new data
await page.waitForTimeout(2000);
// Check if more rows were loaded
const newRowCount = await page.locator("table tbody tr").count();
// We should have more rows after scrolling
expect(newRowCount).toBeGreaterThan(initialRowCount);
});
});