feat(SchemaViewer): refactor, add view schema

src/containers/Tenant/Diagnostics/Diagnostics.tsx

@@ -104,7 +104,14 @@ function Diagnostics(props: DiagnosticsProps) {
                 );
             }
             case TENANT_DIAGNOSTICS_TABS_IDS.schema: {
-                return <SchemaViewer path={currentSchemaPath} type={type} withFamilies />;
+                return (
+                    <SchemaViewer
+                        path={currentSchemaPath}
+                        tenantName={tenantName}
+                        type={type}
+                        extended
+                    />
+                );
             }
             case TENANT_DIAGNOSTICS_TABS_IDS.topQueries: {
                 return <TopQueries path={tenantNameString} type={type} />;

src/containers/Tenant/ObjectSummary/ObjectSummary.tsx

@@ -45,7 +45,7 @@ import {
     PaneVisibilityToggleButtons,
     paneVisibilityToggleReducerCreator,
 } from '../utils/paneVisibilityToggleHelpers';
-import {isIndexTableType, isTableType, isViewType} from '../utils/schema';
+import {isIndexTableType, isTableType} from '../utils/schema';
 
 import './ObjectSummary.scss';
 
@@ -64,6 +64,7 @@ const getTenantCommonInfoState = () => {
 interface ObjectSummaryProps {
     type?: EPathType;
     subType?: EPathSubType;
+    tenantName?: string;
     onCollapseSummary: VoidFunction;
     onExpandSummary: VoidFunction;
     isCollapsed: boolean;
@@ -72,6 +73,7 @@ interface ObjectSummaryProps {
 export function ObjectSummary({
     type,
     subType,
+    tenantName,
     onCollapseSummary,
     onExpandSummary,
     isCollapsed,
@@ -97,24 +99,20 @@ export function ObjectSummary({
         ignoreQueryPrefix: true,
     });
 
-    const {name: tenantName} = queryParams;
-
     const pathData = tenantName ? data[tenantName.toString()]?.PathDescription?.Self : undefined;
     const currentObjectData = currentSchemaPath ? data[currentSchemaPath] : undefined;
     const currentSchemaData = currentObjectData?.PathDescription?.Self;
 
     React.useEffect(() => {
-        // TODO: enable schema tab for view when supported
-        const isTable = isTableType(type) && !isViewType(type);
+        const isTable = isTableType(type);
 
         if (type && !isTable && !TENANT_INFO_TABS.find((el) => el.id === summaryTab)) {
             dispatch(setSummaryTab(TENANT_SUMMARY_TABS_IDS.overview));
         }
     }, [dispatch, type, summaryTab]);
 
     const renderTabs = () => {
-        // TODO: enable schema tab for view when supported
-        const isTable = isTableType(type) && !isViewType(type);
+        const isTable = isTableType(type);
         const tabsItems = isTable ? [...TENANT_INFO_TABS, ...TENANT_SCHEMA_TAB] : TENANT_INFO_TABS;
 
         return (
@@ -126,7 +124,7 @@ export function ObjectSummary({
                     wrapTo={({id}, node) => {
                         const path = createHref(routes.tenant, undefined, {
                             ...queryParams,
-                            name: tenantName as string,
+                            name: tenantName,
                             [TenantTabsGroups.summaryTab]: id,
                         });
                         return (
@@ -218,7 +216,9 @@ export function ObjectSummary({
                 return <Acl />;
             }
             case TENANT_SUMMARY_TABS_IDS.schema: {
-                return <SchemaViewer type={type} path={currentSchemaPath} />;
+                return (
+                    <SchemaViewer type={type} path={currentSchemaPath} tenantName={tenantName} />
+                );
             }
             default: {
                 return renderObjectOverview();

src/containers/Tenant/Schema/SchemaViewer/SchemaViewer.tsx

@@ -1,59 +1,94 @@
+import React from 'react';
+
 import DataTable from '@gravity-ui/react-data-table';
+import {skipToken} from '@reduxjs/toolkit/query';
 
 import {ResizeableDataTable} from '../../../../components/ResizeableDataTable/ResizeableDataTable';
 import {TableSkeleton} from '../../../../components/TableSkeleton/TableSkeleton';
+import {viewSchemaApi} from '../../../../store/reducers/viewSchema/viewSchema';
 import type {EPathType} from '../../../../types/api/schema';
-import {cn} from '../../../../utils/cn';
 import {DEFAULT_TABLE_SETTINGS} from '../../../../utils/constants';
 import {useTypedSelector} from '../../../../utils/hooks';
+import {
+    isColumnEntityType,
+    isExternalTableType,
+    isRowTableType,
+    isViewType,
+} from '../../utils/schema';
 
 import {
     SCHEMA_COLUMNS_WIDTH_LS_KEY,
-    SchemaViewerColumns,
-    prepareColumnDescriptions,
-    prepareFamilies,
-    prepareSchemaTableColumns,
-} from './helpers';
+    SCHEMA_TABLE_COLUMS_IDS,
+    getColumnTableColumns,
+    getExternalTableColumns,
+    getRowTableColumns,
+    getViewColumns,
+} from './columns';
+import {prepareSchemaData, prepareViewSchema} from './prepareData';
+import {b} from './shared';
 
 import './SchemaViewer.scss';
 
-const b = cn('schema-viewer');
-
 interface SchemaViewerProps {
     type?: EPathType;
     path?: string;
-    withFamilies?: boolean;
+    tenantName?: string | null;
+    extended?: boolean;
 }
 
-export const SchemaViewer = ({type, path, withFamilies = false}: SchemaViewerProps) => {
-    const {data, loading} = useTypedSelector((state) => state.schema);
-    const currentObjectData = path ? data[path] : undefined;
-
-    const {columns, keyColumnIds} = prepareColumnDescriptions(type, currentObjectData);
-    const families = prepareFamilies(currentObjectData);
-
-    return (
-        <div className={b(null)}>
-            {loading ? (
-                <TableSkeleton />
-            ) : (
-                <ResizeableDataTable
-                    columnsWidthLSKey={SCHEMA_COLUMNS_WIDTH_LS_KEY}
-                    data={columns}
-                    columns={prepareSchemaTableColumns({
-                        type,
-                        b,
-                        families,
-                        keyColumnIds,
-                        withFamilies,
-                    })}
-                    settings={DEFAULT_TABLE_SETTINGS}
-                    initialSortOrder={{
-                        columnId: SchemaViewerColumns.key,
-                        order: DataTable.ASCENDING,
-                    }}
-                />
-            )}
-        </div>
-    );
+export const SchemaViewer = ({type, path, tenantName, extended = false}: SchemaViewerProps) => {
+    const {data: schemaData, loading} = useTypedSelector((state) => state.schema);
+    const currentObjectData = path ? schemaData[path] : undefined;
+
+    const viewSchemaRequestParams =
+        isViewType(type) && path && tenantName ? {path, database: tenantName} : skipToken;
+
+    const {data: viewColumnsData, isLoading: isViewSchemaLoading} =
+        viewSchemaApi.useGetViewSchemaQuery(viewSchemaRequestParams);
+
+    const tableData = React.useMemo(() => {
+        if (isViewType(type)) {
+            return prepareViewSchema(viewColumnsData);
+        }
+
+        return prepareSchemaData(type, currentObjectData);
+    }, [currentObjectData, type, viewColumnsData]);
+
+    const columns = React.useMemo(() => {
+        if (isViewType(type)) {
+            return getViewColumns();
+        }
+        if (isExternalTableType(type)) {
+            return getExternalTableColumns();
+        }
+        if (isColumnEntityType(type)) {
+            return getColumnTableColumns();
+        }
+        if (isRowTableType(type)) {
+            return getRowTableColumns(extended);
+        }
+
+        return [];
+    }, [type, extended]);
+
+    const renderContent = () => {
+        if (loading || isViewSchemaLoading) {
+            return <TableSkeleton />;
+        }
+
+        return (
+            <ResizeableDataTable
+                columnsWidthLSKey={SCHEMA_COLUMNS_WIDTH_LS_KEY}
+                data={tableData}
+                columns={columns}
+                settings={DEFAULT_TABLE_SETTINGS}
+                initialSortOrder={{
+                    columnId: SCHEMA_TABLE_COLUMS_IDS.isKeyColumn,
+                    order: DataTable.ASCENDING,
+                }}
+            />
+        );
+    };
+
+    return <div className={b(null)}>{renderContent()}</div>;
 };

src/containers/Tenant/Schema/SchemaViewer/columns.tsx

@@ -0,0 +1,123 @@
+import DataTable from '@gravity-ui/react-data-table';
+import {Icon} from '@gravity-ui/uikit';
+
+import i18n from './i18n';
+import {b} from './shared';
+import type {SchemaColumn, SchemaData} from './types';
+
+import keyIcon from '../../../../assets/icons/key.svg';
+
+export const SCHEMA_COLUMNS_WIDTH_LS_KEY = 'schemaTableColumnsWidth';
+
+export const SCHEMA_TABLE_COLUMS_IDS = {
+    id: 'id',
+    name: 'name',
+    isKeyColumn: 'isKeyColumn',
+    type: 'type',
+    notNull: 'notNull',
+    familyName: 'familyName',
+    prefferedPoolKind: 'prefferedPoolKind',
+    columnCodec: 'columnCodec',
+} satisfies Record<string, keyof SchemaData>;
+
+const idColumn: SchemaColumn = {
+    name: SCHEMA_TABLE_COLUMS_IDS.id,
+    get header() {
+        return i18n('column-title.id');
+    },
+    width: 60,
+    render: ({row}) => row.id,
+};
+const nameColumn: SchemaColumn = {
+    name: SCHEMA_TABLE_COLUMS_IDS.name,
+    get header() {
+        return i18n('column-title.name');
+    },
+    width: 100,
+    render: ({row}) => row.name,
+};
+const keyColumn: SchemaColumn = {
+    name: SCHEMA_TABLE_COLUMS_IDS.isKeyColumn,
+    get header() {
+        return i18n('column-title.key');
+    },
+    width: 70,
+    resizeMinWidth: 70,
+    // Table should start with key columns on sort click
+    defaultOrder: DataTable.ASCENDING,
+    sortAccessor: (row) => row.keyAccessor,
+    render: ({row}) => {
+        return row.isKeyColumn ? (
+            <div className={b('key-icon')}>
+                <Icon data={keyIcon} width={12} height={7} />
+            </div>
+        ) : null;
+    },
+};
+const typeColumn: SchemaColumn = {
+    name: SCHEMA_TABLE_COLUMS_IDS.type,
+    get header() {
+        return i18n('column-title.type');
+    },
+    width: 100,
+    render: ({row}) => row.type,
+};
+const notNullColumn: SchemaColumn = {
+    name: SCHEMA_TABLE_COLUMS_IDS.notNull,
+    get header() {
+        return i18n('column-title.notNull');
+    },
+    width: 100,
+    // Table should start with notNull columns on sort click
+    defaultOrder: DataTable.DESCENDING,
+    render: ({row}) => {
+        if (row.notNull) {
+            return '\u2713';
+        }
+
+        return undefined;
+    },
+};
+const familyColumn: SchemaColumn = {
+    name: SCHEMA_TABLE_COLUMS_IDS.familyName,
+    get header() {
+        return i18n('column-title.family');
+    },
+    width: 100,
+    render: ({row}) => row.familyName,
+};
+const mediaColumn: SchemaColumn = {
+    name: SCHEMA_TABLE_COLUMS_IDS.prefferedPoolKind,
+    get header() {
+        return i18n('column-title.media');
+    },
+    width: 100,
+    render: ({row}) => row.prefferedPoolKind,
+};
+const compressionColumn: SchemaColumn = {
+    name: SCHEMA_TABLE_COLUMS_IDS.columnCodec,
+    get header() {
+        return i18n('column-title.compression');
+    },
+    width: 100,
+    render: ({row}) => row.columnCodec,
+};
+
+export function getViewColumns(): SchemaColumn[] {
+    return [nameColumn, typeColumn];
+}
+export function getExternalTableColumns(): SchemaColumn[] {
+    return [idColumn, nameColumn, typeColumn, notNullColumn];
+}
+export function getColumnTableColumns(): SchemaColumn[] {
+    return [idColumn, keyColumn, nameColumn, typeColumn, notNullColumn];
+}
+export function getRowTableColumns(extended: boolean): SchemaColumn[] {
+    const rowTableColumns = [idColumn, keyColumn, nameColumn, typeColumn, notNullColumn];
+
+    if (extended) {
+        return rowTableColumns.concat(familyColumn, mediaColumn, compressionColumn);
+    }
+
+    return rowTableColumns;
+}