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

astandrik · web-flow · commit bfe4844e88d0 · 2024-10-11T17:43:26.000+03:00
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,19 @@
 # Changelog
 
+## [6.25.0](https://github.com/ydb-platform/ydb-embedded-ui/compare/v6.24.0...v6.25.0) (2024-10-11)
+
+
+### Features
+
+* **Cluster:** add Tablets tab ([#1438](https://github.com/ydb-platform/ydb-embedded-ui/issues/1438)) ([f349bcd](https://github.com/ydb-platform/ydb-embedded-ui/commit/f349bcdf758483e42aa571ba293cf3558a9d2e34))
+
+
+### Bug Fixes
+
+* do not hide pdisk and vdisk popups if mouse on popup content ([#1435](https://github.com/ydb-platform/ydb-embedded-ui/issues/1435)) ([ac70e8d](https://github.com/ydb-platform/ydb-embedded-ui/commit/ac70e8d62ec81913e0d4256900cdc4422fa44cf5))
+* **ExecuteResult:** do not show title if no result ([#1444](https://github.com/ydb-platform/ydb-embedded-ui/issues/1444)) ([78cd713](https://github.com/ydb-platform/ydb-embedded-ui/commit/78cd7137f5f77990daaca28a460766baaa5f96b1))
+* **Storage:** do not display group control if not available ([#1449](https://github.com/ydb-platform/ydb-embedded-ui/issues/1449)) ([a647026](https://github.com/ydb-platform/ydb-embedded-ui/commit/a6470263d3f9a2948be0baefcf13fbfb80b282ca))
+
 ## [6.24.0](https://github.com/ydb-platform/ydb-embedded-ui/compare/v6.23.1...v6.24.0) (2024-10-10)
 
 
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ydb-embedded-ui",
-  "version": "6.24.0",
+  "version": "6.25.0",
   "files": [
     "dist"
   ],
diff --git a/src/components/CellWithPopover/CellWithPopover.tsx b/src/components/CellWithPopover/CellWithPopover.tsx
@@ -11,6 +11,8 @@ interface CellWithPopoverProps extends PopoverProps {
     wrapperClassName?: string;
 }
 
+const DELAY_TIMEOUT = 100;
+
 export function CellWithPopover({
     children,
     className,
@@ -19,7 +21,12 @@ export function CellWithPopover({
 }: CellWithPopoverProps) {
     return (
         <div className={b(null, wrapperClassName)}>
-            <Popover className={b('popover', className)} {...props}>
+            <Popover
+                delayClosing={DELAY_TIMEOUT}
+                delayOpening={DELAY_TIMEOUT}
+                className={b('popover', className)}
+                {...props}
+            >
                 {children}
             </Popover>
         </div>
diff --git a/src/components/PDiskPopup/PDiskPopup.tsx b/src/components/PDiskPopup/PDiskPopup.tsx
@@ -70,6 +70,14 @@ export const PDiskPopup = ({data, ...props}: PDiskPopupProps) => {
     const nodeHost = valueIsDefined(data.NodeId) ? nodeHostsMap?.get(data.NodeId) : undefined;
     const info = React.useMemo(() => preparePDiskData(data, nodeHost), [data, nodeHost]);
 
+    const [isPopupContentHovered, setIsPopupContentHovered] = React.useState(false);
+    const onMouseLeave = React.useCallback(() => {
+        setIsPopupContentHovered(false);
+    }, []);
+    const onMouseEnter = React.useCallback(() => {
+        setIsPopupContentHovered(true);
+    }, []);
+
     return (
         <Popup
             contentClassName={b()}
@@ -78,7 +86,10 @@ export const PDiskPopup = ({data, ...props}: PDiskPopupProps) => {
             // bigger offset for easier switching to neighbour nodes
             // matches the default offset for popup with arrow out of a sense of beauty
             offset={[0, 12]}
+            onMouseLeave={onMouseLeave}
+            onMouseEnter={onMouseEnter}
             {...props}
+            open={isPopupContentHovered || props.open}
         >
             <InfoViewer title="PDisk" info={info} size="s" />
         </Popup>
diff --git a/src/components/VDisk/VDisk.tsx b/src/components/VDisk/VDisk.tsx
@@ -1,5 +1,7 @@
 import React from 'react';
 
+import {debounce} from 'lodash';
+
 import {cn} from '../../utils/cn';
 import type {PreparedVDisk} from '../../utils/disks/types';
 import {DiskStateProgressBar} from '../DiskStateProgressBar/DiskStateProgressBar';
@@ -12,6 +14,8 @@ import './VDisk.scss';
 
 const b = cn('ydb-vdisk-component');
 
+const DEBOUNCE_TIMEOUT = 100;
+
 export interface VDiskProps {
     data?: PreparedVDisk;
     compact?: boolean;
@@ -35,15 +39,15 @@ export const VDisk = ({
 
     const anchor = React.useRef(null);
 
-    const handleShowPopup = () => {
+    const debouncedHandleShowPopup = debounce(() => {
         setIsPopupVisible(true);
         onShowPopup?.();
-    };
+    }, DEBOUNCE_TIMEOUT);
 
-    const handleHidePopup = () => {
+    const debouncedHandleHidePopup = debounce(() => {
         setIsPopupVisible(false);
         onHidePopup?.();
-    };
+    }, DEBOUNCE_TIMEOUT);
 
     const vDiskPath = getVDiskLink(data);
 
@@ -52,8 +56,11 @@ export const VDisk = ({
             <div
                 className={b()}
                 ref={anchor}
-                onMouseEnter={handleShowPopup}
-                onMouseLeave={handleHidePopup}
+                onMouseEnter={debouncedHandleShowPopup}
+                onMouseLeave={() => {
+                    debouncedHandleShowPopup.cancel();
+                    debouncedHandleHidePopup();
+                }}
             >
                 <InternalLink to={vDiskPath} className={b('content')}>
                     <DiskStateProgressBar
diff --git a/src/components/VDiskPopup/VDiskPopup.tsx b/src/components/VDiskPopup/VDiskPopup.tsx
@@ -137,6 +137,14 @@ interface VDiskPopupProps extends PopupProps {
 export const VDiskPopup = ({data, ...props}: VDiskPopupProps) => {
     const isFullData = isFullVDiskData(data);
 
+    const [isPopupContentHovered, setIsPopupContentHovered] = React.useState(false);
+    const onMouseLeave = React.useCallback(() => {
+        setIsPopupContentHovered(false);
+    }, []);
+    const onMouseEnter = React.useCallback(() => {
+        setIsPopupContentHovered(true);
+    }, []);
+
     const vdiskInfo = React.useMemo(
         () => (isFullData ? prepareVDiskData(data) : prepareUnavailableVDiskData(data)),
         [data, isFullData],
@@ -181,7 +189,10 @@ export const VDiskPopup = ({data, ...props}: VDiskPopupProps) => {
             // bigger offset for easier switching to neighbour nodes
             // matches the default offset for popup with arrow out of a sense of beauty
             offset={[0, 12]}
+            onMouseEnter={onMouseEnter}
+            onMouseLeave={onMouseLeave}
             {...props}
+            open={isPopupContentHovered || props.open}
         >
             {data.DonorMode && <Label className={b('donor-label')}>Donor</Label>}
             <InfoViewer title="VDisk" info={vdiskInfo} size="s" />
diff --git a/src/containers/Storage/PDisk/PDisk.tsx b/src/containers/Storage/PDisk/PDisk.tsx
@@ -1,5 +1,7 @@
 import React from 'react';
 
+import {debounce} from 'lodash';
+
 import {DiskStateProgressBar} from '../../../components/DiskStateProgressBar/DiskStateProgressBar';
 import {InternalLink} from '../../../components/InternalLink';
 import {PDiskPopup} from '../../../components/PDiskPopup/PDiskPopup';
@@ -16,6 +18,8 @@ import './PDisk.scss';
 
 const b = cn('pdisk-storage');
 
+const DEBOUNCE_TIMEOUT = 100;
+
 interface PDiskProps {
     data?: PreparedPDisk;
     vDisks?: PreparedVDisk[];
@@ -44,15 +48,15 @@ export const PDisk = ({
     const {NodeId, PDiskId} = data;
     const pDiskIdsDefined = valueIsDefined(NodeId) && valueIsDefined(PDiskId);
 
-    const handleShowPopup = () => {
+    const debouncedHandleShowPopup = debounce(() => {
         setIsPopupVisible(true);
         onShowPopup?.();
-    };
+    }, DEBOUNCE_TIMEOUT);
 
-    const handleHidePopup = () => {
+    const debouncedHandleHidePopup = debounce(() => {
         setIsPopupVisible(false);
         onHidePopup?.();
-    };
+    }, DEBOUNCE_TIMEOUT);
 
     const renderVDisks = () => {
         if (!vDisks?.length) {
@@ -101,8 +105,11 @@ export const PDisk = ({
                 <InternalLink
                     to={pDiskPath}
                     className={b('content')}
-                    onMouseEnter={handleShowPopup}
-                    onMouseLeave={handleHidePopup}
+                    onMouseEnter={debouncedHandleShowPopup}
+                    onMouseLeave={() => {
+                        debouncedHandleShowPopup.cancel();
+                        debouncedHandleHidePopup();
+                    }}
                 >
                     <DiskStateProgressBar
                         diskAllocatedPercent={data.AllocatedPercent}
diff --git a/src/containers/Storage/PaginatedStorageGroups.tsx b/src/containers/Storage/PaginatedStorageGroups.tsx
@@ -60,6 +60,8 @@ function StorageGroupsComponent({
 }: PaginatedStorageProps) {
     const {searchValue, visibleEntities, handleShowAllGroups} = useStorageQueryParams();
 
+    const storageGroupsHandlerHasGroupping = useStorageGroupsHandlerHasGrouping();
+
     const {columnsToShow, columnsToSelect, setColumns} = useStorageGroupsSelectedColumns({
         visibleEntities,
         viewContext,
@@ -69,7 +71,7 @@ function StorageGroupsComponent({
         return (
             <StorageGroupsControls
                 withTypeSelector
-                withGroupBySelect
+                withGroupBySelect={storageGroupsHandlerHasGroupping}
                 entitiesCountCurrent={foundEntities}
                 entitiesCountTotal={totalEntities}
                 entitiesLoading={!inited}
diff --git a/src/containers/Storage/PaginatedStorageNodes.tsx b/src/containers/Storage/PaginatedStorageNodes.tsx
@@ -68,6 +68,8 @@ function StorageNodesComponent({
     const {searchValue, visibleEntities, nodesUptimeFilter, handleShowAllNodes} =
         useStorageQueryParams();
 
+    const viewerNodesHandlerHasGrouping = useViewerNodesHandlerHasGrouping();
+
     const {columnsToShow, columnsToSelect, setColumns} = useStorageNodesColumnsToSelect({
         database,
         viewContext,
@@ -77,7 +79,7 @@ function StorageNodesComponent({
         return (
             <StorageNodesControls
                 withTypeSelector
-                withGroupBySelect
+                withGroupBySelect={viewerNodesHandlerHasGrouping}
                 entitiesCountCurrent={foundEntities}
                 entitiesCountTotal={totalEntities}
                 entitiesLoading={!inited}
diff --git a/src/containers/Tenant/Query/ExplainResult/components/SimplifiedPlan/SimplifiedPlan.scss b/src/containers/Tenant/Query/ExplainResult/components/SimplifiedPlan/SimplifiedPlan.scss
@@ -5,7 +5,7 @@
     overflow: auto;
 
     height: 100%;
-    padding: 0 0 15px;
+    padding: 0 15px 15px;
     &__table {
         width: 100%;
         max-width: 100%;

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "ydb-embedded-ui",`
`3`		`- "version": "6.24.0",`
	`3`	`+ "version": "6.25.0",`
`4`	`4`	`"files": [`
`5`	`5`	`"dist"`
`6`	`6`	`],`