Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Minor UI improvements #1892

Merged
merged 9 commits into from
Oct 4, 2024
1 change: 1 addition & 0 deletions hermes-console/src/api/subscription.ts
Original file line number Diff line number Diff line change
Expand Up @@ -128,6 +128,7 @@ export interface SerialSubscriptionPolicyJson {
backoffMultiplier: number;
messageBackoff: number;
messageTtl: number;
inflightSize: number;
rate: number;
requestTimeout: number;
sendingDelay: number;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -126,6 +126,7 @@ function initializeForm(
inflightMessageTTL:
loadedConfig.value.subscription.defaults.subscriptionPolicy
.messageTtl || 3600,
inflightMessagesCount: null,
retryBackoff: 1000,
retryBackoffMultiplier: 1.0,
backoffMaxIntervalInSec: 600,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -76,6 +76,9 @@ function mapSerialSubscriptionPolicy(
),
messageBackoff: parseFloat(String(form.subscriptionPolicy.retryBackoff)),
messageTtl: parseFloat(String(form.subscriptionPolicy.inflightMessageTTL)),
inflightSize: parseFloat(
String(form.subscriptionPolicy.inflightMessagesCount),
),
rate: parseFloat(String(form.subscriptionPolicy.rateLimit!!)),
requestTimeout: parseFloat(String(form.subscriptionPolicy.requestTimeout)),
sendingDelay: parseFloat(String(form.subscriptionPolicy.sendingDelay)),
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,7 @@ export interface SubscriptionForm {
export interface FormSubscriptionPolicy {
rateLimit: number | null;
inflightMessageTTL: number;
inflightMessagesCount: number | null;
retryBackoff: number;
sendingDelay: number;
retryBackoffMultiplier: number;
Expand Down Expand Up @@ -69,6 +70,7 @@ export interface FormValidators {
requestTimeout: FieldValidator<number>[];
sendingDelay: FieldValidator<number>[];
inflightMessageTTL: FieldValidator<number>[];
inflightMessagesCount: FieldValidator<number>[];
retryBackoff: FieldValidator<number>[];
retryBackoffMultiplier: FieldValidator<number>[];
backoffMaxIntervalInSec: FieldValidator<number>[];
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -68,6 +68,7 @@ function formValidators(form: Ref<SubscriptionForm>): FormValidators {
],
sendingDelay: [required(), min(0), max(5000)],
inflightMessageTTL: [required(), min(0), max(7200)],
inflightMessagesCount: [min(1)],
retryBackoff: [required(), min(0), max(1000000)],
retryBackoffMultiplier: [required(), min(1), max(10)],
backoffMaxIntervalInSec: [required(), min(1), max(600)],
Expand Down Expand Up @@ -178,6 +179,7 @@ function createEmptyForm(): Ref<SubscriptionForm> {
subscriptionPolicy: {
rateLimit: null,
inflightMessageTTL: 3600,
inflightMessagesCount: null,
retryBackoff: 1000,
retryBackoffMultiplier: 1.0,
backoffMaxIntervalInSec: 600,
Expand Down Expand Up @@ -222,6 +224,7 @@ export function initializeFullyFilledForm(
? subscription.subscriptionPolicy.rate
: null,
inflightMessageTTL: subscription.subscriptionPolicy.messageTtl,
inflightMessagesCount: subscription.subscriptionPolicy.inflightSize,
retryBackoff: subscription.subscriptionPolicy.messageBackoff,
retryBackoffMultiplier:
subscription.deliveryType === DeliveryType.SERIAL
Expand Down
3 changes: 2 additions & 1 deletion hermes-console/src/composables/topic/use-form-topic/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,8 @@ export interface FormValidators {
ownerSource: FieldValidator<string>[];
owner: FieldValidator<any>[];
contentType: FieldValidator<string>[];
retentionTimeDuration: FieldValidator<number>[];
retentionTimeDurationHours: FieldValidator<number>[];
retentionTimeDurationDays: FieldValidator<number>[];
maxMessageSize: FieldValidator<number>[];
offlineRetentionTime: FieldValidator<number>[];
ack: FieldValidator<string>[];
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -38,9 +38,10 @@ function formValidators(): FormValidators {
ownerSource: [required()],
owner: [required()],
contentType: [required()],
retentionTimeDuration: [required(), min(0), max(7)],
retentionTimeDurationDays: [required(), min(1), max(7)],
retentionTimeDurationHours: [required(), min(1), max(24)],
maxMessageSize: [required(), min(0)],
offlineRetentionTime: [required(), min(0)],
offlineRetentionTime: [required(), min(1)],
ack: [required()],
};
}
Expand Down
4 changes: 4 additions & 0 deletions hermes-console/src/dummy/subscription-form.ts
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ export const dummySubscriptionForm = {
subscriptionPolicy: {
rateLimit: null,
inflightMessageTTL: 3600,
inflightMessagesCount: null,
retryBackoff: 1000,
retryBackoffMultiplier: 1.0,
backoffMaxIntervalInSec: 600,
Expand Down Expand Up @@ -59,6 +60,7 @@ export const dummySubscriptionFormValidator = {
requestTimeout: [required(), min(0), max(10000)],
sendingDelay: [required(), min(0), max(5000)],
inflightMessageTTL: [required(), min(0), max(7200)],
inflightMessagesCount: [min(1)],
retryBackoff: [required(), min(0), max(1000000)],
retryBackoffMultiplier: [required(), min(1), max(10)],
backoffMaxIntervalInSec: [required(), min(1), max(600)],
Expand Down Expand Up @@ -143,6 +145,7 @@ export const dummyInitializedSubscriptionForm = {
inflightMessageTTL:
dummyAppConfig.subscription.defaults.subscriptionPolicy.messageTtl ||
3600,
inflightMessagesCount: null,
retryBackoff: 1000,
retryBackoffMultiplier: 1.0,
backoffMaxIntervalInSec: 600,
Expand Down Expand Up @@ -183,6 +186,7 @@ export const dummyInitializedEditSubscriptionForm = {
subscriptionPolicy: {
rateLimit: dummySubscription.subscriptionPolicy.rate,
inflightMessageTTL: dummySubscription.subscriptionPolicy.messageTtl,
inflightMessagesCount: dummySubscription.subscriptionPolicy.inflightSize,
retryBackoff: dummySubscription.subscriptionPolicy.messageBackoff,
retryBackoffMultiplier:
dummySubscription.subscriptionPolicy.backoffMultiplier,
Expand Down
3 changes: 2 additions & 1 deletion hermes-console/src/dummy/topic-form.ts
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,8 @@ export const dummyTopicFormValidator = {
ownerSource: [required()],
owner: [required()],
contentType: [required()],
retentionTimeDuration: [required(), min(0), max(7)],
retentionTimeDurationDays: [required(), min(1), max(7)],
retentionTimeDurationHours: [required(), min(1), max(24)],
maxMessageSize: [required(), min(0)],
offlineRetentionTime: [required(), min(0)],
ack: [required()],
Expand Down
9 changes: 9 additions & 0 deletions hermes-console/src/i18n/en-US/subscription-form.ts
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,11 @@ const messages = {
'Time when message can be resent to endpoint after failed sending attempts',
suffix: 'seconds',
},
inflightMessagesCount: {
label: 'Inflight messages count',
placeholder:
'How many messages can be in inflight state at the same time',
},
retryOn4xx: {
label: 'Retry on http 4xx status',
},
Expand Down Expand Up @@ -118,6 +123,10 @@ const messages = {
title: 'Warning: Tracking all messages enabled',
text: 'Please chose this option only when necessary. Mainly this is for debugging problems with subscription. Remember to disable this mode after the problem is solved.',
},
adminForm: {
title: 'Warning: Admin form enabled.',
text: 'New fields in the form have been revealed (they are followed by a warning sign). The form will be submitted regardless of the validation of the fields.',
},
},
actions: {
create: 'Create subscription',
Expand Down
4 changes: 4 additions & 0 deletions hermes-console/src/i18n/en-US/topic-form.ts
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,10 @@ const messages = {
title: 'Warning: Tracking all messages enabled',
text: 'Please chose this option only when necessary. Mainly this is for debugging problems with subscription. Remember to disable this mode after the problem is solved.',
},
adminForm: {
title: 'Warning: Admin form enabled.',
text: 'New fields in the form have been revealed (they are followed by a warning sign). The form will be submitted regardless of the validation of the fields.',
},
},
info: {
avro: {
Expand Down
1 change: 1 addition & 0 deletions hermes-console/src/views/group-topics/GroupTopicsView.vue
Original file line number Diff line number Diff line change
Expand Up @@ -143,6 +143,7 @@
operation="add"
:group="groupId"
:topic="null"
:roles="roles"
@created="pushToTopic"
@cancel="hideTopicForm"
/>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
<script setup lang="ts">
import { computed, ref } from 'vue';
import { isAdmin } from '@/utils/roles-util';
import { useAppConfigStore } from '@/store/app-config/useAppConfigStore';
import { useCreateSubscription } from '@/composables/subscription/use-create-subscription/useCreateSubscription';
import { useEditSubscription } from '@/composables/subscription/use-edit-subscription/useEditSubscription';
Expand All @@ -13,12 +14,14 @@
import SubscriptionPathFiltersDebug from '@/views/subscription/subscription-form/subscription-basic-filters/SubscriptionPathFiltersDebug.vue';
import TextField from '@/components/text-field/TextField.vue';
import TooltipIcon from '@/components/tooltip-icon/TooltipIcon.vue';
import type { Role } from '@/api/role';
import type { Subscription } from '@/api/subscription';

const props = defineProps<{
topic: string;
subscription: Subscription | null;
operation: 'add' | 'edit';
roles: Role[] | undefined;
}>();
const emit = defineEmits<{
created: [subscription: string];
Expand Down Expand Up @@ -69,7 +72,7 @@
}

async function submit() {
if (isFormValid.value) {
if (isFormValid.value || isAdmin(props.roles)) {
const isOperationSucceeded = await createOrUpdateSubscription();
if (isOperationSucceeded) {
emit('created', form.value.name);
Expand All @@ -85,6 +88,13 @@
</script>

<template>
<console-alert
v-if="isAdmin(roles)"
:title="$t('subscriptionForm.warnings.adminForm.title')"
:text="$t('subscriptionForm.warnings.adminForm.text')"
type="warning"
class="mb-4"
/>
<v-file-input
v-if="operation === 'add'"
:label="$t('subscriptionForm.actions.import')"
Expand Down Expand Up @@ -253,6 +263,18 @@
:suffix="$t('subscriptionForm.fields.inflightMessageTTL.suffix')"
/>

<text-field
v-if="isAdmin(roles)"
v-model="form.subscriptionPolicy.inflightMessagesCount"
:rules="validators.inflightMessagesCount"
prepend-icon="$warning"
type="number"
:label="$t('subscriptionForm.fields.inflightMessagesCount.label')"
:placeholder="
$t('subscriptionForm.fields.inflightMessagesCount.placeholder')
"
/>

<v-divider />

<v-switch
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -78,6 +78,7 @@
operation="edit"
:subscription="subscription"
:topic="subscription.topicName"
:roles="roles"
@created="refreshPage"
@cancel="hideSubscriptionForm"
/>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -98,6 +98,7 @@
operation="add"
:subscription="null"
:topic="props.topicName"
:roles="roles"
@created="pushToSubscription"
@cancel="hideSubscriptionForm"
/>
Expand Down
41 changes: 36 additions & 5 deletions hermes-console/src/views/topic/topic-form/TopicForm.vue
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
<script setup lang="ts">
import { computed, ref } from 'vue';
import { isAdmin } from '@/utils/roles-util';
import { useAppConfigStore } from '@/store/app-config/useAppConfigStore';
import { useCreateTopic } from '@/composables/topic/use-create-topic/useCreateTopic';
import { useEditTopic } from '@/composables/topic/use-edit-topic/useEditTopic';
Expand All @@ -10,12 +11,15 @@
import ConsoleAlert from '@/components/console-alert/ConsoleAlert.vue';
import SelectField from '@/components/select-field/SelectField.vue';
import TextField from '@/components/text-field/TextField.vue';
import type { TopicWithSchema } from '@/api/Topic';
import type { Role } from '@/api/role';
import type { SelectFieldOption } from '@/components/select-field/types';
import type { TopicWithSchema } from '@/api/topic';

const props = defineProps<{
topic: TopicWithSchema | null;
group: string | null;
operation: 'add' | 'edit';
roles: Role[] | undefined;
}>();
const emit = defineEmits<{
created: [topic: string];
Expand All @@ -37,6 +41,17 @@
: useEditTopic(props.topic!!);
const { importFormData } = useImportTopic();

const adminContentTypes: SelectFieldOption[] = [
{
title: 'AVRO',
value: 'AVRO',
},
{
title: 'JSON',
value: 'JSON',
},
];

const ownerSelectorPlaceholder = computed(
() =>
configStore.loadedConfig.owner.sources.find(
Expand All @@ -54,6 +69,16 @@

const isAuthorizationSelected = computed(() => form.value.auth.enabled);

const durationValidator = computed(() =>
form.value.retentionTime.retentionUnit === 'DAYS'
? validators.retentionTimeDurationDays
: validators.retentionTimeDurationHours,
);

const allowedContentTypes = computed(() =>
isAdmin(props.roles) ? adminContentTypes : dataSources.contentTypes,
);

const isAvroContentTypeSelected = computed(
() => form.value.contentType === 'AVRO',
);
Expand All @@ -71,7 +96,7 @@
const showAvroAlert = computed(() => form.value.contentType === 'AVRO');

async function submit() {
if (isFormValid.value) {
if (isFormValid.value || isAdmin(props.roles)) {
const isOperationSucceeded = await createOrUpdateTopic();
if (isOperationSucceeded) {
emit('created', form.value.name);
Expand All @@ -87,6 +112,13 @@
</script>

<template>
<console-alert
v-if="isAdmin(roles)"
:title="$t('topicForm.warnings.adminForm.title')"
:text="$t('topicForm.warnings.adminForm.text')"
type="warning"
class="mb-4"
/>
<v-file-input
v-if="operation === 'add'"
:label="$t('topicForm.actions.import')"
Expand Down Expand Up @@ -213,7 +245,7 @@

<text-field
v-model.number="form.retentionTime.duration"
:rules="validators.retentionTimeDuration"
:rules="durationValidator"
type="number"
:label="$t('topicForm.fields.retentionTime.duration')"
/>
Expand All @@ -238,7 +270,7 @@
<select-field
v-model="form.contentType"
:label="$t('topicForm.fields.contentType')"
:items="dataSources.contentTypes"
:items="allowedContentTypes"
/>

<text-field
Expand Down Expand Up @@ -280,7 +312,6 @@
/>

<v-divider />

<!-- text not in i18n because of a problem with escaping characters-->
<console-alert
style="white-space: pre"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -91,6 +91,7 @@
operation="edit"
:topic="topic"
:group="null"
:roles="roles"
@created="refreshPage"
@cancel="hideTopicForm"
/>
Expand Down
8 changes: 4 additions & 4 deletions hermes-management/build.gradle
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
plugins {
id 'java-library'
id 'application'
id "com.github.node-gradle.node" version "2.2.4"
id "com.github.node-gradle.node" version "7.0.2"
}

mainClassName = 'pl.allegro.tech.hermes.management.HermesManagement'
Expand Down Expand Up @@ -51,9 +51,9 @@ node {
version = '20.4.0'
distBaseUrl = 'https://nodejs.org/dist'
download = true
workDir = file("${project.buildDir}/nodejs")
npmWorkDir = file("${project.buildDir}/npm")
nodeModulesDir = file("${project.rootDir}/hermes-console")
workDir.set(file("${project.buildDir}/nodejs"))
npmWorkDir.set(file("${project.buildDir}/npm"))
nodeProjectDir.set(file("${project.rootDir}/hermes-console"))
}

yarnSetup.dependsOn(nodeSetup)
Expand Down
Loading