Merge pull request #6743 from easy-mj/feature/mj-r-master-4915_v2

feat(3.10/4915): 告警相关前端调整
yunionio · Jun 19, 2024 · 0c0cfc6 · 0c0cfc6
2 parents 0344613 + 1fc5f08
commit 0c0cfc6
Show file tree

Hide file tree

Showing 11 changed files with 1,053 additions and 246 deletions.
diff --git a/containers/Monitor/router/index.js b/containers/Monitor/router/index.js
@@ -206,49 +206,49 @@ export default {
           ],
         },
         {
-          path: '/alertrecord',
+          path: '/alertresource',
           meta: {
-            label: i18n.t('dictionary.alertrecord'),
-            permission: 'alertrecords_list,monitorresourcealerts_list',
+            label: i18n.t('monitor.text_17'),
+            // t: 'dictionary.alertresource',
+            permission: 'alertresources_list',
             hidden: () => {
-              if (isScopedPolicyMenuHidden('sub_hidden_menus.alertrecord')) {
+              if (isScopedPolicyMenuHidden('sub_hidden_menus.alertresource')) {
                 return true
               }
-
-              return !setupKeys.hasVersionedSetupKey({
-                '3.0': ['monitor'],
-              })
+              if (!store.getters.isAdminMode) return true
+              return !setupKeys.hasVersionedSetupKey({ '3.0': ['monitor'] }, !(!store.getters.isAdminMode && process.env.VUE_APP_IS_PRIVATE))
             },
           },
           component: Layout,
           children: [
             {
-              name: 'AlertrecordIndex',
+              name: 'alertresourceIndex',
               path: '',
-              component: AlertrecordIndex,
+              component: AlertresourceIndex,
             },
           ],
         },
         {
-          path: '/alertresource',
+          path: '/alertrecord',
           meta: {
-            label: i18n.t('monitor.text_17'),
-            // t: 'dictionary.alertresource',
-            permission: 'alertresources_list',
+            label: i18n.t('dictionary.alertrecord'),
+            permission: 'alertrecords_list,monitorresourcealerts_list',
             hidden: () => {
-              if (isScopedPolicyMenuHidden('sub_hidden_menus.alertresource')) {
+              if (isScopedPolicyMenuHidden('sub_hidden_menus.alertrecord')) {
                 return true
               }
-              if (!store.getters.isAdminMode) return true
-              return !setupKeys.hasVersionedSetupKey({ '3.0': ['monitor'] }, !(!store.getters.isAdminMode && process.env.VUE_APP_IS_PRIVATE))
+
+              return !setupKeys.hasVersionedSetupKey({
+                '3.0': ['monitor'],
+              })
             },
           },
           component: Layout,
           children: [
             {
-              name: 'alertresourceIndex',
+              name: 'AlertrecordIndex',
               path: '',
-              component: AlertresourceIndex,
+              component: AlertrecordIndex,
             },
           ],
         },

diff --git a/containers/Monitor/views/alertrecord/components/List.vue b/containers/Monitor/views/alertrecord/components/List.vue
@@ -29,7 +29,6 @@ export default {
       type: Object,
       required: false,
     },
-    alertType: String,
     resType: String,
     listId: String,
     hiddenColumns: {
@@ -39,8 +38,7 @@ export default {
   },
   data () {
     return {
-      allList: this.$list.createList(this, this.listOptions('alertrecords')),
-      unrecoverList: this.$list.createList(this, this.listOptions('monitorresourcealerts')),
+      list: this.$list.createList(this, this.listOptions('alertrecords')),
       exportDataOptions: {
         items: [
           { key: 'alert_name', label: this.$t('monitor.text_99') },
@@ -59,15 +57,8 @@ export default {
     }
   },
   computed: {
-    list () {
-      if (this.alertType === 'un-recovered') {
-        return this.unrecoverList
-      } else {
-        return this.allList
-      }
-    },
     columns () {
-      let columns = this.listColumns(this.alertType)
+      let columns = this.listColumns()
       if (this.hiddenColumns.length) {
         columns = columns.filter(item => {
           return !this.hiddenColumns.some(item2 => item2 === item.field)
@@ -80,9 +71,6 @@ export default {
         {
           label: this.$t('cloudenv.text_463'),
           action: (obj) => {
-            if (this.alertType === 'un-recovered' && obj.data) {
-              obj.eval_data = [obj.data]
-            }
             this.createDialog('ViewAlertrecordDetailDialog', {
               vm: this,
               columns: this.columns,
@@ -92,50 +80,10 @@ export default {
           },
         },
       ]
-
-      if (this.alertType === 'un-recovered') {
-        actions.push({
-          label: this.$t('monitor.alerts.shield.shield'),
-          permission: 'alertrecordshields_create',
-          action: (obj) => {
-            this.createDialog('ShieldAlertrecord', {
-              vm: this,
-              columns: this.columns,
-              onManager: this.onManager,
-              refresh: this.refresh,
-              data: [obj],
-            })
-          },
-          meta: (obj) => {
-            const ret = {
-              validate: true,
-            }
-            // if (obj.send_state === 'shield') {
-            //   return {
-            //     validate: false,
-            //     tooltip: this.$t('monitor.alerts.shield.tips'),
-            //   }
-            // }
-            if (obj.is_set_shield === true) {
-              return {
-                validate: false,
-                tooltip: this.$t('monitor.alerts.shield.tips2'),
-              }
-            }
-            return ret
-          },
-        })
-      }
       return actions
     },
   },
   watch: {
-    alertType (val) {
-      this.$nextTick(() => {
-        this.list.fetchData()
-        if (this.resTypeItems.length) this.list.filterOptions = this.filters()
-      })
-    },
     resTypeItems (val) {
       this.$nextTick(() => {
         this.list.filterOptions = this.filters()
@@ -152,10 +100,7 @@ export default {
       this.list.fetchData()
     },
     getStatusTableFilter () {
-      if (this.alertType !== 'un-recovered') {
-        return [getStatusFilter({ field: 'state', statusModule: 'alertrecord' })]
-      }
-      return []
+      return [getStatusFilter({ field: 'state', statusModule: 'alertrecord' })]
     },
     filters () {
       const options = {
@@ -201,7 +146,7 @@ export default {
     listOptions (resource) {
       return {
         id: this.listId,
-        idKey: resource === 'monitorresourcealerts' ? 'row_id' : 'id',
+        idKey: 'id',
         resource: resource,
         apiVersion: 'v1',
         getParams: this.getParam,
@@ -210,105 +155,7 @@ export default {
         filterOptions: this.filters(),
       }
     },
-    resourceColumns (alertType) {
-      if (alertType === 'un-recovered') {
-        return [
-          {
-            field: 'name',
-            title: this.$t('common_151'),
-            formatter: ({ row }) => R.path(['data', 'tags', 'name'], row) || '-',
-          },
-          {
-            field: 'brand',
-            title: this.$t('compute.text_176'),
-            slots: {
-              default: ({ row }, h) => {
-                let brand = R.path(['data', 'tags', 'brand'], row)
-                if (!brand) return [<data-loading />]
-                if (brand === 'kvm') brand = 'OneCloud'
-                return [
-                  <BrandIcon name={brand} />,
-                ]
-              },
-            },
-          },
-          {
-            field: 'value_str',
-            title: this.$t('monitor.text_16'),
-            align: 'right',
-            formatter: ({ row }) => row.data ? row.data.value_str : '-',
-          },
-        ]
-      } else {
-        return [
-          {
-            field: 'res_num',
-            title: this.$t('cloudenv.text_417'),
-            minWidth: 80,
-            type: 'expand',
-            slots: {
-              default: ({ row }) => {
-                return row.res_num
-              },
-              content: ({ row }) => {
-                const columns = [
-                  {
-                    field: 'name',
-                    title: this.$t('dashboard.text_110'),
-                    formatter: ({ row }) => R.path(['tags', 'name'], row) || '-',
-                  },
-                  {
-                    field: 'ip',
-                    title: 'IP',
-                    formatter: ({ row }) => R.path(['tags', 'ip'], row) || '-',
-                  },
-                  {
-                    field: 'brand',
-                    title: this.$t('compute.text_176'),
-                    slots: {
-                      default: ({ row }, h) => {
-                        let brand = R.path(['tags', 'brand'], row)
-                        if (!brand) return [<data-loading />]
-                        if (brand === 'kvm') brand = 'OneCloud'
-                        return [
-                          <BrandIcon name={brand} />,
-                        ]
-                      },
-                    },
-                  },
-                  {
-                    field: 'condition',
-                    title: this.$t('monitor.condition'),
-                    slots: {
-                      default: ({ row }, h) => {
-                        if (!row.alert_details) return '-'
-                        const { strategy } = getStrategyInfo(row.alert_details)
-
-                        return [
-                          <a-tooltip>
-                            <template slot="title">
-                              {row.metric}
-                            </template>
-                            {strategy}
-                          </a-tooltip>,
-                        ]
-                      },
-                    },
-                  },
-                  {
-                    field: 'value_str',
-                    title: row.state === 'ok' ? this.$t('monitor.text_106') : this.$t('monitor.text_105'),
-                    align: 'right',
-                    formatter: ({ row }) => row.value_str,
-                  },
-                ]
-                return <vxe-grid size="mini" border columns={columns} data={row.eval_data} />
-              },
-            },
-          }]
-      }
-    },
-    listColumns (alertType) {
+    listColumns () {
       return [
         getNameDescriptionTableColumn({
           edit: false,
@@ -343,7 +190,71 @@ export default {
         },
         strategyColumn('alert_rule'),
         levelColumn,
-        ...this.resourceColumns(alertType),
+        {
+          field: 'res_num',
+          title: this.$t('cloudenv.text_417'),
+          minWidth: 80,
+          type: 'expand',
+          slots: {
+            default: ({ row }) => {
+              return row.res_num
+            },
+            content: ({ row }) => {
+              const columns = [
+                {
+                  field: 'name',
+                  title: this.$t('dashboard.text_110'),
+                  formatter: ({ row }) => R.path(['tags', 'name'], row) || '-',
+                },
+                {
+                  field: 'ip',
+                  title: 'IP',
+                  formatter: ({ row }) => R.path(['tags', 'ip'], row) || '-',
+                },
+                {
+                  field: 'brand',
+                  title: this.$t('compute.text_176'),
+                  slots: {
+                    default: ({ row }, h) => {
+                      let brand = R.path(['tags', 'brand'], row)
+                      if (!brand) return [<data-loading />]
+                      if (brand === 'kvm') brand = 'OneCloud'
+                      return [
+                        <BrandIcon name={brand} />,
+                      ]
+                    },
+                  },
+                },
+                {
+                  field: 'condition',
+                  title: this.$t('monitor.condition'),
+                  slots: {
+                    default: ({ row }, h) => {
+                      if (!row.alert_details) return '-'
+                      const { strategy } = getStrategyInfo(row.alert_details)
+
+                      return [
+                        <a-tooltip>
+                          <template slot="title">
+                            {row.metric}
+                          </template>
+                          {strategy}
+                        </a-tooltip>,
+                      ]
+                    },
+                  },
+                },
+                {
+                  field: 'value_str',
+                  title: row.state === 'ok' ? this.$t('monitor.text_106') : this.$t('monitor.text_105'),
+                  align: 'right',
+                  formatter: ({ row }) => row.value_str,
+                },
+              ]
+              return <vxe-grid size="mini" border columns={columns} data={row.eval_data} />
+            },
+          },
+        },
         {
           field: 'send_state',
           title: this.$t('common.sendState'),
@@ -356,7 +267,6 @@ export default {
         ...(R.is(Function, this.getParams) ? this.getParams() : this.getParams),
         details: true,
       }
-      if (this.alertType === 'un-recovered') ret.alertinng = true
       return ret
     },
     handleOpenSidepage (row) {

diff --git a/containers/Monitor/views/alertrecord/index.vue b/containers/Monitor/views/alertrecord/index.vue
@@ -1,8 +1,8 @@
 <template>
   <div>
-    <page-header :title="$t('dictionary.alertrecord')" :current-tab.sync="alertType" :tabs="cloudEnvOptions" />
+    <page-header :title="$t('dictionary.alertrecord')" />
     <page-body>
-      <list listId="AlertrecordList" :alertType="alertType" :resType="resType" />
+      <list listId="AlertrecordList" :resType="resType" />
     </page-body>
   </div>
 </template>
@@ -20,11 +20,7 @@ export default {
     if (this.$route.query.res_type) {
       resType = this.$route.query.res_type
     }
-    const cloudEnvOptions = [{ key: 'un-recovered', label: this.$t('monitor.overview_alert_sum') }, { key: 'all', label: this.$t('monitor.text_19') }]
-    const alertType = cloudEnvOptions[0].key
     return {
-      cloudEnvOptions,
-      alertType,
       resType,
     }
   },