ydb-embedded-ui 4.10.1 → 4.11.1

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

@@ -124,6 +124,8 @@ function Overview({type, tenantName}: OverviewProps) {
                 <ChangefeedInfo data={data} topic={additionalData?.[0]} />
             ),
             [EPathType.EPathTypePersQueueGroup]: () => <TopicInfo data={data} />,
+            [EPathType.EPathTypeExternalTable]: undefined,
+            [EPathType.EPathTypeExternalDataSource]: undefined,
         };
 
         return (

package/dist/containers/Tenant/Diagnostics/Overview/utils/prepareTopicSchemaInfo.ts

@@ -21,9 +21,8 @@ export const prepareTopicSchemaInfo = (data?: TEvDescribeSchemeResult): Array<In
 
     const {Partitions = [], PQTabletConfig = {PartitionConfig: {LifetimeSeconds: 0}}} = pqGroupData;
 
-    const {Codecs, MeteringMode} = pqGroupData?.PQTabletConfig;
-    const {WriteSpeedInBytesPerSecond, StorageLimitBytes} =
-        pqGroupData?.PQTabletConfig?.PartitionConfig;
+    const {Codecs, MeteringMode} = PQTabletConfig;
+    const {WriteSpeedInBytesPerSecond, StorageLimitBytes} = PQTabletConfig.PartitionConfig;
 
     const pqGeneralInfo = formatObject<TPersQueueGroupDescription>(formatPQGroupItem, {
         Partitions,

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

@@ -35,12 +35,6 @@
         }
     }
 
-    &__loader {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-    }
-
     &__tree-wrapper {
         display: flex;
         flex-direction: column;

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

@@ -1,17 +1,13 @@
 import React, {ReactNode, useEffect, useReducer} from 'react';
-import {useDispatch, useSelector} from 'react-redux';
+import {useDispatch} from 'react-redux';
+import {useLocation} from 'react-router';
 import {Link} from 'react-router-dom';
-import cn from 'bem-cn-lite';
-import {useHistory, useLocation} from 'react-router';
 import qs from 'qs';
-import _ from 'lodash';
+import cn from 'bem-cn-lite';
 
-import {Button, HelpPopover, Loader, Tabs} from '@gravity-ui/uikit';
+import {Button, HelpPopover, Tabs} from '@gravity-ui/uikit';
 
 import SplitPane from '../../../components/SplitPane';
-import {SchemaTree} from '../Schema/SchemaTree/SchemaTree';
-import Acl from '../Acl/Acl';
-import SchemaViewer from '../Schema/SchemaViewer/SchemaViewer';
 import CopyToClipboard from '../../../components/CopyToClipboard/CopyToClipboard';
 import InfoViewer from '../../../components/InfoViewer/InfoViewer';
 import {
@@ -19,38 +15,43 @@ import {
     PersQueueGroupOverview,
 } from '../../../components/InfoViewer/schemaOverview';
 import {Icon} from '../../../components/Icon';
+import {Loader} from '../../../components/Loader';
 
 import {
     EPathSubType,
     EPathType,
+    TColumnDescription,
     TColumnTableDescription,
-    TDirEntry,
 } from '../../../types/api/schema';
-
+import routes, {createHref} from '../../../routes';
 import {formatDateTime} from '../../../utils';
-import {isColumnEntityType, isIndexTable, isTableType} from '../utils/schema';
-
+import {useTypedSelector} from '../../../utils/hooks';
 import {
     DEFAULT_IS_TENANT_COMMON_INFO_COLLAPSED,
     DEFAULT_SIZE_TENANT_SUMMARY_KEY,
 } from '../../../utils/constants';
+import {setShowPreview} from '../../../store/reducers/schema/schema';
+import {setQueryTab, setSummaryTab, setTenantPage} from '../../../store/reducers/tenant/tenant';
 import {
-    TenantInfoTabsIds,
-    TenantTabsGroups,
-    TENANT_INFO_TABS,
-    TENANT_SCHEMA_TAB,
-} from '../TenantPages';
-import routes, {createHref} from '../../../routes';
+    TENANT_PAGES_IDS,
+    TENANT_QUERY_TABS_ID,
+    TENANT_SUMMARY_TABS_IDS,
+} from '../../../store/reducers/tenant/constants';
+
+import {SchemaTree} from '../Schema/SchemaTree/SchemaTree';
+import {SchemaViewer} from '../Schema/SchemaViewer/SchemaViewer';
+import {Acl} from '../Acl/Acl';
+
+import {TenantTabsGroups, TENANT_INFO_TABS, TENANT_SCHEMA_TAB} from '../TenantPages';
 import {
     PaneVisibilityActionTypes,
     paneVisibilityToggleReducerCreator,
     PaneVisibilityToggleButtons,
 } from '../utils/paneVisibilityToggleHelpers';
-import {setShowPreview} from '../../../store/reducers/schema/schema';
-import {setQueryTab, setTenantPage} from '../../../store/reducers/tenant/tenant';
-import {TENANT_PAGES_IDS, TENANT_QUERY_TABS_ID} from '../../../store/reducers/tenant/constants';
+import {isColumnEntityType, isExternalTable, isIndexTable, isTableType} from '../utils/schema';
 
 import './ObjectSummary.scss';
+import i18n from '../i18n';
 
 const b = cn('object-summary');
 
@@ -72,7 +73,7 @@ function prepareOlapTableSchema(tableSchema: TColumnTableDescription = {}) {
         const KeyColumnIds = KeyColumnNames?.map((name: string) => {
             const column = Columns?.find((el) => el.Name === name);
             return column?.Id;
-        });
+        }).filter((id): id is number => id !== undefined);
 
         return {
             Columns,
@@ -93,10 +94,15 @@ interface ObjectSummaryProps {
     onCollapseSummary: VoidFunction;
     onExpandSummary: VoidFunction;
     isCollapsed: boolean;
-    additionalTenantInfo?: any;
 }
 
-function ObjectSummary(props: ObjectSummaryProps) {
+export function ObjectSummary({
+    type,
+    subType,
+    onCollapseSummary,
+    onExpandSummary,
+    isCollapsed,
+}: ObjectSummaryProps) {
     const dispatch = useDispatch();
     const [commonInfoVisibilityState, dispatchCommonInfoVisibilityState] = useReducer(
         paneVisibilityToggleReducerCreator(DEFAULT_IS_TENANT_COMMON_INFO_COLLAPSED),
@@ -107,49 +113,48 @@ function ObjectSummary(props: ObjectSummaryProps) {
         currentSchemaPath,
         currentSchema: currentItem = {},
         loading: loadingSchema,
-    } = useSelector((state: any) => state.schema);
+    } = useTypedSelector((state) => state.schema);
+    const {summaryTab = TENANT_SUMMARY_TABS_IDS.overview} = useTypedSelector(
+        (state) => state.tenant,
+    );
 
     const location = useLocation();
 
-    const history = useHistory();
-
     const queryParams = qs.parse(location.search, {
         ignoreQueryPrefix: true,
     });
 
-    const {name: tenantName, info: infoTab} = queryParams;
-    const pathData: TDirEntry | undefined = _.get(
-        data[tenantName as string],
-        'PathDescription.Self',
-    );
-    const currentSchemaData: TDirEntry | undefined = _.get(
-        data[currentSchemaPath],
-        'PathDescription.Self',
-    );
-
-    const tableSchema =
-        currentItem?.PathDescription?.Table || currentItem?.PathDescription?.ColumnTableDescription;
-
-    const schema =
-        isTableType(props.type) && isColumnEntityType(props.type)
-            ? // process data for ColumnTable
-              prepareOlapTableSchema(tableSchema)
-            : tableSchema;
+    const {name: tenantName} = queryParams;
+
+    const pathData = tenantName ? data[tenantName.toString()]?.PathDescription?.Self : undefined;
+    const currentObjectData = currentSchemaPath ? data[currentSchemaPath] : undefined;
+    const currentSchemaData = currentObjectData?.PathDescription?.Self;
+
+    let keyColumnIds: number[] | undefined;
+    let columns: TColumnDescription[] | undefined;
+
+    if (isTableType(type) && isColumnEntityType(type)) {
+        const description = currentObjectData?.PathDescription?.ColumnTableDescription;
+        const columnTableSchema = prepareOlapTableSchema(description);
+        keyColumnIds = columnTableSchema.KeyColumnIds;
+        columns = columnTableSchema.Columns;
+    } else if (isExternalTable(type)) {
+        columns = currentObjectData?.PathDescription?.ExternalTableDescription?.Columns;
+    } else {
+        keyColumnIds = currentObjectData?.PathDescription?.Table?.KeyColumnIds;
+        columns = currentObjectData?.PathDescription?.Table?.Columns;
+    }
 
     useEffect(() => {
-        const {type} = props;
         const isTable = isTableType(type);
 
-        if (type && !isTable && !TENANT_INFO_TABS.find((el) => el.id === infoTab)) {
-            history.push({
-                pathname: location.pathname,
-                search: qs.stringify({...queryParams, info: TenantInfoTabsIds.overview}),
-            });
+        if (type && !isTable && !TENANT_INFO_TABS.find((el) => el.id === summaryTab)) {
+            dispatch(setSummaryTab(TENANT_SUMMARY_TABS_IDS.overview));
         }
-    }, [props.type]);
+    }, [dispatch, type, summaryTab]);
 
     const renderTabs = () => {
-        const isTable = isTableType(props.type);
+        const isTable = isTableType(type);
         const tabsItems = isTable ? [...TENANT_INFO_TABS, ...TENANT_SCHEMA_TAB] : TENANT_INFO_TABS;
 
         return (
@@ -157,12 +162,12 @@ function ObjectSummary(props: ObjectSummaryProps) {
                 <Tabs
                     size="l"
                     items={tabsItems}
-                    activeTab={infoTab as string}
+                    activeTab={summaryTab}
                     wrapTo={({id}, node) => {
                         const path = createHref(routes.tenant, undefined, {
                             ...queryParams,
                             name: tenantName as string,
-                            [TenantTabsGroups.info]: id,
+                            [TenantTabsGroups.summaryTab]: id,
                         });
                         return (
                             <Link to={path} key={id} className={b('tab')}>
@@ -188,12 +193,12 @@ function ObjectSummary(props: ObjectSummaryProps) {
             [EPathType.EPathTypeExtSubDomain]: undefined,
             [EPathType.EPathTypeColumnStore]: undefined,
             [EPathType.EPathTypeColumnTable]: undefined,
-            [EPathType.EPathTypeCdcStream]: () => (
-                <CDCStreamOverview data={data[currentSchemaPath]} />
-            ),
+            [EPathType.EPathTypeCdcStream]: () => <CDCStreamOverview data={currentObjectData} />,
             [EPathType.EPathTypePersQueueGroup]: () => (
-                <PersQueueGroupOverview data={data[currentSchemaPath]} />
+                <PersQueueGroupOverview data={currentObjectData} />
             ),
+            [EPathType.EPathTypeExternalTable]: undefined,
+            [EPathType.EPathTypeExternalDataSource]: undefined,
         };
 
         let component =
@@ -212,17 +217,26 @@ function ObjectSummary(props: ObjectSummaryProps) {
         return <div className={b('overview-wrapper')}>{component}</div>;
     };
 
+    const renderLoader = () => {
+        // If Loader isn't wrapped with div, SplitPane doesn't calculate panes height correctly
+        return (
+            <div>
+                <Loader />
+            </div>
+        );
+    };
+
     const renderTabContent = () => {
-        switch (infoTab) {
-            case TenantInfoTabsIds.acl: {
-                return <Acl additionalTenantInfo={props.additionalTenantInfo} />;
+        switch (summaryTab) {
+            case TENANT_SUMMARY_TABS_IDS.acl: {
+                return <Acl />;
             }
-            case TenantInfoTabsIds.schema: {
+            case TENANT_SUMMARY_TABS_IDS.schema: {
                 return loadingSchema ? (
                     renderLoader()
                 ) : (
                     <div className={b('schema')}>
-                        <SchemaViewer data={schema} />
+                        <SchemaViewer keyColumnIds={keyColumnIds} columns={columns} type={type} />
                     </div>
                 );
             }
@@ -232,18 +246,10 @@ function ObjectSummary(props: ObjectSummaryProps) {
         }
     };
 
-    const renderLoader = () => {
-        return (
-            <div className={b('loader')}>
-                <Loader size="m" />
-            </div>
-        );
-    };
-
     const renderTree = () => {
         return (
             <div className={b('tree-wrapper')}>
-                <div className={b('tree-header')}>Navigation</div>
+                <div className={b('tree-header')}>{i18n('summary.navigation')}</div>
                 <div className={b('tree')}>
                     {pathData && (
                         <SchemaTree
@@ -278,15 +284,24 @@ function ObjectSummary(props: ObjectSummaryProps) {
     };
 
     const renderCommonInfoControls = () => {
-        const showPreview = isTableType(props.type) && !isIndexTable(props.subType);
+        const showPreview = isTableType(type) && !isIndexTable(subType);
         return (
             <React.Fragment>
                 {showPreview && (
-                    <Button view="flat-secondary" onClick={onOpenPreview} title="Show preview">
+                    <Button
+                        view="flat-secondary"
+                        onClick={onOpenPreview}
+                        title={i18n('summary.showPreview')}
+                    >
                         <Icon name="tablePreview" viewBox={'0 0 16 16'} height={16} width={16} />
                     </Button>
                 )}
-                <CopyToClipboard text={currentSchemaPath} title="Copy schema path" />
+                {currentSchemaPath && (
+                    <CopyToClipboard
+                        text={currentSchemaPath}
+                        title={i18n('summary.copySchemaPath')}
+                    />
+                )}
                 <PaneVisibilityToggleButtons
                     onCollapse={onCollapseInfoHandler}
                     onExpand={onExpandInfoHandler}
@@ -298,7 +313,6 @@ function ObjectSummary(props: ObjectSummaryProps) {
     };
 
     const renderEntityTypeBadge = () => {
-        const {type} = props;
         const {Status, Reason} = currentItem;
 
         let message;
@@ -321,7 +335,7 @@ function ObjectSummary(props: ObjectSummaryProps) {
         }
         return (
             <div className={b()}>
-                <div className={b({hidden: props.isCollapsed})}>
+                <div className={b({hidden: isCollapsed})}>
                     <SplitPane
                         direction="vertical"
                         defaultSizePaneKey={DEFAULT_SIZE_TENANT_SUMMARY_KEY}
@@ -350,9 +364,9 @@ function ObjectSummary(props: ObjectSummaryProps) {
                     </SplitPane>
                 </div>
                 <PaneVisibilityToggleButtons
-                    onCollapse={props.onCollapseSummary}
-                    onExpand={props.onExpandSummary}
-                    isCollapsed={props.isCollapsed}
+                    onCollapse={onCollapseSummary}
+                    onExpand={onExpandSummary}
+                    isCollapsed={isCollapsed}
                     initialDirection="left"
                     className={b('action-button')}
                 />
@@ -362,5 +376,3 @@ function ObjectSummary(props: ObjectSummaryProps) {
 
     return renderContent();
 }
-
-export default ObjectSummary;

package/dist/containers/Tenant/Query/Issues/Issues.tsx

@@ -4,33 +4,31 @@ import cn from 'bem-cn-lite';
 import {Button, Icon, ArrowToggle} from '@gravity-ui/uikit';
 import ShortyString from '../../../../components/ShortyString/ShortyString';
 
-import {IssueType, SEVERITY, getSeverity} from './models';
+import type {ErrorResponse, IssueMessage} from '../../../../types/api/query';
 
 import fatalIcon from '../../../../assets/icons/circle-xmark.svg';
 import errorIcon from '../../../../assets/icons/triangle-exclamation.svg';
 import warningIcon from '../../../../assets/icons/circle-exclamation.svg';
 import infoIcon from '../../../../assets/icons/circle-info.svg';
 
+import {SEVERITY, getSeverity} from './models';
+
 import './Issues.scss';
 
 const blockWrapper = cn('kv-result-issues');
 const blockIssues = cn('kv-issues');
 const blockIssue = cn('kv-issue');
 
-type DataIssues = {
-    error: IssueType;
-    issues?: IssueType[];
-};
-
 interface ResultIssuesProps {
-    data: DataIssues | string;
+    data: ErrorResponse | string;
     className: string;
 }
 
 export default function ResultIssues({data, className}: ResultIssuesProps) {
     const [showIssues, setShowIssues] = React.useState(false);
 
-    const hasIssues = typeof data === 'string' ? false : Array.isArray(data?.issues);
+    const issues = typeof data === 'string' ? undefined : data?.issues;
+    const hasIssues = Array.isArray(issues) && issues.length > 0;
 
     const renderTitle = () => {
         let content;
@@ -61,37 +59,37 @@ export default function ResultIssues({data, className}: ResultIssuesProps) {
                     </Button>
                 )}
             </div>
-            {hasIssues && showIssues && (
-                <Issues issues={(data as DataIssues).issues!} className={className} />
-            )}
+            {hasIssues && showIssues && <Issues issues={issues} className={className} />}
         </div>
     );
 }
 
 interface IssuesProps {
     className?: string;
-    issues: IssueType[];
+    issues: IssueMessage[] | null | undefined;
 }
 export function Issues({issues, className}: IssuesProps) {
-    const mostSevereIssue = issues.reduce((result, issue) => {
+    const mostSevereIssue = issues?.reduce((result, issue) => {
         const severity = issue.severity ?? 10;
         return Math.min(result, severity);
     }, 10);
     return (
         <div className={blockIssues(null, className)}>
-            {issues.map((issue, index) => (
+            {issues?.map((issue, index) => (
                 <Issue key={index} issue={issue} expanded={issue === mostSevereIssue} />
             ))}
         </div>
     );
 }
 
-function Issue({issue, level = 0}: {issue: IssueType; expanded?: boolean; level?: number}) {
+function Issue({issue, level = 0}: {issue: IssueMessage; expanded?: boolean; level?: number}) {
     const [isExpand, setIsExpand] = React.useState(true);
     const severity = getSeverity(issue.severity);
-    const hasIssues = Array.isArray(issue.issues) && issue.issues.length > 0;
     const position = getIssuePosition(issue);
 
+    const issues = issue.issues;
+    const hasIssues = Array.isArray(issues) && issues.length > 0;
+
     const arrowDirection = isExpand ? 'bottom' : 'right';
 
     return (
@@ -123,18 +121,20 @@ function Issue({issue, level = 0}: {issue: IssueType; expanded?: boolean; level?
                         <ShortyString value={issue.message} expandLabel={'Show full message'} />
                     </div>
                 </span>
-                {issue.code ? <span className={blockIssue('code')}>Code: {issue.code}</span> : null}
+                {issue.issue_code ? (
+                    <span className={blockIssue('code')}>Code: {issue.issue_code}</span>
+                ) : null}
             </div>
             {hasIssues && isExpand && (
                 <div className={blockIssue('issues')}>
-                    <IssueList issues={issue.issues!} level={level + 1} expanded={isExpand} />
+                    <IssueList issues={issues} level={level + 1} expanded={isExpand} />
                 </div>
             )}
         </div>
     );
 }
 
-function IssueList(props: {issues: IssueType[]; expanded: boolean; level: number}) {
+function IssueList(props: {issues: IssueMessage[]; expanded: boolean; level: number}) {
     const {issues, level, expanded} = props;
     return (
         <div className={blockIssue('list')}>
@@ -145,7 +145,7 @@ function IssueList(props: {issues: IssueType[]; expanded: boolean; level: number
     );
 }
 
-const severityIcons: Record<SEVERITY, any> = {
+const severityIcons: Record<SEVERITY, SVGIconData> = {
     S_INFO: infoIcon,
     S_WARNING: warningIcon,
     S_ERROR: errorIcon,
@@ -162,10 +162,14 @@ function IssueSeverity({severity}: {severity: SEVERITY}) {
     );
 }
 
-function getIssuePosition(issue: IssueType) {
-    const {file, position} = issue;
+function getIssuePosition(issue: IssueMessage) {
+    const {position = {}} = issue;
+
     if (!position) {
         return false;
     }
-    return `${file ? 'file:' : ''}${position.row}:${position.column}`;
+
+    const {file, row, column} = position;
+
+    return `${file ? 'file:' : ''}${row}:${column}`;
 }

package/dist/containers/Tenant/Query/Issues/models.ts

@@ -1,14 +1,3 @@
-export interface IssueType {
-    file?: string;
-    position?: {row: number; column: number};
-    // eslint-disable-next-line camelcase
-    end_position?: {row: number; column: number};
-    message?: string;
-    code?: number;
-    severity?: number;
-    issues?: IssueType[];
-}
-
 export const SEVERITY_LIST = ['S_FATAL', 'S_ERROR', 'S_WARNING', 'S_INFO'] as const;
 
 export type SEVERITY = typeof SEVERITY_LIST[number];

package/dist/containers/Tenant/Query/Preview/Preview.tsx

@@ -15,7 +15,7 @@ import Fullscreen from '../../../../components/Fullscreen/Fullscreen';
 import {QueryResultTable} from '../../../../components/QueryResultTable';
 import EnableFullscreenButton from '../../../../components/EnableFullscreenButton/EnableFullscreenButton';
 
-import {isTableType} from '../../utils/schema';
+import {isExternalTable, isTableType} from '../../utils/schema';
 
 import i18n from '../i18n';
 
@@ -56,7 +56,7 @@ export const Preview = ({database, type}: PreviewProps) => {
                 sendQuery({
                     query,
                     database,
-                    action: 'execute-scan',
+                    action: isExternalTable(type) ? 'execute-query' : 'execute-scan',
                 }),
             );
         },
@@ -103,7 +103,7 @@ export const Preview = ({database, type}: PreviewProps) => {
     if (!isTableType(type)) {
         message = <div className={b('message-container')}>{i18n('preview.not-available')}</div>;
     } else if (error) {
-        message = <div className={b('message-container')}>{prepareQueryError(error)}</div>;
+        message = <div className={b('message-container', 'error')}>{prepareQueryError(error)}</div>;
     }
 
     const content = message ?? (

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

@@ -13,7 +13,7 @@ interface SchemaTreeProps {
     rootPath: string;
     rootName: string;
     rootType?: EPathType;
-    currentPath: string;
+    currentPath?: string;
 }
 
 export function SchemaTree(props: SchemaTreeProps) {
@@ -57,7 +57,7 @@ export function SchemaTree(props: SchemaTreeProps) {
 
     useEffect(() => {
         // if the cached path is not in the current tree, show root
-        if (!currentPath.startsWith(rootPath)) {
+        if (!currentPath?.startsWith(rootPath)) {
             handleActivePathUpdate(rootPath);
         }
     }, []);

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;