fixes

Author: Raubzeug

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

@@ -58,6 +58,7 @@ export function TopicData({parentRef, path, database}: TopicDataProps) {
     const [emptyData, setEmptyData] = React.useState(false);
 
     const [baseOffset, setBaseOffset] = React.useState<number>();
+    const [truncated, setTruncated] = React.useState(false);
     const [baseEndOffset, setBaseEndOffset] = React.useState<number>();
 
     const startRef = React.useRef<number>();
@@ -107,17 +108,6 @@ export function TopicData({parentRef, path, database}: TopicDataProps) {
         {pollingInterval: autoRefreshInterval},
     );
 
-    const calculateBoundOffsets = React.useCallback(
-        ({startOffset, endOffset}: {startOffset: number; endOffset: number}) => {
-            const normolizedNewStartOffset = Math.max(
-                endOffset - PAGINATED_TABLE_LIMIT,
-                safeParseNumber(startOffset),
-            );
-            return {newStartOffset: normolizedNewStartOffset, newEndOffset: endOffset};
-        },
-        [],
-    );
-
     React.useEffect(() => {
         const selectedPartitionData = partitions?.find(
             ({partitionId}) => partitionId === selectedPartition,
@@ -129,23 +119,17 @@ export function TopicData({parentRef, path, database}: TopicDataProps) {
                 setBaseEndOffset(endOffset);
             }
             if (!baseOffset) {
-                const {newStartOffset} = calculateBoundOffsets({
-                    startOffset: safeParseNumber(selectedPartitionData.startOffset),
-                    endOffset: endOffset ?? 0,
-                });
+                const partitionStartOffset = safeParseNumber(selectedPartitionData.startOffset);
+                const newStartOffset = Math.max(
+                    (endOffset ?? 0) - PAGINATED_TABLE_LIMIT,
+                    partitionStartOffset,
+                );
 
+                setTruncated(newStartOffset !== partitionStartOffset);
                 setBaseOffset(newStartOffset);
             }
         }
-    }, [
-        selectedPartition,
-        partitions,
-        baseOffset,
-        baseEndOffset,
-        startOffset,
-        endOffset,
-        calculateBoundOffsets,
-    ]);
+    }, [selectedPartition, partitions, baseOffset, baseEndOffset, startOffset, endOffset]);
 
     React.useEffect(() => {
         if (partitions && partitions.length && isNil(selectedPartition)) {
@@ -166,18 +150,10 @@ export function TopicData({parentRef, path, database}: TopicDataProps) {
 
     const setBoundOffsets = React.useCallback(
         ({startOffset, endOffset}: {startOffset: number; endOffset: number}) => {
-            const {newStartOffset, newEndOffset} = calculateBoundOffsets({
-                startOffset,
-                endOffset,
-            });
-            const normolizedNewStartOffset = Math.max(
-                newEndOffset - PAGINATED_TABLE_LIMIT,
-                safeParseNumber(newStartOffset),
-            );
-            setStartOffset(normolizedNewStartOffset);
-            setEndOffset(newEndOffset);
+            setStartOffset(startOffset);
+            setEndOffset(endOffset);
         },
-        [calculateBoundOffsets],
+        [],
     );
 
     React.useEffect(() => {
@@ -263,6 +239,7 @@ export function TopicData({parentRef, path, database}: TopicDataProps) {
                 partitionsError={partitionsError}
                 startOffset={startOffset}
                 endOffset={endOffset}
+                truncatedData={truncated}
                 scrollToOffset={scrollToOffset}
             />
         );

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

@@ -8,6 +8,8 @@ import type {TableColumnSetupItem} from '@gravity-ui/uikit';
 import {
     ActionTooltip,
     Button,
+    Flex,
+    HelpMark,
     Icon,
     RadioButton,
     Select,
@@ -37,6 +39,7 @@ interface TopicDataControlsProps {
 
     startOffset?: number;
     endOffset?: number;
+    truncatedData?: boolean;
     scrollToOffset: (offset: number) => void;
 }
 
@@ -50,6 +53,7 @@ export function TopicDataControls({
     partitionsLoading,
     partitionsError,
     scrollToOffset,
+    truncatedData,
 }: TopicDataControlsProps) {
     const {
         selectedPartition,
@@ -94,9 +98,12 @@ export function TopicDataControls({
             <TopicDataStartControls scrollToOffset={scrollToOffset} />
 
             {!isNil(startOffset) && !isNil(endOffset) && (
-                <Text color="secondary" whiteSpace="nowrap">
-                    {formatNumber(startOffset)}—{formatNumber(endOffset - 1)}
-                </Text>
+                <Flex gap={1}>
+                    <Text color="secondary" whiteSpace="nowrap">
+                        {formatNumber(startOffset)}—{formatNumber(endOffset - 1)}
+                    </Text>
+                    {truncatedData && <HelpMark>{i18n('description_last-messages')}</HelpMark>}
+                </Flex>
             )}
             <TableColumnSetup
                 popupWidth={242}

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

@@ -32,7 +32,7 @@ const dataGroups: {
         {name: TOPIC_DATA_COLUMNS_IDS.ORIGINAL_SIZE},
         {name: TOPIC_DATA_COLUMNS_IDS.CODEC},
         {name: TOPIC_DATA_COLUMNS_IDS.PRODUCERID, copy: (row) => row.ProducerId},
-        {name: TOPIC_DATA_COLUMNS_IDS.SEQNO},
+        {name: TOPIC_DATA_COLUMNS_IDS.SEQNO, copy: (row) => row.SeqNo},
     ],
 ];
 

src/containers/Tenant/Diagnostics/TopicData/TopicMessageDetails/components/fields.tsx

@@ -1,19 +1,27 @@
+import {isNil} from 'lodash';
+
 import type {TopicMessageEnhanced} from '../../../../../../types/api/topic';
+import {EMPTY_DATA_PLACEHOLDER} from '../../../../../../utils/constants';
 import {
     TopicDataTimestamp,
     codecColumn,
     messageColumn,
     metadataColumn,
     originalSizeColumn,
-    seqNoColumn,
     sizeColumn,
     tsDiffColumn,
-    valueOrPlaceholder,
 } from '../../columns/columns';
 import {useTopicDataQueryParams} from '../../useTopicDataQueryParams';
 import {TOPIC_DATA_COLUMNS_TITLES} from '../../utils/constants';
 import {TOPIC_DATA_COLUMNS_IDS} from '../../utils/types';
 
+function valueOrPlaceholder(
+    value: string | number | undefined,
+    placeholder = EMPTY_DATA_PLACEHOLDER,
+) {
+    return isNil(value) ? placeholder : value;
+}
+
 type TopicMessageDetailsField = {
     name: string;
     header?: React.ReactNode;
@@ -53,6 +61,13 @@ const producerIdColumn: TopicMessageDetailsField = {
         return valueOrPlaceholder(row.ProducerId);
     },
 };
+const seqNoColumn: TopicMessageDetailsField = {
+    name: TOPIC_DATA_COLUMNS_IDS.SEQNO,
+    header: TOPIC_DATA_COLUMNS_TITLES[TOPIC_DATA_COLUMNS_IDS.SEQNO],
+    render: ({row}) => {
+        return valueOrPlaceholder(row.SeqNo);
+    },
+};
 
 function PartitionId() {
     const {selectedPartition} = useTopicDataQueryParams();

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

@@ -200,8 +200,13 @@ export const seqNoColumn: Column<TopicMessageEnhanced> = {
     name: TOPIC_DATA_COLUMNS_IDS.SEQNO,
     header: TOPIC_DATA_COLUMNS_TITLES[TOPIC_DATA_COLUMNS_IDS.SEQNO],
     align: DataTable.RIGHT,
-    render: ({row}) => valueOrPlaceholder(row.SeqNo),
-    width: 70,
+    render: ({row}) =>
+        row.SeqNo ? (
+            <EntityStatus showStatus={false} name={row.SeqNo} hasClipboardButton />
+        ) : (
+            EMPTY_DATA_PLACEHOLDER
+        ),
+    width: 100,
 };
 
 export function getAllColumns() {
@@ -250,13 +255,6 @@ export function TopicDataTimestamp({timestamp}: TopicDataTimestampProps) {
     );
 }
 
-export function valueOrPlaceholder(
-    value: string | number | undefined,
-    placeholder = EMPTY_DATA_PLACEHOLDER,
-) {
-    return isNil(value) ? placeholder : value;
-}
-
 interface PartitionIdProps {
     offset?: string | number;
     removed?: boolean;

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

@@ -3,7 +3,7 @@
   "label_partition": "Partition ID",
   "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",
@@ -31,5 +31,6 @@
   "label_download": "Save message to file",
   "label_truncated": "Truncated {{size}}",
   "description_not-loaded-message": "Message was not fetched in table due to problems with big messages.\nYou can view it in side panel by clicking on Offset",
-  "description_removed-message": "Message was deleted due to retention"
+  "description_removed-message": "Message was deleted due to retention",
+  "description_last-messages": "Only last 50 000 messages from any partition are displayed"
 }