From 3d9ca7fe028b9205b0a11e813e17aa1a7f88b916 Mon Sep 17 00:00:00 2001
From: "NaYeong,Kim" <nayeongkim@megazone.com>
Date: Sun, 22 Dec 2024 22:26:35 +0900
Subject: [PATCH] feat: create escalation policy creation modal (#5297)

* feat: create escalation policy creation modal

Signed-off-by: NaYeong,Kim <nayeongkim@megazone.com>

* chore: update translations

Signed-off-by: NaYeong,Kim <nayeongkim@megazone.com>

---------

Signed-off-by: NaYeong,Kim <nayeongkim@megazone.com>
---
 .../components/ServiceDetailTabsSettings.vue  |   2 +-
 ...viceDetailTabsSettingsEscalationPolicy.vue | 166 +++++-----
 ...DetailTabsSettingsEscalationPolicyForm.vue | 196 ++++++++++++
 ...ngsEscalationPolicyFormChannelDropdown.vue | 282 +++++++++++++++++
 ...lTabsSettingsEscalationPolicyFormModal.vue | 165 ++++++++++
 ... ServiceDetailTabsSettingsUpdateModal.vue} |   0
 .../types/alert-manager-type.ts               |   8 +-
 .../console-translation-2.8.babel             | 294 ++++++++++++++++++
 packages/language-pack/en.json                |  14 +
 packages/language-pack/ja.json                |  14 +
 packages/language-pack/ko.json                |  14 +
 11 files changed, 1078 insertions(+), 77 deletions(-)
 create mode 100644 apps/web/src/services/alert-manager-v2/components/ServiceDetailTabsSettingsEscalationPolicyForm.vue
 create mode 100644 apps/web/src/services/alert-manager-v2/components/ServiceDetailTabsSettingsEscalationPolicyFormChannelDropdown.vue
 create mode 100644 apps/web/src/services/alert-manager-v2/components/ServiceDetailTabsSettingsEscalationPolicyFormModal.vue
 rename apps/web/src/services/alert-manager-v2/components/{ServiceDetailTabsSettingsModal.vue => ServiceDetailTabsSettingsUpdateModal.vue} (100%)

diff --git a/apps/web/src/services/alert-manager-v2/components/ServiceDetailTabsSettings.vue b/apps/web/src/services/alert-manager-v2/components/ServiceDetailTabsSettings.vue
index 9113c1e670..7fa39c5fad 100644
--- a/apps/web/src/services/alert-manager-v2/components/ServiceDetailTabsSettings.vue
+++ b/apps/web/src/services/alert-manager-v2/components/ServiceDetailTabsSettings.vue
@@ -14,7 +14,7 @@ import { red } from '@/styles/colors';
 
 import ServiceDetailTabsSettingsEscalationPolicy
     from '@/services/alert-manager-v2/components/ServiceDetailTabsSettingsEscalationPolicy.vue';
-import ServiceDetailTabsSettingsModal from '@/services/alert-manager-v2/components/ServiceDetailTabsSettingsModal.vue';
+import ServiceDetailTabsSettingsModal from '@/services/alert-manager-v2/components/ServiceDetailTabsSettingsUpdateModal.vue';
 import { SERVICE_SETTING_CARD } from '@/services/alert-manager-v2/constants/common-constant';
 import { useServiceDetailPageStore } from '@/services/alert-manager-v2/stores/service-detail-page-store';
 import type { ServiceDetailSettingCardType, Service } from '@/services/alert-manager-v2/types/alert-manager-type';
diff --git a/apps/web/src/services/alert-manager-v2/components/ServiceDetailTabsSettingsEscalationPolicy.vue b/apps/web/src/services/alert-manager-v2/components/ServiceDetailTabsSettingsEscalationPolicy.vue
index 3d8938d0ce..303f98575d 100644
--- a/apps/web/src/services/alert-manager-v2/components/ServiceDetailTabsSettingsEscalationPolicy.vue
+++ b/apps/web/src/services/alert-manager-v2/components/ServiceDetailTabsSettingsEscalationPolicy.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import {
-    reactive, computed, onMounted,
+    reactive, computed, watch,
 } from 'vue';
 
 import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
@@ -26,10 +26,13 @@ import { useUserStore } from '@/store/user/user-store';
 import ErrorHandler from '@/common/composables/error/errorHandler';
 import { useQueryTags } from '@/common/composables/query-tags';
 
+import ServiceDetailTabsSettingsEscalationPolicyFormModal
+    from '@/services/alert-manager-v2/components/ServiceDetailTabsSettingsEscalationPolicyFormModal.vue';
 import {
     ESCALATION_POLICY_MANAGEMENT_TABLE_FIELDS, ESCALATION_POLICY_MANAGEMENT_TABLE_HANDLER,
 } from '@/services/alert-manager-v2/constants/escalation-policy-table-constant';
 import { useServiceDetailPageStore } from '@/services/alert-manager-v2/stores/service-detail-page-store';
+import type { EscalationPolicyModalType } from '@/services/alert-manager-v2/types/alert-manager-type';
 
 const serviceDetailPageStore = useServiceDetailPageStore();
 const serviceDetailPageState = serviceDetailPageStore.state;
@@ -59,12 +62,16 @@ const state = reactive({
     loading: false,
     items: [] as EscalationPolicyModel[],
     totalCount: 0,
-    selectIndex: [],
-    isSelectedItem: computed<number>(() => state.selectIndex?.length),
-    selectedItem: {} as EscalationPolicyModel,
+    selectIndex: undefined as number|undefined,
+    selectedItem: computed<EscalationPolicyModel>(() => state.items[state.selectIndex]),
+});
+const modalState = reactive({
+    visible: false,
+    type: 'CREATE' as EscalationPolicyModalType,
 });
 
-const escalationPolicyListApiQueryHelper = new ApiQueryHelper().setSort('created_at', true);
+const escalationPolicyListApiQueryHelper = new ApiQueryHelper().setSort('created_at', true)
+    .setPage(1, 15);
 const queryTagHelper = useQueryTags({ keyItemSets: ESCALATION_POLICY_MANAGEMENT_TABLE_HANDLER.keyItemSets });
 const { queryTags } = queryTagHelper;
 
@@ -73,8 +80,9 @@ const getConnectChannelCount = (rules: EscalationPolicyRulesType[]) => {
     const uniqueChannels = new Set(allChannels);
     return uniqueChannels.size;
 };
