Create query result component (MXS-3467)

[MXS-3510] Refactor data-table Created: 2021-04-22  Updated: 2021-04-26  Resolved: 2021-04-26

Status: Closed
Project: MariaDB MaxScale
Component/s: maxgui
Affects Version/s: 2.5.0
Fix Version/s: 6.0.0

Type: Sub-Task Priority: Major
Reporter: Duong Thien Ly Assignee: Duong Thien Ly
Resolution: Fixed Votes: 0
Labels: None

Sprint: MXS-SPRINT-129, MXS-SPRINT-130, MXS-SPRINT-131, MXS-SPRINT-132

 Description   

`data-table` which is the wrapper component of `v-data-table`
having performance issue when rendering large data. e.g. 10000 rows.
With `v-data-table`, this is not an issue but with `data-table`, it shows latency and lag in rendering data



 Comments   
Comment by Duong Thien Ly [ 2021-04-23 ]

The root cause comes from table-cell component. It constantly listens on mouseenter and mouseleave events.
It is uses for showing table rowspan ( servers table in dashboard), parameters info tooltip in parameters table and in case table cell value is truncated, it show untruncated value in tooltip.
There is no need to fix this issue because even when using `v-data-table` or `v-simple-table`, this doesn't solve the issue.
The issue comes from large datasets, the table shouldn't render all rows. Rendering more than 100 rows, this causes memory issue on the client side.
To deal with large datasets, we should limit the returned rows even when user queries with specific limits. e.g. SELECT * FROM table_name limit 10000;
We should return only 100 for the first fetch.
We can do this by either using pagination or virtual scroll.

Generated at Thu Feb 08 04:21:57 UTC 2024 using Jira 8.20.16#820016-sha1:9d11dbea5f4be3d4cc21f03a88dd11d8c8687422.