ydb-embedded-ui 4.10.0 → 4.10.1

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # Changelog
 
+## [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/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

@@ -57,6 +57,13 @@ const getInfo = (
         });
     }
 
+    if (cluster.Tenants) {
+        info.push({
+            label: 'Databases',
+            value: cluster.Tenants,
+        });
+    }
+
     info.push(
         {
             label: 'Nodes',

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/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;
     }

package/dist/containers/Nodes/Nodes.tsx

@@ -9,11 +9,12 @@ import type {ProblemFilterValue} from '../../store/reducers/settings/types';
 
 import {AccessDenied} from '../../components/Errors/403';
 import {Illustration} from '../../components/Illustration';
-import {Loader} from '../../components/Loader';
 import {Search} from '../../components/Search';
 import {ProblemFilter} from '../../components/ProblemFilter';
 import {UptimeFilter} from '../../components/UptimeFIlter';
 import {EntitiesCount} from '../../components/EntitiesCount';
+import {TableWithControlsLayout} from '../../components/TableWithControlsLayout/TableWithControlsLayout';
+import {ResponseError} from '../../components/Errors/ResponseError';
 
 import {DEFAULT_TABLE_SETTINGS, USE_NODES_ENDPOINT_IN_DIAGNOSTICS_KEY} from '../../utils/constants';
 import {useAutofetcher, useSetting, useTypedSelector} from '../../utils/hooks';
@@ -21,12 +22,12 @@ import {AdditionalNodesInfo, isUnavailableNode, NodesUptimeFilterValues} from '.
 
 import {
     getNodes,
-    getFilteredPreparedNodesList,
     setNodesUptimeFilter,
     setSearchValue,
     resetNodesState,
     getComputeNodes,
 } from '../../store/reducers/nodes/nodes';
+import {selectFilteredNodes} from '../../store/reducers/nodes/selectors';
 import {changeFilter, ProblemFilterValues} from '../../store/reducers/settings/settings';
 
 import {isDatabaseEntityType} from '../Tenant/utils/schema';
@@ -42,11 +43,10 @@ const b = cn('ydb-nodes');
 interface NodesProps {
     path?: string;
     type?: EPathType;
-    className?: string;
     additionalNodesInfo?: AdditionalNodesInfo;
 }
 
-export const Nodes = ({path, type, className, additionalNodesInfo = {}}: NodesProps) => {
+export const Nodes = ({path, type, additionalNodesInfo = {}}: NodesProps) => {
     const dispatch = useDispatch();
 
     const isClusterNodes = !path;
@@ -63,7 +63,7 @@ export const Nodes = ({path, type, className, additionalNodesInfo = {}}: NodesPr
     const problemFilter = useTypedSelector((state) => state.settings.problemFilter);
     const {autorefresh} = useTypedSelector((state) => state.schema);
 
-    const nodes = useTypedSelector(getFilteredPreparedNodesList);
+    const nodes = useTypedSelector(selectFilteredNodes);
 
     const [useNodesEndpoint] = useSetting(USE_NODES_ENDPOINT_IN_DIAGNOSTICS_KEY);
 
@@ -93,7 +93,7 @@ export const Nodes = ({path, type, className, additionalNodesInfo = {}}: NodesPr
 
     const renderControls = () => {
         return (
-            <div className={b('controls')}>
+            <>
                 <Search
                     onChange={handleSearchQueryChange}
                     placeholder="Host name"
@@ -108,7 +108,7 @@ export const Nodes = ({path, type, className, additionalNodesInfo = {}}: NodesPr
                     label={'Nodes'}
                     loading={loading && !wasLoaded}
                 />
-            </div>
+            </>
         );
     };
 
@@ -127,44 +127,34 @@ export const Nodes = ({path, type, className, additionalNodesInfo = {}}: NodesPr
         }
 
         return (
-            <div className={b('table-wrapper')}>
-                <div className={b('table-content')}>
-                    <DataTable
-                        theme="yandex-cloud"
-                        data={nodes || []}
-                        columns={columns}
-                        settings={DEFAULT_TABLE_SETTINGS}
-                        initialSortOrder={{
-                            columnId: 'NodeId',
-                            order: DataTable.ASCENDING,
-                        }}
-                        emptyDataMessage={i18n('empty.default')}
-                        rowClassName={(row) => b('node', {unavailable: isUnavailableNode(row)})}
-                    />
-                </div>
-            </div>
+            <DataTable
+                theme="yandex-cloud"
+                data={nodes || []}
+                columns={columns}
+                settings={DEFAULT_TABLE_SETTINGS}
+                initialSortOrder={{
+                    columnId: 'NodeId',
+                    order: DataTable.ASCENDING,
+                }}
+                emptyDataMessage={i18n('empty.default')}
+                rowClassName={(row) => b('node', {unavailable: isUnavailableNode(row)})}
+            />
         );
     };
 
-    const renderContent = () => {
-        return (
-            <div className={b(null, className)}>
-                {renderControls()}
-                {renderTable()}
-            </div>
-        );
-    };
-
-    if (loading && !wasLoaded) {
-        return <Loader size={isClusterNodes ? 'l' : 'm'} />;
-    }
-
     if (error) {
         if (error.status === 403) {
             return <AccessDenied />;
         }
-        return <div>{error.statusText}</div>;
+        return <ResponseError error={error} />;
     }
 
-    return renderContent();
+    return (
+        <TableWithControlsLayout>
+            <TableWithControlsLayout.Controls>{renderControls()}</TableWithControlsLayout.Controls>
+            <TableWithControlsLayout.Table loading={loading && !wasLoaded} className={b('table')}>
+                {renderTable()}
+            </TableWithControlsLayout.Table>
+        </TableWithControlsLayout>
+    );
 };

package/dist/containers/Storage/Storage.scss

@@ -1,24 +1,11 @@
 @import '../../styles/mixins.scss';
 
 .global-storage {
-    height: 100%;
-    max-height: 100%;
-    @include flex-container;
-
-    &__controls {
-        @include controls();
-    }
     &__search {
         @include search();
     }
 
-    &__table-wrapper {
-        overflow: auto;
-        flex-grow: 1;
-
-        font-size: var(--yc-text-body-2-font-size);
-        line-height: var(--yc-text-body-2-line-height);
-
+    &__table {
         .yc-tooltip {
             // stylelint-disable-next-line declaration-no-important
             height: var(--yc-text-body-2-line-height) !important;

package/dist/containers/Storage/Storage.tsx

@@ -5,10 +5,11 @@ import cn from 'bem-cn-lite';
 import DataTable, {Settings} from '@gravity-ui/react-data-table';
 
 import {Search} from '../../components/Search';
-import {TableSkeleton} from '../../components/TableSkeleton/TableSkeleton';
 import {UptimeFilter} from '../../components/UptimeFIlter';
 import {AccessDenied} from '../../components/Errors/403';
 import {EntitiesCount} from '../../components/EntitiesCount';
+import {TableWithControlsLayout} from '../../components/TableWithControlsLayout/TableWithControlsLayout';
+import {ResponseError} from '../../components/Errors/ResponseError';
 
 import type {StorageType, VisibleEntities} from '../../store/reducers/storage/types';
 import {
@@ -37,7 +38,7 @@ import {DEFAULT_TABLE_SETTINGS} from '../../utils/constants';
 import {StorageGroups} from './StorageGroups/StorageGroups';
 import {StorageNodes} from './StorageNodes/StorageNodes';
 import {StorageTypeFilter} from './StorageTypeFilter/StorageTypeFilter';
-import {StorageVisibleEntityFilter} from './StorageVisibleEntityFilter/StorageVisibleEntityFilter';
+import {StorageVisibleEntitiesFilter} from './StorageVisibleEntitiesFilter/StorageVisibleEntitiesFilter';
 import {UsageFilter} from './UsageFilter';
 
 import './Storage.scss';
@@ -137,13 +138,9 @@ export const Storage = ({additionalNodesInfo, tenant, nodeId}: StorageProps) =>
         handleUptimeFilterChange(NodesUptimeFilterValues.All);
     };
 
-    const renderLoader = () => {
-        return <TableSkeleton className={b('loader')} />;
-    };
-
     const renderDataTable = () => {
         return (
-            <div className={b('table-wrapper')}>
+            <>
                 {storageType === STORAGE_TYPES.groups && (
                     <StorageGroups
                         visibleEntities={visibleEntities}
@@ -163,7 +160,7 @@ export const Storage = ({additionalNodesInfo, tenant, nodeId}: StorageProps) =>
                         additionalNodesInfo={additionalNodesInfo}
                     />
                 )}
-            </div>
+            </>
         );
     };
 
@@ -185,7 +182,7 @@ export const Storage = ({additionalNodesInfo, tenant, nodeId}: StorageProps) =>
 
     const renderControls = () => {
         return (
-            <div className={b('controls')}>
+            <>
                 <div className={b('search')}>
                     <Search
                         placeholder={
@@ -199,7 +196,7 @@ export const Storage = ({additionalNodesInfo, tenant, nodeId}: StorageProps) =>
                 </div>
 
                 <StorageTypeFilter value={storageType} onChange={handleStorageTypeChange} />
-                <StorageVisibleEntityFilter
+                <StorageVisibleEntitiesFilter
                     value={visibleEntities}
                     onChange={handleGroupVisibilityChange}
                 />
@@ -217,24 +214,24 @@ export const Storage = ({additionalNodesInfo, tenant, nodeId}: StorageProps) =>
                     />
                 )}
                 {renderEntitiesCount()}
-            </div>
+            </>
         );
     };
 
-    const showLoader = loading && !wasLoaded;
-
     if (error) {
         if (error.status === 403) {
             return <AccessDenied />;
         }
 
-        return <div className={b()}>{error.statusText}</div>;
+        return <ResponseError error={error} />;
     }
 
     return (
-        <div className={b()}>
-            {renderControls()}
-            {showLoader ? renderLoader() : renderDataTable()}
-        </div>
+        <TableWithControlsLayout>
+            <TableWithControlsLayout.Controls>{renderControls()}</TableWithControlsLayout.Controls>
+            <TableWithControlsLayout.Table loading={loading && !wasLoaded} className={b('table')}>
+                {renderDataTable()}
+            </TableWithControlsLayout.Table>
+        </TableWithControlsLayout>
     );
 };

package/dist/containers/Storage/StorageTypeFilter/StorageTypeFilter.tsx

@@ -13,9 +13,11 @@ interface StorageTypeFilterProps {
     onChange: (value: string) => void;
 }
 
+const storageTypeFilterQa = 'storage-type-filter';
+
 export const StorageTypeFilter = ({value, onChange}: StorageTypeFilterProps) => {
     return (
-        <RadioButton value={value} onUpdate={onChange}>
+        <RadioButton value={value} onUpdate={onChange} qa={storageTypeFilterQa}>
             <RadioButton.Option value={STORAGE_TYPES.groups}>
                 {StorageTypesTitles[STORAGE_TYPES.groups]}
             </RadioButton.Option>

package/dist/containers/Storage/{StorageVisibleEntityFilter/StorageVisibleEntityFilter.tsx → StorageVisibleEntitiesFilter/StorageVisibleEntitiesFilter.tsx}

@@ -14,9 +14,11 @@ interface StorageProblemFilterProps {
     onChange: (value: string) => void;
 }
 
-export const StorageVisibleEntityFilter = ({value, onChange}: StorageProblemFilterProps) => {
+const storageVisibleEntitiesFilterQa = 'storage-visible-entities-filter';
+
+export const StorageVisibleEntitiesFilter = ({value, onChange}: StorageProblemFilterProps) => {
     return (
-        <RadioButton value={value} onUpdate={onChange}>
+        <RadioButton value={value} onUpdate={onChange} qa={storageVisibleEntitiesFilterQa}>
             <RadioButton.Option value={VISIBLE_ENTITIES.missing}>
                 {VisibleEntitiesTitles[VISIBLE_ENTITIES.missing]}
             </RadioButton.Option>

package/dist/containers/Tenant/Diagnostics/Diagnostics.scss

@@ -39,11 +39,15 @@
         width: 100%;
         padding: 0 20px;
 
-        & .global-storage,
-        & .ydb-nodes {
+        .ydb-table-with-controls-layout {
             &__controls {
+                height: 46px;
                 padding-top: 0;
             }
+
+            .data-table__sticky_moving {
+                top: 46px !important;
+            }
         }
     }
 }

package/dist/containers/Tenant/ObjectSummary/ObjectSummary.scss

@@ -26,7 +26,7 @@
 
     &__action-button {
         position: absolute;
-        top: 8px; // centered relative to the heading
+        top: 19px; // centered relative to the heading
         right: 5px; // centered relative to the collapsed panel
 
         background-color: var(--yc-color-base-background);
@@ -51,20 +51,11 @@
         flex: 1 1 auto;
 
         height: 100%;
-        padding: 0 12px 12px;
+        padding: 0 12px 12px 16px;
     }
 
     &__tree-header {
-        display: flex;
-        flex: 0 0 auto;
-        justify-content: space-between;
-        align-items: center;
-
-        padding: 12px 12px 8px;
-    }
-
-    &__tree-title {
-        font-weight: 600;
+        padding: 23px 12px 17px 20px;
     }
 
     &__sticky-top {