Updated console dependencies (#1850)

* Updated console dependencies * Minor UI fixes
allegro · Apr 25, 2024 · eacfaf5 · eacfaf5
1 parent 6e68738
commit eacfaf5
Show file tree

Hide file tree

Showing 21 changed files with 1,922 additions and 2,052 deletions.
diff --git a/.github/workflows/ci-console.yml b/.github/workflows/ci-console.yml
@@ -16,7 +16,7 @@ jobs:
       - name: Setup node
         uses: actions/setup-node@v4
         with:
-          node-version: 18
+          node-version: 20
       - name: Run linter
         run: yarn && yarn lint
       - name: Run frontend tests

diff --git a/hermes-console/README.md b/hermes-console/README.md
@@ -4,7 +4,7 @@ Hermes console written in Vue 3.
 
 ## Requirements
 
-* node >=18.0.0
+* node >=20.0.0
 * yarn
 
 ## Project Setup

diff --git a/hermes-console/package.json b/hermes-console/package.json
@@ -3,63 +3,63 @@
   "description": "Console for Hermes Management",
   "license": "Apache-2.0",
   "engines": {
-    "node": ">=18.0.0"
+    "node": ">=20.0.0"
   },
   "scripts": {
     "dev": "vite",
     "build": "run-p type-check build-only",
     "preview": "vite preview",
-    "test:unit": "vitest --environment jsdom",
+    "test:unit": "vitest --silent --environment jsdom",
     "build-only": "vite build",
     "type-check": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false",
     "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --ignore-path .gitignore",
     "lint:fix": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
     "dev-server": "node json-server/server.ts"
   },
   "dependencies": {
-    "ace-builds": "1.28.0",
-    "axios": "1.4.0",
+    "ace-builds": "1.33.0",
+    "axios": "1.6.8",
     "base64-arraybuffer": "1.0.2",
-    "jwt-decode": "3.1.2",
-    "pinia": "2.1.4",
-    "pinia-plugin-persistedstate": "3.2.0",
-    "query-string": "8.1.0",
-    "uuid": "9.0.0",
-    "vue": "3.3.4",
-    "vue-i18n": "9.2.2",
-    "vue-router": "4.2.2",
-    "vue3-ace-editor": "2.2.3",
-    "vuetify": "3.3.2"
+    "jwt-decode": "4.0.0",
+    "pinia": "2.1.7",
+    "pinia-plugin-persistedstate": "3.2.1",
+    "query-string": "9.0.0",
+    "uuid": "9.0.1",
+    "vue": "3.4.23",
+    "vue-i18n": "9.13.0",
+    "vue-router": "4.3.2",
+    "vue3-ace-editor": "2.2.4",
+    "vuetify": "3.5.16"
   },
   "devDependencies": {
-    "@mdi/font": "7.1.96",
+    "@mdi/font": "7.4.47",
     "@pinia/testing": "0.1.3",
-    "@rushstack/eslint-patch": "1.2.0",
-    "@testing-library/jest-dom": "5.16.5",
-    "@testing-library/user-event": "14.4.3",
-    "@testing-library/vue": "7.0.0",
-    "@types/jsdom": "21.1.0",
-    "@types/node": "18.13.0",
-    "@types/uuid": "9.0.2",
-    "@vitejs/plugin-vue": "4.0.0",
-    "@vue/eslint-config-prettier": "7.0.0",
-    "@vue/eslint-config-typescript": "11.0.2",
-    "@vue/test-utils": "2.3.2",
+    "@rushstack/eslint-patch": "1.10.2",
+    "@testing-library/jest-dom": "6.4.2",
+    "@testing-library/user-event": "14.5.2",
+    "@testing-library/vue": "8.0.3",
+    "@types/jsdom": "21.1.6",
+    "@types/node": "20.12.7",
+    "@types/uuid": "9.0.8",
+    "@vitejs/plugin-vue": "5.0.4",
+    "@vue/eslint-config-prettier": "9.0.0",
+    "@vue/eslint-config-typescript": "13.0.0",
+    "@vue/test-utils": "2.4.5",
     "@vue/tsconfig": "0.1.3",
-    "eslint": "8.34.0",
+    "eslint": "8.57.0",
     "eslint-plugin-sort-imports-es6-autofix": "0.6.0",
-    "eslint-plugin-vue": "9.9.0",
-    "jsdom": "22.1.0",
-    "json-server": "0.17.1",
-    "msw": "1.2.2",
+    "eslint-plugin-vue": "9.25.0",
+    "jsdom": "24.0.0",
+    "json-server": "0.17.4",
+    "msw": "2.2.14",
     "npm-run-all": "4.1.5",
-    "prettier": "2.8.4",
-    "sass": "1.58.1",
+    "prettier": "3.2.5",
+    "sass": "1.75.0",
     "typescript": "4.9.5",
-    "vite": "4.1.1",
+    "vite": "5.2.9",
     "vite-plugin-rewrite-all": "1.0.1",
-    "vite-plugin-vuetify": "1.0.2",
-    "vitest": "0.31.4",
-    "vue-tsc": "1.0.24"
+    "vite-plugin-vuetify": "2.0.3",
+    "vitest": "1.5.0",
+    "vue-tsc": "2.0.13"
   }
 }
