fix: updated alerts preview and query validation time-range to 2mins (#4392)

fixed #4389 
Make wrap columns false by default #4344 

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


- **New Features**
- Enhanced alert data retrieval to focus on the last 2 minutes instead
of the last 15 minutes.
- Improved refresh behavior for alerts, allowing for more frequent
updates based on a new timing threshold.

- **Bug Fixes**
- Enhanced error handling in log management to prevent runtime
exceptions when accessing potentially undefined properties.
- Improved robustness in local storage handling to ensure reliable value
assignments.

- **Refactor**
- Streamlined logic and data structures in various components for better
clarity and maintainability.

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

web/src/components/alerts/AddAlert.vue

@@ -750,7 +750,6 @@ export default defineComponent({
       isFetchingStreams.value = true;
       return getStreams(formData.value.stream_type, false)
         .then((res: any) => {
-
           streams.value[formData.value.stream_type] = res.list;
           schemaList.value = res.list;
           indexOptions.value = res.list.map((data: any) => {
@@ -1120,6 +1119,9 @@ export default defineComponent({
 
       delete query.aggs;
 
+      // We get 15 minutes time range for the query, so reducing it by 13 minutes to get 2 minute data
+      query.query.start_time = query.query.start_time + 780000000;
+
       query.query.sql = formData.value.query_condition.sql;
 
       if (formData.value.query_condition.vrl_function)

web/src/components/alerts/PreviewAlert.vue

@@ -165,8 +165,8 @@ const refreshData = () => {
   const relativeTime = props.formData.trigger_condition.period;
 
   const endTime = new Date().getTime() * 1000;
-  let new_relative_time = 5;
-  if (relativeTime < 5) {
+  let new_relative_time = 2;
+  if (relativeTime < 2) {
     new_relative_time = relativeTime;
   }
 
@@ -241,7 +241,7 @@ defineExpose({ refreshData });
 </script>
 
 <style scoped>
-.sql-preview{
+.sql-preview {
   display: flex;
   justify-content: center;
   align-items: center;

web/src/composables/useLogs.ts

@@ -3053,7 +3053,7 @@ const useLogs = () => {
           if (field != store.state.zoConfig.timestamp_column) {
             let foundKey, foundValue;
 
-            if (sizes.length > 0) {
+            if (sizes?.length > 0) {
               Object.keys(sizes[0]).forEach((key) => {
                 const trimmedKey = key
                   .replace(/^--(header|col)-/, "")

web/src/plugins/logs/SearchBar.vue

@@ -1167,20 +1167,22 @@ export default defineComponent({
       data.forEach((item) => {
         if (item.expr && item.expr.column) {
           columnNames.push(item.expr.column);
-        } 
-        else if (item.expr && item.expr.args && item.expr.args.expr) {
+        } else if (item.expr && item.expr.args && item.expr.args.expr) {
           if (item.expr.args.expr.column) {
             columnNames.push(item.expr.args.expr.column);
           } else if (item.expr.args.expr.value) {
             columnNames.push(item.expr.args.expr.value);
           }
-        }
-        else if(item.expr && item.expr.name && item.expr.type ==="function"){
+        } else if (
+          item.expr &&
+          item.expr.name &&
+          item.expr.type === "function"
+        ) {
           item.expr.args.value.map((val) => {
             if (val.type === "column_ref") {
               columnNames.push(val.column);
             }
-          })
+          });
         }
       });
       return columnNames;
@@ -1246,7 +1248,6 @@ export default defineComponent({
                 }
               }
               useLocalInterestingFields(localFields);
-
             }
           }
 
@@ -1740,7 +1741,10 @@ export default defineComponent({
 
             // Add colOrder to searchObj if saved view don't have colOrder property in resultGrid
             if (!extractedObj.data.resultGrid.hasOwnProperty("colOrder")) {
-              searchObj.data.resultGrid.colOrder = [];
+              extractedObj.data.resultGrid.colOrder = {};
+              extractedObj.data.resultGrid.colOrder[
+                extractedObj.data.stream.selectedStream
+              ] = [];
             }
 
             if (extractedObj.data?.timezone) {

web/src/plugins/logs/TenstackTable.vue

@@ -487,7 +487,7 @@ const table = useVueTable({
   enableColumnResizing: true,
   onStateChange: async (state) => {
     await nextTick();
-    tableRowSize.value = tableBodyRef.value.children[0]?.scrollWidth;
+    tableRowSize.value = tableBodyRef?.value?.children[0]?.scrollWidth;
   },
 });
 

web/src/utils/zincutils.ts

@@ -45,6 +45,7 @@ const useLocalStorage = (
     const value = ref(defaultValue);
     const read = () => {
       const v = window.localStorage.getItem(key);
+
       if (v != null && isJSONValue === true) value.value = JSON.parse(v);
       else if (v != null) value.value = v;
       else value.value = null;
@@ -79,10 +80,10 @@ const useLocalStorage = (
     if (
       window.localStorage.getItem(key) == null &&
       !isDelete &&
-      defaultValue != ""
+      defaultValue !== ""
     )
       write();
-    else if (value.value != defaultValue && defaultValue != "") write();
+    else if (value.value !== defaultValue && defaultValue !== "") write();
 
     const remove = () => {
       window.localStorage.removeItem(key);