Save the query date range

Author: matt-aitken

apps/webapp/app/presenters/v3/QueryPresenter.server.ts

@@ -8,6 +8,10 @@ export type QueryHistoryItem = {
   scope: QueryScope;
   createdAt: Date;
   userName: string | null;
+  /** Time filter settings */
+  filterPeriod: string | null;
+  filterFrom: Date | null;
+  filterTo: Date | null;
 };
 
 export class QueryPresenter extends BasePresenter {
@@ -21,6 +25,9 @@ export class QueryPresenter extends BasePresenter {
         query: true,
         scope: true,
         createdAt: true,
+        filterPeriod: true,
+        filterFrom: true,
+        filterTo: true,
         user: {
           select: { name: true, displayName: true },
         },
@@ -36,6 +43,9 @@ export class QueryPresenter extends BasePresenter {
           scope: q.scope.toLowerCase() as QueryScope,
           createdAt: q.createdAt,
           userName: q.user?.displayName ?? q.user?.name ?? null,
+          filterPeriod: q.filterPeriod,
+          filterFrom: q.filterFrom,
+          filterTo: q.filterTo,
         })
       ),
     };

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/QueryHistoryPopover.tsx

@@ -1,9 +1,10 @@
 import { useState } from "react";
 import { ClockRotateLeftIcon } from "~/assets/icons/ClockRotateLeftIcon";
 import { Button } from "~/components/primitives/Buttons";
-import { DateTime } from "~/components/primitives/DateTime";
 import { Popover, PopoverContent, PopoverTrigger } from "~/components/primitives/Popover";
 import type { QueryHistoryItem } from "~/presenters/v3/QueryPresenter.server";
+import { formatDateTimeRange, formatTimePeriod } from "./utils";
+import { timeFilterRenderValues } from "~/components/runs/v3/SharedFilters";
 
 const SQL_KEYWORDS = [
   "SELECT",
@@ -104,28 +105,33 @@ export function QueryHistoryPopover({
       >
         <div className="max-h-80 overflow-y-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
           <div className="p-1">
-            {history.map((item) => (
-              <button
-                key={item.id}
-                type="button"
-                onClick={() => {
-                  onQuerySelected(item);
-                  setIsOpen(false);
-                }}
-                className="flex w-full items-center gap-2 rounded-sm px-2 py-2 outline-none transition-colors focus-custom hover:bg-charcoal-900"
-              >
-                <div className="flex flex-1 flex-col items-start overflow-hidden">
-                  <p className="line-clamp-2 w-full break-words text-left font-mono text-xs text-[#9b99ff]">
-                    {highlightSQL(item.query)}
-                  </p>
-                  <div className="flex items-center gap-2 text-xs text-text-dimmed">
-                    <DateTime date={item.createdAt} showTooltip={false} />
-                    {item.userName && <span>· {item.userName}</span>}
-                    <span className="capitalize">· {item.scope}</span>
+            {history.map((item) => {
+              // Format time filter display
+              const { valueLabel } = timeFilterRenderValues({ period: item.filterPeriod ?? undefined, from: item.filterFrom ?? undefined, to: item.filterTo ?? undefined });
+
+              return (
+                <button
+                  key={item.id}
+                  type="button"
+                  onClick={() => {
+                    onQuerySelected(item);
+                    setIsOpen(false);
+                  }}
+                  className="flex w-full items-center gap-2 rounded-sm px-2 py-2 outline-none transition-colors focus-custom hover:bg-charcoal-900"
+                >
+                  <div className="flex flex-1 flex-col items-start overflow-hidden">
+                    <p className="line-clamp-2 w-full break-words text-left font-mono text-xs text-[#9b99ff]">
+                      {highlightSQL(item.query)}
+                    </p>
+                    <div className="flex items-center gap-1.5 text-xs text-text-dimmed">
+                      <span className="capitalize">{item.scope}</span>
+                      {valueLabel && <span>· {valueLabel}</span>}
+                      {item.userName && <span>· {item.userName}</span>}
+                    </div>
                   </div>
-                </div>
-              </button>
-            ))}
+                </button>
+              );
+            })}
           </div>
         </div>
       </PopoverContent>

apps/webapp/app/services/queryService.server.ts

@@ -75,6 +75,15 @@ export type ExecuteQueryOptions<TOut extends z.ZodSchema> = Omit<
     userId?: string | null;
     /** Skip saving to history (e.g., when impersonating) */
     skip?: boolean;
+    /** Time filter settings to save with the query */
+    timeFilter?: {
+      /** Period like "7d", "24h", etc. */
+      period?: string;
+      /** Custom start date */
+      from?: Date;
+      /** Custom end date */
+      to?: Date;
+    };
   };
   /** Custom per-org concurrency limit (overrides default) */
   customOrgConcurrencyLimit?: number;
@@ -174,11 +183,17 @@ export async function executeQuery<TOut extends z.ZodSchema>(
           userId: history.userId ?? null,
         },
         orderBy: { createdAt: "desc" },
-        select: { query: true, scope: true },
+        select: { query: true, scope: true, filterPeriod: true, filterFrom: true, filterTo: true },
       });
 
