feat(Preview): add preview for topics

Author: Raubzeug

src/containers/Tenant/Diagnostics/TopicData/columns/Columns.scss

@@ -1,16 +1,4 @@
 .ydb-diagnostics-topic-data-columns {
-    &__timestamp-ms {
-        color: var(--g-color-text-secondary);
-    }
-
-    &__ts-diff_danger {
-        color: var(--g-color-text-danger);
-    }
-    &__message_clickable {
-        cursor: pointer;
-
-        color: var(--g-color-text-info);
-    }
     &__offset_removed {
         text-decoration: line-through;
     }

src/containers/Tenant/Diagnostics/TopicData/columns/columns.tsx

@@ -1,6 +1,5 @@
-import React from 'react';
-
 import DataTable from '@gravity-ui/react-data-table';
+import type {TextProps} from '@gravity-ui/uikit';
 import {Text} from '@gravity-ui/uikit';
 import {isNil} from 'lodash';
 
@@ -63,21 +62,14 @@ export function getAllColumns() {
             ),
             align: DataTable.LEFT,
             render: ({row}) => <TopicDataTimestamp timestamp={row.WriteTimestamp} />,
-            width: 220,
+            width: 100,
         },
         {
             name: TOPIC_DATA_COLUMNS_IDS.TS_DIFF,
             header: TOPIC_DATA_COLUMNS_TITLES[TOPIC_DATA_COLUMNS_IDS.TS_DIFF],
             align: DataTable.RIGHT,
-            render: ({row}) => {
-                const numericValue = safeParseNumber(row.TimestampDiff);
-                return (
-                    <span className={b('ts-diff', {danger: numericValue >= 100_000})}>
-                        {formatToMs(numericValue)}
-                    </span>
-                );
-            },
-            width: 90,
+            render: ({row: {TimestampDiff}}) => <TopicDataTsDiff value={TimestampDiff} />,
+            width: 110,
             note: i18n('context_ts-diff'),
         },
         {
@@ -99,43 +91,16 @@ export function getAllColumns() {
             name: TOPIC_DATA_COLUMNS_IDS.MESSAGE,
             header: TOPIC_DATA_COLUMNS_TITLES[TOPIC_DATA_COLUMNS_IDS.MESSAGE],
             align: DataTable.LEFT,
-            render: ({row: {Message, OriginalSize}}) => {
-                if (isNil(Message)) {
-                    return EMPTY_DATA_PLACEHOLDER;
-                }
-                let encryptedMessage;
-                let invalid = false;
-                try {
-                    encryptedMessage = atob(Message);
-                } catch {
-                    encryptedMessage = i18n('description_failed-decode');
-                    invalid = true;
-                }
-
-                const truncated = safeParseNumber(OriginalSize) > TOPIC_MESSAGE_SIZE_LIMIT;
-                return (
-                    <Text
-                        variant="body-2"
-                        color={invalid ? 'secondary' : 'primary'}
-                        className={b('message', {invalid})}
-                    >
-                        {encryptedMessage}
-                        {truncated && (
-                            <Text color="secondary" className={b('truncated')}>
-                                {' '}
-                                {i18n('description_truncated')}
-                            </Text>
-                        )}
-                    </Text>
-                );
-            },
+            render: ({row: {Message, OriginalSize}}) => (
+                <TopicDataMessage message={Message} size={OriginalSize} />
+            ),
             width: 500,
         },
         {
             name: TOPIC_DATA_COLUMNS_IDS.SIZE,
             header: TOPIC_DATA_COLUMNS_TITLES[TOPIC_DATA_COLUMNS_IDS.SIZE],
             align: DataTable.RIGHT,
-            render: ({row}) => formatBytes(row.StorageSize),
+            render: ({row: {StorageSize}}) => <TopicDataSize size={StorageSize} />,
             width: 100,
         },
         {
@@ -146,7 +111,7 @@ export function getAllColumns() {
                 />
             ),
             align: DataTable.RIGHT,
-            render: ({row}) => formatBytes(row.OriginalSize),
+            render: ({row: {OriginalSize}}) => <TopicDataSize size={OriginalSize} />,
             width: 100,
         },
         {
@@ -193,21 +158,86 @@ export const REQUIRED_TOPIC_DATA_COLUMNS: TopicDataColumnId[] = ['offset'];
 interface TopicDataTimestampProps {
     timestamp?: string;
 }
-function TopicDataTimestamp({timestamp}: TopicDataTimestampProps) {
+export function TopicDataTimestamp({timestamp}: TopicDataTimestampProps) {
     if (!timestamp) {
         return EMPTY_DATA_PLACEHOLDER;
     }
     const formatted = formatTimestamp(timestamp);
     const splitted = formatted.split('.');
     const ms = splitted.pop();
     return (
-        <React.Fragment>
+        <Text variant="body-2">
             {splitted.join('.')}
-            <span className={b('timestamp-ms')}>.{ms}</span>
-        </React.Fragment>
+            <Text variant="body-2" color="secondary">
+                .{ms}
+            </Text>
+        </Text>
     );
 }
 
+interface TopicDataTsDiffProps {
+    value?: string;
+    baseColor?: TextProps['color'];
+    variant?: TextProps['variant'];
+}
+
+export function TopicDataTsDiff({
+    value,
+    baseColor = 'primary',
+    variant = 'body-2',
+}: TopicDataTsDiffProps) {
+    const numericValue = safeParseNumber(value);
+    return (
+        <Text variant={variant} color={numericValue >= 100_000 ? 'danger' : baseColor}>
+            {formatToMs(numericValue)}
+        </Text>
+    );
+}
+
+interface TopicDataMessageProps {
+    message?: string;
+    size?: number;
+}
+
+export function TopicDataMessage({message, size}: TopicDataMessageProps) {
+    if (isNil(message)) {
+        return EMPTY_DATA_PLACEHOLDER;
+    }
+    let encryptedMessage;
+    let invalid = false;
+    try {
+        encryptedMessage = atob(message);
+    } catch {
+        encryptedMessage = i18n('description_failed-decode');
+        invalid = true;
+    }
+
+    const truncated = safeParseNumber(size) > TOPIC_MESSAGE_SIZE_LIMIT;
+    return (
+        <Text
+            variant="body-2"
+            color={invalid ? 'secondary' : 'primary'}
+            className={b('message', {invalid})}
+        >
+            {encryptedMessage}
+            {truncated && (
+                <Text color="secondary" className={b('truncated')}>
+                    {' '}
+                    {i18n('description_truncated')}
+                </Text>
+            )}
+        </Text>
+    );
+}
+
+interface TopicDataSizeProps {
+    size?: number;
+}
+
+export function TopicDataSize({size}: TopicDataSizeProps) {
+    return formatBytes(size);
+}
+
 function valueOrPlaceholder(
     value: string | number | undefined,
     placeholder = EMPTY_DATA_PLACEHOLDER,

src/containers/Tenant/Diagnostics/TopicData/i18n/en.json

@@ -2,7 +2,7 @@
   "label_offset": "Offset",
   "label_timestamp-create": "Timestamp Create",
   "label_timestamp-write": "Timestamp Write",
-  "label_ts_diff": "TS Diff",
+  "label_ts_diff": "Write Lag",
   "label_key": "Key",
   "label_metadata": "Metadata",
   "label_message": "Message",

src/containers/Tenant/Query/Preview/Preview.scss

@@ -1,30 +1,22 @@
 @use '../../../../styles/mixins.scss';
 
-.kv-preview {
+.ydb-preview {
     height: 100%;
     @include mixins.flex-container();
     @include mixins.query-data-table();
     &__header {
         position: sticky;
         top: 0;
 
-        display: flex;
         flex-shrink: 0;
-        justify-content: space-between;
-        align-items: center;
 
         height: 53px;
-        padding: 0 20px;
+        padding: 0 var(--g-spacing-6);
 
         border-bottom: 1px solid var(--g-color-line-generic);
         background-color: var(--g-color-base-background);
     }
 
-    &__title {
-        display: flex;
-        gap: var(--g-spacing-1);
-    }
-
     &__table-name {
         margin-left: var(--g-spacing-1);
 
@@ -39,18 +31,15 @@
         padding: 15px 20px;
     }
 
-    &__loader-container {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-
-        height: 100%;
-    }
-
     &__result {
         overflow: auto;
 
         width: 100%;
-        padding-left: 10px;
+        padding-left: var(--g-spacing-5);
+    }
+
+    &__partition-info {
+        height: 36px;
+        padding-left: var(--g-spacing-1);
     }
 }

src/containers/Tenant/Query/Preview/Preview.tsx

@@ -1,106 +1,29 @@
-import {Xmark} from '@gravity-ui/icons';
-import {Button, Icon, Loader, Text} from '@gravity-ui/uikit';
-
-import EnableFullscreenButton from '../../../../components/EnableFullscreenButton/EnableFullscreenButton';
-import Fullscreen from '../../../../components/Fullscreen/Fullscreen';
-import {QueryResultTable} from '../../../../components/QueryResultTable';
-import {previewApi} from '../../../../store/reducers/preview';
-import {setShowPreview} from '../../../../store/reducers/schema/schema';
-import type {EPathType} from '../../../../types/api/schema';
-import {cn} from '../../../../utils/cn';
-import {useTypedDispatch} from '../../../../utils/hooks';
-import {parseQueryErrorToString} from '../../../../utils/query';
-import {isExternalTableType, isTableType} from '../../utils/schema';
+import {EPathType} from '../../../../types/api/schema';
+import {isTableType} from '../../utils/schema';
 import i18n from '../i18n';
 
-import './Preview.scss';
-
-const b = cn('kv-preview');
-
-interface PreviewProps {
-    database: string;
-    path: string;
-    type: EPathType | undefined;
-}
-
-export const Preview = ({database, path, type}: PreviewProps) => {
-    const dispatch = useTypedDispatch();
+import {Preview} from './components/PreviewView';
+import {TablePreview} from './components/TablePreview';
+import {TopicPreview} from './components/TopicPreview';
+import {b} from './shared';
+import type {PreviewContainerProps} from './types';
 
-    const isPreviewAvailable = isTableType(type);
-
-    const query = `select * from \`${path}\` limit 101`;
-    const {currentData, isFetching, error} = previewApi.useSendQueryQuery(
-        {
-            database,
-            query,
-            action: isExternalTableType(type) ? 'execute-query' : 'execute-scan',
-            limitRows: 100,
-        },
-        {
-            skip: !isPreviewAvailable,
-            refetchOnMountOrArgChange: true,
-        },
-    );
-    const loading = isFetching && currentData === undefined;
-    const data = currentData?.resultSets?.[0] ?? {};
-
-    const handleClosePreview = () => {
-        dispatch(setShowPreview(false));
-    };
+import './Preview.scss';
 
-    const renderHeader = () => {
-        return (
-            <div className={b('header')}>
-                <div className={b('title')}>
-                    {i18n('preview.title')}
-                    <Text color="secondary" variant="body-2">
-                        {data.truncated ? `${i18n('preview.truncated')} ` : ''}(
-                        {data.result?.length ?? 0})
-                    </Text>
-                    <div className={b('table-name')}>{path}</div>
-                </div>
-                <div className={b('controls-left')}>
-                    <EnableFullscreenButton disabled={Boolean(error)} />
-                    <Button
-                        view="flat-secondary"
-                        onClick={handleClosePreview}
-                        title={i18n('preview.close')}
-                    >
-                        <Icon data={Xmark} size={18} />
-                    </Button>
-                </div>
-            </div>
-        );
-    };
+export function PreviewContainer(props: PreviewContainerProps) {
+    const {type} = props;
+    const isTable = isTableType(type);
+    const isTopic = type === EPathType.EPathTypePersQueueGroup;
 
-    if (loading) {
-        return (
-            <div className={b('loader-container')}>
-                <Loader size="m" />
-            </div>
-        );
+    if (isTable) {
+        return <TablePreview {...props} />;
     }
-
-    let message;
-
-    if (!isPreviewAvailable) {
-        message = <div className={b('message-container')}>{i18n('preview.not-available')}</div>;
-    } else if (error) {
-        message = (
-            <div className={b('message-container', 'error')}>{parseQueryErrorToString(error)}</div>
-        );
+    if (isTopic) {
+        return <TopicPreview {...props} />;
     }
 
-    const content = message ?? (
-        <div className={b('result')}>
-            <QueryResultTable data={data.result} columns={data.columns} />
-        </div>
+    const renderContent = () => (
+        <div className={b('message-container')}>{i18n('preview.not-available')}</div>
     );
-
-    return (
-        <div className={b()}>
-            {renderHeader()}
-            <Fullscreen>{content}</Fullscreen>
-        </div>
-    );
-};
+    return <Preview {...props} renderResult={renderContent} />;
+}