openobserve

mirror of https://github.com/openobserve/openobserve.git synced 2026-11-05 00:09:35 +00:00

Files

T

Sai Nikhil 14360b4e86 fix: add alert page UI changes (#7571 )

### **User description**
1. this will reduce the padding all over the page (white space)
2. this will query for the data if multi time range is selected , upto
specific period that user selected not the entire period

___

### **PR Type**
Enhancement, Bug fix


___

### **Description**
- Revamp alert creation page layout and spacing

- Refactor SQL/VRL editors responsiveness

- Add AI generate SQL/VRL buttons

- Prevent wildcard queries before running


___

### **Changes diagram**

```mermaid
flowchart LR
  A["Layout adjustments"] --> B["Editor layout refactor"]
  B --> C["AI generate button addition"]
  C --> D["Query validation guard"]
```


___



### **Changes walkthrough** 📝
<table><thead><tr><th></th><th align="left">Relevant
files</th></tr></thead><tbody><tr><td><strong>Enhancement</strong></td><td><details><summary>3
files</summary><table>
<tr>
<td><strong>AddAlert.vue</strong><dd><code>Update AddAlert layout, logic
and styling</code>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
</dd></td>
<td><a
href="https://github.com/openobserve/openobserve/pull/7571/files#diff-7b426bb23e9ed0250c3877d6d97b099c42b2d20e22ddf4459915381b2233a0a8">+22/-22</a>&nbsp;
</td>

</tr>

<tr>
<td><strong>SelectFolderDropDown.vue</strong><dd><code>Mark SelectFolder
label as required</code>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </dd></td>
<td><a
href="https://github.com/openobserve/openobserve/pull/7571/files#diff-11c088754f74fee2ec616bb2e73680410356248c8c05b3817db4924d73bd5d95">+1/-1</a>&nbsp;
&nbsp; &nbsp; </td>

</tr>

<tr>
<td><strong>FullViewContainer.vue</strong><dd><code>Extend
FullViewContainer expand behavior</code>&nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; </dd></td>
<td><a
href="https://github.com/openobserve/openobserve/pull/7571/files#diff-c0722446274c88c250042e38b051201b81450cb5da1ee827cd5a4a927424a357">+7/-1</a>&nbsp;
&nbsp; &nbsp; </td>

</tr>

</table></details></td></tr><tr><td><strong>Formatting</strong></td><td><details><summary>5
files</summary><table>
<tr>
<td><strong>AlertsContainer.vue</strong><dd><code>Adjust AlertsContainer
spacing and font size</code>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </dd></td>
<td><a
href="https://github.com/openobserve/openobserve/pull/7571/files#diff-39b487d54970cff4a1ccdfbb49a4ccb38f7131bb9d30944ce1c6e86d3f818148">+2/-2</a>&nbsp;
&nbsp; &nbsp; </td>

</tr>

<tr>
<td><strong>PreviewAlert.vue</strong><dd><code>Tweak PreviewAlert
container spacing</code>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; </dd></td>
<td><a
href="https://github.com/openobserve/openobserve/pull/7571/files#diff-760f5f0a261910f17eb167f81802e8a52477b99a83d2d7fc1aeefc7185801795">+1/-1</a>&nbsp;
&nbsp; &nbsp; </td>

</tr>

<tr>
<td><strong>RealTimeAlert.vue</strong><dd><code>Update RealTimeAlert
layout spacing</code>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </dd></td>
<td><a
href="https://github.com/openobserve/openobserve/pull/7571/files#diff-c3ae6b47832eb33f9ca877cc7165d079de14850e5c5d43a227102ba40326b9d8">+4/-4</a>&nbsp;
&nbsp; &nbsp; </td>

</tr>

<tr>
<td><strong>ScheduledAlert.vue</strong><dd><code>Refine ScheduledAlert
spacing and styles</code>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; </dd></td>
<td><a
href="https://github.com/openobserve/openobserve/pull/7571/files#diff-5e143a17ab0fa5d7817f6d9301667fb5597236f27184248c7a71728e85b8d999">+310/-231</a></td>

</tr>

<tr>
<td><strong>VariablesInput.vue</strong><dd><code>Fix VariablesInput
layout width</code>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
</dd></td>
<td><a
href="https://github.com/openobserve/openobserve/pull/7571/files#diff-23a647aa1acfc95bc726629f0daa54005e3da1ed5b16482ceccef0649f680a74">+6/-3</a>&nbsp;
&nbsp; &nbsp; </td>

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

___

> <details> <summary> Need help?</summary><li>Type <code>/help how to
...</code> in the comments thread for any questions about PR-Agent
usage.</li><li>Check out the <a
href="https://qodo-merge-docs.qodo.ai/usage-guide/">documentation</a>
for more information.</li></details>