Merge pull request #2884 from modoboa/better-dkim

Added an alarm on dkim write error, reworked alarms

frontend/src/App.vue

@@ -35,6 +35,7 @@
 
 <script>
 import { mapGetters } from 'vuex'
+import alarms from '@/api/alarms'
 import { bus } from '@/main'
 import Navbar from '@/components/layout/Navbar'
 
@@ -51,12 +52,23 @@ export default {
   created () {
     // this.$store.dispatch('auth/initialize')
     bus.$on('notification', this.showNotification)
+    bus.$on('loggedIn', this.checkAlarms)
+  },
+  mounted () {
+    this.checkAlarms()
+  },
+  beforeDestroy () {
+    clearInterval(this.alarmChecker)
   },
   data: () => ({
     snackbar: false,
     notification: '',
     notificationColor: 'success',
-    notificationTimeout: 2000
+    notificationTimeout: 2000,
+    alarmNotified: [],
+    alarmChecker: null,
+    lastAlarmDate: '',
+    alarmSleepTime: 10000
   }),
   methods: {
     showNotification (options) {
@@ -65,6 +77,33 @@ export default {
         this.notificationColor = (options.type) ? options.type : 'success'
         this.snackbar = true
       }
+    },
+    checkAlarms () {
+      if (this.isAuthenticated) {
+        this.alarmChecker = window.setInterval(() => {
+          const params = {}
+          if (this.lastAlarmDate instanceof Date) {
+            params.min_date = this.lastAlarmDate
+          }
+          alarms.getAll(params).then(resp => {
+            let count = 0
+            for (const alarm of resp.data) {
+              if (alarm.status === 1 && !this.alarmNotified.includes(alarm.id)) {
+                if (this.lastAlarmDate instanceof Date && new Date(alarm.created) > this.lastAlarmDate) {
+                  this.lastAlarmDate = new Date(alarm.created)
+                } else if (!(this.lastAlarmDate instanceof Date)) {
+                  this.lastAlarmDate = new Date(alarm.created)
+                }
+                count++
+                this.alarmNotified.push(alarm.id)
+              }
+            }
+            if (count !== 0) {
+              bus.$emit('notification', { msg: this.$gettext('You have one or more opened alarms'), type: 'error' })
+            }
+          })
+        }, this.alarmSleepTime)
+      }
     }
   }
 }

frontend/src/api/alarms.js

@@ -5,5 +5,14 @@ const resource = 'alarms'
 export default {
   getAll (params) {
     return repository.get(`${resource}/`, { params })
+  },
+  switchStatus (alarmId, data) {
+    return repository.patch(`${resource}/${alarmId}/switch/`, data)
+  },
+  delete (alarmId) {
+    return repository.delete(`${resource}/${alarmId}/`)
+  },
+  bulkDelete (alarmsIds) {
+    return repository.delete(`${resource}/bulk_delete/`, { params: { ids: alarmsIds } })
   }
 }

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 () {

frontend/src/constants.json

@@ -0,0 +1,4 @@
+{
+    "ALARM_OPENED": 1,
+    "ALARM_CLOSED": 2
+}

frontend/src/views/Login.vue

@@ -58,6 +58,7 @@
 </template>
 
 <script>
+import { bus } from '@/main'
 import Cookies from 'js-cookie'
 import auth from '@/api/auth'
 
@@ -86,6 +87,7 @@ export default {
         Cookies.set('token', resp.data.access, { sameSite: 'strict' })
         Cookies.set('refreshToken', resp.data.refresh, { sameSite: 'strict' })
         this.$store.dispatch('auth/initialize').then(() => {
+          bus.$emit('loggedIn')
           this.$router.push({ name: 'DomainList' })
         })
       }).catch(err => {