From c55f8c0a503cfb729b0c72d2726489f4db023c14 Mon Sep 17 00:00:00 2001 From: alexanderlz Date: Mon, 30 Dec 2024 19:20:46 +0000 Subject: [PATCH 01/12] add an option to save all messages as csv/json, Issue #688 --- .../Topics/Topic/Messages/MessagesTable.tsx | 102 ++++++++++++++++++ 1 file changed, 102 insertions(+) diff --git a/frontend/src/components/Topics/Topic/Messages/MessagesTable.tsx b/frontend/src/components/Topics/Topic/Messages/MessagesTable.tsx index 813cabcfa..dfd3c294f 100644 --- a/frontend/src/components/Topics/Topic/Messages/MessagesTable.tsx +++ b/frontend/src/components/Topics/Topic/Messages/MessagesTable.tsx @@ -7,6 +7,9 @@ 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 from 'components/common/Select/Select'; +import { SelectOption } from 'components/common/Select/Select'; import PreviewModal from './PreviewModal'; import Message, { PreviewFilter } from './Message'; @@ -16,6 +19,33 @@ 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 year: string = now.getFullYear().toString(); + const month: string = (now.getMonth() + 1).toString().padStart(2, '0'); + const day: string = now.getDate().toString().padStart(2, '0'); + const hours: string = now.getHours().toString().padStart(2, '0'); + const minutes: string = now.getMinutes().toString().padStart(2, '0'); + const seconds: string = now.getSeconds().toString().padStart(2, '0'); + + const dateTimeString: string = `${year}-${month}-${day}_${hours}-${minutes}-${seconds}`; + + return `_${dateTimeString}`; +} + + const MessagesTable: React.FC = ({ messages, isFetching, @@ -28,8 +58,80 @@ const MessagesTable: React.FC = ({ const nextCursor = useMessageFiltersStore((state) => state.nextCursor); const isLive = useIsLiveMode(); + const [selectedFormat, setSelectedFormat] = useState('json'); + + const formatOptions: SelectOption[] = [ + { label: 'JSON', value: 'json' }, + { label: 'CSV', value: 'csv' } + ]; + + const handleFormatSelect = (format: DownloadFormat) => { + setSelectedFormat(format); + }; + + const handleDownload = () => { + + 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 = (messages: MessageData[]) => { + const headers = ['Value', 'Offset', 'Key', 'Partition', 'Headers', 'Timestamp'] as const; + type Header = typeof headers[number]; + + const rows = messages.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 baseFileName = 'topic-messages'+padCurrentDateTimeString(); + const jsonSaver = useDataSaver(baseFileName+'.json', JSON.stringify(savedMessagesJson, null, '\t')); + const csvSaver = useDataSaver(baseFileName+'.csv', convertToCSV(savedMessagesJson)); + + if (selectedFormat === 'json') { + jsonSaver.saveFile(); + } else { + csvSaver.saveFile(); + } + }; + return (
+
+ + 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} + /> + +
+ {previewFor !== null && ( Date: Mon, 30 Dec 2024 20:29:17 +0000 Subject: [PATCH 02/12] linter issues fix --- .../components/Topics/Topic/Messages/MessagesTable.tsx | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/frontend/src/components/Topics/Topic/Messages/MessagesTable.tsx b/frontend/src/components/Topics/Topic/Messages/MessagesTable.tsx index dfd3c294f..5980eff97 100644 --- a/frontend/src/components/Topics/Topic/Messages/MessagesTable.tsx +++ b/frontend/src/components/Topics/Topic/Messages/MessagesTable.tsx @@ -8,8 +8,7 @@ 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 from 'components/common/Select/Select'; -import { SelectOption } from 'components/common/Select/Select'; +import { Select, SelectOption } from 'components/common/Select/Select'; import PreviewModal from './PreviewModal'; import Message, { PreviewFilter } from './Message'; @@ -82,7 +81,6 @@ const MessagesTable: React.FC = ({ const convertToCSV = (messages: MessageData[]) => { const headers = ['Value', 'Offset', 'Key', 'Partition', 'Headers', 'Timestamp'] as const; - type Header = typeof headers[number]; const rows = messages.map(msg => headers.map(header => { @@ -98,8 +96,8 @@ const MessagesTable: React.FC = ({ }; const baseFileName = 'topic-messages'+padCurrentDateTimeString(); - const jsonSaver = useDataSaver(baseFileName+'.json', JSON.stringify(savedMessagesJson, null, '\t')); - const csvSaver = useDataSaver(baseFileName+'.csv', convertToCSV(savedMessagesJson)); + const jsonSaver = useDataSaver(`${baseFileName}.json`, JSON.stringify(savedMessagesJson, null, '\t')); + const csvSaver = useDataSaver(`${baseFileName}.csv`, convertToCSV(savedMessagesJson)); if (selectedFormat === 'json') { jsonSaver.saveFile(); From 1aab310ed37b83e577b0d3819d9f7b6f6d55f702 Mon Sep 17 00:00:00 2001 From: alexanderlz Date: Mon, 30 Dec 2024 20:39:00 +0000 Subject: [PATCH 03/12] lint fixes --- frontend/src/components/Topics/Topic/Messages/MessagesTable.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/components/Topics/Topic/Messages/MessagesTable.tsx b/frontend/src/components/Topics/Topic/Messages/MessagesTable.tsx index 5980eff97..9b8463a3a 100644 --- a/frontend/src/components/Topics/Topic/Messages/MessagesTable.tsx +++ b/frontend/src/components/Topics/Topic/Messages/MessagesTable.tsx @@ -8,7 +8,7 @@ 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 Select, { SelectOption } from 'components/common/Select/Select'; import PreviewModal from './PreviewModal'; import Message, { PreviewFilter } from './Message'; From 9817ee5b01f758d1d1d541987738ab8f303e82aa Mon Sep 17 00:00:00 2001 From: alexanderlz Date: Sun, 5 Jan 2025 16:26:48 +0000 Subject: [PATCH 04/12] linter fixes + comments --- .../Topics/Topic/Messages/MessagesTable.tsx | 58 +++++++++---------- 1 file changed, 26 insertions(+), 32 deletions(-) diff --git a/frontend/src/components/Topics/Topic/Messages/MessagesTable.tsx b/frontend/src/components/Topics/Topic/Messages/MessagesTable.tsx index 9b8463a3a..94384a19f 100644 --- a/frontend/src/components/Topics/Topic/Messages/MessagesTable.tsx +++ b/frontend/src/components/Topics/Topic/Messages/MessagesTable.tsx @@ -2,7 +2,8 @@ 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'; @@ -31,15 +32,7 @@ type DownloadFormat = 'json' | 'csv'; function padCurrentDateTimeString(): string { const now: Date = new Date(); - - const year: string = now.getFullYear().toString(); - const month: string = (now.getMonth() + 1).toString().padStart(2, '0'); - const day: string = now.getDate().toString().padStart(2, '0'); - const hours: string = now.getHours().toString().padStart(2, '0'); - const minutes: string = now.getMinutes().toString().padStart(2, '0'); - const seconds: string = now.getSeconds().toString().padStart(2, '0'); - - const dateTimeString: string = `${year}-${month}-${day}_${hours}-${minutes}-${seconds}`; + const dateTimeString:string = format(now, 'yyyy-MM-dd HH:mm:ss'); return `_${dateTimeString}`; } @@ -64,11 +57,7 @@ const MessagesTable: React.FC = ({ { label: 'CSV', value: 'csv' } ]; - const handleFormatSelect = (format: DownloadFormat) => { - setSelectedFormat(format); - }; - - const handleDownload = () => { + const baseFileName = `topic-messages${padCurrentDateTimeString()}`; const savedMessagesJson: MessageData[] = messages.map(message => ({ Value: message.content, @@ -79,26 +68,31 @@ const MessagesTable: React.FC = ({ Timestamp: message.timestamp, })); - const convertToCSV = (messages: MessageData[]) => { - const headers = ['Value', 'Offset', 'Key', 'Partition', 'Headers', 'Timestamp'] as const; + 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 rows = messages.map(msg => - headers.map(header => { - const value = msg[header]; - if (header === 'Headers') { - return JSON.stringify(value || {}); - } - return String(value ?? ''); - }).join(',') - ); + const jsonSaver = useDataSaver(`${baseFileName}.json`, JSON.stringify(savedMessagesJson, null, '\t')); + const csvSaver = useDataSaver(`${baseFileName}.csv`, convertToCSV(savedMessagesJson)); - return [headers.join(','), ...rows].join('\n'); - }; - const baseFileName = 'topic-messages'+padCurrentDateTimeString(); - const jsonSaver = useDataSaver(`${baseFileName}.json`, JSON.stringify(savedMessagesJson, null, '\t')); - const csvSaver = useDataSaver(`${baseFileName}.csv`, convertToCSV(savedMessagesJson)); + const handleFormatSelect = (format: DownloadFormat) => { + setSelectedFormat(format); + }; + const handleDownload = () => { if (selectedFormat === 'json') { jsonSaver.saveFile(); } else { @@ -126,7 +120,7 @@ const MessagesTable: React.FC = ({ buttonSize="M" onClick={handleDownload} > - Download All Messages + Download Current Messages
From 628ecf15b04cfe26a66833fcfa64aeac0e39776f Mon Sep 17 00:00:00 2001 From: alexanderlz Date: Sun, 5 Jan 2025 16:34:50 +0000 Subject: [PATCH 05/12] forgot missing date-fns in package.json --- frontend/package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/frontend/package.json b/frontend/package.json index 249c91a8f..c1a1c571b 100644 --- a/frontend/package.json +++ b/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.0.7", "lossless-json": "2.0.11", From b393c2d425accbdd9f4f299618ba3735442a149e Mon Sep 17 00:00:00 2001 From: alexanderlz Date: Sun, 5 Jan 2025 16:49:05 +0000 Subject: [PATCH 06/12] forgot missing date-fns in pnpm --- frontend/pnpm-lock.yaml | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/frontend/pnpm-lock.yaml b/frontend/pnpm-lock.yaml index 29518a5cf..fa0d8ed96 100644 --- a/frontend/pnpm-lock.yaml +++ b/frontend/pnpm-lock.yaml @@ -53,6 +53,9 @@ importers: ajv-formats: specifier: 2.1.1 version: 2.1.1(ajv@8.8.2) + date-fns: + specifier: 4.1.0 + version: 4.1.0 json-schema-faker: specifier: 0.5.6 version: 0.5.6 @@ -1805,6 +1808,9 @@ packages: date-fns@3.6.0: resolution: {integrity: sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww==} + date-fns@4.1.0: + resolution: {integrity: sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==} + debug@3.2.7: resolution: {integrity: sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==} peerDependencies: @@ -5958,6 +5964,8 @@ snapshots: date-fns@3.6.0: {} + date-fns@4.1.0: {} + debug@3.2.7: dependencies: ms: 2.1.3 From d841a957ee066b2d842276854c423b5e194e6522 Mon Sep 17 00:00:00 2001 From: alexanderlz Date: Sun, 5 Jan 2025 18:59:34 +0000 Subject: [PATCH 07/12] linter --- .../src/components/Topics/Topic/Messages/MessagesTable.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/frontend/src/components/Topics/Topic/Messages/MessagesTable.tsx b/frontend/src/components/Topics/Topic/Messages/MessagesTable.tsx index 94384a19f..c49eb6a67 100644 --- a/frontend/src/components/Topics/Topic/Messages/MessagesTable.tsx +++ b/frontend/src/components/Topics/Topic/Messages/MessagesTable.tsx @@ -88,8 +88,8 @@ const MessagesTable: React.FC = ({ const csvSaver = useDataSaver(`${baseFileName}.csv`, convertToCSV(savedMessagesJson)); - const handleFormatSelect = (format: DownloadFormat) => { - setSelectedFormat(format); + const handleFormatSelect = (downloadFormat: DownloadFormat) => { + setSelectedFormat(downloadFormat); }; const handleDownload = () => { From eef61073a4ccd4843671f3cf0f5cf227ea80ce90 Mon Sep 17 00:00:00 2001 From: alexanderlz Date: Sun, 5 Jan 2025 19:12:38 +0000 Subject: [PATCH 08/12] linter warnings fix --- .../Topics/Topic/Messages/MessagesTable.tsx | 117 +++++++++++------- 1 file changed, 69 insertions(+), 48 deletions(-) diff --git a/frontend/src/components/Topics/Topic/Messages/MessagesTable.tsx b/frontend/src/components/Topics/Topic/Messages/MessagesTable.tsx index c49eb6a67..d4a463818 100644 --- a/frontend/src/components/Topics/Topic/Messages/MessagesTable.tsx +++ b/frontend/src/components/Topics/Topic/Messages/MessagesTable.tsx @@ -1,18 +1,18 @@ -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, 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'; +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, 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"; export interface MessagesTableProps { messages: TopicMessage[]; @@ -24,20 +24,19 @@ interface MessageData { Offset: number; Key: string | undefined; Partition: number; - Headers: { [key: string]: string | undefined; } | undefined; + Headers: { [key: string]: string | undefined } | undefined; Timestamp: Date; } -type DownloadFormat = 'json' | 'csv'; +type DownloadFormat = "json" | "csv"; function padCurrentDateTimeString(): string { const now: Date = new Date(); - const dateTimeString:string = format(now, 'yyyy-MM-dd HH:mm:ss'); + const dateTimeString: string = format(now, "yyyy-MM-dd HH:mm:ss"); return `_${dateTimeString}`; } - const MessagesTable: React.FC = ({ messages, isFetching, @@ -50,16 +49,16 @@ const MessagesTable: React.FC = ({ const nextCursor = useMessageFiltersStore((state) => state.nextCursor); const isLive = useIsLiveMode(); - const [selectedFormat, setSelectedFormat] = useState('json'); + const [selectedFormat, setSelectedFormat] = useState("json"); const formatOptions: SelectOption[] = [ - { label: 'JSON', value: 'json' }, - { label: 'CSV', value: 'csv' } + { label: "JSON", value: "json" }, + { label: "CSV", value: "csv" }, ]; const baseFileName = `topic-messages${padCurrentDateTimeString()}`; - const savedMessagesJson: MessageData[] = messages.map(message => ({ + const savedMessagesJson: MessageData[] = messages.map((message) => ({ Value: message.content, Offset: message.offset, Key: message.key, @@ -70,30 +69,44 @@ const MessagesTable: React.FC = ({ 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(',') + 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'); + return [headers.join(","), ...rows].join("\n"); }; }, []); - const jsonSaver = useDataSaver(`${baseFileName}.json`, JSON.stringify(savedMessagesJson, null, '\t')); - const csvSaver = useDataSaver(`${baseFileName}.csv`, convertToCSV(savedMessagesJson)); - + 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') { + if (selectedFormat === "json") { jsonSaver.saveFile(); } else { csvSaver.saveFile(); @@ -101,16 +114,23 @@ const MessagesTable: React.FC = ({ }; return ( -
-
+
+
id="download-format" name="download-format" onChange={handleFormatSelect} options={formatOptions} value={selectedFormat} - minWidth="70px" - selectSize="M" + minWidth="70px" + selectSize="M" placeholder="Select format to download" disabled={isFetching || messages.length === 0} /> @@ -126,10 +146,10 @@ const MessagesTable: React.FC = ({ {previewFor !== null && ( setPreviewFor(null)} setFilters={(payload: PreviewFilter[]) => - previewFor === 'key' + previewFor === "key" ? setKeyFilters(payload) : setContentFilters(payload) } @@ -145,18 +165,18 @@ const MessagesTable: React.FC = ({ setPreviewFor('key')} + onPreview={() => setPreviewFor("key")} /> setPreviewFor('content')} + onPreview={() => setPreviewFor("content")} /> @@ -169,7 +189,7 @@ const MessagesTable: React.FC = ({ message.timestamp, message.key, message.partition, - ].join('-')} + ].join("-")} message={message} keyFilters={keyFilters} contentFilters={contentFilters} @@ -206,3 +226,4 @@ const MessagesTable: React.FC = ({ }; export default MessagesTable; + From cc31f8096da6893eefb684a04b20aa5dd22f6c20 Mon Sep 17 00:00:00 2001 From: alexanderlz Date: Sun, 5 Jan 2025 19:20:54 +0000 Subject: [PATCH 09/12] linter warnings fix ->> single-quote --- .../Topics/Topic/Messages/MessagesTable.tsx | 88 +++++++++---------- 1 file changed, 44 insertions(+), 44 deletions(-) diff --git a/frontend/src/components/Topics/Topic/Messages/MessagesTable.tsx b/frontend/src/components/Topics/Topic/Messages/MessagesTable.tsx index d4a463818..d7acaa371 100644 --- a/frontend/src/components/Topics/Topic/Messages/MessagesTable.tsx +++ b/frontend/src/components/Topics/Topic/Messages/MessagesTable.tsx @@ -1,18 +1,18 @@ -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, 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"; +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, 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'; export interface MessagesTableProps { messages: TopicMessage[]; @@ -28,11 +28,11 @@ interface MessageData { Timestamp: Date; } -type DownloadFormat = "json" | "csv"; +type DownloadFormat = 'json' | 'csv'; function padCurrentDateTimeString(): string { const now: Date = new Date(); - const dateTimeString: string = format(now, "yyyy-MM-dd HH:mm:ss"); + const dateTimeString: string = format(now, 'yyyy-MM-dd HH:mm:ss'); return `_${dateTimeString}`; } @@ -49,11 +49,11 @@ const MessagesTable: React.FC = ({ const nextCursor = useMessageFiltersStore((state) => state.nextCursor); const isLive = useIsLiveMode(); - const [selectedFormat, setSelectedFormat] = useState("json"); + const [selectedFormat, setSelectedFormat] = useState('json'); const formatOptions: SelectOption[] = [ - { label: "JSON", value: "json" }, - { label: "CSV", value: "csv" }, + { label: 'JSON', value: 'json' }, + { label: 'CSV', value: 'csv' }, ]; const baseFileName = `topic-messages${padCurrentDateTimeString()}`; @@ -70,31 +70,31 @@ const MessagesTable: React.FC = ({ const convertToCSV = useMemo(() => { return (messagesData: MessageData[]) => { const headers = [ - "Value", - "Offset", - "Key", - "Partition", - "Headers", - "Timestamp", + 'Value', + 'Offset', + 'Key', + 'Partition', + 'Headers', + 'Timestamp', ] as const; const rows = messagesData.map((msg) => headers .map((header) => { const value = msg[header]; - if (header === "Headers") { + if (header === 'Headers') { return JSON.stringify(value || {}); } - return String(value ?? ""); + return String(value ?? ''); }) - .join(","), + .join(','), ); - return [headers.join(","), ...rows].join("\n"); + return [headers.join(','), ...rows].join('\n'); }; }, []); const jsonSaver = useDataSaver( `${baseFileName}.json`, - JSON.stringify(savedMessagesJson, null, "\t"), + JSON.stringify(savedMessagesJson, null, '\t'), ); const csvSaver = useDataSaver( `${baseFileName}.csv`, @@ -106,7 +106,7 @@ const MessagesTable: React.FC = ({ }; const handleDownload = () => { - if (selectedFormat === "json") { + if (selectedFormat === 'json') { jsonSaver.saveFile(); } else { csvSaver.saveFile(); @@ -114,13 +114,13 @@ const MessagesTable: React.FC = ({ }; return ( -
+
@@ -146,10 +146,10 @@ const MessagesTable: React.FC = ({ {previewFor !== null && ( setPreviewFor(null)} setFilters={(payload: PreviewFilter[]) => - previewFor === "key" + previewFor === 'key' ? setKeyFilters(payload) : setContentFilters(payload) } @@ -165,18 +165,18 @@ const MessagesTable: React.FC = ({ setPreviewFor("key")} + onPreview={() => setPreviewFor('key')} /> setPreviewFor("content")} + onPreview={() => setPreviewFor('content')} /> @@ -189,7 +189,7 @@ const MessagesTable: React.FC = ({ message.timestamp, message.key, message.partition, - ].join("-")} + ].join('-')} message={message} keyFilters={keyFilters} contentFilters={contentFilters} From 578982d86de30f38d2f5a3a47f8d7fecb70638a4 Mon Sep 17 00:00:00 2001 From: alexanderlz Date: Sun, 5 Jan 2025 19:25:27 +0000 Subject: [PATCH 10/12] linter warnings fix (hopefully last) --- .../src/components/Topics/Topic/Messages/MessagesTable.tsx | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/frontend/src/components/Topics/Topic/Messages/MessagesTable.tsx b/frontend/src/components/Topics/Topic/Messages/MessagesTable.tsx index d7acaa371..a3ee79623 100644 --- a/frontend/src/components/Topics/Topic/Messages/MessagesTable.tsx +++ b/frontend/src/components/Topics/Topic/Messages/MessagesTable.tsx @@ -86,7 +86,7 @@ const MessagesTable: React.FC = ({ } return String(value ?? ''); }) - .join(','), + .join(',') ); return [headers.join(','), ...rows].join('\n'); }; @@ -94,11 +94,11 @@ const MessagesTable: React.FC = ({ const jsonSaver = useDataSaver( `${baseFileName}.json`, - JSON.stringify(savedMessagesJson, null, '\t'), + JSON.stringify(savedMessagesJson, null, '\t') ); const csvSaver = useDataSaver( `${baseFileName}.csv`, - convertToCSV(savedMessagesJson), + convertToCSV(savedMessagesJson) ); const handleFormatSelect = (downloadFormat: DownloadFormat) => { @@ -226,4 +226,3 @@ const MessagesTable: React.FC = ({ }; export default MessagesTable; - From a5f925bcadf0be8a4411d5c7036ba2164ca42411 Mon Sep 17 00:00:00 2001 From: Alexander Leibzon Date: Wed, 12 Feb 2025 13:29:19 +0200 Subject: [PATCH 11/12] Update MessagesTable.tsx post merge syntax fix --- frontend/src/components/Topics/Topic/Messages/MessagesTable.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/components/Topics/Topic/Messages/MessagesTable.tsx b/frontend/src/components/Topics/Topic/Messages/MessagesTable.tsx index 612274fd0..9482b4bd3 100644 --- a/frontend/src/components/Topics/Topic/Messages/MessagesTable.tsx +++ b/frontend/src/components/Topics/Topic/Messages/MessagesTable.tsx @@ -38,7 +38,7 @@ function padCurrentDateTimeString(): string { const dateTimeString: string = format(now, 'yyyy-MM-dd HH:mm:ss'); return `_${dateTimeString}`; - +} interface MessagePreviewProps { [key: string]: { keyFilters: PreviewFilter[]; From bff1aa02e8c072dd155d258e8b51796761a2da5b Mon Sep 17 00:00:00 2001 From: Alexander Leibzon Date: Wed, 12 Feb 2025 13:34:29 +0200 Subject: [PATCH 12/12] Update MessagesTable.tsx linter :-( --- .../src/components/Topics/Topic/Messages/MessagesTable.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/frontend/src/components/Topics/Topic/Messages/MessagesTable.tsx b/frontend/src/components/Topics/Topic/Messages/MessagesTable.tsx index 9482b4bd3..98c0843b7 100644 --- a/frontend/src/components/Topics/Topic/Messages/MessagesTable.tsx +++ b/frontend/src/components/Topics/Topic/Messages/MessagesTable.tsx @@ -39,7 +39,8 @@ function padCurrentDateTimeString(): string { return `_${dateTimeString}`; } - interface MessagePreviewProps { + +interface MessagePreviewProps { [key: string]: { keyFilters: PreviewFilter[]; contentFilters: PreviewFilter[];