Clickhouse date patch sessions patches

valhalla/jawn/src/managers/organization/OrganizationManager.ts

@@ -353,7 +353,7 @@ export class OrganizationManager extends BaseManager {
       );
 
     if (organizationLayoutError !== null) {
-      return err(organizationLayoutError);
+      return ok({ filters: [], id: "", organization_id: "", type: "" });
     }
     return ok(layout);
   }

valhalla/jawn/src/managers/request/RequestManager.ts

@@ -21,6 +21,14 @@ import { BaseManager } from "../BaseManager";
 import { ScoreManager } from "../score/ScoreManager";
 import { HeliconeScoresMessage } from "../../lib/handlers/HandlerContext";
 
+function toISOStringClickhousePatch(date: string): string {
+  const dateObj = new Date(date);
+  const tzOffset = dateObj.getTimezoneOffset() * 60000;
+
+  const localDateObj = new Date(dateObj.getTime() - tzOffset);
+  return localDateObj.toISOString();
+}
+
 export class RequestManager extends BaseManager {
   private versionedRequestStore: VersionedRequestStore;
   private s3Client: S3Client;
@@ -307,6 +315,15 @@ export class RequestManager extends BaseManager {
         .map((r) => {
           return {
             ...r,
+            request_created_at: toISOStringClickhousePatch(
+              r.request_created_at
+            ),
+            feedback_created_at: r.feedback_created_at
+              ? toISOStringClickhousePatch(r.feedback_created_at)
+              : null,
+            response_created_at: r.response_created_at
+              ? toISOStringClickhousePatch(r.response_created_at)
+              : null,
             costUSD: costOfPrompt({
               model: r.request_model ?? "",
               provider: r.provider ?? "",

web/components/shared/utils/dateConvertor.ts

@@ -0,0 +1,18 @@
+export const convertToUSDateFormat = (date: string) => {
+  const dateObj = new Date(date);
+
+  const formattedDate =
+    [
+      ("0" + (dateObj.getMonth() + 1)).slice(-2),
+      ("0" + dateObj.getDate()).slice(-2),
+      dateObj.getFullYear(),
+    ].join("/") +
+    " " +
+    [
+      ("0" + dateObj.getHours()).slice(-2),
+      ("0" + dateObj.getMinutes()).slice(-2),
+      ("0" + dateObj.getSeconds()).slice(-2),
+    ].join(":");
+
+  return formattedDate;
+};

web/components/templates/requestsV2/initialColumns.tsx

@@ -7,6 +7,7 @@ import { HandThumbDownIcon, HandThumbUpIcon } from "@heroicons/react/24/solid";
 import { clsx } from "../../shared/clsx";
 import CostPill from "./costPill";
 import { COUTNRY_CODE_DIRECTORY } from "./countryCodeDirectory";
+import { convertToUSDateFormat } from "../../shared/utils/dateConvertor";
 
 function formatNumber(num: number) {
   const numParts = num.toString().split(".");
@@ -25,27 +26,6 @@ function formatNumber(num: number) {
   }
 }
 
-const convertToUSDateFormat = (date: string) => {
-  const dateObj = new Date(date);
-  const tzOffset = dateObj.getTimezoneOffset() * 60000;
-
-  const localDateObj = new Date(dateObj.getTime() - tzOffset);
-  const formattedDate =
-    [
-      ("0" + (localDateObj.getMonth() + 1)).slice(-2),
-      ("0" + localDateObj.getDate()).slice(-2),
-      localDateObj.getFullYear(),
-    ].join("/") +
-    " " +
-    [
-      ("0" + localDateObj.getHours()).slice(-2),
-      ("0" + localDateObj.getMinutes()).slice(-2),
-      ("0" + localDateObj.getSeconds()).slice(-2),
-    ].join(":");
-
-  return formattedDate;
-};
-
 export const getInitialColumns: (
   isCached?: boolean
 ) => ColumnDef<NormalizedRequest>[] = (isCached = false) => [

web/components/templates/requestsV2/requestRow.tsx

@@ -20,6 +20,7 @@ import ModelPill from "./modelPill";
 import StatusBadge from "./statusBadge";
 import ThemedModal from "../../shared/themed/themedModal";
 import NewDataset from "../datasets/NewDataset";
+import { convertToUSDateFormat } from "../../shared/utils/dateConvertor";
 
 function getPathName(url: string) {
   try {
@@ -28,26 +29,6 @@ function getPathName(url: string) {
     return url;
   }
 }
-const convertToUSDateFormat = (date: string) => {
-  const dateObj = new Date(date);
-  const tzOffset = dateObj.getTimezoneOffset() * 60000;
-
-  const localDateObj = new Date(dateObj.getTime() - tzOffset);
-  const formattedDate =
-    [
-      ("0" + (localDateObj.getMonth() + 1)).slice(-2),
-      ("0" + localDateObj.getDate()).slice(-2),
-      localDateObj.getFullYear(),
-    ].join("/") +
-    " " +
-    [
-      ("0" + localDateObj.getHours()).slice(-2),
-      ("0" + localDateObj.getMinutes()).slice(-2),
-      ("0" + localDateObj.getSeconds()).slice(-2),
-    ].join(":");
-
-  return formattedDate;
-};
 
 const RequestRow = (props: {
   request: NormalizedRequest;

web/components/templates/sessions/sessionsPage.tsx

@@ -1,7 +1,7 @@
 import { useOrg } from "@/components/layout/organizationContext";
 
 import { Badge } from "@tremor/react";
-import { useEffect, useMemo, useState } from "react";
+import { useMemo, useState } from "react";
 import {
   getTimeIntervalAgo,
   TimeInterval,
@@ -16,6 +16,7 @@ import SessionDetails from "./sessionDetails";
 import { FeatureUpgradeCard } from "@/components/shared/helicone/FeatureUpgradeCard";
 import { InfoBox } from "@/components/ui/helicone/infoBox";
 import Link from "next/link";
+import LoadingAnimation from "@/components/shared/loadingAnimation";
 
 interface SessionsPageProps {
   currentPage: number;
@@ -42,6 +43,7 @@ const SessionsPage = (props: SessionsPageProps) => {
 
   const [sessionIdSearch, setSessionIdSearch] = useState<string>("");
   const names = useSessionNames(sessionIdSearch ?? "");
+  const allNames = useSessionNames("");
 
   const debouncedSessionIdSearch = useDebounce(sessionIdSearch, 500); // 0.5 seconds
   const [selectedName, setSelectedName] = useState<string>("");
@@ -52,17 +54,11 @@ const SessionsPage = (props: SessionsPageProps) => {
     selectedName
   );
 
-  const [hasSomeSessions, setHasSomeSessions] = useState<boolean | null>(null);
-
   const org = useOrg();
 
-  const [isPlanComparisonVisible, setIsPlanComparisonVisible] = useState(false);
-
-  useEffect(() => {
-    if (hasSomeSessions === null && !names.isLoading) {
-      setHasSomeSessions(names.sessions.length > 0);
-    }
-  }, [hasSomeSessions, names.sessions.length, names.isLoading]);
+  const hasSomeSessions = useMemo(() => {
+    return allNames.sessions.length > 0;
+  }, [allNames.sessions.length]);
 
   const hasAccessToSessions = useMemo(() => {
     return (
@@ -92,9 +88,12 @@ const SessionsPage = (props: SessionsPageProps) => {
         </InfoBox>
       )}
       <div>
-        {!isLoading &&
-        hasAccessToSessions &&
-        (hasSomeSessions || hasSomeSessions === null) ? (
+        {allNames.isLoading ? (
+          <div className="flex justify-center items-center min-h-[calc(100vh-200px)]">
+            <LoadingAnimation />
+          </div>
+        ) : hasAccessToSessions &&
+          (hasSomeSessions || hasSomeSessions === null) ? (
           <Row className="gap-5 ">
             <SessionNameSelection
               sessionIdSearch={sessionIdSearch}