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>                                </dd></td> <td><a href="https://github.com/openobserve/openobserve/pull/7571/files#diff-7b426bb23e9ed0250c3877d6d97b099c42b2d20e22ddf4459915381b2233a0a8">+22/-22</a>  </td> </tr> <tr> <td><strong>SelectFolderDropDown.vue</strong><dd><code>Mark SelectFolder label as required</code>                                            </dd></td> <td><a href="https://github.com/openobserve/openobserve/pull/7571/files#diff-11c088754f74fee2ec616bb2e73680410356248c8c05b3817db4924d73bd5d95">+1/-1</a>      </td> </tr> <tr> <td><strong>FullViewContainer.vue</strong><dd><code>Extend FullViewContainer expand behavior</code>                                  </dd></td> <td><a href="https://github.com/openobserve/openobserve/pull/7571/files#diff-c0722446274c88c250042e38b051201b81450cb5da1ee827cd5a4a927424a357">+7/-1</a>      </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>                          </dd></td> <td><a href="https://github.com/openobserve/openobserve/pull/7571/files#diff-39b487d54970cff4a1ccdfbb49a4ccb38f7131bb9d30944ce1c6e86d3f818148">+2/-2</a>      </td> </tr> <tr> <td><strong>PreviewAlert.vue</strong><dd><code>Tweak PreviewAlert container spacing</code>                                          </dd></td> <td><a href="https://github.com/openobserve/openobserve/pull/7571/files#diff-760f5f0a261910f17eb167f81802e8a52477b99a83d2d7fc1aeefc7185801795">+1/-1</a>      </td> </tr> <tr> <td><strong>RealTimeAlert.vue</strong><dd><code>Update RealTimeAlert layout spacing</code>                                            </dd></td> <td><a href="https://github.com/openobserve/openobserve/pull/7571/files#diff-c3ae6b47832eb33f9ca877cc7165d079de14850e5c5d43a227102ba40326b9d8">+4/-4</a>      </td> </tr> <tr> <td><strong>ScheduledAlert.vue</strong><dd><code>Refine ScheduledAlert spacing and styles</code>                                  </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>                                                    </dd></td> <td><a href="https://github.com/openobserve/openobserve/pull/7571/files#diff-23a647aa1acfc95bc726629f0daa54005e3da1ed5b16482ceccef0649f680a74">+6/-3</a>      </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>
2026-11-04 16:09:05 +00:00 · 2025-07-16 13:02:35 +05:30
parent c4a52c6a7d
commit 14360b4e86
10 changed files with 499 additions and 340 deletions
@@ -444,7 +444,8 @@ export class AlertsPage {
        await this.page.waitForTimeout(2000);

        // Close dialog
-        await this.page.locator('div').filter({ hasText: /^closeAdd Conditions$/ }).locator('i').click();
+        //this is modified according to the new dialog structure and new close icon
+        await this.page.locator('#q-portal--dialog--9').getByText('arrow_back_ios_new').click();
        await this.page.waitForTimeout(1000);

        // Submit alert
@@ -0,0 +1,5 @@
+<svg  xmlns="http://www.w3.org/2000/svg" width="24" height="24"  
+fill="#5960B2" viewBox="0 0 24 24" >
+<!--Boxicons v3.0 https://boxicons.com | License  https://docs.boxicons.com/free-->
+<path d="M12 2c-.78 5.16-4.84 9.22-10 10 5.16.78 9.22 4.84 10 10 .78-5.16 4.84-9.22 10-10-5.16-.78-9.22-4.84-10-10" class="b"></path>
+</svg>
@@ -59,21 +59,20 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
    <q-separator />
    <div
      ref="addAlertFormRef"
-      class="q-px-lg q-my-md"
      style="
-        max-height: calc(100vh - 195px);
+        max-height: calc(100vh - 165px);
        overflow: auto;
        scroll-behavior: smooth;
      "
    >
-      <div class="row flex tw-gap-5 items-start" style="width: 100%">
+      <div class="row flex tw-gap-2 items-start" style="width: 100%">
        <div class="col" :class="store.state.theme === 'dark' ? 'dark-mode' : 'light-mode'">
          <q-form class="add-alert-form" ref="addAlertForm" @submit="onSubmit">
            <!-- alerts setup  section -->
            <div
-              class="flex q-mt-lg justify-start items-center q-pb-sm q-col-gutter-md flex-wrap "
+              class="flex tw-mt-2 justify-start items-center q-col-gutter-md flex-wrap "
            >
-            <div class="  q-px-lg tw-w-full row alert-setup-container" style="width: calc(100vw - 600px);">
+            <div class=" tw-w-full row alert-setup-container">
              <AlertsContainer 
                name="query"
                v-model:is-expanded="expandState.alertSetup"
@@ -85,7 +84,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             <div v-show="expandState.alertSetup" class="tw-w-full ">

              <div
-                class="alert-name-input o2-input flex justify-between items-center q-px-lg tw-gap-10"
+                class="alert-name-input o2-input flex justify-between items-center tw-gap-10 tw-pb-3"
                style="padding-top: 12px;"
                data-test="add-alert-name-input-container"
              >
@@ -100,6 +99,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                  outlined
                  filled
                  dense
+                  hide-bottom-space
                  v-bind:readonly="beingUpdated"
                  v-bind:disable="beingUpdated"
                  :rules="[
@@ -111,13 +111,13 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                  ]"
                  tabindex="0"
                />
