feat: Pezzo OpenAI reporting (with and without prompt management)

.vscode/launch.json

@@ -0,0 +1,13 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "Attach - Examples - Task Generator App",
+      "port": 9230,
+      "request": "attach",
+      "skipFiles": ["<node_internals>/**"],
+      "type": "node",
+      "cwd": "${workspaceFolder}/examples/task-generator-app"
+    }
+  ]
+}

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

@@ -86,7 +86,7 @@ export const RequestDetails = (props: Props) => {
             ),
           },
           {
-            title: "Latency",
+            title: "Duration",
             description: ms(props.calculated.duration),
           },
         ]}

apps/console/src/app/components/requests/RequestFilters.tsx

@@ -0,0 +1,49 @@
+import { RequestReportItem } from "../../pages/requests/types";
+import { Card, Space } from "antd";
+import styled from "@emotion/styled";
+import { AddFilterItem, FilterItem } from "./filters/FilterItem";
+import { useFiltersAndSortParams } from "../../lib/hooks/useFiltersAndSortParams";
+import {
+  NUMBER_FILTER_OPERATORS,
+  STRING_FILTER_OPERATORS,
+} from "../../lib/constants/filters";
+
+const Box = styled.div`
+  padding: 10px 0;
+`;
+
+interface Props {
+  requests: RequestReportItem[];
+}
+
+export const RequestFilters = (props: Props) => {
+  const { filters, removeFilter, addFilter } = useFiltersAndSortParams();
+
+  return (
+    <Box>
+      <Card style={{ width: "100%" }}>
+        <Space direction="vertical" style={{ width: "100%" }} size="large">
+          <AddFilterItem onAdd={addFilter} />
+          <Space
+            direction="horizontal"
+            style={{ width: "100%", flexWrap: "wrap" }}
+          >
+            {filters.map((filter) => (
+              <FilterItem
+                key={`${filter.field}-${filter.operator}-${filter.value}`}
+                field={filter.field}
+                operator={
+                  [...STRING_FILTER_OPERATORS, ...NUMBER_FILTER_OPERATORS].find(
+                    (op) => op.value === filter.operator
+                  )?.label
+                }
+                value={filter.value}
+                onRemoveFilter={() => removeFilter(filter)}
+              />
+            ))}
+          </Space>
+        </Space>
+      </Card>
+    </Box>
+  );
+};

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

