From 1400bdfe4436980e4dcb437ef8e9bb068dfcd821 Mon Sep 17 00:00:00 2001 From: "use-tusk[bot]" <144006087+use-tusk[bot]@users.noreply.github.com> Date: Tue, 8 Oct 2024 17:34:32 +0000 Subject: [PATCH] fix: address review from kavinvalli --- .../templates/properties/propertyPanel.tsx | 21 ++++++++++++------- .../templates/requestsV2/requestCard.tsx | 5 +++-- .../templates/requestsV2/requestRow.tsx | 5 +++-- .../templates/users/id/userIdPage.tsx | 9 ++++---- web/components/templates/users/userModal.tsx | 12 ++++++----- 5 files changed, 31 insertions(+), 21 deletions(-) diff --git a/web/components/templates/properties/propertyPanel.tsx b/web/components/templates/properties/propertyPanel.tsx index c7eed436e..a69643404 100644 --- a/web/components/templates/properties/propertyPanel.tsx +++ b/web/components/templates/properties/propertyPanel.tsx @@ -35,6 +35,7 @@ import ExportButton from "../../shared/themed/table/exportButton"; import { UIFilterRow } from "../../shared/themed/themedAdvancedFilters"; import ThemedTableHeader from "../../shared/themed/themedHeader"; import useSearchParams from "../../shared/utils/useSearchParams"; +import { formatNumber } from "../users/initialColumns"; interface PropertyPanelProps { property: string; @@ -173,7 +174,7 @@ const PropertyPanel = (props: PropertyPanelProps) => { ) : (
{keyMetrics.totalCost.data?.data - ? `$${keyMetrics.totalCost.data?.data.toFixed(5)}` + ? `$${formatNumber(keyMetrics.totalCost.data?.data)}` : "$0.00"}
)} @@ -188,7 +189,7 @@ const PropertyPanel = (props: PropertyPanelProps) => { ) : (
{keyMetrics.totalRequests.data?.data - ? keyMetrics.totalRequests.data.data.toFixed(2) + ? formatNumber(keyMetrics.totalRequests.data.data) : 0}
)} @@ -203,7 +204,7 @@ const PropertyPanel = (props: PropertyPanelProps) => { ) : (
{keyMetrics.averageLatency.data?.data - ? (keyMetrics.averageLatency.data.data / 1000).toFixed(2) + ? formatNumber(keyMetrics.averageLatency.data.data / 1000) : "n/a"}
)} @@ -286,18 +287,22 @@ const PropertyPanel = (props: PropertyPanelProps) => { {propertyValue.total_requests} - ${propertyValue.total_cost.toFixed(6)} + ${formatNumber(propertyValue.total_cost)} - {propertyValue.avg_completion_tokens_per_request.toFixed( - 6 + {formatNumber( + propertyValue.avg_completion_tokens_per_request )} - {propertyValue.avg_latency_per_request.toFixed(6)} + {formatNumber( + propertyValue.avg_latency_per_request + )} - ${propertyValue.average_cost_per_request.toFixed(6)} + ${formatNumber( + propertyValue.average_cost_per_request + )} diff --git a/web/components/templates/requestsV2/requestCard.tsx b/web/components/templates/requestsV2/requestCard.tsx index 0f4196960..3abbcfd9f 100644 --- a/web/components/templates/requestsV2/requestCard.tsx +++ b/web/components/templates/requestsV2/requestCard.tsx @@ -7,6 +7,7 @@ import CostPill from "./costPill"; import { CustomProperties } from "./customProperties"; import ModelPill from "./modelPill"; import StatusBadge from "./statusBadge"; +import { formatNumber } from "../users/initialColumns"; interface RequestCardProps { request: NormalizedRequest; @@ -75,12 +76,12 @@ const RequestCard = (props: RequestCardProps) => {

- {Number(request.latency) / 1000}s + {formatNumber(Number(request.latency) / 1000)}s

{!request.cost && request.status.code === 200 ? ( ) : request.cost ? ( -

${request.cost.toFixed(4)}

+

${formatNumber(request.cost)}

) : (

)} diff --git a/web/components/templates/requestsV2/requestRow.tsx b/web/components/templates/requestsV2/requestRow.tsx index 3e30a0751..30125b41a 100644 --- a/web/components/templates/requestsV2/requestRow.tsx +++ b/web/components/templates/requestsV2/requestRow.tsx @@ -21,6 +21,7 @@ import StatusBadge from "./statusBadge"; import ThemedModal from "../../shared/themed/themedModal"; import NewDataset from "../datasets/NewDataset"; import { convertToUSDateFormat } from "../../shared/utils/dateConvertor"; +import { formatNumber } from "../users/initialColumns"; function getPathName(url: string) { try { @@ -259,7 +260,7 @@ const RequestRow = (props: { Latency

- {Number(request.latency) / 1000}s + {formatNumber(Number(request.latency) / 1000)}s

  • @@ -268,7 +269,7 @@ const RequestRow = (props: {

    {request.cost !== null && request.cost !== undefined - ? `$${request.cost.toFixed(4)}` + ? `$${formatNumber(request.cost)}` : request.status.statusType === "success" ? "Calculating..." : "N/A"} diff --git a/web/components/templates/users/id/userIdPage.tsx b/web/components/templates/users/id/userIdPage.tsx index 0e3bec088..112af22a9 100644 --- a/web/components/templates/users/id/userIdPage.tsx +++ b/web/components/templates/users/id/userIdPage.tsx @@ -18,6 +18,7 @@ import { import { useRouter } from "next/router"; import HcBreadcrumb from "../../../ui/hcBreadcrumb"; import { IslandContainer } from "@/components/ui/islandContainer"; +import { formatNumber } from "../initialColumns"; interface UserIdPageProps { userId: string; @@ -84,7 +85,7 @@ const UserIdPage = (props: UserIdPageProps) => {

    Total Cost

    - ${Number(user.cost || 0).toFixed(6)} + ${formatNumber(Number(user.cost || 0))}

    @@ -121,7 +122,7 @@ const UserIdPage = (props: UserIdPageProps) => { Average Requests per day

    - {user.average_requests_per_day_active.toFixed(4)} + {formatNumber(user.average_requests_per_day_active)}

    {" "}
    @@ -129,7 +130,7 @@ const UserIdPage = (props: UserIdPageProps) => { Average Tokens per request

    - {user.average_tokens_per_request.toFixed(4)} + {formatNumber(user.average_tokens_per_request)}

    {" "} @@ -191,7 +192,7 @@ const UserIdPage = (props: UserIdPageProps) => { colors={["green"]} showLegend={false} valueFormatter={(value) => { - return `$${Number(value).toFixed(6)}`; + return `$${formatNumber(value)}`; }} curveType="monotone" /> diff --git a/web/components/templates/users/userModal.tsx b/web/components/templates/users/userModal.tsx index dba1283a9..383ea0b0a 100644 --- a/web/components/templates/users/userModal.tsx +++ b/web/components/templates/users/userModal.tsx @@ -26,6 +26,8 @@ import { getTimeMap } from "../../../lib/timeCalculations/constants"; import { useRouter } from "next/router"; import ThemedTabs from "../../../components/shared/themed/themedTabs"; import { UIFilterRow } from "../../shared/themed/themedAdvancedFilters"; +import { formatNumber } from "./initialColumns"; + interface UserModalProps { open: boolean; setOpen: (open: boolean) => void; @@ -45,7 +47,7 @@ const UserModal = (props: UserModalProps) => { const router = useRouter(); const valueFormatter = function (number: number) { - return "$" + number; + return "$" + formatNumber(number); }; const filterMap = DASHBOARD_PAGE_TABLE_FILTERS as SingleFilterDef[]; @@ -271,8 +273,8 @@ const UserModal = (props: UserModalProps) => {

    Total Cost

    -

    {`$${user.cost.toFixed( - 4 +

    {`$${formatNumber( + user.cost )}`}

  • @@ -302,7 +304,7 @@ const UserModal = (props: UserModalProps) => { Average Requests per Day

    - {user.average_requests_per_day_active.toFixed(4)} + {formatNumber(user.average_requests_per_day_active)}

  • @@ -311,7 +313,7 @@ const UserModal = (props: UserModalProps) => {

    {user.average_tokens_per_request - ? user.average_tokens_per_request.toFixed(4) + ? formatNumber(user.average_tokens_per_request) : "N/A"}