Merge pull request #6978 from Countly/alert-validation

Alert interval validation

Author: widatama

CHANGELOG.md

@@ -1,6 +1,7 @@
 ## Version 25.03.X
 Fixes:
 - [events] Correctly navigate to event groupmin events menu
+- [alerts] Add alert interval validation in the frontend
 
 Enterprise Fixes:
 - [concurrent_users] Fix email check for alert

plugins/alerts/frontend/public/javascripts/countly.views.js

@@ -7,13 +7,29 @@
     countlyCommon,
     app,
     countlyAuth,
+    countlyPlugins,
     CV,
     groupsModel,
     _,
+    VeeValidate,
  */
 (function() {
     var ALERTS_FEATURE_NAME = "alerts";
 
+    VeeValidate.extend('alert_interval', function(inpValue, args) {
+        var min = parseInt(args[0] || 0, 10);
+        var max = parseInt(args[1] || 60, 10);
+        var valid = parseInt(inpValue, 10) >= min && inpValue <= max;
+
+        if (valid) {
+            return {
+                valid: valid,
+            };
+        }
+
+        return 'Alert interval has to be between ' + min + ' and ' + max;
+    });
+
     var AlertDrawer = countlyVue.views.BaseView.extend({
         template: "#alert-drawer",
         mixins: [
@@ -418,7 +434,20 @@
                     );
                 }
                 return this.emailOptions;
-            }
+            },
+            alertIntervalValidationRules: function() {
+                var rule = 'required';
+
+                if (this.$refs.drawerData.editedObject.alertDataType === 'onlineUsers') {
+                    var concurrentUserConfig = countlyPlugins.getConfigsData().concurrent_users || {};
+                    var concurrentAlertIntervalMin = concurrentUserConfig.alert_interval || 3;
+                    var concurrentAlertIntervalMax = Math.min(concurrentAlertIntervalMin + 60, 90);
+
+                    rule += '|alert_interval:' + concurrentAlertIntervalMin + ',' + concurrentAlertIntervalMax;
+                }
+
+                return rule;
+            },
         },
         props: {
             placeholder: { type: String, default: "Select" },

plugins/alerts/frontend/public/stylesheets/vue-main.scss

@@ -143,6 +143,12 @@
     .alert-drawer-trigger-input {
         width: 48px;
     }
+
+    .is-error {
+        .alert-drawer-trigger-input {
+            background-color: #FBECE5 !important;
+        }
+    }
 
     .no-spinner::-webkit-inner-spin-button,
     .no-spinner::-webkit-outer-spin-button {
@@ -335,4 +341,4 @@
     border-radius: 4px;
     background-position: center;
     display: inline-block;
-}
+}