@@ -0,0 +1,210 @@
+import styled from "@emotion/styled";
+import { Button, Form, Input, Select, Tag, Tooltip, Typography } from "antd";
+import { useCallback, useMemo, useState } from "react";
+import { CheckOutlined, CloseOutlined } from "@ant-design/icons";
+import { FilterInput } from "../../../../@generated/graphql/graphql";
+import {
+  FILTER_FIELDS_LIST,
+  NUMBER_FILTER_OPERATORS,
+  STRING_FILTER_OPERATORS,
+} from "../../../lib/constants/filters";
+
+const { Text } = Typography;
+
+const FilterItemTag = styled(Tag)<{ formMode?: boolean }>`
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: ${({ formMode }) => (formMode ? "0px" : "4px 8px")};
+  border: ${({ formMode }) => (formMode ? "none" : "1px solid #5FDD97")};
+  background: ${({ formMode }) =>
+    formMode ? "none" : "rgba(255, 255, 255, 0.04)"};
+`;
+
+interface Props {
+  onRemoveFilter: () => void;
+  field: string;
+  operator: string;
+  value: string;
+}
+
+export const FilterItem = ({
+  field,
+  operator,
+  value,
+  onRemoveFilter,
+}: Props) => {
+  const translatedField = useMemo(() => {
+    if (field.includes(".")) {
+      const fieldParts = field.split(".");
+
+      return fieldParts.reduce((acc, part) => `${acc} ${part}`, "");
+    }
+
+    return field;
+  }, [field]);
+
+  return (
+    <FilterItemTag closable onClose={onRemoveFilter}>
+      <Text>{translatedField}</Text>
+      <Text style={{ fontWeight: "bold" }}>{operator}</Text>
+      <Text>{value}</Text>
+    </FilterItemTag>
+  );
+};
+
+const StyledForm = styled(Form)`
+  .ant-form-item-explain-error {
+    position: absolute;
+  }
+`;
+
+export const AddFilterForm = ({
+  onAdd,
+  onCancel,
+}: {
+  onAdd: (input: FilterInput) => void;
+  onCancel: () => void;
+}) => {
+  const [form] = Form.useForm<FilterInput>();
+  const [_, setTrigger] = useState(0);
+
+  const handleFormSubmit = () => {
+    onAdd(form.getFieldsValue());
+    form.resetFields();
+  };
+
+  return (
+    <StyledForm
+      form={form}
+      layout="vertical"
+      name="basic"
+      style={{ display: "flex", gap: 8 }}
+      onFinish={handleFormSubmit}
+      autoComplete="off"
+    >
+      <Form.Item
+        name="field"
+        style={{ margin: 0 }}
+        rules={[
+          {
+            required: true,
+            type: "string",
+            validateTrigger: "onSubmit",
+            message: "Must be a valid field name",
+          },
+        ]}
+      >
+        <Select placeholder="Select a field" options={FILTER_FIELDS_LIST} />
+      </Form.Item>
+
+      <Form.Item
+        fieldId="operator"
+        dependencies={["field"]}
+        style={{ margin: 0 }}
+        rules={[
+          {
+            required: true,
+            type: "string",
+            validateTrigger: "onSubmit",
+            message: "Must be a valid operator",
+          },
+        ]}
+      >
+        {({ getFieldValue }) => {
+          const selectedFilterField = FILTER_FIELDS_LIST.find(
+            (field) => field.value === getFieldValue("field")
+          );
+
+          const options =
+            selectedFilterField?.type === "string"
+              ? STRING_FILTER_OPERATORS
+              : NUMBER_FILTER_OPERATORS;
+
+          return (
+            <Form.Item noStyle name="operator">
+              <Select placeholder="Select an operator" options={options} />
+            </Form.Item>
+          );
+        }}
+      </Form.Item>
+
+      <Form.Item
+        name="value"
+        fieldId="value"
+        style={{ margin: 0 }}
+        rules={[
+          {
+            required: true,
+            type: "string",
+            validateTrigger: "onSubmit",
+            message: "Must be a valid value",
+          },
+        ]}
+      >
+        <Input placeholder="Value" />
+      </Form.Item>
+
+      <Form.Item style={{ margin: 0 }} shouldUpdate>
+        {({ getFieldsValue }) => {
+          const { field, operator, value } = getFieldsValue();
+          const fieldsHasError = form
+            .getFieldsError()
+            .some((field) => field.errors.length > 0);
+          const formIsComplete = field && operator && value && !fieldsHasError;
+          return (
+            <Tooltip title="submit">
+              <Button
+                type="primary"
+                htmlType="submit"
+                icon={<CheckOutlined />}
+                disabled={!formIsComplete}
+              />
+            </Tooltip>
+          );
+        }}
+      </Form.Item>
+      <Form.Item style={{ margin: 0 }}>
+        <Tooltip title="cancel">
+          <Button
+            danger
+            type="primary"
+            htmlType="button"
+            onClick={(e) => {
+              e.stopPropagation();
+              onCancel();
+            }}
+            icon={<CloseOutlined />}
+          />
+        </Tooltip>
+      </Form.Item>
+    </StyledForm>
+  );
+};
+
+export const AddFilterItem = ({
+  onAdd,
+}: {
+  onAdd: (input: FilterInput) => void;
+}) => {
+  const [addFormOpen, setAddFormOpen] = useState(false);
+
+  const handleAdd = useCallback(
+    (filter: FilterInput) => {
+      onAdd(filter);
+      setAddFormOpen(false);
+    },
+    [onAdd]
+  );
+
+  if (addFormOpen) {
+    return (
+      <AddFilterForm onAdd={handleAdd} onCancel={() => setAddFormOpen(false)} />
+    );
+  }
+  return (
+    <Button onClick={() => setAddFormOpen(true)} type="dashed">
+      + Add Filter
+    </Button>
+  );
+};

apps/console/src/app/graphql/definitions/queries/requests.ts

@@ -7,11 +7,9 @@ export const GET_ALL_REQUESTS = graphql(/* GraphQL */ `
         reportId
         request
         response
-        provider
         calculated
         properties
         metadata
-        type
       }
       pagination {
         page

apps/console/src/app/graphql/hooks/queries.ts

@@ -18,6 +18,8 @@ import {
 import { GraphQLErrorResponse, ReportRequestResponse } from "../types";
 import { Provider } from "@pezzo/types";
 import { GET_PROMPT, GET_PROMPT_VERSION } from "../definitions/queries/prompts";
+import { useEffect } from "react";
+import { useFiltersAndSortParams } from "../../lib/hooks/useFiltersAndSortParams";
 
 export const useProviderApiKeys = () => {
   const { organization } = useCurrentOrganization();
@@ -100,7 +102,7 @@ export const useGetPromptVersion = (
 };
 
 const buildTypedRequestReportObject = (requestReport: RequestReport) => {
-  switch (requestReport.provider) {
+  switch (requestReport.metadata.providers) {
     case Provider.OpenAI:
       return requestReport as ReportRequestResponse<Provider.OpenAI>;
     default:
@@ -116,14 +118,15 @@ export const useGetRequestReports = ({
   page: number;
 }) => {
   const { project } = useCurrentProject();
+  const { filters, sort } = useFiltersAndSortParams();
 
-  const response = useQuery({
-    queryKey: ["requestReports", project?.id, page, size],
+  const { refetch, ...response } = useQuery({
+    queryKey: ["requestReports", project?.id, page, size, filters, sort],
     queryFn: () =>
       gqlClient.request<{
         paginatedRequests: { pagination: Pagination; data: RequestReport[] };
       }>(GET_ALL_REQUESTS, {
-        data: { projectId: project?.id, size, page },
+        data: { projectId: project?.id, size, page, filters, sort },
       }),
     enabled: !!project,
   });
@@ -132,8 +135,13 @@ export const useGetRequestReports = ({
     response.data?.paginatedRequests.data?.map(buildTypedRequestReportObject) ??
     [];
 
+  useEffect(() => {
+    refetch();
+  }, [refetch, sort, filters]);
+
   return {
     ...response,
+    refetch,
     data: {
       ...response.data,
       paginatedRequests: {