Skip to content

Commit 5c4489f

Browse files
RaubzeugRaubzeug
committed
fixes
1 parent 3bd7554 commit 5c4489f

File tree

17 files changed

+204
-76
lines changed

17 files changed

+204
-76
lines changed

‎src/components/EntityStatus/EntityStatus.tsx

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ const b = cn('entity-status');
1616
interface EntityStatusProps {
1717
status?: EFlag;
1818
name?: string;
19+
renderName?: (name?: string) => React.ReactNode;
1920
label?: string;
2021
path?: string;
2122
iconPath?: string;
@@ -34,9 +35,14 @@ interface EntityStatusProps {
3435
className?: string;
3536
}
3637

38+
function defaultRenderName(name?: string) {
39+
return name ?? '';
40+
}
41+
3742
export function EntityStatus({
3843
status = EFlag.Grey,
3944
name = '',
45+
renderName = defaultRenderName,
4046
label,
4147
path,
4248
iconPath,
@@ -75,14 +81,14 @@ export function EntityStatus({
7581
if (externalLink) {
7682
return (
7783
<UIKitLink className={b('name')} href={path}>
78-
{name}
84+
{renderName(name)}
7985
</UIKitLink>
8086
);
8187
}
8288

8389
return (
8490
<InternalLink className={b('name')} to={path}>
85-
{name}
91+
{renderName(name)}
8692
</InternalLink>
8793
);
8894
}

‎src/components/JsonViewer/JsonViewer.scss

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@
44
--data-table-row-height: 20px;
55
--toolbar-background-color: var(--g-color-base-background);
66

7+
width: max-content;
8+
79
&__toolbar {
810
position: sticky;
911
z-index: 2;

‎src/components/JsonViewer/components/FullValueDialog.tsx

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,12 @@ interface FullValueDialogProps {
1414
}
1515

1616
export function FullValueDialog({onClose, text, starts, length}: FullValueDialogProps) {
17+
//if dialog opens from Drawer, outside click should not close Drawer
18+
const handleClickOutside = (e: MouseEvent) => {
19+
e.stopPropagation();
20+
};
1721
return (
18-
<Dialog open={true} onClose={onClose}>
22+
<Dialog open={true} onClose={onClose} onOutsideClick={handleClickOutside}>
1923
<Dialog.Header caption={i18n('description_full-value')} />
2024
<Dialog.Divider />
2125
<Dialog.Body>

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -17,9 +17,6 @@
1717
&__offset-input {
1818
width: max-content;
1919
}
20-
&__column-setup {
21-
margin-left: auto;
22-
}
2320

2421
&__row {
2522
&_active {
@@ -33,4 +30,7 @@
3330
color: var(--g-color-text-secondary);
3431
}
3532
}
33+
&__scroll-button {
34+
margin-right: var(--g-spacing-half);
35+
}
3636
}

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

Lines changed: 55 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,7 @@ interface TopicDataProps {
4646
database: string;
4747
parentRef: React.RefObject<HTMLElement>;
4848
}
49+
const PAGINATED_TABLE_LIMIT = 50_000;
4950

5051
const columns = getAllColumns();
5152

@@ -106,19 +107,45 @@ export function TopicData({parentRef, path, database}: TopicDataProps) {
106107
{pollingInterval: autoRefreshInterval},
107108
);
108109

110+
const calculateBoundOffsets = React.useCallback(
111+
({startOffset, endOffset}: {startOffset: number; endOffset: number}) => {
112+
const normolizedNewStartOffset = Math.max(
113+
endOffset - PAGINATED_TABLE_LIMIT,
114+
safeParseNumber(startOffset),
115+
);
116+
return {newStartOffset: normolizedNewStartOffset, newEndOffset: endOffset};
117+
},
118+
[],
119+
);
120+
109121
React.useEffect(() => {
110122
const selectedPartitionData = partitions?.find(
111123
({partitionId}) => partitionId === selectedPartition,
112124
);
113125
if (selectedPartitionData) {
114-
if (!baseOffset) {
115-
setBaseOffset(safeParseNumber(selectedPartitionData.startOffset));
116-
}
126+
let endOffset = baseEndOffset;
117127
if (!baseEndOffset) {
118-
setBaseEndOffset(safeParseNumber(selectedPartitionData.endOffset));
128+
endOffset = safeParseNumber(selectedPartitionData.endOffset);
129+
setBaseEndOffset(endOffset);
130+
}
131+
if (!baseOffset) {
132+
const {newStartOffset} = calculateBoundOffsets({
133+
startOffset: safeParseNumber(selectedPartitionData.startOffset),
134+
endOffset: endOffset ?? 0,
135+
});
136+
137+
setBaseOffset(newStartOffset);
119138
}
120139
}
121-
}, [selectedPartition, partitions, baseOffset, baseEndOffset, startOffset, endOffset]);
140+
}, [
141+
selectedPartition,
142+
partitions,
143+
baseOffset,
144+
baseEndOffset,
145+
startOffset,
146+
endOffset,
147+
calculateBoundOffsets,
148+
]);
122149

123150
React.useEffect(() => {
124151
if (partitions && partitions.length && isNil(selectedPartition)) {
@@ -137,6 +164,22 @@ export function TopicData({parentRef, path, database}: TopicDataProps) {
137164
REQUIRED_TOPIC_DATA_COLUMNS,
138165
);
139166

167+
const setBoundOffsets = React.useCallback(
168+
({startOffset, endOffset}: {startOffset: number; endOffset: number}) => {
169+
const {newStartOffset, newEndOffset} = calculateBoundOffsets({
170+
startOffset,
171+
endOffset,
172+
});
173+
const normolizedNewStartOffset = Math.max(
174+
newEndOffset - PAGINATED_TABLE_LIMIT,
175+
safeParseNumber(newStartOffset),
176+
);
177+
setStartOffset(normolizedNewStartOffset);
178+
setEndOffset(newEndOffset);
179+
},
180+
[calculateBoundOffsets],
181+
);
182+
140183
React.useEffect(() => {
141184
//values should be recalculated only when data is fetched
142185
if (isFetching || (!currentData && !error)) {
@@ -148,10 +191,12 @@ export function TopicData({parentRef, path, database}: TopicDataProps) {
148191
setEmptyData(true);
149192
}
150193
if (currentData) {
151-
setStartOffset(safeParseNumber(currentData.StartOffset));
152-
setEndOffset(safeParseNumber(currentData.EndOffset));
194+
setBoundOffsets({
195+
startOffset: safeParseNumber(currentData.StartOffset),
196+
endOffset: safeParseNumber(currentData.EndOffset),
197+
});
153198
}
154-
}, [isFetching, currentData, error]);
199+
}, [isFetching, currentData, error, setBoundOffsets]);
155200

156201
const tableFilters = React.useMemo(
157202
() => ({
@@ -238,8 +283,8 @@ export function TopicData({parentRef, path, database}: TopicDataProps) {
238283
};
239284

240285
const getTopicData = React.useMemo(
241-
() => generateTopicDataGetter({setEndOffset, setStartOffset, baseOffset}),
242-
[baseOffset],
286+
() => generateTopicDataGetter({setBoundOffsets, baseOffset}),
287+
[baseOffset, setBoundOffsets],
243288
);
244289

245290
const closeDrawer = React.useCallback(() => {

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -99,7 +99,6 @@ export function TopicDataControls({
9999
</Text>
100100
)}
101101
<TableColumnSetup
102-
className={b('column-setup')}
103102
popupWidth={242}
104103
items={columnsToSelect}
105104
showStatus
@@ -196,6 +195,7 @@ function TopicDataStartControls({scrollToOffset}: TopicDataStartControlsProps) {
196195
<ActionTooltip title={i18n('action_scroll-selected')}>
197196
<Button
198197
disabled={isNil(selectedOffset) || selectedOffset === ''}
198+
className={b('scroll-button')}
199199
view="flat-action"
200200
size="xs"
201201
onClick={() => {

‎src/containers/Tenant/Diagnostics/TopicData/TopicMessageDetails/TopicMessageDetails.scss

Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,12 @@
1+
@use '../../../../../styles/mixins.scss';
2+
13
.ydb-diagnostics-message-details {
24
width: 100%;
35
height: 100%;
46
padding: var(--g-spacing-4);
57

8+
@include mixins.body-2-typography();
9+
610
&__list {
711
--g-definition-list-item-gap: var(--g-spacing-1);
812
}
@@ -22,7 +26,15 @@
2226
border-bottom: 1px solid var(--g-color-line-generic);
2327
}
2428
&__section-content {
25-
padding: var(--g-spacing-1) var(--g-spacing-2) var(--g-spacing-3) var(--g-spacing-3);
29+
padding: var(--g-spacing-2) 0 0 0;
30+
}
31+
&__section-scroll-container {
32+
overflow: auto;
33+
34+
max-height: 80vh;
35+
padding: 0 var(--g-spacing-2) var(--g-spacing-3) var(--g-spacing-3);
36+
scrollbar-width: thin;
37+
scrollbar-color: var(--g-color-line-generic) transparent;
2638
}
2739
&__message-meta {
2840
padding-right: var(--g-spacing-9);
@@ -32,10 +44,6 @@
3244
background-color: var(--code-background-color);
3345
}
3446

35-
&__message_json {
36-
min-width: max-content;
37-
}
38-
3947
&__string-message {
4048
overflow: hidden;
4149

‎src/containers/Tenant/Diagnostics/TopicData/TopicMessageDetails/components/TopicDataSection.tsx

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -16,18 +16,18 @@ export function TopicDataSection({
1616
renderToolbar,
1717
}: TopicDataSectionProps) {
1818
return (
19-
<div className={b('section', className)}>
19+
<Flex direction="column" className={b('section', className)}>
2020
<Flex
2121
className={b('section-title-wrapper')}
2222
justifyContent="space-between"
2323
alignItems="center"
2424
>
25-
<Flex gap={4}>
26-
{title}
27-
{renderToolbar?.()}
28-
</Flex>
25+
{title}
26+
{renderToolbar?.()}
2927
</Flex>
30-
<div className={b('section-content')}>{children}</div>
31-
</div>
28+
<div className={b('section-content')}>
29+
<div className={b('section-scroll-container')}>{children}</div>
30+
</div>
31+
</Flex>
3232
);
3333
}

‎src/containers/Tenant/Diagnostics/TopicData/TopicMessageDetails/components/TopicMessage.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,7 @@ export function TopicMessage({offset, size, message}: TopicMessageProps) {
6868
) : (
6969
<div className={b('string-message')}>
7070
{/* key is used to reset string's state when toggle fullscreen: otherwise if very long string is expanded, it may be performance issues on open fullscreen mode https://github.com/ydb-platform/ydb-embedded-ui/issues/2265 */}
71-
<ShortyString key={String(isFullscreen)} value={preparedMessage} limit={1000} />
71+
<ShortyString key={String(isFullscreen)} value={preparedMessage} limit={2000} />
7272
</div>
7373
);
7474

@@ -100,7 +100,7 @@ export function TopicMessage({offset, size, message}: TopicMessageProps) {
100100
<TopicDataSection
101101
title={<MessageTitle truncated={truncated} />}
102102
renderToolbar={renderToolbar}
103-
className={b('message', {json: isJson})}
103+
className={b('message')}
104104
>
105105
{messageContent}
106106
</TopicDataSection>

‎src/containers/Tenant/Diagnostics/TopicData/TopicMessageDetails/components/TopicMessageGeneralInfo.tsx

Lines changed: 25 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,38 @@
11
import {DefinitionList, Flex} from '@gravity-ui/uikit';
22

33
import type {TopicMessage} from '../../../../../../types/api/topic';
4+
import type {ValueOf} from '../../../../../../types/common';
5+
import {formatTimestamp} from '../../../../../../utils/dataFormatters/dataFormatters';
46
import {TOPIC_DATA_COLUMNS_IDS} from '../../utils/types';
57
import {b} from '../shared';
68

79
import {fields} from './fields';
810

9-
const dataGroups = [
11+
const dataGroups: {
12+
name: ValueOf<typeof TOPIC_DATA_COLUMNS_IDS>;
13+
copy?: (row: TopicMessage) => string | undefined;
14+
}[][] = [
1015
[
11-
{name: TOPIC_DATA_COLUMNS_IDS.PARTITION, copy: false},
12-
{name: TOPIC_DATA_COLUMNS_IDS.OFFSET, copy: false},
13-
{name: TOPIC_DATA_COLUMNS_IDS.SIZE, copy: false},
16+
{name: TOPIC_DATA_COLUMNS_IDS.PARTITION},
17+
{name: TOPIC_DATA_COLUMNS_IDS.OFFSET},
18+
{name: TOPIC_DATA_COLUMNS_IDS.SIZE},
1419
],
1520
[
16-
{name: TOPIC_DATA_COLUMNS_IDS.TIMESTAMP_CREATE, copy: false},
17-
{name: TOPIC_DATA_COLUMNS_IDS.TIMESTAMP_WRITE, copy: false},
18-
{name: TOPIC_DATA_COLUMNS_IDS.TS_DIFF, copy: false},
21+
{
22+
name: TOPIC_DATA_COLUMNS_IDS.TIMESTAMP_CREATE,
23+
copy: (row) => formatTimestamp(row.CreateTimestamp),
24+
},
25+
{
26+
name: TOPIC_DATA_COLUMNS_IDS.TIMESTAMP_WRITE,
27+
copy: (row) => formatTimestamp(row.WriteTimestamp),
28+
},
29+
{name: TOPIC_DATA_COLUMNS_IDS.TS_DIFF},
1930
],
2031
[
21-
{name: TOPIC_DATA_COLUMNS_IDS.ORIGINAL_SIZE, copy: false},
22-
{name: TOPIC_DATA_COLUMNS_IDS.CODEC, copy: false},
23-
{name: TOPIC_DATA_COLUMNS_IDS.PRODUCERID, copy: true},
24-
{name: TOPIC_DATA_COLUMNS_IDS.SEQNO, copy: false},
32+
{name: TOPIC_DATA_COLUMNS_IDS.ORIGINAL_SIZE},
33+
{name: TOPIC_DATA_COLUMNS_IDS.CODEC},
34+
{name: TOPIC_DATA_COLUMNS_IDS.PRODUCERID, copy: (row) => row.ProducerId},
35+
{name: TOPIC_DATA_COLUMNS_IDS.SEQNO},
2536
],
2637
];
2738

@@ -35,12 +46,13 @@ export function TopicMessageGeneralInfo({messageData}: TopicMessageGeneralInfoPr
3546
{dataGroups.map((group, index) => (
3647
<DefinitionList className={b('list')} nameMaxWidth={200} key={index}>
3748
{group.map((item) => {
38-
const column = fields.find((c) => c.name === item.name);
49+
const column = fields.find((f) => f.name === item.name);
50+
const copyText = item.copy?.(messageData);
3951
return (
4052
<DefinitionList.Item
4153
key={item.name}
4254
name={column?.header}
43-
copyText={item.copy ? item.name : undefined}
55+
copyText={copyText}
4456
>
4557
{column?.render?.({row: messageData})}
4658
</DefinitionList.Item>

0 commit comments

Comments
 (0)