feat(ui): add hour time range (#2244)

app/src/contexts/TimeRangeContext.tsx

@@ -9,12 +9,16 @@ import React, {
 } from "react";
 import {
   addDays,
+  addHours,
   endOfDay,
   endOfHour,
+  endOfMinute,
   roundToNearestMinutes,
   startOfDay,
   startOfHour,
+  startOfMinute,
   subDays,
+  subHours,
 } from "date-fns";
 
 import { assertUnreachable } from "@phoenix/typeUtils";
@@ -23,10 +27,12 @@ import { assertUnreachable } from "@phoenix/typeUtils";
  * Preset amounts of time to select from
  */
 export enum TimePreset {
+  last_hour = "Last Hour",
   last_day = "Last Day",
   last_week = "Last Week",
   last_month = "Last Month",
   last_3_months = "Last 3 Months",
+  first_hour = "First Hour",
   first_day = "First Day",
   first_week = "First Week",
   first_month = "First Month",
@@ -65,6 +71,16 @@ type TimeRangeProviderProps = {
 function useTimeRangeMemo(timePreset: TimePreset, timeRangeBounds: TimeRange) {
   const timeRange = useMemo(() => {
     switch (timePreset) {
+      case TimePreset.last_hour: {
+        const endTimeBounds = roundToNearestMinutes(
+          endOfMinute(timeRangeBounds.end),
+          { roundingMethod: "floor" }
+        );
+        return {
+          start: subHours(endTimeBounds, 1),
+          end: endTimeBounds,
+        };
+      }
       case TimePreset.last_day: {
         const endTimeBounds = roundToNearestMinutes(
           endOfHour(timeRangeBounds.end),
@@ -105,6 +121,13 @@ function useTimeRangeMemo(timePreset: TimePreset, timeRangeBounds: TimeRange) {
           end: endTimeBounds,
         };
       }
+      case TimePreset.first_hour: {
+        const startTimeBounds = startOfMinute(timeRangeBounds.start);
+        return {
+          start: startTimeBounds,
+          end: addHours(startTimeBounds, 1),
+        };
+      }
       case TimePreset.first_day: {
         const startTimeBounds = startOfHour(timeRangeBounds.start);
         return {