Update:Notifications onTest for testing and parse title/body template #…

…996

client/components/cards/NotificationCard.vue

@@ -1,17 +1,22 @@
 <template>
- <div class="w-full border border-white border-opacity-10 rounded-xl p-4" :class="notification.enabled ? 'bg-primary bg-opacity-25' : 'bg-error bg-opacity-5'">
+ <div class="w-full border border-white border-opacity-10 rounded-xl p-4 my-2" :class="notification.enabled ? 'bg-primary bg-opacity-25' : 'bg-error bg-opacity-5'">
  <div class="flex items-center">
- <p class="text-lg font-semibold">{{ notification.eventName }}</p>
+ <p class="text-lg font-semibold">{{ eventName }}</p>
  <div class="flex-grow" />
 
- <ui-btn v-if="notification.enabled" :loading="sendingTest" small class="mr-2" @click.stop="sendTestClick">Test</ui-btn>
+ <ui-btn v-if="eventName === 'onTest' && notification.enabled" :loading="testing" small class="mr-2" @click.stop="fireTestEventAndSucceed">Fire onTest Event</ui-btn>
+ <ui-btn v-if="eventName === 'onTest' && notification.enabled" :loading="testing" small class="mr-2" color="red-600" @click.stop="fireTestEventAndFail">Fire & Fail</ui-btn>
+ <ui-btn v-else-if="notification.enabled" :loading="sendingTest" small class="mr-2" @click.stop="sendTestClick">Test</ui-btn>
  <ui-btn v-else :loading="enabling" small color="success" class="mr-2" @click="enableNotification">Enable</ui-btn>
 
  <ui-icon-btn bg-color="warning" :size="7" icon-font-size="1.2rem" icon="edit" class="mr-2" @click="editNotification" />
  <ui-icon-btn bg-color="error" :size="7" icon-font-size="1.2rem" icon="delete" @click="deleteNotificationClick" />
  </div>
  <div class="pt-4">
- <p class="text-gray-300 text-sm">{{ notification.urls.join(', ') }}</p>
+ <p class="text-gray-300 text-sm mb-2">{{ notification.urls.join(', ') }}</p>
+
+ <p v-if="lastFiredAt && lastAttemptFailed" class="text-red-300 text-xs">Last attempt failed {{ $dateDistanceFromNow(lastFiredAt) }} ({{ numConsecutiveFailedAttempts }} attempt{{ numConsecutiveFailedAttempts === 1 ? '' : 's' }})</p>
+ <p v-else-if="lastFiredAt" class="text-gray-400 text-xs">Last fired {{ $dateDistanceFromNow(lastFiredAt) }}</p>
  </div>
  </div>
 </template>
@@ -28,14 +33,50 @@ export default {
  return {
  sendingTest: false,
  enabling: false,
- deleting: false
+ deleting: false,
+ testing: false
+ }
+ },
+ computed: {
+ eventName() {
+ return this.notification ? this.notification.eventName : null
+ },
+ lastFiredAt() {
+ return this.notification ? this.notification.lastFiredAt : null
+ },
+ lastAttemptFailed() {
+ return this.notification ? this.notification.lastAttemptFailed : null
+ },
+ numConsecutiveFailedAttempts() {
+ return this.notification ? this.notification.numConsecutiveFailedAttempts : null
  }
  },
