Function RequestsPage

apps/console/src/pages/requests/RequestsPage.tsx:124–231

()

};

export const RequestsPage = () => {
  usePageTitle("Requests");
  const { projectId } = useCurrentProject();
  const [inspectedRequestId, setInspectedRequestId] =
    useQueryState("inspectedRequestId");
  const [offset, setOffset] = useQueryState("offset", 0);
  const [limit, setLimit] = useQueryState("limit", DEFAULT_PAGE_SIZE);

  const { data: requests, isSuccess } = useGetRequestReports(
    {
      offset: Number(offset),
      limit: Number(limit),
    },
    {
      enabled:
        inspectedRequestId &&
        projectId &&
        offset !== undefined &&
        limit !== undefined,
    }
  );

  const columns = useMemo(() => getTableColumns(), []);

  const pagination = useMemo(
    () => requests?.paginatedRequests?.pagination,
    [requests]
  );
  const paginatedResults = useMemo(
    () => requests?.paginatedRequests?.data ?? [],
    [requests]
  );

  const data: RequestReportItem[] = useMemo(
    () =>
      paginatedResults.map((report: SerializedPaginatedReport) => {
        return {
          reportId: report.id,
          timestamp: report.timestamp,
          status: report.responseStatusCode,
          duration: report.duration ?? 0,
          totalTokens: report.totalTokens ?? 0,
          cost: report.totalCost ?? 0,
          isTestPrompt: report.environment === "PLAYGROUND" || false,
          promptId: null,
          cacheEnabled: report.cacheEnabled,
          cacheHit: report.cacheHit,
          model: report.model,
          modelAuthor: report.modelAuthor,
          provider: report.provider,
        };
      }),
    [paginatedResults]
  );

  return (
    <>
      <Drawer