Merge branch 'main' into issue610

.github/workflows/ci.yml

@@ -20,6 +20,7 @@ jobs:
       - run: npm run typecheck
       - run: npm run lint
       - run: npm run build:embedded # check that build works
+      - run: npm run package # check that package build works
 
   unit_tests:
     name: Unit Tests

CHANGELOG.md

@@ -1,5 +1,31 @@
 # Changelog
 
+## [6.14.1](https://github.com/ydb-platform/ydb-embedded-ui/compare/v6.14.0...v6.14.1) (2024-08-07)
+
+
+### Bug Fixes
+
+* package build ([#1129](https://github.com/ydb-platform/ydb-embedded-ui/issues/1129)) ([ea8aa29](https://github.com/ydb-platform/ydb-embedded-ui/commit/ea8aa29e8446679bf34f5c5bbc6033cb2482b6b4))
+
+## [6.14.0](https://github.com/ydb-platform/ydb-embedded-ui/compare/v6.13.0...v6.14.0) (2024-08-07)
+
+
+### Features
+
+* copy json query stats ([#1113](https://github.com/ydb-platform/ydb-embedded-ui/issues/1113)) ([e9cfa8a](https://github.com/ydb-platform/ydb-embedded-ui/commit/e9cfa8a7cc8dad7a1dc3fca354419a3af9a852bf))
+* display relative schema object path on left overview tab ([#1118](https://github.com/ydb-platform/ydb-embedded-ui/issues/1118)) ([c55164c](https://github.com/ydb-platform/ydb-embedded-ui/commit/c55164c4f6688ee61e520a9eebaa4b2382600a06))
+* **e2e:** add warmup for e2e ([#1122](https://github.com/ydb-platform/ydb-embedded-ui/issues/1122)) ([c15dc1a](https://github.com/ydb-platform/ydb-embedded-ui/commit/c15dc1a1a3954cab96abbf76edfb232321485d99))
+* remove tablets column from databases table ([#1121](https://github.com/ydb-platform/ydb-embedded-ui/issues/1121)) ([68c3972](https://github.com/ydb-platform/ydb-embedded-ui/commit/68c39726fccb24725bb47aaaad1beadc7d2b26bf))
+* stop running query ([#1117](https://github.com/ydb-platform/ydb-embedded-ui/issues/1117)) ([a30258f](https://github.com/ydb-platform/ydb-embedded-ui/commit/a30258f1f362d6a1aa2e098e197fb03d90abee2b))
+
+
+### Bug Fixes
+
+* **e2e:** use baseurl from config ([#1123](https://github.com/ydb-platform/ydb-embedded-ui/issues/1123)) ([d0efbb1](https://github.com/ydb-platform/ydb-embedded-ui/commit/d0efbb13cbf61accce10e453f408681560d59f3d))
+* pass database to topic api handlers ([#1128](https://github.com/ydb-platform/ydb-embedded-ui/issues/1128)) ([b23fc79](https://github.com/ydb-platform/ydb-embedded-ui/commit/b23fc79548b8bdea31d86505bd56ee2baf6d8c1a))
+* schema in sendQuery is only query parameter ([#1119](https://github.com/ydb-platform/ydb-embedded-ui/issues/1119)) ([5bb0461](https://github.com/ydb-platform/ydb-embedded-ui/commit/5bb0461b98eb7d5d5deba99199b447abda013fe4))
+* **SimplifiedPlan:** should hide dividers if item is collapsed ([#1124](https://github.com/ydb-platform/ydb-embedded-ui/issues/1124)) ([5759e1b](https://github.com/ydb-platform/ydb-embedded-ui/commit/5759e1b5aaa6865eb45f6dda4cbdd0cee91ed533))
+
 ## [6.13.0](https://github.com/ydb-platform/ydb-embedded-ui/compare/v6.12.0...v6.13.0) (2024-08-02)
 
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ydb-embedded-ui",
-  "version": "6.13.0",
+  "version": "6.14.1",
   "files": [
     "dist"
   ],
@@ -21,9 +21,11 @@
     "@gravity-ui/navigation": "^2.16.0",
     "@gravity-ui/paranoid": "^2.0.1",
     "@gravity-ui/react-data-table": "^2.1.1",
+    "@gravity-ui/table": "^0.5.0",
     "@gravity-ui/uikit": "^6.20.1",
     "@gravity-ui/websql-autocomplete": "^9.1.0",
     "@reduxjs/toolkit": "^2.2.3",
+    "@tanstack/react-table": "^8.19.3",
     "axios": "^1.7.2",
     "axios-retry": "^4.4.0",
     "colord": "^2.9.3",
@@ -50,11 +52,10 @@
     "tslib": "^2.6.3",
     "url": "^0.11.3",
     "use-query-params": "^2.2.1",
+    "uuid": "^10.0.0",
     "web-vitals": "^1.1.2",
     "ydb-ui-components": "^4.2.0",
-    "zod": "^3.23.8",
-    "@gravity-ui/table": "^0.5.0",
-    "@tanstack/react-table": "^8.19.3"
+    "zod": "^3.23.8"
   },
   "scripts": {
     "analyze": "source-map-explorer 'build/static/js/*.js'",
@@ -144,6 +145,7 @@
     "@types/react-dom": "^18.3.0",
     "@types/react-router": "^5.1.20",
     "@types/react-router-dom": "^5.3.3",
+    "@types/uuid": "^10.0.0",
     "copyfiles": "^2.4.1",
     "http-proxy-middleware": "^2.0.6",
     "husky": "^9.0.11",

playwright.config.ts

@@ -4,7 +4,7 @@ import {devices} from '@playwright/test';
 const baseUrl = process.env.PLAYWRIGHT_BASE_URL;
 
 const config: PlaywrightTestConfig = {
-    globalSetup: './src/playwrightSetup.ts',
+    globalSetup: './tests/playwrightSetup.ts',
     testDir: 'tests/suites',
     timeout: 2 * 60 * 1000,
     outputDir: './playwright-artifacts/test-results',

src/components/ElapsedTime/ElapsedTime.scss

@@ -0,0 +1,3 @@
+.ydb-query-elapsed-time {
+    visibility: visible;
+}

src/components/ElapsedTime/ElapsedTime.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+
+import {duration} from '@gravity-ui/date-utils';
+import {Label} from '@gravity-ui/uikit';
+
+import {HOUR_IN_SECONDS, SECOND_IN_MS, cn} from '../../lib';
+
+const b = cn('ydb-query-elapsed-time');
+
+interface ElapsedTimeProps {
+    className?: string;
+}
+
+export default function ElapsedTime({className}: ElapsedTimeProps) {
+    const [, reRender] = React.useState({});
+    const [startTime] = React.useState(Date.now());
+    const elapsedTime = Date.now() - startTime;
+
+    React.useEffect(() => {
+        const timerId = setInterval(() => {
+            reRender({});
+        }, SECOND_IN_MS);
+        return () => {
+            clearInterval(timerId);
+        };
+    }, []);
+
+    const elapsedTimeFormatted =
+        elapsedTime > HOUR_IN_SECONDS * SECOND_IN_MS
+            ? duration(elapsedTime).format('hh:mm:ss')
+            : duration(elapsedTime).format('mm:ss');
+
+    return <Label className={b(null, className)}>{elapsedTimeFormatted}</Label>;
+}

src/components/QueryExecutionStatus/QueryExecutionStatus.tsx

@@ -1,10 +1,17 @@
 import React from 'react';
 
-import {CircleCheck, CircleInfo, CircleQuestionFill, CircleXmark} from '@gravity-ui/icons';
-import {Icon, Tooltip} from '@gravity-ui/uikit';
+import {
+    CircleCheck,
+    CircleInfo,
+    CircleQuestionFill,
+    CircleStop,
+    CircleXmark,
+} from '@gravity-ui/icons';
+import {Icon, Spin, Tooltip} from '@gravity-ui/uikit';
 import {isAxiosError} from 'axios';
 
 import i18n from '../../containers/Tenant/Query/i18n';
+import {isQueryCancelledError} from '../../containers/Tenant/Query/utils/isQueryCancelledError';
 import {cn} from '../../utils/cn';
 import {useChangedQuerySettings} from '../../utils/hooks/useChangedQuerySettings';
 import QuerySettingsDescription from '../QuerySettingsDescription/QuerySettingsDescription';
@@ -16,6 +23,7 @@ const b = cn('kv-query-execution-status');
 interface QueryExecutionStatusProps {
     className?: string;
     error?: unknown;
+    loading?: boolean;
 }
 
 const QuerySettingsIndicator = () => {
@@ -40,13 +48,19 @@ const QuerySettingsIndicator = () => {
     );
 };
 
-export const QueryExecutionStatus = ({className, error}: QueryExecutionStatusProps) => {
+export const QueryExecutionStatus = ({className, error, loading}: QueryExecutionStatusProps) => {
     let icon: React.ReactNode;
     let label: string;
 
-    if (isAxiosError(error) && error.code === 'ECONNABORTED') {
+    if (loading) {
+        icon = <Spin size="xs" />;
+        label = 'Running';
+    } else if (isAxiosError(error) && error.code === 'ECONNABORTED') {
         icon = <Icon data={CircleQuestionFill} />;
         label = 'Connection aborted';
+    } else if (isQueryCancelledError(error)) {
+        icon = <Icon data={CircleStop} />;
+        label = 'Stopped';
     } else {
         const hasError = Boolean(error);
         icon = (
@@ -62,7 +76,7 @@ export const QueryExecutionStatus = ({className, error}: QueryExecutionStatusPro
         <div className={b(null, className)}>
             {icon}
             {label}
-            <QuerySettingsIndicator />
+            {isQueryCancelledError(error) || loading ? null : <QuerySettingsIndicator />}
         </div>
     );
 };

src/components/VDiskInfo/VDiskInfo.tsx

@@ -1,11 +1,15 @@
+import React from 'react';
+
 import {getVDiskPagePath} from '../../routes';
+import {selectIsUserAllowedToMakeChanges} from '../../store/reducers/authentication/authentication';
 import {useDiskPagesAvailable} from '../../store/reducers/capabilities/hooks';
 import {valueIsDefined} from '../../utils';
 import {cn} from '../../utils/cn';
 import {formatStorageValuesToGb, stringifyVdiskId} from '../../utils/dataFormatters/dataFormatters';
 import {createVDiskDeveloperUILink} from '../../utils/developerUI/developerUI';
 import {getSeverityColor} from '../../utils/disks/helpers';
 import type {PreparedVDisk} from '../../utils/disks/types';
+import {useTypedSelector} from '../../utils/hooks';
 import {bytesToSpeed} from '../../utils/utils';
 import {EntityStatus} from '../EntityStatus/EntityStatus';
 import {InfoViewer} from '../InfoViewer';
@@ -33,6 +37,7 @@ export function VDiskInfo<T extends PreparedVDisk>({
     ...infoViewerProps
 }: VDiskInfoProps<T>) {
     const diskPagesAvailable = useDiskPagesAvailable();
+    const isUserAllowedToMakeChanges = useTypedSelector(selectIsUserAllowedToMakeChanges);
 
     const {
         AllocatedSize,
@@ -142,32 +147,47 @@ export function VDiskInfo<T extends PreparedVDisk>({
             value: bytesToSpeed(WriteThroughput),
         });
     }
-    if (valueIsDefined(PDiskId) && valueIsDefined(NodeId) && valueIsDefined(VDiskSlotId)) {
-        const vDiskPagePath = getVDiskPagePath(VDiskSlotId, PDiskId, NodeId);
-        const vDiskInternalViewerPath = createVDiskDeveloperUILink({
-            nodeId: NodeId,
-            pDiskId: PDiskId,
-            vDiskSlotId: VDiskSlotId,
-        });
 
-        vdiskInfo.push({
-            label: vDiskInfoKeyset('links'),
-            value: (
-                <span className={b('links')}>
-                    {withVDiskPageLink && diskPagesAvailable && (
-                        <LinkWithIcon
-                            title={vDiskInfoKeyset('vdisk-page')}
-                            url={vDiskPagePath}
-                            external={false}
-                        />
-                    )}
-                    <LinkWithIcon
-                        title={vDiskInfoKeyset('developer-ui')}
-                        url={vDiskInternalViewerPath}
-                    />
-                </span>
-            ),
-        });
+    const diskParamsDefined =
+        valueIsDefined(PDiskId) && valueIsDefined(NodeId) && valueIsDefined(VDiskSlotId);
+
+    if (diskParamsDefined) {
+        const links: React.ReactNode[] = [];
+
+        if (withVDiskPageLink && diskPagesAvailable) {
+            const vDiskPagePath = getVDiskPagePath(VDiskSlotId, PDiskId, NodeId);
+            links.push(
+                <LinkWithIcon
+                    key={vDiskPagePath}
+                    title={vDiskInfoKeyset('vdisk-page')}
+                    url={vDiskPagePath}
+                    external={false}
+                />,
+            );
+        }
+
+        if (isUserAllowedToMakeChanges) {
+            const vDiskInternalViewerPath = createVDiskDeveloperUILink({
+                nodeId: NodeId,
+                pDiskId: PDiskId,
+                vDiskSlotId: VDiskSlotId,
+            });
+
+            links.push(
+                <LinkWithIcon
+                    key={vDiskInternalViewerPath}
+                    title={vDiskInfoKeyset('developer-ui')}
+                    url={vDiskInternalViewerPath}
+                />,
+            );
+        }
+
+        if (links.length) {
+            vdiskInfo.push({
+                label: vDiskInfoKeyset('links'),
+                value: <div className={b('links')}>{links}</div>,
+            });
+        }
     }
 
     const title = data && withTitle ? <VDiskTitle data={data} /> : null;

src/containers/Tenant/Diagnostics/Consumers/Consumers.tsx

@@ -27,22 +27,25 @@ const b = cn('ydb-diagnostics-consumers');
 
 interface ConsumersProps {
     path: string;
+    database: string;
     type?: EPathType;
 }
 
-export const Consumers = ({path, type}: ConsumersProps) => {
+export const Consumers = ({path, database, type}: ConsumersProps) => {
     const isCdcStream = isCdcStreamEntityType(type);
 
     const [searchValue, setSearchValue] = React.useState('');
 
     const [autoRefreshInterval] = useAutoRefreshInterval();
     const {currentData, isFetching, error} = topicApi.useGetTopicQuery(
-        {path},
+        {path, database},
         {pollingInterval: autoRefreshInterval},
     );
     const loading = isFetching && currentData === undefined;
-    const consumers = useTypedSelector((state) => selectPreparedConsumersData(state, path));
-    const topic = useTypedSelector((state) => selectPreparedTopicStats(state, path));
+    const consumers = useTypedSelector((state) =>
+        selectPreparedConsumersData(state, path, database),
+    );
+    const topic = useTypedSelector((state) => selectPreparedTopicStats(state, path, database));
 
     const dataToRender = React.useMemo(() => {
         if (!consumers) {

src/containers/Tenant/Diagnostics/Diagnostics.tsx

@@ -125,10 +125,10 @@ function Diagnostics(props: DiagnosticsProps) {
                 return <Heatmap path={path} database={tenantName} />;
             }
             case TENANT_DIAGNOSTICS_TABS_IDS.consumers: {
-                return <Consumers path={path} type={type} />;
+                return <Consumers path={path} database={tenantName} type={type} />;
             }
             case TENANT_DIAGNOSTICS_TABS_IDS.partitions: {
-                return <Partitions path={path} />;
+                return <Partitions path={path} database={tenantName} />;
             }
             default: {
                 return <div>No data...</div>;