mirror of
https://github.com/meta-llama/llama-stack.git
synced 2025-07-22 12:37:53 +00:00
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:
parent
15f630e5da
commit
66e217fea7
20 changed files with 1145 additions and 388 deletions
61
llama_stack/ui/e2e/logs-table-scroll.spec.ts
Normal file
61
llama_stack/ui/e2e/logs-table-scroll.spec.ts
Normal 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);
|
||||
});
|
||||
});
|
Loading…
Add table
Add a link
Reference in a new issue