fix: date picker improvements (wundergraph#226)

connect/src/wg/cosmo/platform/v1/platform_pb.ts

@@ -6308,6 +6308,11 @@ export class GetGraphMetricsResponse extends Message<GetGraphMetricsResponse> {
    */
   filters: AnalyticsViewResultFilter[] = [];
 
+  /**
+   * @generated from field: optional string resolution = 6;
+   */
+  resolution?: string;
+
   constructor(data?: PartialMessage<GetGraphMetricsResponse>) {
     super();
     proto3.util.initPartial(data, this);
@@ -6321,6 +6326,7 @@ export class GetGraphMetricsResponse extends Message<GetGraphMetricsResponse> {
     { no: 3, name: "latency", kind: "message", T: MetricsDashboardMetric },
     { no: 4, name: "errors", kind: "message", T: MetricsDashboardMetric },
     { no: 5, name: "filters", kind: "message", T: AnalyticsViewResultFilter, repeated: true },
+    { no: 6, name: "resolution", kind: "scalar", T: 9 /* ScalarType.STRING */, opt: true },
   ]);
 
   static fromBinary(bytes: Uint8Array, options?: Partial<BinaryReadOptions>): GetGraphMetricsResponse {
@@ -6623,6 +6629,11 @@ export class GetMetricsErrorRateResponse extends Message<GetMetricsErrorRateResp
    */
   series: MetricsErrorRateSeriesItem[] = [];
 
+  /**
+   * @generated from field: optional string resolution = 3;
+   */
+  resolution?: string;
+
   constructor(data?: PartialMessage<GetMetricsErrorRateResponse>) {
     super();
     proto3.util.initPartial(data, this);
@@ -6633,6 +6644,7 @@ export class GetMetricsErrorRateResponse extends Message<GetMetricsErrorRateResp
   static readonly fields: FieldList = proto3.util.newFieldList(() => [
     { no: 1, name: "response", kind: "message", T: Response },
     { no: 2, name: "series", kind: "message", T: MetricsErrorRateSeriesItem, repeated: true },
+    { no: 3, name: "resolution", kind: "scalar", T: 9 /* ScalarType.STRING */, opt: true },
   ]);
 
   static fromBinary(bytes: Uint8Array, options?: Partial<BinaryReadOptions>): GetMetricsErrorRateResponse {

controlplane/src/core/bufservices/PlatformService.ts

@@ -1531,6 +1531,7 @@ export default function (opts: RouterOptions): Partial<ServiceImpl<typeof Platfo
             code: EnumStatusCode.OK,
           },
           series: metrics.errorRate.series,
+          resolution: metrics.resolution,
         };
       });
     },

controlplane/src/core/repositories/analytics/MetricsRepository.ts