-                <div class="col">
+                <div class="col" style="height: 62px;">
                  <SelectFolderDropDown
                    :disableDropdown="beingUpdated"
                    :type="'alerts'"
+                    :style="'height: 30px'"
                    @folder-selected="updateActiveFolderId"
                    :activeFolderId="activeFolderId"
-                    :style="'height: 30px'"
                    :class="store.state.theme === 'dark' ? 'input-box-bg-dark' : 'input-box-bg-light'"
                />
                </div>
@@ -126,7 +126,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             </div>

             <div
-                class="flex q-px-lg tw-w-full items-center justify-between row tw-gap-10"
+                class="flex tw-w-full items-center justify-between row tw-gap-10 tw-pb-3"
                style="padding-top: 0px"
                v-show="expandState.alertSetup"
                data-test="add-alert-stream-type-select-container"
@@ -188,7 +188,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                  />
                </div>
              </div>
-              <div  v-if="expandState.alertSetup" class="q-gutter-sm q-px-lg q-py-sm">
+              <div   v-if="expandState.alertSetup" class="tw-flex tw-items-center tw-gap-5">
              <q-radio
                data-test="add-alert-scheduled-alert-radio"
                v-bind:readonly="beingUpdated"
@@ -196,6 +196,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                v-model="formData.is_real_time"
                :checked="formData.is_real_time"
                val="false"
+                dense
                :label="t('alerts.scheduled')"
                class="q-ml-none"
              />
@@ -206,13 +207,12 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                v-model="formData.is_real_time"
                :checked="!formData.is_real_time"
                val="true"
+                dense
                :label="t('alerts.realTime')"
                class="q-ml-none"
              />
            </div>
            </div>
-           
-
            </div>
            

@@ -285,9 +285,9 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.

            <!-- additional setup starts here -->
            <div
-              class="flex q-mt-md justify-start items-center q-pb-sm q-col-gutter-md flex-wrap "
+              class="flex tw-mt-2 justify-start items-center q-pb-sm q-col-gutter-md flex-wrap "
            >
-            <div class="  q-px-lg tw-w-full row alert-setup-container" >
+            <div class=" tw-w-full row alert-setup-container" >

              <AlertsContainer 
                name="advanced"
@@ -297,8 +297,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                subLabel="Go deeper with custom options"
                class="tw-mt-1 tw-w-full col-12"
            />
-            <div class="tw-w-full row q-px-lg" >
-              <div v-if="expandState.advancedSetup" class="q-mt-md tw-w-full">
+            <div class="tw-w-full row" >
+              <div v-if="expandState.advancedSetup" class="tw-mt-2 tw-w-full">
              <variables-input
                class="o2-input"
                :variables="formData.context_attributes"
@@ -381,11 +381,11 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.

        </div>
        <div
-          style="width: 440px; height: 300px; position: sticky; top: 0 "
+          style="width: 420px; height: 300px; position: sticky; top: 0 "
          class=" col-2"
        >
          <preview-alert
-            style="border: 1px solid #ececec; height: 300px; width: 440px;"
+            style="border: 1px solid #ececec; height: 300px; width: 412px;"
            ref="previewAlertRef"
            :formData="formData"
            :query="previewQuery"
@@ -398,7 +398,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
      </div>

    </div>
-    <div class="flex justify-end items-center q-px-lg tw-w-full " :class="store.state.theme === 'dark' ? 'bottom-sticky-dark' : 'bottom-sticky-light'" style="position: sticky;  bottom: 0 !important; top: 0; height: 70px !important;">
+    <div class="flex justify-end items-center q-px-lg " :class="store.state.theme === 'dark' ? 'bottom-sticky-dark' : 'bottom-sticky-light'" style="position: fixed; bottom: 0; left: 0; right: 0; height: 70px !important; z-index: 100;">
      <q-btn
        data-test="add-alert-cancel-btn"
        v-close-popup="true"
