chore: changed css (#5538)

* feat: add CloudServiceAlertsTab component for viewing at cloudService (#5486) * feat(alert): add asset_id parameter to alert list interface - Introduced asset_id as a new parameter in the alert list interface. Signed-off-by: sulmo <[email protected]> * feat: add CloudServiceAlertsTab component for viewing at cloudService - Introduced a new Vue component to manage cloud service alerts. - Implemented data fetching and filtering for alerts based on status and urgency. - Added functionality to export alert data to Excel. - Integrated custom field modal for table customization. Signed-off-by: sulmo <[email protected]> * feat: add alerts tab for cloud service detail - Import `CloudServiceAlertsTab` component. - Add `alerts` tab conditionally based on alert manager version. - Update template to include the new alerts tab. Signed-off-by: sulmo <[email protected]> * feat(language-pack): add translations for "TAB_ALERTS" - Added "TAB_ALERTS" concept node with translations in console-translation file - Updated English, Japanese, and Korean JSON files with "TAB_ALERTS" translation Signed-off-by: sulmo <[email protected]> --------- Signed-off-by: sulmo <[email protected]> * feat: fix bug of badge in double check table modal (#5484) Signed-off-by: 이승연 <[email protected]> * feat: apply mobile responsive design to the event rules page (#5524) * feat: apply mobile responsive design to the event rules page Signed-off-by: 이승연 <[email protected]> * feat: add necessary comment about `design system custom` Signed-off-by: 이승연 <[email protected]> --------- Signed-off-by: 이승연 <[email protected]> * feat: apply qa issue and update event rule (#5527) * fix: fixed bug Signed-off-by: NaYeong,Kim <[email protected]> * chore: remove total count section Signed-off-by: NaYeong,Kim <[email protected]> * feat: apply protocol select dropdown at update modal Signed-off-by: NaYeong,Kim <[email protected]> * feat: changed scope order Signed-off-by: NaYeong,Kim <[email protected]> * feat: apply order drag at sidebar Signed-off-by: NaYeong,Kim <[email protected]> * feat: apply feedback at condition form Signed-off-by: NaYeong,Kim <[email protected]> * chore: update translations Signed-off-by: NaYeong,Kim <[email protected]> * refactor: refactor action form Signed-off-by: NaYeong,Kim <[email protected]> * feat: apply period at event rule card Signed-off-by: NaYeong,Kim <[email protected]> * feat: apply mobile reactivity Signed-off-by: NaYeong,Kim <[email protected]> --------- Signed-off-by: NaYeong,Kim <[email protected]> * feat: apply match asset dropdown (#5530) * feat: add selected prop Signed-off-by: NaYeong,Kim <[email protected]> * feat: apply asset type Signed-off-by: NaYeong,Kim <[email protected]> * chore: update translations Signed-off-by: NaYeong,Kim <[email protected]> --------- Signed-off-by: NaYeong,Kim <[email protected]> * feat: apply qa issue (#5531) * chore: changed service card style Signed-off-by: NaYeong,Kim <[email protected]> * feat: fixed bug Signed-off-by: NaYeong,Kim <[email protected]> --------- Signed-off-by: NaYeong,Kim <[email protected]> * feat: apply mapping key (#5532) * feat: apply mapping key Signed-off-by: NaYeong,Kim <[email protected]> * fix: fixed label display bug at alert management table Signed-off-by: NaYeong,Kim <[email protected]> --------- Signed-off-by: NaYeong,Kim <[email protected]> * feat: add operator (#5533) Signed-off-by: NaYeong,Kim <[email protected]> * feat: update mobile responsive design of event rules page (#5534) * feat: update mobile responsive design of event rules page Signed-off-by: seungyeoneeee <[email protected]> * feat: add minor style code Signed-off-by: seungyeoneeee <[email protected]> --------- Signed-off-by: seungyeoneeee <[email protected]> * fix(reference-store): correct logic for selecting fetcher based on version (#5536) - Inverted the condition for determining the collector and region fetchers - Ensured correct API client is used based on alert manager version Signed-off-by: sulmo <[email protected]> * chore: changed css (#5537) Signed-off-by: NaYeong,Kim <[email protected]> --------- Signed-off-by: sulmo <[email protected]> Signed-off-by: 이승연 <[email protected]> Signed-off-by: NaYeong,Kim <[email protected]> Signed-off-by: seungyeoneeee <[email protected]> Co-authored-by: sulmo <[email protected]> Co-authored-by: syeeeee <[email protected]>
cloudforet-io · Jan 16, 2025 · 8c6f365 · 8c6f365
1 parent 650544b
commit 8c6f365
Show file tree

Hide file tree

Showing 33 changed files with 2,707 additions and 1,025 deletions.
diff --git a/apps/web/src/common/components/select/DataSelector.vue b/apps/web/src/common/components/select/DataSelector.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import {
-    ref, onMounted, toRef, watch,
+    ref, toRef, watch,
 } from 'vue';
 
 import { debounce } from 'lodash';
@@ -16,6 +16,7 @@ const props = defineProps<{
     handler?: MenuAttachHandler<DataSelectorItem>;
     showSelectMarker?: boolean;
     multiSelectable?: boolean;
+    selected?: DataSelectorItem[];
 }>();
 const emit = defineEmits<{(e: 'update:selected', value: DataSelectorItem[]): void;
     (e: 'update:search-text', value: string): void;
@@ -50,17 +51,15 @@ const handleUpdateSelected = (items: DataSelectorItem[]) => {
     emit('update:selected', selected.value);
 };
 
-onMounted(() => {
-    selected.value = [];
+watch([() => props.menu, () => props.handler, () => props.selected], () => {
+    if (!props.selected || props.selected?.length === 0) {
+        selected.value = [];
+    } else {
+        selected.value = props.selected ?? [];
+    }
     emit('update:selected', selected.value);
     initiateMenu();
-});
-
-watch([() => props.menu, () => props.handler], () => {
-    selected.value = [];
-    emit('update:selected', selected.value);
-    initiateMenu();
-});
+}, { immediate: true });
 </script>
 
 <template>

diff --git a/apps/web/src/schema/alert-manager/alert/api-verbs/list.ts b/apps/web/src/schema/alert-manager/alert/api-verbs/list.ts
@@ -16,6 +16,7 @@ export interface AlertListParameters {
     resources?: AlertResourcesType[];
     triggered_type?: AlertTriggeredType;
     triggered_by?: string;
+    asset_id?: string;
     webhook_id?: string;
     escalation_policy_id?: string;
     service_id?: string;

diff --git a/apps/web/src/schema/alert-manager/event-rule/type.ts b/apps/web/src/schema/alert-manager/event-rule/type.ts
@@ -6,32 +6,40 @@ export type EventRuleUrgencyType = typeof EVENT_RULE_URGENCY[keyof typeof EVENT_
 export type EventRuleScopeType = typeof EVENT_RULE_SCOPE[keyof typeof EVENT_RULE_SCOPE];
 
 export type EventRuleConditionsKeyType = 'title' | 'description' | 'rule' | 'severity' | 'account' | 'additional_info' | 'labels' | 'period';
-export type EventRuleConditionsOperatorType = 'eq' | 'contain' | 'not' | 'not_contain';
+export type EventRuleConditionsOperatorType = 'eq' | 'contain' | 'not' | 'not_contain' | 'size_gte' | 'size_lte';
 
 export type EventRuleConditionsType = {
-    key: EventRuleConditionsKeyType;
-    value: string;
+    key: EventRuleConditionsKeyType|string;
+    value: any;
     operator: EventRuleConditionsOperatorType;
 };
 
+export type EventRuleActionsMatchAssetRuleType = {
+    key?: string,
+};
 export type EventRuleActionsMatchAssetType = {
-    rule?: Record<string, string | number | boolean>;
+    rule?: EventRuleActionsMatchAssetRuleType;
     asset_types?: string[];
     create_temporary_asset?: boolean;
 };
 
+export type EventRuleActionsMergeAssetLabelsType = {
+    period?: number
+};
+
 export type EventRuleActionsType = {
     // service settings
     change_service?: string;
     // asset settings
     match_asset?: EventRuleActionsMatchAssetType;
+    merge_asset_labels?: EventRuleActionsMergeAssetLabelsType;
     // alert settings
     change_title?: string;
     change_urgency?: EventRuleUrgencyType;
     change_escalation_policy?: string;
     add_additional_info?: object;
     change_status?: AlertStatusType;
-    set_labels: string[];
+    set_labels?: string[];
 };
 
 export type EventRuleOptions = {

diff --git a/apps/web/src/services/alert-manager/components/AlertDetailInfoTable.vue b/apps/web/src/services/alert-manager/components/AlertDetailInfoTable.vue
@@ -180,8 +180,10 @@ const getAssetInfo = (assetId: string) => {
                 <span v-else>--</span>
             </template>
             <template #data-labels="{ value }">
-                <div class="flex gap-2">
-                    <div v-if="value.length > 0">
+                <div>
+                    <div v-if="value.length > 0"
+                         class="flex gap-2"
+                    >
                         <p-badge v-for="(item, idx) in value"
                                  :key="`labels-${idx}`"
                                  badge-type="subtle"

diff --git a/apps/web/src/services/alert-manager/components/AlertDetailSummary.vue b/apps/web/src/services/alert-manager/components/AlertDetailSummary.vue
@@ -31,8 +31,11 @@ const storeState = reactive({
 const state = reactive({
     alertStatus: 'TRIGGERED',
     alertUrgency: 'HIGH',
-    duration: computed<string>(() => calculateTime(storeState.alertInfo?.created_at, storeState.timezone)),
-
+    duration: computed<string>(() => (
+        storeState.alertInfo.status === ALERT_STATUS.RESOLVED
+            ? calculateTime(storeState.alertInfo?.resolved_at, storeState.timezone)
+            : calculateTime(storeState.alertInfo?.created_at, storeState.timezone)
+    )),
     alertStateList: computed<SelectDropdownMenuItem[]>(() => ([
         { name: ALERT_STATUS.TRIGGERED, label: i18n.t('ALERT_MANAGER.ALERTS.TRIGGERED') },
         { name: ALERT_STATUS.ACKNOWLEDGED, label: i18n.t('ALERT_MANAGER.ALERTS.ACKNOWLEDGED') },

diff --git a/apps/web/src/services/alert-manager/components/AlertDetailTabsDetails.vue b/apps/web/src/services/alert-manager/components/AlertDetailTabsDetails.vue
@@ -17,7 +17,7 @@ const storeState = reactive({
     alertInfo: computed<AlertModel>(() => alertDetailPageState.alertInfo),
 });
 const state = reactive({
-    data: computed<Record<string, any>>(() => alertDetailPageState.alertInfo?.additional_info) || {},
+    data: computed<Record<string, any>>(() => storeState.alertInfo?.additional_info) || {},
     fields: computed<DefinitionField[]>(() => map(state.data, (d, k) => ({ name: k, label: k })).sort((a, b) => a.label.localeCompare(b.label))),
 });
 
@@ -33,7 +33,7 @@ const state = reactive({
             </template>
         </p-heading-layout>
         <p-definition-table :fields="state.fields"
-                            :data="storeState.alertInfo"
+                            :data="state.data"
                             :skeleton-rows="5"
                             block
         />

diff --git a/apps/web/src/services/alert-manager/components/AlertsManagementTable.vue b/apps/web/src/services/alert-manager/components/AlertsManagementTable.vue
@@ -7,12 +7,13 @@ import { useRoute } from 'vue-router/composables';
 
 import { makeDistinctValueHandler } from '@cloudforet/core-lib/component-util/query-search';
 import { QueryHelper } from '@cloudforet/core-lib/query';
+import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
 import { ApiQueryHelper } from '@cloudforet/core-lib/space-connector/helper';
 import {
     PToolboxTable, PSelectDropdown, PLink, PBadge, PI, PSelectStatus, PDivider,
 } from '@cloudforet/mirinae';
 import type { DataTableFieldType } from '@cloudforet/mirinae/src/data-display/tables/data-table/type';
-import type { SelectDropdownMenuItem } from '@cloudforet/mirinae/types/controls/dropdown/select-dropdown/type';
+import type { SelectDropdownMenuItem, AutocompleteHandler } from '@cloudforet/mirinae/types/controls/dropdown/select-dropdown/type';
 import { iso8601Formatter } from '@cloudforet/utils';
 
 import { ALERT_STATUS, ALERT_URGENCY } from '@/schema/alert-manager/alert/constants';
@@ -110,6 +111,33 @@ const filterQueryHelper = new QueryHelper();
 const queryTagHelper = useQueryTags({ keyItemSets: ALERT_MANAGEMENT_TABLE_HANDLER.keyItemSets });
 const { queryTags } = queryTagHelper;
 
+
+const labelMenuItemsHandler = (): AutocompleteHandler => async (inputText: string, pageStart = 1, pageLimit = 10) => {
+    try {
+        const { results } = await SpaceConnector.client.addOns.autocomplete.distinct({
+            resource_type: 'alert_manager.Alert',
+            options: { limit: pageLimit },
+            distinct_key: 'labels',
+        });
+        const refinedMenuItems = (results ?? []).map((i) => ({
+            label: i.name,
+            name: i.key,
+        }));
+        const totalCount = pageStart - 1 + Number(pageLimit);
+        const slicedResults = refinedMenuItems?.slice(pageStart - 1, totalCount);
+
+        return {
+            results: slicedResults,
+            more: totalCount < refinedMenuItems.length,
+        };
+    } catch (e) {
+        ErrorHandler.handleError(e);
+        return {
+            results: [],
+            more: false,
+        };
+    }
+};
 const getCreatedByNames = (id: string): string => {
     if (id.includes('webhook')) {
         return storeState.webhook[id].label || id;
@@ -283,7 +311,7 @@ watch(() => route.query, async (query) => {
                                        @update:selected="handleSelectServiceDropdownItem"
                     />
                     <p-select-dropdown :selection-label="$t('ALERT_MANAGER.ALERTS.LABEL')"
-                                       :handler="filterState.labelHandler"
+                                       :handler="labelMenuItemsHandler()"
                                        style-type="rounded"
                                        appearance-type="stack"
                                        show-delete-all-button
@@ -373,7 +401,9 @@ watch(() => route.query, async (query) => {
                 <span>{{ getCreatedByNames(value) }}</span>
             </template>
             <template #col-duration-format="{ item }">
-                <span>{{ calculateTime(item?.created_at, storeState.timezone) }}</span>
+                <span>{{ item.status === ALERT_STATUS.RESOLVED
+                    ? calculateTime(item?.resolved_at, storeState.timezone)
+                    : calculateTime(item?.created_at, storeState.timezone) }}</span>
             </template>
         </p-toolbox-table>
         <custom-field-modal :visible="state.visibleCustomFieldModal"

diff --git a/apps/web/src/services/alert-manager/components/ServiceDetailTabsNotificationsDetail.vue b/apps/web/src/services/alert-manager/components/ServiceDetailTabsNotificationsDetail.vue
@@ -114,22 +114,27 @@ const getScheduleInfo = (schedule: ServiceChannelScheduleInfoType): ScheduleInfo
         styleType: '', value: '' as TranslateResult, days: [] as TranslateResult[], time: '',
     };
 
+    const formatTime = (time: number | undefined, defaultTime: number): string => `${String(time ?? defaultTime).padStart(2, '0')}:00`;
+
     Object.entries(schedule).forEach(([day, s]) => {
-        if (day === 'SCHEDULE_TYPE') return;
+        if (day === 'SCHEDULE_TYPE' || day === 'TIMEZONE') return;
+
         const scheduleDay = s as ServiceChannelScheduleDayType;
-        if (scheduleDay) {
-            const startTime = `${String(scheduleDay?.start || 0).padStart(2, '0')}:00`;
-            const endTime = `${String(scheduleDay?.end || 0).padStart(2, '0')}:00`;
-            if (schedule.SCHEDULE_TYPE === 'WEEK_DAY') {
-                scheduleInfo.days = Object.values(state.dayMapping).slice(0, 5).map((d) => d as TranslateResult);
-            } else if (schedule.SCHEDULE_TYPE === 'ALL_DAY') {
-                scheduleInfo.days = Object.values(state.dayMapping).map((d) => d as TranslateResult);
-            } else if (scheduleDay?.is_scheduled) {
-                scheduleInfo.days.push(state.dayMapping[day]);
-            }
+        if (!scheduleDay) return;
+
+        const startTime = formatTime(scheduleDay.start, 0);
+        const endTime = formatTime(scheduleDay.end, 24);
+        if (schedule.SCHEDULE_TYPE === 'WEEK_DAY') {
+            scheduleInfo.days = Object.values(state.dayMapping).slice(0, 5).map((d) => d as TranslateResult);
             if (scheduleDay?.is_scheduled) {
                 scheduleInfo.time = `${startTime} ~ ${endTime}`;
             }
+        } else if (schedule.SCHEDULE_TYPE === 'ALL_DAY') {
+            scheduleInfo.days = Object.values(state.dayMapping).map((d) => d as TranslateResult);
+            scheduleInfo.time = `${startTime} ~ ${endTime}`;
+        } else if (scheduleDay?.is_scheduled) {
+            scheduleInfo.days.push(state.dayMapping[day]);
+            scheduleInfo.time = `${startTime} ~ ${endTime}`;
         }
     });