Merge pull request #2884 from modoboa/better-dkim

Added an alarm on dkim write error, reworked alarms

frontend/src/components/alarms/AlarmList.vue

@@ -8,6 +8,7 @@
         </v-btn>
       </template>
       <v-list dense>
+        <menu-items :items="getActionMenuItems()"/>
       </v-list>
     </v-menu>
     <v-spacer></v-spacer>
@@ -26,7 +27,7 @@
     :headers="headers"
     :items="alarms"
     :search="search"
-    item-key="pk"
+    item-key="id"
     :options.sync="options"
     :server-items-length="totalAlarms"
     :loading="loading"
@@ -53,18 +54,40 @@
       <template v-if="item.mailbox">
         {{ item.mailbox.address }}@{{ item.domain.name }}
       </template>
+      <template v-else>
+        /
+      </template>
     </template>
     <template v-slot:item.created="{ item }">
       {{ item.created|date }}
     </template>
+    <template v-slot:item.actions="{ item }">
+      <div class="text-right">
+        <v-menu offset-y>
+          <template v-slot:activator="{ on, attrs }">
+            <v-btn icon v-bind="attrs" v-on="on">
+              <v-icon>mdi-dots-horizontal</v-icon>
+            </v-btn>
+          </template>
+          <menu-items :items="getMenuItems(item)" :object="item" />
+        </v-menu>
+      </div>
+    </template>
   </v-data-table>
 </v-card>
 </template>
 
 <script>
+import { bus } from '@/main'
 import alarms from '@/api/alarms'
 import debounce from 'debounce'
+import MenuItems from '@/components/tools/MenuItems'
+import constants from '@/constants.json'
+
 export default {
+  components: {
+    MenuItems
+  },
   data () {
     return {
       alarms: [],
@@ -73,7 +96,8 @@ export default {
         { text: this.$gettext('Status'), value: 'status' },
         { text: this.$gettext('Domain'), value: 'domain.name', sortable: false },
         { text: this.$gettext('Mailbox'), value: 'mailbox', sortable: false },
-        { text: this.$gettext('Message'), value: 'title' }
+        { text: this.$gettext('Message'), value: 'title' },
+        { text: this.$gettext('Actions'), value: 'actions', sortable: false, align: 'right' }
       ],
       loading: true,
       options: {},
@@ -99,6 +123,66 @@ export default {
         this.totalAlarms = resp.data.count
         this.loading = false
       })
+    },
+    async deleteAlarm (alarm, single = true) {
+      alarms.delete(alarm.id).then(() => {
+        if (single) {
+          bus.$emit('notification', { msg: this.$gettext('Alarm deleted') })
+          this.fetchAlarms()
+        }
+      })
+    },
+    async closeAlarm (alarm) {
+      alarms.switchStatus(alarm.id, { status: constants.ALARM_CLOSED }).then(() => {
+        bus.$emit('notification', { msg: this.$gettext('Alarm closed') })
+        this.fetchAlarms()
+      })
+    },
+    async openAlarm (alarm) {
+      alarms.switchStatus(alarm.id, { status: constants.ALARM_OPENED }).then(() => {
+        bus.$emit('notification', { msg: this.$gettext('Alarm re-opened') })
+        this.fetchAlarms()
+      })
+    },
+    async deleteAlarms () {
+      await alarms.bulkDelete(this.selected.map(alarm => alarm.id))
+      bus.$emit('notification', { msg: this.$gettext('Alarms deleted') })
+      this.selected = []
+      this.fetchAlarms()
+    },
+    getMenuItems (item) {
+      const result = []
+      result.push({
+        label: this.$gettext('Delete'),
+        icon: 'mdi-delete-outline',
+        onClick: this.deleteAlarm,
+        color: 'red'
+      })
+      if (item.status === constants.ALARM_OPENED) {
+        result.push({
+          label: this.$gettext('Close alarm'),
+          icon: 'mdi-check',
+          onClick: this.closeAlarm,
+          color: 'green'
+        })
+      } else {
+        result.push({
+          label: this.$gettext('Reopen alarm'),
+          icon: 'mdi-alert-circle-outline',
+          onClick:
+          this.openAlarm,
+          color: 'orange'
+        })
+      }
+      return result
+    },
+    getActionMenuItems () {
+      const result = []
+      if (this.selected.length > 0) {
+        result.push({ label: this.$gettext('Delete'), icon: 'mdi-delete-outline', onClick: this.deleteAlarms, color: 'red' })
+      }
+      result.push({ label: this.$gettext('Reload'), icon: 'mdi-reload', onClick: this.fetchAlarms })
+      return result
     }
   },
   mounted () {