diff --git a/site/src/pages/TemplatePage/TemplateInsightsPage/DateRange.tsx b/site/src/pages/TemplatePage/TemplateInsightsPage/DateRange.tsx index 89c5fdc47c5dd..9e0194e98d8df 100644 --- a/site/src/pages/TemplatePage/TemplateInsightsPage/DateRange.tsx +++ b/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); }; diff --git a/site/src/pages/TemplatePage/TemplateInsightsPage/TemplateInsightsPage.tsx b/site/src/pages/TemplatePage/TemplateInsightsPage/TemplateInsightsPage.tsx index 90fb11a1be789..4a74227f2c857 100644 --- a/site/src/pages/TemplatePage/TemplateInsightsPage/TemplateInsightsPage.tsx +++ b/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"); +} diff --git a/site/src/pages/TemplatePage/TemplateInsightsPage/WeekPicker.tsx b/site/src/pages/TemplatePage/TemplateInsightsPage/WeekPicker.tsx index 7d64defcee54a..73ad35db9d02e 100644 --- a/site/src/pages/TemplatePage/TemplateInsightsPage/WeekPicker.tsx +++ b/site/src/pages/TemplatePage/TemplateInsightsPage/WeekPicker.tsx @@ -22,8 +22,7 @@ export const WeekPicker = ({ }) => { const anchorRef = useRef(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); diff --git a/site/src/pages/TemplatePage/TemplateInsightsPage/utils.test.ts b/site/src/pages/TemplatePage/TemplateInsightsPage/utils.test.ts deleted file mode 100644 index 93761f9f48d95..0000000000000 --- a/site/src/pages/TemplatePage/TemplateInsightsPage/utils.test.ts +++ /dev/null @@ -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"); - }); -}); diff --git a/site/src/pages/TemplatePage/TemplateInsightsPage/utils.ts b/site/src/pages/TemplatePage/TemplateInsightsPage/utils.ts index f447bff1a331e..e3e2dda4f2628 100644 --- a/site/src/pages/TemplatePage/TemplateInsightsPage/utils.ts +++ b/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 }; };