ydb-embedded-ui 4.10.0 → 4.11.0

package/CHANGELOG.md

@@ -1,5 +1,35 @@
 # Changelog
 
+## [4.11.0](https://github.com/ydb-platform/ydb-embedded-ui/compare/v4.10.1...v4.11.0) (2023-07-27)
+
+
+### Features
+
+* support external objects in schema tree ([#485](https://github.com/ydb-platform/ydb-embedded-ui/issues/485)) ([cf96f9a](https://github.com/ydb-platform/ydb-embedded-ui/commit/cf96f9af02db1352f3990f21f8a84c1282229517))
+
+
+### Bug Fixes
+
+* **ClusterInfo:** change cluster default name ([#478](https://github.com/ydb-platform/ydb-embedded-ui/issues/478)) ([398df6e](https://github.com/ydb-platform/ydb-embedded-ui/commit/398df6e3a5778c245653f61b41ba2e1bd0ea3a51))
+* fix copy schema action ([#483](https://github.com/ydb-platform/ydb-embedded-ui/issues/483)) ([f6b01c3](https://github.com/ydb-platform/ydb-embedded-ui/commit/f6b01c3cc2808337d5597f990f65ff3e7c010b05))
+* **Nodes:** support v2 compute ([#476](https://github.com/ydb-platform/ydb-embedded-ui/issues/476)) ([696d43a](https://github.com/ydb-platform/ydb-embedded-ui/commit/696d43a04109c7fc68986e036e66767593af8d00))
+* **ObjectSummary:** fix issue on object change with active schema tab ([#482](https://github.com/ydb-platform/ydb-embedded-ui/issues/482)) ([b50db5f](https://github.com/ydb-platform/ydb-embedded-ui/commit/b50db5ff742c5c7fc27e292309831b937e5d40bd))
+* **ObjectSummary:** fix wrong tree alignment bug ([#486](https://github.com/ydb-platform/ydb-embedded-ui/issues/486)) ([e8bfe99](https://github.com/ydb-platform/ydb-embedded-ui/commit/e8bfe99657870c735a41d24febaa907ac1383479))
+* **Query:** process null issues error ([#480](https://github.com/ydb-platform/ydb-embedded-ui/issues/480)) ([4c4e684](https://github.com/ydb-platform/ydb-embedded-ui/commit/4c4e6845e539296ecbdefa930bc63d3321f277dc))
+
+## [4.10.1](https://github.com/ydb-platform/ydb-embedded-ui/compare/v4.10.0...v4.10.1) (2023-07-14)
+
+
+### Bug Fixes
+
+* apply design fixes ([#475](https://github.com/ydb-platform/ydb-embedded-ui/issues/475)) ([5e7c9ca](https://github.com/ydb-platform/ydb-embedded-ui/commit/5e7c9caa9f54094a3eb6448d92d43242d3e738dd))
+* **AsideNavigation:** replace query icon ([#466](https://github.com/ydb-platform/ydb-embedded-ui/issues/466)) ([4495eb2](https://github.com/ydb-platform/ydb-embedded-ui/commit/4495eb2634e48feda677c03591b92393ad28981e))
+* **ClusterInfo:** add Databases field ([#474](https://github.com/ydb-platform/ydb-embedded-ui/issues/474)) ([28a9936](https://github.com/ydb-platform/ydb-embedded-ui/commit/28a99364bf5e916381a54a59d4d3f979b35f6eff))
+* **Cluster:** make global scroll ([#470](https://github.com/ydb-platform/ydb-embedded-ui/issues/470)) ([30f8bc5](https://github.com/ydb-platform/ydb-embedded-ui/commit/30f8bc5ce52fceda076d278b1464d413e899ae21))
+* **Cluster:** remove tabs icons and numbers ([#473](https://github.com/ydb-platform/ydb-embedded-ui/issues/473)) ([d2e43d4](https://github.com/ydb-platform/ydb-embedded-ui/commit/d2e43d41759b085f34b7f29f52f3aba60cd0588f))
+* **Query:** rename New Query tab to Query ([#467](https://github.com/ydb-platform/ydb-embedded-ui/issues/467)) ([c3f5585](https://github.com/ydb-platform/ydb-embedded-ui/commit/c3f5585562a204ef0831d0c45766b17c3dc72f82))
+* **TableIndexInfo:** format DataSize ([#468](https://github.com/ydb-platform/ydb-embedded-ui/issues/468)) ([a189b8c](https://github.com/ydb-platform/ydb-embedded-ui/commit/a189b8cf9610f6b1b7b5f4c01896eda5f8347ebf))
+
 ## [4.10.0](https://github.com/ydb-platform/ydb-embedded-ui/compare/v4.9.0...v4.10.0) (2023-07-07)
 
 

package/dist/components/InfoViewer/formatters/schema.ts

@@ -1,4 +1,5 @@
-import {TIndexDescription} from '../../../types/api/schema';
+import type {TIndexDescription} from '../../../types/api/schema';
+import {toFormattedSize} from '../../FormattedBytes/utils';
 
 import {createInfoFormatter} from '../utils';
 
@@ -8,6 +9,7 @@ export const formatTableIndexItem = createInfoFormatter<TIndexDescription>({
         State: (value) => value?.substring(11), // trims EIndexState prefix
         KeyColumnNames: (value) => value?.join(', '),
         DataColumnNames: (value) => value?.join(', '),
+        DataSize: toFormattedSize,
     },
     labels: {
         KeyColumnNames: 'Columns',

package/dist/components/QueryResultTable/Cell/Cell.tsx

@@ -11,16 +11,16 @@ interface CellProps {
 }
 
 export const Cell = React.memo(function Cell(props: CellProps) {
-    const {
-        className,
-        value,
-    } = props;
+    const {className, value} = props;
 
     const dispatch = useDispatch();
 
-    useEffect(() => () => {
-        dispatch(hideTooltip());
-    }, [dispatch]);
+    useEffect(
+        () => () => {
+            dispatch(hideTooltip());
+        },
+        [dispatch],
+    );
 
     return (
         <span
@@ -29,5 +29,5 @@ export const Cell = React.memo(function Cell(props: CellProps) {
         >
             {value}
         </span>
-    )
+    );
 });

package/dist/components/QueryResultTable/i18n/en.json

@@ -1,3 +1,3 @@
 {
-    "empty": "Table is empty"
+  "empty": "Table is empty"
 }

package/dist/components/QueryResultTable/i18n/ru.json

@@ -1,3 +1,3 @@
 {
-    "empty": "Таблица пустая"
+  "empty": "Таблица пустая"
 }

package/dist/components/ShortyString/ShortyString.tsx

@@ -33,18 +33,15 @@ export default function ShortyString({
     const [expanded, setExpanded] = React.useState(false);
 
     const toggleLabelAction = expanded ? collapseLabel : expandLabel;
-    const toggleLabelSymbolsCount = displayLength && !expanded
-        ? i18n('chars_count', {count: value.length})
-        : '';
+    const toggleLabelSymbolsCount =
+        displayLength && !expanded ? i18n('chars_count', {count: value.length}) : '';
     const toggleLabel = toggleLabelAction + toggleLabelSymbolsCount;
 
     // showing toogle button with a label that is longer than the hidden part is pointless,
     // hence compare to limit + length in the not-strict mode
     const hasToggle = value.length > limit + (strict ? 0 : toggleLabel.length);
 
-    const text = expanded || !hasToggle
-        ? value
-        : value.slice(0, limit - 4) + '\u00a0...';
+    const text = expanded || !hasToggle ? value : value.slice(0, limit - 4) + '\u00a0...';
 
     return (
         <div className={block()}>

package/dist/components/ShortyString/i18n/en.json

@@ -1,10 +1,10 @@
 {
-    "default_collapse_label": "Show less",
-    "default_expand_label": "Show more",
-    "chars_count": [
-        " ({{count}} symbol)",
-        " ({{count}} symbols)",
-        " ({{count}} symbols)",
-        " ({{count}} symbols)"
-    ]
+  "default_collapse_label": "Show less",
+  "default_expand_label": "Show more",
+  "chars_count": [
+    " ({{count}} symbol)",
+    " ({{count}} symbols)",
+    " ({{count}} symbols)",
+    " ({{count}} symbols)"
+  ]
 }

package/dist/components/ShortyString/i18n/ru.json

@@ -1,10 +1,10 @@
 {
-    "default_collapse_label": "Показать меньше",
-    "default_expand_label": "Показать ещё",
-    "chars_count": [
-        " ({{count}} символ)",
-        " ({{count}} символа)",
-        " ({{count}} символов)",
-        " ({{count}} символов)"
-    ]
+  "default_collapse_label": "Показать меньше",
+  "default_expand_label": "Показать ещё",
+  "chars_count": [
+    " ({{count}} символ)",
+    " ({{count}} символа)",
+    " ({{count}} символов)",
+    " ({{count}} символов)"
+  ]
 }

package/dist/components/SpeedMultiMeter/i18n/index.ts

@@ -9,5 +9,3 @@ i18n.registerKeyset(Lang.En, COMPONENT, en);
 i18n.registerKeyset(Lang.Ru, COMPONENT, ru);
 
 export default i18n.keyset(COMPONENT);
-
-

package/dist/components/Stack/Stack.tsx

@@ -13,23 +13,23 @@ const b = cn('stack');
 
 export const Stack: React.FC<StackProps> = ({children, className}) => (
     <div className={b(null, className)}>
-        {
-            React.Children.map(children, (child, index) => {
-                if (!React.isValidElement(child)) {
-                    return null;
-                }
+        {React.Children.map(children, (child, index) => {
+            if (!React.isValidElement(child)) {
+                return null;
+            }
 
-                return (
-                    <div
-                        className={b('layer')}
-                        style={{
+            return (
+                <div
+                    className={b('layer')}
+                    style={
+                        {
                             [LAYER_CSS_VAR]: index,
-                        } as React.CSSProperties}
-                    >
-                        {child}
-                    </div>
-                );
-            })
-        }
+                        } as React.CSSProperties
+                    }
+                >
+                    {child}
+                </div>
+            );
+        })}
     </div>
 );

package/dist/components/TableSkeleton/TableSkeleton.tsx

@@ -1,6 +1,6 @@
-import { FC } from 'react';
+import {FC} from 'react';
 import block from 'bem-cn-lite';
-import { Skeleton } from '@gravity-ui/uikit';
+import {Skeleton} from '@gravity-ui/uikit';
 
 import './TableSkeleton.scss';
 
@@ -11,7 +11,7 @@ interface TableSkeletonProps {
     rows?: number;
 }
 
-export const TableSkeleton: FC<TableSkeletonProps> = ({ rows = 2, className }) => (
+export const TableSkeleton: FC<TableSkeletonProps> = ({rows = 2, className}) => (
     <div className={b(null, className)}>
         <div className={b('row')}>
             <Skeleton className={b('col-1')} />

package/dist/components/TableWithControlsLayout/TableWithControlsLayout.scss

@@ -0,0 +1,32 @@
+@import '../../styles/mixins.scss';
+
+.ydb-table-with-controls-layout {
+    display: inline-block;
+
+    box-sizing: border-box;
+    min-width: 100%;
+
+    &__controls-wrapper {
+        z-index: 3;
+
+        box-sizing: border-box;
+        width: 100%;
+
+        @include sticky-top();
+    }
+
+    &__controls {
+        z-index: 3;
+
+        width: max-content;
+        height: 62px;
+
+        @include controls();
+        @include sticky-top();
+    }
+
+    .data-table__sticky_moving {
+        // Place table head right after controls
+        top: 62px !important;
+    }
+}

package/dist/components/TableWithControlsLayout/TableWithControlsLayout.tsx

@@ -0,0 +1,43 @@
+import type {ReactNode} from 'react';
+import block from 'bem-cn-lite';
+
+import {TableSkeleton} from '../TableSkeleton/TableSkeleton';
+
+import './TableWithControlsLayout.scss';
+
+const b = block('ydb-table-with-controls-layout');
+
+interface TableWithControlsLayoutItemProps {
+    children: ReactNode;
+    className?: string;
+}
+
+interface TableProps extends TableWithControlsLayoutItemProps {
+    loading?: boolean;
+}
+
+export const TableWithControlsLayout = ({
+    children,
+    className,
+}: TableWithControlsLayoutItemProps) => {
+    return <div className={b(null, className)}>{children}</div>;
+};
+
+TableWithControlsLayout.Controls = function TableControls({
+    children,
+    className,
+}: TableWithControlsLayoutItemProps) {
+    return (
+        <div className={b('controls-wrapper')}>
+            <div className={b('controls', className)}>{children}</div>
+        </div>
+    );
+};
+
+TableWithControlsLayout.Table = function Table({children, loading, className}: TableProps) {
+    if (loading) {
+        return <TableSkeleton className={b('loader')} />;
+    }
+
+    return <div className={b('table', className)}>{children}</div>;
+};

package/dist/containers/AsideNavigation/AsideNavigation.tsx

@@ -7,7 +7,7 @@ import cn from 'bem-cn-lite';
 import {Icon, Button} from '@gravity-ui/uikit';
 import {AsideHeader, MenuItem as AsideHeaderMenuItem, FooterItem} from '@gravity-ui/navigation';
 
-import squareChartBarIcon from '@gravity-ui/icons/svgs/square-chart-bar.svg';
+import terminalIcon from '@gravity-ui/icons/svgs/terminal.svg';
 import pulseIcon from '@gravity-ui/icons/svgs/pulse.svg';
 
 import signOutIcon from '../../assets/icons/signOut.svg';
@@ -141,7 +141,7 @@ export const useGetLeftNavigationItems = () => {
             {
                 id: TENANT_PAGES_IDS.query,
                 title: 'Query',
-                icon: squareChartBarIcon,
+                icon: terminalIcon,
                 iconSize: 20,
                 location: getTenantPath({
                     ...queryParams,

package/dist/containers/Cluster/Cluster.scss

@@ -5,13 +5,12 @@
     flex-grow: 1;
 
     height: 100%;
-    padding: 20px 20px 0px;
+    padding: 0 20px;
 
     @include flex-container();
 
-    &__content {
-        overflow: auto;
-
-        height: 100%;
+    &__tabs {
+        position: sticky;
+        left: 0;
     }
 }

package/dist/containers/Cluster/Cluster.tsx

@@ -118,20 +118,6 @@ function Cluster({
         }
     };
 
-    const getTabEntityCount = (tabId: ClusterTab) => {
-        switch (tabId) {
-            case clusterTabsIds.tenants: {
-                return cluster?.Tenants ? Number(cluster.Tenants) : undefined;
-            }
-            case clusterTabsIds.nodes: {
-                return cluster?.NodesTotal ? Number(cluster.NodesTotal) : undefined;
-            }
-            default: {
-                return undefined;
-            }
-        }
-    };
-
     return (
         <div className={b()}>
             <ClusterInfo
@@ -142,17 +128,12 @@ function Cluster({
                 additionalClusterProps={additionalClusterProps}
             />
 
-            <div>
+            <div className={b('tabs')}>
                 <Tabs
                     size="l"
                     allowNotSelected={true}
                     activeTab={activeTab as string}
-                    items={clusterTabs.map((item) => {
-                        return {
-                            ...item,
-                            counter: getTabEntityCount(item.id),
-                        };
-                    })}
+                    items={clusterTabs}
                     wrapTo={({id}, node) => {
                         const path = getClusterPath(id as ClusterTab, queryParams);
                         return (
@@ -164,7 +145,7 @@ function Cluster({
                 />
             </div>
 
-            <div className={b('content')}>{renderTab()}</div>
+            <div>{renderTab()}</div>
         </div>
     );
 }

package/dist/containers/Cluster/ClusterInfo/ClusterInfo.scss

@@ -1,7 +1,11 @@
 @import '../../../styles/mixins';
 
 .cluster-info {
+    position: sticky;
+    left: 0;
+
     width: 100%;
+    padding-top: 20px;
 
     &__header {
         display: flex;

package/dist/containers/Cluster/ClusterInfo/ClusterInfo.tsx

@@ -18,7 +18,11 @@ import type {TClusterInfo} from '../../../types/api/cluster';
 import {backend, customBackend} from '../../../store';
 import {formatStorageValues} from '../../../utils';
 import {useSetting, useTypedSelector} from '../../../utils/hooks';
-import {CLUSTER_INFO_HIDDEN_KEY, DEVELOPER_UI} from '../../../utils/constants';
+import {
+    CLUSTER_DEFAULT_TITLE,
+    CLUSTER_INFO_HIDDEN_KEY,
+    DEVELOPER_UI_TITLE,
+} from '../../../utils/constants';
 
 import {VersionsBar} from '../VersionsBar/VersionsBar';
 import {ClusterInfoSkeleton} from '../ClusterInfoSkeleton/ClusterInfoSkeleton';
@@ -57,6 +61,13 @@ const getInfo = (
         });
     }
 
+    if (cluster.Tenants) {
+        info.push({
+            label: 'Databases',
+            value: cluster.Tenants,
+        });
+    }
+
     info.push(
         {
             label: 'Nodes',
@@ -141,7 +152,7 @@ export const ClusterInfo = ({
     const {info = [], links = []} = additionalClusterProps;
 
     const clusterInfo = getInfo(cluster, versionsValues, info, [
-        {title: DEVELOPER_UI, url: internalLink},
+        {title: DEVELOPER_UI_TITLE, url: internalLink},
         ...links,
     ]);
 
@@ -166,7 +177,7 @@ export const ClusterInfo = ({
             <EntityStatus
                 size="m"
                 status={cluster?.Overall}
-                name={cluster?.Name ?? 'Unknown cluster'}
+                name={cluster?.Name ?? CLUSTER_DEFAULT_TITLE}
                 className={b('title')}
             />
         );

package/dist/containers/Cluster/ClusterInfoSkeleton/ClusterInfoSkeleton.tsx

@@ -18,7 +18,7 @@ interface ClusterInfoSkeletonProps {
     rows?: number;
 }
 
-export const ClusterInfoSkeleton = ({rows = 6, className}: ClusterInfoSkeletonProps) => (
+export const ClusterInfoSkeleton = ({rows = 7, className}: ClusterInfoSkeletonProps) => (
     <div className={b(null, className)}>
         {[...new Array(rows)].map((_, index) => (
             <div className={b('row')} key={`skeleton-row-${index}`}>

package/dist/containers/Cluster/utils.tsx

@@ -1,10 +1,3 @@
-import {Icon} from '@gravity-ui/uikit';
-import cubes3Icon from '@gravity-ui/icons/svgs/cubes-3.svg';
-import databasesIcon from '@gravity-ui/icons/svgs/databases.svg';
-import hardDriveIcon from '@gravity-ui/icons/svgs/hard-drive.svg';
-
-import versionsIcon from '../../assets/icons/versions.svg';
-
 import type {ValueOf} from '../../types/common';
 import routes, {createHref} from '../../routes';
 
@@ -20,22 +13,18 @@ export type ClusterTab = ValueOf<typeof clusterTabsIds>;
 const tenants = {
     id: clusterTabsIds.tenants,
     title: 'Databases',
-    icon: <Icon data={databasesIcon} />,
 };
 const nodes = {
     id: clusterTabsIds.nodes,
     title: 'Nodes',
-    icon: <Icon data={cubes3Icon} />,
 };
 const storage = {
     id: clusterTabsIds.storage,
     title: 'Storage',
-    icon: <Icon data={hardDriveIcon} />,
 };
 const versions = {
     id: clusterTabsIds.versions,
     title: 'Versions',
-    icon: <Icon data={versionsIcon} />,
 };
 
 export const clusterTabs = [tenants, nodes, storage, versions];

package/dist/containers/Header/Header.scss

@@ -6,14 +6,10 @@
     justify-content: space-between;
     align-items: center;
 
-    padding: 0 20px 0 18px;
-
-    font-weight: 600;
+    padding: 0 20px 0 12px;
 
     border-bottom: 1px solid var(--yc-color-line-generic);
 
-    @include body2-typography;
-
     &__breadcrumb {
         display: flex;
         align-items: center;

package/dist/containers/Header/Header.tsx

@@ -10,7 +10,7 @@ import {ExternalLinkWithIcon} from '../../components/ExternalLinkWithIcon/Extern
 import {backend, customBackend} from '../../store';
 import {getClusterInfo} from '../../store/reducers/cluster/cluster';
 import {useTypedSelector} from '../../utils/hooks';
-import {DEVELOPER_UI} from '../../utils/constants';
+import {DEVELOPER_UI_TITLE} from '../../utils/constants';
 import {parseQuery} from '../../routes';
 
 import {RawBreadcrumbItem, getBreadcrumbs} from './breadcrumbs';
@@ -105,7 +105,7 @@ function Header({mainPage}: HeaderProps) {
                 </div>
 
                 <ExternalLinkWithIcon
-                    title={DEVELOPER_UI}
+                    title={DEVELOPER_UI_TITLE}
                     url={getInternalLink(singleClusterMode)}
                 />
             </header>

package/dist/containers/Header/breadcrumbs.ts

@@ -16,6 +16,7 @@ import {
     TENANT_PAGES_IDS,
 } from '../../store/reducers/tenant/constants';
 import routes, {createHref} from '../../routes';
+import {CLUSTER_DEFAULT_TITLE} from '../../utils/constants';
 
 import {getClusterPath} from '../Cluster/utils';
 import {TenantTabsGroups, getTenantPath} from '../Tenant/TenantPages';
@@ -39,7 +40,7 @@ const getClusterBreadcrumbs = (
 
     return [
         {
-            text: clusterName || 'Cluster',
+            text: clusterName || CLUSTER_DEFAULT_TITLE,
             link: getClusterPath(clusterTab, query),
             icon: nodesRightIcon,
         },

package/dist/containers/Heatmap/Heatmap.tsx

@@ -4,13 +4,14 @@ import cn from 'bem-cn-lite';
 
 import {Checkbox, Select} from '@gravity-ui/uikit';
 
+import type {IHeatmapMetricValue} from '../../types/store/heatmap';
 import {getTabletsInfo, setHeatmapOptions} from '../../store/reducers/heatmap';
 import {showTooltip, hideTooltip} from '../../store/reducers/tooltip';
 import {formatNumber} from '../../utils';
-import {prepareQueryError} from '../../utils/query';
 import {useAutofetcher, useTypedSelector} from '../../utils/hooks';
+
 import {Loader} from '../../components/Loader';
-import type {IHeatmapMetricValue} from '../../types/store/heatmap';
+import {ResponseError} from '../../components/Errors/ResponseError';
 
 import {COLORS_RANGE_SIZE, getColorRange, getColorIndex, getCurrentMetricLimits} from './util';
 import {HeatmapCanvas} from './HeatmapCanvas/HeatmapCanvas';
@@ -196,7 +197,7 @@ export const Heatmap = ({path}: HeatmapProps) => {
     }
 
     if (error) {
-        return <div>{prepareQueryError(error)}</div>;
+        return <ResponseError error={error} />;
     }
 
     return renderContent();

package/dist/containers/Node/NodeStructure/PDiskTitleBadge.tsx

@@ -12,14 +12,8 @@ interface PDiskTitleBadgeProps {
 export function PDiskTitleBadge({label, value, className}: PDiskTitleBadgeProps) {
     return (
         <span className={b('pdisk-title-item', className)}>
-            {label && (
-                <span className={b('pdisk-title-item-label')}>
-                    {label}:
-                </span>
-            )}
-            <span className={b('pdisk-title-item-value')}>
-                {value}
-            </span>
+            {label && <span className={b('pdisk-title-item-label')}>{label}:</span>}
+            <span className={b('pdisk-title-item-value')}>{value}</span>
         </span>
     );
 }

package/dist/containers/Nodes/Nodes.scss

@@ -1,21 +1,10 @@
 @import '../../styles/mixins.scss';
 
 .ydb-nodes {
-    overflow: auto;
-    flex-grow: 1;
-
-    height: 100%;
-
-    @include flex-container();
-
     &__search {
         @include search();
     }
 
-    &__controls {
-        @include controls();
-    }
-
     &__show-all-wrapper {
         position: sticky;
         left: 0;
@@ -23,19 +12,7 @@
         margin-bottom: 15px;
     }
 
-    &__table-wrapper {
-        overflow: auto;
-        @include flex-container();
-    }
-
-    &__table-content {
-        overflow: auto;
-
-        height: 100%;
-
-        @include freeze-nth-column(1);
-        @include freeze-nth-column(2, 80px);
-
+    &__table {
         @include table-styles;
         @include table-sticky-styles;
     }