Merge branch 'main' into astandrik.display-a-list-of-operations-1414

Author: astandrik

CHANGELOG.md

@@ -1,5 +1,29 @@
 # Changelog
 
+## [6.24.0](https://github.com/ydb-platform/ydb-embedded-ui/compare/v6.23.1...v6.24.0) (2024-10-10)
+
+
+### Features
+
+* add dimming to vdisk page (nodes) and pdisk page (vdisks) ([#1397](https://github.com/ydb-platform/ydb-embedded-ui/issues/1397)) ([deb2a88](https://github.com/ydb-platform/ydb-embedded-ui/commit/deb2a88d86ac0ad84f13acf1b7a3bf89289f5722))
+* **Databases:** use balancer + /node/:id as backend endpoint ([#1418](https://github.com/ydb-platform/ydb-embedded-ui/issues/1418)) ([f8a0db1](https://github.com/ydb-platform/ydb-embedded-ui/commit/f8a0db18fa01b9e9198e7c1ad4a656ba17de5922))
+* **Storage:** add disk space usage column ([#1425](https://github.com/ydb-platform/ydb-embedded-ui/issues/1425)) ([d254ee2](https://github.com/ydb-platform/ydb-embedded-ui/commit/d254ee2bd71b5028eb48b4d34c30bc5ea48fa484))
+* **StorageNodes:** add columns, use the same nodes columns ([#1396](https://github.com/ydb-platform/ydb-embedded-ui/issues/1396)) ([90a3403](https://github.com/ydb-platform/ydb-embedded-ui/commit/90a34037c8ea8e7fe8e680a47d6e1323b9fd9ff2))
+* **VDisk:** show VDisk donors inside popup ([#1422](https://github.com/ydb-platform/ydb-embedded-ui/issues/1422)) ([fc12a38](https://github.com/ydb-platform/ydb-embedded-ui/commit/fc12a38156e117e43e89b301b58df59408a98928))
+
+
+### Bug Fixes
+
+* **Authentication:** handle login error properly ([#1426](https://github.com/ydb-platform/ydb-embedded-ui/issues/1426)) ([10f817e](https://github.com/ydb-platform/ydb-embedded-ui/commit/10f817ef9879ce8fc3beddda1377a03ca285bc5f))
+* autocomplete not working in standalone version ([#1405](https://github.com/ydb-platform/ydb-embedded-ui/issues/1405)) ([8f516be](https://github.com/ydb-platform/ydb-embedded-ui/commit/8f516becf0fc0cfdd25d10abf00a41dc6953a326))
+* **cluster:** infoV2 check ([#1401](https://github.com/ydb-platform/ydb-embedded-ui/issues/1401)) ([6dbe56d](https://github.com/ydb-platform/ydb-embedded-ui/commit/6dbe56db0e3a85c44852b85477e2027f8e1754b4))
+* nodes list stops working on sort by uptime scroll down ([#1424](https://github.com/ydb-platform/ydb-embedded-ui/issues/1424)) ([5ecaecb](https://github.com/ydb-platform/ydb-embedded-ui/commit/5ecaecbfdedd47d39539e871cca8a7cf5a45e1f0))
+* **StorageGroups:** display full pool name with left cut ([#1421](https://github.com/ydb-platform/ydb-embedded-ui/issues/1421)) ([09599c1](https://github.com/ydb-platform/ydb-embedded-ui/commit/09599c1d920fc691e2e8f97ced5ccf057651ca53))
+* **StorageGroups:** fix latency column ([#1403](https://github.com/ydb-platform/ydb-embedded-ui/issues/1403)) ([5e1961c](https://github.com/ydb-platform/ydb-embedded-ui/commit/5e1961c72d2904be7a7700259c1b517c5fa997db))
+* **Storage:** prevent duplicating vdisks when no whiteboard ([#1420](https://github.com/ydb-platform/ydb-embedded-ui/issues/1420)) ([73e9e6b](https://github.com/ydb-platform/ydb-embedded-ui/commit/73e9e6bf939873c497b900286f8557ba12621917))
+* tracelevel none by default ([#1432](https://github.com/ydb-platform/ydb-embedded-ui/issues/1432)) ([1c786cb](https://github.com/ydb-platform/ydb-embedded-ui/commit/1c786cb2b62e2470b79193b6b2d10b46ed384ff6))
+* use babel loader from create-react-app ([#1409](https://github.com/ydb-platform/ydb-embedded-ui/issues/1409)) ([0a4734e](https://github.com/ydb-platform/ydb-embedded-ui/commit/0a4734ebc54c036c422fd269e8e6b691af5a6b5d))
+
 ## [6.23.1](https://github.com/ydb-platform/ydb-embedded-ui/compare/v6.23.0...v6.23.1) (2024-10-03)
 
 

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "ydb-embedded-ui",
-  "version": "6.23.1",
+  "version": "6.24.0",
   "files": [
     "dist"
   ],

package.json

@@ -19,7 +19,7 @@ import type {
     RenderErrorMessage,
     SortParams,
 } from './types';
-import {useIntersectionObserver} from './useIntersectionObserver';
+import {useScrollBasedChunks} from './useScrollBasedChunks';
 
 import './PaginatedTable.scss';
 
@@ -32,7 +32,7 @@ export interface PaginatedTableProps<T, F> {
     columns: Column<T>[];
     getRowClassName?: GetRowClassName<T>;
     rowHeight?: number;
-    parentContainer?: Element | null;
+    parentRef?: React.RefObject<HTMLElement>;
     initialSortParams?: SortParams;
     onColumnsResize?: HandleTableColumnsResize;
     renderControls?: RenderControls;
@@ -50,7 +50,7 @@ export const PaginatedTable = <T, F>({
     columns,
     getRowClassName,
     rowHeight = DEFAULT_TABLE_ROW_HEIGHT,
-    parentContainer,
+    parentRef,
     initialSortParams,
     onColumnsResize,
     renderControls,
@@ -64,46 +64,36 @@ export const PaginatedTable = <T, F>({
     const [sortParams, setSortParams] = React.useState<SortParams | undefined>(initialSortParams);
     const [totalEntities, setTotalEntities] = React.useState(initialTotal);
     const [foundEntities, setFoundEntities] = React.useState(initialFound);
-    const [activeChunks, setActiveChunks] = React.useState<number[]>([]);
     const [isInitialLoad, setIsInitialLoad] = React.useState(true);
 
-    const tableContainer = React.useRef<HTMLDivElement>(null);
+    const tableRef = React.useRef<HTMLDivElement>(null);
+
+    const activeChunks = useScrollBasedChunks({
+        containerRef: parentRef ?? tableRef,
+        totalItems: foundEntities,
+        itemHeight: rowHeight,
+        chunkSize: limit,
+    });
 
     const handleDataFetched = React.useCallback((total: number, found: number) => {
         setTotalEntities(total);
         setFoundEntities(found);
         setIsInitialLoad(false);
     }, []);
 
-    const onEntry = React.useCallback((id: string) => {
-        setActiveChunks((prev) => [...new Set([...prev, Number(id)])]);
-    }, []);
-
-    const onLeave = React.useCallback((id: string) => {
-        setActiveChunks((prev) => prev.filter((chunk) => chunk !== Number(id)));
-    }, []);
-
-    const observer = useIntersectionObserver({onEntry, onLeave, parentContainer});
-
     // reset table on filters change
     React.useLayoutEffect(() => {
         setTotalEntities(initialTotal);
         setFoundEntities(initialFound);
         setIsInitialLoad(true);
-        if (parentContainer) {
-            parentContainer.scrollTo(0, 0);
+        if (parentRef?.current) {
+            parentRef.current.scrollTo(0, 0);
         } else {
-            tableContainer.current?.scrollTo(0, 0);
+            tableRef.current?.scrollTo(0, 0);
         }
-
-        setActiveChunks([0]);
-    }, [filters, initialFound, initialTotal, limit, parentContainer]);
+    }, [filters, initialFound, initialTotal, limit, parentRef]);
 
     const renderChunks = () => {
-        if (!observer) {
-            return null;
-        }
-
         if (!isInitialLoad && foundEntities === 0) {
             return (
                 <tbody>
@@ -133,7 +123,6 @@ export const PaginatedTable = <T, F>({
                 renderErrorMessage={renderErrorMessage}
                 onDataFetched={handleDataFetched}
                 isActive={activeChunks.includes(value)}
-                observer={observer}
             />
         ));
     };
@@ -161,7 +150,7 @@ export const PaginatedTable = <T, F>({
     };
 
     return (
-        <div ref={tableContainer} className={b(null, containerClassName)}>
+        <div ref={tableRef} className={b(null, containerClassName)}>
             {renderContent()}
         </div>
     );

src/components/PaginatedTable/PaginatedTable.tsx

@@ -11,9 +11,6 @@ import type {Column, FetchData, GetRowClassName, SortParams} from './types';
 
 const DEBOUNCE_TIMEOUT = 200;
 
-// With original memo generic types are lost
-const typedMemo: <T>(Component: T) => T = React.memo;
-
 interface TableChunkProps<T, F> {
     id: number;
     limit: number;
@@ -22,7 +19,6 @@ interface TableChunkProps<T, F> {
     columns: Column<T>[];
     filters?: F;
     sortParams?: SortParams;
-    observer: IntersectionObserver;
     isActive: boolean;
     tableName: string;
 
@@ -33,7 +29,7 @@ interface TableChunkProps<T, F> {
 }
 
 // Memoisation prevents chunks rerenders that could cause perfomance issues on big tables
-export const TableChunk = typedMemo(function TableChunk<T, F>({
+export const TableChunk = <T, F>({
     id,
     limit,
     totalLength,
@@ -43,13 +39,11 @@ export const TableChunk = typedMemo(function TableChunk<T, F>({
     tableName,
     filters,
     sortParams,
-    observer,
     getRowClassName,
     renderErrorMessage,
     onDataFetched,
     isActive,
-}: TableChunkProps<T, F>) {
-    const ref = React.useRef<HTMLTableSectionElement>(null);
+}: TableChunkProps<T, F>) => {
     const [isTimeoutActive, setIsTimeoutActive] = React.useState(true);
     const [autoRefreshInterval] = useAutoRefreshInterval();
 
@@ -83,19 +77,6 @@ export const TableChunk = typedMemo(function TableChunk<T, F>({
         };
     }, [isActive, isTimeoutActive]);
 
-    React.useEffect(() => {
-        const el = ref.current;
-        if (el) {
-            observer.observe(el);
-        }
-
-        return () => {
-            if (el) {
-                observer.unobserve(el);
-            }
-        };
-    }, [observer]);
-
     React.useEffect(() => {
         if (currentData && isActive) {
             const {total = 0, found = 0} = currentData;
@@ -154,7 +135,6 @@ export const TableChunk = typedMemo(function TableChunk<T, F>({
 
     return (
         <tbody
-            ref={ref}
             id={id.toString()}
             style={{
                 height: `${chunkHeight}px`,
@@ -167,4 +147,4 @@ export const TableChunk = typedMemo(function TableChunk<T, F>({
             {renderContent()}
         </tbody>
     );
-});
+};

src/components/PaginatedTable/TableChunk.tsx

@@ -0,0 +1,69 @@
+import React from 'react';
+
+import {throttle} from 'lodash';
+
+import {getArray} from '../../utils';
+
+interface UseScrollBasedChunksProps {
+    containerRef: React.RefObject<HTMLElement>;
+    totalItems: number;
+    itemHeight: number;
+    chunkSize: number;
+}
+
+const THROTTLE_DELAY = 100;
+const CHUNKS_AHEAD_COUNT = 1;
+
+export const useScrollBasedChunks = ({
+    containerRef,
+    totalItems,
+    itemHeight,
+    chunkSize,
+}: UseScrollBasedChunksProps): number[] => {
+    const [activeChunks, setActiveChunks] = React.useState<number[]>(
+        getArray(1 + CHUNKS_AHEAD_COUNT).map((index) => index),
+    );
+
+    const calculateActiveChunks = React.useCallback(() => {
+        const container = containerRef.current;
+        if (!container) {
+            return;
+        }
+
+        const {scrollTop, clientHeight} = container;
+        const visibleStartIndex = Math.floor(scrollTop / itemHeight);
+        const visibleEndIndex = Math.min(
+            Math.ceil((scrollTop + clientHeight) / itemHeight),
+            totalItems - 1,
+        );
+
+        const startChunk = Math.floor(visibleStartIndex / chunkSize);
+        const endChunk = Math.floor(visibleEndIndex / chunkSize);
+
+        const newActiveChunks = getArray(endChunk - startChunk + 1 + CHUNKS_AHEAD_COUNT).map(
+            (index) => startChunk + index,
+        );
+
+        setActiveChunks(newActiveChunks);
+    }, [chunkSize, containerRef, itemHeight, totalItems]);
+
+    const throttledCalculateActiveChunks = React.useMemo(
+        () => throttle(calculateActiveChunks, THROTTLE_DELAY),
+        [calculateActiveChunks],
+    );
+
+    React.useEffect(() => {
+        const container = containerRef.current;
+        if (!container) {
+            return undefined;
+        }
+
+        container.addEventListener('scroll', throttledCalculateActiveChunks);
+        return () => {
+            container.removeEventListener('scroll', throttledCalculateActiveChunks);
+            throttledCalculateActiveChunks.cancel();
+        };
+    }, [containerRef, throttledCalculateActiveChunks]);
+
+    return activeChunks;
+};

src/components/PaginatedTable/useIntersectionObserver.ts

@@ -2,6 +2,8 @@
     border-radius: 4px; // to match interactive area with disk shape
 
     &__content {
+        display: block;
+
         border-radius: 4px; // to match interactive area with disk shape
     }
 }