diff --git a/hermes-console/src/components/confirmation-dialog/ConfirmationDialog.spec.ts b/hermes-console/src/components/confirmation-dialog/ConfirmationDialog.spec.ts
@@ -126,20 +126,20 @@ describe('ConfirmationDialog', () => {
     ).toBeEnabled();
 
     //when
-    await userEvent.type(getAllByRole('textbox')[1], 'not matching text');
+    await userEvent.type(getAllByRole('textbox')[0], 'not matching text');
 
     //then
-    expect(getAllByRole('textbox')[1]).toHaveValue('not matching text');
+    expect(getAllByRole('textbox')[0]).toHaveValue('not matching text');
     expect(
       getByText('confirmationDialog.confirm').closest('button'),
     ).toBeDisabled();
 
     //when
-    await userEvent.clear(getAllByRole('textbox')[1]);
-    await userEvent.type(getAllByRole('textbox')[1], 'prod');
+    await userEvent.clear(getAllByRole('textbox')[0]);
+    await userEvent.type(getAllByRole('textbox')[0], 'prod');
 
     //then
-    expect(getAllByRole('textbox')[1]).toHaveValue('prod');
+    expect(getAllByRole('textbox')[0]).toHaveValue('prod');
     expect(
       getByText('confirmationDialog.confirm').closest('button'),
     ).toBeEnabled();

diff --git a/hermes-console/src/composables/subscription/use-create-subscription/useCreateSubscription.ts b/hermes-console/src/composables/subscription/use-create-subscription/useCreateSubscription.ts
@@ -128,6 +128,7 @@ function initializeForm(
           .messageTtl || 3600,
       retryBackoff: 1000,
       retryBackoffMultiplier: 1.0,
+      backoffMaxIntervalInSec: 600,
       sendingDelay: 0,
       requestTimeout:
         loadedConfig.value.subscription.defaults.subscriptionPolicy

diff --git a/hermes-console/src/composables/subscription/use-form-subscription/form-mapper.ts b/hermes-console/src/composables/subscription/use-form-subscription/form-mapper.ts
@@ -68,7 +68,9 @@ function mapSerialSubscriptionPolicy(
   form: SubscriptionForm,
 ): SerialSubscriptionPolicyJson {
   return {
-    backoffMaxIntervalInSec: 600,
+    backoffMaxIntervalInSec: parseFloat(
+      String(form.subscriptionPolicy.backoffMaxIntervalInSec),
+    ),
     backoffMultiplier: parseFloat(
       String(form.subscriptionPolicy.retryBackoffMultiplier),
     ),

diff --git a/hermes-console/src/composables/subscription/use-form-subscription/types.ts b/hermes-console/src/composables/subscription/use-form-subscription/types.ts
@@ -41,6 +41,7 @@ export interface FormSubscriptionPolicy {
   retryBackoff: number;
   sendingDelay: number;
   retryBackoffMultiplier: number;
+  backoffMaxIntervalInSec: number;
   requestTimeout: number;
   batchSize: number | null;
   batchTime: number | null;
@@ -70,6 +71,7 @@ export interface FormValidators {
   inflightMessageTTL: FieldValidator<number>[];
   retryBackoff: FieldValidator<number>[];
   retryBackoffMultiplier: FieldValidator<number>[];
+  backoffMaxIntervalInSec: FieldValidator<number>[];
   messageDeliveryTrackingMode: FieldValidator<string>[];
   monitoringSeverity: FieldValidator<string>[];
 }

diff --git a/hermes-console/src/composables/subscription/use-form-subscription/useFormSubscription.ts b/hermes-console/src/composables/subscription/use-form-subscription/useFormSubscription.ts
@@ -70,6 +70,7 @@ function formValidators(form: Ref<SubscriptionForm>): FormValidators {
     inflightMessageTTL: [required(), min(0), max(7200)],
     retryBackoff: [required(), min(0), max(1000000)],
     retryBackoffMultiplier: [required(), min(1), max(10)],
+    backoffMaxIntervalInSec: [required(), min(1), max(600)],
     messageDeliveryTrackingMode: [required()],
     monitoringSeverity: [required()],
   };
@@ -179,6 +180,7 @@ function createEmptyForm(): Ref<SubscriptionForm> {
       inflightMessageTTL: 3600,
       retryBackoff: 1000,
       retryBackoffMultiplier: 1.0,
+      backoffMaxIntervalInSec: 600,
       sendingDelay: 0,
       requestTimeout: 1000,
       batchSize: null,
@@ -225,6 +227,10 @@ export function initializeFullyFilledForm(
         subscription.deliveryType === DeliveryType.SERIAL
           ? subscription.subscriptionPolicy.backoffMultiplier
           : 1.0,
+      backoffMaxIntervalInSec:
+        subscription.deliveryType === DeliveryType.SERIAL
+          ? subscription.subscriptionPolicy.backoffMaxIntervalInSec
+          : 600,
       sendingDelay:
         subscription.deliveryType === DeliveryType.SERIAL
           ? subscription.subscriptionPolicy.sendingDelay

diff --git a/hermes-console/src/composables/subscription/use-import-subscription/useImportSubscription.ts b/hermes-console/src/composables/subscription/use-import-subscription/useImportSubscription.ts
@@ -22,8 +22,7 @@ export function useImportSubscription(): UseImportSubscription {
   ) {
     if (importedFile.value) {
       const reader = new FileReader();
-
-      reader.readAsText(importedFile.value[0]);
+      reader.readAsText(importedFile.value);
 
       reader.onload = function () {
         const subscription = JSON.parse(<string>reader.result);

diff --git a/hermes-console/src/composables/topic/use-import-topic/useImportTopic.ts b/hermes-console/src/composables/topic/use-import-topic/useImportTopic.ts
@@ -23,7 +23,7 @@ export function useImportTopic(): UseImportTopic {
     if (importedFile.value) {
       const reader = new FileReader();
 
-      reader.readAsText(importedFile.value[0]);
+      reader.readAsText(importedFile.value);
 
       reader.onload = function () {
         const topic = JSON.parse(<string>reader.result);

diff --git a/hermes-console/src/dummy/subscription-form.ts b/hermes-console/src/dummy/subscription-form.ts
@@ -20,6 +20,7 @@ export const dummySubscriptionForm = {
     inflightMessageTTL: 3600,
     retryBackoff: 1000,
     retryBackoffMultiplier: 1.0,
+    backoffMaxIntervalInSec: 600,
     sendingDelay: 0,
     requestTimeout: 1000,
     batchSize: null,
@@ -60,6 +61,7 @@ export const dummySubscriptionFormValidator = {
   inflightMessageTTL: [required(), min(0), max(7200)],
   retryBackoff: [required(), min(0), max(1000000)],
   retryBackoffMultiplier: [required(), min(1), max(10)],
+  backoffMaxIntervalInSec: [required(), min(1), max(600)],
   messageDeliveryTrackingMode: [required()],
   monitoringSeverity: [required()],
 };
@@ -143,6 +145,7 @@ export const dummyInitializedSubscriptionForm = {
       3600,
     retryBackoff: 1000,
     retryBackoffMultiplier: 1.0,
+    backoffMaxIntervalInSec: 600,
     sendingDelay: 0,
     requestTimeout:
       dummyAppConfig.subscription.defaults.subscriptionPolicy.requestTimeout ||
@@ -183,6 +186,8 @@ export const dummyInitializedEditSubscriptionForm = {
     retryBackoff: dummySubscription.subscriptionPolicy.messageBackoff,
     retryBackoffMultiplier:
       dummySubscription.subscriptionPolicy.backoffMultiplier,
+    backoffMaxIntervalInSec:
+      dummySubscription.subscriptionPolicy.backoffMaxIntervalInSec,
     sendingDelay: dummySubscription.subscriptionPolicy.sendingDelay,
     requestTimeout: dummySubscription.subscriptionPolicy.requestTimeout,
     batchSize: null,

diff --git a/hermes-console/src/i18n/en-US/index.ts b/hermes-console/src/i18n/en-US/index.ts
@@ -510,7 +510,7 @@ const en_US = {
       retryClientErrors: 'Retry on 4xx status',
       retryBackoff: 'Retry backoff',
       backoffMultiplier: 'Retry backoff multiplier',
-      backoffMaxInterval: 'Retry backoff max interval',
+      backoffMaxIntervalInSec: 'Retry backoff max interval',
       monitoringSeverity: 'Monitoring severity',
       monitoringReaction: 'Monitoring reaction',
       http2: 'Deliver using http/2',

diff --git a/hermes-console/src/i18n/en-US/subscription-form.ts b/hermes-console/src/i18n/en-US/subscription-form.ts
@@ -77,6 +77,12 @@ const messages = {
       placeholder:
         'Delay multiplier between consecutive send attempts of failed requests',
     },
+    backoffMaxIntervalInSec: {
+      label: 'Retry backoff max interval',
+      placeholder:
+        'Max delay between consecutive send attempts of failed requests',
+      suffix: 'seconds',
+    },
     messageDeliveryTrackingMode: {
       label: 'Message delivery tracking mode',
     },