(feature) Alerts for custom events (#346)

* (feature) Alerts for custom events * added translations & fixed wrong data type being sent (custom_event -> custom_events) * fixed translation key * added missing alert translations --------- Co-authored-by: Blue Mouse <[email protected]>
Swetrix · Sep 10, 2023 · 3d3356d · 3d3356d
1 parent 405432a
commit 3d3356d
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 1 deletion.
diff --git a/app/pages/Project/Alerts/Settings/ProjectAlertsSettings.tsx b/app/pages/Project/Alerts/Settings/ProjectAlertsSettings.tsx
@@ -70,6 +70,7 @@ const ProjectAlertsSettings = ({
     queryCondition: QUERY_CONDITION.GREATER_THAN,
     queryMetric: QUERY_METRIC.PAGE_VIEWS,
     active: true,
+    queryCustomEvent: '',
   })
   const [validated, setValidated] = useState<boolean>(false)
   const [errors, setErrors] = useState<{
@@ -147,6 +148,10 @@ const ProjectAlertsSettings = ({
       allErrors.name = t('alert.noNameError')
     }
 
+    if (form.queryMetric === QUERY_METRIC.CUSTOM_EVENTS && _isEmpty(form.queryCustomEvent)) {
+      allErrors.queryCustomEvent = t('alert.noCustomEventError')
+    }
+
     if (Number.isNaN(_toNumber(form.queryValue))) {
       allErrors.queryValue = t('alert.queryValueError')
     }
@@ -292,6 +297,19 @@ const ProjectAlertsSettings = ({
             }}
           />
         </div>
+        {form.queryMetric === QUERY_METRIC.CUSTOM_EVENTS && (
+          <Input
+            name='queryCustomEvent'
+            id='queryCustomEvent'
+            type='text'
+            label={t('alert.customEvent')}
+            value={form.queryCustomEvent || ''}
+            placeholder={t('alert.customEvent')}
+            className='mt-4'
+            onChange={handleInput}
+            error={beenSubmitted ? errors.queryCustomEvent : null}
+          />
+        )}
         <div className='mt-4'>
           <Select
             id='queryCondition'

diff --git a/app/redux/constants/index.ts b/app/redux/constants/index.ts
@@ -382,6 +382,7 @@ export const QUERY_METRIC: IStringObject = {
   PAGE_VIEWS: 'page_views',
   UNIQUE_PAGE_VIEWS: 'unique_page_views',
   ONLINE_USERS: 'online_users',
+  CUSTOM_EVENTS: 'custom_events',
 }
 
 export const QUERY_CONDITION: IStringObject = {

diff --git a/app/redux/models/IAlerts.ts b/app/redux/models/IAlerts.ts
@@ -11,4 +11,5 @@ export interface IAlerts {
     queryValue: number
     queryTime: keyof typeof QUERY_TIME
     pid: string
+    queryCustomEvent?: string
 }
diff --git a/public/locales/en.json b/public/locales/en.json
@@ -465,6 +465,11 @@
     "showVisitorsInTitle": "Show live visitors in the page title",
     "uiSettings": "UI Settings"
   },
+  "alertsSettings": {
+    "alertCreated": "The alert has been created",
+    "alertUpdated": "The alert has been updated",
+    "alertDeleted": "The alert has been deleted"
+  },
   "dashboard": {
     "newProject": "New project",
     "newCaptchaProject": "New CAPTCHA project",
@@ -512,6 +517,7 @@
   },
   "alert": {
     "create": "Create an alert",
+    "customEvent": "Custom event name",
     "add": "Add Alert",
     "delete": "Delete alert",
 		"noNameError": "Please enter a name for the alert.",
@@ -542,7 +548,8 @@
     "metrics": {
       "page_views": "Page views",
       "unique_page_views": "Unique sessions",
-      "online_users": "Online users"
+      "online_users": "Online users",
+      "custom_events": "Custom events"
     }
   },
   "notFoundPage": {