fixes

Author: Raubzeug

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

@@ -14,6 +14,9 @@
     &__date-picker {
         min-width: 265px;
     }
+    &__offset-input {
+        width: max-content;
+    }
     &__column-setup {
         margin-left: auto;
     }

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

@@ -184,27 +184,27 @@ export function TopicData({parentRef, path, database}: TopicDataProps) {
     );
 
     //this variable is used to scroll to active offset the very first time on open page
-    const initialActiveOffset = React.useMemo(() => activeOffset, []);
+    const initialActiveOffset = React.useRef(activeOffset);
 
     React.useEffect(() => {
         if (isFetching) {
             return;
         }
 
         let currentOffset: number | undefined;
-
-        if (isNil(initialActiveOffset)) {
+        if (isNil(initialActiveOffset.current)) {
             const messages = currentData?.Messages;
             if (messages?.length) {
                 currentOffset = safeParseNumber(messages[0].Offset);
             }
         } else {
-            currentOffset = safeParseNumber(initialActiveOffset);
+            currentOffset = safeParseNumber(initialActiveOffset.current);
+            initialActiveOffset.current = undefined;
         }
         if (!isNil(currentOffset)) {
             scrollToOffset(currentOffset);
         }
-    }, [currentData, isFetching, scrollToOffset, initialActiveOffset]);
+    }, [currentData, isFetching, scrollToOffset]);
 
     const renderControls: RenderControls = () => {
         return (

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

@@ -119,11 +119,22 @@ function TopicDataStartControls({scrollToOffset}: TopicDataStartControlsProps) {
         selectedOffset,
         startTimestamp,
         topicDataFilter,
+        activeOffset,
         handleSelectedOffsetChange,
         handleStartTimestampChange,
         handleTopicDataFilterChange,
     } = useTopicDataQueryParams();
 
+    const inputRef = React.useRef<HTMLInputElement>(null);
+
+    const isDrawerVisible = !isNil(activeOffset);
+
+    React.useEffect(() => {
+        if (isDrawerVisible) {
+            inputRef.current?.blur();
+        }
+    }, [isDrawerVisible]);
+
     const onFilterChange = React.useCallback(
         (value: TopicDataFilterValue) => {
             if (value === 'TIMESTAMP') {
@@ -173,6 +184,8 @@ function TopicDataStartControls({scrollToOffset}: TopicDataStartControlsProps) {
             </RadioButton>
             {topicDataFilter === 'OFFSET' && (
                 <DebouncedInput
+                    controlRef={inputRef}
+                    className={b('offset-input')}
                     value={selectedOffset ? String(selectedOffset) : ''}
                     onUpdate={onStartOffsetChange}
                     label={i18n('label_from')}

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

@@ -40,7 +40,9 @@ export function TopicMessageDetails({database, path}: TopicMessageDetailsProps)
             limit: 1,
             message_size_limit: MESSAGE_SIZE_LIMIT,
         };
-        params.offset = safeParseNumber(activeOffset);
+        const parsedOffset = safeParseNumber(activeOffset);
+        params.offset = parsedOffset;
+        params.last_offset = parsedOffset;
         return params;
     }, [selectedPartition, activeOffset, database, path]);
 
@@ -94,7 +96,9 @@ export function TopicMessageDetails({database, path}: TopicMessageDetailsProps)
                     justifyContent="center"
                     height="100%"
                 >
-                    <Text variant="subheader-1">{i18n('context_message-not-found')}</Text>
+                    <Text variant="subheader-1">
+                        {i18n('context_message-not-found', {offset: activeOffset})}
+                    </Text>
                     <Icon data={cryCatIcon} size={100} />
                 </Flex>
             );

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

@@ -6,7 +6,7 @@ import {ActionTooltip, Button, ClipboardButton, Flex, Icon, Text} from '@gravity
 import {JsonViewer} from '../../../../../../components/JsonViewer/JsonViewer';
 import {unipikaConvert} from '../../../../../../components/JsonViewer/unipika/unipika';
 import ShortyString from '../../../../../../components/ShortyString/ShortyString';
-import {createAndDownloadStringifiedJsonFile} from '../../../../../../utils/downloadFile';
+import {createAndDownloadFile} from '../../../../../../utils/downloadFile';
 import {useTypedSelector} from '../../../../../../utils/hooks';
 import {bytesToMB, safeParseNumber} from '../../../../../../utils/utils';
 import i18n from '../../i18n';
@@ -80,13 +80,13 @@ export function TopicMessage({offset, size, message}: TopicMessageProps) {
                         view="flat-secondary"
                         onClick={(e) => {
                             e.stopPropagation();
-                            createAndDownloadStringifiedJsonFile(
+                            createAndDownloadFile(
                                 decodedMessage,
                                 `topic-message-${offset ?? 'unknown-offset'}`,
                             );
                         }}
                     >
-                        JSON <Icon data={ArrowDownToLine} />
+                        <Icon data={ArrowDownToLine} />
                     </Button>
                 </ActionTooltip>
                 <ClipboardButton view="flat-secondary" text={decodedMessage} />

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

@@ -26,7 +26,7 @@
   "action_scroll-up": "Scroll to the start",
   "description_failed-decode": "Failed to decode message",
   "description_truncated": "[truncated]",
-  "context_message-not-found": "Message not found",
+  "context_message-not-found": "Message with offset {{offset}} not found",
   "context_get-data-error": "Failed to get message",
   "label_download": "Save message to file",
   "label_truncated": "Truncated {{size}}"

src/utils/downloadFile.ts

@@ -7,16 +7,16 @@ export function downloadFile(url: string, filename: string) {
     document.body.removeChild(link);
 }
 
-export const createAndDownloadStringifiedJsonFile = (data: string, fileName: string) => {
+export const createAndDownloadFile = (data: string, fileName: string, type?: string) => {
     const blob = new Blob([data], {
-        type: 'application/json',
+        type,
     });
     const url = URL.createObjectURL(blob);
-    downloadFile(url, `${fileName}.json`);
+    downloadFile(url, fileName);
     URL.revokeObjectURL(url);
 };
 
 export const createAndDownloadJsonFile = (data: unknown, fileName: string) => {
     const preparedData = JSON.stringify(data, null, 2);
-    createAndDownloadStringifiedJsonFile(preparedData, fileName);
+    createAndDownloadFile(preparedData, `${fileName}.json`, 'application/json');
 };