Improve Table schema and Examples tabs in the query feature for multiple tables

Author: ericallam

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

@@ -1,6 +1,9 @@
+import { useState } from "react";
 import { Header3 } from "~/components/primitives/Headers";
 import { Paragraph } from "~/components/primitives/Paragraph";
+import SegmentedControl from "~/components/primitives/SegmentedControl";
 import type { QueryScope } from "~/services/queryService.server";
+import { querySchemas } from "~/v3/querySchemas";
 import { TryableCodeBlock } from "./TRQLGuideContent";
 
 // Example queries for the Examples tab
@@ -9,6 +12,7 @@ export const exampleQueries: Array<{
   description: string;
   query: string;
   scope: QueryScope;
+  table: string;
 }> = [
   {
     title: "Failed runs by task (past 7 days)",
@@ -23,6 +27,7 @@ GROUP BY task_identifier
 ORDER BY failed_count DESC
 LIMIT 20`,
     scope: "environment",
+    table: "runs",
   },
   {
     title: "Execution duration p50 by task (past 7d)",
@@ -37,6 +42,7 @@ GROUP BY task_identifier
 ORDER BY p50_duration_ms DESC
 LIMIT 20`,
     scope: "environment",
+    table: "runs",
   },
   {
     title: "Runs over time",
@@ -50,6 +56,7 @@ GROUP BY timeBucket
 ORDER BY timeBucket
 LIMIT 1000`,
     scope: "environment",
+    table: "runs",
   },
   {
     title: "Most expensive 100 runs (past 7d)",
@@ -67,17 +74,75 @@ WHERE triggered_at > now() - INTERVAL 7 DAY
 ORDER BY total_cost DESC
 LIMIT 100`,
     scope: "environment",
+    table: "runs",
+  },
+  {
+    title: "CPU utilization over time",
+    description: "Track process CPU utilization bucketed over time.",
+    query: `SELECT
+  timeBucket(),
+  avg(value) AS avg_cpu
+FROM metrics
+WHERE metric_name = 'process.cpu.utilization'
+GROUP BY timeBucket
+ORDER BY timeBucket
+LIMIT 1000`,
+    scope: "environment",
+    table: "metrics",
+  },
+  {
+    title: "Memory usage by task (past 7d)",
+    description: "Average memory usage per task identifier over the last 7 days.",
+    query: `SELECT
+  task_identifier,
+  avg(value) AS avg_memory
+FROM metrics
+WHERE metric_name = 'system.memory.usage'
+  AND bucket_start > now() - INTERVAL 7 DAY
+GROUP BY task_identifier
+ORDER BY avg_memory DESC
+LIMIT 20`,
+    scope: "environment",
+    table: "metrics",
+  },
+  {
+    title: "Available metric names",
+    description: "List all distinct metric names collected in your environment.",
+    query: `SELECT
+  metric_name,
+  count() AS sample_count
+FROM metrics
+GROUP BY metric_name
+ORDER BY sample_count DESC
+LIMIT 100`,
+    scope: "environment",
+    table: "metrics",
   },
 ];
 
+const tableOptions = querySchemas.map((s) => ({ label: s.name, value: s.name }));
+
 export function ExamplesContent({
   onTryExample,
 }: {
   onTryExample: (query: string, scope: QueryScope) => void;
 }) {
+  const [selectedTable, setSelectedTable] = useState(querySchemas[0].name);
+  const filtered = exampleQueries.filter((e) => e.table === selectedTable);
+
   return (
     <div className="space-y-6">
-      {exampleQueries.map((example) => (
+      <div className="sticky top-0 z-10 bg-background-bright pb-3">
+        <SegmentedControl
+          name="examples-table-selector"
+          value={selectedTable}
+          options={tableOptions}
+          variant="secondary/small"
+          fullWidth
+          onChange={setSelectedTable}
+        />
+      </div>
+      {filtered.map((example) => (
         <div key={example.title}>
           <Header3 className="mb-1 text-text-bright">{example.title}</Header3>
           <Paragraph variant="small" className="mb-2 text-text-dimmed">

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

@@ -1,8 +1,10 @@
+import { useState } from "react";
 import type { ColumnSchema } from "@internal/tsql";
 import { Badge } from "~/components/primitives/Badge";
 import { CopyableText } from "~/components/primitives/CopyableText";
 import { Header3 } from "~/components/primitives/Headers";
 import { Paragraph } from "~/components/primitives/Paragraph";
+import SegmentedControl from "~/components/primitives/SegmentedControl";
 import { querySchemas } from "~/v3/querySchemas";
 
 function ColumnHelpItem({ col }: { col: ColumnSchema }) {
@@ -42,26 +44,36 @@ function ColumnHelpItem({ col }: { col: ColumnSchema }) {
   );
 }
 
+const tableOptions = querySchemas.map((s) => ({ label: s.name, value: s.name }));
+
 export function TableSchemaContent() {
+  const [selectedTable, setSelectedTable] = useState(querySchemas[0].name);
+  const table = querySchemas.find((s) => s.name === selectedTable) ?? querySchemas[0];
+
   return (
     <div>
-      {querySchemas.map((table) => (
-        <div key={table.name} className="mb-6">
-          <div className="mb-2">
-            <Header3 className="font-mono text-text-bright">{table.name}</Header3>
-            {table.description && (
-              <Paragraph variant="small" className="mt-1 text-text-dimmed">
-                {table.description}
-              </Paragraph>
-            )}
-          </div>
-          <div className="flex flex-col gap-2 divide-y divide-grid-dimmed">
-            {Object.values(table.columns).map((col) => (
-              <ColumnHelpItem key={col.name} col={col} />
-            ))}
-          </div>
-        </div>
-      ))}
+      <div className="sticky top-0 z-10 bg-background-bright pb-3">
+        <SegmentedControl
+          name="table-schema-selector"
+          value={selectedTable}
+          options={tableOptions}
+          variant="secondary/small"
+          fullWidth
+          onChange={setSelectedTable}
+        />
+      </div>
+      <div className="mb-2">
+        {table.description && (
+          <Paragraph variant="small" className="text-text-dimmed">
+            {table.description}
+          </Paragraph>
+        )}
+      </div>
+      <div className="flex flex-col gap-2 divide-y divide-grid-dimmed">
+        {Object.values(table.columns).map((col) => (
+          <ColumnHelpItem key={col.name} col={col} />
+        ))}
+      </div>
     </div>
   );
 }