From e6e87de46a57b9d9be98305ed925d633b067e8a6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?NaYeong=2CKim=28=EA=B9=80=EB=82=98=EC=98=81=29?=
 <nayeongkim@megazone.com>
Date: Thu, 9 Jan 2025 16:59:57 +0900
Subject: [PATCH 1/7] fix: fixed event rule update bug

Signed-off-by: NaYeong,Kim <nayeongkim@megazone.com>
---
 .../ServiceDetailTabsSettingsEventRule.vue         | 13 ++-----------
 ...rviceDetailTabsSettingsEventRuleDeleteModal.vue | 10 ++++++++++
 .../ServiceDetailTabsSettingsEventRuleFormCard.vue | 14 ++++++++++----
 .../ServiceDetailTabsSettingsEventRuleSidebar.vue  |  2 +-
 4 files changed, 23 insertions(+), 16 deletions(-)

diff --git a/apps/web/src/services/alert-manager/components/ServiceDetailTabsSettingsEventRule.vue b/apps/web/src/services/alert-manager/components/ServiceDetailTabsSettingsEventRule.vue
index 579b185954..caaa7abf49 100644
--- a/apps/web/src/services/alert-manager/components/ServiceDetailTabsSettingsEventRule.vue
+++ b/apps/web/src/services/alert-manager/components/ServiceDetailTabsSettingsEventRule.vue
@@ -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
@@ -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 {
@@ -95,6 +85,7 @@ watch(() => storeState.serviceId, async (id) => {
                                                                    :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"
@@ -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;
diff --git a/apps/web/src/services/alert-manager/components/ServiceDetailTabsSettingsEventRuleDeleteModal.vue b/apps/web/src/services/alert-manager/components/ServiceDetailTabsSettingsEventRuleDeleteModal.vue
index 03ccc1d952..91a96dadf8 100644
--- a/apps/web/src/services/alert-manager/components/ServiceDetailTabsSettingsEventRuleDeleteModal.vue
+++ b/apps/web/src/services/alert-manager/components/ServiceDetailTabsSettingsEventRuleDeleteModal.vue
@@ -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';
 
@@ -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,
@@ -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 {
diff --git a/apps/web/src/services/alert-manager/components/ServiceDetailTabsSettingsEventRuleFormCard.vue b/apps/web/src/services/alert-manager/components/ServiceDetailTabsSettingsEventRuleFormCard.vue
index 7da6f3214b..0b24c430d3 100644
--- a/apps/web/src/services/alert-manager/components/ServiceDetailTabsSettingsEventRuleFormCard.vue
+++ b/apps/web/src/services/alert-manager/components/ServiceDetailTabsSettingsEventRuleFormCard.vue
@@ -49,6 +49,8 @@ const allReferenceGetters = allReferenceStore.getters;
 const serviceDetailPageStore = useServiceDetailPageStore();
 const serviceDetailPageState = serviceDetailPageStore.state;
 
+const emit = defineEmits<{(e: 'confirm'): void}>();
+
 const storeState = reactive({
     serviceId: computed<string>(() => serviceDetailPageState.serviceInfo.service_id),
     isEventRuleEditMode: computed<boolean>(() => serviceDetailPageState.isEventRuleEditMode),
@@ -188,11 +190,15 @@ const handleAddButton = async () => {
         await serviceDetailPageStore.fetchEventRuleList({
             service_id: storeState.serviceId,
         });
+        if (storeState.isEventRuleEditMode) {
+            emit('confirm');
+        } else {
+            await replaceUrlQuery({
+                webhookId: response.webhook_id || 'global',
+                eventRuleId: response.event_rule_id,
+            });
+        }
         await handleDeleteForm();
-        await replaceUrlQuery({
-            webhookId: response.webhook_id || 'global',
-            eventRuleId: response.event_rule_id,
-        });
     } finally {
         state.loading = false;
     }
diff --git a/apps/web/src/services/alert-manager/components/ServiceDetailTabsSettingsEventRuleSidebar.vue b/apps/web/src/services/alert-manager/components/ServiceDetailTabsSettingsEventRuleSidebar.vue
index b7da1706c9..3a0243984f 100644
--- a/apps/web/src/services/alert-manager/components/ServiceDetailTabsSettingsEventRuleSidebar.vue
+++ b/apps/web/src/services/alert-manager/components/ServiceDetailTabsSettingsEventRuleSidebar.vue
@@ -223,7 +223,7 @@ watch([() => storeState.eventRuleInfo.event_rule_id, () => route.query?.eventRul
 watch(() => state.filteredItems, (items) => {
     if (!items.length) return;
     initSidebar();
-}, { immediate: true });
+});
 </script>
 
 <template>

From 086d458f30998e90d8a2c875280c4bf2e2061e32 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?NaYeong=2CKim=28=EA=B9=80=EB=82=98=EC=98=81=29?=
 <nayeongkim@megazone.com>
Date: Thu, 9 Jan 2025 17:05:53 +0900
Subject: [PATCH 2/7] feat: add validation check at service key

Signed-off-by: NaYeong,Kim <nayeongkim@megazone.com>
---
 .../alert-manager/components/ServiceCreateStep1.vue         | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/apps/web/src/services/alert-manager/components/ServiceCreateStep1.vue b/apps/web/src/services/alert-manager/components/ServiceCreateStep1.vue
index 0ed9e8f17d..3e0e1e060c 100644
--- a/apps/web/src/services/alert-manager/components/ServiceCreateStep1.vue
+++ b/apps/web/src/services/alert-manager/components/ServiceCreateStep1.vue
@@ -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 '';
     },
 });

From 61cf7fac766ce358f1ac67329161eb5531a577dc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?NaYeong=2CKim=28=EA=B9=80=EB=82=98=EC=98=81=29?=
 <nayeongkim@megazone.com>
Date: Thu, 9 Jan 2025 18:34:07 +0900
Subject: [PATCH 3/7] fix: fixed event rule bugs

Signed-off-by: NaYeong,Kim <nayeongkim@megazone.com>
---
 .../ServiceDetailTabsSettingsEventRule.vue    |  4 +-
 ...eDetailTabsSettingsEventRuleActionForm.vue | 53 +++++++++++++++----
 ...ServiceDetailTabsSettingsEventRuleCard.vue | 24 ++++-----
 ...viceDetailTabsSettingsEventRuleSidebar.vue |  6 +--
 .../alert-manager/types/alert-manager-type.ts |  4 ++
 5 files changed, 61 insertions(+), 30 deletions(-)

diff --git a/apps/web/src/services/alert-manager/components/ServiceDetailTabsSettingsEventRule.vue b/apps/web/src/services/alert-manager/components/ServiceDetailTabsSettingsEventRule.vue
index caaa7abf49..dc3f3ea0aa 100644
--- a/apps/web/src/services/alert-manager/components/ServiceDetailTabsSettingsEventRule.vue
+++ b/apps/web/src/services/alert-manager/components/ServiceDetailTabsSettingsEventRule.vue
@@ -43,6 +43,7 @@ const handleClickAddRule = () => {
 };
 
 const fetchEventRuleInfo = async () => {
+    console.log('fetchEventRuleInfo', route.query?.eventRuleId);
     state.eventRuleInfoLoading = true;
     try {
         await serviceDetailPageStore.fetchEventRuleInfo({
@@ -54,6 +55,7 @@ const fetchEventRuleInfo = async () => {
 };
 
 watch(() => route.query?.eventRuleId, (eventRuleId) => {
+    console.log({ eventRuleId });
     if (eventRuleId) {
         fetchEventRuleInfo();
     }
@@ -77,7 +79,7 @@ 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"
                 />
diff --git a/apps/web/src/services/alert-manager/components/ServiceDetailTabsSettingsEventRuleActionForm.vue b/apps/web/src/services/alert-manager/components/ServiceDetailTabsSettingsEventRuleActionForm.vue
index 773a29f7f7..795b648a19 100644
--- a/apps/web/src/services/alert-manager/components/ServiceDetailTabsSettingsEventRuleActionForm.vue
+++ b/apps/web/src/services/alert-manager/components/ServiceDetailTabsSettingsEventRuleActionForm.vue
@@ -52,6 +52,7 @@ import type {
     EventRuleActionsToggleType,
     EventRuleActionsUrgencyRadioType,
     EventRuleSettingsType,
+    EventRuleActionsTempAssetRadioType,
 } from '@/services/alert-manager/types/alert-manager-type';
 
 const allReferenceStore = useAllReferenceStore();
@@ -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',
             },
         ],
@@ -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({
@@ -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[],
@@ -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: '' }];
@@ -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: {},
@@ -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;
@@ -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];
     }
@@ -283,7 +287,8 @@ watch(() => formState, () => {
             return acc;
         }, {} as EventRuleActionsType);
 
-    if (_actions.match_asset?.create_temporary_asset) {
+    console.log({ _actions }, formState.selectedTempAssetRadio);
+    if (_actions.match_asset) {
         if (formState.rule.value && formState.rule.key) {
             _actions.match_asset = {
                 ..._actions.match_asset,
@@ -296,6 +301,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(
@@ -340,8 +346,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">
@@ -361,7 +369,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
@@ -423,7 +431,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"
@@ -482,6 +490,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"
@@ -591,6 +618,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);
diff --git a/apps/web/src/services/alert-manager/components/ServiceDetailTabsSettingsEventRuleCard.vue b/apps/web/src/services/alert-manager/components/ServiceDetailTabsSettingsEventRuleCard.vue
index 4f68ac5f90..993f236e39 100644
--- a/apps/web/src/services/alert-manager/components/ServiceDetailTabsSettingsEventRuleCard.vue
+++ b/apps/web/src/services/alert-manager/components/ServiceDetailTabsSettingsEventRuleCard.vue
@@ -73,6 +73,7 @@ const state = reactive({
             'add_additional_info',
         ];
 
+        console.log(storeState.eventRuleInfo);
         if (storeState.eventRuleInfo.actions) {
             actionOrder.forEach((actionKey) => {
                 const actionValue = storeState.eventRuleInfo.actions[actionKey];
@@ -101,6 +102,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'),
@@ -182,18 +188,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()"
@@ -202,7 +200,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>
diff --git a/apps/web/src/services/alert-manager/components/ServiceDetailTabsSettingsEventRuleSidebar.vue b/apps/web/src/services/alert-manager/components/ServiceDetailTabsSettingsEventRuleSidebar.vue
index 3a0243984f..84a89262f7 100644
--- a/apps/web/src/services/alert-manager/components/ServiceDetailTabsSettingsEventRuleSidebar.vue
+++ b/apps/web/src/services/alert-manager/components/ServiceDetailTabsSettingsEventRuleSidebar.vue
@@ -208,16 +208,12 @@ const handleSearchInput = (value: string) => {
     });
 };
 
-watch([() => storeState.showEventRuleFormCard, () => storeState.isEventRuleEditMode], ([showEventRuleFormCard, isEventRuleEditMode]) => {
-    if (!showEventRuleFormCard && !isEventRuleEditMode) {
-        initSidebar();
-    }
-});
 watch([() => storeState.eventRuleInfo.event_rule_id, () => route.query?.eventRuleId], ([dataId, routeId]) => {
     state.selectedTreeId = routeId as string;
     if (routeId && dataId) {
         const scope = storeState.eventRuleInfo.webhook_id || 'global';
         updateTreeDisplayMap(scope, true);
+        serviceDetailPageStore.setShowEventRuleFormCard(false);
     }
 }, { immediate: true });
 watch(() => state.filteredItems, (items) => {
diff --git a/apps/web/src/services/alert-manager/types/alert-manager-type.ts b/apps/web/src/services/alert-manager/types/alert-manager-type.ts
index 1546d9eca2..5a316c70f2 100644
--- a/apps/web/src/services/alert-manager/types/alert-manager-type.ts
+++ b/apps/web/src/services/alert-manager/types/alert-manager-type.ts
@@ -103,3 +103,7 @@ export type EventRuleActionsUrgencyRadioType = {
     label: TranslateResult;
     name: EventRuleUrgencyType | 'NO_SET';
 };
+export type EventRuleActionsTempAssetRadioType = {
+    label: TranslateResult;
+    name: 'CREATE' | 'DO_NOT_CREATE';
+};

From a1d5223e5803e83d712682e8f8b7579aa2651918 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?NaYeong=2CKim=28=EA=B9=80=EB=82=98=EC=98=81=29?=
 <nayeongkim@megazone.com>
Date: Thu, 9 Jan 2025 18:34:20 +0900
Subject: [PATCH 4/7] feat: apply qa issue

Signed-off-by: NaYeong,Kim <nayeongkim@megazone.com>
---
 .../alert-manager/components/NotificationsCreateForm.vue       | 3 +++
 .../services/alert-manager/constants/alert-table-constant.ts   | 2 +-
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/apps/web/src/services/alert-manager/components/NotificationsCreateForm.vue b/apps/web/src/services/alert-manager/components/NotificationsCreateForm.vue
index e8710c5251..35fa729c72 100644
--- a/apps/web/src/services/alert-manager/components/NotificationsCreateForm.vue
+++ b/apps/web/src/services/alert-manager/components/NotificationsCreateForm.vue
@@ -53,6 +53,7 @@ const state = reactive({
         },
     ])),
     selectedRadioIdx: 0,
+    selectedMemberIds: [] as string[],
     selectedMemberItems: {} as Record<MembersType, string[]>,
     isSchemaDataValid: false,
     isMemberDataValid: computed<boolean>(() => {
@@ -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], (
@@ -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"
diff --git a/apps/web/src/services/alert-manager/constants/alert-table-constant.ts b/apps/web/src/services/alert-manager/constants/alert-table-constant.ts
index 1263aab1ba..4ea6187f46 100644
--- a/apps/web/src/services/alert-manager/constants/alert-table-constant.ts
+++ b/apps/web/src/services/alert-manager/constants/alert-table-constant.ts
@@ -18,7 +18,7 @@ export const ALERT_MANAGEMENT_TABLE_FIELDS: DataTableFieldType[] = [
     { name: 'urgency', label: 'Urgency' },
     { name: 'labels', label: 'Label' },
     { name: 'triggered_by', label: 'Triggered by' },
-    { name: 'duration', label: 'Duration' },
+    { name: 'duration', label: 'Duration', sortable: false },
     { name: 'created_at', label: 'Created' },
 ];
 export const ALERT_MANAGEMENT_TABLE_HANDLER: AlertManagementTableHandlerType = {

From 2f2ad7e6abe317d7abfe44fd5a55cb7595b93ef5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?NaYeong=2CKim=28=EA=B9=80=EB=82=98=EC=98=81=29?=
 <nayeongkim@megazone.com>
Date: Thu, 9 Jan 2025 18:34:32 +0900
Subject: [PATCH 5/7] chore: update translations

Signed-off-by: NaYeong,Kim <nayeongkim@megazone.com>
---
 .../console-translation-2.8.babel             | 56 ++++++++++++++++---
 packages/language-pack/en.json                |  4 +-
 packages/language-pack/ja.json                |  4 +-
 packages/language-pack/ko.json                |  4 +-
 4 files changed, 58 insertions(+), 10 deletions(-)

diff --git a/packages/language-pack/console-translation-2.8.babel b/packages/language-pack/console-translation-2.8.babel
index a090bfa8f6..9aac99c2bd 100644
--- a/packages/language-pack/console-translation-2.8.babel
+++ b/packages/language-pack/console-translation-2.8.babel
@@ -2742,7 +2742,7 @@
                                 </translations>
                             </concept_node>
                             <concept_node>
-                                <name>CREATE_TEMP_ASSET</name>
+                                <name>CREATE_TEMP_ASSET_DESC</name>
                                 <definition_loaded>false</definition_loaded>
                                 <description/>
                                 <comment/>
@@ -2763,7 +2763,7 @@
                                 </translations>
                             </concept_node>
                             <concept_node>
-                                <name>CREATE_TEMP_ASSET_DESC</name>
+                                <name>CURRENT_SERVICE</name>
                                 <definition_loaded>false</definition_loaded>
                                 <description/>
                                 <comment/>
@@ -2784,7 +2784,7 @@
                                 </translations>
                             </concept_node>
                             <concept_node>
-                                <name>CURRENT_SERVICE</name>
+                                <name>DELETE_MODAL_DESC</name>
                                 <definition_loaded>false</definition_loaded>
                                 <description/>
                                 <comment/>
@@ -2805,7 +2805,7 @@
                                 </translations>
                             </concept_node>
                             <concept_node>
-                                <name>DELETE_MODAL_DESC</name>
+                                <name>DESC</name>
                                 <definition_loaded>false</definition_loaded>
                                 <description/>
                                 <comment/>
@@ -2826,7 +2826,7 @@
                                 </translations>
                             </concept_node>
                             <concept_node>
-                                <name>DESC</name>
+                                <name>DOES_NOT_CONTAIN</name>
                                 <definition_loaded>false</definition_loaded>
                                 <description/>
                                 <comment/>
@@ -2847,7 +2847,7 @@
                                 </translations>
                             </concept_node>
                             <concept_node>
-                                <name>DOES_NOT_CONTAIN</name>
+                                <name>DOES_NOT_EQUAL</name>
                                 <definition_loaded>false</definition_loaded>
                                 <description/>
                                 <comment/>
@@ -2868,7 +2868,7 @@
                                 </translations>
                             </concept_node>
                             <concept_node>
-                                <name>DOES_NOT_EQUAL</name>
+                                <name>DO_NOT_CREATE</name>
                                 <definition_loaded>false</definition_loaded>
                                 <description/>
                                 <comment/>
@@ -3287,6 +3287,27 @@
                                     </translation>
                                 </translations>
                             </concept_node>
+                            <concept_node>
+                                <name>MATCH_ASSET</name>
+                                <definition_loaded>false</definition_loaded>
+                                <description/>
+                                <comment/>
+                                <default_text/>
+                                <translations>
+                                    <translation>
+                                        <language>en-US</language>
+                                        <approved>false</approved>
+                                    </translation>
+                                    <translation>
+                                        <language>ja-JP</language>
+                                        <approved>false</approved>
+                                    </translation>
+                                    <translation>
+                                        <language>ko-KR</language>
+                                        <approved>false</approved>
+                                    </translation>
+                                </translations>
+                            </concept_node>
                             <concept_node>
                                 <name>MODAL_SCOPE_DESC</name>
                                 <definition_loaded>false</definition_loaded>
@@ -3686,6 +3707,27 @@
                                     </translation>
                                 </translations>
                             </concept_node>
+                            <concept_node>
+                                <name>TEMP_ASSET</name>
+                                <definition_loaded>false</definition_loaded>
+                                <description/>
+                                <comment/>
+                                <default_text/>
+                                <translations>
+                                    <translation>
+                                        <language>en-US</language>
+                                        <approved>false</approved>
+                                    </translation>
+                                    <translation>
+                                        <language>ja-JP</language>
+                                        <approved>false</approved>
+                                    </translation>
+                                    <translation>
+                                        <language>ko-KR</language>
+                                        <approved>false</approved>
+                                    </translation>
+                                </translations>
+                            </concept_node>
                             <concept_node>
                                 <name>THEN_STOP_PROCESSING</name>
                                 <definition_loaded>false</definition_loaded>
diff --git a/packages/language-pack/en.json b/packages/language-pack/en.json
index b2755203fe..c96e467a92 100644
--- a/packages/language-pack/en.json
+++ b/packages/language-pack/en.json
@@ -134,13 +134,13 @@
 			"CHANGE_URGENCY": "Change Urgency",
 			"CONTAINS": "Contains",
 			"CREATE_FORM_TITLE": "Add Event Rule",
-			"CREATE_TEMP_ASSET": "Allow Temporary Asset Mapping",
 			"CREATE_TEMP_ASSET_DESC": "Use this option to enable asset mapping for events when a matching asset is found.",
 			"CURRENT_SERVICE": "Current Service :",
 			"DELETE_MODAL_DESC": "Are you sure you want to delete this event rule?",
 			"DESC": "Event rules are excuted in ascending order.",
 			"DOES_NOT_CONTAIN": "does not contain",
 			"DOES_NOT_EQUAL": "does not equal",
+			"DO_NOT_CREATE": "Do not Create",
 			"EDIT_FORM_TITLE ": "Edit Event Rule",
 			"EQUALS": "equals",
 			"EXECUTE_ACTIONS": "Execute These Actions",
@@ -160,6 +160,7 @@
 			"LABEL_SEVERITY": "Severity",
 			"LABEL_TITLE": "Title",
 			"LOW": "Low",
+			"MATCH_ASSET": "Match Asset",
 			"MODAL_SCOPE_DESC": "The event rule scope can be set only once when it is created.",
 			"MODAL_SCOPE_TITLE": "Event Rule Scope",
 			"NAME_REQUIRED": "Please enter name",
@@ -179,6 +180,7 @@
 			"SET_CONDITION": "Set Condition",
 			"SIDE_BAR_TITLE": "List of Rule Sets",
 			"STOP_PROCESSING": "Stop Processing",
+			"TEMP_ASSET": "Temporary Asset",
 			"THEN_STOP_PROCESSING": "Then stop processing",
 			"TITLE": "Event Rule",
 			"TRUE": "True",
diff --git a/packages/language-pack/ja.json b/packages/language-pack/ja.json
index 013deba5ee..17c947b172 100644
--- a/packages/language-pack/ja.json
+++ b/packages/language-pack/ja.json
@@ -134,13 +134,13 @@
 			"CHANGE_URGENCY": "緊急度変更",
 			"CONTAINS": "Contains",
 			"CREATE_FORM_TITLE": "イベントルール追加",
-			"CREATE_TEMP_ASSET": "一時的なアセットマッピングを許可する",
 			"CREATE_TEMP_ASSET_DESC": "一致するアセットが見つかると、イベントにアセットマッピングが自動的に適用されます。",
 			"CURRENT_SERVICE": "現在のサービス:",
 			"DELETE_MODAL_DESC": "このイベントルールを削除しますか？",
 			"DESC": "イベントルールは昇順で実行されます。",
 			"DOES_NOT_CONTAIN": "does not contain",
 			"DOES_NOT_EQUAL": "does not equal",
+			"DO_NOT_CREATE": "",
 			"EDIT_FORM_TITLE ": "イベントルール編集",
 			"EQUALS": "equals",
 			"EXECUTE_ACTIONS": "下記の作業を実行する",
@@ -160,6 +160,7 @@
 			"LABEL_SEVERITY": "緊急度",
 			"LABEL_TITLE": "タイトル",
 			"LOW": "低い",
+			"MATCH_ASSET": "",
 			"MODAL_SCOPE_DESC": "イベントルールのスコープは最初の作成時のみ指定可能です。",
 			"MODAL_SCOPE_TITLE": "イベントルールの範囲",
 			"NAME_REQUIRED": "お名前を入力してください。",
@@ -179,6 +180,7 @@
 			"SET_CONDITION": "条件設定",
 			"SIDE_BAR_TITLE": "ルール設定の一覧",
 			"STOP_PROCESSING": "作業を停止する",
+			"TEMP_ASSET": "",
 			"THEN_STOP_PROCESSING": "その後、作業は停止する",
 			"TITLE": "イベントルール",
 			"TRUE": "True",
diff --git a/packages/language-pack/ko.json b/packages/language-pack/ko.json
index 5cef978ff5..c11f959037 100644
--- a/packages/language-pack/ko.json
+++ b/packages/language-pack/ko.json
@@ -134,13 +134,13 @@
 			"CHANGE_URGENCY": "긴급도 변경",
 			"CONTAINS": "포함(contains)",
 			"CREATE_FORM_TITLE": "이벤트 규칙 추가",
-			"CREATE_TEMP_ASSET": "임시 자산 매핑 허용",
 			"CREATE_TEMP_ASSET_DESC": "일치하는 자산이 발견되면, 이벤트에 자산 매핑이 자동으로 적용됩니다",
 			"CURRENT_SERVICE": "현재 서비스 :",
 			"DELETE_MODAL_DESC": "이 이벤트 규칙을 삭제하시겠습니까?",
 			"DESC": "이벤트 규칙은 오름차순으로 실행됩니다.",
 			"DOES_NOT_CONTAIN": "포함하지 않음(does not contain)",
 			"DOES_NOT_EQUAL": "같지 않음(does not equal)",
+			"DO_NOT_CREATE": "",
 			"EDIT_FORM_TITLE ": "이벤트 규칙 편집",
 			"EQUALS": "같음(equals)",
 			"EXECUTE_ACTIONS": "아래 작업 실행",
@@ -160,6 +160,7 @@
 			"LABEL_SEVERITY": "심각도",
 			"LABEL_TITLE": "제목",
 			"LOW": "낮음",
+			"MATCH_ASSET": "",
 			"MODAL_SCOPE_DESC": "이벤트 규칙 범위는 최초 생성 시에만 지정 가능합니다.",
 			"MODAL_SCOPE_TITLE": "이벤트 규칙 범위",
 			"NAME_REQUIRED": "이름을 입력하세요.",
@@ -179,6 +180,7 @@
 			"SET_CONDITION": "조건 설정",
 			"SIDE_BAR_TITLE": "규칙 설정 목록",
 			"STOP_PROCESSING": "작업 중지",
+			"TEMP_ASSET": "임시 자산",
 			"THEN_STOP_PROCESSING": "이후 작업 실행하지 않기",
 			"TITLE": "이벤트 규칙",
 			"TRUE": "True",

From 3c04abe8e4fcb3d3c12d9a4c8cb64e5527549c9c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?NaYeong=2CKim=28=EA=B9=80=EB=82=98=EC=98=81=29?=
 <nayeongkim@megazone.com>
Date: Thu, 9 Jan 2025 19:36:01 +0900
Subject: [PATCH 6/7] feat: apply read write access check

Signed-off-by: NaYeong,Kim <nayeongkim@megazone.com>
---
 .../alert-manager/components/ServiceDetailHeader.vue     | 2 +-
 .../components/ServiceDetailTabsSettings.vue             | 2 +-
 .../ServiceDetailTabsSettingsEventRuleCard.vue           | 9 +++++++--
 .../components/ServiceDetailTabsWebhookDetailTabs.vue    | 7 ++++++-
 4 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/apps/web/src/services/alert-manager/components/ServiceDetailHeader.vue b/apps/web/src/services/alert-manager/components/ServiceDetailHeader.vue
index 7e9ed6e4b2..19b57dcf54 100644
--- a/apps/web/src/services/alert-manager/components/ServiceDetailHeader.vue
+++ b/apps/web/src/services/alert-manager/components/ServiceDetailHeader.vue
@@ -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"
diff --git a/apps/web/src/services/alert-manager/components/ServiceDetailTabsSettings.vue b/apps/web/src/services/alert-manager/components/ServiceDetailTabsSettings.vue
index d1bf964a9b..b4aae1627c 100644
--- a/apps/web/src/services/alert-manager/components/ServiceDetailTabsSettings.vue
+++ b/apps/web/src/services/alert-manager/components/ServiceDetailTabsSettings.vue
@@ -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"
diff --git a/apps/web/src/services/alert-manager/components/ServiceDetailTabsSettingsEventRuleCard.vue b/apps/web/src/services/alert-manager/components/ServiceDetailTabsSettingsEventRuleCard.vue
index 993f236e39..b8776de85e 100644
--- a/apps/web/src/services/alert-manager/components/ServiceDetailTabsSettingsEventRuleCard.vue
+++ b/apps/web/src/services/alert-manager/components/ServiceDetailTabsSettingsEventRuleCard.vue
@@ -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
@@ -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),
@@ -73,7 +77,6 @@ const state = reactive({
             'add_additional_info',
         ];
 
-        console.log(storeState.eventRuleInfo);
         if (storeState.eventRuleInfo.actions) {
             actionOrder.forEach((actionKey) => {
                 const actionValue = storeState.eventRuleInfo.actions[actionKey];
@@ -153,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"
diff --git a/apps/web/src/services/alert-manager/components/ServiceDetailTabsWebhookDetailTabs.vue b/apps/web/src/services/alert-manager/components/ServiceDetailTabsWebhookDetailTabs.vue
index d684f948bf..0fff0f9d96 100644
--- a/apps/web/src/services/alert-manager/components/ServiceDetailTabsWebhookDetailTabs.vue
+++ b/apps/web/src/services/alert-manager/components/ServiceDetailTabsWebhookDetailTabs.vue
@@ -28,6 +28,7 @@ import type { CloudServiceTypeReferenceMap } from '@/store/reference/cloud-servi
 import type { PluginReferenceMap } from '@/store/reference/plugin-reference-store';
 
 import ErrorHandler from '@/common/composables/error/errorHandler';
+import { usePageEditableStatus } from '@/common/composables/page-editable-status';
 import TagsOverlay from '@/common/modules/tags/tags-panel/modules/TagsOverlay.vue';
 import { sortTableItems } from '@/common/utils/table-sort';
 
@@ -46,6 +47,8 @@ const serviceDetailPageStore = useServiceDetailPageStore();
 const serviceDetailPageState = serviceDetailPageStore.state;
 const serviceDetailPageGetters = serviceDetailPageStore.getters;
 
+const { hasReadWriteAccess } = usePageEditableStatus();
+
 const storeState = reactive({
     cloudServiceTypeInfo: computed<CloudServiceTypeReferenceMap>(() => allReferenceGetters.cloudServiceType),
     language: computed<string>(() => serviceDetailPageGetters.language),
@@ -292,7 +295,9 @@ watch(() => storeState.selectedWebhookId, async () => {
                                    heading-type="sub"
                         />
                     </template>
-                    <template #extra>
+                    <template v-if="hasReadWriteAccess"
+                              #extra
+                    >
                         <p-button style-type="secondary"
                                   icon-left="ic_edit"
                                   @click="handleEditMessageFormat(true)"

From 8aec23b2ca05a58eaf00deb4562681330dfbb55b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?NaYeong=2CKim=28=EA=B9=80=EB=82=98=EC=98=81=29?=
 <nayeongkim@megazone.com>
Date: Thu, 9 Jan 2025 19:38:38 +0900
Subject: [PATCH 7/7] chore: remove console.log

Signed-off-by: NaYeong,Kim <nayeongkim@megazone.com>
---
 .../components/ServiceDetailTabsSettingsEventRule.vue           | 2 --
 .../components/ServiceDetailTabsSettingsEventRuleActionForm.vue | 1 -
 2 files changed, 3 deletions(-)

diff --git a/apps/web/src/services/alert-manager/components/ServiceDetailTabsSettingsEventRule.vue b/apps/web/src/services/alert-manager/components/ServiceDetailTabsSettingsEventRule.vue
index dc3f3ea0aa..6d477461f5 100644
--- a/apps/web/src/services/alert-manager/components/ServiceDetailTabsSettingsEventRule.vue
+++ b/apps/web/src/services/alert-manager/components/ServiceDetailTabsSettingsEventRule.vue
@@ -43,7 +43,6 @@ const handleClickAddRule = () => {
 };
 
 const fetchEventRuleInfo = async () => {
-    console.log('fetchEventRuleInfo', route.query?.eventRuleId);
     state.eventRuleInfoLoading = true;
     try {
         await serviceDetailPageStore.fetchEventRuleInfo({
@@ -55,7 +54,6 @@ const fetchEventRuleInfo = async () => {
 };
 
 watch(() => route.query?.eventRuleId, (eventRuleId) => {
-    console.log({ eventRuleId });
     if (eventRuleId) {
         fetchEventRuleInfo();
     }
diff --git a/apps/web/src/services/alert-manager/components/ServiceDetailTabsSettingsEventRuleActionForm.vue b/apps/web/src/services/alert-manager/components/ServiceDetailTabsSettingsEventRuleActionForm.vue
index 795b648a19..9d20833b74 100644
--- a/apps/web/src/services/alert-manager/components/ServiceDetailTabsSettingsEventRuleActionForm.vue
+++ b/apps/web/src/services/alert-manager/components/ServiceDetailTabsSettingsEventRuleActionForm.vue
@@ -287,7 +287,6 @@ watch(() => formState, () => {
             return acc;
         }, {} as EventRuleActionsType);
 
-    console.log({ _actions }, formState.selectedTempAssetRadio);
     if (_actions.match_asset) {
         if (formState.rule.value && formState.rule.key) {
             _actions.match_asset = {