Query date picker works

Author: matt-aitken

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

@@ -1,5 +1,5 @@
 import { ArrowDownTrayIcon, ClipboardIcon } from "@heroicons/react/20/solid";
-import type { OutputColumnMetadata } from "@internal/clickhouse";
+import type { OutputColumnMetadata, WhereClauseFallback } from "@internal/clickhouse";
 import { Form, useNavigation } from "@remix-run/react";
 import {
   redirect,
@@ -21,6 +21,8 @@ import { autoFormatSQL, TSQLEditor } from "~/components/code/TSQLEditor";
 import { TSQLResultsTable } from "~/components/code/TSQLResultsTable";
 import { EnvironmentLabel } from "~/components/environments/EnvironmentLabel";
 import { PageBody, PageContainer } from "~/components/layout/AppLayout";
+import { TimeFilter, timeFilters } from "~/components/runs/v3/SharedFilters";
+import { useSearchParams } from "~/hooks/useSearchParam";
 import { Button } from "~/components/primitives/Buttons";
 import { Callout } from "~/components/primitives/Callout";
 import { Card } from "~/components/primitives/charts/Card";
@@ -62,6 +64,8 @@ import { querySchemas } from "~/v3/querySchemas";
 import { QueryHelpSidebar } from "./QueryHelpSidebar";
 import { QueryHistoryPopover } from "./QueryHistoryPopover";
 import { formatQueryStats } from "./utils";
+import { requireUser } from "~/services/session.server";
+import parse from "parse-duration";
 
 async function hasQueryAccess(
   userId: string,
@@ -148,12 +152,15 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
   });
 };
 
-import { requireUser } from "~/services/session.server";
+const DEFAULT_PERIOD = "7d";
 
 const ActionSchema = z.object({
   query: z.string().min(1, "Query is required"),
   scope: z.enum(["environment", "project", "organization"]),
   explain: z.enum(["true", "false"]).nullable().optional(),
+  period: z.string().nullable().optional(),
+  from: z.string().nullable().optional(),
+  to: z.string().nullable().optional(),
 });
 
 export const action = async ({ request, params }: ActionFunctionArgs) => {
@@ -218,6 +225,9 @@ export const action = async ({ request, params }: ActionFunctionArgs) => {
     query: formData.get("query"),
     scope: formData.get("scope"),
     explain: formData.get("explain"),
+    period: formData.get("period"),
+    from: formData.get("from"),
+    to: formData.get("to"),
   });
 
   if (!parsed.success) {
@@ -235,11 +245,35 @@ export const action = async ({ request, params }: ActionFunctionArgs) => {
     );
   }
 
-  const { query, scope, explain: explainParam } = parsed.data;
+  const { query, scope, explain: explainParam, period, from, to } = parsed.data;
   // Only allow explain for admins/impersonating users
   const isAdmin = user.admin || user.isImpersonating;
   const explain = explainParam === "true" && isAdmin;
 
