From 3d44ec8feffd3bc57198c775e9761d090fb2aaca Mon Sep 17 00:00:00 2001
From: Sai Nikhil <nikhil@openobserve.ai>
Date: Wed, 13 Aug 2025 16:00:27 +0530
Subject: [PATCH] fix: show error for threshold while user provides invalid
 input (#7990)

### **User description**
1. This PR fixes the issue in add alert page when user tries to provide
invalid input for threshold it was showing under the input , it should
show below the input


___

### **PR Type**
Bug fix


___

### **Description**
- Fix threshold error message positioning

- Treat empty silence input as invalid

- Standardize undefined/null checks with strict equality

- Remove absolute positioning from threshold error


___

### Diagram Walkthrough


```mermaid
flowchart LR
  RT["RealTimeAlert.vue validation"] -- add '' check --> RTERR["Show 'Field is required!'"]
  SA1["ScheduledAlert.vue threshold error"] -- remove absolute --> SAERR["Inline error display"]
  SA2["ScheduledAlert.vue silence validation"] -- strict null/undef + '' --> SAERR2["Consistent required error"]
```



<details> <summary><h3> File Walkthrough</h3></summary>

<table><thead><tr><th></th><th align="left">Relevant
files</th></tr></thead><tbody><tr><td><strong>Bug
fix</strong></td><td><table>
<tr>
  <td>
    <details>
<summary><strong>RealTimeAlert.vue</strong><dd><code>Add empty-string
check to silence validation</code>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </dd></summary>
<hr>

web/src/components/alerts/RealTimeAlert.vue

<ul><li>Validate <code>silence</code> also for empty string<br> <li>
Ensure required error shows when input blank</ul>


</details>


  </td>
<td><a
href="https://github.com/openobserve/openobserve/pull/7990/files#diff-c3ae6b47832eb33f9ca877cc7165d079de14850e5c5d43a227102ba40326b9d8">+1/-1</a>&nbsp;
&nbsp; &nbsp; </td>

</tr>

<tr>
  <td>
    <details>
<summary><strong>ScheduledAlert.vue</strong><dd><code>Improve threshold
and silence error handling</code>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </dd></summary>
<hr>

web/src/components/alerts/ScheduledAlert.vue

<ul><li>Remove absolute class from threshold error<br> <li> Add null
check in silence validation<br> <li> Use strict equality for
undefined/null checks<br> <li> Keep empty-string invalid for
silence</ul>


</details>


  </td>
<td><a
href="https://github.com/openobserve/openobserve/pull/7990/files#diff-5e143a17ab0fa5d7817f6d9301667fb5597236f27184248c7a71728e85b8d999">+2/-2</a>&nbsp;
&nbsp; &nbsp; </td>

</tr>
</table></td></tr></tr></tbody></table>

</details>

___
---
 web/src/components/alerts/RealTimeAlert.vue  | 2 +-
 web/src/components/alerts/ScheduledAlert.vue | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/web/src/components/alerts/RealTimeAlert.vue b/web/src/components/alerts/RealTimeAlert.vue
index d316d1ef52..b2455bb011 100644
--- a/web/src/components/alerts/RealTimeAlert.vue
+++ b/web/src/components/alerts/RealTimeAlert.vue
@@ -113,7 +113,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   </div>
                   <div
                     data-test="add-alert-delay-error"
-                    v-if="triggerData.silence < 0 || triggerData.silence === undefined || triggerData.silence === null"
+                    v-if="triggerData.silence < 0 || triggerData.silence === undefined || triggerData.silence === null || triggerData.silence === ''"
                     class="text-red-8 q-pt-xs q-field--error"
                     style="font-size: 11px; line-height: 12px"
                   >
diff --git a/web/src/components/alerts/ScheduledAlert.vue b/web/src/components/alerts/ScheduledAlert.vue
index f368904371..02f539017b 100644
--- a/web/src/components/alerts/ScheduledAlert.vue
+++ b/web/src/components/alerts/ScheduledAlert.vue
@@ -370,7 +370,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               <div
                 data-test="scheduled-alert-threshold-error-text"
                 v-if="!triggerData.operator || !Number(triggerData.threshold)"
-                class="text-red-8 q-pt-xs absolute"
+                class="text-red-8 q-pt-xs"
                 style="font-size: 11px; line-height: 12px"
               >
                 Field is required!
@@ -756,7 +756,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   </div>
                   <div
                     data-test="add-alert-delay-error"
-                  v-if="triggerData.silence < 0 || triggerData.silence == undefined || triggerData.silence == ''"
+                  v-if="triggerData.silence < 0 || triggerData.silence === undefined || triggerData.silence === null || triggerData.silence === ''"
                     class="text-red-8 q-pt-xs"
                     style="font-size: 11px; line-height: 12px"
                   >