diff --git a/apps/desktop/src/components/mq/MessageBrowser.vue b/apps/desktop/src/components/mq/MessageBrowser.vue index a0a62a2cbe..447674b16e 100644 --- a/apps/desktop/src/components/mq/MessageBrowser.vue +++ b/apps/desktop/src/components/mq/MessageBrowser.vue @@ -7,6 +7,7 @@ import { mqPeekMessages } from "@/lib/backend/api"; import { formatError } from "@/lib/backend/errorUtils"; import { copyToClipboard } from "@/lib/common/clipboard"; import { buildKafkaMessageSearchText, kafkaMessageSearchTextMatches, normalizeKafkaMessageSearchQuery } from "@/lib/mq/kafkaMessageSearch"; +import { sortKafkaMessagesByPublishTime, type KafkaMessageDisplayOrder } from "@/lib/mq/kafkaMessageSort"; import { parseNonNegativeSafeInteger } from "@/lib/mq/mqPeekFilters"; import { useToast } from "@/composables/useToast"; import { Button } from "@/components/ui/button"; @@ -40,6 +41,7 @@ const advancedExpanded = ref(false); const messageSearchQuery = ref(""); type KafkaPeekStartPosition = NonNullable; const kafkaStartPosition = ref("latest"); +const kafkaMessageDisplayOrder = ref("newest"); let messageRequestVersion = 0; const isKafka = computed(() => props.mqSystemKind === "kafka"); @@ -57,6 +59,7 @@ const filteredMessages = computed(() => { if (!query) return messages.value; return searchableMessages.value.filter(({ searchText }) => kafkaMessageSearchTextMatches(searchText, query)).map(({ message }) => message); }); +const displayedMessages = computed(() => (isKafka.value ? sortKafkaMessagesByPublishTime(filteredMessages.value, kafkaMessageDisplayOrder.value) : filteredMessages.value)); function peekGroupName(): string { if (props.mqSystemKind === "rocketmq") return "__dbx_rocketmq_viewer__"; @@ -223,6 +226,18 @@ watch(kafkaStartPosition, () => { +