Skip to content

Commit f96650e

Browse files
RaubzeugRaubzeug
committed
feat(Preview): add preview for topics
1 parent 025d5ff commit f96650e

File tree

15 files changed

+419
-177
lines changed

15 files changed

+419
-177
lines changed

‎src/components/EntityStatus/EntityStatus.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -92,7 +92,7 @@ export function EntityStatus({
9292
</InternalLink>
9393
);
9494
}
95-
return name && <span className={b('name')}>{name}</span>;
95+
return name && <span className={b('name')}>{renderName(name)}</span>;
9696
};
9797
return (
9898
<div className={b(null, className)}>

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

Lines changed: 1 addition & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,11 @@
11
@use '../../../../../styles/mixins.scss';
22

33
.ydb-diagnostics-topic-data-columns {
4-
&__ts-diff_danger {
5-
color: var(--g-color-text-danger);
6-
}
7-
&__message_clickable {
8-
cursor: pointer;
9-
10-
color: var(--g-color-text-info);
11-
}
124
&__offset {
135
display: inline-flex;
146
align-items: center;
157
gap: var(--g-spacing-1);
16-
.g-help-mark,
17-
.g-help-mark__button {
18-
display: flex;
19-
}
20-
}
21-
&__offset {
8+
229
width: 100%;
2310
height: 100%;
2411
}

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

Lines changed: 72 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import React from 'react';
22

33
import {TriangleExclamation} from '@gravity-ui/icons';
44
import DataTable from '@gravity-ui/react-data-table';
5+
import type {TextProps} from '@gravity-ui/uikit';
56
import {ActionTooltip, Icon, Popover, Text} from '@gravity-ui/uikit';
67
import {isNil} from 'lodash';
78
import {Link} from 'react-router-dom';
@@ -88,18 +89,8 @@ export const tsDiffColumn: Column<TopicMessageEnhanced> = {
8889
name: TOPIC_DATA_COLUMNS_IDS.TS_DIFF,
8990
header: TOPIC_DATA_COLUMNS_TITLES[TOPIC_DATA_COLUMNS_IDS.TS_DIFF],
9091
align: DataTable.RIGHT,
91-
render: ({row}) => {
92-
if (isNil(row.TimestampDiff)) {
93-
return EMPTY_DATA_PLACEHOLDER;
94-
}
95-
const numericValue = safeParseNumber(row.TimestampDiff);
96-
return (
97-
<span className={b('ts-diff', {danger: numericValue >= 100_000})}>
98-
{formatToMs(numericValue)}
99-
</span>
100-
);
101-
},
102-
width: 90,
92+
render: ({row: {TimestampDiff}}) => <TopicDataTsDiff value={TimestampDiff} />,
93+
width: 110,
10394
note: i18n('context_ts-diff'),
10495
};
10596

@@ -121,44 +112,17 @@ export const messageColumn: Column<TopicMessageEnhanced> = {
121112
name: TOPIC_DATA_COLUMNS_IDS.MESSAGE,
122113
header: TOPIC_DATA_COLUMNS_TITLES[TOPIC_DATA_COLUMNS_IDS.MESSAGE],
123114
align: DataTable.LEFT,
124-
render: ({row: {Message, OriginalSize}}) => {
125-
if (isNil(Message)) {
126-
return EMPTY_DATA_PLACEHOLDER;
127-
}
128-
let encryptedMessage;
129-
let invalid = false;
130-
try {
131-
encryptedMessage = atob(Message);
132-
} catch {
133-
encryptedMessage = i18n('description_failed-decode');
134-
invalid = true;
135-
}
136-
137-
const truncated = safeParseNumber(OriginalSize) > TOPIC_MESSAGE_SIZE_LIMIT;
138-
return (
139-
<Text
140-
variant="body-2"
141-
color={invalid ? 'secondary' : 'primary'}
142-
className={b('message', {invalid})}
143-
>
144-
{encryptedMessage}
145-
{truncated && (
146-
<Text color="secondary" className={b('truncated')}>
147-
{' '}
148-
{i18n('description_truncated')}
149-
</Text>
150-
)}
151-
</Text>
152-
);
153-
},
115+
render: ({row: {Message, OriginalSize}}) => (
116+
<TopicDataMessage message={Message} size={OriginalSize} />
117+
),
154118
width: 500,
155119
};
156120

157121
export const sizeColumn: Column<TopicMessageEnhanced> = {
158122
name: TOPIC_DATA_COLUMNS_IDS.SIZE,
159123
header: TOPIC_DATA_COLUMNS_TITLES[TOPIC_DATA_COLUMNS_IDS.SIZE],
160124
align: DataTable.RIGHT,
161-
render: ({row}) => formatBytes(row.StorageSize),
125+
render: ({row: {StorageSize}}) => <TopicDataSize size={StorageSize} />,
162126
width: 100,
163127
};
164128

@@ -316,3 +280,68 @@ function Offset({offset, removed, notLoaded}: PartitionIdProps) {
316280
</Link>
317281
);
318282
}
283+
interface TopicDataTsDiffProps {
284+
value?: string;
285+
baseColor?: TextProps['color'];
286+
variant?: TextProps['variant'];
287+
}
288+
289+
export function TopicDataTsDiff({
290+
value,
291+
baseColor = 'primary',
292+
variant = 'body-2',
293+
}: TopicDataTsDiffProps) {
294+
if (isNil(value)) {
295+
return EMPTY_DATA_PLACEHOLDER;
296+
}
297+
const numericValue = safeParseNumber(value);
298+
return (
299+
<Text variant={variant} color={numericValue >= 100_000 ? 'danger' : baseColor}>
300+
{formatToMs(numericValue)}
301+
</Text>
302+
);
303+
}
304+
305+
interface TopicDataMessageProps {
306+
message?: string;
307+
size?: number;
308+
}
309+
310+
export function TopicDataMessage({message, size}: TopicDataMessageProps) {
311+
if (isNil(message)) {
312+
return EMPTY_DATA_PLACEHOLDER;
313+
}
314+
let encryptedMessage;
315+
let invalid = false;
316+
try {
317+
encryptedMessage = atob(message);
318+
} catch {
319+
encryptedMessage = i18n('description_failed-decode');
320+
invalid = true;
321+
}
322+
323+
const truncated = safeParseNumber(size) > TOPIC_MESSAGE_SIZE_LIMIT;
324+
return (
325+
<Text
326+
variant="body-2"
327+
color={invalid ? 'secondary' : 'primary'}
328+
className={b('message', {invalid})}
329+
>
330+
{encryptedMessage}
331+
{truncated && (
332+
<Text color="secondary" className={b('truncated')}>
333+
{' '}
334+
{i18n('description_truncated')}
335+
</Text>
336+
)}
337+
</Text>
338+
);
339+
}
340+
341+
interface TopicDataSizeProps {
342+
size?: number;
343+
}
344+
345+
export function TopicDataSize({size}: TopicDataSizeProps) {
346+
return formatBytes(size);
347+
}

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

Lines changed: 8 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,22 @@
11
@use '../../../../styles/mixins.scss';
22

3-
.kv-preview {
3+
.ydb-preview {
44
height: 100%;
55
@include mixins.flex-container();
66
@include mixins.query-data-table();
77
&__header {
88
position: sticky;
99
top: 0;
1010

11-
display: flex;
1211
flex-shrink: 0;
13-
justify-content: space-between;
14-
align-items: center;
1512

1613
height: 53px;
17-
padding: 0 20px;
14+
padding: 0 var(--g-spacing-6);
1815

1916
border-bottom: 1px solid var(--g-color-line-generic);
2017
background-color: var(--g-color-base-background);
2118
}
2219

23-
&__title {
24-
display: flex;
25-
gap: var(--g-spacing-1);
26-
}
27-
2820
&__table-name {
2921
margin-left: var(--g-spacing-1);
3022

@@ -39,18 +31,15 @@
3931
padding: 15px 20px;
4032
}
4133

42-
&__loader-container {
43-
display: flex;
44-
justify-content: center;
45-
align-items: center;
46-
47-
height: 100%;
48-
}
49-
5034
&__result {
5135
overflow: auto;
5236

5337
width: 100%;
54-
padding-left: 10px;
38+
padding-left: var(--g-spacing-5);
39+
}
40+
41+
&__partition-info {
42+
height: 36px;
43+
padding-left: var(--g-spacing-1);
5544
}
5645
}

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

Lines changed: 20 additions & 97 deletions
Original file line numberDiff line numberDiff line change
@@ -1,106 +1,29 @@
1-
import {Xmark} from '@gravity-ui/icons';
2-
import {Button, Icon, Loader, Text} from '@gravity-ui/uikit';
3-
4-
import EnableFullscreenButton from '../../../../components/EnableFullscreenButton/EnableFullscreenButton';
5-
import Fullscreen from '../../../../components/Fullscreen/Fullscreen';
6-
import {QueryResultTable} from '../../../../components/QueryResultTable';
7-
import {previewApi} from '../../../../store/reducers/preview';
8-
import {setShowPreview} from '../../../../store/reducers/schema/schema';
9-
import type {EPathType} from '../../../../types/api/schema';
10-
import {cn} from '../../../../utils/cn';
11-
import {useTypedDispatch} from '../../../../utils/hooks';
12-
import {parseQueryErrorToString} from '../../../../utils/query';
13-
import {isExternalTableType, isTableType} from '../../utils/schema';
1+
import {EPathType} from '../../../../types/api/schema';
2+
import {isTableType} from '../../utils/schema';
143
import i18n from '../i18n';
154

16-
import './Preview.scss';
17-
18-
const b = cn('kv-preview');
19-
20-
interface PreviewProps {
21-
database: string;
22-
path: string;
23-
type: EPathType | undefined;
24-
}
25-
26-
export const Preview = ({database, path, type}: PreviewProps) => {
27-
const dispatch = useTypedDispatch();
5+
import {Preview} from './components/PreviewView';
6+
import {TablePreview} from './components/TablePreview';
7+
import {TopicPreview} from './components/TopicPreview';
8+
import {b} from './shared';
9+
import type {PreviewContainerProps} from './types';
2810

29-
const isPreviewAvailable = isTableType(type);
30-
31-
const query = `select * from \`${path}\` limit 101`;
32-
const {currentData, isFetching, error} = previewApi.useSendQueryQuery(
33-
{
34-
database,
35-
query,
36-
action: isExternalTableType(type) ? 'execute-query' : 'execute-scan',
37-
limitRows: 100,
38-
},
39-
{
40-
skip: !isPreviewAvailable,
41-
refetchOnMountOrArgChange: true,
42-
},
43-
);
44-
const loading = isFetching && currentData === undefined;
45-
const data = currentData?.resultSets?.[0] ?? {};
46-
47-
const handleClosePreview = () => {
48-
dispatch(setShowPreview(false));
49-
};
11+
import './Preview.scss';
5012

51-
const renderHeader = () => {
52-
return (
53-
<div className={b('header')}>
54-
<div className={b('title')}>
55-
{i18n('preview.title')}
56-
<Text color="secondary" variant="body-2">
57-
{data.truncated ? `${i18n('preview.truncated')} ` : ''}(
58-
{data.result?.length ?? 0})
59-
</Text>
60-
<div className={b('table-name')}>{path}</div>
61-
</div>
62-
<div className={b('controls-left')}>
63-
<EnableFullscreenButton disabled={Boolean(error)} />
64-
<Button
65-
view="flat-secondary"
66-
onClick={handleClosePreview}
67-
title={i18n('preview.close')}
68-
>
69-
<Icon data={Xmark} size={18} />
70-
</Button>
71-
</div>
72-
</div>
73-
);
74-
};
13+
export function PreviewContainer(props: PreviewContainerProps) {
14+
const {type} = props;
15+
const isTable = isTableType(type);
16+
const isTopic = type === EPathType.EPathTypePersQueueGroup;
7517

76-
if (loading) {
77-
return (
78-
<div className={b('loader-container')}>
79-
<Loader size="m" />
80-
</div>
81-
);
18+
if (isTable) {
19+
return <TablePreview {...props} />;
8220
}
83-
84-
let message;
85-
86-
if (!isPreviewAvailable) {
87-
message = <div className={b('message-container')}>{i18n('preview.not-available')}</div>;
88-
} else if (error) {
89-
message = (
90-
<div className={b('message-container', 'error')}>{parseQueryErrorToString(error)}</div>
91-
);
21+
if (isTopic) {
22+
return <TopicPreview {...props} />;
9223
}
9324

94-
const content = message ?? (
95-
<div className={b('result')}>
96-
<QueryResultTable data={data.result} columns={data.columns} />
97-
</div>
25+
const renderContent = () => (
26+
<div className={b('message-container')}>{i18n('preview.not-available')}</div>
9827
);
99-
100-
return (
101-
<div className={b()}>
102-
{renderHeader()}
103-
<Fullscreen>{content}</Fullscreen>
104-
</div>
105-
);
106-
};
28+
return <Preview {...props} renderResult={renderContent} />;
29+
}

0 commit comments

Comments
 (0)