From 0c7b0bd8f7df9ed48c9d04385b9a5a879e841794 Mon Sep 17 00:00:00 2001 From: "maciej.moscicki" Date: Thu, 17 Aug 2023 16:33:46 +0200 Subject: [PATCH 1/8] add ability to move offsets --- .../src/api/hermes-client/index.ts | 14 ++++++ hermes-console-vue/src/i18n/en-US.ts | 8 +++ hermes-console-vue/src/mocks/handlers.ts | 16 ++++++ .../views/subscription/SubscriptionView.vue | 10 ++++ .../SubscriptionOffsets.spec.ts | 49 +++++++++++++++++++ .../SubscriptionOffsets.vue | 47 ++++++++++++++++++ 6 files changed, 144 insertions(+) create mode 100644 hermes-console-vue/src/views/subscription/subscription-offsets/SubscriptionOffsets.spec.ts create mode 100644 hermes-console-vue/src/views/subscription/subscription-offsets/SubscriptionOffsets.vue diff --git a/hermes-console-vue/src/api/hermes-client/index.ts b/hermes-console-vue/src/api/hermes-client/index.ts index 346c6df1ef..989736bcf7 100644 --- a/hermes-console-vue/src/api/hermes-client/index.ts +++ b/hermes-console-vue/src/api/hermes-client/index.ts @@ -159,3 +159,17 @@ export function querySubscriptions( export function fetchRoles(path: string): ResponsePromise { return axios.get(path); } + +export function moveSubscriptionOffsets( + topicName: string, + subscription: string, +): ResponsePromise { + return axios.post( + `/topics/${topicName}/subscriptions/${subscription}/moveOffsetsToTheEnd`, + { + validateStatus: (status: number) => { + return status > 200 && status < 400; + }, + }, + ); +} \ No newline at end of file diff --git a/hermes-console-vue/src/i18n/en-US.ts b/hermes-console-vue/src/i18n/en-US.ts index 595dd6a163..707e963ccc 100644 --- a/hermes-console-vue/src/i18n/en-US.ts +++ b/hermes-console-vue/src/i18n/en-US.ts @@ -480,6 +480,14 @@ const en_US = { reason: 'Reason', timestamp: 'Timestamp', }, + moveOffsets: { + title: 'Move subscription offsets to the end', + button: 'MOVE', + success: 'Moved offsets for subscription', + failure: 'Failed to move offsets for subscription', + status: 'status', + response: 'response', + }, }, search: { collection: { diff --git a/hermes-console-vue/src/mocks/handlers.ts b/hermes-console-vue/src/mocks/handlers.ts index a1ebd0091f..952545ac7c 100644 --- a/hermes-console-vue/src/mocks/handlers.ts +++ b/hermes-console-vue/src/mocks/handlers.ts @@ -418,3 +418,19 @@ export const fetchGroupInconsistenciesErrorHandler = ({ rest.get(`${url}/consistency/inconsistencies/groups`, (req, res, ctx) => { return res(ctx.status(errorCode), ctx.json(undefined)); }); + +export const moveSubscriptionOffsetsHandler = ({ + topicName, + subscriptionName, + statusCode, + }: { + topicName: string; + subscriptionName: string; + statusCode: number; +}) => + rest.post( + `${url}/topics/${topicName}/subscriptions/${subscriptionName}/moveOffsetsToTheEnd`, + (req, res, ctx) => { + return res(ctx.status(statusCode), ctx.json(undefined)); + }, + ); \ No newline at end of file diff --git a/hermes-console-vue/src/views/subscription/SubscriptionView.vue b/hermes-console-vue/src/views/subscription/SubscriptionView.vue index 51600be7f4..d14b62feca 100644 --- a/hermes-console-vue/src/views/subscription/SubscriptionView.vue +++ b/hermes-console-vue/src/views/subscription/SubscriptionView.vue @@ -16,6 +16,7 @@ import ServiceResponseMetrics from '@/views/subscription/service-response-metrics/ServiceResponseMetrics.vue'; import ShowEventTrace from '@/views/subscription/show-event-trace/ShowEventTrace.vue'; import SubscriptionMetadata from '@/views/subscription/subscription-metadata/SubscriptionMetadata.vue'; + import SubscriptionOffsets from '@/views/subscription/subscription-offsets/SubscriptionOffsets.vue'; import UndeliveredMessagesCard from '@/views/subscription/undelivered-messages-card/UndeliveredMessagesCard.vue'; const route = useRoute(); @@ -121,6 +122,15 @@ + + + + + + { + const props = { subscription: dummySubscription }; + const args = { + topicName: dummySubscription.topicName, + subscriptionName: dummySubscription.name, + statusCode: 200, + }; + + const server = setupServer(moveSubscriptionOffsetsHandler(args)); + + it('should show message that moving offsets was successful', async () => { + // given + server.listen(); + const user = userEvent.setup(); + const { getByText } = render(SubscriptionOffsets, { props }); + + // when + await user.click(getByText('subscription.moveOffsets.button')); + + // then + expect(getByText('subscription.moveOffsets.success')).toBeVisible(); + }); + + it('should show message that moving offsets failed', async () => { + // given + server.use(moveSubscriptionOffsetsHandler({ ...args, statusCode: 500 })); + server.listen(); + const user = userEvent.setup(); + const { getByText } = render(SubscriptionOffsets, { props }); + + // when + await user.click(getByText('subscription.moveOffsets.button')); + + // then + expect( + getByText( + 'subscription.moveOffsets.failure, subscription.moveOffsets.status: 500, subscription.moveOffsets.response: ""', + ), + ).toBeVisible(); + }); +}); diff --git a/hermes-console-vue/src/views/subscription/subscription-offsets/SubscriptionOffsets.vue b/hermes-console-vue/src/views/subscription/subscription-offsets/SubscriptionOffsets.vue new file mode 100644 index 0000000000..8b6a9439ef --- /dev/null +++ b/hermes-console-vue/src/views/subscription/subscription-offsets/SubscriptionOffsets.vue @@ -0,0 +1,47 @@ + + + + + From 72fbf2d30f49470008ca67a6930809f8fc9ff77d Mon Sep 17 00:00:00 2001 From: "maciej.moscicki" Date: Tue, 22 Aug 2023 11:34:16 +0200 Subject: [PATCH 2/8] lint --- .../src/api/hermes-client/index.ts | 20 ++++++------- hermes-console-vue/src/mocks/handlers.ts | 28 +++++++++---------- 2 files changed, 24 insertions(+), 24 deletions(-) diff --git a/hermes-console-vue/src/api/hermes-client/index.ts b/hermes-console-vue/src/api/hermes-client/index.ts index 989736bcf7..a2c94da194 100644 --- a/hermes-console-vue/src/api/hermes-client/index.ts +++ b/hermes-console-vue/src/api/hermes-client/index.ts @@ -161,15 +161,15 @@ export function fetchRoles(path: string): ResponsePromise { } export function moveSubscriptionOffsets( - topicName: string, - subscription: string, + topicName: string, + subscription: string, ): ResponsePromise { - return axios.post( - `/topics/${topicName}/subscriptions/${subscription}/moveOffsetsToTheEnd`, - { - validateStatus: (status: number) => { - return status > 200 && status < 400; - }, - }, - ); + return axios.post( + `/topics/${topicName}/subscriptions/${subscription}/moveOffsetsToTheEnd`, + { + validateStatus: (status: number) => { + return status > 200 && status < 400; + }, + }, + ); } \ No newline at end of file diff --git a/hermes-console-vue/src/mocks/handlers.ts b/hermes-console-vue/src/mocks/handlers.ts index 952545ac7c..2fa2ab335c 100644 --- a/hermes-console-vue/src/mocks/handlers.ts +++ b/hermes-console-vue/src/mocks/handlers.ts @@ -420,17 +420,17 @@ export const fetchGroupInconsistenciesErrorHandler = ({ }); export const moveSubscriptionOffsetsHandler = ({ - topicName, - subscriptionName, - statusCode, - }: { - topicName: string; - subscriptionName: string; - statusCode: number; -}) => - rest.post( - `${url}/topics/${topicName}/subscriptions/${subscriptionName}/moveOffsetsToTheEnd`, - (req, res, ctx) => { - return res(ctx.status(statusCode), ctx.json(undefined)); - }, - ); \ No newline at end of file + topicName, + subscriptionName, + statusCode, +}: { + topicName: string; + subscriptionName: string; + statusCode: number; +}) => + rest.post( + `${url}/topics/${topicName}/subscriptions/${subscriptionName}/moveOffsetsToTheEnd`, + (req, res, ctx) => { + return res(ctx.status(statusCode), ctx.json(undefined)); + }, + ); From 6cbe7f2d8cdc18e2beaf6435645083cc7564f641 Mon Sep 17 00:00:00 2001 From: "maciej.moscicki" Date: Wed, 23 Aug 2023 09:20:05 +0200 Subject: [PATCH 3/8] move offsets to consumer group view --- hermes-console-vue/src/api/hermes-client/index.ts | 2 +- .../use-consumer-groups/useConsumerGroups.ts | 11 ++++++++++- hermes-console-vue/src/i18n/en-US.ts | 4 ++-- .../admin/consumer-groups/ConsumerGroupsView.spec.ts | 1 + .../admin/consumer-groups/ConsumerGroupsView.vue | 10 +++++++++- .../src/views/subscription/SubscriptionView.vue | 10 ---------- 6 files changed, 23 insertions(+), 15 deletions(-) diff --git a/hermes-console-vue/src/api/hermes-client/index.ts b/hermes-console-vue/src/api/hermes-client/index.ts index a2c94da194..bb4b824a5e 100644 --- a/hermes-console-vue/src/api/hermes-client/index.ts +++ b/hermes-console-vue/src/api/hermes-client/index.ts @@ -172,4 +172,4 @@ export function moveSubscriptionOffsets( }, }, ); -} \ No newline at end of file +} diff --git a/hermes-console-vue/src/composables/consumer-groups/use-consumer-groups/useConsumerGroups.ts b/hermes-console-vue/src/composables/consumer-groups/use-consumer-groups/useConsumerGroups.ts index 8956243cef..3c4c5f990d 100644 --- a/hermes-console-vue/src/composables/consumer-groups/use-consumer-groups/useConsumerGroups.ts +++ b/hermes-console-vue/src/composables/consumer-groups/use-consumer-groups/useConsumerGroups.ts @@ -1,10 +1,14 @@ -import { fetchConsumerGroups as getConsumerGroups } from '@/api/hermes-client'; +import { + fetchConsumerGroups as getConsumerGroups, + moveSubscriptionOffsets, +} from '@/api/hermes-client'; import { ref } from 'vue'; import type { ConsumerGroup } from '@/api/consumer-group'; import type { Ref } from 'vue'; export interface UseConsumerGroups { consumerGroups: Ref; + moveOffsets: (topicName: string, subscriptionName: string) => void loading: Ref; error: Ref; } @@ -36,10 +40,15 @@ export function useConsumerGroups( } }; + const moveOffsets = async (topicName: string, subscriptionName: string) => { + await moveSubscriptionOffsets(topicName, subscriptionName); + }; + fetchConsumerGroups(); return { consumerGroups, + moveOffsets, loading, error, }; diff --git a/hermes-console-vue/src/i18n/en-US.ts b/hermes-console-vue/src/i18n/en-US.ts index 707e963ccc..6918d41578 100644 --- a/hermes-console-vue/src/i18n/en-US.ts +++ b/hermes-console-vue/src/i18n/en-US.ts @@ -481,8 +481,8 @@ const en_US = { timestamp: 'Timestamp', }, moveOffsets: { - title: 'Move subscription offsets to the end', - button: 'MOVE', + tooltip: 'Move subscription offsets to the end', + button: 'MOVE OFFSETS', success: 'Moved offsets for subscription', failure: 'Failed to move offsets for subscription', status: 'status', diff --git a/hermes-console-vue/src/views/admin/consumer-groups/ConsumerGroupsView.spec.ts b/hermes-console-vue/src/views/admin/consumer-groups/ConsumerGroupsView.spec.ts index e2b76e4d68..b70b35eb02 100644 --- a/hermes-console-vue/src/views/admin/consumer-groups/ConsumerGroupsView.spec.ts +++ b/hermes-console-vue/src/views/admin/consumer-groups/ConsumerGroupsView.spec.ts @@ -11,6 +11,7 @@ vi.mock('@/composables/consumer-groups/use-consumer-groups/useConsumerGroups'); const useConsumerGroupsStub: UseConsumerGroups = { consumerGroups: ref(dummyConsumerGroups), + moveOffsets: () => {}, loading: ref(false), error: ref({ fetchConsumerGroups: null, diff --git a/hermes-console-vue/src/views/admin/consumer-groups/ConsumerGroupsView.vue b/hermes-console-vue/src/views/admin/consumer-groups/ConsumerGroupsView.vue index 1da2a768ce..c4e40404c9 100644 --- a/hermes-console-vue/src/views/admin/consumer-groups/ConsumerGroupsView.vue +++ b/hermes-console-vue/src/views/admin/consumer-groups/ConsumerGroupsView.vue @@ -12,7 +12,7 @@ const params = route.params as Record; const { subscriptionId, topicId, groupId } = params; - const { consumerGroups, loading, error } = useConsumerGroups( + const { consumerGroups, moveOffsets, loading, error } = useConsumerGroups( topicId, subscriptionId, ); @@ -64,6 +64,14 @@ {{ $t('consumerGroups.title') }}

+ + + {{ $t('subscription.moveOffsets.button') }} + {{ + $t('subscription.moveOffsets.tooltip') + }} + + diff --git a/hermes-console-vue/src/views/subscription/SubscriptionView.vue b/hermes-console-vue/src/views/subscription/SubscriptionView.vue index d14b62feca..51600be7f4 100644 --- a/hermes-console-vue/src/views/subscription/SubscriptionView.vue +++ b/hermes-console-vue/src/views/subscription/SubscriptionView.vue @@ -16,7 +16,6 @@ import ServiceResponseMetrics from '@/views/subscription/service-response-metrics/ServiceResponseMetrics.vue'; import ShowEventTrace from '@/views/subscription/show-event-trace/ShowEventTrace.vue'; import SubscriptionMetadata from '@/views/subscription/subscription-metadata/SubscriptionMetadata.vue'; - import SubscriptionOffsets from '@/views/subscription/subscription-offsets/SubscriptionOffsets.vue'; import UndeliveredMessagesCard from '@/views/subscription/undelivered-messages-card/UndeliveredMessagesCard.vue'; const route = useRoute(); @@ -122,15 +121,6 @@ - - - - - - Date: Thu, 24 Aug 2023 15:38:46 +0200 Subject: [PATCH 4/8] use notifications for moving offsets --- hermes-console-vue/json-server/server.ts | 4 +++ .../use-consumer-groups/useConsumerGroups.ts | 25 +++++++++++++++++-- hermes-console-vue/src/i18n/en-US.ts | 6 ++--- 3 files changed, 29 insertions(+), 6 deletions(-) diff --git a/hermes-console-vue/json-server/server.ts b/hermes-console-vue/json-server/server.ts index 3c24a149a9..b24f67b22c 100644 --- a/hermes-console-vue/json-server/server.ts +++ b/hermes-console-vue/json-server/server.ts @@ -19,6 +19,10 @@ server.post('/query/subscriptions', (req, res) => { res.jsonp(subscriptions); }); +server.post('/topics/*/subscriptions/*/moveOffsetsToTheEnd', (req, res) => { + res.sendStatus(200); +}); + const router = jsonServer.router('json-server/db.json'); server.use(router); diff --git a/hermes-console-vue/src/composables/consumer-groups/use-consumer-groups/useConsumerGroups.ts b/hermes-console-vue/src/composables/consumer-groups/use-consumer-groups/useConsumerGroups.ts index 3c4c5f990d..f51dfbfb50 100644 --- a/hermes-console-vue/src/composables/consumer-groups/use-consumer-groups/useConsumerGroups.ts +++ b/hermes-console-vue/src/composables/consumer-groups/use-consumer-groups/useConsumerGroups.ts @@ -3,12 +3,15 @@ import { moveSubscriptionOffsets, } from '@/api/hermes-client'; import { ref } from 'vue'; +import { useNotificationsStore } from '@/store/app-notifications/useAppNotifications'; import type { ConsumerGroup } from '@/api/consumer-group'; import type { Ref } from 'vue'; +import i18n from '@/main'; + export interface UseConsumerGroups { consumerGroups: Ref; - moveOffsets: (topicName: string, subscriptionName: string) => void + moveOffsets: (topicName: string, subscriptionName: string) => void; loading: Ref; error: Ref; } @@ -41,7 +44,25 @@ export function useConsumerGroups( }; const moveOffsets = async (topicName: string, subscriptionName: string) => { - await moveSubscriptionOffsets(topicName, subscriptionName); + const notificationsStore = useNotificationsStore(); + try { + await moveSubscriptionOffsets(topicName, subscriptionName); + await notificationsStore.dispatchNotification({ + title: i18n.global.t('subscription.moveOffsets.success', { + subscriptionName, + }), + text: '', + type: 'success', + }); + } catch (e) { + await notificationsStore.dispatchNotification({ + title: i18n.global.t('subscription.moveOffsets.failure', { + subscriptionName, + }), + text: (e as Error).message, + type: 'error', + }); + } }; fetchConsumerGroups(); diff --git a/hermes-console-vue/src/i18n/en-US.ts b/hermes-console-vue/src/i18n/en-US.ts index 6918d41578..76ea299ea0 100644 --- a/hermes-console-vue/src/i18n/en-US.ts +++ b/hermes-console-vue/src/i18n/en-US.ts @@ -483,10 +483,8 @@ const en_US = { moveOffsets: { tooltip: 'Move subscription offsets to the end', button: 'MOVE OFFSETS', - success: 'Moved offsets for subscription', - failure: 'Failed to move offsets for subscription', - status: 'status', - response: 'response', + success: 'Moved offsets for subscription {subscriptionName}', + failure: 'Failed to move offsets for subscription {subscriptionName}', }, }, search: { From 5c9d4317a622de794d65050247d1ab4d9119f251 Mon Sep 17 00:00:00 2001 From: "maciej.moscicki" Date: Thu, 24 Aug 2023 16:33:47 +0200 Subject: [PATCH 5/8] show notifications with move offsets results --- .../useConsumerGroups.spec.ts | 34 ++++++++++++- .../use-consumer-groups/useConsumerGroups.ts | 4 +- .../consumer-groups/ConsumerGroupsView.vue | 2 +- .../SubscriptionOffsets.spec.ts | 49 ------------------- .../SubscriptionOffsets.vue | 47 ------------------ 5 files changed, 36 insertions(+), 100 deletions(-) delete mode 100644 hermes-console-vue/src/views/subscription/subscription-offsets/SubscriptionOffsets.spec.ts delete mode 100644 hermes-console-vue/src/views/subscription/subscription-offsets/SubscriptionOffsets.vue diff --git a/hermes-console-vue/src/composables/consumer-groups/use-consumer-groups/useConsumerGroups.spec.ts b/hermes-console-vue/src/composables/consumer-groups/use-consumer-groups/useConsumerGroups.spec.ts index 4c9fd4f34b..5587b34ec4 100644 --- a/hermes-console-vue/src/composables/consumer-groups/use-consumer-groups/useConsumerGroups.spec.ts +++ b/hermes-console-vue/src/composables/consumer-groups/use-consumer-groups/useConsumerGroups.spec.ts @@ -1,10 +1,11 @@ -import { afterEach } from 'vitest'; +import { afterEach, expect } from 'vitest'; import { dummyConsumerGroups } from '@/dummy/consumerGroups'; import { dummySubscription } from '@/dummy/subscription'; import { dummyTopic } from '@/dummy/topic'; import { fetchConsumerGroupsErrorHandler, fetchConsumerGroupsHandler, + moveSubscriptionOffsetsHandler, } from '@/mocks/handlers'; import { setupServer } from 'msw/node'; import { useConsumerGroups } from '@/composables/consumer-groups/use-consumer-groups/useConsumerGroups'; @@ -66,4 +67,35 @@ describe('useConsumerGroups', () => { expect(error.value.fetchConsumerGroups).not.toBeNull(); }); }); + + it('should show message that moving offsets was successful', async () => { + // given + server.listen(); + const { moveOffsets } = useConsumerGroups(topicName, subscriptionName); + + // when + moveOffsets(); + + // then + //TODO: check that notification was sent + }); + + it('should show message that moving offsets was unsuccessful', async () => { + // given + server.use( + moveSubscriptionOffsetsHandler({ + topicName, + subscriptionName, + statusCode: 500, + }), + ); + server.listen(); + const { moveOffsets } = useConsumerGroups(topicName, subscriptionName); + + // when + moveOffsets(); + + // then + //TODO: check that notification was sent + }); }); diff --git a/hermes-console-vue/src/composables/consumer-groups/use-consumer-groups/useConsumerGroups.ts b/hermes-console-vue/src/composables/consumer-groups/use-consumer-groups/useConsumerGroups.ts index f51dfbfb50..69ca0e3562 100644 --- a/hermes-console-vue/src/composables/consumer-groups/use-consumer-groups/useConsumerGroups.ts +++ b/hermes-console-vue/src/composables/consumer-groups/use-consumer-groups/useConsumerGroups.ts @@ -11,7 +11,7 @@ import i18n from '@/main'; export interface UseConsumerGroups { consumerGroups: Ref; - moveOffsets: (topicName: string, subscriptionName: string) => void; + moveOffsets: () => void; loading: Ref; error: Ref; } @@ -43,7 +43,7 @@ export function useConsumerGroups( } }; - const moveOffsets = async (topicName: string, subscriptionName: string) => { + const moveOffsets = async () => { const notificationsStore = useNotificationsStore(); try { await moveSubscriptionOffsets(topicName, subscriptionName); diff --git a/hermes-console-vue/src/views/admin/consumer-groups/ConsumerGroupsView.vue b/hermes-console-vue/src/views/admin/consumer-groups/ConsumerGroupsView.vue index c4e40404c9..e6149517dc 100644 --- a/hermes-console-vue/src/views/admin/consumer-groups/ConsumerGroupsView.vue +++ b/hermes-console-vue/src/views/admin/consumer-groups/ConsumerGroupsView.vue @@ -65,7 +65,7 @@

- + {{ $t('subscription.moveOffsets.button') }} {{ $t('subscription.moveOffsets.tooltip') diff --git a/hermes-console-vue/src/views/subscription/subscription-offsets/SubscriptionOffsets.spec.ts b/hermes-console-vue/src/views/subscription/subscription-offsets/SubscriptionOffsets.spec.ts deleted file mode 100644 index e8e4842ecb..0000000000 --- a/hermes-console-vue/src/views/subscription/subscription-offsets/SubscriptionOffsets.spec.ts +++ /dev/null @@ -1,49 +0,0 @@ -import { describe, expect } from 'vitest'; -import { dummySubscription } from '@/dummy/subscription'; -import { moveSubscriptionOffsetsHandler } from '@/mocks/handlers'; -import { render } from '@/utils/test-utils'; -import { setupServer } from 'msw/node'; -import SubscriptionOffsets from '@/views/subscription/subscription-offsets/SubscriptionOffsets.vue'; -import userEvent from '@testing-library/user-event'; - -describe('SubscriptionOffsets', () => { - const props = { subscription: dummySubscription }; - const args = { - topicName: dummySubscription.topicName, - subscriptionName: dummySubscription.name, - statusCode: 200, - }; - - const server = setupServer(moveSubscriptionOffsetsHandler(args)); - - it('should show message that moving offsets was successful', async () => { - // given - server.listen(); - const user = userEvent.setup(); - const { getByText } = render(SubscriptionOffsets, { props }); - - // when - await user.click(getByText('subscription.moveOffsets.button')); - - // then - expect(getByText('subscription.moveOffsets.success')).toBeVisible(); - }); - - it('should show message that moving offsets failed', async () => { - // given - server.use(moveSubscriptionOffsetsHandler({ ...args, statusCode: 500 })); - server.listen(); - const user = userEvent.setup(); - const { getByText } = render(SubscriptionOffsets, { props }); - - // when - await user.click(getByText('subscription.moveOffsets.button')); - - // then - expect( - getByText( - 'subscription.moveOffsets.failure, subscription.moveOffsets.status: 500, subscription.moveOffsets.response: ""', - ), - ).toBeVisible(); - }); -}); diff --git a/hermes-console-vue/src/views/subscription/subscription-offsets/SubscriptionOffsets.vue b/hermes-console-vue/src/views/subscription/subscription-offsets/SubscriptionOffsets.vue deleted file mode 100644 index 8b6a9439ef..0000000000 --- a/hermes-console-vue/src/views/subscription/subscription-offsets/SubscriptionOffsets.vue +++ /dev/null @@ -1,47 +0,0 @@ - - - - - From c5627e2c6b6231678be4cea7dec480b13fbe0172 Mon Sep 17 00:00:00 2001 From: "maciej.moscicki" Date: Thu, 24 Aug 2023 16:35:37 +0200 Subject: [PATCH 6/8] remove redundant validate status --- hermes-console-vue/src/api/hermes-client/index.ts | 5 ----- 1 file changed, 5 deletions(-) diff --git a/hermes-console-vue/src/api/hermes-client/index.ts b/hermes-console-vue/src/api/hermes-client/index.ts index bb4b824a5e..ede389f11e 100644 --- a/hermes-console-vue/src/api/hermes-client/index.ts +++ b/hermes-console-vue/src/api/hermes-client/index.ts @@ -166,10 +166,5 @@ export function moveSubscriptionOffsets( ): ResponsePromise { return axios.post( `/topics/${topicName}/subscriptions/${subscription}/moveOffsetsToTheEnd`, - { - validateStatus: (status: number) => { - return status > 200 && status < 400; - }, - }, ); } From 1edaa10cb61d86b0a1210d18da6ebfd6e18395b7 Mon Sep 17 00:00:00 2001 From: "maciej.moscicki" Date: Mon, 28 Aug 2023 09:29:17 +0200 Subject: [PATCH 7/8] mock global i18n --- hermes-console-vue/src/i18n.ts | 13 +++++++++++++ hermes-console-vue/src/main.ts | 12 +----------- hermes-console-vue/vitest.setup.ts | 10 ++++++++++ 3 files changed, 24 insertions(+), 11 deletions(-) create mode 100644 hermes-console-vue/src/i18n.ts diff --git a/hermes-console-vue/src/i18n.ts b/hermes-console-vue/src/i18n.ts new file mode 100644 index 0000000000..8dfc747790 --- /dev/null +++ b/hermes-console-vue/src/i18n.ts @@ -0,0 +1,13 @@ +import { createI18n } from 'vue-i18n'; +import messages from '@/i18n/messages'; + +export const i18n = createI18n({ + legacy: false, + locale: 'en-US', + fallbackLocale: 'en-US', + messages: messages, +}); + +export function useGlobalI18n() { + return i18n.global; +} diff --git a/hermes-console-vue/src/main.ts b/hermes-console-vue/src/main.ts index 97e22bdf65..4b5db0086f 100644 --- a/hermes-console-vue/src/main.ts +++ b/hermes-console-vue/src/main.ts @@ -3,12 +3,11 @@ import '@mdi/font/css/materialdesignicons.css'; import 'vuetify/styles'; import { aliases, mdi } from 'vuetify/iconsets/mdi'; import { createApp } from 'vue'; -import { createI18n } from 'vue-i18n'; import { createPinia } from 'pinia'; import { createVuetify } from 'vuetify'; +import { i18n } from '@/i18n'; import App from './App.vue'; import axios from 'axios'; -import messages from '@/i18n/messages'; import piniaPluginPersistedState from 'pinia-plugin-persistedstate'; import router from './router'; @@ -48,13 +47,6 @@ const vuetify = createVuetify({ }, }); -const i18n = createI18n({ - legacy: false, - locale: 'en-US', - fallbackLocale: 'en-US', - messages: messages, -}); - const store = createPinia(); store.use(piniaPluginPersistedState); @@ -67,5 +59,3 @@ app.use(router); app.use(store); app.mount('#app'); - -export default i18n; diff --git a/hermes-console-vue/vitest.setup.ts b/hermes-console-vue/vitest.setup.ts index 522f05c378..c39bcd0efb 100644 --- a/hermes-console-vue/vitest.setup.ts +++ b/hermes-console-vue/vitest.setup.ts @@ -1,10 +1,12 @@ import '@testing-library/jest-dom'; +import { useGlobalI18n } from './src/i18n'; import { useI18n } from 'vue-i18n'; import { vi } from 'vitest'; /* * Mock browser-specific elements. */ +vi.mock('./src/i18n'); global.ResizeObserver = vi.fn(() => ({ observe: vi.fn(), unobserve: vi.fn(), @@ -26,3 +28,11 @@ vi.mocked(useI18n, { }).mockReturnValue({ t: (key) => key, }); + +vi.mocked(useGlobalI18n, { + partial: true, + deep: true, +}).mockReturnValue({ + // @ts-ignore + t: (key) => key, +}); From c320a7ed76cf79531536a3ba60a6c807fbe100c3 Mon Sep 17 00:00:00 2001 From: "maciej.moscicki" Date: Mon, 28 Aug 2023 09:29:49 +0200 Subject: [PATCH 8/8] test moveOffsets notifications --- .../useConsumerGroups.spec.ts | 48 ++++++++++++++++++- .../use-consumer-groups/useConsumerGroups.ts | 21 ++++---- hermes-console-vue/src/i18n/en-US.ts | 10 +++- 3 files changed, 67 insertions(+), 12 deletions(-) diff --git a/hermes-console-vue/src/composables/consumer-groups/use-consumer-groups/useConsumerGroups.spec.ts b/hermes-console-vue/src/composables/consumer-groups/use-consumer-groups/useConsumerGroups.spec.ts index 5587b34ec4..320f14954f 100644 --- a/hermes-console-vue/src/composables/consumer-groups/use-consumer-groups/useConsumerGroups.spec.ts +++ b/hermes-console-vue/src/composables/consumer-groups/use-consumer-groups/useConsumerGroups.spec.ts @@ -1,4 +1,5 @@ import { afterEach, expect } from 'vitest'; +import { createTestingPinia } from '@pinia/testing'; import { dummyConsumerGroups } from '@/dummy/consumerGroups'; import { dummySubscription } from '@/dummy/subscription'; import { dummyTopic } from '@/dummy/topic'; @@ -7,8 +8,10 @@ import { fetchConsumerGroupsHandler, moveSubscriptionOffsetsHandler, } from '@/mocks/handlers'; +import { setActivePinia } from 'pinia'; import { setupServer } from 'msw/node'; import { useConsumerGroups } from '@/composables/consumer-groups/use-consumer-groups/useConsumerGroups'; +import { useNotificationsStore } from '@/store/app-notifications/useAppNotifications'; import { waitFor } from '@testing-library/vue'; describe('useConsumerGroups', () => { @@ -23,6 +26,14 @@ describe('useConsumerGroups', () => { }), ); + const pinia = createTestingPinia({ + fakeApp: true, + }); + + beforeEach(() => { + setActivePinia(pinia); + }); + afterEach(() => { server.resetHandlers(); }); @@ -70,14 +81,34 @@ describe('useConsumerGroups', () => { it('should show message that moving offsets was successful', async () => { // given + server.use( + moveSubscriptionOffsetsHandler({ + topicName, + subscriptionName, + statusCode: 200, + }), + ); server.listen(); + const notificationsStore = useNotificationsStore(); + const dispatchNotification = vi.spyOn( + notificationsStore, + 'dispatchNotification', + ); + const { moveOffsets } = useConsumerGroups(topicName, subscriptionName); // when moveOffsets(); // then - //TODO: check that notification was sent + await waitFor(() => { + expect(dispatchNotification).toHaveBeenLastCalledWith( + expect.objectContaining({ + type: 'success', + title: 'notifications.subscriptionOffsets.move.success', + }), + ); + }); }); it('should show message that moving offsets was unsuccessful', async () => { @@ -90,12 +121,25 @@ describe('useConsumerGroups', () => { }), ); server.listen(); + + const notificationsStore = useNotificationsStore(); + const dispatchNotification = vi.spyOn( + notificationsStore, + 'dispatchNotification', + ); const { moveOffsets } = useConsumerGroups(topicName, subscriptionName); // when moveOffsets(); // then - //TODO: check that notification was sent + await waitFor(() => { + expect(dispatchNotification).toHaveBeenLastCalledWith( + expect.objectContaining({ + type: 'error', + title: 'notifications.subscriptionOffsets.move.failure', + }), + ); + }); }); }); diff --git a/hermes-console-vue/src/composables/consumer-groups/use-consumer-groups/useConsumerGroups.ts b/hermes-console-vue/src/composables/consumer-groups/use-consumer-groups/useConsumerGroups.ts index 69ca0e3562..7ec1af6c23 100644 --- a/hermes-console-vue/src/composables/consumer-groups/use-consumer-groups/useConsumerGroups.ts +++ b/hermes-console-vue/src/composables/consumer-groups/use-consumer-groups/useConsumerGroups.ts @@ -3,12 +3,11 @@ import { moveSubscriptionOffsets, } from '@/api/hermes-client'; import { ref } from 'vue'; +import { useGlobalI18n } from '@/i18n'; import { useNotificationsStore } from '@/store/app-notifications/useAppNotifications'; import type { ConsumerGroup } from '@/api/consumer-group'; import type { Ref } from 'vue'; -import i18n from '@/main'; - export interface UseConsumerGroups { consumerGroups: Ref; moveOffsets: () => void; @@ -48,17 +47,23 @@ export function useConsumerGroups( try { await moveSubscriptionOffsets(topicName, subscriptionName); await notificationsStore.dispatchNotification({ - title: i18n.global.t('subscription.moveOffsets.success', { - subscriptionName, - }), + title: useGlobalI18n().t( + 'notifications.subscriptionOffsets.move.success', + { + subscriptionName, + }, + ), text: '', type: 'success', }); } catch (e) { await notificationsStore.dispatchNotification({ - title: i18n.global.t('subscription.moveOffsets.failure', { - subscriptionName, - }), + title: useGlobalI18n().t( + 'notifications.subscriptionOffsets.move.failure', + { + subscriptionName, + }, + ), text: (e as Error).message, type: 'error', }); diff --git a/hermes-console-vue/src/i18n/en-US.ts b/hermes-console-vue/src/i18n/en-US.ts index 76ea299ea0..b2e2f6ffac 100644 --- a/hermes-console-vue/src/i18n/en-US.ts +++ b/hermes-console-vue/src/i18n/en-US.ts @@ -483,8 +483,6 @@ const en_US = { moveOffsets: { tooltip: 'Move subscription offsets to the end', button: 'MOVE OFFSETS', - success: 'Moved offsets for subscription {subscriptionName}', - failure: 'Failed to move offsets for subscription {subscriptionName}', }, }, search: { @@ -517,6 +515,14 @@ const en_US = { }, }, }, + notifications: { + subscriptionOffsets: { + move: { + success: 'Moved offsets for subscription {subscriptionName}', + failure: 'Failed to move offsets for subscription {subscriptionName}', + }, + }, + }, }; export default en_US;