From fe3111a34df7ff81d3defd86730e529f760bb02f Mon Sep 17 00:00:00 2001
From: Bhargav <BJP232004@GMAIL.COM>
Date: Thu, 29 Aug 2024 13:44:07 +0530
Subject: [PATCH] fix: Alert cloning issues (#4386)

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit


- **New Features**
- Enhanced alert cloning functionality with a structured dialog layout,
including a new back button and dynamic title display.
- Added validation checks for required fields in the alert cloning form
to prevent incomplete submissions.
- Introduced a new localization entry for the "Clone Alert" title,
improving user interface clarity.

- **Bug Fixes**
- Improved handling of the `max_query_range` setting to ensure it always
has a defined value, enhancing configuration robustness.

- **Style**
- Refined button styling and layout adjustments for a more cohesive user
experience in the alert cloning dialog.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Sai Nikhil <nikhil@openobserve.ai>
---
 web/src/components/alerts/AlertList.vue | 83 +++++++++++++++++++++----
 web/src/components/logstream/schema.vue |  2 +
 web/src/locales/languages/en.json       |  1 +
 3 files changed, 74 insertions(+), 12 deletions(-)

diff --git a/web/src/components/alerts/AlertList.vue b/web/src/components/alerts/AlertList.vue
index 899e6a2b7f..053a9d9062 100644
--- a/web/src/components/alerts/AlertList.vue
+++ b/web/src/components/alerts/AlertList.vue
@@ -231,11 +231,29 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       v-model="confirmDelete"
     />
     <template>
-  <q-dialog class="q-pa-md"  v-model="showForm" persistent>
-    <q-card>
-      <q-card-section>
-        <div class="text-h6">Clone Alert</div>
-      </q-card-section>
+  <q-dialog class="q-pa-md "  v-model="showForm" persistent>
+    <q-card class="clone-alert-popup">
+      <div class="row items-center  no-wrap q-mx-md q-my-sm">
+      <div class="flex items-center">
+        <div
+          data-test="add-alert-back-btn"
+          class="flex justify-center items-center q-mr-md cursor-pointer"
+          style="
+            border: 1.5px solid;
+            border-radius: 50%;
+            width: 22px;
+            height: 22px;
+          "
+          title="Go Back"
+          @click="showForm = false"
+        >
+          <q-icon name="arrow_back_ios_new" size="14px" />
+        </div>
+        <div class="text-h6" data-test="clone-alert-title">
+          {{ t("alerts.cloneTitle") }}
+        </div>
+      </div>
+    </div>
       <q-card-section>
         <q-form @submit="submitForm">
           <q-input v-model="toBeCloneAlertName" label="Alert Name" />
@@ -248,18 +266,34 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           <q-select
             v-model="toBeClonestreamName"
             :loading="isFetchingStreams"
+             :disable="!toBeClonestreamType"
             label="Stream Name"
             :options="streamNames"
             @change="updateStreamName"
             @filter="filterStreams"
           />
-          <q-btn type="submit" class="q-ma-md" color="primary" label="Submit" />
-          <q-btn
-            type="button"
-            color="negative"
-            label="Cancel"
-            v-close-popup
-          />
+          <div class="flex justify-center q-mt-lg">
+              <q-btn
+                data-test="add-alert-cancel-btn"
+                v-close-popup="true"
+                class="q-mb-md text-bold"
+                :label="t('alerts.cancel')"
+                text-color="light-text"
+                padding="sm md"
+                no-caps
+              />
+              <q-btn
+                data-test="add-alert-submit-btn"
+                :label="t('alerts.save')"
+                class="q-mb-md text-bold no-border q-ml-md"
+                color="secondary"
+                padding="sm xl"
+                type="submit"
+                no-caps
+              />
+            </div>
+          
+    
         </q-form>
       </q-card-section>
     </q-card>
@@ -598,6 +632,9 @@ export default defineComponent({
     const duplicateAlert = (row : any) =>{
       toBeCloneUUID.value = row.uuid
       toBeCloneAlertName.value = row.name;
+      toBeClonestreamName.value = "";
+      toBeClonestreamType.value = "";
+      
       showForm.value = true;
     }
     const submitForm = () =>{
@@ -611,6 +648,23 @@ export default defineComponent({
         });
         return;
       }
+      if(!toBeClonestreamType.value){
+        $q.notify({
+          type: "negative",
+          message: "Please select stream type ",
+          timeout: 2000,
+        });
+        return;
+      }
+      if(!toBeClonestreamName.value){
+        $q.notify({
+          type: "negative",
+          message: "Please select stream name",
+          timeout: 2000,
+        });
+        return;
+      }
+      
         alertToBeCloned.name = toBeCloneAlertName.value;
         alertToBeCloned.stream_name = toBeClonestreamName.value;
         alertToBeCloned.stream_type = toBeClonestreamType.value;
@@ -803,6 +857,7 @@ export default defineComponent({
     };
     const filterStreams = (val: string, update: any) => {
       streamNames.value = filterColumns(indexOptions.value, val, update)
+
     };
 
     const toggleAlertState = (row: any) => {
@@ -920,6 +975,7 @@ export default defineComponent({
   }
 }
 
+
 .alerts-tabs {
   .q-tabs {
     &--vertical {
@@ -947,4 +1003,7 @@ export default defineComponent({
     }
   }
 }
+.clone-alert-popup{
+  width: 400px;
+}
 </style>
diff --git a/web/src/components/logstream/schema.vue b/web/src/components/logstream/schema.vue
index 08d7e1a94e..2c478d0b0b 100644
--- a/web/src/components/logstream/schema.vue
+++ b/web/src/components/logstream/schema.vue
@@ -706,6 +706,8 @@ export default defineComponent({
       }
       if (Number(maxQueryRange.value) > 0) {
         settings["max_query_range"] = Number(maxQueryRange.value);
+      } else {
+        settings["max_query_range"] = 0;
       }
 
       if (showDataRetention.value) {
diff --git a/web/src/locales/languages/en.json b/web/src/locales/languages/en.json
index 221eba599e..852467d62c 100644
--- a/web/src/locales/languages/en.json
+++ b/web/src/locales/languages/en.json
@@ -787,6 +787,7 @@
     "prom_am": "Alert manager",
     "addTitle": "Add Alert",
     "updateTitle": "Update Alert",
+    "cloneTitle": "Clone Alert",
     "start": "start",
     "pause": "Pause",
     "groupBy": "Group by",