- computed: {},
  methods: {
+ fireTestEventAndFail() {
+ this.fireTestEvent(true)
+ },
+ fireTestEventAndSucceed() {
+ this.fireTestEvent(false)
+ },
+ fireTestEvent(intentionallyFail = false) {
+ this.testing = true
+ this.$axios
+ .$get(`/api/notifications/test?fail=${intentionallyFail ? 1 : 0}`)
+ .then(() => {
+ this.$toast.success('Triggered onTest Event')
+ })
+ .catch((error) => {
+ console.error('Failed', error)
+ const errorMsg = error.response ? error.response.data : null
+ this.$toast.error(`Failed: ${errorMsg}` || 'Failed to trigger onTest event')
+ })
+ .finally(() => {
+ this.testing = false
+ })
+ },
  sendTestClick() {
  const payload = {
- message: `Send a test notification to event ${this.notification.eventName}?`,
+ message: `Send a test notification to event ${this.eventName}?`,
  callback: (confirmed) => {
  if (confirmed) {
  this.sendTest()

client/components/modals/notification/NotificationEditModal.vue

@@ -6,7 +6,7 @@
  </div>
  </template>
  <form @submit.prevent="submitForm">
- <div class="px-4 w-full text-sm py-6 rounded-lg bg-bg shadow-lg border border-black-300">
+ <div class="p-4 w-full text-sm rounded-lg bg-bg shadow-lg border border-black-300">
  <div class="w-full p-8">
  <ui-dropdown v-model="newNotification.eventName" label="Notification Event" :items="eventOptions" class="mb-4" @input="eventOptionUpdated" />
 
@@ -16,7 +16,7 @@
 
  <ui-textarea-with-label v-model="newNotification.bodyTemplate" label="Body Template" class="mb-2" />
 
- <div class="flex pt-4">
+ <div class="flex items-center pt-4">
  <div class="flex items-center">
  <ui-toggle-switch v-model="newNotification.enabled" />
  <p class="text-lg pl-2">Enabled</p>
@@ -25,105 +25,6 @@
  <ui-btn color="success" type="submit">Submit</ui-btn>
  </div>
  </div>
- <!-- <div class="w-full p-8">
- <div class="flex py-2">
- <div class="w-1/2 px-2">
- <ui-text-input-with-label v-model="newUser.username" label="Username" />
- </div>
- <div class="w-1/2 px-2">
- <ui-text-input-with-label v-if="!isEditingRoot" v-model="newUser.password" :label="isNew ? 'Password' : 'Change Password'" type="password" />
- </div>
- </div>
- <div v-show="!isEditingRoot" class="flex py-2">
- <div class="px-2 w-52">
- <ui-dropdown v-model="newUser.type" label="Account Type" :disabled="isEditingRoot" :items="accountTypes" @input="userTypeUpdated" />
- </div>
- <div class="flex-grow" />
- <div class="flex items-center pt-4 px-2">
- <p class="px-3 font-semibold" :class="isEditingRoot ? 'text-gray-300' : ''">Is Active</p>
- <ui-toggle-switch v-model="newUser.isActive" :disabled="isEditingRoot" />
- </div>
- </div>
-
- <div v-if="!isEditingRoot && newUser.permissions" class="w-full border-t border-b border-black-200 py-2 px-3 mt-4">
- <p class="text-lg mb-2 font-semibold">Permissions</p>
- <div class="flex items-center my-2 max-w-md">
- <div class="w-1/2">
- <p>Can Download</p>
- </div>
- <div class="w-1/2">
- <ui-toggle-switch v-model="newUser.permissions.download" />
- </div>
- </div>
-
- <div class="flex items-center my-2 max-w-md">
- <div class="w-1/2">
- <p>Can Update</p>
- </div>
- <div class="w-1/2">
- <ui-toggle-switch v-model="newUser.permissions.update" />
- </div>
- </div>
-
- <div class="flex items-center my-2 max-w-md">
- <div class="w-1/2">
- <p>Can Delete</p>
- </div>
- <div class="w-1/2">
- <ui-toggle-switch v-model="newUser.permissions.delete" />
- </div>
- </div>
-
- <div class="flex items-center my-2 max-w-md">
- <div class="w-1/2">
- <p>Can Upload</p>
- </div>
- <div class="w-1/2">
- <ui-toggle-switch v-model="newUser.permissions.upload" />
- </div>
- </div>
-
- <div class="flex items-center my-2 max-w-md">
- <div class="w-1/2">
- <p>Can Access Explicit Content</p>
- </div>
- <div class="w-1/2">
- <ui-toggle-switch v-model="newUser.permissions.accessExplicitContent" />
- </div>
- </div>
-
- <div class="flex items-center my-2 max-w-md">
- <div class="w-1/2">
- <p>Can Access All Libraries</p>
- </div>
- <div class="w-1/2">
- <ui-toggle-switch v-model="newUser.permissions.accessAllLibraries" @input="accessAllLibrariesToggled" />
- </div>
- </div>
-
- <div v-if="!newUser.permissions.accessAllLibraries" class="my-4">
- <ui-multi-select-dropdown v-model="newUser.librariesAccessible" :items="libraryItems" label="Libraries Accessible to User" />
- </div>
-
- <div class="flex items-cen~ter my-2 max-w-md">
- <div class="w-1/2">
- <p>Can Access All Tags</p>
- </div>
- <div class="w-1/2">
- <ui-toggle-switch v-model="newUser.permissions.accessAllTags" @input="accessAllTagsToggled" />
- </div>
- </div>
- <div v-if="!newUser.permissions.accessAllTags" class="my-4">
- <ui-multi-select-dropdown v-model="newUser.itemTagsAccessible" :items="itemTags" label="Tags Accessible to User" />
- </div>
- </div>
-
- <div class="flex pt-4 px-2">
- <ui-btn v-if="isEditingRoot" to="/account">Change Root Password</ui-btn>
- <div class="flex-grow" />
- <ui-btn color="success" type="submit">Submit</ui-btn>
- </div>
- </div> -->
  </div>
  </form>
  </modals-modal>
@@ -195,6 +96,11 @@ export default {
  if (this.$refs.modal) this.$refs.modal.setHide()
  },
  submitForm() {
+ if (!this.newNotification.urls.length) {
+ this.$toast.error('Must enter an Apprise URL')
+ return
+ }
+
  if (this.isNew) {
  this.submitCreate()
  } else {
@@ -263,11 +169,12 @@ export default {
  libraryId: null,
  eventName: 'onTest',
  urls: [],
- titleTemplate: 'Test Title',
- bodyTemplate: 'Test Body',
+ titleTemplate: '',
+ bodyTemplate: '',
  enabled: true,
  type: null
  }
+ this.eventOptionUpdated()
  }
  }
  },

client/pages/config/notifications.vue

@@ -59,6 +59,15 @@ export default {
  this.selectedNotification = null
  this.showEditModal = true
  },
+ validateAppriseApiUrl() {
+ try {
+ return new URL(this.appriseApiUrl)
+ } catch (error) {
+ console.log('URL error', error)
+ this.$toast.error(error.message)
+ return false
+ }
+ },
  submitForm() {
  if (this.notificationSettings && this.notificationSettings.appriseApiUrl == this.appriseApiUrl) {
  this.$toast.info('No update necessary')
@@ -69,7 +78,10 @@ export default {
  this.$refs.apiUrlInput.blur()
  }
 
- // TODO: Validate apprise api url
+ const isValid = this.validateAppriseApiUrl()
+ if (!isValid) {
+ return
+ }
 
  const updatePayload = {
  appriseApiUrl: this.appriseApiUrl || null
@@ -99,14 +111,25 @@ export default {
  if (!notificationResponse) {
  return
  }
- this.notificationSettings = notificationResponse.settings
  this.notificationData = notificationResponse.data
- this.appriseApiUrl = this.notificationSettings.appriseApiUrl
- this.notifications = this.notificationSettings.notifications || []
+ this.setNotificationSettings(notificationResponse.settings)
+ },
+ setNotificationSettings(notificationSettings) {
+ this.notificationSettings = notificationSettings
+ this.appriseApiUrl = notificationSettings.appriseApiUrl
+ this.notifications = notificationSettings.notifications || []
+ },
+ notificationsUpdated(notificationSettings) {
+ console.log('Notifications updated', notificationSettings)
+ this.setNotificationSettings(notificationSettings)
  }
  },
  mounted() {
  this.init()
+ this.$root.socket.on('notifications_updated', this.notificationsUpdated)
+ },
+ beforeDestroy() {
+ this.$root.socket.off('notifications_updated', this.notificationsUpdated)
  }
 }
 </script>

server/Server.js

@@ -65,7 +65,7 @@ class Server {
  this.auth = new Auth(this.db)
 
  // Managers
- this.notificationManager = new NotificationManager(this.db)
+ this.notificationManager = new NotificationManager(this.db, this.emitter.bind(this))
  this.backupManager = new BackupManager(this.db, this.emitter.bind(this))
  this.logManager = new LogManager(this.db)
  this.cacheManager = new CacheManager()

server/controllers/NotificationController.js

@@ -1,4 +1,5 @@
 const Logger = require('../Logger')
+const { version } = require('../../package.json')
 
 class NotificationController {
  constructor() { }
@@ -22,6 +23,11 @@ class NotificationController {
  res.json(this.notificationManager.getData())
  }
 
+ async fireTestEvent(req, res) {
+ await this.notificationManager.triggerNotification('onTest', { version: `v${version}` }, req.query.fail === '1')
+ res.sendStatus(200)
+ }
+
  async createNotification(req, res) {
  const success = this.db.notificationSettings.createNotification(req.body)
 
@@ -40,17 +46,18 @@ class NotificationController {
 
  async updateNotification(req, res) {
  const success = this.db.notificationSettings.updateNotification(req.body)
- console.log('Update notification', success, req.body)
  if (success) {
  await this.db.updateEntity('settings', this.db.notificationSettings)
  }
  res.json(this.db.notificationSettings)
  }
 
- sendNotificationTest(req, res) {
- if (!this.db.notificationSettings.isUsable) return res.status(500).send('Apprise is not configured')
- this.notificationManager.onTest()
- res.sendStatus(200)
+ async sendNotificationTest(req, res) {
+ if (!this.db.notificationSettings.isUseable) return res.status(500).send('Apprise is not configured')
+
+ const success = await this.notificationManager.sendTestNotification(req.notification)
+ if (success) res.sendStatus(200)
+ else res.sendStatus(500)
  }
 
  middleware(req, res, next) {