fix(site): fix week range for insights (#10173)

site/src/pages/TemplatePage/TemplateInsightsPage/DateRange.tsx

@@ -7,7 +7,15 @@ import Button from "@mui/material/Button";
 import ArrowRightAltOutlined from "@mui/icons-material/ArrowRightAltOutlined";
 import Popover from "@mui/material/Popover";
 import { DateRangePicker, createStaticRanges } from "react-date-range";
-import { format, subDays } from "date-fns";
+import {
+  addDays,
+  addHours,
+  format,
+  isToday,
+  startOfDay,
+  startOfHour,
+  subDays,
+} from "date-fns";
 
 // The type definition from @types is wrong
 declare module "react-date-range" {
@@ -46,9 +54,12 @@ export const DateRange = ({
     endDate: ranges[0].endDate as Date,
   };
   const handleClose = () => {
+    const now = new Date();
     onChange({
-      startDate: currentRange.startDate,
-      endDate: currentRange.endDate,
+      startDate: startOfDay(currentRange.startDate),
+      endDate: isToday(currentRange.endDate)
+        ? startOfHour(addHours(now, 1))
+        : startOfDay(addDays(currentRange.endDate, 1)),
     });
     setIsOpen(false);
   };

site/src/pages/TemplatePage/TemplateInsightsPage/TemplateInsightsPage.tsx

@@ -31,14 +31,14 @@ import {
   UserLatencyInsightsResponse,
 } from "api/typesGenerated";
 import { ComponentProps, ReactNode } from "react";
-import { subDays, addWeeks } from "date-fns";
+import { subDays, addWeeks, format } from "date-fns";
 import "react-date-range/dist/styles.css";
 import "react-date-range/dist/theme/default.css";
 import { DateRange as DailyPicker, DateRangeValue } from "./DateRange";
 import Link from "@mui/material/Link";
 import CheckCircleOutlined from "@mui/icons-material/CheckCircleOutlined";
 import CancelOutlined from "@mui/icons-material/CancelOutlined";
-import { getDateRangeFilter, lastWeeks } from "./utils";
+import { lastWeeks } from "./utils";
 import Tooltip from "@mui/material/Tooltip";
 import LinkOutlined from "@mui/icons-material/LinkOutlined";
 import { InsightsInterval, IntervalMenu } from "./IntervalMenu";
@@ -70,7 +70,8 @@ export default function TemplateInsightsPage() {
 
   const commonFilters = {
     template_ids: template.id,
-    ...getDateRangeFilter(dateRange),
+    start_time: toISOLocal(dateRange.startDate),
+    end_time: toISOLocal(dateRange.endDate),
   };
 
   const insightsFilter = { ...commonFilters, interval };
@@ -780,3 +781,7 @@ function formatTime(seconds: number): string {
     return hours.toFixed(1) + " hours";
   }
 }
+
+function toISOLocal(d: Date) {
+  return format(d, "yyyy-MM-dd'T'HH:mm:ssxxx");
+}

site/src/pages/TemplatePage/TemplateInsightsPage/WeekPicker.tsx

@@ -22,8 +22,7 @@ export const WeekPicker = ({
 }) => {
   const anchorRef = useRef<HTMLButtonElement>(null);
   const [open, setOpen] = useState(false);
-  // Why +1? If you get the week 1 and week 2 the diff is 1, but there are 2 weeks
-  const numberOfWeeks = differenceInWeeks(value.endDate, value.startDate) + 1;
+  const numberOfWeeks = differenceInWeeks(value.endDate, value.startDate);
 
   const handleClose = () => {
     setOpen(false);

site/src/pages/TemplatePage/TemplateInsightsPage/utils.test.ts

@@ -1,36 +0,0 @@
-import { getDateRangeFilter } from "./utils";
-
-describe("getDateRangeFilter", () => {
-  it("returns the start time at the start of the day", () => {
-    const date = new Date("2020-01-01T12:00:00.000Z");
-    const { start_time } = getDateRangeFilter({
-      startDate: date,
-      endDate: date,
-      now: date,
-      isToday: () => false,
-    });
-    expect(start_time).toEqual("2020-01-01T00:00:00+00:00");
-  });
-
-  it("returns the end time at the start of the next day", () => {
-    const date = new Date("2020-01-01T12:00:00.000Z");
-    const { end_time } = getDateRangeFilter({
-      startDate: date,
-      endDate: date,
-      now: date,
-      isToday: () => false,
-    });
-    expect(end_time).toEqual("2020-01-02T00:00:00+00:00");
-  });
-
-  it("returns the end time at the start of the next hour if the end date is today", () => {
-    const date = new Date("2020-01-01T12:00:00.000Z");
-    const { end_time } = getDateRangeFilter({
-      startDate: date,
-      endDate: date,
-      now: date,
-      isToday: () => true,
-    });
-    expect(end_time).toEqual("2020-01-01T13:00:00+00:00");
-  });
-});

site/src/pages/TemplatePage/TemplateInsightsPage/utils.ts

@@ -1,50 +1,8 @@
-import {
-  addDays,
-  addHours,
-  format,
-  startOfDay,
-  startOfHour,
-  isToday as isTodayDefault,
-  startOfWeek,
-  endOfDay,
-  endOfWeek,
-  isSunday,
-  subWeeks,
-} from "date-fns";
-
-type GetDateRangeFilterOptions = {
-  startDate: Date;
-  endDate: Date;
-  // Testing purposes
-  now?: Date;
-  isToday?: (date: Date) => boolean;
-};
-
-export function getDateRangeFilter(props: GetDateRangeFilterOptions) {
-  const {
-    startDate,
-    endDate,
-    now = new Date(),
-    isToday = isTodayDefault,
-  } = props;
-
-  return {
-    start_time: toISOLocal(startOfDay(startDate)),
-    end_time: toISOLocal(
-      isToday(endDate)
-        ? startOfHour(addHours(now, 1))
-        : startOfDay(addDays(endDate, 1)),
-    ),
-  };
-}
-
-function toISOLocal(d: Date) {
-  return format(d, "yyyy-MM-dd'T'HH:mm:ssxxx");
-}
+import { startOfDay, subDays } from "date-fns";
 
 export const lastWeeks = (numberOfWeeks: number) => {
   const now = new Date();
-  const startDate = startOfWeek(subWeeks(now, numberOfWeeks));
-  const endDate = isSunday(now) ? endOfDay(now) : endOfWeek(subWeeks(now, 1));
+  const endDate = startOfDay(subDays(now, 1));
+  const startDate = startOfDay(subDays(endDate, 7 * numberOfWeeks));
   return { startDate, endDate };
 };