ydb-embedded-ui 4.10.0 → 4.11.0

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

@@ -0,0 +1,99 @@
+import cn from 'bem-cn-lite';
+
+import DataTable, {Column} from '@gravity-ui/react-data-table';
+
+import type {EPathType, TColumnDescription} from '../../../../types/api/schema';
+import {DEFAULT_TABLE_SETTINGS} from '../../../../utils/constants';
+
+import {Icon} from '../../../../components/Icon';
+
+import {isExternalTable} from '../../utils/schema';
+
+import './SchemaViewer.scss';
+
+const b = cn('schema-viewer');
+
+const SchemaViewerColumns = {
+    id: 'Id',
+    name: 'Name',
+    key: 'Key',
+    type: 'Type',
+    notNull: 'NotNull',
+};
+
+interface SchemaViewerProps {
+    keyColumnIds?: number[];
+    columns?: TColumnDescription[];
+    type?: EPathType;
+}
+
+export const SchemaViewer = ({keyColumnIds = [], columns = [], type}: SchemaViewerProps) => {
+    let dataTableColumns: Column<TColumnDescription>[] = [
+        {
+            name: SchemaViewerColumns.id,
+            width: 40,
+        },
+        {
+            name: SchemaViewerColumns.key,
+            width: 40,
+            sortAccessor: (row) => {
+                return row.Id && keyColumnIds.includes(row.Id) ? 1 : 0;
+            },
+            render: ({row}) => {
+                return row.Id && keyColumnIds.includes(row.Id) ? (
+                    <div className={b('key-icon')}>
+                        <Icon name="key" viewBox="0 0 12 7" width={12} height={7} />
+                    </div>
+                ) : null;
+            },
+        },
+        {
+            name: SchemaViewerColumns.name,
+            width: 100,
+        },
+        {
+            name: SchemaViewerColumns.type,
+            width: 100,
+        },
+        {
+            name: SchemaViewerColumns.notNull,
+            width: 100,
+            render: ({row}) => {
+                if (row.NotNull) {
+                    return '\u2713';
+                }
+
+                return undefined;
+            },
+        },
+    ];
+
+    if (isExternalTable(type)) {
+        // External tables don't have key columns
+        dataTableColumns = dataTableColumns.filter(
+            (column) => column.name !== SchemaViewerColumns.key,
+        );
+    }
+
+    // Display key columns first
+    const tableData = columns.sort((column) => {
+        if (column.Id && keyColumnIds.includes(column.Id)) {
+            return 1;
+        }
+        return -1;
+    });
+
+    return (
+        <div className={b()}>
+            <DataTable
+                theme="yandex-cloud"
+                data={tableData}
+                columns={dataTableColumns}
+                settings={DEFAULT_TABLE_SETTINGS}
+                initialSortOrder={{columnId: SchemaViewerColumns.key, order: DataTable.DESCENDING}}
+            />
+        </div>
+    );
+};
+
+export default SchemaViewer;

package/dist/containers/Tenant/Tenant.tsx

@@ -10,12 +10,11 @@ import {DEFAULT_IS_TENANT_SUMMARY_COLLAPSED, DEFAULT_SIZE_TENANT_KEY} from '../.
 import {useTypedSelector} from '../../utils/hooks';
 import {setHeaderBreadcrumbs} from '../../store/reducers/header/header';
 import {disableAutorefresh, getSchema} from '../../store/reducers/schema/schema';
-import {getSchemaAcl} from '../../store/reducers/schemaAcl/schemaAcl';
 
 import SplitPane from '../../components/SplitPane';
 import {AccessDenied} from '../../components/Errors/403';
 
