Skip to content

Commit d512182

Browse files
RaubzeugRaubzeug
committed
fix: review
1 parent a8f7d07 commit d512182

File tree

12 files changed

+61
-61
lines changed

12 files changed

+61
-61
lines changed

‎src/components/MetricChart/getDefaultDataFormatter.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import {formatBytes} from '../../utils/bytesParsers';
22
import {EMPTY_DATA_PLACEHOLDER} from '../../utils/constants';
33
import {roundToPrecision} from '../../utils/dataFormatters/dataFormatters';
44
import {formatToMs} from '../../utils/timeParsers';
5-
import {convertToNumber} from '../../utils/utils';
5+
import {safeParseNumber} from '../../utils/utils';
66

77
import type {ChartDataType, ChartValue} from './types';
88

@@ -28,18 +28,18 @@ function formatChartValueToMs(value: ChartValue) {
2828
if (value === null) {
2929
return EMPTY_DATA_PLACEHOLDER;
3030
}
31-
return formatToMs(roundToPrecision(convertToNumber(value), 2));
31+
return formatToMs(roundToPrecision(safeParseNumber(value), 2));
3232
}
3333

3434
function formatChartValueToSize(value: ChartValue) {
3535
if (value === null) {
3636
return EMPTY_DATA_PLACEHOLDER;
3737
}
38-
return formatBytes({value: convertToNumber(value), precision: 3});
38+
return formatBytes({value: safeParseNumber(value), precision: 3});
3939
}
4040
function formatChartValueToPercent(value: ChartValue) {
4141
if (value === null) {
4242
return EMPTY_DATA_PLACEHOLDER;
4343
}
44-
return Math.round(convertToNumber(value) * 100) + '%';
44+
return Math.round(safeParseNumber(value) * 100) + '%';
4545
}

