Move the create alert button from the action icons into the resource Alerts tab

Author: Damans227

ui/src/components/view/ResourceAlertsTab.vue

@@ -17,13 +17,19 @@
 
 <template>
   <div>
-    <a-select
-      v-model:value="severity"
-      style="width: 200px; margin-bottom: 12px"
-      @change="onFilterChange">
-      <a-select-option value="">{{ $t('label.severity') }}: {{ $t('label.all') }}</a-select-option>
-      <a-select-option v-for="s in severities" :key="s" :value="s">{{ s }}</a-select-option>
-    </a-select>
+    <div class="toolbar">
+      <a-select
+        v-model:value="severity"
+        style="width: 200px"
+        @change="onFilterChange">
+        <a-select-option value="">{{ $t('label.severity') }}: {{ $t('label.all') }}</a-select-option>
+        <a-select-option v-for="s in severities" :key="s" :value="s">{{ s }}</a-select-option>
+      </a-select>
+      <a-button v-if="canCreateRule" type="primary" @click="showCreateRule = true">
+        <template #icon><plus-outlined /></template>
+        {{ $t('label.create.resource.alert.rule') }}
+      </a-button>
+    </div>
     <a-table
       size="small"
       :columns="columns"
@@ -47,16 +53,33 @@
         </template>
       </template>
     </a-table>
+    <a-modal
+      v-if="showCreateRule"
+      :visible="showCreateRule"
+      :title="$t('label.create.resource.alert.rule')"
+      :footer="null"
+      :maskClosable="false"
+      centered
+      @cancel="showCreateRule = false">
+      <create-resource-alert-rule
+        :resource="resource"
+        :presetResourceType="resourceType"
+        @close-action="showCreateRule = false" />
+    </a-modal>
   </div>
 </template>
 
 <script>
 import { getAPI } from '@/api'
 import { resourceAlertLabel } from '@/views/resourcealert/resourceAlertOptions'
+import CreateResourceAlertRule from '@/views/resourcealert/CreateResourceAlertRule.vue'
 
 // Shows the alerts of one resource, or of one rule when no resourceType is given.
 export default {
   name: 'ResourceAlertsTab',
+  components: {
+    CreateResourceAlertRule
+  },
   props: {
     resource: {
       type: Object,
@@ -78,6 +101,7 @@ export default {
     return {
       alerts: [],
       tabLoading: false,
+      showCreateRule: false,
       severity: '',
       severities: ['CRITICAL', 'HIGH', 'MEDIUM', 'LOW'],
       page: 1,
@@ -94,6 +118,10 @@ export default {
     }
   },
   computed: {
+    // Extensions do not report VM or host usage, so rules on them would never fire
+    canCreateRule () {
+      return !!this.resourceType && 'createResourceAlertRule' in this.$store.getters.apis && this.resource?.hypervisor !== 'External'
+    },
     pagination () {
       return {
         current: this.page,
@@ -157,3 +185,12 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.toolbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 12px;
+}
+</style>

ui/src/config/section/compute.js

@@ -17,7 +17,6 @@
 
 import { shallowRef, defineAsyncComponent } from 'vue'
 import store from '@/store'
-import { createAlertRuleAction } from '@/config/section/infra/resourceAlertRules'
 import { isZoneCreated } from '@/utils/zone'
 import { getAPI, postAPI, getBaseUrl } from '@/api'
 import { getLatestKubernetesIsoParams } from '@/utils/acsrepo'
@@ -482,8 +481,7 @@ export default {
           groupMap: (selection, values) => { return selection.map(x => { return { id: x, expunge: values.expunge } }) },
           show: (record) => { return ['Running', 'Stopped', 'Error'].includes(record.state) && record.vmtype !== 'sharedfsvm' },
           component: shallowRef(defineAsyncComponent(() => import('@/views/compute/DestroyVM.vue')))
-        },
-        createAlertRuleAction('VirtualMachine')
+        }
       ]
     },
     {

ui/src/config/section/infra/hosts.js

@@ -17,7 +17,6 @@
 
 import { shallowRef, defineAsyncComponent } from 'vue'
 import store from '@/store'
-import { createAlertRuleAction } from '@/config/section/infra/resourceAlertRules'
 
 export default {
   name: 'host',
@@ -352,7 +351,6 @@ export default {
       dataView: true,
       args: ['forced'],
       show: (record) => { return ['Maintenance', 'Disabled', 'Down', 'Alert', 'Disconnected'].includes(record.resourcestate) }
-    },
-    createAlertRuleAction('Host')
+    }
   ]
 }

ui/src/config/section/infra/primaryStorages.js

@@ -17,7 +17,6 @@
 
 import { shallowRef, defineAsyncComponent } from 'vue'
 import store from '@/store'
-import { createAlertRuleAction } from '@/config/section/infra/resourceAlertRules'
 
 export default {
   name: 'storagepool',
@@ -169,7 +168,6 @@ export default {
       args: ['forced'],
       show: (record) => { return (record.state === 'Down' || record.state === 'Maintenance' || record.state === 'Disconnected') },
       displayName: (record) => { return record.name || record.displayName || record.id }
-    },
-    createAlertRuleAction('StoragePool')
+    }
   ]
 }