@@ -2078,7 +2078,7 @@ export default defineComponent({
 .dark-mode{
  .alert-setup-container{
  background-color: #212121;
-  padding: 12px 12px 24px 12px;
+  padding: 16px 16px 16px 16px;
  margin-left: 24px;
  border-radius: 4px;
  border: 1px solid #343434;
@@ -2098,7 +2098,7 @@ export default defineComponent({
 .light-mode{
  .alert-setup-container{
    background-color: #ffffff;
-    padding: 12px 12px 24px 12px;
+    padding: 16px 16px 16px 16px;
    margin-left: 24px;
    border-radius: 4px;
    border: 1px solid #e6e6e6;
@@ -2152,7 +2152,7 @@ export default defineComponent({
  background-color: #ffffff !important;
 }
 .input-border-dark .q-field__control{
-  border: 1px solid red !important;
+  border: 1px solid #181a1b !important;
 }
 .input-border-light .q-field__control{
  border: 1px solid #d4d4d4 !important;
@@ -3,10 +3,10 @@
      class="tw-py-[2px]"
    >
      <div class="tw-flex tw-justify-between">
-        <div class="tw-flex tw-items-start tw-justify-between full-width q-pl-md ">
+        <div class="tw-flex tw-items-start tw-justify-between full-width ">
        
          <div
-            class="tw-text-[20px] tw-flex tw-items-start" 
+            class="tw-text-[16px] tw-flex tw-items-start" 

          >
          <q-icon
@@ -15,7 +15,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->

 <template>
-  <div class="preview-alert-container q-mt-lg" :class="{'preview-alert-container-light': store.state.theme !== 'dark'}" ref="chartPanelRef" style="height: 100%; position: relative">
+  <div class="preview-alert-container tw-mt-2 " :class="{'preview-alert-container-light': store.state.theme !== 'dark'}" ref="chartPanelRef" style="height: 100%; position: relative">
    <div class="text-bold"
    style="width: 100%; padding: 16px 10px; "
    :style="{ backgroundColor: store.state.theme === 'dark' ? '#212121' : '#ffffff',
@@ -20,7 +20,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.

    <!-- first section -->

-    <div class= " q-mt-sm tw-w-full row alert-setup-container " style=" margin-left: 8px;">
+    <div class= " tw-mt-2 tw-w-full row alert-setup-container " style=" margin-left: 8px;">
    <AlertsContainer 
      name="Alert Settings"
      v-model:is-expanded="expandState.thresholds"
@@ -30,10 +30,10 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
      class="tw-mt-1 tw-w-full col-12"
      @update:is-expanded="()=>emits('update:expandState', expandState)"
    />
-    <div v-if="expandState.thresholds" class="q-px-lg">
+    <div v-if="expandState.thresholds">
    <div class="col-12 flex justify-start items-center q-mt-xs">
              <div
-                class="q-py-sm showLabelOnTop text-bold text-h7 q-pb-md flex items-center"
+                class="q-py-sm showLabelOnTop tw-font-semibold text-h7 q-pb-md flex items-center"
                data-test="add-alert-delay-title"
                style="width: 190px"
              >
@@ -116,10 +116,10 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                </div>
              </div>
    </div>
-    <div class="o2-input flex justify-start items-start q-mt-sm">
+    <div class="o2-input flex justify-start items-start">
              <div
                data-test="add-alert-destination-title"
-                class="text-bold q-pb-sm"
+                class="tw-font-semibold q-pb-sm"
                style="width: 190px"
              >
                {{ t("alerts.destination") + " *" }}
@@ -213,7 +213,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.

   <!-- second section -->

-   <div class=" q-mt-md tw-w-full row alert-setup-container " style=" margin-left: 8px;">
+   <div class=" tw-mt-2 tw-w-full row alert-setup-container " style=" margin-left: 8px;">
    <AlertsContainer 
      name="query"
      v-model:is-expanded="expandState.realTimeMode"
@@ -17,10 +17,13 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 <template>
  <div class="col-12 q-py-sm variables-input "
  :class="{
-    'flex tw-gap-2 items-center tw-w-1/2': variables.length == 0,
+    'flex tw-gap-2 items-center tw-w-full': variables.length == 0,
  }"
  >
-    <div class="q-pb-xs custom-input-label text-bold">Variable
+    <div class="q-pb-xs custom-input-label text-bold">
+      <span>
+        Variable
+      </span>
          <q-btn
          style="color: #A0A0A0;"
              no-caps
@@ -36,7 +39,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
          </q-btn>
        </div>
    <template v-if="!variables.length">
-      <div class="flex justify-between items-center">
+      <div class="flex justify-between items-center tw-ml-auto">

        <q-btn
          data-test="alert-variables-add-btn"
@@ -19,7 +19,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
      <!-- select new folder -->
      <q-select
        v-model="selectedFolder"
-        :label="t('dashboard.selectFolderLabel')"
+        :label="t('dashboard.selectFolderLabel') + ' *'"
        :options="store.state.organizationData.foldersByType[type]?.map((item: any)=> {return {label: item.name, value: item.folderId}})"
        :data-test="`${type}-index-dropdown-stream_type`"
        input-debounce="0"
@@ -6,6 +6,7 @@
    <div class="tw-flex tw-justify-between">
      <div class="tw-flex tw-items-center">
        <q-icon
+          v-if="showExpandIcon"
          name="keyboard_arrow_up"
          @click.stop="expanded = !expanded"
          class="tw-mr-1 tw-cursor-pointer tw-transition-all"
@@ -18,7 +19,7 @@
          size="20px"
        />
        <div
-          @click="expanded = !expanded"
+          @click="showExpandIcon ? expanded = !expanded : null"
          class="tw-text-[14px] tw-font-bold"
          :class="[
            store.state.theme === 'dark'
@@ -68,6 +69,11 @@ const props = defineProps({
    type: String,
    default: "",
  },
+  showExpandIcon: {
+    type: Boolean,
+    default: true,
+    required: false,
+  },
 });

 const emits = defineEmits(["update:isExpanded"]);