Add nice environment column with mapping to slug

apps/webapp/app/components/code/TSQLResultsTable.tsx

@@ -26,6 +26,7 @@ import { v3ProjectPath, v3RunPathFromFriendlyId } from "~/utils/pathBuilder";
 import { SimpleTooltip } from "../primitives/Tooltip";
 import { InformationCircleIcon } from "@heroicons/react/20/solid";
 import { useOrganization } from "~/hooks/useOrganizations";
+import { useProject } from "~/hooks/useProject";
 
 /**
  * Check if a ClickHouse type is a DateTime type
@@ -163,6 +164,12 @@ function CellValue({
         }
         return <span>{String(value)}</span>;
       }
+      case "environment": {
+        if (typeof value === "string") {
+          return <EnvironmentCellValue value={value} />;
+        }
+        return <span>{String(value)}</span>;
+      }
     }
   }
 
@@ -221,6 +228,17 @@ function ProjectCellValue({ value }: { value: string }) {
   return <TextLink to={v3ProjectPath(organization, project)}>{project.name}</TextLink>;
 }
 
+function EnvironmentCellValue({ value }: { value: string }) {
+  const project = useProject();
+  const environment = project.environments.find((e) => e.slug === value);
+
+  if (!environment) {
+    return <span>{value}</span>;
+  }
+
+  return <EnvironmentCombo environment={environment} />;
+}
+
 /**
  * Check if a column should be right-aligned (numeric columns, duration, cost)
  */

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

@@ -160,14 +160,20 @@ export const action = async ({ request, params }: ActionFunctionArgs) => {
     tenantOptions.environmentId = environment.id;
   }
 
-  // Build field mappings for project_ref → project_id translation
+  // Build field mappings for project_ref → project_id and environment_id → slug translation
   const projects = await prisma.project.findMany({
     where: { organizationId: project.organizationId },
     select: { id: true, externalRef: true },
   });
 
+  const environments = await prisma.runtimeEnvironment.findMany({
+    where: { project: { organizationId: project.organizationId } },
+    select: { id: true, slug: true },
+  });
+
   const fieldMappings: FieldMappings = {
     project: Object.fromEntries(projects.map((p) => [p.id, p.externalRef])),
+    environment: Object.fromEntries(environments.map((e) => [e.id, e.slug])),
   };
 
   try {

apps/webapp/app/v3/querySchemas.ts

@@ -42,13 +42,12 @@ export const runsSchema: TableSchema = {
         example: "run_cm1a2b3c4d5e6f7g8h9i",
       }),
     },
-    environment_id: {
-      name: "environment_id",
-      ...column("String", { description: "Environment ID", example: "cm1a2b3c4d5e6f7g8h9i" }),
-    },
-    organization_id: {
-      name: "organization_id",
-      ...column("String", { description: "Organization ID", example: "cm9z8y7x6w5v4u3t2s1r" }),
+    environment: {
+      name: "environment",
+      clickhouseName: "environment_id",
+      ...column("String", { description: "The environment slug", example: "prod" }),
+      fieldMapping: "environment",
+      customRenderType: "environment",
     },
     project: {
       name: "project",

internal-packages/tsql/src/query/validator.test.ts

@@ -19,6 +19,8 @@ const runsSchema: TableSchema = {
   },
   tenantColumns: {
     organizationId: "organization_id",
+    projectId: "project_id",
+    environmentId: "environment_id",
   },
 };
 
@@ -120,4 +122,3 @@ describe("validateQuery", () => {
     });
   });
 });
-