FE: Messages: Implement messages export

frontend/package.json

@@ -15,6 +15,7 @@
     "ace-builds": "1.33.0",
     "ajv": "8.8.2",
     "ajv-formats": "2.1.1",
+    "date-fns": "4.1.0",
     "json-schema-faker": "0.5.6",
     "jsonpath-plus": "10.2.0",
     "lossless-json": "2.0.11",

frontend/src/components/Topics/Topic/Messages/MessagesTable.tsx

@@ -2,11 +2,14 @@ import PageLoader from 'components/common/PageLoader/PageLoader';
 import { Table } from 'components/common/table/Table/Table.styled';
 import TableHeaderCell from 'components/common/table/TableHeaderCell/TableHeaderCell';
 import { TopicMessage } from 'generated-sources';
-import React, { useState } from 'react';
+import React, { useState, useMemo } from 'react';
+import { format } from 'date-fns';
 import { Button } from 'components/common/Button/Button';
 import * as S from 'components/common/NewTable/Table.styled';
 import { usePaginateTopics, useIsLiveMode } from 'lib/hooks/useMessagesFilters';
 import { useMessageFiltersStore } from 'lib/hooks/useMessageFiltersStore';
+import useDataSaver from 'lib/hooks/useDataSaver';
+import Select, { SelectOption } from 'components/common/Select/Select';
 
 import PreviewModal from './PreviewModal';
 import Message, { PreviewFilter } from './Message';
@@ -16,6 +19,24 @@ export interface MessagesTableProps {
   isFetching: boolean;
 }
 
+interface MessageData {
+  Value: string | undefined;
+  Offset: number;
+  Key: string | undefined;
+  Partition: number;
+  Headers: { [key: string]: string | undefined } | undefined;
+  Timestamp: Date;
+}
+
+type DownloadFormat = 'json' | 'csv';
+
+function padCurrentDateTimeString(): string {
+  const now: Date = new Date();
+  const dateTimeString: string = format(now, 'yyyy-MM-dd HH:mm:ss');
+
+  return `_${dateTimeString}`;
+}
+
 const MessagesTable: React.FC<MessagesTableProps> = ({
   messages,
   isFetching,
@@ -28,8 +49,101 @@ const MessagesTable: React.FC<MessagesTableProps> = ({
   const nextCursor = useMessageFiltersStore((state) => state.nextCursor);
   const isLive = useIsLiveMode();
 
+  const [selectedFormat, setSelectedFormat] = useState<DownloadFormat>('json');
+
+  const formatOptions: SelectOption<DownloadFormat>[] = [
+    { label: 'JSON', value: 'json' },
+    { label: 'CSV', value: 'csv' },
+  ];
+
+  const baseFileName = `topic-messages${padCurrentDateTimeString()}`;
+
+  const savedMessagesJson: MessageData[] = messages.map((message) => ({
+    Value: message.content,
+    Offset: message.offset,
+    Key: message.key,
+    Partition: message.partition,
+    Headers: message.headers,
+    Timestamp: message.timestamp,
+  }));
+
+  const convertToCSV = useMemo(() => {
+    return (messagesData: MessageData[]) => {
+      const headers = [
+        'Value',
+        'Offset',
+        'Key',
+        'Partition',
+        'Headers',
+        'Timestamp',
+      ] as const;
+      const rows = messagesData.map((msg) =>
+        headers
+          .map((header) => {
+            const value = msg[header];
+            if (header === 'Headers') {
+              return JSON.stringify(value || {});
+            }
+            return String(value ?? '');
+          })
+          .join(',')
+      );
+      return [headers.join(','), ...rows].join('\n');
+    };
+  }, []);
+
+  const jsonSaver = useDataSaver(
+    `${baseFileName}.json`,
+    JSON.stringify(savedMessagesJson, null, '\t')
+  );
+  const csvSaver = useDataSaver(
+    `${baseFileName}.csv`,
+    convertToCSV(savedMessagesJson)
+  );
+
+  const handleFormatSelect = (downloadFormat: DownloadFormat) => {
+    setSelectedFormat(downloadFormat);
+  };
+
+  const handleDownload = () => {
+    if (selectedFormat === 'json') {
+      jsonSaver.saveFile();
+    } else {
+      csvSaver.saveFile();
+    }
+  };
+
   return (
     <div style={{ position: 'relative' }}>
+      <div
+        style={{
+          display: 'flex',
+          gap: '8px',
+          marginLeft: '1rem',
+          marginBottom: '1rem',
+        }}
+      >
+        <Select<DownloadFormat>
+          id="download-format"
+          name="download-format"
+          onChange={handleFormatSelect}
+          options={formatOptions}
+          value={selectedFormat}
+          minWidth="70px"
+          selectSize="M"
+          placeholder="Select format to download"
+          disabled={isFetching || messages.length === 0}
+        />
+        <Button
+          disabled={isFetching || messages.length === 0}
+          buttonType="secondary"
+          buttonSize="M"
+          onClick={handleDownload}
+        >
+          Download Current Messages
+        </Button>
+      </div>
+
       {previewFor !== null && (
         <PreviewModal
           values={previewFor === 'key' ? keyFilters : contentFilters}