Merge pull request #5598 from cloudforet-io/develop

merge to master (alert manager v2)
cloudforet-io · Jan 22, 2025 · 953e2bf · 953e2bf
2 parents 2f00c72 + cea4ff4
commit 953e2bf
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 8 deletions.
diff --git a/apps/web/src/common/pages/AlertPublicDetailPage.vue b/apps/web/src/common/pages/AlertPublicDetailPage.vue
@@ -79,7 +79,6 @@ const tableState = reactive({
                 { name: 'triggered_type', label: i18n.t('MONITORING.ALERT.DETAIL.INFO.TRIGGERED_TYPE'), disableCopy: true },
                 { name: 'acknowledged_by', label: i18n.t('MONITORING.ALERT.DETAIL.INFO.ACKNOWLEDGED_BY'), disableCopy: true },
                 { name: 'resolved_by', label: i18n.t('MONITORING.ALERT.DETAIL.INFO.RESOLVED_BY'), disableCopy: true },
-                { name: 'webhook_id', label: i18n.t('MONITORING.ALERT.DETAIL.INFO.WEBHOOK'), disableCopy: true },
             ];
         }
         return [
@@ -339,11 +338,18 @@ const handleRouteToSignInWithRedirectPath = () => {
                                 </p>
                             </template>
                             <template #data-triggered_type>
-                                <p-badge badge-type="solid-outline"
+                                <p-badge v-if="state.alertData.triggered_type === 'USER'"
+                                         badge-type="solid-outline"
                                          style-type="indigo500"
                                 >
                                     {{ state.alertData.triggered_type }}
                                 </p-badge>
+                                <p-badge v-else
+                                         badge-type="solid-outline"
+                                         style-type="gray900"
+                                >
+                                    {{ state.alertData.triggered_type }}
+                                </p-badge>
                             </template>
                             <template #data-additional_info="{value}">
                                 <span v-if="Object.keys(value)?.length === 0">

diff --git a/apps/web/src/services/alert-manager/components/AlertsManagementTable.vue b/apps/web/src/services/alert-manager/components/AlertsManagementTable.vue
@@ -80,6 +80,9 @@ const state = reactive({
 
     refinedAlertList: computed<AlertModel[]>(() => storeState.alertList.map((alert) => ({
         ...alert,
+        duration: alert.status === ALERT_STATUS.RESOLVED
+            ? calculateTime(alert?.resolved_at, storeState.timezone) || '0m'
+            : calculateTime(alert?.created_at, storeState.timezone) || '0m',
         created_at: iso8601Formatter(alert.created_at, storeState.timezone),
     }))),
     alertStateLabels: getAlertStateI18n(),
@@ -415,11 +418,6 @@ watch(() => storeState.serviceId, async (serviceId) => {
             <template #col-triggered_by-format="{ value }">
                 <span>{{ getCreatedByNames(value) }}</span>
             </template>
-            <template #col-duration-format="{ item }">
-                <span>{{ item.status === ALERT_STATUS.RESOLVED
-                    ? calculateTime(item?.resolved_at, storeState.timezone) || '0m'
-                    : calculateTime(item?.created_at, storeState.timezone) || '0m' }}</span>
-            </template>
         </p-toolbox-table>
         <custom-field-modal :visible="state.visibleCustomFieldModal"
                             :resource-type="state.isServicePage ? 'service.alert' : 'alertManager.alert'"

diff --git a/apps/web/src/services/alert-manager/components/ServiceDetailTabsSettingsContainer.vue b/apps/web/src/services/alert-manager/components/ServiceDetailTabsSettingsContainer.vue
@@ -1,20 +1,33 @@
 <script setup lang="ts">
-import { computed, onUnmounted, reactive } from 'vue';
+import {
+    computed, onUnmounted, reactive, watch,
+} from 'vue';
 import { useRoute } from 'vue-router/composables';
 
 import ServiceDetailTabsSettings from '@/services/alert-manager/components/ServiceDetailTabsSettings.vue';
 import ServiceDetailTabsSettingsEventRule
     from '@/services/alert-manager/components/ServiceDetailTabsSettingsEventRule.vue';
 import { useServiceDetailPageStore } from '@/services/alert-manager/stores/service-detail-page-store';
+import type { Service } from '@/services/alert-manager/types/alert-manager-type';
 
 const serviceDetailPageStore = useServiceDetailPageStore();
+const serviceDetailPageGetters = serviceDetailPageStore.getters;
 
 const route = useRoute();
 
+const storeState = reactive({
+    serviceInfo: computed<Service>(() => serviceDetailPageGetters.serviceInfo),
+});
 const state = reactive({
     isSettingMode: computed<boolean>(() => route.query?.mode !== 'eventRule'),
 });
 
+watch(() => state.isSettingMode, async (isSettingMode) => {
+    if (!isSettingMode || !storeState.serviceInfo.service_id) return;
+    await serviceDetailPageStore.fetchEventRuleList({
+        service_id: storeState.serviceInfo.service_id,
+    });
+}, { immediate: true });
 onUnmounted(() => {
     serviceDetailPageStore.setCurrentTab(undefined);
 });