-const handleClickCreateButton = () => {
-    console.log('TODO: handleClickCreateButton');
+const handleClickCreateButton = (type: EscalationPolicyModalType) => {
+    modalState.visible = true;
+    modalState.type = type;
 };
 const handleSelectDropdownItem = (name) => {
     console.log('TODO: handleSelectDropdownItem', name);
@@ -89,7 +97,7 @@ const handleExportExcel = () => {
     console.log('TODO: handleExportExcel');
 };
 const handleSelectTableRow = (selectedItems: number[]) => {
-    state.selectedItem = state.items[selectedItems[0]];
+    state.selectIndex = selectedItems[0];
 };
 
 const fetchEscalationPolicyList = async () => {
@@ -113,80 +121,88 @@ const fetchEscalationPolicyList = async () => {
     }
 };
 
-onMounted(() => {
+watch(() => storeState.serviceId, (id) => {
+    if (!id) return;
     fetchEscalationPolicyList();
-});
+}, { immediate: true });
 </script>
 
 <template>
-    <p-toolbox-table class="service-detail-tabs-escalation-policy mt-4"
-                     search-type="query"
-                     selectable
-                     sortable
-                     exportable
-                     :multi-select="false"
-                     :loading="state.loading"
-                     :total-count="state.totalCount"
-                     :items="state.items"
-                     :fields="tableState.fields"
-                     :select-index.sync="state.selectIndex"
-                     :query-tags="queryTags"
-                     :key-item-sets="ESCALATION_POLICY_MANAGEMENT_TABLE_HANDLER.keyItemSets"
-                     :value-handler-map="ESCALATION_POLICY_MANAGEMENT_TABLE_HANDLER.valueHandlerMap"
-                     @change="handleChangeToolbox"
-                     @refresh="handleChangeToolbox()"
-                     @export="handleExportExcel"
-                     @select="handleSelectTableRow"
-    >
-        <template #toolbox-top>
-            <p-heading-layout class="pt-6 px-4">
-                <template #heading>
-                    <p-heading heading-type="sub"
-                               use-total-count
-                               :total-count="state.totalCount"
-                               :title="$t('ALERT_MANAGER.ESCALATION_POLICY.TITLE')"
-                    />
-                </template>
-                <template #extra>
-                    <p-button style-type="tertiary"
-                              icon-left="ic_settings-filled"
-                              size="sm"
-                              @click="handleClickCreateButton"
-                    >
-                        {{ $t('ALERT_MANAGER.ESCALATION_POLICY.SET_POLICY') }}
-                    </p-button>
-                    <p-button style-type="primary"
-                              icon-left="ic_plus_bold"
-                              size="sm"
-                              @click="handleClickCreateButton"
-                    >
-                        {{ $t('ALERT_MANAGER.CREATE') }}
-                    </p-button>
-                </template>
-            </p-heading-layout>
-        </template>
-        <template #toolbox-left>
-            <p-select-dropdown :menu="tableState.actionMenu"
-                               :disabled="!state.isSelectedItem"
-                               reset-selection-on-menu-close
-                               :placeholder="$t('ALERT_MANAGER.ACTION')"
-                               @select="handleSelectDropdownItem"
-            />
-        </template>
-        <template #col-repeat-format="{value}">
-            {{ value || 0 }}
-        </template>
-        <template #col-rules-format="{value}">
-            {{ getConnectChannelCount(value) }}
-        </template>
-        <template #col-created_at-format="{value}">
-            {{ iso8601Formatter(value, storeState.timezone) }}
-        </template>
-    </p-toolbox-table>
+    <div class="service-detail-tabs-escalation-policy">
+        <p-toolbox-table class="escalation-policy-table mt-4"
+                         search-type="query"
+                         selectable
+                         sortable
+                         exportable
+                         :multi-select="false"
+                         :loading="state.loading"
+                         :total-count="state.totalCount"
+                         :items="state.items"
+                         :fields="tableState.fields"
+                         :select-index="state.selectIndex"
+                         :query-tags="queryTags"
+                         :key-item-sets="ESCALATION_POLICY_MANAGEMENT_TABLE_HANDLER.keyItemSets"
+                         :value-handler-map="ESCALATION_POLICY_MANAGEMENT_TABLE_HANDLER.valueHandlerMap"
+                         @change="handleChangeToolbox"
+                         @refresh="handleChangeToolbox()"
+                         @export="handleExportExcel"
+                         @select="handleSelectTableRow"
+        >
+            <template #toolbox-top>
+                <p-heading-layout class="pt-6 px-4">
+                    <template #heading>
+                        <p-heading heading-type="sub"
+                                   use-total-count
+                                   :total-count="state.totalCount"
+                                   :title="$t('ALERT_MANAGER.ESCALATION_POLICY.TITLE')"
+                        />
+                    </template>
+                    <template #extra>
+                        <p-button style-type="tertiary"
+                                  icon-left="ic_settings-filled"
+                                  size="sm"
+                                  @click="handleClickCreateButton('SET')"
+                        >
+                            {{ $t('ALERT_MANAGER.ESCALATION_POLICY.SET_POLICY') }}
+                        </p-button>
+                        <p-button style-type="primary"
+                                  icon-left="ic_plus_bold"
+                                  size="sm"
+                                  @click="handleClickCreateButton('CREATE')"
+                        >
+                            {{ $t('ALERT_MANAGER.CREATE') }}
+                        </p-button>
+                    </template>
+                </p-heading-layout>
+            </template>
+            <template #toolbox-left>
+                <p-select-dropdown :menu="tableState.actionMenu"
+                                   :disabled="!state.selectIndex"
+                                   reset-selection-on-menu-close
+                                   :placeholder="$t('ALERT_MANAGER.ACTION')"
+                                   @select="handleSelectDropdownItem"
+                />
+            </template>
+            <template #col-repeat-format="{value}">
+                {{ value || 0 }}
+            </template>
+            <template #col-rules-format="{value}">
+                {{ getConnectChannelCount(value) }}
+            </template>
+            <template #col-created_at-format="{value}">
+                {{ iso8601Formatter(value, storeState.timezone) }}
+            </template>
+        </p-toolbox-table>
+        <service-detail-tabs-settings-escalation-policy-form-modal :visible="modalState.visible"
+                                                                   :type="modalState.type"
+        />
+    </div>
 </template>
 
 <style scoped lang="postcss">
 .service-detail-tabs-escalation-policy {
-    @apply rounded-md;
+    .escalation-policy-table {
+        @apply rounded-md;
+    }
 }
 </style>
diff --git a/apps/web/src/services/alert-manager-v2/components/ServiceDetailTabsSettingsEscalationPolicyForm.vue b/apps/web/src/services/alert-manager-v2/components/ServiceDetailTabsSettingsEscalationPolicyForm.vue
new file mode 100644
index 0000000000..d0dce964b6
--- /dev/null
+++ b/apps/web/src/services/alert-manager-v2/components/ServiceDetailTabsSettingsEscalationPolicyForm.vue
@@ -0,0 +1,196 @@
+<script setup lang="ts">
+import { cloneDeep } from 'lodash';
+
+import {
+    PCard, PBadge, PIconButton, PI, PTextInput, PFieldGroup, PTextButton,
+} from '@cloudforet/mirinae';
+
+import type { EscalationPolicyRulesType } from '@/schema/alert-manager/escalation-policy/type';
+
+import { useFormValidator } from '@/common/composables/form-validator';
+
+import { gray } from '@/styles/colors';
+
+import ServiceDetailTabsSettingsEscalationPolicyFormChannelDropdown
+    from '@/services/alert-manager-v2/components/ServiceDetailTabsSettingsEscalationPolicyFormChannelDropdown.vue';
+
+const {
+    forms: {
+        repeatCount,
+        rules,
+    },
+    setForm,
+    invalidState,
+    invalidTexts,
+} = useFormValidator({
+    repeatCount: 0,
+    rules: [{
+        channels: [],
+        escalate_minutes: 30,
+    }] as EscalationPolicyRulesType[],
+}, {
+    repeatCount(value) {
+        if (value === undefined) return true;
+        if (Number.isNaN(value) || typeof value !== 'number') return 'Only numbers are allowed.';
+        if (value < 0) return 'Must be 0 or greater.';
+        return true;
+    },
+    rules(value: EscalationPolicyRulesType[]) {
+        let result = '';
+        value.forEach((d, idx) => {
+            if (!repeatCount.value && idx === value.length - 1) return;
+            if (d?.escalate_minutes === undefined) result = 'Only numbers are allowed.';
+            else if (d?.escalate_minutes < 0) result = 'Must be 0 or greater.';
+        });
+        return result;
+    },
+});
+
+const handleDeleteRule = (idx: number) => {
+    const _rules = cloneDeep(rules.value);
+    _rules.splice(idx, 1);
+    if (_rules.length > 0 && !repeatCount.value) _rules[_rules.length - 1].escalate_minutes = 30;
+    setForm('rules', _rules);
+};
+const handleAddStep = () => {
+    const _rules = cloneDeep(rules.value);
+    if (_rules.length > 0 && !repeatCount.value) _rules[_rules.length - 1].escalate_minutes = 30;
+    _rules.push({
+        channels: [],
+        escalate_minutes: 30,
+    });
+    setForm('rules', _rules);
+};
+const handleUpdateRepeatCount = (_repeatCount: number) => {
+    const _after = Number(_repeatCount);
+    const _before = repeatCount.value;
+    const _rules = cloneDeep(rules.value);
+    //
+    if (!_before && _after > 0) _rules[_rules.length - 1].escalate_minutes = 30;
+    if (!_after) _rules[_rules.length - 1].escalate_minutes = 30;
+    setForm('rules', _rules);
+    setForm('repeatCount', _after);
+};
+</script>
+
+<template>
+    <div class="service-detail-tabs-settings-escalation-policy-form">
+        <div class="header flex bg-white py-2 px-4 justify-between border-b border-gray-200">
+            <div class="flex items-center gap-1">
+                <p-i name="ic_repeat"
+                     width="1.25rem"
+                     height="1.25rem"
+                />
+                <p-field-group required
+                               :invalid="invalidState.repeatCount"
+                               :invalid-text="invalidTexts.repeatCount"
+                               class="repeat-form"
+                >
+                    <template #default="{invalid}">
+                        <p-text-input :value="repeatCount"
+                                      type="number"
+                                      :min="0"
+                                      block
+                                      :invalid="invalid"
+                                      @update:value="handleUpdateRepeatCount"
+                        />
+                    </template>
+                </p-field-group>
+                <span>
+                    {{ $t('ALERT_MANAGER.ESCALATION_POLICY.REPEAT') }}
+                    <span class="text-gray-500">
+                        ({{ $t('MONITORING.ALERT.ESCALATION_POLICY.FORM.REPEAT_LABEL_HELP_TEXT') }})
+                    </span>
+                </span>
+            </div>
+            <p-icon-button class="add-button"
+                           shape="square"
+                           name="ic_plus_bold"
+                           style-type="tertiary"
+                           :disabled="rules.length >= 5"
+                           @click="handleAddStep"
+            />
+        </div>
+        <div class="py-4 px-6">
+            <p-card v-for="(rule, idx) in rules"
+                    :key="`rule-${idx}`"
+                    class="card"
+            >
+                <template #header>
+                    <div class="flex items-center">
+                        <p-i name="ic_drag-handle"
+                             width="1rem"
+                             height="1rem"
+                             :coler="gray[500]"
+                        />
+                        <p-badge badge-type="solid-outline"
+                                 style-type="gray500"
+                                 class="ml-1"
+                        >
+                            {{ $t('ALERT_MANAGER.ESCALATION_POLICY.STEP', { step: idx + 1}) }}
+                        </p-badge>
+                        <p-icon-button v-if="rules.length > 1"
+                                       class="ml-auto"
+                                       name="ic_delete"
+                                       size="sm"
+                                       @click="handleDeleteRule(idx)"
+                        />
+                    </div>
+                </template>
+                <i18n path="ALERT_MANAGER.ESCALATION_POLICY.ESCALATES_AFTER"
+                      class="flex items-center gap-2"
+                >
+                    <template #minute>
+                        <p-field-group required
+                                       :invalid="rule.escalate_minutes < 0"
+                                       class="minute-form"
+                        >
+                            <template #default="{invalid}">
+                                <p-text-input v-model.number="rule.escalate_minutes"
+                                              type="number"
+                                              :min="0"
+                                              :invalid="invalid"
+                                              block
+                                />
+                            </template>
+                        </p-field-group>
+                    </template>
+                </i18n>
+                <service-detail-tabs-settings-escalation-policy-form-channel-dropdown class="mt-2" />
+            </p-card>
+            <p-text-button class="add-rule-button mt-4 mx-auto "
+                           icon-left="ic_plus_bold"
+                           size="lg"
+            >
+                {{ $t('ALERT_MANAGER.ESCALATION_POLICY.ADD_RULE') }}
+            </p-text-button>
+        </div>
+    </div>
+</template>
+
+<style lang="postcss" scoped>
+.service-detail-tabs-settings-escalation-policy-form {
+    @apply bg-gray-100 text-label-md border border-gray-200 rounded-lg;
+    .header {
+        border-top-right-radius: 0.375rem;
+        border-top-left-radius: 0.375rem;
+        .repeat-form {
+            width: 4rem;
+            margin-bottom: 0;
+        }
+    }
+    .card {
+        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+        + .card {
+            margin-top: 1rem;
+        }
+        .minute-form {
+            width: 6.5rem;
+            margin-bottom: 0;
+        }
+    }
+    .add-rule-button {
+        @apply text-black font-bold;
+    }
+}
+</style>
diff --git a/apps/web/src/services/alert-manager-v2/components/ServiceDetailTabsSettingsEscalationPolicyFormChannelDropdown.vue b/apps/web/src/services/alert-manager-v2/components/ServiceDetailTabsSettingsEscalationPolicyFormChannelDropdown.vue
new file mode 100644
index 0000000000..bc476aebec
--- /dev/null
+++ b/apps/web/src/services/alert-manager-v2/components/ServiceDetailTabsSettingsEscalationPolicyFormChannelDropdown.vue
@@ -0,0 +1,282 @@
+<script setup lang="ts">
+import {
+    computed, reactive, watch,
+} from 'vue';
+
+import { isEqual } from 'lodash';
+
+import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
+import {
+    getTextHighlightRegex, PAvatar, PSelectDropdown, PTag,
+} from '@cloudforet/mirinae';
+import type {
+    AutocompleteHandler,
+    SelectDropdownMenuItem,
+} from '@cloudforet/mirinae/types/controls/dropdown/select-dropdown/type';
+
+import type { ListResponse } from '@/schema/_common/api-verbs/list';
+import type { ServiceChannelListParameters } from '@/schema/alert-manager/service-channel/api-verbs/list';
+import type { ServiceChannelModel } from '@/schema/alert-manager/service-channel/model';
+import type { UserChannelListParameters } from '@/schema/alert-manager/user-channel/api-verbs/list';
+import type { UserChannelModel } from '@/schema/alert-manager/user-channel/model';
+import type { UserGroupChannelListParameters } from '@/schema/alert-manager/user-group-channel/api-verbs/list';
+import type { UserGroupChannelModel } from '@/schema/alert-manager/user-group-channel/model';
+import { i18n } from '@/translations';
+
+import { useAllReferenceStore } from '@/store/reference/all-reference-store';
+import type { UserGroupReferenceMap } from '@/store/reference/user-group-reference-store';
+import type { UserReferenceMap } from '@/store/reference/user-reference-store';
+
+import ErrorHandler from '@/common/composables/error/errorHandler';
+import type { SelectedUserDropdownIdsType } from '@/common/modules/user/typte';
+
+import { indigo } from '@/styles/colors';
+
+import { useServiceDetailPageStore } from '@/services/alert-manager-v2/stores/service-detail-page-store';
+
+interface DropdownItem extends SelectDropdownMenuItem {
+    name: string;
+    label: string;
+    members?: number;
+    userName?: string;
+}
+type DropdownCategoriesType = {
+    key: string;
+    title: string;
+};
+
+const props = withDefaults(defineProps<{
+     selectedIds?: SelectedUserDropdownIdsType[];
+}>(), {
+    selectedIds: undefined,
+});
+
+const emit = defineEmits<{(event: 'update:selected-ids', value: SelectedUserDropdownIdsType[]): void;
+}>();
+
+const allReferenceStore = useAllReferenceStore();
+const allReferenceGetters = allReferenceStore.getters;
+const serviceDetailPageStore = useServiceDetailPageStore();
+const serviceDetailPageGetters = serviceDetailPageStore.getters;
+
+const storeState = reactive({
+    userReferenceMap: computed<UserReferenceMap>(() => allReferenceGetters.user),
+    userGroupReferenceMap: computed<UserGroupReferenceMap>(() => allReferenceGetters.user_group),
+    serviceId: computed<string>(() => serviceDetailPageGetters.serviceInfo.service_id),
+});
+const state = reactive({
+    loading: false,
+    serviceChannelList: [] as DropdownItem[],
+    userGroupChannelList: [] as DropdownItem[],
+    userChannelList: [] as DropdownItem[],
+    dropdownCategories: computed<DropdownCategoriesType[]>(() => {
+        const result: DropdownCategoriesType[] = [];
+        if (state.serviceChannelList.length > 0) {
+            result.push({
+                key: 'service_channel',
+                title: i18n.t('ALERT_MANAGER.ESCALATION_POLICY.CHANNEL') as string,
+            });
+        }
+        if (state.userGroupChannelList.length > 0) {
+            result.push({
+                key: 'user_group_channel',
+                title: i18n.t('ALERT_MANAGER.ESCALATION_POLICY.USER_GROUP') as string,
+            });
+        }
+        if (state.userChannelList.length > 0) {
+            result.push({
+                key: 'user_channel',
+                title: i18n.t('ALERT_MANAGER.ESCALATION_POLICY.USER') as string,
+            });
+        }
+        return result;
+    }),
+    selectedItems: [] as SelectDropdownMenuItem[],
+});
+
+const menuItemsHandler = (): AutocompleteHandler => async (keyword: string, pageStart = 1, pageLimit = 10, filters, resultIndex) => {
+    const _totalCount = pageStart - 1 + pageLimit;
+    const filterItems = (items: DropdownItem[]) => items.filter((item) => getTextHighlightRegex(keyword).test(item.name)).slice(pageStart - 1, _totalCount);
+
+    if (resultIndex === undefined) {
+        return state.dropdownCategories.map((c, idx) => {
+            const items: DropdownItem[] = [
+                { type: 'header', label: c.title, name: 'header' },
+            ];
+            if (c.key === 'service_channel') items.push(...state.serviceChannelList);
+            else if (c.key === 'user_group_channel') items.push(...state.userGroupChannelList);
+            else items.push(...state.userChannelList);
+
+            const _slicedItems = filterItems(items);
+            _slicedItems.unshift();
+            if (idx !== 0) {
+                _slicedItems.unshift({ type: 'divider', label: '', name: '' });
+            }
+            return {
+                results: _slicedItems,
+                more: _totalCount < items.length,
+            };
+        });
+    }
+
+    return state.dropdownCategories.map((c, i) => {
+        const items: DropdownItem[] = [];
+        if (c.key === 'service_channel') items.push(...state.serviceChannelList);
+        else if (c.key === 'user_group_channel') items.push(...state.userGroupChannelList);
+        else items.push(...state.userChannelList);
+        const _slicedItems = filterItems(items);
+        if (i !== resultIndex) return { results: [], title: c.title };
+        return {
+            results: _slicedItems,
+            more: _totalCount < items.length,
+        };
+    });
+};
+
+const currentUserIds = computed<SelectedUserDropdownIdsType[]>(() => state.selectedItems.map((item) => ({ value: item.name, type: checkUserGroup(item.name) ? 'USER_GROUP' : 'USER' })));
+
+const handleUpdateSelectedUserItems = (selectedUsers: SelectDropdownMenuItem[]) => {
+    if (isEqual(selectedUsers, state.selectedItems)) return; // prevent unnecessary update
+    state.selectedItems = selectedUsers; // it updates currentUserId and currentUserIds automatically
+    if (isEqual(currentUserIds.value, props.selectedIds)) return; // prevent unnecessary update
+    emit('update:selected-ids', currentUserIds.value);
+};
+const handleTagDelete = (idx: number) => {
+    state.selectedItems.splice(idx, 1);
+    emit('update:selected-ids', currentUserIds.value);
+};
+const initMultipleType = (_userIds?: SelectedUserDropdownIdsType[]) => {
+    if (!Array.isArray(_userIds)) throw new Error('userIds should be an array');
+    if (!isEqual(currentUserIds.value, _userIds)) {
+        state.selectedItems = _userIds.map((userId) => ({
+            name: userId.value,
+            label: storeState.userReferenceMap[userId.value]?.label ?? userId.value,
+        }));
+    }
+};
+const checkUserGroup = (id: string): boolean => state.userGroupChannelList.some((i) => i.name === id);
+
+const fetchServiceChannelList = async () => {
+    try {
+        const { results } = await SpaceConnector.clientV2.alertManager.serviceChannel.list<ServiceChannelListParameters, ListResponse<ServiceChannelModel>>({
+            service_id: storeState.serviceId,
+        });
+        state.serviceChannelList = (results || []).map((item) => ({
+            name: item.channel_id,
+            label: item.name,
+        })).sort((a, b) => a.label.localeCompare(b.label));
+    } catch (e) {
+        ErrorHandler.handleError(e, true);
+        state.serviceChannelList = [];
+    }
+};
+const fetchUserGroupChannelList = async () => {
+    try {
+        const { results } = await SpaceConnector.clientV2.alertManager.userGroupChnnel.list<UserGroupChannelListParameters, ListResponse<UserGroupChannelModel>>();
+        state.userGroupChannelList = (results || []).map((item) => ({
+            name: item.channel_id,
+            label: item.name,
+        })).sort((a, b) => a.label.localeCompare(b.label));
+    } catch (e) {
+        ErrorHandler.handleError(e, true);
+        state.userGroupChannelList = [];
+    }
+};
+const fetchUserChannelList = async () => {
+    try {
+        const { results } = await SpaceConnector.clientV2.alertManager.userChnnel.list<UserChannelListParameters, ListResponse<UserChannelModel>>();
+        state.userChannelList = (results || []).map((item) => ({
+            name: item.channel_id,
+            label: item.name,
+        })).sort((a, b) => a.label.localeCompare(b.label));
+    } catch (e) {
+        ErrorHandler.handleError(e, true);
+        state.userChannelList = [];
+    }
+};
+
+watch(() => storeState.serviceId, async (serviceId) => {
+    if (!serviceId) return;
+    await fetchServiceChannelList();
+    await fetchUserGroupChannelList();
+    await fetchUserChannelList();
+}, { immediate: true });
+watch(() => props.selectedIds, (newUserIds) => {
+    if (isEqual(currentUserIds.value, newUserIds)) return; // prevent infinite loop
+    initMultipleType(newUserIds);
+}, { immediate: true });
+</script>
+
+<template>
+    <p-select-dropdown show-select-marker
+                       class="user-select-dropdown"
+                       :selected="state.selectedItems"
+                       :handler="menuItemsHandler()"
+                       is-filterable
+                       page-size="10"
+                       use-fixed-menu-style
+                       show-delete-all-button
+                       multi-selectable
+                       appearance-type="stack"
+                       @update:selected="handleUpdateSelectedUserItems"
+    >
+        <template #dropdown-button>
+            <div class="flex flex-wrap py-1 gap-y-2">
+                <p-tag v-for="(item, idx) in state.selectedItems"
+                       :key="item.name"
+                       :outline="!checkUserGroup(item.name)"
+                       class="tag border-none"
+                       selected
+                       @delete="handleTagDelete(idx)"
+                >
+                    <div class="member-menu-item h-4">
+                        <p-avatar v-if="checkUserGroup(item.name)"
+                                  icon="ic_member"
+                                  :color="indigo[300]"
+                                  size="xs"
+                        />
+                        <p-avatar v-else
+                                  icon="ic_my-page_notifications-channel"
+                                  size="xs"
+                        />
+                        <span class="leading-4">{{ item.label }}</span>
+                    </div>
+                </p-tag>
+            </div>
+        </template>
+        <template #menu-item--format="{ item }">
+            <div class="member-menu-item">
+                <div>
+                    <p-avatar v-if="checkUserGroup(item.name)"
+                              class="menu-icon"
+                              icon="ic_member"
+                              :color="indigo[300]"
+                              size="xs"
+                    />
+                    <p-avatar v-else
+                              class="menu-icon"
+                              icon="ic_my-page_notifications-channel"
+                              size="xs"
+                    />
+                </div>
+                <span>{{ item.label }}</span>
+                <span class="text-gray-500">
+                    <span v-if="checkUserGroup(item.name)">({{ item?.members || 0 }} {{ $t('ALERT_MANAGER.ALERTS.MEMBERS') }})</span>
+                </span>
+            </div>
+        </template>
+    </p-select-dropdown>
+</template>
+
+<style scoped lang="postcss">
+.user-select-dropdown {
+    .member-menu-item {
+        @apply flex items-center;
+        gap: 0.25rem;
+    }
+    .tag {
+        padding-top: 0.125rem;
+        padding-bottom: 0.125rem;
+    }
+}
+</style>
diff --git a/apps/web/src/services/alert-manager-v2/components/ServiceDetailTabsSettingsEscalationPolicyFormModal.vue b/apps/web/src/services/alert-manager-v2/components/ServiceDetailTabsSettingsEscalationPolicyFormModal.vue
new file mode 100644
index 0000000000..431e8dbd94
--- /dev/null
+++ b/apps/web/src/services/alert-manager-v2/components/ServiceDetailTabsSettingsEscalationPolicyFormModal.vue
@@ -0,0 +1,165 @@
+<script lang="ts" setup>
+import {
+    computed, reactive,
+} from 'vue';
+import type { TranslateResult } from 'vue-i18n';
+
+import {
+    PButtonModal, PTextInput, PRadio, PFieldGroup, PRadioGroup, PTextButton,
+} from '@cloudforet/mirinae';
+
+import { ALERT_STATE } from '@/schema/alert-manager/alert/constants';
+import { i18n } from '@/translations';
+
+import { useUserStore } from '@/store/user/user-store';
+
+import { useFormValidator } from '@/common/composables/form-validator';
+import { useProxyValue } from '@/common/composables/proxy-state';
+
+import ServiceDetailTabsSettingsEscalationPolicyForm
+    from '@/services/alert-manager-v2/components/ServiceDetailTabsSettingsEscalationPolicyForm.vue';
+import { SERVICE_DETAIL_TABS } from '@/services/alert-manager-v2/constants/common-constant';
+import { useServiceDetailPageStore } from '@/services/alert-manager-v2/stores/service-detail-page-store';
+import type { EscalationPolicyRadioType, EscalationPolicyModalType } from '@/services/alert-manager-v2/types/alert-manager-type';
+
+interface Props {
+    visible: boolean;
+    type: EscalationPolicyModalType;
+}
+const props = withDefaults(defineProps<Props>(), {
+    visible: false,
+    type: 'CREATE',
+});
+
+const serviceDetailPageStore = useServiceDetailPageStore();
+const userStore = useUserStore();
+
+const emit = defineEmits<{(e: 'update:visible'): void; }>();
+
+const state = reactive({
+    proxyVisible: useProxyValue<boolean>('visible', props, emit),
+    selectedEscalationPolicyId: undefined as string|undefined,
+    headerTitle: computed<TranslateResult>(() => {
+        if (props.type === 'CREATE') return i18n.t('ALERT_MANAGER.ESCALATION_POLICY.CREATE_MODAL_TITLE');
+        return i18n.t('ALERT_MANAGER.ESCALATION_POLICY.SET_MODAL_TITLE');
+    }),
+    radioMenuList: computed<EscalationPolicyRadioType[]>(() => [
+        {
+            label: i18n.t('ALERT_MANAGER.ALERTS.ACKNOWLEDGED'),
+            name: ALERT_STATE.ACKNOWLEDGED,
+        },
+        {
+            label: i18n.t('ALERT_MANAGER.ALERTS.RESOLVED'),
+            name: ALERT_STATE.RESOLVED,
+        },
+    ]),
+    selectedRadioIdx: 0,
+
+    timezone: computed<string|undefined>(() => userStore.state.timezone),
+    isModalValid: computed<boolean>(() => name.value === '' && !invalidState.name),
+});
+
+const {
+    forms: { name },
+    setForm,
+    invalidState,
+    invalidTexts,
+} = useFormValidator({
+    name: '',
+}, {
+    name(value: string) {
+        if (value === '') return '';
+        if (value.length > 40) return i18n.t('ALERT_MANAGER.ESCALATION_POLICY.NAME_INVALID_TEXT');
+        return '';
+    },
+});
+
+const handleClose = () => {
+    state.proxyVisible = false;
+};
+const handleRouteDetail = () => {
+    serviceDetailPageStore.setCurrentTab(SERVICE_DETAIL_TABS.NOTIFICATIONS);
+    handleClose();
+};
+const handleClickConfirm = async () => {
+    console.log('TODO: handleClickConfirm');
+    handleClose();
+};
+</script>
+
+<template>
+    <p-button-modal class="service-detail-tabs-settings-escalation-policy-create-modal"
+                    :header-title="state.headerTitle"
+                    :fade="true"
+                    :backdrop="true"
+                    :visible.sync="state.proxyVisible"
+                    :disabled="!state.isModalValid"
+                    @confirm="handleClickConfirm"
+                    @cancel="handleClose"
+                    @close="handleClose"
+    >
+        <template #body>
+            <div class="modal-content-wrapper">
+                <p-field-group :label="$t('ALERT_MANAGER.ESCALATION_POLICY.LABEL_NAME')"
+                               :invalid="invalidState.name"
+                               :invalid-text="invalidTexts.name"
+                               required
+                               class="w-1/2"
+                >
+                    <template #default="{invalid}">
+                        <p-text-input :value="name"
+                                      :invalid="invalid"
+                                      block
+                                      @update:value="setForm('name', $event)"
+                        />
+                    </template>
+                </p-field-group>
+                <p-field-group :label="$t('ALERT_MANAGER.ESCALATION_POLICY.LABEL_FINISH_CONDITION')"
+                               required
+                >
+                    <template #default>
+                        <p-radio-group>
+                            <p-radio v-for="(item, idx) in state.radioMenuList"
+                                     :key="`bookmark-scope-${idx}`"
+                                     v-model="state.selectedRadioIdx"
+                                     :value="idx"
+                            >
+                                <span class="radio-item">
+                                    {{ item.label }}
+                                </span>
+                            </p-radio>
+                        </p-radio-group>
+                    </template>
+                </p-field-group>
+                <p-field-group :label="$t('ALERT_MANAGER.ESCALATION_POLICY.LABEL_ESCALATION_RULES')"
+                               required
+                >
+                    <template #help>
+                        <div class="flex flex-col">
+                            <span class="help-text">
+                                {{ $t('ALERT_MANAGER.ESCALATION_POLICY.ESCALATION_RULES_HELP_TEXT') }}.
+                            </span>
+                            <p-text-button style-type="highlight"
+                                           class="set-button"
+                                           @click="handleRouteDetail"
+                            >
+                                {{ $t('ALERT_MANAGER.ESCALATION_POLICY.GO_SET_NOTIFICATION') }}
+                            </p-text-button>
+                        </div>
+                    </template>
+                    <service-detail-tabs-settings-escalation-policy-form />
+                </p-field-group>
+            </div>
+        </template>
+    </p-button-modal>
+</template>
+
+<style lang="postcss" scoped>
+.service-detail-tabs-settings-escalation-policy-create-modal {
+    .modal-content-wrapper {
+        .set-button {
+            padding: 0;
+        }
+    }
+}
+</style>
diff --git a/apps/web/src/services/alert-manager-v2/components/ServiceDetailTabsSettingsModal.vue b/apps/web/src/services/alert-manager-v2/components/ServiceDetailTabsSettingsUpdateModal.vue
similarity index 100%
rename from apps/web/src/services/alert-manager-v2/components/ServiceDetailTabsSettingsModal.vue
rename to apps/web/src/services/alert-manager-v2/components/ServiceDetailTabsSettingsUpdateModal.vue
diff --git a/apps/web/src/services/alert-manager-v2/types/alert-manager-type.ts b/apps/web/src/services/alert-manager-v2/types/alert-manager-type.ts
index 5d2bb78522..3207cfb687 100644
--- a/apps/web/src/services/alert-manager-v2/types/alert-manager-type.ts
+++ b/apps/web/src/services/alert-manager-v2/types/alert-manager-type.ts
@@ -2,7 +2,7 @@ import type { TranslateResult } from 'vue-i18n';
 
 import type { KeyItemSet, ValueHandlerMap } from '@cloudforet/mirinae/types/controls/search/query-search/type';
 
-import type { AlertUrgencyType } from '@/schema/alert-manager/alert/type';
+import type { AlertStateType, AlertUrgencyType } from '@/schema/alert-manager/alert/type';
 import type { ServiceChannelDataType, ServiceChannelScheduleInfoType } from '@/schema/alert-manager/service-channel/type';
 import type { ServiceModel } from '@/schema/alert-manager/service/model';
 import type { AlertsInfoType, AlertsType } from '@/schema/alert-manager/service/type';
@@ -53,3 +53,9 @@ export type ProtocolInfo = {
     name: string;
     icon: string;
 };
+
+export type EscalationPolicyRadioType = {
+    label: TranslateResult,
+    name: AlertStateType
+};
+export type EscalationPolicyModalType = 'CREATE' | 'SET';
diff --git a/packages/language-pack/console-translation-2.8.babel b/packages/language-pack/console-translation-2.8.babel
index fd161ff782..4c6ea926da 100644
--- a/packages/language-pack/console-translation-2.8.babel
+++ b/packages/language-pack/console-translation-2.8.babel
@@ -1434,6 +1434,27 @@
                     <folder_node>
                         <name>ESCALATION_POLICY</name>
                         <children>
+                            <concept_node>
+                                <name>ADD_RULE</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>CHANNEL</name>
                                 <definition_loaded>false</definition_loaded>
@@ -1455,6 +1476,90 @@
                                     </translation>
                                 </translations>
                             </concept_node>
+                            <concept_node>
+                                <name>CREATE_MODAL_TITLE</name>
+                                <definition_loaded>false</definition_loaded>
+                                <description/>
+                                <comment/>
+                                <default_text/>
+                                <translations>
+                                    <translation>
+                                        <language>en-US</language>
+                                        <approved>true</approved>
+                                    </translation>
+                                    <translation>
+                                        <language>ja-JP</language>
+                                        <approved>true</approved>
+                                    </translation>
+                                    <translation>
+                                        <language>ko-KR</language>
+                                        <approved>true</approved>
+                                    </translation>
+                                </translations>
+                            </concept_node>
+                            <concept_node>
+                                <name>ESCALATES_AFTER</name>
+                                <definition_loaded>false</definition_loaded>
+                                <description/>
+                                <comment/>
+                                <default_text/>
+                                <translations>
+                                    <translation>
+                                        <language>en-US</language>
+                                        <approved>true</approved>
+                                    </translation>
+                                    <translation>
+                                        <language>ja-JP</language>
+                                        <approved>true</approved>
+                                    </translation>
+                                    <translation>
+                                        <language>ko-KR</language>
+                                        <approved>true</approved>
+                                    </translation>
+                                </translations>
+                            </concept_node>
+                            <concept_node>
+                                <name>ESCALATION_RULES_HELP_TEXT</name>
+                                <definition_loaded>false</definition_loaded>
+                                <description/>
+                                <comment/>
+                                <default_text/>
+                                <translations>
+                                    <translation>
+                                        <language>en-US</language>
+                                        <approved>true</approved>
+                                    </translation>
+                                    <translation>
+                                        <language>ja-JP</language>
+                                        <approved>true</approved>
+                                    </translation>
+                                    <translation>
+                                        <language>ko-KR</language>
+                                        <approved>true</approved>
+                                    </translation>
+                                </translations>
+                            </concept_node>
+                            <concept_node>
+                                <name>GO_SET_NOTIFICATION</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>IN_USE</name>
                                 <definition_loaded>false</definition_loaded>
@@ -1476,6 +1581,174 @@
                                     </translation>
                                 </translations>
                             </concept_node>
+                            <concept_node>
+                                <name>LABEL_ESCALATION_RULES</name>
+                                <definition_loaded>false</definition_loaded>
+                                <description/>
+                                <comment/>
+                                <default_text/>
+                                <translations>
+                                    <translation>
+                                        <language>en-US</language>
+                                        <approved>true</approved>
+                                    </translation>
+                                    <translation>
+                                        <language>ja-JP</language>
+                                        <approved>true</approved>
+                                    </translation>
+                                    <translation>
+                                        <language>ko-KR</language>
+                                        <approved>true</approved>
+                                    </translation>
+                                </translations>
+                            </concept_node>
+                            <concept_node>
+                                <name>LABEL_FINISH_CONDITION</name>
+                                <definition_loaded>false</definition_loaded>
+                                <description/>
+                                <comment/>
+                                <default_text/>
+                                <translations>
+                                    <translation>
+                                        <language>en-US</language>
+                                        <approved>true</approved>
+                                    </translation>
+                                    <translation>
+                                        <language>ja-JP</language>
+                                        <approved>true</approved>
+                                    </translation>
+                                    <translation>
+                                        <language>ko-KR</language>
+                                        <approved>true</approved>
+                                    </translation>
+                                </translations>
+                            </concept_node>
+                            <concept_node>
+                                <name>LABEL_NAME</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>NAME_INVALID_TEXT</name>
+                                <definition_loaded>false</definition_loaded>
+                                <description/>
+                                <comment/>
+                                <default_text/>
+                                <translations>
+                                    <translation>
+                                        <language>en-US</language>
+                                        <approved>true</approved>
+                                    </translation>
+                                    <translation>
+                                        <language>ja-JP</language>
+                                        <approved>true</approved>
+                                    </translation>
+                                    <translation>
+                                        <language>ko-KR</language>
+                                        <approved>true</approved>
+                                    </translation>
+                                </translations>
+                            </concept_node>
+                            <concept_node>
+                                <name>NOTIFICATION_CHANNEL_PLACEHOLDER</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>REPEAT</name>
+                                <definition_loaded>false</definition_loaded>
+                                <description/>
+                                <comment/>
+                                <default_text/>
+                                <translations>
+                                    <translation>
+                                        <language>en-US</language>
+                                        <approved>true</approved>
+                                    </translation>
+                                    <translation>
+                                        <language>ja-JP</language>
+                                        <approved>true</approved>
+                                    </translation>
+                                    <translation>
+                                        <language>ko-KR</language>
+                                        <approved>true</approved>
+                                    </translation>
+                                </translations>
+                            </concept_node>
+                            <concept_node>
+                                <name>REPEAT_DESC</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>SET_MODAL_TITLE</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>SET_POLICY</name>
                                 <definition_loaded>false</definition_loaded>
@@ -1539,6 +1812,27 @@
                                     </translation>
                                 </translations>
                             </concept_node>
+                            <concept_node>
+                                <name>USER</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>USER_GROUP</name>
                                 <definition_loaded>false</definition_loaded>
diff --git a/packages/language-pack/en.json b/packages/language-pack/en.json
index 3dcb901753..2631b9afb3 100644
--- a/packages/language-pack/en.json
+++ b/packages/language-pack/en.json
@@ -70,11 +70,25 @@
 		"EDIT_NAME": "Edit Name",
 		"ENABLE": "Enable",
 		"ESCALATION_POLICY": {
+			"ADD_RULE": "Add Rule",
 			"CHANNEL": "Channel",
+			"CREATE_MODAL_TITLE": "Create Escalation Policy",
+			"ESCALATES_AFTER": "Next step runs in {minute} minutes.",
+			"ESCALATION_RULES_HELP_TEXT": "At least one rule must be set. (Up to 5)",
+			"GO_SET_NOTIFICATION": "Go set Notifications",
 			"IN_USE": "In Use",
+			"LABEL_ESCALATION_RULES": "Escalation Rules",
+			"LABEL_FINISH_CONDITION": "Finish Condition",
+			"LABEL_NAME": "Name",
+			"NAME_INVALID_TEXT": "The maximum length of a name is 40 characters.",
+			"NOTIFICATION_CHANNEL_PLACEHOLDER": "Select Notification Channel",
+			"REPEAT": "REPEAT",
+			"REPEAT_DESC": "Apply to all steps above",
+			"SET_MODAL_TITLE": "Set Escalation Policy",
 			"SET_POLICY": "Set Escalation Rules",
 			"STEP": "Step {step}",
 			"TITLE": "Escalation Policy",
+			"USER": "User",
 			"USER_GROUP": "User Group"
 		},
 		"EVENT_RULE": {
diff --git a/packages/language-pack/ja.json b/packages/language-pack/ja.json
index 89500577aa..739b86c179 100644
--- a/packages/language-pack/ja.json
+++ b/packages/language-pack/ja.json
@@ -70,11 +70,25 @@
 		"EDIT_NAME": "名の編集",
 		"ENABLE": "有効化",
 		"ESCALATION_POLICY": {
+			"ADD_RULE": "ルールを追加",
 			"CHANNEL": "チャンネル名",
+			"CREATE_MODAL_TITLE": "エスカレーションポリシー作成",
+			"ESCALATES_AFTER": "{minute}分後に次のステップを実行",
+			"ESCALATION_RULES_HELP_TEXT": "少なくとも1以上のルールが必要です。(最大５)",
+			"GO_SET_NOTIFICATION": "",
 			"IN_USE": "",
+			"LABEL_ESCALATION_RULES": "エスカレーションルール",
+			"LABEL_FINISH_CONDITION": "終了条件",
+			"LABEL_NAME": "名前",
+			"NAME_INVALID_TEXT": "名前の最大長さは40文字です。",
+			"NOTIFICATION_CHANNEL_PLACEHOLDER": "",
+			"REPEAT": "繰り返す",
+			"REPEAT_DESC": "",
+			"SET_MODAL_TITLE": "",
 			"SET_POLICY": "",
 			"STEP": "ステップ {step}",
 			"TITLE": "エスカレーションポリシー",
+			"USER": "ユーザー",
 			"USER_GROUP": ""
 		},
 		"EVENT_RULE": {
diff --git a/packages/language-pack/ko.json b/packages/language-pack/ko.json
index 757a0a16ac..e4d7daec6d 100644
--- a/packages/language-pack/ko.json
+++ b/packages/language-pack/ko.json
@@ -70,11 +70,25 @@
 		"EDIT_NAME": "이름 수정",
 		"ENABLE": "활성화",
 		"ESCALATION_POLICY": {
+			"ADD_RULE": "규칙 추가",
 			"CHANNEL": "채널",
+			"CREATE_MODAL_TITLE": "에스컬레이션 정책 생성",
+			"ESCALATES_AFTER": "{minute}분 후 다음 단계 실행",
+			"ESCALATION_RULES_HELP_TEXT": "최소 1개 이상의 규칙이 있어야 합니다. (5개 까지)",
+			"GO_SET_NOTIFICATION": "",
 			"IN_USE": "",
+			"LABEL_ESCALATION_RULES": "에스컬레이션 규칙",
+			"LABEL_FINISH_CONDITION": "종료 조건(상태)",
+			"LABEL_NAME": "이름",
+			"NAME_INVALID_TEXT": "40글자 미만으로 입력해주세요.",
+			"NOTIFICATION_CHANNEL_PLACEHOLDER": "",
+			"REPEAT": "반복",
+			"REPEAT_DESC": "",
+			"SET_MODAL_TITLE": "",
 			"SET_POLICY": "",
 			"STEP": "단계 {step}",
 			"TITLE": "에스컬레이션 정책",
+			"USER": "사용자",
 			"USER_GROUP": ""
 		},
 		"EVENT_RULE": {