+  // Build time filter fallback for triggered_at column
+  const timeFilter = timeFilters({
+    period: period ?? undefined,
+    from: from ?? undefined,
+    to: to ?? undefined,
+    defaultPeriod: DEFAULT_PERIOD,
+  });
+
+  let triggeredAtFallback: WhereClauseFallback;
+  if (timeFilter.from && timeFilter.to) {
+    // Both from and to specified - use BETWEEN
+    triggeredAtFallback = { op: "between", low: timeFilter.from, high: timeFilter.to };
+  } else if (timeFilter.from) {
+    // Only from specified
+    triggeredAtFallback = { op: "gte", value: timeFilter.from };
+  } else if (timeFilter.to) {
+    // Only to specified
+    triggeredAtFallback = { op: "lte", value: timeFilter.to };
+  } else {
+    // Period specified (or default) - calculate from now
+    const periodMs = parse(timeFilter.period ?? DEFAULT_PERIOD) ?? 7 * 24 * 60 * 60 * 1000;
+    triggeredAtFallback = { op: "gte", value: new Date(Date.now() - periodMs) };
+  }
+
   try {
     const [error, result] = await executeQuery({
       name: "query-page",
@@ -252,6 +286,9 @@ export const action = async ({ request, params }: ActionFunctionArgs) => {
       projectId: project.id,
       environmentId: environment.id,
       explain,
+      whereClauseFallback: {
+        triggered_at: triggeredAtFallback,
+      },
       history: {
         source: "DASHBOARD",
         userId: user.id,
@@ -320,6 +357,12 @@ const QueryEditorForm = forwardRef<
 >(function QueryEditorForm({ defaultQuery, defaultScope, history, isLoading, isAdmin }, ref) {
   const [query, setQuery] = useState(defaultQuery);
   const [scope, setScope] = useState<QueryScope>(defaultScope);
+  const { value: searchParamValue } = useSearchParams();
+
+  // Get time filter values from URL search params
+  const period = searchParamValue("period");
+  const from = searchParamValue("from");
+  const to = searchParamValue("to");
 
   // Expose methods to parent for external query setting (history, AI, examples)
   useImperativeHandle(
@@ -352,6 +395,10 @@ const QueryEditorForm = forwardRef<
       <Form method="post" className="flex items-center justify-between gap-2 px-2">
         <input type="hidden" name="query" value={query} />
         <input type="hidden" name="scope" value={scope} />
+        {/* Pass time filter values to action */}
+        <input type="hidden" name="period" value={period ?? ""} />
+        <input type="hidden" name="from" value={from ?? ""} />
+        <input type="hidden" name="to" value={to ?? ""} />
         <QueryHistoryPopover history={history} onQuerySelected={handleHistorySelected} />
         <div className="flex items-center gap-1">
           <Select
@@ -372,6 +419,7 @@ const QueryEditorForm = forwardRef<
               ))
             }
           </Select>
+          <TimeFilter defaultPeriod={DEFAULT_PERIOD} />
           {isAdmin && (
             <Button
               type="submit"

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

@@ -94,6 +94,7 @@ export async function executeQuery<TOut extends z.ZodSchema>(
     environmentId,
     history,
     customOrgConcurrencyLimit,
+    whereClauseFallback,
     ...baseOptions
   } = options;
 
@@ -155,6 +156,7 @@ export async function executeQuery<TOut extends z.ZodSchema>(
       ...baseOptions,
       ...tenantOptions,
       fieldMappings,
+      whereClauseFallback,
       clickhouseSettings: {
         ...getDefaultClickhouseSettings(),
         ...baseOptions.clickhouseSettings, // Allow caller overrides if needed

internal-packages/clickhouse/src/client/tsql.ts

@@ -14,6 +14,7 @@ import {
   type TableSchema,
   type QuerySettings,
   type FieldMappings,
+  type WhereClauseFallback,
 } from "@internal/tsql";
 import type { ClickhouseReader, QueryStats } from "./types.js";
 import { QueryError } from "./errors.js";
@@ -24,7 +25,7 @@ const logger = new Logger("tsql", "info");
 
 export type { QueryStats };
 
-export type { TableSchema, QuerySettings, FieldMappings };
+export type { TableSchema, QuerySettings, FieldMappings, WhereClauseFallback };
 
 /**
  * Options for executing a TSQL query
@@ -74,6 +75,19 @@ export interface ExecuteTSQLOptions<TOut extends z.ZodSchema> {
    * @default false
    */
   explain?: boolean;
+  /**
+   * Fallback WHERE conditions to apply when the user hasn't filtered on a column.
+   * Key is the column name, value is the fallback condition.
+   *
+   * @example
+   * ```typescript
+   * // Apply triggered_at >= 7 days ago if user doesn't filter on triggered_at
+   * whereClauseFallback: {
+   *   triggered_at: { op: 'gte', value: new Date(Date.now() - 7 * 24 * 60 * 60 * 1000) }
+   * }
+   * ```
+   */
+  whereClauseFallback?: Record<string, WhereClauseFallback>;
 }
 
 /**
@@ -144,6 +158,7 @@ export async function executeTSQL<TOut extends z.ZodSchema>(
       tableSchema: options.tableSchema,
       settings: options.querySettings,
       fieldMappings: options.fieldMappings,
+      whereClauseFallback: options.whereClauseFallback,
     });
 
     generatedSql = sql;

internal-packages/clickhouse/src/index.ts

@@ -56,6 +56,7 @@ export {
   type TSQLQuerySuccess,
   type QueryStats,
   type FieldMappings,
+  type WhereClauseFallback,
 } from "./client/tsql.js";
 export type { OutputColumnMetadata } from "@internal/tsql";
 

internal-packages/tsql/src/index.ts

@@ -9,6 +9,7 @@ import { TSQLParser } from "./grammar/TSQLParser.js";
 import type {
   And,
   BetweenExpr,
+  Call,
   CompareOperation,
   Constant,
   Expression,
@@ -267,13 +268,37 @@ export function isColumnReferencedInExpression(
 }
 
 /**
- * Convert a fallback value to the appropriate type for AST constants
+ * Format a Date as a ClickHouse-compatible DateTime64 string.
+ * ClickHouse expects format: 'YYYY-MM-DD HH:MM:SS.mmm' (in UTC)
  */
-function convertFallbackValue(value: Date | string | number): string | number {
+function formatDateForClickHouse(date: Date): string {
+  const year = date.getUTCFullYear();
+  const month = String(date.getUTCMonth() + 1).padStart(2, "0");
+  const day = String(date.getUTCDate()).padStart(2, "0");
+  const hours = String(date.getUTCHours()).padStart(2, "0");
+  const minutes = String(date.getUTCMinutes()).padStart(2, "0");
+  const seconds = String(date.getUTCSeconds()).padStart(2, "0");
+  const ms = String(date.getUTCMilliseconds()).padStart(3, "0");
+  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}.${ms}`;
+}
+
+/**
+ * Create an AST expression for a fallback value.
+ * Date values are wrapped in toDateTime64() for ClickHouse compatibility.
+ */
+function createValueExpression(value: Date | string | number): Expression {
   if (value instanceof Date) {
-    return value.toISOString();
+    // Wrap Date in toDateTime64(formatted_string, 3) for ClickHouse DateTime64(3) columns
+    return {
+      expression_type: "call",
+      name: "toDateTime64",
+      args: [
+        { expression_type: "constant", value: formatDateForClickHouse(value) } as Constant,
+        { expression_type: "constant", value: 3 } as Constant,
+      ],
+    } as Call;
   }
-  return value;
+  return { expression_type: "constant", value } as Constant;
 }
 
 /**
@@ -316,14 +341,8 @@ export function createFallbackExpression(
     const betweenExpr: BetweenExpr = {
       expression_type: "between_expr",
       expr: fieldExpr,
-      low: {
-        expression_type: "constant",
-        value: convertFallbackValue(fallback.low),
-      } as Constant,
-      high: {
-        expression_type: "constant",
-        value: convertFallbackValue(fallback.high),
-      } as Constant,
+      low: createValueExpression(fallback.low),
+      high: createValueExpression(fallback.high),
     };
     return betweenExpr;
   }
@@ -332,10 +351,7 @@ export function createFallbackExpression(
   const compareExpr: CompareOperation = {
     expression_type: "compare_operation",
     left: fieldExpr,
-    right: {
-      expression_type: "constant",
-      value: convertFallbackValue(fallback.value),
-    } as Constant,
+    right: createValueExpression(fallback.value),
     op: mapFallbackOpToCompareOp(fallback.op),
   };
   return compareExpr;