feat: apply qa & changed design (#5391)

* chore: changed service key validation Signed-off-by: NaYeong,Kim <[email protected]> * feat: changed design Signed-off-by: NaYeong,Kim <[email protected]> * chore: update translations Signed-off-by: NaYeong,Kim <[email protected]> --------- Signed-off-by: NaYeong,Kim <[email protected]>
cloudforet-io · Jan 3, 2025 · f77d604 · f77d604
1 parent 88f1e75
commit f77d604
Show file tree

Hide file tree

Showing 10 changed files with 248 additions and 132 deletions.
diff --git 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
@@ -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)"
                     >
                         <template #top-right>
                             <span class="ml-auto text-label-sm text-gray-600">
                                 {{ $t('ALERT_MANAGER.ALERTS.CREATED_BY', { user: getCreatedByNames(item.created_by) }) }}
                             </span>
                         </template>
-                        <span class="description text-label-sm text-gray-600">{{ item.description }}</span>
+                        <p-text-button style-type="highlight"
+                                       size="md"
+                                       @click="handleClickHistoryItem(item)"
+                        >
+                            {{ item.description }}
+                        </p-text-button>
                     </vertical-timeline-item>
                 </div>
             </template>
@@ -214,7 +223,9 @@ watch(() => storeState.alertInfo, async (alertInfo) => {
         <p-button-modal v-if="state.modalVisible"
                         :header-title="$t('ALERT_MANAGER.ALERTS.EVENT_DETAILS')"
                         size="lg"
+                        hide-footer-close-button
                         :visible.sync="state.modalVisible"
+                        @confirm="handleCloseModal"
         >
             <template #body>
                 <div class="event-detail-modal-content">
@@ -235,6 +246,9 @@ watch(() => storeState.alertInfo, async (alertInfo) => {
                     </p-button>
                 </div>
             </template>
+            <template #confirm-button>
+                {{ $t('ALERT_MANAGER.ALERTS.OK') }}
+            </template>
         </p-button-modal>
     </section>
 </template>
@@ -257,10 +271,5 @@ watch(() => storeState.alertInfo, async (alertInfo) => {
             padding-bottom: 0.25rem;
         }
     }
-    .description {
-        &:hover {
-            @apply text-secondary cursor-pointer;
-        }
-    }
 }
 </style>
diff --git 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) => {
 
 <style scoped lang="postcss">
 .alert-data-table {
+    .toolbox {
+        border-radius: 0.375rem;
+    }
     .service-dropdown {
         margin-bottom: -0.5rem;
         width: max-content;

diff --git a/apps/web/src/services/alert-manager/components/ServiceCreateStep1.vue b/apps/web/src/services/alert-manager/components/ServiceCreateStep1.vue
@@ -69,7 +69,7 @@ const {
         if (duplicatedName) {
             return i18n.t('ALERT_MANAGER.SERVICE.VALIDATION_KEY_UNIQUE');
         }
-        const regex = /^(?!-)[A-Z-]+(?<!-)$/;
+        const regex = /^(?!-)[A-Z0-9-]+(?<!-)$/;
         if (!regex.test(value)) {
             return i18n.t('ALERT_MANAGER.SERVICE.VALIDATION_KEY');
         }

diff --git a/apps/web/src/services/alert-manager/components/ServiceDetailEditModal.vue b/apps/web/src/services/alert-manager/components/ServiceDetailEditModal.vue
@@ -106,6 +106,15 @@ const handleClose = () => {
                         />
                     </template>
                 </p-field-group>
+                <p-field-group :label="$t('ALERT_MANAGER.SERVICE.LABEL_KEY')"
+                               class="input-form service-key"
+                               required
+                >
+                    <p-text-input :value="storeState.service.service_key"
+                                  readonly
+                                  block
+                    />
+                </p-field-group>
                 <p-field-group :label="$t('ALERT_MANAGER.DESCRIPTION')"
                                class="input-form"
                 >
@@ -117,3 +126,16 @@ const handleClose = () => {
         </template>
     </p-button-modal>
 </template>
+
+<style scoped lang="postcss">
+.service-detail-edit-modal {
+    .service-key {
+        /* custom design-system component - p-text-input */
+        :deep(.p-text-input) {
+            .input-container {
+                @apply border-gray-150;
+            }
+        }
+    }
+}
+</style>