Merge branch 'main' into astandrik.2079

Author: astandrik

.release-please-manifest.json

@@ -1,3 +1,3 @@
 {
-  ".": "8.22.1"
+  ".": "8.25.0"
 }

CHANGELOG.md

@@ -1,5 +1,50 @@
 # Changelog
 
+## [8.25.0](https://github.com/ydb-platform/ydb-embedded-ui/compare/v8.24.1...v8.25.0) (2025-04-25)
+
+
+### Features
+
+* add endpoint to connect to db code snippets ([#2198](https://github.com/ydb-platform/ydb-embedded-ui/issues/2198)) ([6e45802](https://github.com/ydb-platform/ydb-embedded-ui/commit/6e45802dc05baf3fe9ff5cef26e396964b8d827a))
+
+
+### Bug Fixes
+
+* find out performance issue with big tables of nodes ([#2206](https://github.com/ydb-platform/ydb-embedded-ui/issues/2206)) ([5c22404](https://github.com/ydb-platform/ydb-embedded-ui/commit/5c2240477ef132c9b58ca96b2ae1549f6e410e3b))
+
+## [8.24.1](https://github.com/ydb-platform/ydb-embedded-ui/compare/v8.24.0...v8.24.1) (2025-04-23)
+
+
+### Bug Fixes
+
+* fix top shards path column and better overriding for advisor ([#2197](https://github.com/ydb-platform/ydb-embedded-ui/issues/2197)) ([57df88b](https://github.com/ydb-platform/ydb-embedded-ui/commit/57df88b27fc1e3315f1a901dd4ec7eaecbaf6fae))
+
+## [8.24.0](https://github.com/ydb-platform/ydb-embedded-ui/compare/v8.23.0...v8.24.0) (2025-04-22)
+
+
+### Features
+
+* add possibility to pass external columns ([#2187](https://github.com/ydb-platform/ydb-embedded-ui/issues/2187)) ([65b2e72](https://github.com/ydb-platform/ydb-embedded-ui/commit/65b2e72bd0516609257120b1b44d38f4336e368e))
+
+## [8.23.0](https://github.com/ydb-platform/ydb-embedded-ui/compare/v8.22.1...v8.23.0) (2025-04-22)
+
+
+### Features
+
+* enable basename for multi cluster version ([#2153](https://github.com/ydb-platform/ydb-embedded-ui/issues/2153)) ([91963b9](https://github.com/ydb-platform/ydb-embedded-ui/commit/91963b9e256be20682fbb0cbe9ae26b8d8f567a9))
+
+
+### Bug Fixes
+
+* display query settings banner for non-default api call or txmode ([#2152](https://github.com/ydb-platform/ydb-embedded-ui/issues/2152)) ([395efc7](https://github.com/ydb-platform/ydb-embedded-ui/commit/395efc718645762bf4b0ddf2b419035790bb94a1))
+* fix wrong pdisk id order ([#2170](https://github.com/ydb-platform/ydb-embedded-ui/issues/2170)) ([c840b21](https://github.com/ydb-platform/ydb-embedded-ui/commit/c840b21d3d95441202ac7a97472fc556c7b50d04))
+* normalizePathSlashes should normalize multiple leading slashes ([#2186](https://github.com/ydb-platform/ydb-embedded-ui/issues/2186)) ([3e09755](https://github.com/ydb-platform/ydb-embedded-ui/commit/3e097553a949e85c3e779594207dc45d4876e465))
+* table in queries sorts by string values after backend sort ([#2183](https://github.com/ydb-platform/ydb-embedded-ui/issues/2183)) ([fc66fbe](https://github.com/ydb-platform/ydb-embedded-ui/commit/fc66fbef10e105aa22c7cce235996e0d8f6f70b2))
+* **TableGroup:** prevent content border overflow ([#2166](https://github.com/ydb-platform/ydb-embedded-ui/issues/2166)) ([7cefb6d](https://github.com/ydb-platform/ydb-embedded-ui/commit/7cefb6d025c84cc3669cfa7704f7aaa199f6c077))
+* **Tenants:** show create DB button only when table is loaded ([#2175](https://github.com/ydb-platform/ydb-embedded-ui/issues/2175)) ([b82e029](https://github.com/ydb-platform/ydb-embedded-ui/commit/b82e029c9040fc2ead47353e3992ce2d35179970))
+* update PDisk errors colors ([#2171](https://github.com/ydb-platform/ydb-embedded-ui/issues/2171)) ([2bb7b2d](https://github.com/ydb-platform/ydb-embedded-ui/commit/2bb7b2dac480b080c4e730ebde6d50b0c930b5f0))
+* **Versions:** should calculate minor version to get color ([#2180](https://github.com/ydb-platform/ydb-embedded-ui/issues/2180)) ([f77f933](https://github.com/ydb-platform/ydb-embedded-ui/commit/f77f933e3a47c772e5795c6c8546fb2ae4e18818))
+
 ## [8.22.1](https://github.com/ydb-platform/ydb-embedded-ui/compare/v8.22.0...v8.22.1) (2025-04-15)
 
 

package-lock.json

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

package.json

@@ -2,9 +2,14 @@ import React from 'react';
 
 import NiceModal from '@ebay/nice-modal-react';
 import {Dialog, Tabs} from '@gravity-ui/uikit';
+import {skipToken} from '@reduxjs/toolkit/query';
 
+import {tenantApi} from '../../store/reducers/tenant/tenant';
 import {cn} from '../../utils/cn';
+import {useTypedSelector} from '../../utils/hooks';
+import {useClusterNameFromQuery} from '../../utils/hooks/useDatabaseFromQuery';
 import {LinkWithIcon} from '../LinkWithIcon/LinkWithIcon';
+import {LoaderWrapper} from '../LoaderWrapper/LoaderWrapper';
 import {YDBSyntaxHighlighterLazy} from '../SyntaxHighlighter/lazy';
 
 import {getDocsLink} from './getDocsLink';
@@ -32,9 +37,26 @@ interface ConnectToDBDialogProps extends SnippetParams {
     onClose: VoidFunction;
 }
 
-function ConnectToDBDialog({open, onClose, database, endpoint}: ConnectToDBDialogProps) {
+function ConnectToDBDialog({
+    open,
+    onClose,
+    database,
+    endpoint: endpointFromProps,
+}: ConnectToDBDialogProps) {
     const [activeTab, setActiveTab] = React.useState<SnippetLanguage>('bash');
 
+    const clusterName = useClusterNameFromQuery();
+    const singleClusterMode = useTypedSelector((state) => state.singleClusterMode);
+
+    // If there is endpoint from props, we don't need to request tenant data
+    // Also we should not request tenant data if we are in single cluster mode
+    // Since there is no ControlPlane data in this case
+    const shouldRequestTenantData = database && !endpointFromProps && !singleClusterMode;
+    const params = shouldRequestTenantData ? {path: database, clusterName} : skipToken;
+    const {currentData: tenantData, isLoading: isTenantDataLoading} =
+        tenantApi.useGetTenantInfoQuery(params);
+    const endpoint = endpointFromProps ?? tenantData?.ControlPlane?.endpoint;
+
     const snippet = getSnippetCode(activeTab, {database, endpoint});
     const docsLink = getDocsLink(activeTab);
 
@@ -52,12 +74,14 @@ function ConnectToDBDialog({open, onClose, database, endpoint}: ConnectToDBDialo
                     className={b('dialog-tabs')}
                 />
                 <div className={b('snippet-container')}>
-                    <YDBSyntaxHighlighterLazy
-                        language={activeTab}
-                        text={snippet}
-                        transparentBackground={false}
-                        withClipboardButton={{alwaysVisible: true}}
-                    />
+                    <LoaderWrapper loading={isTenantDataLoading}>
+                        <YDBSyntaxHighlighterLazy
+                            language={activeTab}
+                            text={snippet}
+                            transparentBackground={false}
+                            withClipboardButton={{alwaysVisible: true}}
+                        />
+                    </LoaderWrapper>
                 </div>
                 {docsLink ? (
                     <LinkWithIcon

src/assets/icons/overview.svg

@@ -0,0 +1,34 @@
+import {prepareEndpoint} from '../utils';
+
+describe('prepareEndpoint', () => {
+    test('should remove all search params', () => {
+        const input = 'grpc://example.com:2139/?database=/root/test&param=value';
+        const expected = 'grpc://example.com:2139';
+        expect(prepareEndpoint(input)).toBe(expected);
+    });
+    test('should handle URL without path or params', () => {
+        const input = 'grpc://example.com:2139';
+        const expected = 'grpc://example.com:2139';
+        expect(prepareEndpoint(input)).toBe(expected);
+    });
+    test('should remove trailing slash from path', () => {
+        const input = 'grpc://example.com:2139/';
+        const expected = 'grpc://example.com:2139';
+        expect(prepareEndpoint(input)).toBe(expected);
+    });
+    test('should handle complex paths', () => {
+        const input = 'grpc://example.com:2139/multi/level/path/?database=/root/test';
+        const expected = 'grpc://example.com:2139/multi/level/path';
+        expect(prepareEndpoint(input)).toBe(expected);
+    });
+    test('should handle empty string', () => {
+        expect(prepareEndpoint('')).toBeUndefined();
+    });
+    test('should handle undefined input', () => {
+        expect(prepareEndpoint()).toBeUndefined();
+    });
+    test('should return undefined for invalid URL', () => {
+        const input = 'invalid-url';
+        expect(prepareEndpoint(input)).toBeUndefined();
+    });
+});

src/assets/icons/user-check.svg

@@ -1,4 +1,5 @@
 import type {SnippetLanguage, SnippetParams} from './types';
+import {prepareEndpoint} from './utils';
 
 export function getBashSnippetCode({database, endpoint}: SnippetParams) {
     return `ydb -e ${endpoint || '<endpoint>'} --token-file ~/my_token
@@ -198,7 +199,12 @@ with ydb.Driver(driver_config) as driver:
         print(driver.discovery_debug_details())`;
 }
 
-export function getSnippetCode(lang: SnippetLanguage, params: SnippetParams) {
+export function getSnippetCode(lang: SnippetLanguage, rawParams: SnippetParams) {
+    const params = {
+        ...rawParams,
+        endpoint: prepareEndpoint(rawParams.endpoint),
+    };
+
     switch (lang) {
         case 'cpp': {
             return getCPPSnippetCode(params);

src/components/ConnectToDB/ConnectToDBDialog.tsx

@@ -0,0 +1,20 @@
+// We have endpoint in format grpc://example.com:2139/?database=/root/test
+// We need it to be like grpc://example.com:2139 to make code in snippets work
+// We pass database to snippets as a separate param
+export function prepareEndpoint(connectionString = '') {
+    try {
+        const urlObj = new URL(connectionString);
+        urlObj.search = '';
+
+        let endpoint = urlObj.toString();
+
+        // Remove trailing slash if present
+        if (endpoint.endsWith('/')) {
+            endpoint = endpoint.slice(0, -1);
+        }
+
+        return endpoint;
+    } catch {
+        return undefined;
+    }
+}