ydb-embedded-ui 4.19.3 → 4.20.1

package/CHANGELOG.md

@@ -1,5 +1,32 @@
 # Changelog
 
+## [4.20.1](https://github.com/ydb-platform/ydb-embedded-ui/compare/v4.20.0...v4.20.1) (2023-10-24)
+
+
+### Bug Fixes
+
+* fix createExternalUILink ([#571](https://github.com/ydb-platform/ydb-embedded-ui/issues/571)) ([52546f1](https://github.com/ydb-platform/ydb-embedded-ui/commit/52546f17dbfdb255b2429836e880d6812b19d66a))
+* fix incorrect truncate strings with popover ([#567](https://github.com/ydb-platform/ydb-embedded-ui/issues/567)) ([d82e65b](https://github.com/ydb-platform/ydb-embedded-ui/commit/d82e65b925b76dc539a76520eccf601951654e94))
+* fix top queries table row height ([#565](https://github.com/ydb-platform/ydb-embedded-ui/issues/565)) ([b12dceb](https://github.com/ydb-platform/ydb-embedded-ui/commit/b12dcebdb0167fd5852c247bca48844ef6ab35af))
+* refactor metrics storage section ([#568](https://github.com/ydb-platform/ydb-embedded-ui/issues/568)) ([db5d922](https://github.com/ydb-platform/ydb-embedded-ui/commit/db5d922d06b88c9d8a792220d2a178c81806c09e))
+* update @types/react ([#570](https://github.com/ydb-platform/ydb-embedded-ui/issues/570)) ([1e38c5b](https://github.com/ydb-platform/ydb-embedded-ui/commit/1e38c5bb3b4b2139b2141636d6434c2a2ec65772))
+
+## [4.20.0](https://github.com/ydb-platform/ydb-embedded-ui/compare/v4.19.3...v4.20.0) (2023-10-19)
+
+
+### Features
+
+* add top nodes by memory table ([#562](https://github.com/ydb-platform/ydb-embedded-ui/issues/562)) ([0d4ccf2](https://github.com/ydb-platform/ydb-embedded-ui/commit/0d4ccf2a85251fadad66182ab7d6ccd54a58e6cf))
+* add top tables links ([#564](https://github.com/ydb-platform/ydb-embedded-ui/issues/564)) ([e9b918f](https://github.com/ydb-platform/ydb-embedded-ui/commit/e9b918f0abace890cfafd9d7b219be5b69cac820))
+* **Storage:** hide nodes table for node page ([#557](https://github.com/ydb-platform/ydb-embedded-ui/issues/557)) ([9a25a00](https://github.com/ydb-platform/ydb-embedded-ui/commit/9a25a002b28824f7e616ac8143dbde12de0b0fb7))
+* **TenantOverview:** add cpu tab to tenant diagnostics ([#550](https://github.com/ydb-platform/ydb-embedded-ui/issues/550)) ([3048f84](https://github.com/ydb-platform/ydb-embedded-ui/commit/3048f8478d97249da4f7b66c26ed55f6f21e0f81))
+
+
+### Bug Fixes
+
+* add loader for healthcheck ([#563](https://github.com/ydb-platform/ydb-embedded-ui/issues/563)) ([6caea3d](https://github.com/ydb-platform/ydb-embedded-ui/commit/6caea3dec8f901090b0f8f7c1796880d7dc90a99))
+* **LinkToSchemaObject:** fix schema link ([#566](https://github.com/ydb-platform/ydb-embedded-ui/issues/566)) ([6ca8a70](https://github.com/ydb-platform/ydb-embedded-ui/commit/6ca8a705b6ddacb1f845aabb7761fd22c0c3b4e0))
+
 ## [4.19.3](https://github.com/ydb-platform/ydb-embedded-ui/compare/v4.19.2...v4.19.3) (2023-10-13)
 
 

package/dist/components/CellWithPopover/CellWithPopover.scss

@@ -0,0 +1,13 @@
+.ydb-cell-with-popover {
+    display: flex;
+
+    &__popover {
+        display: inline-block;
+        overflow: hidden;
+
+        max-width: 100%;
+
+        white-space: nowrap;
+        text-overflow: ellipsis;
+    }
+}

package/dist/components/CellWithPopover/CellWithPopover.tsx

@@ -0,0 +1,26 @@
+import cn from 'bem-cn-lite';
+
+import {Popover, type PopoverProps} from '@gravity-ui/uikit';
+
+import './CellWithPopover.scss';
+
+const b = cn('ydb-cell-with-popover');
+
+interface CellWithPopoverProps extends PopoverProps {
+    wrapperClassName?: string;
+}
+
+export function CellWithPopover({
+    children,
+    className,
+    wrapperClassName,
+    ...props
+}: CellWithPopoverProps) {
+    return (
+        <div className={b(null, wrapperClassName)}>
+            <Popover className={b('popover', className)} {...props}>
+                {children}
+            </Popover>
+        </div>
+    );
+}

package/dist/components/LinkToSchemaObject/LinkToSchemaObject.tsx

@@ -0,0 +1,20 @@
+import type {Location} from 'history';
+
+import {Link, type LinkProps} from '@gravity-ui/uikit';
+
+import {createExternalUILink, parseQuery} from '../../routes';
+
+interface LinkToSchemaObjectProps extends LinkProps {
+    path: string;
+    location: Location;
+}
+
+export function LinkToSchemaObject({path, location, ...props}: LinkToSchemaObjectProps) {
+    const queryParams = parseQuery(location);
+    const pathToSchemaObject = createExternalUILink({
+        ...queryParams,
+        schema: path,
+    });
+
+    return <Link view="normal" href={pathToSchemaObject} {...props} />;
+}

package/dist/components/NodeHostWrapper/NodeHostWrapper.scss

@@ -1,6 +1,4 @@
 .ydb-node-host-wrapper {
-    display: flex;
-
     &__host-wrapper {
         display: flex;
 

package/dist/components/NodeHostWrapper/NodeHostWrapper.tsx

@@ -1,6 +1,6 @@
 import block from 'bem-cn-lite';
 
-import {Button, Popover, PopoverBehavior} from '@gravity-ui/uikit';
+import {Button, PopoverBehavior} from '@gravity-ui/uikit';
 
 import type {NodesPreparedEntity} from '../../store/reducers/nodes/types';
 import type {NodeAddress} from '../../types/additionalProps';
@@ -10,6 +10,7 @@ import {isUnavailableNode} from '../../utils/nodes';
 import EntityStatus from '../EntityStatus/EntityStatus';
 import {NodeEndpointsTooltipContent} from '../TooltipsContent';
 import {IconWrapper} from '../Icon';
+import {CellWithPopover} from '../CellWithPopover/CellWithPopover';
 
 import './NodeHostWrapper.scss';
 
@@ -34,33 +35,31 @@ export const NodeHostWrapper = ({node, getNodeRef}: NodeHostWrapperProps) => {
         : undefined;
 
     return (
-        <div className={b()}>
-            <Popover
-                disabled={!isNodeAvailable}
-                content={<NodeEndpointsTooltipContent data={node} />}
-                placement={['top', 'bottom']}
-                behavior={PopoverBehavior.Immediate}
-            >
-                <div className={b('host-wrapper')}>
-                    <EntityStatus
-                        name={node.Host}
-                        status={node.SystemState}
-                        path={nodePath}
-                        hasClipboardButton
-                        className={b('host')}
-                    />
-                    {nodeRef && (
-                        <Button
-                            size="s"
-                            href={nodeRef}
-                            className={b('external-button')}
-                            target="_blank"
-                        >
-                            <IconWrapper name="external" />
-                        </Button>
-                    )}
-                </div>
-            </Popover>
-        </div>
+        <CellWithPopover
+            disabled={!isNodeAvailable}
+            content={<NodeEndpointsTooltipContent data={node} />}
+            placement={['top', 'bottom']}
+            behavior={PopoverBehavior.Immediate}
+        >
+            <div className={b('host-wrapper')}>
+                <EntityStatus
+                    name={node.Host}
+                    status={node.SystemState}
+                    path={nodePath}
+                    hasClipboardButton
+                    className={b('host')}
+                />
+                {nodeRef && (
+                    <Button
+                        size="s"
+                        href={nodeRef}
+                        className={b('external-button')}
+                        target="_blank"
+                    >
+                        <IconWrapper name="external" />
+                    </Button>
+                )}
+            </div>
+        </CellWithPopover>
     );
 };

package/dist/components/QueryExecutionStatus/QueryExecutionStatus.tsx

@@ -14,14 +14,15 @@ const b = cn('kv-query-execution-status');
 
 interface QueryExecutionStatusProps {
     className?: string;
-    error?: AxiosError | Record<string, any>;
+    // TODO: Remove Record<string, any> when ECONNABORTED error case is fully typed
+    error?: AxiosError | Record<string, any> | string;
 }
 
 export const QueryExecutionStatus = ({className, error}: QueryExecutionStatusProps) => {
     let icon: ReactNode;
     let label: string;
 
-    if (error?.code === 'ECONNABORTED') {
+    if (typeof error === 'object' && error?.code === 'ECONNABORTED') {
         icon = <UiKitIcon data={questionIcon} size={16} />;
         label = 'Connection aborted';
     } else {

package/dist/components/TruncatedQuery/TruncatedQuery.scss

@@ -14,4 +14,12 @@
             }
         }
     }
+
+    &__popover-content {
+        overflow: hidden;
+
+        max-width: 600px;
+
+        white-space: pre;
+    }
 }

package/dist/components/TruncatedQuery/TruncatedQuery.tsx

@@ -1,11 +1,13 @@
 import cn from 'bem-cn-lite';
 
+import {CellWithPopover} from '../CellWithPopover/CellWithPopover';
+
 import './TruncatedQuery.scss';
 
 const b = cn('kv-truncated-query');
 
 interface TruncatedQueryProps {
-    value: string | undefined;
+    value?: string;
     maxQueryHeight?: number;
 }
 
@@ -26,3 +28,15 @@ export const TruncatedQuery = ({value = '', maxQueryHeight = 6}: TruncatedQueryP
     }
     return <>{value}</>;
 };
+
+interface OneLineQueryWithPopoverProps {
+    value?: string;
+}
+
+export const OneLineQueryWithPopover = ({value = ''}: OneLineQueryWithPopoverProps) => {
+    return (
+        <CellWithPopover contentClassName={b('popover-content')} content={value}>
+            {value}
+        </CellWithPopover>
+    );
+};

package/dist/components/UsageLabel/UsageLabel.scss

@@ -0,0 +1,6 @@
+.ydb-usage-label {
+    &_overload {
+        color: var(--yc-color-text-light-primary);
+        background-color: var(--yc-color-base-danger-heavy);
+    }
+}

package/dist/components/UsageLabel/UsageLabel.tsx

@@ -0,0 +1,22 @@
+import cn from 'bem-cn-lite';
+
+import {Label, type LabelProps} from '@gravity-ui/uikit';
+
+const b = cn('ydb-usage-label');
+
+interface UsageLabelProps extends LabelProps {
+    value: number | string;
+    overloadThreshold?: number;
+}
+
+export function UsageLabel({value, overloadThreshold = 90, theme, ...props}: UsageLabelProps) {
+    return (
+        <Label
+            theme={theme}
+            className={b({overload: Number(value) >= overloadThreshold})}
+            {...props}
+        >
+            {value || 0}%
+        </Label>
+    );
+}

package/dist/containers/AsideNavigation/AsideNavigation.tsx

@@ -28,6 +28,7 @@ import {ASIDE_HEADER_COMPACT_KEY, TENANT_INITIAL_PAGE_KEY} from '../../utils/con
 import {getTenantPath} from '../Tenant/TenantPages';
 import {UserSettings} from '../UserSettings/UserSettings';
 
+import i18n from './i18n';
 import './AsideNavigation.scss';
 
 const b = cn('kv-navigation');
@@ -58,15 +59,19 @@ function YbdInternalUser({ydbUser, logout}: YbdInternalUserProps) {
     return (
         <div className={b('internal-user')}>
             <div className={b('user-info-wrapper')}>
-                <div className={b('ydb-internal-user-title')}>YDB user</div>
+                <div className={b('ydb-internal-user-title')}>{i18n('account.user')}</div>
                 {ydbUser && <div className={b('username')}>{ydbUser}</div>}
             </div>
             {ydbUser ? (
-                <Button view="flat-secondary" onClick={logout} title="logout">
+                <Button view="flat-secondary" title={i18n('account.logout')} onClick={logout}>
                     <Icon data={signOutIcon} size={16} />
                 </Button>
             ) : (
-                <Button view="flat-secondary" title="login" onClick={handleLoginClick}>
+                <Button
+                    view="flat-secondary"
+                    title={i18n('account.login')}
+                    onClick={handleLoginClick}
+                >
                     <Icon data={signInIcon} size={16} />
                 </Button>
             )}
@@ -91,7 +96,7 @@ function YdbUserDropdown({isCompact, popupAnchor, ydbUser}: YdbUserDropdownProps
             compact={isCompact}
             item={{
                 id: 'user-popup',
-                title: ydbUser?.login ?? 'Account',
+                title: ydbUser?.login ?? i18n('navigation-item.account'),
                 current: isUserDropdownVisible,
                 icon: iconData,
                 iconSize: 22,
@@ -142,7 +147,7 @@ export const useGetLeftNavigationItems = () => {
         const items: MenuItem[] = [
             {
                 id: TENANT_PAGES_IDS.query,
-                title: 'Query',
+                title: i18n('pages.query'),
                 icon: terminalIcon,
                 iconSize: 20,
                 location: getTenantPath({
@@ -152,7 +157,7 @@ export const useGetLeftNavigationItems = () => {
             },
             {
                 id: TENANT_PAGES_IDS.diagnostics,
-                title: 'Diagnostics',
+                title: i18n('pages.diagnostics'),
                 icon: pulseIcon,
                 iconSize: 20,
                 location: getTenantPath({
@@ -212,7 +217,7 @@ function AsideNavigation(props: AsideNavigationProps) {
                             compact={compact}
                             item={{
                                 id: 'documentation',
-                                title: 'Documentation',
+                                title: i18n('navigation-item.documentation'),
                                 icon: supportIcon,
                                 iconSize: 24,
                                 onItemClick: () => {
@@ -224,7 +229,7 @@ function AsideNavigation(props: AsideNavigationProps) {
                         <FooterItem
                             item={{
                                 id: 'user-settings',
-                                title: 'Settings',
+                                title: i18n('navigation-item.settings'),
                                 icon: settingsIcon,
                                 iconSize: 24,
                                 current: visiblePanel === Panel.UserSettings,

package/dist/containers/AsideNavigation/i18n/en.json

@@ -0,0 +1,13 @@
+{
+  "pages.query": "Query",
+  "pages.diagnostics": "Diagnostics",
+
+  "navigation-item.documentation": "Documentation",
+  "navigation-item.settings": "Settings",
+  "navigation-item.account": "Account",
+
+  "account.user": "YDB User",
+
+  "account.login": "Login",
+  "account.logout": "Logout"
+}

package/dist/containers/AsideNavigation/i18n/index.ts

@@ -0,0 +1,11 @@
+import {i18n, Lang} from '../../../utils/i18n';
+
+import en from './en.json';
+import ru from './ru.json';
+
+const COMPONENT = 'ydb-aside-navigation';
+
+i18n.registerKeyset(Lang.En, COMPONENT, en);
+i18n.registerKeyset(Lang.Ru, COMPONENT, ru);
+
+export default i18n.keyset(COMPONENT);

package/dist/containers/AsideNavigation/i18n/ru.json

@@ -0,0 +1,13 @@
+{
+  "pages.query": "Редактор запросов",
+  "pages.diagnostics": "Диагностика",
+
+  "navigation-item.documentation": "Документация",
+  "navigation-item.settings": "Настройки",
+  "navigation-item.account": "Аккаунт",
+
+  "account.user": "Пользователь YDB",
+
+  "account.login": "Войти",
+  "account.logout": "Выйти"
+}