ydb-embedded-ui 1.6.4 → 1.8.0

package/CHANGELOG.md

@@ -1,5 +1,34 @@
 # Changelog
 
+## [1.8.0](https://github.com/ydb-platform/ydb-embedded-ui/compare/v1.7.1...v1.8.0) (2022-07-05)
+
+
+### Features
+
+* add Illustration component ([7d10880](https://github.com/ydb-platform/ydb-embedded-ui/commit/7d10880cd4d9f945e7c8a7232327d8db68f0865c))
+* **Tenant:** proper 403 error page ([d822a2b](https://github.com/ydb-platform/ydb-embedded-ui/commit/d822a2b6e3e18c24882ecf30db399087053b83b3))
+
+
+### Bug Fixes
+
+* fix empty state illustration layout ([7cfd97e](https://github.com/ydb-platform/ydb-embedded-ui/commit/7cfd97e13ebcaa703478bd7b4e29774150bd569e))
+
+## [1.7.1](https://github.com/ydb-platform/ydb-embedded-ui/compare/v1.7.0...v1.7.1) (2022-07-05)
+
+
+### Performance Improvements
+
+* **Tenant:** use api call viewer/json/acl instead of metainfo ([c3603c4](https://github.com/ydb-platform/ydb-embedded-ui/commit/c3603c4b364cef79cb4790c7e9e4378d5b66e0ed))
+
+## [1.7.0](https://github.com/ydb-platform/ydb-embedded-ui/compare/v1.6.4...v1.7.0) (2022-06-29)
+
+
+### Features
+
+* **Storage:** show total groups count ([5e31cfe](https://github.com/ydb-platform/ydb-embedded-ui/commit/5e31cfee9edc50fa4bc0770c443b136291a3536e))
+* **Storage:** show total nodes count ([b438f70](https://github.com/ydb-platform/ydb-embedded-ui/commit/b438f7075961e878a1412ca185743c4374dd9178))
+* **Tenant:** display tables indexes ([693a100](https://github.com/ydb-platform/ydb-embedded-ui/commit/693a1001db6487b2d43aeca7d8168afcd06f5cbd))
+
 ## [1.6.4](https://github.com/ydb-platform/ydb-embedded-ui/compare/v1.6.3...v1.6.4) (2022-06-24)
 
 

package/dist/assets/illustrations/dark/403.svg

@@ -0,0 +1 @@
+<svg width="349" height="356" fill="none" xmlns="http://www.w3.org/2000/svg"><g opacity=".8"><path d="M275.008 84.928c0 24.7-9.9 83.9-9.9 117.1 0 33.2 0 106.3-27.8 134.1-27.8 27.8-61.9 16.1-61.9 16.1s-46.7 13-76.3-14.8c-29.6-27.8-60.1-83.5-69.1-115.3-9.9-35-26.5-49.3-27.8-56.5-1.3-7.2 3.6-12.1 12.1-12.6 8.5-.4 22.9 4 34.5 22 11.6 18 17.5 26 23.8 35.9 6.3 9.9 20.6 23.3 20.6 23.3s.4-44.9 1.3-64.1c.9-19.3-1.8-111.7 1.8-132.3 3.6-20.6 26.5-20.2 28.7-4 2.2 16.1 8.8 66.8 9.8 79.8s3.7 44.4 3.7 44.4l7.6-2.7s-.9-105.8-.9-132.9c0-29.2 28.7-29.2 32.3-4 3.6 25.2 6.7 142.8 6.7 142.8l6.7 2.7s2.2-111.7 5.8-129.6c3.6-17.9 26.5-17.5 30.1 4.9 3.6 22.4 1.3 72.2.9 94.2s-.9 43.5-.9 43.5l5.4 4s11-73.3 14.4-99.1c3.7-27.8 28.4-21.5 28.4 3.1z" fill="#fff" fill-opacity=".07"/><path d="M279.207 266.428l-216.9 12c-7.3.4-13.3-5.2-13.3-12.5v-167.4c0-7.3 6-12.9 13.3-12.5l216.9 12c5.6.3 10.1 5.7 10.1 12v144.4c0 6.3-4.5 11.7-10.1 12z" fill="#FF4645"/><path d="M191.308 139.226l-32.3-1.4c-1.9-.1-3.8.6-5.2 1.9l-24.3 22.8c-1.4 1.3-2.2 3.2-2.2 5.2v33.7c0 2 .8 3.8 2.2 5.2l24.3 22.8c1.4 1.3 3.3 2 5.2 1.9l32.3-1.4c1.8-.1 3.6-.9 4.9-2.2l21.5-22.8c1.2-1.3 1.9-3.1 1.9-4.9v-31c0-1.8-.7-3.6-1.9-4.9l-21.5-22.8c-1.3-1.3-3.1-2.1-4.9-2.1z" fill="#fff"/><path d="M203.408 195.526l-58.1.6c-1.6 0-3-1.3-3-3v-17.2c0-1.6 1.3-3 3-3l58.1.6c1.6 0 2.9 1.3 2.9 3v16c0 1.7-1.3 3-2.9 3z" fill="#FF4645"/><path fill-rule="evenodd" clip-rule="evenodd" d="M74.707 103.727c0 3.4-2.7 6-6.1 5.8-3.4-.1-6.1-3-6.1-6.4 0-3.4 2.8-6 6.1-5.8 3.4.2 6.1 3 6.1 6.4zm19.7.9c0 3.3-2.7 5.9-6 5.8-3.3-.1-6-3-6-6.3s2.7-5.9 6-5.8c3.3.1 6 2.9 6 6.3zm13.4 6.499c3.2.2 5.8-2.4 5.8-5.7 0-3.3-2.6-6.1-5.8-6.2-3.3-.2-5.9 2.4-5.9 5.7 0 3.3 2.7 6.1 5.9 6.2z" fill="#fff"/><path fill-rule="evenodd" clip-rule="evenodd" d="M248.707 247.329h84.6v-62c0-22.5-18.3-40.7-40.7-40.7h-3.2c-22.5 0-40.7 18.3-40.7 40.7v62zm70.2-14.3h-56v-47.7c0-14.6 11.9-26.4 26.4-26.4h3.2c14.6 0 26.4 11.9 26.4 26.4v47.7z" fill="#DEB700"/><path d="M340.507 205.528s-16.3-2.7-17.3-2.7l-78.6 1.1c-7 .1-13.7 6.5-13.7 13.1v58.6c0 4.7 2.9 8.5 7 10.1 1.5.6 3.1.9 4.8.9l12.5 2.3 7.6-3.7 60.4-4.3c6.2-.4 11.2-5.8 11.2-11.9v-43.3l6.1-20.2z" fill="#DEB700"/><path d="M337.607 283.43l-79.6 5.7c-7 .5-12.7-4.4-12.7-11v-59.6c0-6.6 5.7-12 12.7-12.1l79.6-1.1c6.2-.1 11.2 4.8 11.2 10.9v55.4c-.1 6-5 11.3-11.2 11.8z" fill="#FBC900"/><path d="M313.007 236.029c0-6.3-5.2-11.4-11.7-11.4-6.7 0-12.3 5.4-12.3 12 0 5 3.2 9.1 7.6 10.7v15.5c0 2.5 2.1 4.4 4.7 4.2 2.6-.2 4.6-2.5 4.6-4.9v-15.1c4.3-2.1 7.1-6.3 7.1-11z" fill="#00236B"/><path d="M308.307 236.028c0-5.5-4-10.1-9.3-11.2-5.6 1.1-10 6-10 11.8 0 5 3.2 9.1 7.6 10.7v15.5c0 1.5.8 2.8 2 3.5 1.6-.9 2.6-2.5 2.6-4.3v-15.1c4.2-2 7.1-6.2 7.1-10.9z" fill="#18123D"/><path d="M21.708 40.727a2 2 0 1 0-4 0h4zm-4 8.2a2 2 0 0 0 4 0h-4zm4 17.198a2 2 0 0 0-4 0h4zm-4 8.9a2 2 0 1 0 4 0h-4zm19.2-15.197a2 2 0 1 0 0-4v4zm-8.3-4a2 2 0 0 0 0 4v-4zm-17.8 4a2 2 0 1 0 0-4v4zm-8.3-4a2 2 0 0 0 0 4v-4zm15.2-15.101v8.2h4v-8.2h-4zm0 25.398v8.9h4v-8.9h-4zm19.2-10.297h-8.3v4h8.3v-4zm-26.1 0h-8.3v4h8.3v-4zm284.199 259.098a2 2 0 1 0-4 0h4zm-4 6.2a2 2 0 0 0 4 0h-4zm4 13.1a2 2 0 1 0-4 0h4zm-4 6.8a2 2 0 0 0 4 0h-4zm15-11.1a2 2 0 0 0 0-4v4zm-6.2-4a2 2 0 0 0 0 4v-4zm-13.6 4a2 2 0 0 0 0-4v4zm-6.3-4a2 2 0 0 0 0 4v-4zm11.1-11v6.2h4v-6.2h-4zm0 19.3v6.8h4v-6.8h-4zm15-8.3h-6.2v4h6.2v-4zm-19.8 0h-6.3v4h6.3v-4z" fill="#2EE5C0"/><path clip-rule="evenodd" d="M15.207 325.426c7.18 0 13-5.821 13-13 0-7.18-5.82-13-13-13s-13 5.82-13 13c0 7.179 5.82 13 13 13z" stroke="#2EE5C0" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><path d="M28.207 310.426a2 2 0 1 0 0 4v-4zm35.2 2h2a2 2 0 0 0-2-2v2zm-2 12.2a2 2 0 0 0 4 0h-4zm-17.1 0a2 2 0 0 0 4 0h-4zm4-12.2a2 2 0 1 0-4 0h4zm-20.1 2h35.2v-4h-35.2v4zm33.2-2v12.2h4v-12.2h-4zm-13.1 12.2v-12.2h-4v12.2h4z" fill="#2EE5C0"/></g></svg>

package/dist/assets/illustrations/light/403.svg

@@ -0,0 +1 @@
+<svg width="349" height="357" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M275.033 85.83c0 24.7-9.9 83.9-9.9 117.1 0 33.2 0 106.3-27.8 134.1-27.8 27.8-61.9 16.1-61.9 16.1s-46.7 13-76.3-14.8c-29.6-27.8-60.1-83.5-69.1-115.3-9.9-35-26.5-49.3-27.8-56.5-1.3-7.2 3.6-12.1 12.1-12.6 8.5-.4 22.9 4 34.5 22 11.6 18 17.5 26 23.8 35.9 6.3 9.9 20.6 23.3 20.6 23.3s.4-44.9 1.3-64.1c.9-19.3-1.8-111.7 1.8-132.3 3.6-20.6 26.5-20.2 28.7-4 2.2 16.1 8.8 66.8 9.8 79.8s3.7 44.4 3.7 44.4l7.6-2.7s-.9-105.8-.9-132.9c0-29.2 28.7-29.2 32.3-4 3.6 25.2 6.7 142.8 6.7 142.8l6.7 2.7s2.2-111.7 5.8-129.6c3.6-17.9 26.5-17.5 30.1 4.9 3.6 22.4 1.3 72.2.9 94.2s-.9 43.5-.9 43.5l5.4 4s11-73.3 14.4-99.1c3.7-27.8 28.4-21.5 28.4 3.1z" fill="#ECF2F9"/><path d="M279.233 267.33l-216.9 12c-7.3.4-13.3-5.2-13.3-12.5V99.43c0-7.3 6-12.9 13.3-12.5l216.9 12c5.6.3 10.1 5.7 10.1 12v144.4c0 6.3-4.5 11.7-10.1 12z" fill="#FF4645"/><path d="M191.333 140.128l-32.3-1.4c-1.9-.1-3.8.6-5.2 1.9l-24.3 22.8c-1.4 1.3-2.2 3.2-2.2 5.2v33.7c0 2 .8 3.8 2.2 5.2l24.3 22.8c1.4 1.3 3.3 2 5.2 1.9l32.3-1.4c1.8-.1 3.6-.9 4.9-2.2l21.5-22.8c1.2-1.3 1.9-3.1 1.9-4.9v-31c0-1.8-.7-3.6-1.9-4.9l-21.5-22.8c-1.3-1.3-3.1-2.1-4.9-2.1z" fill="#fff"/><path d="M203.433 196.428l-58.1.6c-1.6 0-3-1.3-3-3v-17.2c0-1.6 1.3-3 3-3l58.1.6c1.6 0 2.9 1.3 2.9 3v16c0 1.7-1.3 3-2.9 3z" fill="#FF4645"/><path fill-rule="evenodd" clip-rule="evenodd" d="M74.733 104.63c0 3.4-2.7 6-6.1 5.8-3.4-.1-6.1-3-6.1-6.4 0-3.4 2.8-6 6.1-5.8 3.4.2 6.1 3 6.1 6.4zm19.7.9c0 3.3-2.7 5.9-6 5.8-3.3-.1-6-3-6-6.3s2.7-5.9 6-5.8c3.3.1 6 2.9 6 6.3zm13.4 6.498c3.2.2 5.8-2.4 5.8-5.7 0-3.3-2.6-6.1-5.8-6.2-3.3-.2-5.9 2.4-5.9 5.7 0 3.3 2.7 6.1 5.9 6.2z" fill="#fff"/><path fill-rule="evenodd" clip-rule="evenodd" d="M248.733 248.231h84.6v-62c0-22.5-18.3-40.7-40.7-40.7h-3.2c-22.5 0-40.7 18.3-40.7 40.7v62zm70.2-14.3h-56v-47.7c0-14.6 11.9-26.4 26.4-26.4h3.2c14.6 0 26.4 11.9 26.4 26.4v47.7z" fill="#DEB700"/><path d="M340.533 206.43s-16.3-2.7-17.3-2.7l-78.6 1.1c-7 .1-13.7 6.5-13.7 13.1v58.6c0 4.7 2.9 8.5 7 10.1 1.5.6 3.1.9 4.8.9l12.5 2.3 7.6-3.7 60.4-4.3c6.2-.4 11.2-5.8 11.2-11.9v-43.3l6.1-20.2z" fill="#DEB700"/><path d="M337.633 284.332l-79.6 5.7c-7 .5-12.7-4.4-12.7-11v-59.6c0-6.6 5.7-12 12.7-12.1l79.6-1.1c6.2-.1 11.2 4.8 11.2 10.9v55.4c-.1 6-5 11.3-11.2 11.8z" fill="#FBC900"/><path d="M313.033 236.931c0-6.3-5.2-11.4-11.7-11.4-6.7 0-12.3 5.4-12.3 12 0 5 3.2 9.1 7.6 10.7v15.5c0 2.5 2.1 4.4 4.7 4.2 2.6-.2 4.6-2.5 4.6-4.9v-15.1c4.3-2.1 7.1-6.3 7.1-11z" fill="#00236B"/><path d="M308.333 236.93c0-5.5-4-10.1-9.3-11.2-5.6 1.1-10 6-10 11.8 0 5 3.2 9.1 7.6 10.7v15.5c0 1.5.8 2.8 2 3.5 1.6-.9 2.6-2.5 2.6-4.3v-15.1c4.2-2 7.1-6.2 7.1-10.9z" fill="#18123D"/><path d="M21.733 41.629a2 2 0 0 0-4 0h4zm-4 8.2a2 2 0 1 0 4 0h-4zm4 17.198a2 2 0 0 0-4 0h4zm-4 8.9a2 2 0 1 0 4 0h-4zm19.2-15.197a2 2 0 0 0 0-4v4zm-8.3-4a2 2 0 1 0 0 4v-4zm-17.8 4a2 2 0 0 0 0-4v4zm-8.3-4a2 2 0 1 0 0 4v-4zm15.2-15.101v8.2h4v-8.2h-4zm0 25.398v8.9h4v-8.9h-4zm19.2-10.297h-8.3v4h8.3v-4zm-26.1 0h-8.3v4h8.3v-4zm284.2 259.098a2 2 0 0 0-4 0h4zm-4 6.2a2 2 0 1 0 4 0h-4zm4 13.1a2 2 0 0 0-4 0h4zm-4 6.8a2 2 0 1 0 4 0h-4zm15-11.1a2 2 0 0 0 0-4v4zm-6.2-4a2 2 0 0 0 0 4v-4zm-13.6 4a2 2 0 0 0 0-4v4zm-6.3-4a2 2 0 0 0 0 4v-4zm11.1-11v6.2h4v-6.2h-4zm0 19.3v6.8h4v-6.8h-4zm15-8.3h-6.2v4h6.2v-4zm-19.8 0h-6.3v4h6.3v-4z" fill="#2EE5C0"/><path clip-rule="evenodd" d="M15.233 326.328c7.18 0 13-5.82 13-13s-5.82-13-13-13-13 5.82-13 13 5.82 13 13 13z" stroke="#2EE5C0" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><path d="M28.233 311.328a2 2 0 0 0 0 4v-4zm35.2 2h2a2 2 0 0 0-2-2v2zm-2 12.2a2 2 0 1 0 4 0h-4zm-17.1 0a2 2 0 1 0 4 0h-4zm4-12.2a2 2 0 0 0-4 0h4zm-20.1 2h35.2v-4h-35.2v4zm33.2-2v12.2h4v-12.2h-4zm-13.1 12.2v-12.2h-4v12.2h4z" fill="#2EE5C0"/></svg>

package/dist/components/EmptyState/EmptyState.js

@@ -16,16 +16,18 @@ export default function EmptyState({image, title, description, actions, size}) {
     return (
         <div className={block({size})}>
             <div className={block('wrapper', {size})}>
-                {image ? (
-                    image
-                ) : (
-                    <Icon
-                        viewBox="0 0 383 396"
-                        name="emptyState"
-                        width={sizes[size]}
-                        height={sizes[size]}
-                    />
-                )}
+                <div className={block('image')}>
+                    {image ? (
+                        image
+                    ) : (
+                        <Icon
+                            viewBox="0 0 383 396"
+                            name="emptyState"
+                            width={sizes[size]}
+                            height={sizes[size]}
+                        />
+                    )}
+                </div>
 
                 <div className={block('title', {size})}>{title}</div>
                 <div className={block('description')}>{description}</div>

package/dist/components/Illustration/Illustration.tsx

@@ -0,0 +1,47 @@
+import {useEffect, useState} from 'react';
+import cn from 'bem-cn-lite';
+import {useThemeValue} from '@yandex-cloud/uikit';
+
+export interface IllustrationProps {
+    name: string;
+    className?: string;
+}
+
+type IllustrationStore = Record<string, Record<string, () => Promise<{default: any}>>>;
+
+const store: IllustrationStore = {
+    light: {
+        403: () => import('../../assets/illustrations/light/403.svg'),
+    },
+    dark: {
+        403: () => import('../../assets/illustrations/dark/403.svg'),
+    },
+};
+
+const b = cn('kv-illustration');
+
+export const Illustration = ({name, className, ...props}: IllustrationProps) => {
+    const theme = useThemeValue();
+    const [src, setSrc] = useState('');
+    const srcGetter = store[theme] && store[theme][name];
+
+    useEffect(() => {
+        if (typeof srcGetter === 'function') {
+            srcGetter()
+                .then((svg) => setSrc(svg.default))
+                .catch((e) => {
+                    console.error(e);
+                    setSrc('');
+                });
+        }
+    }, [srcGetter]);
+
+    return (
+        <img
+            alt={name}
+            src={src}
+            className={b(null, className)}
+            {...props}
+        />
+    );
+}

package/dist/components/Illustration/index.ts

@@ -0,0 +1 @@
+export * from './Illustration';

package/dist/containers/Storage/Storage.js

@@ -20,6 +20,8 @@ import {
     StorageTypes,
     setStorageType,
     VisibleEntitiesTitles,
+    getStoragePoolsGroupsCount,
+    getStorageNodesCount,
 } from '../../store/reducers/storage';
 import {getNodesList} from '../../store/reducers/clusterNodes';
 import StorageGroups from './StorageGroups/StorageGroups';
@@ -52,6 +54,8 @@ class Storage extends React.Component {
         getStorageInfo: PropTypes.func,
         setInitialState: PropTypes.func,
         flatListStorageEntities: PropTypes.array,
+        groupsCount: PropTypes.object,
+        nodesCount: PropTypes.object,
         setStorageFilter: PropTypes.func,
         setVisibleEntities: PropTypes.func,
         visibleEntities: PropTypes.string,
@@ -199,10 +203,39 @@ class Storage extends React.Component {
         setStorageType(value);
     };
 
+    renderEntitiesCount() {
+        const {
+            storageType,
+            groupsCount,
+            nodesCount,
+            loading,
+            wasLoaded,
+        } = this.props;
+
+        let label = `${storageType === StorageTypes.groups ? 'Groups' : 'Nodes'}: `;
+        const count = storageType === StorageTypes.groups ? groupsCount : nodesCount;
+
+        if (loading && !wasLoaded) {
+            label += '...';
+            return label;
+        }
+
+        if (count.total === count.found) {
+            label += count.total;
+        } else {
+            label += `${count.found} of ${count.total}`;
+        }
+
+        return label;
+    }
+
     renderControls() {
-        const {setStorageFilter, visibleEntities, storageType, flatListStorageEntities, loading, wasLoaded} =
-            this.props;
-        const showLoader = loading && !wasLoaded;
+        const {
+            setStorageFilter,
+            visibleEntities,
+            storageType,
+        } = this.props;
+
         return (
             <div className={b('controls')}>
                 <div className={b('search')}>
@@ -231,9 +264,9 @@ class Storage extends React.Component {
                         {StorageTypes.nodes}
                     </RadioButton.Option>
                 </RadioButton>
-                <Label theme="info" size="m">{`${
-                    storageType === StorageTypes.groups ? 'Groups' : 'Nodes'
-                }: ${(showLoader) ? '...' : flatListStorageEntities.length}`}</Label>
+                <Label theme="info" size="m">
+                    {this.renderEntitiesCount()}
+                </Label>
             </div>
         );
     }
@@ -270,8 +303,10 @@ function mapStateToProps(state) {
 
     return {
         flatListStorageEntities: getFilteredEntities(state),
+        groupsCount: getStoragePoolsGroupsCount(state),
         autorefresh: state.schema.autorefresh,
         nodes: getNodesObject(state),
+        nodesCount: getStorageNodesCount(state),
         loading,
         wasLoaded,
         error,

package/dist/containers/Tenant/Diagnostics/DetailedOverview/DetailedOverview.tsx

@@ -3,6 +3,8 @@ import {useSelector} from 'react-redux';
 import cn from 'bem-cn-lite';
 
 import {Button, Modal} from '@yandex-cloud/uikit';
+
+import type {EPathType} from '../../../../types/api/schema';
 //@ts-ignore
 import Icon from '../../../../components/Icon/Icon';
 import Overview from '../Overview/Overview';
@@ -14,7 +16,7 @@ import TenantOverview from '../TenantOverview/TenantOverview';
 import './DetailedOverview.scss';
 
 interface DetailedOverviewProps {
-    type: string;
+    type?: EPathType;
     className?: string;
     tenantName: string;
     additionalTenantInfo?: any;

package/dist/containers/Tenant/Diagnostics/Diagnostics.tsx

@@ -29,7 +29,8 @@ import Compute from './Compute/Compute';
 import Tablets from '../../Tablets/Tablets';
 
 import routes, {createHref} from '../../../routes';
-import {OLAP_TABLE_TYPE, TABLE_TYPE} from '../Tenant';
+import type {EPathType} from '../../../types/api/schema';
+import {isTableType} from '../utils/schema';
 import {TenantGeneralTabsIds, TenantTabsGroups} from '../TenantPages';
 import {GeneralPagesIds, DATABASE_PAGES, TABLE_PAGES, DIR_PAGES} from './DiagnosticsPages';
 //@ts-ignore
@@ -39,7 +40,7 @@ import {setTopLevelTab, setDiagnosticsTab} from '../../../store/reducers/tenant'
 import './Diagnostics.scss';
 
 interface DiagnosticsProps {
-    type: string;
+    type?: EPathType;
     additionalTenantInfo?: any;
     additionalNodesInfo?: any;
 }
@@ -68,8 +69,7 @@ function Diagnostics(props: DiagnosticsProps) {
     const isDatabase = currentSchemaPath === tenantName;
 
     const pages = useMemo(() => {
-        const {type} = props;
-        const isTable = type === TABLE_TYPE || type === OLAP_TABLE_TYPE;
+        const isTable = isTableType(props.type);
 
         let pages = DIR_PAGES;
 

package/dist/containers/Tenant/Diagnostics/HotKeys/HotKeys.js

@@ -8,7 +8,7 @@ import Icon from '../../../../components/Icon/Icon';
 
 import {AutoFetcher} from '../../../../utils/autofetcher';
 import {getHotKeys, setHotKeysOptions} from '../../../../store/reducers/hotKeys';
-import {TABLE_TYPE} from '../../Tenant';
+import {EPathType} from '../../../../types/api/schema';
 import {prepareQueryError} from '../../../../utils';
 
 import './HotKeys.scss';
@@ -42,7 +42,8 @@ function HotKeys({
     type,
 }) {
     const fetchData = () => {
-        if (type === TABLE_TYPE) {
+        // ColumnTables excluded intentionally
+        if (type === EPathType.EPathTypeTable) {
             getHotKeys(currentSchemaPath);
         }
     };

package/dist/containers/Tenant/Diagnostics/Overview/Overview.tsx

@@ -7,7 +7,8 @@ import {Loader} from '@yandex-cloud/uikit';
 //@ts-ignore
 import SchemaInfoViewer from '../../Schema/SchemaInfoViewer/SchemaInfoViewer';
 
-import {OLAP_TABLE_TYPE} from '../../Tenant';
+import type {EPathType} from '../../../../types/api/schema';
+import {isColumnEntityType, isTableType} from '../../utils/schema';
 import {AutoFetcher} from '../../../../utils/autofetcher';
 //@ts-ignore
 import {getSchema} from '../../../../store/reducers/schema';
@@ -44,7 +45,7 @@ function prepareOlapTableGeneral(tableData: any, olapStats: any[]) {
 }
 
 interface OverviewProps {
-    type: string;
+    type?: EPathType;
     className?: string;
     tenantName?: string;
 }
@@ -70,7 +71,7 @@ function Overview(props: OverviewProps) {
         const schemaPath = currentSchemaPath || tenantName;
         dispatch(getSchema({path: schemaPath}));
 
-        if (type === OLAP_TABLE_TYPE) {
+        if (isTableType(type) && isColumnEntityType(type)) {
             dispatch(getOlapStats({path: schemaPath}));
         }
     };
@@ -98,7 +99,7 @@ function Overview(props: OverviewProps) {
         currentItem?.PathDescription?.Table || currentItem?.PathDescription?.ColumnTableDescription;
 
     const schemaData = useMemo(() => {
-        return props.type === OLAP_TABLE_TYPE
+        return isTableType(props.type) && isColumnEntityType(props.type)
             ? prepareOlapTableGeneral(tableSchema, olapStats)
             : currentItem;
     }, [props.type, tableSchema, olapStats, currentItem]);

package/dist/containers/Tenant/Diagnostics/TopQueries/TopQueries.js

@@ -9,7 +9,7 @@ import {changeUserInput} from '../../../../store/reducers/executeQuery';
 import {sendQuery, setQueryOptions} from '../../../../store/reducers/executeTopQueries';
 import TruncatedQuery from '../../../../components/TruncatedQuery/TruncatedQuery';
 import {AutoFetcher} from '../../../../utils/autofetcher';
-import {OLAP_STORE_TYPE, OLAP_TABLE_TYPE} from '../../Tenant';
+import {isColumnEntityType} from '../../utils/schema';
 
 import {DEFAULT_TABLE_SETTINGS} from '../../../../utils/constants';
 import {TenantGeneralTabsIds} from '../../TenantPages';
@@ -149,7 +149,7 @@ class TopQueries extends React.Component {
 
         let message;
 
-        if (type === OLAP_STORE_TYPE || type === OLAP_TABLE_TYPE) {
+        if (isColumnEntityType(type)) {
             message = 'No data';
         } else if (error && !error.isCancelled) {
             message = prepareQueryError(error).slice(0, 300);

package/dist/containers/Tenant/Diagnostics/TopShards/TopShards.js

@@ -12,7 +12,7 @@ import {setCurrentSchemaPath, getSchema} from '../../../../store/reducers/schema
 import {AutoFetcher} from '../../../../utils/autofetcher';
 import HistoryContext from '../../../../contexts/HistoryContext';
 import {DEFAULT_TABLE_SETTINGS} from '../../../../utils/constants';
-import {OLAP_STORE_TYPE, OLAP_TABLE_TYPE} from '../../Tenant';
+import {isColumnEntityType} from '../../utils/schema';
 import {prepareQueryError} from '../../../../utils';
 
 import './TopShards.scss';
@@ -120,7 +120,7 @@ function TopShards({
     };
 
     const renderContent = () => {
-        if (type === OLAP_STORE_TYPE || type === OLAP_TABLE_TYPE) {
+        if (isColumnEntityType(type)) {
             return 'No data';
         }
         if (error) {

package/dist/containers/Tenant/ObjectGeneral/ObjectGeneral.tsx

@@ -14,13 +14,14 @@ import {TenantGeneralTabsIds, TenantTabsGroups, TENANT_GENERAL_TABS} from '../Te
 import routes, {createHref} from '../../../routes';
 import {setSettingValue} from '../../../store/reducers/settings';
 import {TENANT_INITIAL_TAB_KEY} from '../../../utils/constants';
+import type {EPathType} from '../../../types/api/schema';
 
 import './ObjectGeneral.scss';
 
 const b = cn('object-general');
 
 interface ObjectGeneralProps {
-    type: string;
+    type?: EPathType;
     additionalTenantInfo?: any;
     additionalNodesInfo?: any;
     setSettingValue: (name: string, value: string) => void;

package/dist/containers/Tenant/ObjectSummary/ObjectSummary.tsx

@@ -16,7 +16,8 @@ import CopyToClipboard from '../../../components/CopyToClipboard/CopyToClipboard
 import InfoViewer from '../../../components/InfoViewer/InfoViewer';
 import Icon from '../../../components/Icon/Icon';
 
-import {OLAP_TABLE_TYPE, TABLE_TYPE} from '../Tenant';
+import type {EPathType} from '../../../types/api/schema';
+import {isColumnEntityType, isTableType} from '../utils/schema';
 
 import {
     DEFAULT_IS_TENANT_COMMON_INFO_COLLAPSED,
@@ -69,7 +70,7 @@ function prepareOlapTableSchema(tableSchema: any) {
 }
 
 interface ObjectSummaryProps {
-    type: string;
+    type?: EPathType;
     onCollapseSummary: VoidFunction;
     onExpandSummary: VoidFunction;
     isCollapsed: boolean;
@@ -104,12 +105,13 @@ function ObjectSummary(props: ObjectSummaryProps) {
     const tableSchema =
         currentItem?.PathDescription?.Table || currentItem?.PathDescription?.ColumnTableDescription;
 
-    const schema =
-        props.type === OLAP_TABLE_TYPE ? prepareOlapTableSchema(tableSchema) : tableSchema;
+    const schema = isTableType(props.type) && isColumnEntityType(props.type)
+        ? prepareOlapTableSchema(tableSchema)
+        : tableSchema;
 
     useEffect(() => {
         const {type} = props;
-        const isTable = type === TABLE_TYPE || type === OLAP_TABLE_TYPE;
+        const isTable = isTableType(type);
 
         if (type && !isTable && !TENANT_INFO_TABS.find((el) => el.id === infoTab)) {
             history.push({
@@ -120,8 +122,7 @@ function ObjectSummary(props: ObjectSummaryProps) {
     }, [props.type]);
 
     const renderTabs = () => {
-        const {type} = props;
-        const isTable = type === TABLE_TYPE || type === OLAP_TABLE_TYPE;
+        const isTable = isTableType(props.type);
         const tabsItems = isTable ? [...TENANT_INFO_TABS, ...TENANT_SCHEMA_TAB] : TENANT_INFO_TABS;
 
         return (
@@ -228,8 +229,7 @@ function ObjectSummary(props: ObjectSummaryProps) {
     };
 
     const renderCommonInfoControls = () => {
-        const {type} = props;
-        const isTable = type === TABLE_TYPE || type === OLAP_TABLE_TYPE;
+        const isTable = isTableType(props.type);
         return (
             <React.Fragment>
                 {isTable && (
@@ -257,8 +257,8 @@ function ObjectSummary(props: ObjectSummaryProps) {
             message = `${Status}: ${Reason}`;
         }
 
-        return props.type ? (
-            <div className={b('entity-type')}>{type}</div>
+        return type ? (
+            <div className={b('entity-type')}>{type.replace('EPathType', '')}</div>
         ) : (
             <div className={b('entity-type', {error: true})}>
                 <HelpPopover content={message} offset={{left: 0}} />

package/dist/containers/Tenant/Preview/Preview.js

@@ -13,7 +13,7 @@ import {sendQuery, setQueryOptions} from '../../../store/reducers/preview';
 import {showTooltip, hideTooltip} from '../../../store/reducers/tooltip';
 import {prepareQueryError, prepareQueryResponse} from '../../../utils/index';
 
-import {OLAP_TABLE_TYPE, TABLE_TYPE} from '../Tenant';
+import {isTableType} from '../utils/schema';
 import {AutoFetcher} from '../../../utils/autofetcher';
 import EnableFullscreenButton from '../../../components/EnableFullscreenButton/EnableFullscreenButton';
 import {DEFAULT_TABLE_SETTINGS} from '../../../utils/constants';
@@ -82,7 +82,7 @@ class Preview extends React.Component {
     sendQueryForPreview = () => {
         const {sendQuery, database, table, type} = this.props;
 
-        if (type !== TABLE_TYPE && type !== OLAP_TABLE_TYPE) {
+        if (!isTableType(type)) {
             return;
         }
 
@@ -150,7 +150,7 @@ class Preview extends React.Component {
 
         let message;
 
-        if (type !== TABLE_TYPE && type !== OLAP_TABLE_TYPE) {
+        if (!isTableType(type)) {
             message = <div className={b('message-container')}>Not available</div>;
         }
 

package/dist/containers/Tenant/Schema/SchemaTree/SchemaTree.tsx

@@ -35,6 +35,9 @@ export function SchemaTree(props: SchemaTreeProps) {
             return Children.map(({Name = '', PathType}) => ({
                 name: Name,
                 type: mapPathTypeToNavigationTreeType(PathType),
+                // FIXME: should only be explicitly set to true for tables with indexes
+                // at the moment of writing there is no property to determine this, fix later
+                expandable: true,
             }));
         });
 

package/dist/containers/Tenant/Tenant.tsx

@@ -1,9 +1,12 @@
-import {useEffect, useMemo, useReducer} from 'react';
+import {useEffect, useReducer} from 'react';
 import {useDispatch, useSelector} from 'react-redux';
 import cn from 'bem-cn-lite';
 import {useLocation} from 'react-router';
 import qs from 'qs';
 
+import EmptyState from '../../components/EmptyState/EmptyState';
+import {Illustration} from '../../components/Illustration';
+
 import ObjectSummary from './ObjectSummary/ObjectSummary';
 import {setHeader} from '../../store/reducers/header';
 import ObjectGeneral from './ObjectGeneral/ObjectGeneral';
@@ -22,28 +25,12 @@ import {
 //@ts-ignore
 import {getTenantInfo, clearTenant} from '../../store/reducers/tenant';
 import routes, {CLUSTER_PAGES, createHref} from '../../routes';
+import type {TEvDescribeSchemeResult} from '../../types/api/schema';
 
 import './Tenant.scss';
 
 const b = cn('tenant-page');
 
-export const TABLE_TYPE = 'Table';
-export const OLAP_TABLE_TYPE = 'ColumnTable';
-export const OLAP_STORE_TYPE = 'ColumnStore';
-
-export function calcEntityType(currentPathType?: string) {
-    return currentPathType && currentPathType.replace('EPathType', '');
-}
-
-export function isTableType(currentPathType?: string) {
-    const type = calcEntityType(currentPathType);
-
-    if (type === TABLE_TYPE || type === OLAP_TABLE_TYPE) {
-        return true;
-    }
-    return false;
-}
-
 const getInitialIsSummaryCollapsed = () => {
     return Boolean(localStorage.getItem(DEFAULT_IS_TENANT_SUMMARY_COLLAPSED));
 };
@@ -69,6 +56,9 @@ function Tenant(props: TenantProps) {
         (state: any) => state.schema,
     );
 
+    const {data: {status: tenantStatus = 200} = {}} = useSelector((state: any) => state.tenant);
+    const {error: {status: schemaStatus = 200} = {}} = useSelector((state: any) => state.schema);
+
     const dispatch = useDispatch();
 
     const location = useLocation();
@@ -114,11 +104,7 @@ function Tenant(props: TenantProps) {
         };
     }, [tenantName, dispatch]);
 
-    const currentPathType = currentItem.PathDescription?.Self?.PathType;
-
-    const entityType = useMemo(() => {
-        return calcEntityType(currentPathType);
-    }, [currentPathType]);
+    const currentPathType = (currentItem as TEvDescribeSchemeResult).PathDescription?.Self?.PathType;
 
     const onCollapseSummaryHandler = () => {
         dispatchSummaryVisibilityAction(PaneVisibilityActionTypes.triggerCollapse);
@@ -131,29 +117,39 @@ function Tenant(props: TenantProps) {
         dispatchSummaryVisibilityAction(PaneVisibilityActionTypes.clear);
     };
 
+    const showBlockingError = tenantStatus === 403 || schemaStatus === 403;
+
     return (
         <div className={b()}>
-            <SplitPane
-                defaultSizePaneKey={DEFAULT_SIZE_TENANT_KEY}
-                defaultSizes={[25, 75]}
-                triggerCollapse={summaryVisibilityState.triggerCollapse}
-                triggerExpand={summaryVisibilityState.triggerExpand}
-                minSize={[36, 200]}
-                onSplitStartDragAdditional={onSplitStartDragAdditional}
-            >
-                <ObjectSummary
-                    type={entityType as string}
-                    onCollapseSummary={onCollapseSummaryHandler}
-                    onExpandSummary={onExpandSummaryHandler}
-                    isCollapsed={summaryVisibilityState.collapsed}
-                    additionalTenantInfo={props.additionalTenantInfo}
-                />
-                <ObjectGeneral
-                    type={entityType as string}
-                    additionalTenantInfo={props.additionalTenantInfo}
-                    additionalNodesInfo={props.additionalNodesInfo}
+            {showBlockingError ? (
+                <EmptyState
+                    image={<Illustration name="403" />}
+                    title="Access denied"
+                    description="You don’t have the necessary roles to view this page."
                 />
-            </SplitPane>
+            ) : (
+                <SplitPane
+                    defaultSizePaneKey={DEFAULT_SIZE_TENANT_KEY}
+                    defaultSizes={[25, 75]}
+                    triggerCollapse={summaryVisibilityState.triggerCollapse}
+                    triggerExpand={summaryVisibilityState.triggerExpand}
+                    minSize={[36, 200]}
+                    onSplitStartDragAdditional={onSplitStartDragAdditional}
+                >
+                    <ObjectSummary
+                        type={currentPathType}
+                        onCollapseSummary={onCollapseSummaryHandler}
+                        onExpandSummary={onExpandSummaryHandler}
+                        isCollapsed={summaryVisibilityState.collapsed}
+                        additionalTenantInfo={props.additionalTenantInfo}
+                    />
+                    <ObjectGeneral
+                        type={currentPathType}
+                        additionalTenantInfo={props.additionalTenantInfo}
+                        additionalNodesInfo={props.additionalNodesInfo}
+                    />
+                </SplitPane>
+            )}
         </div>
     );
 }

package/dist/containers/Tenant/utils/schema.ts

@@ -13,8 +13,16 @@ export const mapPathTypeToNavigationTreeType = (
             return 'table';
         case EPathType.EPathTypeDir:
         case EPathType.EPathTypeColumnStore:
+        case EPathType.EPathTypeTableIndex:
             return 'directory';
         default:
             return defaultType;
     }
 };
+
+export const isTableType = (type?: EPathType) =>
+    mapPathTypeToNavigationTreeType(type) === 'table';
+
+export const isColumnEntityType = (type?: EPathType) =>
+    type === EPathType.EPathTypeColumnStore ||
+    type === EPathType.EPathTypeColumnTable;

package/dist/services/api.js

@@ -83,7 +83,6 @@ export class YdbEmbeddedAPI extends AxiosWrapper {
                 path,
                 enums: true,
                 backup: false,
-                private: false,
                 partition_config: false,
                 partition_stats: false,
                 partitioning_info: false,
@@ -99,7 +98,7 @@ export class YdbEmbeddedAPI extends AxiosWrapper {
     }
     getSchemaAcl({path}) {
         return this.get(
-            this.getPath('/viewer/json/metainfo'),
+            this.getPath('/viewer/json/acl'),
             {
                 path,
             },
@@ -111,7 +110,6 @@ export class YdbEmbeddedAPI extends AxiosWrapper {
             path,
             enums: true,
             backup: false,
-            private: false,
             children: false,
             partition_config: false,
             partition_stats: true,

package/dist/store/reducers/storage.js

@@ -125,7 +125,15 @@ export function setVisibleEntities(value) {
 }
 
 export const getStoragePools = (state) => state.storage.data?.StoragePools;
+export const getStoragePoolsGroupsCount = (state) => ({
+    total: state.storage.data?.TotalGroups || 0,
+    found: state.storage.data?.FoundGroups || 0,
+});
 export const getStorageNodes = (state) => state.storage.data?.Nodes;
+export const getStorageNodesCount = (state) => ({
+    total: state.storage.data?.TotalNodes || 0,
+    found: state.storage.data?.FoundNodes || 0,
+});
 export const getStorageFilter = (state) => state.storage.filter;
 export const getVisibleEntities = (state) => state.storage.visible;
 export const getStorageType = (state) => state.storage.type;

package/dist/types/api/schema.ts

@@ -88,6 +88,7 @@ export enum EPathType {
     EPathTypeSubDomain = 'EPathTypeSubDomain',
     EPathTypeColumnStore = 'EPathTypeColumnStore',
     EPathTypeColumnTable = 'EPathTypeColumnTable',
+    EPathTypeTableIndex = 'EPathTypeTableIndex', 
 }
 
 enum EPathSubType {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ydb-embedded-ui",
-  "version": "1.6.4",
+  "version": "1.8.0",
   "files": [
     "dist"
   ],
@@ -40,7 +40,7 @@
     "reselect": "4.0.0",
     "sass": "1.32.8",
     "web-vitals": "1.1.2",
-    "ydb-ui-components": "2.0.2"
+    "ydb-ui-components": "2.1.0"
   },
   "scripts": {
     "start": "react-app-rewired start",