feat: restore request report properties

The request report properties were removed during the migration from
OpenSearch to ClickHouse (see pezzolabs#279).
Since ClickHouse supports JSON functions
(https://clickhouse.com/docs/en/sql-reference/functions/json-functions),
these properties can be stored as a string column in the report table.

This commit:
- Adds a migration to create a "properties" string column in the report table
- Restores filtering by "Custom Property" in the console
- Adds a section in the report request detail view to display the properties

apps/console/src/components/requests/RequestDetails.tsx

@@ -90,6 +90,19 @@ export const RequestDetails = (props: Props) => {
       title: "Request ID",
       description: report.id,
     },
+    {
+      title: "Properties",
+      description: (
+        <div className="font-mono">
+          {report.properties && Object.keys(report.properties).map((key) => (
+            <div key={key} className="flex justify-between gap-4">
+              <span className="font-semibold">{key}:</span>
+              <span>{report.properties[key]}</span>
+            </div>
+          ))}
+        </div>
+      ),
+    },
     {
       title: "Cache",
       description: (

apps/console/src/components/requests/filters/FilterItem.tsx

@@ -38,8 +38,12 @@ export const FilterItem = ({
   onRemoveFilter,
 }: Props) => {
   const translatedField = useMemo(() => {
-    const found = FILTER_FIELDS_LIST.find((f) => f.value === field);
-    return found?.label.toLocaleLowerCase();
+    if (field.includes(".")) {
+      const fieldParts = field.split(".");
+      return fieldParts.reduce((acc, part) => `${acc} ${part}`, "");
+    }
+
+    return field;
   }, [field]);
 
   return (
@@ -58,7 +62,7 @@ const formSchema = z.object({
   field: z.string().min(1).max(100),
   operator: z.nativeEnum(FilterOperator),
   value: z.string().min(1).max(100),
-  // property: z.string().min(1).max(100).optional(),
+  property: z.string().min(1).max(100).optional(),
 });
 
 export const AddFilterForm = ({
@@ -74,13 +78,16 @@ export const AddFilterForm = ({
       field: "",
       operator: FilterOperator.Eq,
       value: "",
-      // property: undefined,
+      property: undefined,
     },
   });
 
   const onSubmit = (values: z.infer<typeof formSchema>) => {
     const filterValue: FilterInput = {
-      field: values.field,
+      field:
+        values.field !== "property"
+          ? values.field
+          : `properties.${values.property}`,
       operator: values.operator,
       value: values.value,
     };
@@ -89,8 +96,7 @@ export const AddFilterForm = ({
     form.reset();
   };
 
-  const formValues = form.watch();
-  const { field } = formValues;
+  const field = form.watch("field");
   const selectedFilterField = FILTER_FIELDS_LIST.find(
     (fieldInList) => fieldInList.value === field
   );
@@ -131,7 +137,7 @@ export const AddFilterForm = ({
               </FormItem>
             )}
           />
-          {/* {form.watch("field") === "property" && (
+          {form.watch("field") === "property" && (
             <FormField
               control={form.control}
               name="property"
@@ -143,7 +149,7 @@ export const AddFilterForm = ({
                 </FormItem>
               )}
             />
-          )} */}
+          )}
           <FormField
             control={form.control}
             name="operator"

apps/console/src/lib/constants/filters.ts

@@ -36,6 +36,11 @@ export const FILTER_FIELDS_LIST: FilterDefinition[] = [
     type: "number",
     label: "Total Tokens",
   },
+  {
+    value: "property",
+    type: "string",
+    label: "Custom Property",
+  },
 ];
 
 export const NUMBER_FILTER_OPERATORS: { value: string; label: string }[] = [

apps/server/src/app/reporting/reporting.service.ts

@@ -37,7 +37,7 @@ export class ReportingService {
     const reportId = randomUUID();
     const { report, calculated } = buildRequestReport(dto);
 
-    const { metadata, request, response, cacheEnabled, cacheHit } = report;
+    const { metadata, properties, request, response, cacheEnabled, cacheHit } = report;
 
     const reportToSave: ReportSchema = {
       id: reportId,
@@ -67,6 +67,7 @@ export class ReportingService {
       cacheEnabled: cacheEnabled,
       cacheHit: cacheHit,
       promptId: report.metadata.promptId || null,
+      properties: properties ? JSON.stringify(properties) : null,
     };
 
     try {
@@ -138,6 +139,7 @@ export class ReportingService {
         totalCost: "totalCost",
         cacheEnabled: "cacheEnabled",
         cacheHit: "cacheHit",
+        properties: "properties",
       })
       .from("reports");
 
@@ -154,8 +156,13 @@ export class ReportingService {
           value = knex.raw(`parseDateTimeBestEffort('${d}')`) as any;
         }
 
+        if (filter.field.startsWith('properties')) {
+          const key = filter.field.split('.')[1];
+          field = knex.raw(`JSONExtractString(properties, '${key}')`) as any;
+        }
+
         if (filter.operator === "like") {
-          field = knex.raw(`lower(${filter.field})`) as any;
+          field = knex.raw(`lower(${field})`) as any;
           value = (value as string).toLowerCase();
         }
 

clickhouse/migrations/20240706171122_create_report_attached_properties.ts

@@ -0,0 +1,16 @@
+import type { Knex } from "knex";
+
+
+export async function up(knex: Knex): Promise<void> {
+    await knex.schema.table("reports", (table) => {
+        table.string("properties");
+    });
+}
+
+
+export async function down(knex: Knex): Promise<void> {
+    await knex.schema.table("reports", (table) => {
+        table.dropColumn("properties");
+    });
+}
+

libs/types/src/reports.ts

@@ -26,19 +26,22 @@ export interface ReportSchema {
   cacheEnabled: boolean;
   cacheHit: boolean;
   promptId: string;
+  properties?: string;
 }
 
 export interface SerializedReport
-  extends Omit<ReportSchema, "requestBody" | "responseBody"> {
+  extends Omit<ReportSchema, "requestBody" | "responseBody" | "properties"> {
   requestBody: Record<string, any>;
   responseBody: Record<string, any>;
+  properties?: Record<string, any>;
 }
 
 export const serializeReport = (doc: ReportSchema): SerializedReport => {
   return {
     ...doc,
     requestBody: JSON.parse(doc.requestBody),
     responseBody: JSON.parse(doc.responseBody),
+    properties: doc.properties ? JSON.parse(doc.properties) : null,
   };
 };
 
@@ -56,14 +59,18 @@ export interface PaginatedReportsSchema {
   cacheEnabled: boolean;
   cacheHit: boolean;
   promptId: string;
+  properties?: string;
 }
 
-export type SerializedPaginatedReport = PaginatedReportsSchema;
+export type SerializedPaginatedReport = Omit<PaginatedReportsSchema, "properties"> & {
+  properties?: Record<string, any>;
+}
 
 export const serializePaginatedReport = (
   doc: PaginatedReportsSchema
 ): SerializedPaginatedReport => {
   return {
     ...doc,
+    properties: doc.properties ? JSON.parse(doc.properties) : null,
   };
 };