‎src/components/PaginatedTable/PaginatedTable.tsx‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ export const PaginatedTable = <T, F>({
4242
limit: chunkSize,
4343
initialEntitiesCount,
4444
fetchData,
45-
filters,
45+
filters: rawFilters,
4646
tableName,
4747
columns,
4848
getRowClassName,
@@ -73,6 +73,13 @@ export const PaginatedTable = <T, F>({
7373
chunkSize,
7474
});
7575

76+
// this prevent situation when filters are new, but active chunks is not yet recalculated (it will be done to the next rendrer, so we bring filters change on the next render too)
77+
const [filters, setFilters] = React.useState(rawFilters);
78+
79+
React.useEffect(() => {
80+
setFilters(rawFilters);
81+
}, [rawFilters]);
82+
7683
const lastChunkSize = React.useMemo(() => {
7784
// If foundEntities = 0, there will only first chunk
7885
// Display it with 1 row, to display empty data message
@@ -96,7 +103,7 @@ export const PaginatedTable = <T, F>({
96103
if (parentRef?.current) {
97104
parentRef.current.scrollTo(0, 0);
98105
}
99-
}, [filters, initialFound, initialTotal, parentRef]);
106+
}, [rawFilters, initialFound, initialTotal, parentRef]);
100107

101108
const renderChunks = () => {
102109
return activeChunks.map((isActive, index) => (

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

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,14 +5,9 @@
55
flex-grow: 1;
66

77
height: 100%;
8-
margin-right: -20px;
98

109
@include mixins.flex-container();
1110

12-
&__controls {
13-
width: 100%;
14-
}
15-
1611
&__consumer-select {
1712
width: 220px;
1813
}
@@ -33,5 +28,6 @@
3328

3429
&__table {
3530
@include mixins.freeze-nth-column(1);
31+
// padding-right: 0;
3632
}
3733
}

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

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -138,10 +138,7 @@ export const Partitions = ({path, database}: PartitionsProps) => {
138138

139139
return (
140140
<TableWithControlsLayout className={b()}>
141-
<TableWithControlsLayout.Controls className={b('controls')}>
142-
{renderControls()}
143-
</TableWithControlsLayout.Controls>
144-
141+
<TableWithControlsLayout.Controls>{renderControls()}</TableWithControlsLayout.Controls>
145142
<TableWithControlsLayout.Table>
146143
{error ? <ResponseError error={error} /> : null}
147144
{partitionsData ? renderContent() : null}

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

Lines changed: 6 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import type {TopicMessageMetadataItem} from '../../../../types/api/topic';
99
import {useAutoRefreshInterval} from '../../../../utils/hooks';
1010
import {useSelectedColumns} from '../../../../utils/hooks/useSelectedColumns';
1111
import {renderPaginatedTableErrorMessage} from '../../../../utils/renderPaginatedTableErrorMessage';
12-
import {convertToNumber} from '../../../../utils/utils';
12+
import {safeParseNumber} from '../../../../utils/utils';
1313
import {EmptyFilter} from '../../../Storage/EmptyFilter/EmptyFilter';
1414

1515
import {FullValue} from './FullValue';
@@ -69,35 +69,21 @@ export function TopicData({parentRef, path, database}: TopicDataProps) {
6969
);
7070

7171
if (selectedPartitionData) {
72-
setStartOffset(convertToNumber(selectedPartitionData.startOffset));
73-
setEndOffset(convertToNumber(selectedPartitionData.endOffset));
72+
setStartOffset(safeParseNumber(selectedPartitionData.startOffset));
73+
setEndOffset(safeParseNumber(selectedPartitionData.endOffset));
7474
}
7575
}, [selectedPartition, partitions]);
7676

77-
const numericSelectedOffset = React.useMemo(() => {
78-
return convertToNumber(selectedOffset);
79-
}, [selectedOffset]);
80-
const numericStartTimestamp = React.useMemo(() => {
81-
return convertToNumber(startTimestamp);
82-
}, [startTimestamp]);
83-
8477
const tableFilters = React.useMemo(() => {
8578
return {
8679
path,
8780
database,
8881
partition: selectedPartition ?? '',
89-
selectedOffset: numericSelectedOffset,
90-
startTimestamp: numericStartTimestamp,
82+
selectedOffset: safeParseNumber(selectedOffset),
83+
startTimestamp: safeParseNumber(startTimestamp),
9184
topicDataFilter,
9285
};
93-
}, [
94-
path,
95-
database,
96-
selectedPartition,
97-
numericSelectedOffset,
98-
numericStartTimestamp,
99-
topicDataFilter,
100-
]);
86+
}, [path, database, selectedPartition, selectedOffset, startTimestamp, topicDataFilter]);
10187

10288
const {columnsToShow, columnsToSelect, setColumns} = useSelectedColumns(
10389
getAllColumns(setFullValue),
@@ -150,8 +136,6 @@ export function TopicData({parentRef, path, database}: TopicDataProps) {
150136
<React.Fragment>
151137
<FullValue value={fullValue} onClose={() => setFullValue(undefined)} />
152138
<ResizeablePaginatedTable
153-
//if any filter change, we need to initiate a new table component to ensure correct start offset calculations in generateTopicDataGetter
154-
key={topicDataFilter + selectedOffset + startTimestamp + selectedPartition}
155139
columnsWidthLSKey={TOPIC_DATA_COLUMNS_WIDTH_LS_KEY}
156140
parentRef={parentRef}
157141
columns={columnsToShow}

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

Lines changed: 16 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import {EntitiesCount} from '../../../../../components/EntitiesCount';
1212
import type {PreparedPartitionData} from '../../../../../store/reducers/partitions/types';
1313
import {formatNumber} from '../../../../../utils/dataFormatters/dataFormatters';
1414
import {prepareErrorMessage} from '../../../../../utils/prepareErrorMessage';
15-
import {convertToNumber} from '../../../../../utils/utils';
15+
import {safeParseNumber} from '../../../../../utils/utils';
1616
import i18n from '../i18n';
1717
import {useTopicDataQueryParams} from '../useTopicDataQueryParams';
1818
import {b} from '../utils/constants';
@@ -41,8 +41,12 @@ export function TopicDataControls({
4141
partitionsLoading,
4242
partitionsError,
4343
}: TopicDataControlsProps) {
44-
const {selectedPartition, handleSelectedPartitionChange: handleSelectedPartitionParamChange} =
45-
useTopicDataQueryParams();
44+
const {
45+
selectedPartition,
46+
handleSelectedPartitionChange: handleSelectedPartitionParamChange,
47+
handleSelectedOffsetChange,
48+
handleStartTimestampChange,
49+
} = useTopicDataQueryParams();
4650

4751
const partitionsToSelect = partitions?.map(({partitionId}) => ({
4852
content: partitionId,
@@ -52,8 +56,14 @@ export function TopicDataControls({
5256
const handleSelectedPartitionChange = React.useCallback(
5357
(value: string[]) => {
5458
handleSelectedPartitionParamChange(value[0]);
59+
handleSelectedOffsetChange(undefined);
60+
handleStartTimestampChange(undefined);
5561
},
56-
[handleSelectedPartitionParamChange],
62+
[
63+
handleSelectedPartitionParamChange,
64+
handleStartTimestampChange,
65+
handleSelectedOffsetChange,
66+
],
5767
);
5868

5969
React.useEffect(() => {
@@ -87,7 +97,7 @@ export function TopicDataControls({
8797
/>
8898
<EntitiesCount
8999
label={i18n('label_offset')}
90-
current={`${formatNumber(initialOffset)}—${formatNumber(endOffset)}`}
100+
current={`${formatNumber(initialOffset)}—${formatNumber(endOffset - 1)}`}
91101
/>
92102
</React.Fragment>
93103
);
@@ -111,7 +121,7 @@ function TopicDataStartControls() {
111121
);
112122
const onStartOffsetChange = React.useCallback(
113123
(value: string) => {
114-
handleSelectedOffsetChange(convertToNumber(value));
124+
handleSelectedOffsetChange(safeParseNumber(value));
115125
},
116126
[handleSelectedOffsetChange],
117127
);

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

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,4 @@
11
.ydb-diagnostics-topic-data-columns {
2-
&__lags-header {
3-
text-align: center;
4-
}
5-
62
&__timestamp-ms {
73
color: var(--g-color-text-secondary);
84
}

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

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,15 @@ import React from 'react';
33
import DataTable from '@gravity-ui/react-data-table';
44
import {isNil} from 'lodash';
55

6+
import {EntityStatus} from '../../../../../components/EntityStatus/EntityStatus';
67
import {MultilineTableHeader} from '../../../../../components/MultilineTableHeader/MultilineTableHeader';
78
import type {Column} from '../../../../../components/PaginatedTable';
89
import type {TopicMessage, TopicMessageMetadataItem} from '../../../../../types/api/topic';
910
import {cn} from '../../../../../utils/cn';
1011
import {EMPTY_DATA_PLACEHOLDER} from '../../../../../utils/constants';
1112
import {formatBytes, formatTimestamp} from '../../../../../utils/dataFormatters/dataFormatters';
1213
import {formatToMs} from '../../../../../utils/timeParsers';
13-
import {convertToNumber} from '../../../../../utils/utils';
14+
import {safeParseNumber} from '../../../../../utils/utils';
1415
import i18n from '../i18n';
1516
import {TOPIC_DATA_COLUMNS_TITLES, codecNumberToName} from '../utils/constants';
1617
import type {TopicDataColumnId} from '../utils/types';
@@ -56,7 +57,7 @@ export function getAllColumns(setFullValue: (value: string | TopicMessageMetadat
5657
header: TOPIC_DATA_COLUMNS_TITLES[TOPIC_DATA_COLUMNS_IDS.TS_DIFF],
5758
align: DataTable.RIGHT,
5859
render: ({row}) => {
59-
const numericValue = convertToNumber(row.TimestampDiff);
60+
const numericValue = safeParseNumber(row.TimestampDiff);
6061
return (
6162
<span className={b('ts-diff', {danger: numericValue >= 100_000})}>
6263
{formatToMs(numericValue)}
@@ -147,7 +148,9 @@ export function getAllColumns(setFullValue: (value: string | TopicMessageMetadat
147148
name: TOPIC_DATA_COLUMNS_IDS.PRODUCERID,
148149
header: TOPIC_DATA_COLUMNS_TITLES[TOPIC_DATA_COLUMNS_IDS.PRODUCERID],
149150
align: DataTable.LEFT,
150-
render: ({row}) => valueOrPlaceholder(row.ProducerId),
151+
render: ({row}) => (
152+
<EntityStatus showStatus={false} name={row.ProducerId} hasClipboardButton />
153+
),
151154
width: 100,
152155
},
153156
{

‎src/containers/Tenant/Diagnostics/TopicData/getData.ts‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import {isNil} from 'lodash';
22

33
import type {FetchData} from '../../../../components/PaginatedTable';
44
import type {TopicDataRequest, TopicMessage} from '../../../../types/api/topic';
5-
import {convertToNumber} from '../../../../utils/utils';
5+
import {safeParseNumber} from '../../../../utils/utils';
66

77
import type {TopicDataFilters} from './utils/types';
88

@@ -71,19 +71,19 @@ export const generateTopicDataGetter = ({
7171

7272
const {StartOffset, EndOffset, Messages = []} = response;
7373

74-
const start = convertToNumber(StartOffset);
75-
const end = convertToNumber(EndOffset);
74+
const start = safeParseNumber(StartOffset);
75+
const end = safeParseNumber(EndOffset);
7676
//need to update start and end offsets every time data is fetched to show fresh data in parent component
7777
setStartOffset(start);
7878
setEndOffset(end);
7979

8080
if (isNil(fromOffset)) {
81-
fromOffset = Messages.length ? convertToNumber(Messages[0].Offset) : end;
81+
fromOffset = Messages.length ? safeParseNumber(Messages[0].Offset) : end;
8282
}
8383

8484
const normalizedOffset = fromOffset + tableOffset + lostOffsets;
8585
const lastMessageOffset = Messages.length
86-
? convertToNumber(Messages[Messages.length - 1].Offset)
86+
? safeParseNumber(Messages[Messages.length - 1].Offset)
8787
: 0;
8888

8989
const quantity = end - fromOffset - lostOffsets;

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,5 +17,7 @@
1717
"label_from": "From: ",
1818
"label_nothing-found": "Nothing found",
1919
"description_nothing-found": "Make the filter less strict or start over",
20-
"action_show-all": "Reset filter"
20+
"action_show-all": "Reset filter",
21+
"label_by-offset": "By offset",
22+
"label_by-timestamp": "By timestamp"
2123
}

0 commit comments

Comments
 (0)