feat(search): enhance filter value handling

- Added `checkFilterValue` function to validate and update filter values
  in `SearchStoreLive`.
- Updated `FilterItem` to handle undefined `value` gracefully by providing
  a default empty array.

These changes improve robustness in filter value processing.

frontend/app/components/Dashboard/components/WidgetWrapper/WidgetWrapperNew.tsx

@@ -83,6 +83,7 @@ function WidgetWrapperNew(props: Props & RouteComponentProps) {
   });
 
   const onChartClick = () => {
+    dashboardStore.setDrillDownPeriod(dashboardStore.period);
     // if (!isWidget || isPredefined) return;
     props.history.push(
       withSiteId(

frontend/app/mstore/dashboardStore.ts

@@ -34,7 +34,7 @@ export default class DashboardStore {
 
   comparisonFilter: Filter = new Filter();
 
-  drillDownPeriod: Record<string, any> = Period({ rangeName: LAST_7_DAYS });
+  drillDownPeriod: Record<string, any> = Period({ rangeName: LAST_24_HOURS });
 
   selectedDensity: number = 7; // depends on default drilldown, 7 points here!!!;
 

frontend/app/mstore/searchStoreLive.ts

@@ -220,6 +220,7 @@ class SearchStoreLive {
   updateFilter = (index: number, search: Partial<IFilter>) => {
     const newFilters = this.instance.filters.map((_filter: any, i: any) => {
       if (i === index) {
+        search.value = checkFilterValue(search.value);
         return search;
       }
       return _filter;

frontend/app/mstore/types/filterItem.ts

@@ -157,7 +157,7 @@ export default class FilterItem {
     const json = {
       type: isMetadata ? FilterKey.METADATA : this.key,
       isEvent: Boolean(this.isEvent),
-      value: this.value.map((i: any) => (i ? i.toString() : '')),
+      value: this.value?.map((i: any) => (i ? i.toString() : '')) || [],
       operator: this.operator,
       source: isMetadata ? this.key.replace(/^_/, '') : this.source,
       sourceOperator: this.sourceOperator,

frontend/app/mstore/types/search.ts

@@ -7,6 +7,7 @@ import Filter, { IFilter } from 'App/mstore/types/filter';
 import FilterItem from 'App/mstore/types/filterItem';
 import { makeAutoObservable, observable } from 'mobx';
 import { LAST_24_HOURS, LAST_30_DAYS, LAST_7_DAYS } from 'Types/app/period';
+import { roundToNextMinutes } from '@/utils';
 
 // @ts-ignore
 const rangeValue = DATE_RANGE_VALUES.LAST_24_HOURS;
@@ -177,6 +178,7 @@ export default class Search {
       js.rangeValue,
       js.startDate,
       js.endDate,
+      15,
     );
     js.startDate = startDate;
     js.endDate = endDate;
@@ -190,12 +192,11 @@ export default class Search {
     rangeName: string,
     customStartDate: number,
     customEndDate: number,
-  ): {
-    startDate: number;
-    endDate: number;
-  } {
+    roundMinutes?: number,
+  ): { startDate: number; endDate: number } {
     let endDate = new Date().getTime();
     let startDate: number;
+    const minutes = roundMinutes || 15;
 
     switch (rangeName) {
       case LAST_7_DAYS:
@@ -206,9 +207,7 @@ export default class Search {
         break;
       case CUSTOM_RANGE:
         if (!customStartDate || !customEndDate) {
-          throw new Error(
-            'Start date and end date must be provided for CUSTOM_RANGE.',
-          );
+          throw new Error('Start date and end date must be provided for CUSTOM_RANGE.');
         }
         startDate = customStartDate;
         endDate = customEndDate;
@@ -218,10 +217,12 @@ export default class Search {
         startDate = endDate - 24 * 60 * 60 * 1000;
     }
 
-    return {
-      startDate,
-      endDate,
-    };
+    if (rangeName !== CUSTOM_RANGE) {
+      startDate = roundToNextMinutes(startDate, minutes);
+      endDate = roundToNextMinutes(endDate, minutes);
+    }
+
+    return { startDate, endDate };
   }
 
   fromJS({ eventsOrder, filters, events, custom, ...filterData }: any) {

frontend/app/types/app/period.js

@@ -1,5 +1,6 @@
 import { DateTime, Interval, Settings } from 'luxon';
 import Record from 'Types/Record';
+import { roundToNextMinutes } from '@/utils';
 
 export const LAST_30_MINUTES = 'LAST_30_MINUTES';
 export const TODAY = 'TODAY';
@@ -30,7 +31,9 @@ function getRange(rangeName, offset) {
         now.startOf('day'),
       );
     case LAST_24_HOURS:
-      return Interval.fromDateTimes(now.minus({ hours: 24 }), now);
+      const mod = now.minute % 15;
+      const next = now.plus({ minutes: mod === 0 ? 15 : 15 - mod }).startOf('minute');
+      return Interval.fromDateTimes(next.minus({ hours: 24 }), next);
     case LAST_30_MINUTES:
       return Interval.fromDateTimes(
         now.minus({ minutes: 30 }).startOf('minute'),

frontend/app/utils/index.ts

@@ -613,3 +613,14 @@ export function exportAntCsv(tableColumns, tableData, filename = 'table.csv') {
   const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
   saveAsFile(blob, filename);
 }
+
+export function roundToNextMinutes(timestamp: number, minutes: number): number {
+  const date = new Date(timestamp);
+  date.setSeconds(0, 0);
+  const currentMinutes = date.getMinutes();
+  const remainder = currentMinutes % minutes;
+  if (remainder !== 0) {
+    date.setMinutes(currentMinutes + (minutes - remainder));
+  }
+  return date.getTime();
+}