-import ObjectSummary from './ObjectSummary/ObjectSummary';
+import {ObjectSummary} from './ObjectSummary/ObjectSummary';
 import ObjectGeneral from './ObjectGeneral/ObjectGeneral';
 
 import {
@@ -74,12 +73,10 @@ function Tenant(props: TenantProps) {
 
     useEffect(() => {
         dispatch(getSchema({path: tenantName}));
-        dispatch(getSchemaAcl({path: tenantName}));
     }, [tenantName, dispatch]);
 
     useEffect(() => {
         dispatch(getSchema({path: currentSchemaPath}));
-        dispatch(getSchemaAcl({path: currentSchemaPath}));
     }, [currentSchemaPath, dispatch]);
 
     useEffect(() => {
@@ -124,7 +121,6 @@ function Tenant(props: TenantProps) {
                         onCollapseSummary={onCollapseSummaryHandler}
                         onExpandSummary={onExpandSummaryHandler}
                         isCollapsed={summaryVisibilityState.collapsed}
-                        additionalTenantInfo={props.additionalTenantInfo}
                     />
                     <ObjectGeneral
                         type={preloadedPathType || currentPathType}

package/dist/containers/Tenant/TenantPages.tsx

@@ -1,31 +1,26 @@
 import routes, {createHref} from '../../routes';
+import {TENANT_SUMMARY_TABS_IDS} from '../../store/reducers/tenant/constants';
 
-export enum TenantInfoTabsIds {
-    overview = 'overview',
-    acl = 'acl',
-    schema = 'schema',
-}
-
-export enum TenantTabsGroups {
-    info = 'info',
-    queryTab = 'queryTab',
-    diagnosticsTab = 'diagnosticsTab',
-}
+export const TenantTabsGroups = {
+    summaryTab: 'summaryTab',
+    queryTab: 'queryTab',
+    diagnosticsTab: 'diagnosticsTab',
+} as const;
 
 export const TENANT_INFO_TABS = [
     {
-        id: TenantInfoTabsIds.overview,
+        id: TENANT_SUMMARY_TABS_IDS.overview,
         title: 'Overview',
     },
     {
-        id: TenantInfoTabsIds.acl,
+        id: TENANT_SUMMARY_TABS_IDS.acl,
         title: 'ACL',
     },
 ];
 
 export const TENANT_SCHEMA_TAB = [
     {
-        id: TenantInfoTabsIds.schema,
+        id: TENANT_SUMMARY_TABS_IDS.schema,
         title: 'Schema',
     },
 ];

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

@@ -0,0 +1,11 @@
+{
+  "acl.owner": "Owner",
+  "acl.empty": "No Acl data",
+
+  "summary.navigation": "Navigation",
+  "summary.showPreview": "Show preview",
+  "summary.copySchemaPath": "Copy schema path",
+
+  "actions.copied" : "The path is copied to the clipboard",
+  "actions.notCopied" : "Couldn’t copy the path"
+}

package/dist/containers/Tenant/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-tenant';
+
+i18n.registerKeyset(Lang.En, COMPONENT, en);
+i18n.registerKeyset(Lang.Ru, COMPONENT, ru);
+
+export default i18n.keyset(COMPONENT);

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

@@ -0,0 +1,11 @@
+{
+  "acl.owner": "Владелец",
+  "acl.empty": "Нет данных об Acl",
+
+  "summary.navigation": "Навигация",
+  "summary.showPreview": "Показать превью",
+  "summary.copySchemaPath": "Скопировать путь",
+
+  "actions.copied": "Путь успешно скопирован",
+  "actions.notCopied": "Не получилось скопировать путь"
+}

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

@@ -32,6 +32,9 @@ const pathTypeToNodeType: Record<EPathType, NavigationTreeNodeType | undefined>
 
     [EPathType.EPathTypeCdcStream]: 'topic',
     [EPathType.EPathTypePersQueueGroup]: 'topic',
+
+    [EPathType.EPathTypeExternalDataSource]: 'external_data_source',
+    [EPathType.EPathTypeExternalTable]: 'external_table',
 };
 
 export const mapPathTypeToNavigationTreeType = (
@@ -64,6 +67,8 @@ const pathTypeToEntityName: Record<EPathType, string | undefined> = {
     [EPathType.EPathTypeColumnTable]: 'Columntable',
     [EPathType.EPathTypeCdcStream]: 'Changefeed',
     [EPathType.EPathTypePersQueueGroup]: 'Topic',
+    [EPathType.EPathTypeExternalDataSource]: 'External Data Source',
+    [EPathType.EPathTypeExternalTable]: 'External Table',
 };
 
 export const mapPathTypeToEntityName = (
@@ -90,6 +95,8 @@ const pathTypeToIsTable: Record<EPathType, boolean> = {
     [EPathType.EPathTypeTable]: true,
     [EPathType.EPathTypeColumnTable]: true,
 
+    [EPathType.EPathTypeExternalTable]: true,
+
     [EPathType.EPathTypeInvalid]: false,
     [EPathType.EPathTypeDir]: false,
     [EPathType.EPathTypeSubDomain]: false,
@@ -98,6 +105,7 @@ const pathTypeToIsTable: Record<EPathType, boolean> = {
     [EPathType.EPathTypeColumnStore]: false,
     [EPathType.EPathTypeCdcStream]: false,
     [EPathType.EPathTypePersQueueGroup]: false,
+    [EPathType.EPathTypeExternalDataSource]: false,
 };
 
 export const isTableType = (pathType?: EPathType) =>
@@ -130,6 +138,8 @@ const pathTypeToIsColumn: Record<EPathType, boolean> = {
     [EPathType.EPathTypeExtSubDomain]: false,
     [EPathType.EPathTypeCdcStream]: false,
     [EPathType.EPathTypePersQueueGroup]: false,
+    [EPathType.EPathTypeExternalDataSource]: false,
+    [EPathType.EPathTypeExternalTable]: false,
 };
 
 export const isColumnEntityType = (type?: EPathType) => (type && pathTypeToIsColumn[type]) ?? false;
@@ -148,6 +158,8 @@ const pathTypeToIsDatabase: Record<EPathType, boolean> = {
     [EPathType.EPathTypeTableIndex]: false,
     [EPathType.EPathTypeCdcStream]: false,
     [EPathType.EPathTypePersQueueGroup]: false,
+    [EPathType.EPathTypeExternalDataSource]: false,
+    [EPathType.EPathTypeExternalTable]: false,
 };
 
 export const isDatabaseEntityType = (type?: EPathType) =>
@@ -171,6 +183,8 @@ const pathTypeToEntityWithMergedImplementation: Record<EPathType, boolean> = {
     [EPathType.EPathTypeSubDomain]: false,
     [EPathType.EPathTypeTableIndex]: false,
     [EPathType.EPathTypeExtSubDomain]: false,
+    [EPathType.EPathTypeExternalDataSource]: false,
+    [EPathType.EPathTypeExternalTable]: false,
 };
 
 export const isEntityWithMergedImplementation = (type?: EPathType) =>
@@ -190,6 +204,9 @@ const pathTypeToChildless: Record<EPathType, boolean> = {
     [EPathType.EPathTypeCdcStream]: true,
     [EPathType.EPathTypePersQueueGroup]: true,
 
+    [EPathType.EPathTypeExternalDataSource]: true,
+    [EPathType.EPathTypeExternalTable]: true,
+
     [EPathType.EPathTypeInvalid]: false,
     [EPathType.EPathTypeColumnStore]: false,
     [EPathType.EPathTypeColumnTable]: false,
@@ -217,7 +234,14 @@ const mapPathTypeToIsWithTopic: Record<EPathType, boolean> = {
     [EPathType.EPathTypeSubDomain]: false,
     [EPathType.EPathTypeTableIndex]: false,
     [EPathType.EPathTypeExtSubDomain]: false,
+
+    [EPathType.EPathTypeExternalDataSource]: false,
+    [EPathType.EPathTypeExternalTable]: false,
 };
 
 export const isPathTypeWithTopic = (type?: EPathType) =>
     (type && mapPathTypeToIsWithTopic[type]) ?? false;
+
+// ====================
+
+export const isExternalTable = (type?: EPathType) => type === EPathType.EPathTypeExternalTable;

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

@@ -1,15 +1,16 @@
 import {Dispatch} from 'react';
+import copy from 'copy-to-clipboard';
+
 import type {NavigationTreeNodeType, NavigationTreeProps} from 'ydb-ui-components';
 
 import {changeUserInput} from '../../../store/reducers/executeQuery';
 import {setShowPreview} from '../../../store/reducers/schema/schema';
 import {setQueryTab, setTenantPage} from '../../../store/reducers/tenant/tenant';
-import {
-    TENANT_QUERY_TABS_ID,
-    TENANT_PAGES_IDS,
-} from '../../../store/reducers/tenant/constants';
+import {TENANT_QUERY_TABS_ID, TENANT_PAGES_IDS} from '../../../store/reducers/tenant/constants';
 import createToast from '../../../utils/createToast';
 
+import i18n from '../i18n';
+
 const createTableTemplate = (path: string) => {
     return `CREATE TABLE \`${path}/my_table\`
 (
@@ -51,22 +52,20 @@ const bindActions = (
         selectQuery: inputQuery(selectQueryTemplate),
         upsertQuery: inputQuery(upsertQueryTemplate),
         copyPath: () => {
-            navigator.clipboard
-                .writeText(path)
-                .then(() => {
-                    createToast({
-                        name: 'Copied',
-                        title: 'The path is copied to the clipboard',
-                        type: 'success',
-                    });
-                })
-                .catch(() => {
-                    createToast({
-                        name: 'Not copied',
-                        title: 'Couldn’t copy the path',
-                        type: 'error',
-                    });
+            try {
+                copy(path);
+                createToast({
+                    name: 'Copied',
+                    title: i18n('actions.copied'),
+                    type: 'success',
+                });
+            } catch {
+                createToast({
+                    name: 'Not copied',
+                    title: i18n('actions.notCopied'),
+                    type: 'error',
                 });
+            }
         },
         openPreview: () => {
             dispatch(setShowPreview(true));
@@ -84,23 +83,25 @@ export const getActions =
     (path: string, type: NavigationTreeNodeType) => {
         const actions = bindActions(path, dispatch, setActivePath);
         const copyItem = {text: 'Copy path', action: actions.copyPath};
+        const openPreview = {text: 'Open preview', action: actions.openPreview};
+        const selectQuery = {text: 'Select query...', action: actions.selectQuery};
 
         const DIR_SET: ActionsSet = [
             [copyItem],
             [{text: 'Create table...', action: actions.createTable}],
         ];
         const TABLE_SET: ActionsSet = [
-            [{text: 'Open preview', action: actions.openPreview}, copyItem],
+            [openPreview, copyItem],
             [
                 {text: 'Alter table...', action: actions.alterTable},
-                {text: 'Select query...', action: actions.selectQuery},
+                selectQuery,
                 {text: 'Upsert query...', action: actions.upsertQuery},
             ],
         ];
 
-        const JUST_COPY: ActionsSet = [copyItem];
+        const EXTERNAL_TABLE_SET = [[openPreview, copyItem], [selectQuery]];
 
-        const EMPTY_SET: ActionsSet = [];
+        const JUST_COPY: ActionsSet = [copyItem];
 
         // verbose mapping to guarantee a correct actions set for new node types
         // TS will error when a new type is added in the lib but is not mapped here
@@ -114,7 +115,10 @@ export const getActions =
             index_table: JUST_COPY,
             topic: JUST_COPY,
 
-            index: EMPTY_SET,
+            index: JUST_COPY,
+
+            external_table: EXTERNAL_TABLE_SET,
+            external_data_source: JUST_COPY,
         };
 
         return nodeTypeToActions[type];

package/dist/containers/Tenants/Tenants.scss

@@ -1,9 +1,6 @@
 @import '../../styles/mixins.scss';
 
 .tenants {
-    height: 100%;
-    @include flex-container();
-
     &__format-label {
         margin-right: 15px;
     }
@@ -28,16 +25,7 @@
         }
     }
 
-    &__controls {
-        @include controls();
-    }
-
-    &__table-wrapper {
-        overflow: auto;
-        flex-grow: 1;
-
-        @include freeze-nth-column(1);
-
+    &__table {
         @include table-styles;
     }
 

package/dist/containers/Tenants/Tenants.tsx

@@ -2,7 +2,7 @@ import cn from 'bem-cn-lite';
 import {useDispatch} from 'react-redux';
 
 import DataTable, {Column} from '@gravity-ui/react-data-table';
-import {Loader, Button} from '@gravity-ui/uikit';
+import {Button} from '@gravity-ui/uikit';
 
 import EntityStatus from '../../components/EntityStatus/EntityStatus';
 import {PoolsGraph} from '../../components/PoolsGraph/PoolsGraph';
@@ -10,6 +10,7 @@ import {TabletsStatistic} from '../../components/TabletsStatistic';
 import {ProblemFilter} from '../../components/ProblemFilter';
 import {Illustration} from '../../components/Illustration';
 import {Search} from '../../components/Search';
+import {TableWithControlsLayout} from '../../components/TableWithControlsLayout/TableWithControlsLayout';
 import {ResponseError} from '../../components/Errors/ResponseError';
 
 import type {AdditionalTenantsProps} from '../../types/additionalProps';
@@ -30,7 +31,7 @@ import {DEFAULT_TABLE_SETTINGS} from '../../utils/constants';
 import {useAutofetcher, useTypedSelector} from '../../utils/hooks';
 import {clusterName} from '../../store';
 
-import {TenantTabsGroups, TENANT_INFO_TABS, getTenantPath} from '../Tenant/TenantPages';
+import {getTenantPath} from '../Tenant/TenantPages';
 
 import './Tenants.scss';
 
@@ -66,7 +67,7 @@ export const Tenants = ({additionalTenantsProps}: TenantsProps) => {
 
     const renderControls = () => {
         return (
-            <div className={b('controls')}>
+            <>
                 <Search
                     value={searchValue}
                     onChange={handleSearchChange}
@@ -74,13 +75,11 @@ export const Tenants = ({additionalTenantsProps}: TenantsProps) => {
                     className={b('search')}
                 />
                 <ProblemFilter value={problemFilter} onChange={handleProblemFilterChange} />
-            </div>
+            </>
         );
     };
 
     const renderTable = () => {
-        const initialTenantInfoTab = TENANT_INFO_TABS[0].id;
-
         const getTenantBackend = (tenant: PreparedTenant) => {
             const backend = tenant.MonitoringEndpoint ?? tenant.backend;
             return additionalTenantsProps?.prepareTenantBackend?.(backend);
@@ -105,7 +104,6 @@ export const Tenants = ({additionalTenantsProps}: TenantsProps) => {
                                 path={getTenantPath({
                                     name: row.Name,
                                     backend,
-                                    [TenantTabsGroups.info]: initialTenantInfoTab,
                                 })}
                             />
                             {additionalTenantsProps?.getMonitoringLink?.(row.Name, row.Type)}
@@ -236,34 +234,26 @@ export const Tenants = ({additionalTenantsProps}: TenantsProps) => {
         }
 
         return (
-            <div className={b('table-wrapper')}>
-                <DataTable
-                    theme="yandex-cloud"
-                    data={filteredTenants}
-                    columns={columns}
-                    settings={DEFAULT_TABLE_SETTINGS}
-                    emptyDataMessage="No such tenants"
-                />
-            </div>
+            <DataTable
+                theme="yandex-cloud"
+                data={filteredTenants}
+                columns={columns}
+                settings={DEFAULT_TABLE_SETTINGS}
+                emptyDataMessage="No such tenants"
+            />
         );
     };
 
-    if (loading && !wasLoaded) {
-        return (
-            <div className={'loader'}>
-                <Loader size="l" />
-            </div>
-        );
-    }
-
     if (error) {
         return <ResponseError error={error} />;
     }
 
     return (
-        <div className={b()}>
-            {renderControls()}
-            {renderTable()}
-        </div>
+        <TableWithControlsLayout>
+            <TableWithControlsLayout.Controls>{renderControls()}</TableWithControlsLayout.Controls>
+            <TableWithControlsLayout.Table loading={loading && !wasLoaded} className={b('table')}>
+                {renderTable()}
+            </TableWithControlsLayout.Table>
+        </TableWithControlsLayout>
     );
 };

package/dist/services/api.ts

@@ -28,7 +28,7 @@ import type {DescribeTopicResult} from '../types/api/topic';
 import type {TEvPDiskStateResponse} from '../types/api/pdisk';
 import type {TEvVDiskStateResponse} from '../types/api/vdisk';
 import type {TUserToken} from '../types/api/whoami';
-import type {NodesApiRequestParams} from '../store/reducers/nodes/types';
+import type {ComputeApiRequestParams, NodesApiRequestParams} from '../store/reducers/nodes/types';
 import type {StorageApiRequestParams} from '../store/reducers/storage/types';
 
 import {backend as BACKEND} from '../store';
@@ -82,25 +82,24 @@ export class YdbEmbeddedAPI extends AxiosWrapper {
         });
     }
     getNodes(
-        {tenant, visibleEntities, storage, type = 'any', tablets = true}: NodesApiRequestParams,
+        {visibleEntities, type = 'any', tablets = true, ...params}: NodesApiRequestParams,
         {concurrentId}: AxiosOptions = {},
     ) {
         return this.get<TNodesInfo>(
             this.getPath('/viewer/json/nodes?enums=true'),
             {
-                tenant,
                 with: visibleEntities,
-                storage,
                 type,
                 tablets,
+                ...params,
             },
             {
                 concurrentId,
             },
         );
     }
-    getCompute(path: string) {
-        return this.get<TComputeInfo>(this.getPath('/viewer/json/compute?enums=true'), {path});
+    getCompute(params: ComputeApiRequestParams) {
+        return this.get<TComputeInfo>(this.getPath('/viewer/json/compute?enums=true'), params);
     }
     getStorageInfo(
         {tenant, visibleEntities, nodeId}: StorageApiRequestParams,
@@ -189,7 +188,7 @@ export class YdbEmbeddedAPI extends AxiosWrapper {
             {
                 path,
             },
-            {concurrentId: `getSchemaAcl|${path}`},
+            {concurrentId: `getSchemaAcl`},
         );
     }
     getHeatmapData({path}: {path: string}) {

package/dist/store/index.js

@@ -32,6 +32,6 @@ function configureStore(aRootReducer = rootReducer, singleClusterMode = true) {
 export const webVersion = window.web_version;
 export const customBackend = window.custom_backend;
 
-export * from "./reducers"
+export * from './reducers';
 
 export default configureStore;