OU-1264: address CodeRabbit comments

Author: iNecas

web/src/components/ols-tool-ui/helpers/AddToDashboardButton.tsx

@@ -73,13 +73,15 @@ export const AddToDashboardButton: React.FC<AddToDashboardButtonProps> = ({
 
   return (
     <InfoTooltip description={t('Add To Dashboard')}>
-      <HeaderIconButton aria-label="panel description" size="small">
+      <HeaderIconButton
+        aria-label={t('Add to dashboard')}
+        size="small"
+        onClick={addToPersesDashboard}
+      >
         <ViewGridPlusIcon
-          aria-describedby="info-tooltip"
-          aria-hidden={false}
+          aria-hidden={true}
           fontSize="inherit"
           sx={{ color: (theme) => theme.palette.text.secondary }}
-          onClick={addToPersesDashboard}
         />
       </HeaderIconButton>
     </InfoTooltip>

web/src/components/ols-tool-ui/helpers/OlsToolUIPersesWrapper.tsx

@@ -23,17 +23,19 @@ interface OlsToolUIPersesWrapperProps {
   children: React.ReactNode;
   height?: string;
   initialTimeRange?: TimeRangeValue;
+  initialTimeZone?: string;
 }
 
 export const OlsToolUIPersesWrapper: React.FC<OlsToolUIPersesWrapperProps> = ({
   children,
   initialTimeRange = { pastDuration: '1h' as DurationString },
   height = '300px',
+  initialTimeZone = 'UTC',
 }) => {
   return (
     <QueryClientProvider client={queryClient}>
       <PersesWrapper project={null}>
-        <TimeZoneProvider timeZone="UTC">
+        <TimeZoneProvider timeZone={initialTimeZone}>
           <TimeRangeProviderBasic initialTimeRange={initialTimeRange}>
             <VariableProvider>
               <PersesPrometheusDatasourceWrapper queries={[]}>

web/src/components/ols-tool-ui/helpers/useTimeRange.ts

@@ -8,7 +8,8 @@ import { isDurationString, parseDurationString } from '@perses-dev/core';
 const parseTimeExpr = (expr: string, now: Date): Date | undefined => {
   const match = expr.match(/^NOW(?:-(.+))?$/);
   if (!match) {
-    return new Date(expr);
+    const parsed = new Date(expr);
+    return Number.isNaN(parsed.getTime()) ? undefined : parsed;
   }
   if (!match[1]) {
     return now;
@@ -22,17 +23,18 @@ const parseTimeExpr = (expr: string, now: Date): Date | undefined => {
 export const useTimeRange = (start?: string, end?: string, duration?: string): TimeRangeValue => {
   return useMemo(() => {
     const now = new Date();
+    const safeDuration = duration && isDurationString(duration) ? duration : '1h';
     const startDate = start ? parseTimeExpr(start, now) : undefined;
     const endDate = end ? parseTimeExpr(end, now) : undefined;
 
     // If end is exactly "NOW" with no offset and no explicit start, use relative time range
     if (end === 'NOW' && !start) {
-      return { pastDuration: duration || '1h' } as RelativeTimeRange;
+      return { pastDuration: safeDuration } as RelativeTimeRange;
     }
 
     if (startDate && endDate) {
       return { start: startDate, end: endDate } as AbsoluteTimeRange;
     }
-    return { pastDuration: duration || '1h' } as RelativeTimeRange;
+    return { pastDuration: safeDuration } as RelativeTimeRange;
   }, [duration, end, start]);
 };