feat: apply webhook create API (#5254)

* feat: apply webhook create API Signed-off-by: NaYeong,Kim <[email protected]> * feat: update title and description based on webhook creation step Signed-off-by: NaYeong,Kim <[email protected]> * chore: changed comment Signed-off-by: NaYeong,Kim <[email protected]> * feat: apply toast alert when webhook created Signed-off-by: NaYeong,Kim <[email protected]> --------- Signed-off-by: NaYeong,Kim <[email protected]> Signed-off-by: NaYeong,Kim <[email protected]>
cloudforet-io · Dec 18, 2024 · 45d0d6e · 45d0d6e
1 parent e25fbb1
commit 45d0d6e
Show file tree

Hide file tree

Showing 10 changed files with 88 additions and 19 deletions.
diff --git a/apps/web/src/schema/alert-manager/webhook/type.ts b/apps/web/src/schema/alert-manager/webhook/type.ts
@@ -6,8 +6,7 @@ export type WebhookPluginInfoType = {
     plugin_id: string;
     version?: string;
     options?: Record<string, any>;
-    metadata: Record<string, any>;
-    secret_id: string;
+    metadata?: Record<string, any>;
     upgrade_mode?: 'AUTO' | 'MANUAL';
 };
 

diff --git a/apps/web/src/services/alert-manager-v2/components/ServiceCreateStep2.vue b/apps/web/src/services/alert-manager-v2/components/ServiceCreateStep2.vue
@@ -1,6 +1,17 @@
 <script setup lang="ts">
 import { computed, onUnmounted, reactive } from 'vue';
 
+import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
+
+import type { WebhookCreateParameters } from '@/schema/alert-manager/webhook/api-verbs/create';
+import type { WebhookModel } from '@/schema/alert-manager/webhook/model';
+import type { PluginModel } from '@/schema/repository/plugin/model';
+import { i18n } from '@/translations';
+
+import { showSuccessMessage } from '@/lib/helper/notice-alert-helper';
+
+import ErrorHandler from '@/common/composables/error/errorHandler';
+
 import ServiceCreateStepContainer from '@/services/alert-manager-v2/components/ServiceCreateStepContainer.vue';
 import WebhookCreateForm from '@/services/alert-manager-v2/components/WebhookCreateForm.vue';
 import WebhookCreateSuccessMode
@@ -14,20 +25,33 @@ const serviceFormState = serviceFormStore.state;
 
 const storeState = reactive({
     currentSubStep: computed<number>(() => serviceFormState.currentSubStep),
-    selectedWebhookTypeId: computed<string>(() => serviceFormState.selectedWebhookType?.plugin_id || ''),
+    selectedWebhookType: computed<PluginModel|undefined>(() => serviceFormState.selectedWebhookType),
     webhookName: computed<string>(() => serviceFormState.webhookName || ''),
+    createdServiceId: computed<string>(() => serviceFormState.createdServiceId),
 });
 const state = reactive({
     isAllFormValid: computed(() => {
-        if (storeState.currentSubStep === 1) return storeState.selectedWebhookTypeId !== '';
+        if (storeState.currentSubStep === 1) return storeState.selectedWebhookType?.plugin_id !== '';
         if (storeState.currentSubStep === 2) return storeState.webhookName !== '';
         return true;
     }),
 });
 
 const handleCreateWebhook = async () => {
-    console.log('TODO: handleCreateWebhook');
-    serviceFormStore.setCurrentSubStep(3);
+    try {
+        const createdWebhookInfo = await SpaceConnector.clientV2.alertManager.webhook.create<WebhookCreateParameters, WebhookModel>({
+            name: storeState.webhookName,
+            plugin_info: {
+                plugin_id: storeState.selectedWebhookType?.plugin_id || '',
+            },
+            service_id: storeState.createdServiceId,
+        });
+        showSuccessMessage(i18n.t('ALERT_MANAGER.WEBHOOK.ALT_S_CREATE_WEBHOOK'), '');
+        serviceFormStore.setCreatedWebhookInfo(createdWebhookInfo);
+        serviceFormStore.setCurrentSubStep(3);
+    } catch (e) {
+        ErrorHandler.handleError(e, true);
+    }
 };
 
 onUnmounted(() => {
@@ -37,7 +61,7 @@ onUnmounted(() => {
 
 <template>
     <service-create-step-container class="service-create-step2"
-                                   :selected-item-id="storeState.selectedWebhookTypeId"
+                                   :selected-item-id="storeState.selectedWebhookType?.plugin_id || ''"
                                    :is-all-form-valid="state.isAllFormValid"
                                    @create="handleCreateWebhook"
     >

diff --git a/apps/web/src/services/alert-manager-v2/components/WebhookCreateForm.vue b/apps/web/src/services/alert-manager-v2/components/WebhookCreateForm.vue
@@ -82,8 +82,8 @@ onMounted(async () => {
              class="webhook-item"
         >
             <p-lazy-img :src="assetUrlConverter(storeState.selectedWebhookType.tags?.icon || '')"
-                        width="2.5rem"
-                        height="2.5rem"
+                        width="4rem"
+                        height="4rem"
                         error-icon="ic_webhook"
             />
             <div class="info">
@@ -126,7 +126,7 @@ onMounted(async () => {
 <style lang="postcss" scoped>
 .service-create-step2-webhook-form {
     .webhook-item {
-        @apply flex w-full;
+        @apply flex items-center w-full;
         margin-bottom: 1.5rem;
         gap: 1rem;
         .info {

diff --git a/apps/web/src/services/alert-manager-v2/components/WebhookCreateTypeSelector.vue b/apps/web/src/services/alert-manager-v2/components/WebhookCreateTypeSelector.vue
@@ -60,6 +60,7 @@ onMounted(async () => {
                        :key="`webhook-${index}`"
                        v-model="state.selectedWebhookType"
                        :value="item"
+                       :show-select-marker="false"
                        class="card"
                        @change="handleSelectWebhook"
         >

diff --git a/apps/web/src/services/alert-manager-v2/pages/ServiceCreatePage.vue b/apps/web/src/services/alert-manager-v2/pages/ServiceCreatePage.vue
@@ -31,9 +31,19 @@ const state = reactive({
             };
         }
         if (storeState.step === 2) {
+            if (storeState.subStep === 1) {
+                return {
+                    title: i18n.t('ALERT_MANAGER.SERVICE.INTEGRATE_TOOL_TITLE'),
+                    desc: i18n.t('ALERT_MANAGER.SERVICE.INTEGRATE_TOOL_DESC'),
+                };
+            }
+            if (storeState.subStep === 2) {
+                return {
+                    title: i18n.t('ALERT_MANAGER.SERVICE.CREATE_WEBHOOK_TITLE'),
+                };
+            }
             return {
-                title: i18n.t('ALERT_MANAGER.SERVICE.INTEGRATE_TOOL_TITLE'),
-                desc: i18n.t('ALERT_MANAGER.SERVICE.INTEGRATE_TOOL_DESC'),
+                title: i18n.t('ALERT_MANAGER.WEBHOOK.CREATE_SUCCESS_TITLE'),
             };
         }
         return {

diff --git a/apps/web/src/services/alert-manager-v2/stores/service-create-form-store.ts b/apps/web/src/services/alert-manager-v2/stores/service-create-form-store.ts
@@ -2,14 +2,16 @@ import { reactive } from 'vue';
 
 import { defineStore } from 'pinia';
 
+import type { WebhookModel } from '@/schema/alert-manager/webhook/model';
 import type { PluginModel } from '@/schema/repository/plugin/model';
 
 interface ServiceFormStoreState {
     currentStep: number;
     currentSubStep: number;
     createdServiceId: string;
-    selectedWebhookType: PluginModel;
+    selectedWebhookType?: PluginModel;
     webhookName: string;
+    createdWebhookInfo?: WebhookModel;
     // TODO: add type
     selectedProtocol: any;
 }
@@ -18,10 +20,12 @@ export const useServiceCreateFormStore = defineStore('service-create-form', () =
     const state = reactive<ServiceFormStoreState>({
         currentStep: 1,
         currentSubStep: 1,
+        // service
         createdServiceId: '',
         // webhook
-        selectedWebhookType: {} as PluginModel,
+        selectedWebhookType: undefined,
         webhookName: '',
+        createdWebhookInfo: undefined,
         // notification
         selectedProtocol: {},
     });
@@ -31,30 +35,37 @@ export const useServiceCreateFormStore = defineStore('service-create-form', () =
             state.currentStep = 1;
             state.currentSubStep = 1;
             state.createdServiceId = '';
-            state.selectedWebhookType = {} as PluginModel;
+            state.selectedWebhookType = undefined;
             state.webhookName = '';
+            state.createdWebhookInfo = undefined;
             state.selectedProtocol = {};
         },
         initStep2() {
             state.currentSubStep = 1;
-            state.selectedWebhookType = {} as PluginModel;
+            state.selectedWebhookType = undefined;
             state.webhookName = '';
         },
-        setCreatedServiceId(id: string) {
-            state.createdServiceId = id;
-        },
+
         setCurrentStep(step: number) {
             state.currentStep = step;
         },
         setCurrentSubStep(step: number) {
             state.currentSubStep = step;
         },
+
+        setCreatedServiceId(id: string) {
+            state.createdServiceId = id;
+        },
+
         setSelectedWebhookType(webhookType: PluginModel) {
             state.selectedWebhookType = webhookType;
         },
         setWebhookName(name: string) {
             state.webhookName = name;
         },
+        setCreatedWebhookInfo(webhook: WebhookModel) {
+            state.createdWebhookInfo = webhook;
+        },
         // TODO: add type
         setSelectedProtocol(protocol: any) {
             state.selectedProtocol = protocol;

diff --git a/packages/language-pack/console-translation-2.8.babel b/packages/language-pack/console-translation-2.8.babel
@@ -2777,6 +2777,27 @@
                     <folder_node>
                         <name>WEBHOOK</name>
                         <children>
+                            <concept_node>
+                                <name>ALT_S_CREATE_WEBHOOK</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>BASE_INFO_TITLE</name>
                                 <definition_loaded>false</definition_loaded>

diff --git a/packages/language-pack/en.json b/packages/language-pack/en.json
@@ -141,6 +141,7 @@
 		"STATUS": "Status",
 		"UPDATE": "Update",
 		"WEBHOOK": {
+			"ALT_S_CREATE_WEBHOOK": "Webhook successfully created",
 			"BASE_INFO_TITLE": "Base Information",
 			"COPY_WEBHOOK_URL": "Copy the Webhook URL",
 			"CREATE_DESC": "Now, Copy the Webhook URL and follow {guide}",

diff --git a/packages/language-pack/ja.json b/packages/language-pack/ja.json
@@ -141,6 +141,7 @@
 		"STATUS": "ステータス",
 		"UPDATE": "編集",
 		"WEBHOOK": {
+			"ALT_S_CREATE_WEBHOOK": "",
 			"BASE_INFO_TITLE": "基本情報",
 			"COPY_WEBHOOK_URL": "Webhook URLをコピー",
 			"CREATE_DESC": "ウェブフックURLをコピーした後、{guide}を参照して設定してください。",

diff --git a/packages/language-pack/ko.json b/packages/language-pack/ko.json
@@ -141,6 +141,7 @@
 		"STATUS": "상태",
 		"UPDATE": "수정",
 		"WEBHOOK": {
+			"ALT_S_CREATE_WEBHOOK": "",
 			"BASE_INFO_TITLE": "기본 정보",
 			"COPY_WEBHOOK_URL": "웹훅 URL 복사하기 ",
 			"CREATE_DESC": "웹훅 URL을 복사한 후, {guide}를 참고하여 설정해 주세요.",