feat(kafka): add consumer group backlog view
This commit is contained in:
Guoyu Su authored and GitHub committed
1 parent
dc8b083c63
commit
f88167c3d0
28 files changed
+1274
-2
No files matched your search
@@ -0,0 +1,387 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, ref, watch } from "vue";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { formatError } from "@/lib/backend/errorUtils";
|
||||
import { mqGetKafkaConsumerGroupSnapshot } from "@/lib/backend/api";
|
||||
import type { KafkaConsumerGroupSummary } from "@/types/mq";
|
||||
import MqPanelToolbar from "./shared/MqPanelToolbar.vue";
|
||||
import MqSearchInput from "./shared/MqSearchInput.vue";
|
||||
|
||||
interface Props {
|
||||
connectionId: string;
|
||||
}
|
||||
|
||||
const props = defineProps<Props>();
|
||||
const emit = defineEmits<{
|
||||
navigateSubscriptions: [topic: string];
|
||||
}>();
|
||||
const { t } = useI18n();
|
||||
|
||||
const groups = ref<KafkaConsumerGroupSummary[]>([]);
|
||||
const selectedGroupId = ref<string>();
|
||||
const searchKeyword = ref("");
|
||||
const loading = ref(false);
|
||||
const error = ref<string>();
|
||||
let loadSequence = 0;
|
||||
|
||||
const sortedGroups = computed(() => {
|
||||
return [...groups.value].sort((left, right) => {
|
||||
if (left.lagAvailable !== right.lagAvailable) return left.lagAvailable ? -1 : 1;
|
||||
if (left.lagAvailable && right.lagAvailable && left.totalLag !== right.totalLag) {
|
||||
return (right.totalLag ?? 0) - (left.totalLag ?? 0);
|
||||
}
|
||||
return left.groupId.localeCompare(right.groupId);
|
||||
});
|
||||
});
|
||||
|
||||
const filteredGroups = computed(() => {
|
||||
const keyword = searchKeyword.value.trim().toLowerCase();
|
||||
if (!keyword) return sortedGroups.value;
|
||||
return sortedGroups.value.filter((group) => {
|
||||
return group.groupId.toLowerCase().includes(keyword) || group.topics.some((topic) => topic.toLowerCase().includes(keyword));
|
||||
});
|
||||
});
|
||||
|
||||
const selectedGroup = computed(() => groups.value.find((group) => group.groupId === selectedGroupId.value));
|
||||
|
||||
watch(filteredGroups, (nextGroups) => {
|
||||
if (!nextGroups.length || nextGroups.some((group) => group.groupId === selectedGroupId.value)) return;
|
||||
selectedGroupId.value = nextGroups[0].groupId;
|
||||
});
|
||||
|
||||
function syncSelection(nextGroups: KafkaConsumerGroupSummary[]) {
|
||||
const currentId = selectedGroupId.value;
|
||||
if (currentId && nextGroups.some((group) => group.groupId === currentId)) return;
|
||||
selectedGroupId.value = [...nextGroups].sort((left, right) => {
|
||||
if (left.lagAvailable !== right.lagAvailable) return left.lagAvailable ? -1 : 1;
|
||||
return (right.totalLag ?? 0) - (left.totalLag ?? 0) || left.groupId.localeCompare(right.groupId);
|
||||
})[0]?.groupId;
|
||||
}
|
||||
|
||||
async function loadGroups() {
|
||||
const sequence = ++loadSequence;
|
||||
loading.value = true;
|
||||
error.value = undefined;
|
||||
try {
|
||||
const snapshot = await mqGetKafkaConsumerGroupSnapshot(props.connectionId);
|
||||
if (sequence !== loadSequence) return;
|
||||
groups.value = snapshot.groups;
|
||||
syncSelection(snapshot.groups);
|
||||
} catch (e: unknown) {
|
||||
if (sequence === loadSequence) error.value = formatError(e);
|
||||
} finally {
|
||||
if (sequence === loadSequence) loading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
function formatNumber(value: number | undefined): string {
|
||||
return value === undefined ? "-" : value.toLocaleString();
|
||||
}
|
||||
|
||||
function openTopicSubscriptions(topic: string) {
|
||||
emit("navigateSubscriptions", topic);
|
||||
}
|
||||
|
||||
watch(
|
||||
() => props.connectionId,
|
||||
() => {
|
||||
groups.value = [];
|
||||
selectedGroupId.value = undefined;
|
||||
searchKeyword.value = "";
|
||||
void loadGroups();
|
||||
},
|
||||
{ immediate: true },
|
||||
);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="kafka-consumer-groups-panel">
|
||||
<MqPanelToolbar :title="t('mqKafkaConsumerGroups.title')">
|
||||
<template #left-extra>
|
||||
<MqSearchInput v-model="searchKeyword" :placeholder="t('mqKafkaConsumerGroups.searchPlaceholder')" :disabled="loading && !groups.length" />
|
||||
<span v-if="groups.length" class="mq-result-count" data-testid="kafka-consumer-group-count">{{ filteredGroups.length }} / {{ groups.length }}</span>
|
||||
</template>
|
||||
<template #actions>
|
||||
<button class="mq-btn-secondary" :disabled="loading" @click="loadGroups">
|
||||
{{ loading ? t("mqKafkaConsumerGroups.refreshing") : t("mqKafkaConsumerGroups.refresh") }}
|
||||
</button>
|
||||
</template>
|
||||
</MqPanelToolbar>
|
||||
|
||||
<div v-if="error" class="panel-error" role="alert">{{ error }}</div>
|
||||
<div v-else-if="loading && !groups.length" class="panel-placeholder">{{ t("mqKafkaConsumerGroups.loading") }}</div>
|
||||
<div v-else-if="!groups.length" class="panel-placeholder">{{ t("mqKafkaConsumerGroups.empty") }}</div>
|
||||
<div v-else-if="!filteredGroups.length" class="panel-placeholder">{{ t("mqKafkaConsumerGroups.noMatches") }}</div>
|
||||
|
||||
<div v-else class="consumer-groups-content">
|
||||
<div class="groups-table-wrap">
|
||||
<table data-testid="kafka-consumer-groups-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>{{ t("mqKafkaConsumerGroups.groupId") }}</th>
|
||||
<th>{{ t("mqKafkaConsumerGroups.state") }}</th>
|
||||
<th>{{ t("mqKafkaConsumerGroups.members") }}</th>
|
||||
<th>{{ t("mqKafkaConsumerGroups.topics") }}</th>
|
||||
<th class="number-cell">{{ t("mqKafkaConsumerGroups.totalLag") }}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="group in filteredGroups" :key="group.groupId" :class="{ selected: group.groupId === selectedGroupId }" :data-group-id="group.groupId" @click="selectedGroupId = group.groupId">
|
||||
<td class="group-id-cell">
|
||||
<span>{{ group.groupId }}</span>
|
||||
<span v-if="group.error" class="partial-warning" :title="group.error" :aria-label="t('mqKafkaConsumerGroups.partialData')">!</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="state-badge">{{ group.state || "UNKNOWN" }}</span>
|
||||
</td>
|
||||
<td>{{ formatNumber(group.memberCount) }}</td>
|
||||
<td class="topics-cell" :title="group.topics.join(', ')">{{ group.topics.length ? group.topics.join(", ") : "-" }}</td>
|
||||
<td class="number-cell" :class="{ 'lag-positive': group.lagAvailable && (group.totalLag ?? 0) > 0 }">
|
||||
{{ group.lagAvailable ? formatNumber(group.totalLag) : "-" }}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<section v-if="selectedGroup" class="group-detail" data-testid="kafka-consumer-group-detail">
|
||||
<div class="detail-header">
|
||||
<div>
|
||||
<h4>{{ selectedGroup.groupId }}</h4>
|
||||
<p>{{ t("mqKafkaConsumerGroups.partitionDetail") }}</p>
|
||||
</div>
|
||||
<span v-if="selectedGroup.error" class="detail-warning" :title="selectedGroup.error">{{ t("mqKafkaConsumerGroups.partialData") }}</span>
|
||||
</div>
|
||||
|
||||
<div v-if="!selectedGroup.partitions.length" class="detail-empty">{{ t("mqKafkaConsumerGroups.noCommittedOffsets") }}</div>
|
||||
<div v-else class="partition-table-wrap">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>{{ t("mqKafkaConsumerGroups.topic") }}</th>
|
||||
<th class="number-cell">{{ t("mqKafkaConsumerGroups.partition") }}</th>
|
||||
<th class="number-cell">{{ t("mqKafkaConsumerGroups.committedOffset") }}</th>
|
||||
<th class="number-cell">{{ t("mqKafkaConsumerGroups.logEndOffset") }}</th>
|
||||
<th class="number-cell">{{ t("mqKafkaConsumerGroups.lag") }}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="partition in selectedGroup.partitions" :key="`${partition.topic}:${partition.partition}`">
|
||||
<td>
|
||||
<button
|
||||
type="button"
|
||||
class="topic-link"
|
||||
:data-topic="partition.topic"
|
||||
:title="t('mqKafkaConsumerGroups.openTopicSubscriptions', { topic: partition.topic })"
|
||||
:aria-label="t('mqKafkaConsumerGroups.openTopicSubscriptions', { topic: partition.topic })"
|
||||
@click="openTopicSubscriptions(partition.topic)"
|
||||
>
|
||||
{{ partition.topic }}
|
||||
</button>
|
||||
</td>
|
||||
<td class="number-cell">{{ partition.partition }}</td>
|
||||
<td class="number-cell">{{ formatNumber(partition.currentOffset) }}</td>
|
||||
<td class="number-cell">{{ formatNumber(partition.endOffset) }}</td>
|
||||
<td class="number-cell" :class="{ 'lag-positive': (partition.lag ?? 0) > 0 }">{{ formatNumber(partition.lag) }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
@import "./shared/mqPanel.css";
|
||||
|
||||
.kafka-consumer-groups-panel {
|
||||
height: 100%;
|
||||
min-height: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.panel-placeholder,
|
||||
.panel-error {
|
||||
padding: 24px;
|
||||
text-align: center;
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
.panel-error {
|
||||
color: var(--color-error);
|
||||
}
|
||||
|
||||
.consumer-groups-content {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
display: grid;
|
||||
grid-template-rows: minmax(180px, 46%) minmax(180px, 1fr);
|
||||
}
|
||||
|
||||
.groups-table-wrap,
|
||||
.partition-table-wrap {
|
||||
min-height: 0;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.groups-table-wrap {
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
table-layout: fixed;
|
||||
}
|
||||
|
||||
thead {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
background: var(--color-background-secondary);
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
padding: 9px 12px;
|
||||
border-bottom: 1px solid var(--color-border-light, var(--color-border));
|
||||
text-align: left;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
th {
|
||||
color: var(--color-text-secondary);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.groups-table-wrap tbody tr {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.groups-table-wrap tbody tr:hover {
|
||||
background: var(--color-hover);
|
||||
}
|
||||
|
||||
.groups-table-wrap tbody tr.selected {
|
||||
background: var(--color-primary-alpha);
|
||||
}
|
||||
|
||||
.group-id-cell {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
min-width: 0;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.group-id-cell > span:first-child,
|
||||
.topics-cell {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.state-badge {
|
||||
display: inline-block;
|
||||
padding: 2px 7px;
|
||||
border-radius: var(--dbx-radius-fixed-4);
|
||||
background: var(--color-background-secondary);
|
||||
color: var(--color-text-secondary);
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.partial-warning {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
flex: 0 0 16px;
|
||||
border-radius: 50%;
|
||||
background: var(--color-warning);
|
||||
color: #fff;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.number-cell {
|
||||
text-align: right;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.lag-positive {
|
||||
color: var(--color-warning);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.group-detail {
|
||||
min-height: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.detail-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
padding: 10px 16px;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
.detail-header h4,
|
||||
.detail-header p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.detail-header h4 {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.detail-header p {
|
||||
margin-top: 2px;
|
||||
color: var(--color-text-secondary);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.detail-warning {
|
||||
color: var(--color-warning);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.detail-empty {
|
||||
padding: 24px;
|
||||
text-align: center;
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
.topic-link {
|
||||
padding: 0;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: var(--color-primary);
|
||||
font: inherit;
|
||||
cursor: pointer;
|
||||
text-decoration: underline;
|
||||
text-decoration-color: transparent;
|
||||
text-underline-offset: 2px;
|
||||
}
|
||||
|
||||
.topic-link:hover {
|
||||
text-decoration-color: currentColor;
|
||||
}
|
||||
|
||||
.topic-link:focus-visible {
|
||||
border-radius: var(--dbx-radius-fixed-4);
|
||||
outline: 2px solid var(--color-primary);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
@media (max-height: 620px) {
|
||||
.consumer-groups-content {
|
||||
grid-template-rows: minmax(150px, 42%) minmax(150px, 1fr);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -27,6 +27,7 @@ import TenantsPanel from "./TenantsPanel.vue";
|
||||
import NamespacesPanel from "./NamespacesPanel.vue";
|
||||
import TopicsPanel from "./TopicsPanel.vue";
|
||||
import SubscriptionsPanel from "./SubscriptionsPanel.vue";
|
||||
import KafkaConsumerGroupsPanel from "./KafkaConsumerGroupsPanel.vue";
|
||||
import MonitoringPanel from "./MonitoringPanel.vue";
|
||||
import ProducerConsumerPanel from "./ProducerConsumerPanel.vue";
|
||||
import PoliciesPanel from "./PoliciesPanel.vue";
|
||||
@@ -174,6 +175,7 @@ function tabLabelKey(tab: MqTab): string {
|
||||
namespaces: "mqAdmin.tabNamespaces",
|
||||
topics: "mqAdmin.tabTopics",
|
||||
subscriptions: "mqAdmin.tabSubscriptions",
|
||||
consumerGroups: "mqAdmin.tabConsumerGroups",
|
||||
monitoring: "mqAdmin.tabMonitoring",
|
||||
clients: "mqAdmin.tabClients",
|
||||
producers: "mqAdmin.tabProducers",
|
||||
@@ -304,6 +306,17 @@ function handleNavigateTab(payload: { tab: MqTab; topic?: TopicInfo; subscriptio
|
||||
setActiveTab(payload.tab);
|
||||
}
|
||||
|
||||
function handleKafkaConsumerGroupTopicSelected(topic: string) {
|
||||
selectedTopic.value = {
|
||||
name: topic,
|
||||
shortName: topic,
|
||||
partitioned: false,
|
||||
persistent: true,
|
||||
};
|
||||
selectedSubscriptionName.value = undefined;
|
||||
setActiveTab("subscriptions");
|
||||
}
|
||||
|
||||
function handleSubscriptionSelected(subscription: string) {
|
||||
selectedSubscriptionName.value = subscription;
|
||||
activeTab.value = isRocketMqCluster.value ? "producers" : "clients";
|
||||
@@ -472,6 +485,7 @@ onMounted(async () => {
|
||||
:supports-expire-messages="canExpireMessages"
|
||||
@subscription-selected="handleSubscriptionSelected"
|
||||
/>
|
||||
<KafkaConsumerGroupsPanel v-else-if="activeTab === 'consumerGroups' && isKafkaCluster" :connection-id="connectionId" @navigate-subscriptions="handleKafkaConsumerGroupTopicSelected" />
|
||||
<RabbitMqMonitoringPanel v-else-if="activeTab === 'monitoring' && isRabbitMqCluster && canClusterMonitor" :connection-id="connectionId" />
|
||||
<MonitoringPanel v-else-if="activeTab === 'monitoring'" :connection-id="connectionId" :topic="selectedTopic" :tenant="effectiveTenant" :namespace="effectiveNamespace" :mq-system-kind="mqSystemKind" @navigate-tab="handleNavigateTab" />
|
||||
<RabbitMqClientsPanel v-else-if="activeTab === 'clients' && isRabbitMqCluster && canManageClientConnections" :connection-id="connectionId" :namespace="effectiveNamespace" :read-only="readOnly" />
|
||||
|
||||
@@ -0,0 +1,178 @@
|
||||
// @vitest-environment happy-dom
|
||||
|
||||
import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
|
||||
import { createApp, h, nextTick, ref, type App } from "vue";
|
||||
import type { KafkaConsumerGroupSnapshot } from "@/types/mq";
|
||||
|
||||
const backend = vi.hoisted(() => ({
|
||||
mqGetKafkaConsumerGroupSnapshot: vi.fn(),
|
||||
}));
|
||||
|
||||
vi.mock("vue-i18n", () => ({
|
||||
useI18n: () => ({ t: (key: string) => key }),
|
||||
}));
|
||||
|
||||
vi.mock("@/lib/backend/api", () => backend);
|
||||
|
||||
import KafkaConsumerGroupsPanel from "@/components/mq/KafkaConsumerGroupsPanel.vue";
|
||||
|
||||
const SNAPSHOT: KafkaConsumerGroupSnapshot = {
|
||||
groups: [
|
||||
{
|
||||
groupId: "payments-worker",
|
||||
state: "STABLE",
|
||||
simpleGroup: false,
|
||||
memberCount: 1,
|
||||
topics: ["payments"],
|
||||
totalLag: 2,
|
||||
lagAvailable: true,
|
||||
partitions: [{ topic: "payments", partition: 0, currentOffset: 8, endOffset: 10, lag: 2 }],
|
||||
},
|
||||
{
|
||||
groupId: "orders-worker",
|
||||
state: "STABLE",
|
||||
simpleGroup: false,
|
||||
memberCount: 2,
|
||||
topics: ["orders", "orders-archive"],
|
||||
totalLag: 10,
|
||||
lagAvailable: true,
|
||||
partitions: [
|
||||
{ topic: "orders", partition: 0, currentOffset: 5, endOffset: 12, lag: 7 },
|
||||
{ topic: "orders", partition: 1, currentOffset: 6, endOffset: 9, lag: 3 },
|
||||
{ topic: "orders-archive", partition: 0, currentOffset: 4, endOffset: 4, lag: 0 },
|
||||
],
|
||||
},
|
||||
{
|
||||
groupId: "unknown-worker",
|
||||
state: "UNKNOWN",
|
||||
simpleGroup: false,
|
||||
topics: ["audit"],
|
||||
lagAvailable: false,
|
||||
partitions: [{ topic: "audit", partition: 0, currentOffset: 4 }],
|
||||
error: "End offsets unavailable for 1 partition(s)",
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
let app: App<Element> | null = null;
|
||||
let root: HTMLDivElement | null = null;
|
||||
|
||||
async function flushUi() {
|
||||
await Promise.resolve();
|
||||
await Promise.resolve();
|
||||
await nextTick();
|
||||
}
|
||||
|
||||
async function mountPanel(onNavigateSubscriptions?: (topic: string) => void) {
|
||||
root = document.createElement("div");
|
||||
document.body.appendChild(root);
|
||||
app = createApp(KafkaConsumerGroupsPanel, { connectionId: "kafka-1", onNavigateSubscriptions });
|
||||
app.mount(root);
|
||||
await flushUi();
|
||||
return root;
|
||||
}
|
||||
|
||||
function deferred<T>() {
|
||||
let resolve!: (value: T) => void;
|
||||
const promise = new Promise<T>((resolvePromise) => {
|
||||
resolve = resolvePromise;
|
||||
});
|
||||
return { promise, resolve };
|
||||
}
|
||||
|
||||
beforeEach(() => {
|
||||
backend.mqGetKafkaConsumerGroupSnapshot.mockReset().mockResolvedValue(SNAPSHOT);
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
app?.unmount();
|
||||
app = null;
|
||||
root?.remove();
|
||||
root = null;
|
||||
});
|
||||
|
||||
describe("KafkaConsumerGroupsPanel", () => {
|
||||
it("loads cluster-wide groups without a selected topic and sorts available lag descending", async () => {
|
||||
const panel = await mountPanel();
|
||||
await vi.waitFor(() => expect(backend.mqGetKafkaConsumerGroupSnapshot).toHaveBeenCalledWith("kafka-1"));
|
||||
|
||||
const rows = [...panel.querySelectorAll<HTMLTableRowElement>("[data-group-id]")];
|
||||
expect(rows.map((row) => row.dataset.groupId)).toEqual(["orders-worker", "payments-worker", "unknown-worker"]);
|
||||
expect(panel.querySelector('[data-testid="kafka-consumer-group-count"]')?.textContent?.trim()).toBe("3 / 3");
|
||||
expect(panel.querySelector('[data-testid="kafka-consumer-group-detail"]')?.textContent).toContain("orders");
|
||||
expect(panel.querySelector('[data-testid="kafka-consumer-group-detail"]')?.textContent).toContain("7");
|
||||
});
|
||||
|
||||
it("emits the exact topic selected from partition details using keyboard-accessible buttons", async () => {
|
||||
const navigateSubscriptions = vi.fn();
|
||||
const panel = await mountPanel(navigateSubscriptions);
|
||||
await vi.waitFor(() => expect(panel.querySelectorAll("[data-topic]")).toHaveLength(3));
|
||||
|
||||
const ordersLink = panel.querySelector<HTMLButtonElement>('[data-topic="orders"]');
|
||||
const archiveLink = panel.querySelector<HTMLButtonElement>('[data-topic="orders-archive"]');
|
||||
expect(ordersLink?.tagName).toBe("BUTTON");
|
||||
expect(ordersLink?.getAttribute("aria-label")).toBe("mqKafkaConsumerGroups.openTopicSubscriptions");
|
||||
|
||||
ordersLink?.click();
|
||||
archiveLink?.click();
|
||||
expect(navigateSubscriptions).toHaveBeenNthCalledWith(1, "orders");
|
||||
expect(navigateSubscriptions).toHaveBeenNthCalledWith(2, "orders-archive");
|
||||
});
|
||||
|
||||
it("searches by topic and keeps unavailable lag visibly distinct from zero", async () => {
|
||||
const panel = await mountPanel();
|
||||
await vi.waitFor(() => expect(panel.querySelectorAll("[data-group-id]")).toHaveLength(3));
|
||||
|
||||
const search = panel.querySelector<HTMLInputElement>('input[type="search"]');
|
||||
expect(search).toBeTruthy();
|
||||
search!.value = "audit";
|
||||
search!.dispatchEvent(new Event("input", { bubbles: true }));
|
||||
await flushUi();
|
||||
|
||||
const rows = [...panel.querySelectorAll<HTMLTableRowElement>("[data-group-id]")];
|
||||
expect(rows.map((row) => row.dataset.groupId)).toEqual(["unknown-worker"]);
|
||||
expect(rows[0].classList.contains("selected")).toBe(true);
|
||||
expect(rows[0].querySelector("td:last-child")?.textContent?.trim()).toBe("-");
|
||||
expect(rows[0].querySelector(".partial-warning")?.getAttribute("title")).toContain("End offsets unavailable");
|
||||
expect(panel.querySelector('[data-testid="kafka-consumer-group-detail"]')?.textContent).toContain("audit");
|
||||
});
|
||||
|
||||
it("shows empty and request-error states", async () => {
|
||||
backend.mqGetKafkaConsumerGroupSnapshot.mockResolvedValueOnce({ groups: [] });
|
||||
const emptyPanel = await mountPanel();
|
||||
await vi.waitFor(() => expect(emptyPanel.textContent).toContain("mqKafkaConsumerGroups.empty"));
|
||||
|
||||
app?.unmount();
|
||||
root?.remove();
|
||||
app = null;
|
||||
root = null;
|
||||
backend.mqGetKafkaConsumerGroupSnapshot.mockRejectedValueOnce(new Error("snapshot unavailable"));
|
||||
const errorPanel = await mountPanel();
|
||||
await vi.waitFor(() => expect(errorPanel.textContent).toContain("snapshot unavailable"));
|
||||
});
|
||||
|
||||
it("ignores stale refresh responses", async () => {
|
||||
const first = deferred<KafkaConsumerGroupSnapshot>();
|
||||
backend.mqGetKafkaConsumerGroupSnapshot.mockReturnValueOnce(first.promise).mockResolvedValueOnce({
|
||||
groups: [{ ...SNAPSHOT.groups[0], groupId: "fresh-worker" }],
|
||||
});
|
||||
const connectionId = ref("kafka-1");
|
||||
root = document.createElement("div");
|
||||
document.body.appendChild(root);
|
||||
app = createApp({
|
||||
setup: () => () => h(KafkaConsumerGroupsPanel, { connectionId: connectionId.value }),
|
||||
});
|
||||
app.mount(root);
|
||||
await flushUi();
|
||||
|
||||
connectionId.value = "kafka-2";
|
||||
await flushUi();
|
||||
const panel = root;
|
||||
await vi.waitFor(() => expect(panel.textContent).toContain("fresh-worker"));
|
||||
|
||||
first.resolve(SNAPSHOT);
|
||||
await flushUi();
|
||||
expect(panel.textContent).toContain("fresh-worker");
|
||||
expect(panel.textContent).not.toContain("orders-worker");
|
||||
});
|
||||
});
|
||||
Reference in new issue
Block a user