feat: use VirtualTable for nodes #578

artemmufazalov · 2023-10-26T14:13:14Z

Currently VirtualTable is applied only to cluster Nodes. The reason - in Diagnostics we use compute that works badly, so we should replace it with nodes and only after VirtualTable could be applied there.

VirtualTable could be turned on with settings in experiments section "Use virtual table for cluster Nodes tab"

artemmufazalov · 2023-10-26T14:14:32Z

src/components/EmptyState/EmptyState.scss

@@ -18,7 +18,6 @@

        &_size_m {
            position: relative;
-            top: 20%;


Because of this value content sometimes didn't fit in wrapper box and was partly hidden

artemmufazalov · 2023-10-26T14:18:17Z

src/components/VirtualTable/VirtualTable.scss

Styles was partly taken from DataTable with plenty overwrites we made in the project

artemmufazalov · 2023-10-26T14:20:37Z

src/containers/Nodes/VirtualNodes.tsx

I made separate VirtualNodes component not to create a mess in original Nodes

sareyu · 2023-10-27T07:32:05Z

проверял на инстансе мониторинга. стало радикально лучше, круто

данные для фрейма загружаются даже в том случае, если они уже были загружены (если поскроллить вниз, потом вверх)
данные для фрейма грузятся сразу в момент попадания во вьюпорт (или дебаунс маленький) - в принципе не проблема, но можно попробовать потюнить
проценты залезают на шапку таблицы при сколлле

параметры сортировки и фильтров не прорастают в урл
ручки с сортировкой отрабатывают ощутимо медленно (например, по CPU)
при начальном заходе на страницу выполняются 3 одинаковых запроса
видимая задержка перед появлением скелетонов, если отмотать таблицу до низа и начать скроллить вверх
ненужный горизонтальный скролл на странице (последний столбец с прочерком очень широкий. зачем там расчет ширины столбцов вообще понадобился?)

sareyu · 2023-10-27T07:34:07Z

src/components/VirtualTable/TableChunk.tsx

+        }
+
+        // Display skeletons in case of error
+        if (chunkData.loading || chunkData.error) {


no, you should show error message while error

It's an error in the next chunks, not in the first. So it's the case, when we have already loaded some data, and n chunk could not be loaded due to some reason. We didn't figured out how to show error for particular chunk, so there will be loading rows for a while

sareyu · 2023-10-27T07:37:33Z

src/components/VirtualTable/TableHead.tsx

+    </svg>
+);
+
+function getSortIcon(order?: SortOrderType) {


https://css-tricks.com/snippets/css/css-triangle/ :)
and maybe css:rotate instead of separate icon

sareyu · 2023-10-27T07:38:57Z

src/components/VirtualTable/TableHead.tsx

+        return (
+            <colgroup>
+                {columns.map((column) => {
+                    return <col key={column.name} style={{width: `${column.width}px`}} />;


with width on <col /> element you don't need set size on each td below

sareyu · 2023-10-27T07:46:07Z

src/components/VirtualTable/VirtualTable.tsx

+                    dispatch(setChunkError(id, err as IResponseError));
+                    setError(err as IResponseError);
+                }
+            }, DEFAULT_REQUEST_TIMEOUT);


this timeout should be in debounced function, which needs to be reset on leave

Could you please clarify, what you mean?

A make functions control manual, so we could always have one active load per chunk. And at the same time functions from different chunks should be debounced separately. So actually it won't be a single debounce function, but a separate function for every chunk. And for that case my setup looks easier than setup with lodash debounce

sareyu · 2023-10-27T07:51:27Z

src/components/VirtualTable/VirtualTable.tsx

+    // Load chunks if they become active
+    // This mecanism helps to set chunk active state from different sources, but load data only once
+    // Only currently active chunks should be in state so iteration by the whole state shouldn't be a problem
+    useEffect(() => {


проверка на wasLoaded сейчас не работает как ожидается.
вообще не уверен, что обходить весь state каждый раз нужно - почему не сделать загрузку данных в onEntry, и там же проверять их наличие. на какие еще сценарии маркировки чанка активным ты закладываешься?
может разделить таки initial загрузку данных и refetch? не знаю, большая ли проблема, что проверка данных на загруженность сейчас не работает..

Проверка на загруженность сейчас нужна только для того, чтобы не запрашивать данные повторно для чанков, которые на экране, но запрос для которых уже отработал. То есть, перезапрос при скролле все равно есть и это намеренно, на данный момент мы решили не хранить данные, кроме тех, что есть на экране (+-50%)

sareyu · 2023-10-27T07:56:52Z

src/components/VirtualTable/utils.ts

@@ -0,0 +1,8 @@
+export const getArray = (arrayLength: number) => {


[...Array(n).keys()]

artemmufazalov · 2023-10-27T08:50:58Z

данные для фрейма загружаются даже в том случае, если они уже были загружены (если поскроллить вниз, потом вверх)

На данный момент решили не хранить данные кроме тех, что уже на экране (+-50%)

параметры сортировки и фильтров не прорастают в урл

Такая проблема была, под это есть отдельный тикет

ручки с сортировкой отрабатывают ощутимо медленно (например, по CPU)

Дело в том, что для некоторых запросов на бэке все равно приходится обсчитывать все ноды кластера, или запрашивать данные из других сущностей. Поэтому что-то работает быстро - в основном сортировка по ID или текстовым полям, рассчитываемые поля работают медленно - проблема 17к нод никуда не пропадает, хотя теперь она уже на бэке

при начальном заходе на страницу выполняются 3 одинаковых запроса

видимая задержка перед появлением скелетонов, если отмотать таблицу до низа и начать скроллить вверх

Знаю. Пока не нашел как починить, решил сделать первую версию, а потом оптимизировать оставшееся.

ненужный горизонтальный скролл на странице (последний столбец с прочерком очень широкий. зачем там расчет ширины столбцов вообще понадобился?)

Здесь оставил как было, чтобы таблицы визуально почти не отличались. Там таблетки должны быть (сейчас в mvp они не приходят, там проблема с производительностью, скоро должны вернуться). А фиксированная ширина нужна, чтобы ничего не прыгало при скролле. Потому что на каких-то нодах нет таблеток, на других есть, соответсвенно нижний скроллбар будет появляться и исчезать

artemmufazalov commented Oct 26, 2023

View reviewed changes

artemmufazalov force-pushed the nodes-virtual-table branch from 6c33bd3 to ceb890b Compare October 26, 2023 14:16

artemmufazalov commented Oct 26, 2023

View reviewed changes

artemmufazalov requested review from Raubzeug and sareyu October 26, 2023 15:06

artemmufazalov marked this pull request as ready for review October 26, 2023 15:06

sareyu previously approved these changes Oct 27, 2023

View reviewed changes

artemmufazalov dismissed sareyu’s stale review via 7752ca0 October 27, 2023 11:05

artemmufazalov requested a review from sareyu October 27, 2023 12:06

artemmufazalov force-pushed the nodes-virtual-table branch from 7752ca0 to a75ddfd Compare October 27, 2023 13:10

artemmufazalov added 3 commits October 27, 2023 16:53

feat: add VirtualTable

ea4ad58

feat: use VirtualTable for nodes

4f77ec5

fix: review changes

df71e1e

artemmufazalov force-pushed the nodes-virtual-table branch from a75ddfd to df71e1e Compare October 27, 2023 13:54

sareyu approved these changes Oct 27, 2023

View reviewed changes

artemmufazalov merged commit d6197d4 into main Oct 27, 2023
4 checks passed

artemmufazalov deleted the nodes-virtual-table branch October 27, 2023 14:02

ydb-platform-bot mentioned this pull request Oct 27, 2023

chore(main): release 4.21.0 #581

Merged

This was referenced Jan 31, 2024

chore(main): release 4.10.0 #680

Closed

chore(main): release 4.10.0 #681

Closed

chore(main): release 4.10.0 #683

Closed

chore(main): release 4.31.0 #687

Merged

ydb-platform-bot mentioned this pull request Jun 14, 2024

chore(main): release 6.6.0 #921

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: use VirtualTable for nodes #578

feat: use VirtualTable for nodes #578

artemmufazalov commented Oct 26, 2023 •

edited

Loading

artemmufazalov Oct 26, 2023

artemmufazalov Oct 26, 2023

artemmufazalov Oct 26, 2023

sareyu commented Oct 27, 2023 •

edited

Loading

sareyu Oct 27, 2023

artemmufazalov Oct 27, 2023

sareyu Oct 27, 2023

sareyu Oct 27, 2023

sareyu Oct 27, 2023

artemmufazalov Oct 27, 2023

sareyu Oct 27, 2023

artemmufazalov Oct 27, 2023

sareyu Oct 27, 2023

artemmufazalov commented Oct 27, 2023 •

edited

Loading

		@@ -0,0 +1,8 @@
		export const getArray = (arrayLength: number) => {

feat: use VirtualTable for nodes #578

feat: use VirtualTable for nodes #578

Conversation

artemmufazalov commented Oct 26, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

sareyu commented Oct 27, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

artemmufazalov commented Oct 27, 2023 • edited Loading

artemmufazalov commented Oct 26, 2023 •

edited

Loading

sareyu commented Oct 27, 2023 •

edited

Loading

artemmufazalov commented Oct 27, 2023 •

edited

Loading