[경고 규칙] UI 버그 수정 및 개선(1.긴 모달 짤림, 2.최상단배너 닫힘 버튼 생성, 3.액션 버튼 버그)

Author: stardom3645

ui/src/components/header/AutoAlertBanner.vue

@@ -50,6 +50,17 @@
                   <a-button size="small" @click.stop="goToAlertRulesMenu">
                     {{ tr('label.goto.the.alertRules') }}
                   </a-button>
+
+                  <a-button
+                    size="small"
+                    type="text"
+                    :aria-label="tr('label.close')"
+                    @click.stop="markAllAsRead"
+                  >
+                    <template #icon>
+                      <CloseOutlined />
+                    </template>
+                  </a-button>
                 </a-space>
               </div>
             </div>
@@ -643,7 +654,7 @@ import {
   nextTick,
   getCurrentInstance
 } from 'vue'
-import { ExclamationCircleFilled, SoundOutlined, PauseCircleOutlined, LinkOutlined } from '@ant-design/icons-vue'
+import { ExclamationCircleFilled, SoundOutlined, PauseCircleOutlined, LinkOutlined, CloseOutlined } from '@ant-design/icons-vue'
 import { message } from 'ant-design-vue'
 import { api } from '@/api'
 import MarkdownIt from 'markdown-it'
@@ -656,6 +667,7 @@ export default {
     SoundOutlined,
     PauseCircleOutlined,
     LinkOutlined,
+    CloseOutlined,
     RuleSilenceModal: defineAsyncComponent(() => import('@/views/infra/RuleSilenceModal.vue')),
     RulePauseModal: defineAsyncComponent(() => import('@/views/infra/RulePauseModal.vue'))
   },

ui/src/components/page/GlobalLayout.vue

@@ -527,6 +527,13 @@ body.dark-mode .banner-spacer::before {
   /* 배너 높이만큼 밑으로 내려서 겹치지 않게 처리 */
   top: calc(24px + var(--autoBannerHeight, 0px)) !important;
 }
+
+/* 일반 모달은 최상단 경고 배너보다 항상 위에 렌더링 */
+.ant-modal-root,
+.ant-modal-mask,
+.ant-modal-wrap {
+  z-index: 2147483655 !important;
+}
 @media (max-width: 768px) {
   /* 1. 사이드바를 공중에 띄워서 공간 차지를 못하게 만듦 */
   .ant-layout.layout.mobile .sticky-sidebar {

ui/src/components/view/ListView.vue

@@ -914,7 +914,7 @@ export default {
     },
     handleContextAction (action) {
       this.closeContextQuickView()
-      this.$parent.execAction(action)
+      this.$parent.execAction(action, false)
     },
     generateRowKeyValue (record) {
       return record.uid || (record.metadata && record.metadata.rule_uid) || record.id || record.name || record.usageType

ui/src/views/AutogenView.vue

@@ -141,7 +141,7 @@
     </a-affix>
 
     <div v-show="showAction">
-      <keep-alive v-if="currentAction.component && (!currentAction.groupAction || selectedRowKeys.length === 0 || (this.selectedRowKeys.length > 0 && currentAction.api === 'destroyVirtualMachine'))">
+      <keep-alive v-if="currentAction.component && (!currentAction.invokedAsGroupAction || (this.selectedRowKeys.length > 0 && currentAction.api === 'destroyVirtualMachine'))">
         <a-modal
           :visible="showAction"
           :closable="true"
@@ -418,7 +418,7 @@
         :maskClosable="false"
         :footer="null"
         style="top: 20px;"
-        :width="currentAction.groupAction ? modalWidth : '30vw'"
+        :width="currentAction.invokedAsGroupAction ? modalWidth : '30vw'"
         :ok-button-props="getOkProps()"
         ok-text="111"
         :cancel-button-props="getCancelProps()"
@@ -438,7 +438,7 @@
         </template>
         <a-spin :spinning="actionLoading" v-ctrl-enter="handleSubmit">
           <span v-if="currentAction.message">
-            <div v-if="selectedRowKeys.length > 0 && currentAction.groupAction">
+            <div v-if="selectedRowKeys.length > 0 && currentAction.invokedAsGroupAction">
               <a-alert
                 v-if="['delete-outlined', 'DeleteOutlined', 'poweroff-outlined', 'PoweroffOutlined'].includes(currentAction.icon)"
                 type="error">
@@ -462,7 +462,7 @@
                 </template>
               </a-alert>
             </div>
-            <div v-if="selectedRowKeys.length > 0 && currentAction.groupAction">
+            <div v-if="selectedRowKeys.length > 0 && currentAction.invokedAsGroupAction">
               <a-divider />
               <a-table
                 v-if="selectedRowKeys.length > 0"
@@ -990,6 +990,13 @@ export default {
     },
     '$store.getters.listAllProjects' (oldVal, newVal) {
       this.fetchData()
+    },
+    showAction (visible) {
+      if (visible) {
+        this.clearAutoRefresh()
+      } else if (!this.dataView) {
+        this.scheduleAutoRefresh()
+      }
     }
   },
   computed: {
@@ -1091,7 +1098,7 @@ export default {
       return 'inline-flex'
     },
     getOkProps () {
-      if (this.selectedRowKeys.length > 0 && this.currentAction?.groupAction) {
+      if (this.selectedRowKeys.length > 0 && this.currentAction?.invokedAsGroupAction) {
       } else {
         return { props: { type: 'primary' } }
       }
@@ -1137,7 +1144,7 @@ export default {
       downloadLink.click()
     },
     getCancelProps () {
-      if (this.selectedRowKeys.length > 0 && this.currentAction?.groupAction) {
+      if (this.selectedRowKeys.length > 0 && this.currentAction?.invokedAsGroupAction) {
         return { props: { type: 'primary' } }
       } else {
         return { props: { type: 'default' } }
@@ -1589,7 +1596,10 @@ export default {
         this.$router.push({ name: action.api, query })
         return
       }
-      this.currentAction = action
+      this.currentAction = {
+        ...action,
+        invokedAsGroupAction: !!isGroupAction
+      }
       this.currentAction.params = store.getters.apis[this.currentAction.api].params
       this.resource = action.resource
       this.$emit('change-resource', this.resource)
@@ -1855,7 +1865,7 @@ export default {
     handleSubmit (e) {
       if (this.actionLoading) return
       this.promises = []
-      if (!this.dataView && this.currentAction.groupAction && this.selectedRowKeys.length > 0) {
+      if (!this.dataView && this.currentAction.invokedAsGroupAction && this.selectedRowKeys.length > 0) {
         if (this.selectedRowKeys.length > 0) {
           this.bulkColumns = this.chosenColumns
           this.selectedItems = this.selectedItems.map(v => ({ ...v, status: 'InProgress' }))