Update webhooks recent events table to use keyset pagination resources and add date filtering
Everyone can contribute. Help move this issue forward while earning points, leveling up and collecting rewards.
PG statement timeout when getting old events on... (#504101 - closed) introduced new GraphQL resources for fetching a Project or Group hook and its recent webhook events. It also allows filtering by webhook event timestamp to allow users to narrow down webhook events within the last 7 days without running into timeout issues since these endpoints implement keyset pagination. The frontend, however, does not implement a table in Vue to take advantage of keyset pagination or filtering by timestamp. This table needs to be updated to use these new GraphQL resources with keyset pagination so that users don't encounter statement timeout errors for busy webhooks with thousands of pages of recent webhook events.
The webhooks recent events table should also allow for filtering by a range of timestamps so users with many recent events don't need to click the next page button repeatedly now that the table uses keyset pagination
Proposed solution
(See #504101 (comment 2758479349)) The simplest solution seems to be rewriting the table in Vue to take advantage of components like gl-daterange-picker and better GraphQL support.