+      const timeFilter = history.timeFilter;
       const isDuplicate =
-        lastQuery && lastQuery.query === options.query && lastQuery.scope === scopeToEnum[scope];
+        lastQuery &&
+        lastQuery.query === options.query &&
+        lastQuery.scope === scopeToEnum[scope] &&
+        lastQuery.filterPeriod === (timeFilter?.period ?? null) &&
+        lastQuery.filterFrom?.getTime() === (timeFilter?.from?.getTime() ?? undefined) &&
+        lastQuery.filterTo?.getTime() === (timeFilter?.to?.getTime() ?? undefined);
 
       if (!isDuplicate) {
         const stats = result[1].stats;
@@ -196,6 +211,9 @@ export async function executeQuery<TOut extends z.ZodSchema>(
             projectId: scope === "project" || scope === "environment" ? projectId : null,
             environmentId: scope === "environment" ? environmentId : null,
             userId: history.userId ?? null,
+            filterPeriod: history.timeFilter?.period ?? null,
+            filterFrom: history.timeFilter?.from ?? null,
+            filterTo: history.timeFilter?.to ?? null,
           },
         });
       }

internal-packages/database/prisma/migrations/20260120115732_add_time_filter_to_customer_query/migration.sql

@@ -0,0 +1,5 @@
+-- AlterTable
+ALTER TABLE "public"."CustomerQuery"
+ADD COLUMN "filterFrom" TIMESTAMP(3),
+ADD COLUMN "filterPeriod" TEXT,
+ADD COLUMN "filterTo" TIMESTAMP(3);

internal-packages/database/prisma/schema.prisma

@@ -62,7 +62,7 @@ model User {
 
   impersonationsPerformed ImpersonationAuditLog[] @relation("ImpersonationAdmin")
   impersonationsReceived  ImpersonationAuditLog[] @relation("ImpersonationTarget")
-  customerQueries      CustomerQuery[]
+  customerQueries         CustomerQuery[]
 }
 
 model MfaBackupCode {
@@ -2425,7 +2425,6 @@ model ImpersonationAuditLog {
   @@index([adminId])
   @@index([targetId])
   @@index([createdAt])
-
 }
 
 enum CustomerQuerySource {
@@ -2470,6 +2469,14 @@ model CustomerQuery {
   user   User?   @relation(fields: [userId], references: [id], onDelete: SetNull, onUpdate: Cascade)
   userId String?
 
+  /// Time filter settings used when the query was executed
+  /// Period like "7d", "24h", etc.
+  filterPeriod String?
+  /// Custom start date (ISO 8601)
+  filterFrom   DateTime?
+  /// Custom end date (ISO 8601)
+  filterTo     DateTime?
+
   createdAt DateTime @default(now())
 
   /// Fast lookup for history menu (most recent 20 per org)