Improved performance of API alarms endpoint.

see #2660

frontend/src/api/alarms.js

@@ -3,7 +3,7 @@ import repository from './repository'
 const resource = 'alarms'
 
 export default {
-  getAll () {
-    return repository.get(`${resource}/`)
+  getAll (params) {
+    return repository.get(`${resource}/`, { params })
   }
 }

frontend/src/components/alarms/AlarmList.vue

@@ -27,9 +27,33 @@
     :items="alarms"
     :search="search"
     item-key="pk"
+    :options.sync="options"
+    :server-items-length="totalAlarms"
+    :loading="loading"
     class="elevation-1"
     show-select
     >
+    <template v-slot:item.status="{ item }">
+      <v-chip
+        v-if="item.status === 1"
+        color="warning"
+        small
+        >
+        <translate>Opened</translate>
+      </v-chip>
+      <v-chip
+        v-else
+        color="info"
+        small
+        >
+        <translate>Closed</translate>
+      </v-chip>
+    </template>
+    <template v-slot:item.mailbox="{ item }">
+      <template v-if="item.mailbox">
+        {{ item.mailbox.address }}@{{ item.domain.name }}
+      </template>
+    </template>
     <template v-slot:item.created="{ item }">
       {{ item.created|date }}
     </template>
@@ -45,19 +69,51 @@ export default {
     return {
       alarms: [],
       headers: [
-        { text: this.$gettext('Date'), value: 'created' },
-        { text: this.$gettext('Domain'), value: 'domain.name' },
-        { text: this.$gettext('Mailbox'), value: 'mailbox.name' },
+        { text: this.$gettext('Triggered'), value: 'created' },
+        { 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' }
       ],
+      loading: true,
+      options: {},
       search: '',
-      selected: []
+      selected: [],
+      totalAlarms: 0
+    }
+  },
+  methods: {
+    fetchAlarms () {
+      const params = {
+        page: this.options.page
+      }
+      if (this.options.sortBy) {
+        params.ordering = this.options.sortBy.map(item => this.options.sortDesc[0] ? `-${item}` : item).join(',')
+      }
+      if (this.search !== '') {
+        params.search = this.search
+      }
+      this.loading = true
+      alarms.getAll(params).then(resp => {
+        this.alarms = resp.data.results
+        this.totalAlarms = resp.data.count
+        this.loading = false
+      })
     }
   },
   mounted () {
-    alarms.getAll().then(resp => {
-      this.alarms = resp.data
-    })
+    this.fetchAlarms()
+  },
+  watch: {
+    options: {
+      handler () {
+        this.fetchAlarms()
+      },
+      deep: true
+    },
+    search () {
+      this.fetchAlarms()
+    }
   }
 }
 </script>