feat: add notification history

src/App.vue

@@ -619,6 +619,13 @@ export default {
           perms: 'read:notification_rules',
           show: true
         },
+        {
+          icon: 'history',
+          text: i18n.t('NotificationHistory'),
+          path: '/notificationhistory',
+          perms: 'read:notification_history',
+          show: true
+        },
         {
           icon: 'security',
           text: i18n.t('Permissions'),

src/components/NotificationHistoryList.vue

@@ -0,0 +1,157 @@
+<template>
+  <div>
+    <v-card>
+      <v-card-title class="title">
+        {{ $t('Notification History') }}
+        <v-spacer />
+        <v-text-field
+          v-model="search"
+          append-icon="search"
+          :label="$t('Search')"
+          single-line
+          hide-details
+        />
+      </v-card-title>
+
+      <v-data-table
+        :headers="computedHeaders"
+        :items="notification_history"
+        :pagination.sync="pagination"
+        :total-items="pagination.totalItems"
+        :rows-per-page-items="pagination.rowsPerPageItems"
+        class="alert-table"
+        :loading="isLoading"
+        must-sort
+        sort-icon="arrow_drop_down"
+      >
+        <template
+          slot="items"
+          slot-scope="props"
+        > 
+          <tr
+            :style="{'background-color': severityColor(props.item.confirmed, props.item.sent)}"
+          >
+            <td>{{ props.item.id }}</td>
+            <td>{{ props.item.sent }}</td>
+            <td>{{ props.item.sent_time }}</td>
+            <td>{{ props.item.message }}</td>
+            <td>{{ props.item.receiver }}</td>
+            <td>{{ props.item.sender }}</td>
+            <td>{{ props.item.channel }}</td>
+            <td>{{ props.item.rule }}</td>
+            <td>{{ props.item.alert }}</td>
+            <td>{{ props.item.confirmed }}</td>
+            <td>{{ props.item.confirmed_time }}</td>
+          </tr>
+        </template>
+        <template slot="no-data">
+          <v-alert
+            :value="true"
+            color="error"
+            icon="warning"
+          >
+            {{ $t('NoDisplay') }}
+          </v-alert>
+        </template>
+        <v-alert
+          slot="no-results"
+          :value="true"
+          color="error"
+          icon="warning"
+        >
+          {{ $t('SearchNoResult1') }} "{{ search }}" {{ $t('SearchNoResult2') }}
+        </v-alert>
+      </v-data-table>
+    </v-card>
+  </div>
+</template>
+
+<script>
+import moment from 'moment'
+import i18n from '@/plugins/i18n'
+
+export default {
+  data: vm => ({
+    search: '',
+    headers: [
+      { text: i18n.t('Id'), value: 'id' },
+      { text: i18n.t('Sent'), value: 'sent' },
+      { text: i18n.t('SentTime'), value: 'sent_time' },
+      { text: i18n.t('Message'), value: 'message' },
+      { text: i18n.t('Receiver'), value: 'receiver' },
+      { text: i18n.t('Sender'), value: 'sender' },
+      { text: i18n.t('Channel'), value: 'channel' },
+      { text: i18n.t('NotificationRule'), value: 'rule' },
+      { text: i18n.t('Alert'), value: 'alert' },
+      { text: i18n.t('Confirmed'), value: 'confirmed' },
+      { text: i18n.t('ConfirmedTime'), value: 'confirmed_time' },
+    ],
+    rules: {
+      required: v => !!v || i18n.t('Required')
+    }
+  }),
+  computed: {
+    notification_history() {
+      return this.$store.state.notificationHistory.notification_history
+        .filter(b =>
+          this.search
+            ? Object.keys(b).some(
+              k => b[k] && b[k].toString().includes(this.search)
+            )
+            : true
+        )
+        .map(b => {
+          let sent_time = b.sent_time ? moment(b.sent_time).format('YYYY-MM-DD HH:mm:ss') : null
+          let confirmed_time = b.confirmed_time ? moment(b.confirmed_time).format('YYYY-MM-DD HH:mm:ss') : null
+
+          return { ...b, sent_time, confirmed_time }
+        })
+    },
+    pagination: {
+      get() {
+        return this.$store.getters['notificationHistory/pagination']
+      },
+      set(value) {
+        this.$store.dispatch('notificationHistory/setPagination', value)
+      }
+    },
+    computedHeaders() {
+      return this.headers.filter(h =>
+        !this.$config.customer_views ? h.value != 'customer' : true
+      )
+    },
+    isLoading() {
+      return this.$store.state.notificationHistory.isLoading
+    },
+    refresh() {
+      return this.$store.state.refresh
+    }
+  },
+  watch: {
+    refresh(val) {
+      if (!val) return
+      this.getNotificationsHistory()
+    },
+    pagination: {
+      handler() {
+        this.getNotificationsHistory()
+      },
+      deep: true
+    }
+  },
+  created() {
+    this.getNotificationsHistory()
+  },
+  methods: {
+    getNotificationsHistory() {
+      this.$store.dispatch('notificationHistory/getNotificationHistory')
+    },
+    severityColor(confirmed, sent) {
+      const config = this.$store.getters.getConfig('colors')
+      return config.severity[confirmed ? 'ok' : sent ? 'warning' : 'critical'] || 'white'
+    },
+  }
+}
+</script>
+
+<style></style>

src/router.ts

@@ -84,6 +84,12 @@ export function createRouter(basePath): VueRouter {
         name: 'notificationrules',
         component: () => import(/* webpackChunkName: 'user' */ './views/NotificationRule.vue'),
         meta: {title: 'NotificationRules', requiresAuth: true}
+      }, 
+      {
+        path: '/notificationhistory',
+        name: 'notificationhistory',
+        component: () => import(/* webpackChunkName: 'user' */ './views/NotificationHistory.vue'),
+        meta: {title: 'NotificationHistory', requiresAuth: true}
       },
       {
         path: '/escalationrules',

src/services/api/notificationHistory.service.ts

@@ -0,0 +1,10 @@
+import api from './index'
+
+export default {
+  getNotificationHistory(query: object) {
+    let config = {
+      params: query
+    }
+    return api.get('/notificationhistory', config)
+  },
+}

src/store/index.ts

@@ -5,6 +5,7 @@ import alerts from './modules/alerts.store'
 import heartbeats from './modules/heartbeats.store'
 import blackouts from './modules/blackouts.store'
 import notificationRules from './modules/notificationRule.store'
+import notificationHistory from './modules/notificationHistory.store'
 import escalationRules from './modules/escalationRule.store'
 import notificationChannels from './modules/notificationChannel.store'
 import onCalls from './modules/onCall.store'
@@ -50,6 +51,7 @@ export function createStore(): Store<any> {
       heartbeats,
       blackouts,
       notificationRules,
+      notificationHistory,
       escalationRules,
       notificationChannels,
       onCalls,

src/store/modules/notificationHistory.store.ts

@@ -0,0 +1,73 @@
+import NotificationHistoryApi from '@/services/api/notificationHistory.service'
+
+const namespaced = true
+
+const state = {
+  isLoading: false,
+
+  notification_history: [],
+  pagination: {
+    page: 1,
+    rowsPerPage: 20,
+    sortBy: 'sent_time',
+    descending: true,
+    rowsPerPageItems: [10, 20, 50, 100, 200]
+  }
+}
+
+const mutations = {
+  SET_LOADING(state) {
+    state.isLoading = true
+  },
+  SET_NOTIFICATION_HISTORY (state, [notificationHistory, total, pageSize]) {
+    state.isLoading = false
+    state.notification_history = notificationHistory
+    state.pagination.totalItems = total
+    state.pagination.rowsPerPage = pageSize
+  },
+  RESET_LOADING(state) {
+    state.isLoading = false
+  },
+  SET_PAGINATION(state, pagination) {
+    state.pagination = Object.assign({}, state.pagination, pagination)
+  }
+}
+
+const actions = {
+  getNotificationHistory({commit, state}) {
+    commit('SET_LOADING')
+
+    let params = new URLSearchParams(state.query)
+
+    // add server-side paging
+    params.append('page', state.pagination.page)
+    params.append('page-size', state.pagination.rowsPerPage)
+
+    // add server-side sort
+    params.append('sort-by', (state.pagination.descending ? '-' : '') + state.pagination.sortBy)
+
+    return NotificationHistoryApi.getNotificationHistory(params)
+      .then(({notificationHistory: notificationHistory, total, pageSize}) =>
+        commit('SET_NOTIFICATION_HISTORY', [notificationHistory, total, pageSize])
+      )
+      .catch(() => commit('RESET_LOADING'))
+  },
+
+  setPagination({commit}, pagination) {
+    commit('SET_PAGINATION', pagination)
+  },
+}
+
+const getters = {
+  pagination: state => {
+    return state.pagination
+  },
+}
+
+export default {
+  namespaced,
+  state,
+  mutations,
+  actions,
+  getters
+}

src/views/NotificationHistory.vue

@@ -0,0 +1,17 @@
+<template>
+  <div class="notificationhistory">
+    <notification-history-list />
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator'
+import NotificationHistoryList from '@/components/NotificationHistoryList.vue'
+
+@Component({
+  components: {
+    NotificationHistoryList
+  }
+})
+export default class NotificationHistory extends Vue {}
+</script>