Skip to content

[Feature] Add pagination to realtime metric tables in the React frontend #4462

Open

Description

@butterfly-520-boy

Feature Request

Add pagination to multi-row realtime metric tables in the HertzBeat 2.0 React frontend.

Is your feature request related to a problem? Please describe

On the React baseline I tested, multi-row metric tables render all records without pagination. For example, a process monitor returning 75 rows requires a lot of scrolling inside the metric card.

Describe the solution you'd like

Show 10 rows per page by default, with options for 20, 50 and 100. Keep all metric values for the same record together in one row.

Refreshing the data should preserve the current page when possible. If the number of records decreases, move to a valid page. Switching monitors or metric groups should reset pagination.

Tables with 10 or fewer records should not need pagination controls.

Describe alternatives you've considered

Keeping the existing scroll-only table, but navigating larger results is less convenient.

Additional context

This request targets the React 2.0 frontend, based on master commit cc7a612, not the Angular 1.9.x frontend.

I have prepared a local implementation and tested it against a real backend returning 75 process records. I can submit a PR for review.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions