From ca20df7e0d03ae4b193d15af6a48f3be90f8f549 Mon Sep 17 00:00:00 2001
From: sbgap <sb@gapit.io>
Date: Thu, 6 Jun 2024 14:40:51 +0200
Subject: [PATCH 1/2] feat: add notification delay

---
 src/App.vue                                   |   7 +
 src/components/NotificationDelayList.vue      | 159 ++++++++++++++++++
 src/components/NotificationRuleList.vue       |  32 ++++
 src/router.ts                                 |   6 +
 src/services/api/notificationDelay.service.ts |  13 ++
 src/store/index.ts                            |   2 +
 src/store/modules/notificationDelay.store.ts  |  77 +++++++++
 src/views/NotificationDelay.vue               |  15 ++
 8 files changed, 311 insertions(+)
 create mode 100644 src/components/NotificationDelayList.vue
 create mode 100644 src/services/api/notificationDelay.service.ts
 create mode 100644 src/store/modules/notificationDelay.store.ts
 create mode 100644 src/views/NotificationDelay.vue

diff --git a/src/App.vue b/src/App.vue
index b12623f3..20209e44 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -658,6 +658,13 @@ export default {
           perms: 'read:notification_channels',
           show: true
         },
+        {
+          icon: 'av_timer',
+          text: i18n.t('NotificationDelay'),
+          path: '/notificationdelays',
+          perms: 'read:notification_rules',
+          show: true
+        },
         {
           icon: 'notifications',
           text: i18n.t('NotificationRules'),
diff --git a/src/components/NotificationDelayList.vue b/src/components/NotificationDelayList.vue
new file mode 100644
index 00000000..a254608f
--- /dev/null
+++ b/src/components/NotificationDelayList.vue
@@ -0,0 +1,159 @@
+<template>
+  <div>
+    <v-card>
+      <v-card-title class="title">
+        {{ $t('notificationDelays') }}
+      </v-card-title>
+
+      <v-data-table
+        :headers="computedHeaders"
+        :items="notification_delays"
+        :pagination.sync="pagination"
+        :total-items="pagination.totalItems"
+        :rows-per-page-items="pagination.rowsPerPageItems"
+        class="px-2"
+        :loading="false"
+        must-sort
+        sort-icon="arrow_drop_down"
+      >
+        <template
+          slot="items"
+          slot-scope="props"
+        >
+          <td>{{ props.item.alert_id }}</td>
+          <td>{{ props.item.notification_rule_id }}</td>
+          <td>{{ props.item.delay_time }}</td>
+          <td class="text-no-wrap">
+            <v-btn
+              v-has-perms.disable="'write:notification_rules'"
+              icon
+              class="btn--plain mx-0"
+              @click="deleteItem(props.item)"
+            >
+              <v-icon
+                small
+                color="grey darken-3"
+              >
+                delete
+              </v-icon>
+            </v-btn>
+          </td>
+        </template>
+        <template slot="no-data">
+          <v-alert
+            :value="true"
+            color="error"
+            icon="warning"
+          >
+            {{ $t('NoDisplay') }}
+          </v-alert>
+        </template>
+      </v-data-table>
+    </v-card>
+  </div>
+</template>
+
+<script>
+import ListButtonAdd from './lib/ListButtonAdd'
+import moment from 'moment'
+import i18n from '@/plugins/i18n'
+
+export default {
+  data: vm => ({
+    headers: [
+      { text: i18n.t('Alert'), value: 'alert_id' },
+      { text: i18n.t('NotificationRule'), value: 'notification_rule_id' },
+      { text: i18n.t('Time'), value: 'delay_time' },
+    ],
+    timer: null
+  }),
+  computed: {
+    notification_delays() {
+      return this.$store.state.notificationDelays.notification_delays
+        .map(b => {
+          let delay_time = b.delay_time ? moment(b.delay_time).format('YYYY-MM-DD HH:mm:ss') : null
+
+          return Object.assign(
+            { ...b, delay_time },
+          )
+        })
+    },
+    pagination: {
+      get() {
+        return this.$store.getters['notificationDelays/pagination']
+      },
+      set(value) {
+        this.$store.dispatch('notificationDelays/setPagination', value)
+      }
+    },
+    computedHeaders() {
+      return this.headers.filter(h =>
+        !this.$config.customer_views ? h.value != 'customer' : true
+      )
+    },
+    isLoading() {
+      return this.$store.state.notificationDelays.isLoading
+    },
+    refresh() {
+      return this.$store.state.refresh
+    },
+    refreshInterval() {
+      return (
+        this.$store.getters.getPreference('refreshInterval') ||
+        this.$store.getters.getConfig('refresh_interval')
+      )
+    },
+  },
+  watch: {
+    refresh(val) {
+      if (val) return
+      this.getNotificationDelays()
+    },
+    pagination: {
+      handler() {
+        this.getNotificationDelays()
+      },
+      deep: true
+    }
+  },
+  created() {
+    this.cancelTimer()
+    this.refreshDelays()
+  },
+  beforeDestroy() {
+    this.cancelTimer()
+  },
+  methods: {
+    getNotificationDelays() {
+      return this.$store.dispatch('notificationDelays/getNotificationDelays')
+    },
+    deleteItem(item) {
+      confirm(i18n.t('ConfirmDelete')) &&
+        this.$store.dispatch(
+          'notificationDelays/deleteNotificationDelay',
+          item.id
+        )
+    },
+    cancelTimer() {
+      if (this.timer) {
+        clearTimeout(this.timer)
+        this.timer = null
+      }
+    },
+    refreshDelays() {
+      this.getNotificationDelays()
+        .then(() => {
+          this.timer = setTimeout(() => this.refreshDelays(), this.refresh_interval)
+        })
+    },
+    refresh_all() {
+      this.$store.dispatch('set', ['refresh', true])
+      setTimeout(() => {
+        this.$store.dispatch('set', ['refresh', false])
+      }, 300)
+    }
+  }
+}
+</script>
+
+<style></style>
diff --git a/src/components/NotificationRuleList.vue b/src/components/NotificationRuleList.vue
index 82aa03f6..04fae056 100644
--- a/src/components/NotificationRuleList.vue
+++ b/src/components/NotificationRuleList.vue
@@ -199,6 +199,20 @@
                     required
                   />
                 </v-flex>
+                
+                <v-flex xs8>
+                  <v-text-field
+                    v-model.trim="editedItem.timeObj.time"
+                    :label="$t('DelayTime')"
+                  />
+                </v-flex>
+                <v-flex xs4>
+                  <v-select
+                    v-model="editedItem.timeObj.interval"
+                    :items="intervals"
+                    :label="$t('Interval')"
+                  />
+                </v-flex>
 
                 <v-flex
                   xs12
@@ -572,6 +586,7 @@
           <td v-if="$config.customer_views">
             {{ props.item.customer }}
           </td>
+          <td>{{ props.item.delayTime }}</td>
           <td>{{ props.item.name }}</td>
           <td>{{ props.item.environment }}</td>
           <td>{{ props.item.reactivateDate }} {{ props.item.reactivateTime }}</td>
@@ -747,12 +762,14 @@ export default {
   data: vm => ({
     status: ['true', 'false'],
     days: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+    intervals: ['second','minute', 'hour', 'days'],
     search: '',
     dialog: false,
     active_dialog: false,
     headers: [
       { text: i18n.t('Acitve'), value: 'active' },
       { text: i18n.t('Customer'), value: 'customer' },
+      { text: i18n.t('Delay'), value: 'delay' },
       { text: i18n.t('Name'), value: 'Name' },
       { text: i18n.t('Environment'), value: 'environment' },
       { text: i18n.t('Reactivate'), value: 'reactivate' },
@@ -780,6 +797,10 @@ export default {
       customer: null,
       name: null,
       environment: null,
+      timeObj: {
+        time: null,
+        interval: null
+      },
       receivers: [],
       userIds: [],
       groupIds: [],
@@ -811,6 +832,10 @@ export default {
       customer: null,
       name: null,
       environment: null,
+      timeObj: {
+        time: null,
+        interval: null
+      },
       receivers: [],
       userIds: [],
       groupIds: [],
@@ -867,11 +892,16 @@ export default {
             ).slice(-2)}`
           }
           let reactivate = b.reactivate ? moment(b.reactivate) : null
+
           
           return Object.assign(
             { ...b },
             {
               period: period,
+              timeObj: {
+                time: b.delayTime,
+                interval: 'second'
+              },
               text:
                 b.text === null
                   ? ''
@@ -1135,6 +1165,7 @@ export default {
             customer: this.editedItem.customer,
             name: this.editedItem.name,
             environment: this.editedItem.environment,
+            delayTime: this.editedItem.timeObj.time ? `${this.editedItem.timeObj.time} ${this.editedItem.timeObj.interval}` : null,
             receivers: this.editedItem.receivers,
             userIds: this.editedItem.userIds,
             groupIds: this.editedItem.groupIds,
@@ -1167,6 +1198,7 @@ export default {
             id: null,
             startTime: sTimeStr,
             endTime: eTimeStr,
+            delayTime: this.editedItem.timeObj.time ? `${this.editedItem.timeObj.time} ${this.editedItem.timeObj.interval}` : null,
             text: this.editedItem.text.replace(/\{([\w\[\]\. ]*)\}/g, '%($1)s')
           })
         )
diff --git a/src/router.ts b/src/router.ts
index 1d6e480c..88ce2afe 100644
--- a/src/router.ts
+++ b/src/router.ts
@@ -79,6 +79,12 @@ export function createRouter(basePath): VueRouter {
         component: () => import(/* webpackChunkName: 'user' */ './views/Blackouts.vue'),
         meta: {title: 'Blackouts', requiresAuth: true}
       },
+      {
+        path: '/notificationdelays',
+        name: 'notificationdelays',
+        component: () => import(/* webpackChunkName: 'user' */ './views/NotificationDelay.vue'),
+        meta: {title: 'NotificationDelays', requiresAuth: true}
+      },
       {
         path: '/notificationrules',
         name: 'notificationrules',
diff --git a/src/services/api/notificationDelay.service.ts b/src/services/api/notificationDelay.service.ts
new file mode 100644
index 00000000..a2487b2e
--- /dev/null
+++ b/src/services/api/notificationDelay.service.ts
@@ -0,0 +1,13 @@
+import api from './index'
+
+export default {
+  getNotificationDelays(query: object) {
+    let config = {
+      params: {}
+    }
+    return api.get('/notificationdelay', config)
+  },
+  deleteNotificationDelay(id: string) {
+    return api.delete(`/notificationdelay/${id}`)
+  }
+}
diff --git a/src/store/index.ts b/src/store/index.ts
index 49631c88..62b820b2 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -6,6 +6,7 @@ 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 notificationDelays from './modules/notificationDelay.store'
 import escalationRules from './modules/escalationRule.store'
 import notificationChannels from './modules/notificationChannel.store'
 import onCalls from './modules/onCall.store'
@@ -51,6 +52,7 @@ export function createStore(): Store<any> {
       heartbeats,
       blackouts,
       notificationRules,
+      notificationDelays,
       notificationHistory,
       escalationRules,
       notificationChannels,
diff --git a/src/store/modules/notificationDelay.store.ts b/src/store/modules/notificationDelay.store.ts
new file mode 100644
index 00000000..b84369ee
--- /dev/null
+++ b/src/store/modules/notificationDelay.store.ts
@@ -0,0 +1,77 @@
+import NotificationDelayApi from '@/services/api/notificationDelay.service'
+
+const namespaced = true
+
+const state = {
+  isLoading: false,
+
+  notification_delays: [],
+
+  pagination: {
+    page: 1,
+    rowsPerPage: 15,
+    sortBy: 'delay_time',
+    descending: true,
+    rowsPerPageItems: [10, 15, 30, 50, 100, 200]
+  }
+}
+
+const mutations = {
+  SET_LOADING(state) {
+    state.isLoading = true
+  },
+  SET_NOTIFICATION_DELAY(state, [notificationDelays, total, pageSize]) {
+    state.isLoading = false
+    state.notification_delays = notificationDelays
+    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 = {
+  getNotificationDelays({commit, state}) {
+    commit('SET_LOADING')
+    let params = new URLSearchParams()
+
+    // 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 NotificationDelayApi.getNotificationDelays(params)
+      .then(({notificationDelays, total, pageSize}) =>
+        commit('SET_NOTIFICATION_DELAY', [notificationDelays, total, pageSize])
+      )
+      .catch(() => commit('RESET_LOADING'))
+  },
+  deleteNotificationDelay({dispatch, commit}, notificationDelayId) {
+    return NotificationDelayApi.deleteNotificationDelay(notificationDelayId).then(response => {
+      dispatch('getNotificationDelays')
+    })
+  },
+  setPagination({commit}, pagination) {
+    commit('SET_PAGINATION', pagination)
+  }
+}
+
+const getters = {
+  pagination: state => {
+    return state.pagination
+  }
+}
+
+export default {
+  namespaced,
+  state,
+  mutations,
+  actions,
+  getters
+}
diff --git a/src/views/NotificationDelay.vue b/src/views/NotificationDelay.vue
new file mode 100644
index 00000000..23e67052
--- /dev/null
+++ b/src/views/NotificationDelay.vue
@@ -0,0 +1,15 @@
+<template>
+  <div class="notificationdelay">
+    <notification-delay-list />
+  </div>
+</template>
+
+<script>
+import NotificationDelayList from '@/components/NotificationDelayList.vue'
+
+export default {
+  components: {
+    NotificationDelayList
+  },
+}
+</script>

From 9631ad943045e9d0d99de7554572bcc03823aa8d Mon Sep 17 00:00:00 2001
From: sbgap <sb@gapit.io>
Date: Thu, 6 Jun 2024 14:50:27 +0200
Subject: [PATCH 2/2] refactor: change sidebar layout

---
 src/App.vue | 28 ++++++++++++++--------------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 20209e44..6678b267 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -588,6 +588,20 @@ export default {
           perms: 'read:alerts',
           show: true
         },
+        {
+          icon: 'history',
+          text: i18n.t('NotificationHistory'),
+          path: '/notificationhistory',
+          perms: 'read:notification_history',
+          show: true
+        },
+        {
+          icon: 'av_timer',
+          text: i18n.t('NotificationDelay'),
+          path: '/notificationdelays',
+          perms: 'read:notification_rules',
+          show: true
+        },
         {
           icon: 'arrow_upward',
           text: i18n.t('EscalationRules'),
@@ -658,13 +672,6 @@ export default {
           perms: 'read:notification_channels',
           show: true
         },
-        {
-          icon: 'av_timer',
-          text: i18n.t('NotificationDelay'),
-          path: '/notificationdelays',
-          perms: 'read:notification_rules',
-          show: true
-        },
         {
           icon: 'notifications',
           text: i18n.t('NotificationRules'),
@@ -672,13 +679,6 @@ 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'),