diff --git a/apps/web/src/common/components/vertical-timeline/VerticalTimelineItem.vue b/apps/web/src/common/components/vertical-timeline/VerticalTimelineItem.vue index 17dff68a94..c8026d3b97 100644 --- a/apps/web/src/common/components/vertical-timeline/VerticalTimelineItem.vue +++ b/apps/web/src/common/components/vertical-timeline/VerticalTimelineItem.vue @@ -141,7 +141,7 @@ const time = computed(() => { } .vertical-item-detail { @apply text-paragraph-md; - padding: 0.75rem 1rem; + padding: 0.75rem 0.5rem; >.p-collapsible-panel { padding: 0; } diff --git a/apps/web/src/services/alert-manager/components/AlertDetailTabsTimeline.vue b/apps/web/src/services/alert-manager/components/AlertDetailTabsTimeline.vue index da02b9c3bb..961ccaba46 100644 --- a/apps/web/src/services/alert-manager/components/AlertDetailTabsTimeline.vue +++ b/apps/web/src/services/alert-manager/components/AlertDetailTabsTimeline.vue @@ -6,7 +6,7 @@ import { import { SpaceConnector } from '@cloudforet/core-lib/space-connector'; import { - PButton, PButtonModal, PCodeEditor, PToolbox, PHeading, PHeadingLayout, PDataLoader, PDivider, PSelectStatus, + PButton, PButtonModal, PCodeEditor, PToolbox, PHeading, PHeadingLayout, PDataLoader, PDivider, PSelectStatus, PTextButton, } from '@cloudforet/mirinae'; import type { ListResponse } from '@/schema/_common/api-verbs/list'; @@ -20,6 +20,7 @@ import { useAllReferenceStore } from '@/store/reference/all-reference-store'; import type { WebhookReferenceMap } from '@/store/reference/webhook-reference-store'; import { copyAnyData } from '@/lib/helper/copy-helper'; +import { showSuccessMessage } from '@/lib/helper/notice-alert-helper'; import VerticalTimelineItem from '@/common/components/vertical-timeline/VerticalTimelineItem.vue'; import ErrorHandler from '@/common/composables/error/errorHandler'; @@ -96,6 +97,9 @@ const getItemInfo = (item: AlertEventActionType): HistoryItemInfo => { }; }; +const handleCloseModal = () => { + state.modalVisible = false; +}; const handleClickHistoryItem = (item: AlertEventModel) => { state.modalVisible = true; state.selectedItem = item; @@ -114,6 +118,7 @@ const handleClickShowMore = async () => { const handleClickCopy = () => { copyAnyData(state.selectedItem); + showSuccessMessage(i18n.t('ALERT_MANAGER.ALERTS.COPIED'), ''); }; const fetchHistoryList = async () => { @@ -183,14 +188,18 @@ watch(() => storeState.alertInfo, async (alertInfo) => { :timezone="storeState.timezone" :style-type="getItemInfo(item.action)?.styleType" :is-last-item="idx === state.slicedHistoryList?.length - 1" - @click="handleClickHistoryItem(item)" > - {{ item.description }} + + {{ item.description }} + @@ -214,7 +223,9 @@ watch(() => storeState.alertInfo, async (alertInfo) => { + @@ -257,10 +271,5 @@ watch(() => storeState.alertInfo, async (alertInfo) => { padding-bottom: 0.25rem; } } - .description { - &:hover { - @apply text-secondary cursor-pointer; - } - } } diff --git a/apps/web/src/services/alert-manager/components/AlertsManagementTable.vue b/apps/web/src/services/alert-manager/components/AlertsManagementTable.vue index c97ea86b8a..1e936afd54 100644 --- a/apps/web/src/services/alert-manager/components/AlertsManagementTable.vue +++ b/apps/web/src/services/alert-manager/components/AlertsManagementTable.vue @@ -224,6 +224,7 @@ watch(() => route.query, async (query) => { exportable search-type="query" sort-by="created_at" + class="toolbox pb-10" :sort-desc="true" :query-tags="queryTags" :loading="state.loading" @@ -364,6 +365,9 @@ watch(() => route.query, async (query) => { diff --git a/apps/web/src/services/alert-manager/components/ServiceList.vue b/apps/web/src/services/alert-manager/components/ServiceList.vue index 2b67513e54..79c9fbeb3d 100644 --- a/apps/web/src/services/alert-manager/components/ServiceList.vue +++ b/apps/web/src/services/alert-manager/components/ServiceList.vue @@ -2,6 +2,8 @@ import { computed, onMounted, reactive } from 'vue'; import { useRouter } from 'vue-router/composables'; +import { isEmpty } from 'lodash'; + import { makeDistinctValueHandler } from '@cloudforet/core-lib/component-util/query-search'; import { SpaceConnector } from '@cloudforet/core-lib/space-connector'; import { ApiQueryHelper } from '@cloudforet/core-lib/space-connector/helper'; @@ -25,7 +27,7 @@ import { usePageEditableStatus } from '@/common/composables/page-editable-status import { useProperRouteLocation } from '@/common/composables/proper-route-location'; import { useQueryTags } from '@/common/composables/query-tags'; -import { red } from '@/styles/colors'; +import { gray } from '@/styles/colors'; import { SERVICE_DETAIL_TABS } from '@/services/alert-manager/constants/common-constant'; import { ALERT_MANAGER_ROUTE } from '@/services/alert-manager/routes/route-constant'; @@ -189,79 +191,108 @@ onMounted(async () => { @change="handleClickServiceItem(item.service_id)" >
-

- {{ item.name }} -

+
+

+ {{ item.name }} +

+ +
-
-
-

- {{ $t('ALERT_MANAGER.SERVICE.OPEN_ALERTS') }} -

-

- {{ (item?.alerts.TRIGGERED?.HIGH || 0) + (item?.alerts.TRIGGERED?.LOW || 0) + (item?.alerts.ACKNOWLEDGED?.HIGH || 0) + (item?.alerts.ACKNOWLEDGED?.LOW || 0) }} -

-
- -
-

- {{ $t('ALERT_MANAGER.ALERTS.TRIGGERED') }} -

-
-

- {{ (item?.alerts.TRIGGERED?.HIGH || 0) + (item?.alerts.TRIGGERED?.LOW || 0) }} +

+
+
+

+ {{ $t('ALERT_MANAGER.SERVICE.OPEN_ALERTS') }} +

+

+ {{ (item?.alerts.TRIGGERED?.HIGH || 0) + (item?.alerts.TRIGGERED?.LOW || 0) + + (item?.alerts.ACKNOWLEDGED?.HIGH || 0) + (item?.alerts.ACKNOWLEDGED?.LOW || 0) }}

-
- - {{ $t('ALERT_MANAGER.ALERTS.HIGH') }}: - {{ item?.alerts.TRIGGERED?.HIGH || 0 }} +
+
+
+

+ {{ $t('ALERT_MANAGER.ALERTS.HEALTHY') }} +

-
-
-
-
-

- {{ $t('ALERT_MANAGER.SERVICE.WEBHOOK', { cnt: item?.webhooks?.length || 0 }) }} -

-
- - - - - - +
+
+

+ {{ $t('ALERT_MANAGER.ALERTS.TRIGGERED') }} +

+
+

+ {{ (item?.alerts.TRIGGERED?.HIGH || 0) + (item?.alerts.TRIGGERED?.LOW || 0) }} +

+
+ {{ $t('ALERT_MANAGER.ALERTS.HIGH') }}: + {{ item?.alerts.TRIGGERED?.HIGH || 0 }} +
+
+
+
+

+ {{ $t('ALERT_MANAGER.ALERTS.ACKNOWLEDGED') }} +

+
+

+ {{ (item?.alerts.ACKNOWLEDGED?.HIGH || 0) + (item?.alerts.ACKNOWLEDGED?.LOW || 0) }} +

+
+
-
-

- {{ $t('ALERT_MANAGER.ESCALATION_POLICY.TITLE', { cnt: 11 }) }} -

- - {{ getEscalationPolicyName(item.escalation_policy_id) }} - + +
+
+

+ {{ $t('ALERT_MANAGER.SERVICE.WEBHOOK', { cnt: item?.webhooks?.length || 0 }) }} +

+
+ + + + + + +
+
+
+

+ {{ $t('ALERT_MANAGER.ESCALATION_POLICY.TITLE', { cnt: 11 }) }} +

+ +

+ {{ getEscalationPolicyName(item.escalation_policy_id) }} +

+ +
@@ -308,65 +339,67 @@ onMounted(async () => { padding: 1.25rem 1.5rem 1.5rem; .card-inner-wrapper { @apply flex flex-col w-full; - gap: 1.75rem; + gap: 1.25rem; .contents { @apply flex gap-8; - .section { - max-width: calc(50% - 1rem); - } - .alerts-wrapper { - @apply flex flex-col; - flex: 1; - max-width: 12.25rem; - gap: 0.75rem; - .alerts { - @apply relative flex flex-col; - gap: 0.25rem; - .title { - @apply text-label-md; - } - .count { - @apply text-display-md; - } - .triggered-info { - @apply flex items-center; + .alerts { + @apply relative flex flex-col; + gap: 0.25rem; + width: calc(50% - 1rem); + .title { + @apply text-label-md; + } + .count { + @apply text-display-md; + } + .triggered-info { + @apply flex items-center; + } + &.triggered { + padding-left: 1rem; + &::before { + @apply absolute bg-red-400; + content: ''; + width: 0.063rem; + height: 100%; + top: 0; + left: 0; } - &.triggered { - padding-left: 0.625rem; - &::before { - @apply absolute bg-red-500; - content: ''; - width: 0.125rem; - height: 100%; - top: 0; - left: 0; - } + } + &.healthy { + @apply flex justify-center; + padding-left: 1rem; + &::before { + @apply absolute bg-green-400; + content: ''; + width: 0.063rem; + height: 100%; + top: 0; + left: 0; } } } .additional-info-wrapper { + @apply flex justify-between; flex: 1; .title { @apply text-paragraph-md text-gray-600; } - .webhook-list { - @apply flex items-center; - .webhook { - @apply flex items-center justify-center rounded-full bg-gray-100 border border-white ; - width: 1.5rem; - height: 1.5rem; - &:hover { - @apply bg-blue-200; - } - & + .webhook { - margin-left: -0.25rem; - } - &.chevron { - @apply border-gray-200; - } - .icon { - margin-bottom: 0; - } + .webhook { + @apply flex items-center justify-center rounded-full bg-gray-100 border border-white ; + width: 1.5rem; + height: 1.5rem; + &:hover { + @apply bg-blue-200; + } + & + .webhook { + margin-left: -0.25rem; + } + &.chevron { + @apply border-gray-200; + } + .icon { + margin-bottom: 0; } } } diff --git a/packages/language-pack/console-translation-2.8.babel b/packages/language-pack/console-translation-2.8.babel index 975916433c..270653ed60 100644 --- a/packages/language-pack/console-translation-2.8.babel +++ b/packages/language-pack/console-translation-2.8.babel @@ -610,6 +610,27 @@ + + HEALTHY + false + + + + + + en-US + true + + + ja-JP + true + + + ko-KR + true + + + HIGH false @@ -988,6 +1009,27 @@ + + OK + false + + + + + + en-US + true + + + ja-JP + true + + + ko-KR + true + + + OPEN false diff --git a/packages/language-pack/en.json b/packages/language-pack/en.json index 523c25c4a7..9bb2138846 100644 --- a/packages/language-pack/en.json +++ b/packages/language-pack/en.json @@ -29,6 +29,7 @@ "ERROR": "Error", "EVENT_DETAILS": "Event Details", "EVENT_PUSHED": "Event pushed", + "HEALTHY": "Healthy", "HIGH": "High", "INFO": "Info", "LABEL_NAME": "Alert Name", @@ -47,6 +48,7 @@ "NOTIFIED": "Notified", "NOT_AVAILABLE": "Not Available", "NO_EVENT": "No Event", + "OK": "OK", "OPEN": "Open", "RESOLVED": "Resolved", "RESOLVED_AT": "Resolved at", @@ -184,7 +186,7 @@ "MODAL_EDIT_TITLE": "Update Service", "MODAL_MEMBER_PLACEHOLDER": "Select a member or more", "NO_DATA": "Create a new service.", - "OPEN_ALERTS": "Open Alerts", + "OPEN_ALERTS": "All Opened Alerts", "OVERVIEW": "Overview", "SELECT": "Select", "SERVICE_MEMBER": "Service Member", @@ -199,7 +201,7 @@ "TOTAL_ALERTS": "Total Alerts", "USER": "User", "USER_GROUP": "User Group", - "VALIDATION_KEY": "Only uppercase letters and hyphens are allowed", + "VALIDATION_KEY": "Only uppercase letters, numbers, and hyphens are allowed.", "VALIDATION_KEY_UNIQUE": "A service with this key name already exists.", "VALIDATION_NAME_UNIQUE": "A service with this name already exists.", "VIEW_ALL_OPEN_ALERTS": "View all open alerts", diff --git a/packages/language-pack/ja.json b/packages/language-pack/ja.json index 7caa4e47b1..8cab434597 100644 --- a/packages/language-pack/ja.json +++ b/packages/language-pack/ja.json @@ -29,6 +29,7 @@ "ERROR": "エラー", "EVENT_DETAILS": "イベント詳細", "EVENT_PUSHED": "イベントがプッシュされました", + "HEALTHY": "正常", "HIGH": "高い", "INFO": "Info", "LABEL_NAME": "アラート名", @@ -47,6 +48,7 @@ "NOTIFIED": "通知済み", "NOT_AVAILABLE": "利用不可", "NO_EVENT": "イベントがありません。", + "OK": "はい", "OPEN": "発生", "RESOLVED": "完了", "RESOLVED_AT": "解決時間", @@ -184,7 +186,7 @@ "MODAL_EDIT_TITLE": "サービス名を編集", "MODAL_MEMBER_PLACEHOLDER": "メンバーを選択してください", "NO_DATA": "新しいサービスを作成", - "OPEN_ALERTS": "発生したアラート", + "OPEN_ALERTS": "全てのオープンされたアラート", "OVERVIEW": "概要", "SELECT": "選択する", "SERVICE_MEMBER": "サービスメンバー", @@ -199,7 +201,7 @@ "TOTAL_ALERTS": "総アラート", "USER": "ユーザー", "USER_GROUP": "ユーザーグループ", - "VALIDATION_KEY": "大文字とハイフンのみ使用できます。", + "VALIDATION_KEY": "大文字、数字、ハイフンのみ使用できます。", "VALIDATION_KEY_UNIQUE": "同じ名前のキーがすでに存在します。", "VALIDATION_NAME_UNIQUE": "同じ名前のサービスはすでに存在します。", "VIEW_ALL_OPEN_ALERTS": "全ての発生アラートを見る", diff --git a/packages/language-pack/ko.json b/packages/language-pack/ko.json index a44a3a6a00..0766f11ef3 100644 --- a/packages/language-pack/ko.json +++ b/packages/language-pack/ko.json @@ -29,6 +29,7 @@ "ERROR": "에러", "EVENT_DETAILS": "이벤트 상세 설명", "EVENT_PUSHED": "이벤트가 푸시됨", + "HEALTHY": "정상", "HIGH": "높음", "INFO": "Info", "LABEL_NAME": "얼럿 이름", @@ -47,6 +48,7 @@ "NOTIFIED": "알림 전송됨", "NOT_AVAILABLE": "사용 불가", "NO_EVENT": "이벤트가 없습니다.", + "OK": "확인", "OPEN": "오픈", "RESOLVED": "완료", "RESOLVED_AT": "완료 시간", @@ -184,7 +186,7 @@ "MODAL_EDIT_TITLE": "서비스 이름 수정", "MODAL_MEMBER_PLACEHOLDER": "멤버 선택", "NO_DATA": "새로운 서비스 생성", - "OPEN_ALERTS": "오픈된 얼럿", + "OPEN_ALERTS": "오픈된 전체 얼럿", "OVERVIEW": "전체 요약", "SELECT": "선택하기", "SERVICE_MEMBER": "서비스 멤버", @@ -199,7 +201,7 @@ "TOTAL_ALERTS": "전체 얼럿", "USER": "사용자", "USER_GROUP": "유저 그룹", - "VALIDATION_KEY": "대문자와 하이픈만 사용 가능합니다.", + "VALIDATION_KEY": "대문자, 숫자, 하이픈만 허용됩니다.", "VALIDATION_KEY_UNIQUE": "동일한 이름의 키가 이미 존재합니다. ", "VALIDATION_NAME_UNIQUE": "동일한 이름의 서비스가 이미 존재합니다.", "VIEW_ALL_OPEN_ALERTS": "오픈된 얼럿 모두 보기",