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.

Sign up for GitHub

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

feat: apply qa issue, fixed bug #5470

Merged
merged 7 commits into from
Jan 9, 2025
Merged

feat: apply qa issue, fixed bug #5470

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
e6e87de
fix: fixed event rule update bug
skdud4659 Jan 9, 2025
086d458
feat: add validation check at service key
skdud4659 Jan 9, 2025
61cf7fa
fix: fixed event rule bugs
skdud4659 Jan 9, 2025
a1d5223
feat: apply qa issue
skdud4659 Jan 9, 2025
2f2ad7e
chore: update translations
skdud4659 Jan 9, 2025
3c04abe
feat: apply read write access check
skdud4659 Jan 9, 2025
8aec23b
chore: remove console.log
skdud4659 Jan 9, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions apps/web/src/services/alert-manager/components/NotificationsCreateForm.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,7 @@ const state = reactive({
},
])),
selectedRadioIdx: 0,
selectedMemberIds: [] as string[],
selectedMemberItems: {} as Record<MembersType, string[]>,
isSchemaDataValid: false,
isMemberDataValid: computed<boolean>(() => {
Expand Down Expand Up @@ -98,6 +99,7 @@ const handleScheduleForm = (form: ScheduleSettingFormType) => {
};
const handleChangeRadio = () => {
state.selectedMemberItems = {};
state.selectedMemberIds = [];
};

watch([() => name.value, () => state.scheduleForm, () => state.selectedRadioIdx, () => state.selectedMemberItems, () => state.schemaForm], (
Expand Down Expand Up @@ -174,6 +176,7 @@ watch([() => name.value, () => state.scheduleForm, () => state.selectedRadioIdx,
selection-type="multiple"
appearance-type="stack"
use-fixed-menu-style
:selected-ids.sync="state.selectedMemberIds"
:user-pool="storeState.createdServiceMembers?.USER || []"
:user-group-pool="storeState.createdServiceMembers?.USER_GROUP || []"
:show-category-title="false"
Expand Down
6 changes: 5 additions & 1 deletion apps/web/src/services/alert-manager/components/ServiceCreateStep1.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,10 +69,14 @@ const {
if (duplicatedName) {
return i18n.t('ALERT_MANAGER.SERVICE.VALIDATION_KEY_UNIQUE');
}
const regex = /^(?!-)[A-Z0-9-]+(?<!-)$/;
const regex = /^[A-Z0-9-]+$/;
if (!regex.test(value)) {
return i18n.t('ALERT_MANAGER.SERVICE.VALIDATION_KEY');
}
const invalidHyphenRegex = /^-|-$|--/;
if (invalidHyphenRegex.test(value)) {
return i18n.t('ALERT_MANAGER.SERVICE.VALIDATION_KEY_HYPHEN');
}
return '';
},
});
Expand Down
2 changes: 1 addition & 1 deletion apps/web/src/services/alert-manager/components/ServiceDetailHeader.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -119,7 +119,7 @@ const handleGoBackButton = () => {
</template>
</p-heading>
</template>
<template v-if="!state.isSettingMode && storeState.eventRuleList.length > 0"
<template v-if="hasReadWriteAccess && !state.isSettingMode && storeState.eventRuleList.length > 0"
#extra
>
<p-button icon-left="ic_plus_bold"
Expand Down
2 changes: 1 addition & 1 deletion apps/web/src/services/alert-manager/components/ServiceDetailTabsSettings.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -127,7 +127,7 @@ const handleClickEditButton = (type: ServiceDetailSettingCardType) => {
<div class="py-3 px-0.5">
<div class="flex items-center justify-between mb-6">
<span class="text-label-xl">{{ item.title }}</span>
<p-icon-button v-if="hasReadWriteAccess"
<p-icon-button v-if="hasReadWriteAccess || (!hasReadWriteAccess && item.type === SERVICE_SETTING_CARD.EVENT_RULE)"
name="ic_edit"
width="2rem"
height="2rem"
Expand Down
15 changes: 3 additions & 12 deletions apps/web/src/services/alert-manager/components/ServiceDetailTabsSettingsEventRule.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,6 @@ import { PButton, PDataLoader } from '@cloudforet/mirinae';
import { EVENT_RULE_SCOPE } from '@/schema/alert-manager/event-rule/constant';
import type { EventRuleModel } from '@/schema/alert-manager/event-rule/model';

import { replaceUrlQuery } from '@/lib/router-query-string';

import ServiceDetailTabsSettingsEventRuleCard
from '@/services/alert-manager/components/ServiceDetailTabsSettingsEventRuleCard.vue';
import ServiceDetailTabsSettingsEventRuleFormCard
Expand Down Expand Up @@ -58,16 +56,8 @@ const fetchEventRuleInfo = async () => {
watch(() => route.query?.eventRuleId, (eventRuleId) => {
if (eventRuleId) {
fetchEventRuleInfo();
serviceDetailPageStore.setShowEventRuleFormCard(false);
}
}, { immediate: true });
watch(() => storeState.items, (items) => {
if (!items.length) return;
replaceUrlQuery({
webhookId: items[0].webhook_id || 'global',
eventRuleId: items[0].event_rule_id,
});
});
watch(() => storeState.serviceId, async (id) => {
if (!id) return;
try {
Expand All @@ -87,14 +77,15 @@ watch(() => storeState.serviceId, async (id) => {
:data="!storeState.showEventRuleFormCard ? storeState.items : true"
class="loader"
>
<div class="content-wrapper flex gap-1">
<div class="content-wrapper flex gap-6">
<service-detail-tabs-settings-event-rule-sidebar :hide-sidebar.sync="state.hideSidebar"
:items="storeState.items"
/>
<service-detail-tabs-settings-event-rule-form-card v-if="storeState.showEventRuleFormCard"
:selected-webhook="storeState.isEventRuleEditMode ? storeState.eventRuleInfo.webhook_id : state.selectedWebhook"
:selected-scope="storeState.isEventRuleEditMode ? storeState.eventRuleInfo.scope : state.selectedScope"
class="flex-1"
@confirm="fetchEventRuleInfo()"
/>
<service-detail-tabs-settings-event-rule-card v-else-if="storeState.eventRuleInfo.event_rule_id"
class="flex-1"
Expand Down Expand Up @@ -129,7 +120,7 @@ watch(() => storeState.serviceId, async (id) => {
<style scoped lang="postcss">
.service-detail-tabs-settings-event-rule {
.loader {
min-height: 23.125rem;
min-height: 14rem;
}
.content-wrapper {
align-items: flex-start;
Expand Down
52 changes: 41 additions & 11 deletions ...eb/src/services/alert-manager/components/ServiceDetailTabsSettingsEventRuleActionForm.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,7 @@ import type {
EventRuleActionsToggleType,
EventRuleActionsUrgencyRadioType,
EventRuleSettingsType,
EventRuleActionsTempAssetRadioType,
} from '@/services/alert-manager/types/alert-manager-type';

const allReferenceStore = useAllReferenceStore();
Expand Down Expand Up @@ -86,7 +87,7 @@ const state = reactive({
],
asset: [
{
label: i18n.t('ALERT_MANAGER.EVENT_RULE.CREATE_TEMP_ASSET'),
label: i18n.t('ALERT_MANAGER.EVENT_RULE.MATCH_ASSET'),
name: 'match_asset',
},
],
Expand Down Expand Up @@ -127,6 +128,10 @@ const state = reactive({
{ label: i18n.t('ALERT_MANAGER.EVENT_RULE.HIGH'), name: EVENT_RULE_URGENCY.HIGH },
{ label: i18n.t('ALERT_MANAGER.EVENT_RULE.LOW'), name: EVENT_RULE_URGENCY.LOW },
]),
tempAssetRadioMenuList: computed<EventRuleActionsTempAssetRadioType[]>(() => [
{ label: i18n.t('ALERT_MANAGER.CREATE'), name: 'CREATE' },
{ label: i18n.t('ALERT_MANAGER.EVENT_RULE.DO_NOT_CREATE'), name: 'DO_NOT_CREATE' },
]),
escalationPolicyDropdownList: [] as SelectDropdownMenuItem[],
});
const formState = reactive({
Expand All @@ -135,6 +140,7 @@ const formState = reactive({
selectedAssetList: [] as SelectDropdownMenuItem[],
selectedStatusRadio: ALERT_STATUS.IGNORED as AlertStatusType,
selectedUrgencyRadio: EVENT_RULE_URGENCY.HIGH as EventRuleUrgencyType,
selectedTempAssetRadio: 'CREATE',
selectedEscalationPolicyId: '',
labels: [] as InputItem[],
additionalInfoTags: [{ key: '', value: '' }] as TagItem[],
Expand All @@ -148,6 +154,7 @@ const initializeState = (): void => {
formState.rule = { key: '', value: '' };
formState.selectedStatusRadio = ALERT_STATUS.IGNORED;
formState.selectedUrgencyRadio = EVENT_RULE_URGENCY.HIGH;
formState.selectedTempAssetRadio = 'CREATE';
formState.selectedEscalationPolicyId = '';
formState.labels = [];
formState.additionalInfoTags = [{ key: '', value: '' }];
Expand All @@ -163,7 +170,7 @@ const updateStateFromEventRuleInfo = (): void => {
formState.selectedServiceId = actions.change_service;
}

if (actions.match_asset?.create_temporary_asset) {
if (actions.match_asset) {
formState.selectedActions.match_asset = {
asset_types: [],
rule: {},
Expand All @@ -177,6 +184,7 @@ const updateStateFromEventRuleInfo = (): void => {
name: type,
label: storeState.cloudServiceType[type]?.label || '',
}));
formState.selectedTempAssetRadio = actions.match_asset.create_temporary_asset ? 'CREATE' : 'DO_NOT_CREATE';
}

if (actions.change_title) formState.selectedActions.change_title = actions.change_title;
Expand Down Expand Up @@ -219,10 +227,6 @@ const handleUpdateValue = (action: string, value: boolean) => {
};

_actions[action] = actionDefaults[action] ?? '';
} else if (action === 'match_asset') {
_actions[action] = { create_temporary_asset: false };
formState.selectedAssetList = [];
formState.rule = { key: '', value: '' };
} else {
delete _actions[action];
}
Expand Down Expand Up @@ -283,7 +287,7 @@ watch(() => formState, () => {
return acc;
}, {} as EventRuleActionsType);

if (_actions.match_asset?.create_temporary_asset) {
if (_actions.match_asset) {
if (formState.rule.value && formState.rule.key) {
_actions.match_asset = {
..._actions.match_asset,
Expand All @@ -296,6 +300,7 @@ watch(() => formState, () => {
asset_types: formState.selectedAssetList.map((item) => item.name),
};
}
_actions.match_asset.create_temporary_asset = formState.selectedTempAssetRadio === 'CREATE';
}

const validAdditionalInfoTags = formState.additionalInfoTags.filter(
Expand Down Expand Up @@ -340,8 +345,10 @@ watch(() => storeState.service.service_id, (id) => {
class="field-group flex flex-col"
>
<div class="flex items-start w-full">
<div class="toggle-wrapper flex items-center gap-2 mr-2">
<p-toggle-button :value="!!formState.selectedActions[action.name]"
<div class="toggle-wrapper flex items-center gap-2 mr-2"
:class="{'match-asset': action.name === 'match_asset'}"
>
<p-toggle-button :value="formState.selectedActions[action.name] !== undefined"
@update:value="handleUpdateValue(action.name, $event)"
/>
<p-field-title font-weight="regular">
Expand All @@ -361,7 +368,7 @@ watch(() => storeState.service.service_id, (id) => {
@update:selected="handleSelectAction(action.name, $event)"
/>
<p class="text-label-md pl-1">
<span class="text-gray-500">{{ $t('ALERT_MANAGER.EVENT_RULE.CURRENT_SERVICE') }}</span>
<span class="mr-1 text-gray-500">{{ $t('ALERT_MANAGER.EVENT_RULE.CURRENT_SERVICE') }}</span>
<p-link action-icon="internal-link"
new-tab
highlight
Expand Down Expand Up @@ -423,7 +430,7 @@ watch(() => storeState.service.service_id, (id) => {
</p-radio-group>
</div>
</div>
<div v-if="action.name === 'match_asset' && formState.selectedActions[action.name]?.create_temporary_asset">
<div v-if="action.name === 'match_asset' && formState.selectedActions[action.name]">
<div class="field-group flex items-center mt-3">
<p-field-title font-weight="regular"
class="field-title toggle-wrapper"
Expand Down Expand Up @@ -482,6 +489,25 @@ watch(() => storeState.service.service_id, (id) => {
</p-field-group>
</div>
</div>
<div class="field-group flex items-center">
<p-field-title font-weight="regular"
class="field-title toggle-wrapper"
>
{{ $t('ALERT_MANAGER.EVENT_RULE.TEMP_ASSET') }}
<span class="text-gray-500">({{ $t('ALERT_MANAGER.EVENT_RULE.OPTIONAL') }})</span>
</p-field-title>
<p-radio-group>
<p-radio v-for="(item, statusIdx) in state.tempAssetRadioMenuList"
:key="`change-temp-asset-${statusIdx}`"
v-model="formState.selectedTempAssetRadio"
:value="item.name"
>
<span class="radio-item">
{{ item.label }}
</span>
</p-radio>
</p-radio-group>
</div>
</div>
</p-field-group>
<div v-if="idx === 2"
Expand Down Expand Up @@ -591,6 +617,10 @@ watch(() => storeState.service.service_id, (id) => {
.toggle-wrapper {
min-width: 12.5rem;
height: 2rem;
&.match-asset {
@apply w-full;
min-width: unset;
}
}
.input-wrapper {
width: calc(100% - 12.5rem);
Expand Down
31 changes: 17 additions & 14 deletions apps/web/src/services/alert-manager/components/ServiceDetailTabsSettingsEventRuleCard.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,8 @@ import type { PluginReferenceMap } from '@/store/reference/plugin-reference-stor
import type { ServiceReferenceMap } from '@/store/reference/service-reference-store';
import type { WebhookReferenceMap } from '@/store/reference/webhook-reference-store';

import { usePageEditableStatus } from '@/common/composables/page-editable-status';

import { gray } from '@/styles/colors';

import ServiceDetailTabsSettingsEventRuleDeleteModal
Expand All @@ -48,6 +50,8 @@ const allReferenceGetters = allReferenceStore.getters;
const serviceDetailPageStore = useServiceDetailPageStore();
const serviceDetailPageState = serviceDetailPageStore.state;

const { hasReadWriteAccess } = usePageEditableStatus();

const storeState = reactive({
webhook: computed<WebhookReferenceMap>(() => allReferenceGetters.webhook),
plugins: computed<PluginReferenceMap>(() => allReferenceGetters.plugin),
Expand Down Expand Up @@ -101,6 +105,11 @@ const state = reactive({
value: matchAssetValue.rule,
});
}
result[type].push({
label: i18n.t('ALERT_MANAGER.EVENT_RULE.TEMP_ASSET'),
name: 'create_temporary_asset',
value: matchAssetValue.create_temporary_asset ? i18n.t('ALERT_MANAGER.CREATE') : i18n.t('ALERT_MANAGER.EVENT_RULE.DO_NOT_CREATE'),
});
} else if (actionKey === 'add_additional_info') {
result[type].push({
label: i18n.t('ALERT_MANAGER.ALERTS.ADDITIONAL_INFO'),
Expand Down Expand Up @@ -147,7 +156,9 @@ const handleDeleteEventRule = () => {
<template #header>
<div class="flex items-center justify-between">
<span class="font-bold">{{ $t('ALERT_MANAGER.EVENT_RULE.TITLE') }}</span>
<div class="flex items-center gap-2">
<div v-if="hasReadWriteAccess"
class="flex items-center gap-2"
>
<p-icon-button name="ic_edit"
style-type="transparent"
@click="handleEditEventRule"
Expand Down Expand Up @@ -182,18 +193,10 @@ const handleDeleteEventRule = () => {
/>
<p-field-group class="input-form scope">
<div class="flex items-center gap-1 text-label-md">
<span class="text-label-lg text-gray-500">{{ $t('ALERT_MANAGER.EVENT_RULE.WEBHOOK_SCOPE') }}: </span>
<p v-if="storeState.eventRuleInfo.scope === EVENT_RULE_SCOPE.GLOBAL"
class="scope-wrapper"
>
<p-i name="ic_globe-filled"
height="1rem"
width="1rem"
color="inherit"
/>
<span>{{ $t('ALERT_MANAGER.EVENT_RULE.GLOBAL') }}</span>
</p>
<p v-else
<span class="text-label-lg text-gray-500">
{{ storeState.eventRuleInfo.scope === EVENT_RULE_SCOPE.GLOBAL ? $t('ALERT_MANAGER.EVENT_RULE.GLOBAL_SCOPE') : $t('ALERT_MANAGER.EVENT_RULE.WEBHOOK_SCOPE') }}
</span>
<p v-if="storeState.eventRuleInfo.scope !== EVENT_RULE_SCOPE.GLOBAL"
class="scope-wrapper"
>
<p-lazy-img :src="getWebhookIcon()"
Expand All @@ -202,7 +205,7 @@ const handleDeleteEventRule = () => {
height="1rem"
class="icon"
/>
<span>{{ storeState.webhook[storeState.eventRuleInfo.webhook_id]?.label }}</span>
<span>: {{ storeState.webhook[storeState.eventRuleInfo.webhook_id]?.label }}</span>
</p>
</div>
</p-field-group>
Expand Down
10 changes: 10 additions & 0 deletions ...b/src/services/alert-manager/components/ServiceDetailTabsSettingsEventRuleDeleteModal.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,8 @@ import { PButtonModal } from '@cloudforet/mirinae';
import type { EventRuleDeleteParameters } from '@/schema/alert-manager/event-rule/api-verbs/delete';
import type { EventRuleModel } from '@/schema/alert-manager/event-rule/model';

import { replaceUrlQuery } from '@/lib/router-query-string';

import ErrorHandler from '@/common/composables/error/errorHandler';
import { useProxyValue } from '@/common/composables/proxy-state';

Expand All @@ -30,6 +32,7 @@ const emit = defineEmits<{(e: 'update:visible'): void;
const storeState = reactive({
serviceId: computed<string>(() => serviceDetailPageState.serviceInfo.service_id),
eventRuleInfo: computed<EventRuleModel>(() => serviceDetailPageState.eventRuleInfo),
eventRuleList: computed<EventRuleModel[]>(() => serviceDetailPageState.eventRuleList),
});
const state = reactive({
loading: false,
Expand All @@ -44,6 +47,13 @@ const handleConfirm = async () => {
await serviceDetailPageStore.fetchEventRuleList({
service_id: storeState.serviceId,
});
if (storeState.eventRuleList.length) {
const scope = storeState.eventRuleList[0].webhook_id || 'global';
await replaceUrlQuery({
webhookId: scope,
eventRuleId: storeState.eventRuleList[0].event_rule_id,
});
}
} catch (e) {
ErrorHandler.handleError(e, true);
} finally {
Expand Down
Loading
Loading