ui/src/config/section/infra/resourceAlertRules.js

@@ -22,19 +22,6 @@ import { resourceAlertLabel } from '@/views/resourcealert/resourceAlertOptions'
 
 const label = (field) => ({ [field]: (record) => resourceAlertLabel(field, record[field]) })
 
-// Create an alert rule from a resource's own page, with the resource already picked
-export const createAlertRuleAction = (resourceAlertType) => ({
-  api: 'createResourceAlertRule',
-  icon: 'bell-outlined',
-  label: 'label.create.resource.alert.rule',
-  dataView: true,
-  popup: true,
-  resourceAlertType,
-  // Extensions do not report VM or host usage, so rules on them would never fire
-  show: (record) => { return record.hypervisor !== 'External' },
-  component: shallowRef(defineAsyncComponent(() => import('@/views/resourcealert/CreateResourceAlertRule.vue')))
-})
-
 export default {
   name: 'resourcealerts',
   title: 'label.resource.alert.rules',

ui/src/config/section/storage.js

@@ -17,7 +17,6 @@
 
 import { shallowRef, defineAsyncComponent } from 'vue'
 import store from '@/store'
-import { createAlertRuleAction } from '@/config/section/infra/resourceAlertRules'
 import { isZoneCreated } from '@/utils/zone'
 import { isAdmin } from '@/role'
 
@@ -327,8 +326,7 @@ export default {
             return !['Destroy', 'Destroyed', 'Expunging', 'Expunged', 'Migrating', 'Uploading', 'UploadError', 'Creating', 'Allocated', 'Uploaded'].includes(record.state) &&
               record.type !== 'ROOT' && !record.virtualmachineid
           }
-        },
-        createAlertRuleAction('Volume')
+        }
       ]
     },
     {

ui/src/views/resourcealert/CreateResourceAlertRule.vue

@@ -151,9 +151,9 @@ export default {
       type: Object,
       default: () => ({})
     },
-    currentAction: {
-      type: Object,
-      default: () => ({})
+    presetResourceType: {
+      type: String,
+      default: ''
     }
   },
   data () {
@@ -233,9 +233,8 @@ export default {
   methods: {
     // Opened from a resource's own page: pick its type and the resource itself
     presetResource () {
-      const type = this.currentAction?.resourceAlertType
-      if (!type || !this.resource?.id) return
-      this.form.resourcetype = type
+      if (!this.presetResourceType || !this.resource?.id) return
+      this.form.resourcetype = this.presetResourceType
       this.form.metric = undefined
       this.fetchResources().then(() => {
         this.form.resourceid = this.resource.id