fix

Author: Raubzeug

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

@@ -53,8 +53,8 @@ export function TopicData({parentRef, path, database}: TopicDataProps) {
     const [controlsKey, setControlsKey] = React.useState(0);
     const [emptyData, setEmptyData] = React.useState(false);
 
-    const [baseOffset, setBaseOffset] = React.useState<number>(0);
-    const [baseEndOffset, setBaseEndOffset] = React.useState<number>(0);
+    const [baseOffset, setBaseOffset] = React.useState<number>();
+    const [baseEndOffset, setBaseEndOffset] = React.useState<number>();
 
     const startRef = React.useRef<number>();
     startRef.current = startOffset;
@@ -242,20 +242,22 @@ export function TopicData({parentRef, path, database}: TopicDataProps) {
     return (
         <React.Fragment>
             <FullValue value={fullValue} onClose={() => setFullValue(undefined)} />
-            <ResizeablePaginatedTable
-                columnsWidthLSKey={TOPIC_DATA_COLUMNS_WIDTH_LS_KEY}
-                parentRef={parentRef}
-                columns={columnsToShow}
-                fetchData={getTopicData}
-                initialEntitiesCount={baseEndOffset - baseOffset}
-                limit={TOPIC_DATA_FETCH_LIMIT}
-                renderControls={renderControls}
-                renderErrorMessage={renderPaginatedTableErrorMessage}
-                renderEmptyDataMessage={renderEmptyDataMessage}
-                filters={tableFilters}
-                tableName="topicData"
-                rowHeight={DEFAULT_TABLE_ROW_HEIGHT}
-            />
+            {!isNil(baseOffset) && !isNil(baseEndOffset) && (
+                <ResizeablePaginatedTable
+                    columnsWidthLSKey={TOPIC_DATA_COLUMNS_WIDTH_LS_KEY}
+                    parentRef={parentRef}
+                    columns={columnsToShow}
+                    fetchData={getTopicData}
+                    initialEntitiesCount={baseEndOffset - baseOffset}
+                    limit={TOPIC_DATA_FETCH_LIMIT}
+                    renderControls={renderControls}
+                    renderErrorMessage={renderPaginatedTableErrorMessage}
+                    renderEmptyDataMessage={renderEmptyDataMessage}
+                    filters={tableFilters}
+                    tableName="topicData"
+                    rowHeight={DEFAULT_TABLE_ROW_HEIGHT}
+                />
+            )}
         </React.Fragment>
     );
 }

src/containers/Tenant/Diagnostics/TopicData/__test__/getData.test.ts

@@ -36,11 +36,11 @@ describe('prepareResponse', () => {
         expect(result.messages.length).toBe(8); // 5 removed + 3 actual
 
         // Check removed messages
-        expect(result.messages[0]).toEqual({Offset: 'Offset 100 removed'});
-        expect(result.messages[1]).toEqual({Offset: 'Offset 101 removed'});
-        expect(result.messages[2]).toEqual({Offset: 'Offset 102 removed'});
-        expect(result.messages[3]).toEqual({Offset: 'Offset 103 removed'});
-        expect(result.messages[4]).toEqual({Offset: 'Offset 104 removed'});
+        expect(result.messages[0]).toEqual({Offset: '<removed> 100'});
+        expect(result.messages[1]).toEqual({Offset: '<removed> 101'});
+        expect(result.messages[2]).toEqual({Offset: '<removed> 102'});
+        expect(result.messages[3]).toEqual({Offset: '<removed> 103'});
+        expect(result.messages[4]).toEqual({Offset: '<removed> 104'});
 
         // Check actual messages
         expect(result.messages[5]).toEqual({Offset: '105'});
@@ -64,7 +64,7 @@ describe('prepareResponse', () => {
 
         // All messages should be "removed" placeholders since there are more than the limit
         for (let i = 0; i < TOPIC_DATA_FETCH_LIMIT; i++) {
-            expect(result.messages[i]).toEqual({Offset: `Offset ${100 + i} removed`});
+            expect(result.messages[i]).toEqual({Offset: `<removed> ${100 + i}`});
         }
     });
 

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

@@ -26,7 +26,7 @@ export function prepareResponse(response: TopicDataResponse, offset: number) {
     const result = [];
     for (let i = 0; i < Math.min(TOPIC_DATA_FETCH_LIMIT, removedMessagesCount); i++) {
         result.push({
-            Offset: `Offset ${offset + i} removed`,
+            Offset: `<removed> ${offset + i}`,
         });
     }
     for (