feat(Tenant): cdc streams info

Author: ariser

src/components/InfoViewer/formatters/common.ts

@@ -0,0 +1,15 @@
+import type {TDirEntry} from '../../../types/api/schema';
+import {formatDateTime} from '../../../utils';
+
+import {createInfoFormatter} from '../utils';
+
+export const formatCommonItem = createInfoFormatter<TDirEntry>({
+    values: {
+        PathType: (value) => value?.substring('EPathType'.length),
+        CreateStep: formatDateTime,
+    },
+    labels: {
+        PathType: 'Type',
+        CreateStep: 'Created',
+    },
+});

src/components/InfoViewer/formatters/index.ts

@@ -1 +1,2 @@
+export * from './common';
 export * from './schema';

src/components/InfoViewer/formatters/schema.ts

@@ -1,4 +1,5 @@
 import type {
+    TCdcStreamDescription,
     TIndexDescription,
 } from '../../../types/api/schema';
 
@@ -16,3 +17,10 @@ export const formatTableIndexItem = createInfoFormatter<TIndexDescription>({
         DataColumnNames: 'Includes',
     },
 });
+
+export const formatCdcStreamItem = createInfoFormatter<TCdcStreamDescription>({
+    values: {
+        Mode: (value) => value?.substring('ECdcStreamMode'.length),
+        Format: (value) => value?.substring('ECdcStreamFormat'.length),
+    },
+});

src/components/InfoViewer/schemaInfo/CDCStreamInfo.tsx

@@ -0,0 +1,44 @@
+import type {TEvDescribeSchemeResult, TCdcStreamDescription} from '../../../types/api/schema';
+
+import {formatCdcStreamItem, formatCommonItem} from '../formatters';
+import {InfoViewer, InfoViewerItem} from '..';
+
+const DISPLAYED_FIELDS: Set<keyof TCdcStreamDescription> = new Set([
+    'Mode',
+    'Format',
+]);
+
+interface CDCStreamInfoProps {
+    data?: TEvDescribeSchemeResult;
+}
+
+export const CDCStreamInfo = ({data}: CDCStreamInfoProps) => {
+    if (!data) {
+        return (
+            <div className="error">No CDC Stream data</div>
+        );
+    }
+
+    const TableIndex = data.PathDescription?.CdcStreamDescription;
+    const info: Array<InfoViewerItem> = [];
+
+    info.push(formatCommonItem('PathType', data.PathDescription?.Self?.PathType));
+    info.push(formatCommonItem('CreateStep', data.PathDescription?.Self?.CreateStep));
+
+    let key: keyof TCdcStreamDescription;
+    for (key in TableIndex) {
+        if (DISPLAYED_FIELDS.has(key)) {
+            info.push(formatCdcStreamItem(key, TableIndex?.[key]));
+        }
+    }
+
+    return (
+        <>
+            {info.length ? (
+                <InfoViewer info={info}></InfoViewer>
+            ) : (
+                <>Empty</>
+            )}
+        </>
+    );
+};

src/components/InfoViewer/schemaInfo/index.ts

@@ -1 +1,2 @@
+export * from './CDCStreamInfo';
 export * from './TableIndexInfo';

src/containers/Tenant/Diagnostics/DiagnosticsPages.ts

@@ -81,6 +81,8 @@ export const TABLE_PAGES = [overview, topShards, graph, tablets, hotKeys, descri
 
 export const DIR_PAGES = [overview, topShards, describe];
 
+export const TOPIC_PAGES = [overview, describe];
+
 // verbose mapping to guarantee correct tabs for new path types
 // TS will error when a new type is added but not mapped here
 const pathTypeToPages: Record<EPathType, Page[] | undefined> = {
@@ -95,7 +97,8 @@ const pathTypeToPages: Record<EPathType, Page[] | undefined> = {
 
     [EPathType.EPathTypeDir]: DIR_PAGES,
     [EPathType.EPathTypeTableIndex]: DIR_PAGES,
-    [EPathType.EPathTypeCdcStream]: DIR_PAGES,
+    
+    [EPathType.EPathTypeCdcStream]: TOPIC_PAGES,
 };
 
 export const getPagesByType = (type?: EPathType) =>

src/containers/Tenant/Diagnostics/Overview/Overview.tsx

@@ -6,7 +6,10 @@ import {Loader} from '@yandex-cloud/uikit';
 
 //@ts-ignore
 import SchemaInfoViewer from '../../Schema/SchemaInfoViewer/SchemaInfoViewer';
-import {TableIndexInfo} from '../../../../components/InfoViewer/schemaInfo';
+import {
+    CDCStreamInfo,
+    TableIndexInfo,
+} from '../../../../components/InfoViewer/schemaInfo';
 
 import {EPathType} from '../../../../types/api/schema';
 import {isColumnEntityType, isTableType} from '../../utils/schema';
@@ -125,7 +128,7 @@ function Overview(props: OverviewProps) {
             [EPathType.EPathTypeExtSubDomain]: undefined,
             [EPathType.EPathTypeColumnStore]: undefined,
             [EPathType.EPathTypeColumnTable]: undefined,
-            [EPathType.EPathTypeCdcStream]: undefined,
+            [EPathType.EPathTypeCdcStream]: () => <CDCStreamInfo data={schemaData} />,
         };
 
         return (props.type && pathTypeToComponent[props.type]?.()) || (

src/types/api/schema.ts

@@ -56,9 +56,11 @@ interface TPathDescription {
     ColumnTableDescription?: unknown;
 
     TableIndex?: TIndexDescription;
+
+    CdcStreamDescription?: TCdcStreamDescription;
 }
 
-interface TDirEntry {
+export interface TDirEntry {
     Name?: string;
     /** uint64 */
     PathId?: string;
@@ -208,6 +210,44 @@ export interface TIndexDescription {
     DataSize?: string;
 }
 
+enum ECdcStreamMode {
+    ECdcStreamModeInvalid = 'ECdcStreamModeInvalid',
+    ECdcStreamModeKeysOnly = 'ECdcStreamModeKeysOnly',
+    ECdcStreamModeUpdate = 'ECdcStreamModeUpdate',
+    ECdcStreamModeNewImage = 'ECdcStreamModeNewImage',
+    ECdcStreamModeOldImage = 'ECdcStreamModeOldImage',
+    ECdcStreamModeNewAndOldImages = 'ECdcStreamModeNewAndOldImages',
+}
+
+enum ECdcStreamFormat {
+    ECdcStreamFormatInvalid = 'ECdcStreamFormatInvalid',
+    ECdcStreamFormatProto = 'ECdcStreamFormatProto',
+    ECdcStreamFormatJson = 'ECdcStreamFormatJson',
+}
+
+enum ECdcStreamState {
+    ECdcStreamStateInvalid = 'ECdcStreamStateInvalid',
+    ECdcStreamStateReady = 'ECdcStreamStateReady',
+    ECdcStreamStateDisabled = 'ECdcStreamStateDisabled',
+}
+
+interface TPathID {
+    /** fixed64 */
+    OwnerId?: string;
+    /** uint64 */
+    LocalId?: string;
+}
+
+export interface TCdcStreamDescription {
+    Name?: string;
+    Mode?: ECdcStreamMode;
+    Format?: ECdcStreamFormat;
+    PathId?: TPathID;
+    State?: ECdcStreamState;
+    /** uint64 */
+    SchemaVersion?: string;
+}
+
 // incomplete
 export enum EPathType {
     EPathTypeInvalid = 'EPathTypeInvalid',