@@ -10,7 +10,6 @@ import {
   buildCoercedFilterSqlStatement,
   coerceFilterValues,
   getDateRange,
-  getEndDate,
   getGranularity,
   isoDateRangeToTimestamps,
   toISO9075,
@@ -480,6 +479,7 @@ export class MetricsRepository {
     ]);
 
     return {
+      resolution: metricsProps.granule,
       requests: requests.data,
       latency: latency.data,
       errors: errors.data,
@@ -493,6 +493,7 @@ export class MetricsRepository {
     const [errorRate] = await Promise.all([this.getErrorRateMetrics(metricsProps)]);
 
     return {
+      resolution: metricsProps.granule,
       errorRate: errorRate.data,
     };
   }

controlplane/src/core/repositories/analytics/util.ts

@@ -385,6 +385,8 @@ export const getGranularity = (range: number) => {
     return '60';
   } else if (range <= 168) {
     return '240';
+  } else if (range > 168) {
+    return '480';
   }
 
   return '5';

proto/wg/cosmo/platform/v1/platform.proto

@@ -812,6 +812,7 @@ message GetGraphMetricsResponse {
   MetricsDashboardMetric latency = 3;
   MetricsDashboardMetric errors = 4;
   repeated AnalyticsViewResultFilter filters = 5;
+  optional string resolution = 6;
 }
 
 message MetricsDashboardMetric {
@@ -851,6 +852,7 @@ message GetMetricsErrorRateRequest {
 message GetMetricsErrorRateResponse {
   Response response = 1;
   repeated MetricsErrorRateSeriesItem series = 2;
+  optional string resolution = 3;
 }
 
 message MetricsErrorRateSeriesItem {

studio/src/components/analytics/useAnalyticsQueryState.ts

@@ -1,4 +1,4 @@
-import { endOfDay, formatISO, startOfDay, subDays, subHours } from "date-fns";
+import { subHours } from "date-fns";
 import { useRouter } from "next/router";
 import { AnalyticsViewGroupName } from "@wundergraph/cosmo-connect/dist/platform/v1/platform_pb";
 import { useMemo } from "react";
@@ -52,8 +52,8 @@ export const useAnalyticsQueryState = () => {
     const parsedRange = getRange(query.range?.toString());
 
     let dateRange = {
-      start: startOfDay(subHours(new Date(), parsedRange)),
-      end: endOfDay(new Date()),
+      start: subHours(new Date(), parsedRange),
+      end: new Date(),
     };
 
     if (query.dateRange) {
@@ -63,8 +63,8 @@ export const useAnalyticsQueryState = () => {
       });
 
       dateRange = {
-        start: startOfDay(new Date(tempRange.start)),
-        end: endOfDay(new Date(tempRange.end)),
+        start: new Date(tempRange.start),
+        end: new Date(tempRange.end),
       };
     } else if (!range) {
       range = parsedRange;

studio/src/components/date-picker-with-range.tsx

@@ -109,10 +109,16 @@ export function DatePickerWithRange({
 
   const reset = () => {
     setSelectedRange(range);
-    if (dateRange) {
-      setSelectedDateTime(dateRange, undefined, false);
+    if (!range) {
       setStartTime(getFormattedTime(dateRange.start));
       setEndTime(dateRange.end ? getFormattedTime(dateRange.end) : "");
+    } else {
+      const end = new Date();
+      setStartTime(getFormattedTime(subHours(end, range)));
+      setEndTime(getFormattedTime(end));
+    }
+    if (dateRange) {
+      setSelectedDateTime(dateRange, undefined, false);
     }
   };
 
@@ -153,8 +159,8 @@ export function DatePickerWithRange({
     const start = subHours(new Date(), range);
     const end = new Date();
 
-    setStartTime("");
-    setEndTime("");
+    setStartTime(getFormattedTime(start));
+    setEndTime(getFormattedTime(end));
 
     setSelectedRange(range);
     setSelectedDateRange({ start, end });
@@ -165,6 +171,10 @@ export function DatePickerWithRange({
     (e) => {
       const time = e.target.value;
       setTime(field, time);
+      if (time) {
+        // if time is set, then we need to reset the range to 'custom'
+        setSelectedRange(undefined);
+      }
     };
 
   return (
@@ -220,6 +230,20 @@ export function DatePickerWithRange({
                 </Button>
               </li>
             ))}
+            <li>
+              <Button
+                variant="ghost"
+                className="w-full justify-start"
+                data-active={!selectedRange ? "" : undefined}
+                onClick={() => {
+                  setSelectedRange(undefined);
+                  setStartTime("00:00");
+                  setEndTime("23:59");
+                }}
+              >
+                Custom
+              </Button>
+            </li>
           </ul>
           <div>
             <Calendar
@@ -300,6 +324,8 @@ export function DatePickerWithRange({
 
               const dateRange = getValue();
 
+              setSelectedDateRange(dateRange);
+
               onChange?.({
                 range: selectedRange,
                 dateRange,

studio/src/lib/insights-helpers.ts

@@ -2,9 +2,7 @@ import {
   differenceInDays,
   differenceInHours,
   differenceInMinutes,
-  endOfDay,
   formatISO,
-  startOfDay,
   subHours,
 } from "date-fns";
 import { formatDateTime } from "./format-date";
@@ -168,7 +166,7 @@ export const nsToTime = (ns: bigint) => {
 
 export const createDateRange = (range: number) => {
   return JSON.stringify({
-    start: formatISO(startOfDay(subHours(new Date(), range))),
-    end: formatISO(endOfDay(new Date())),
+    start: formatISO(subHours(new Date(), range)),
+    end: formatISO(new Date()),
   });
 };