diff --git a/web/src/features/keys/components/api-keys-cells.tsx b/web/src/features/keys/components/api-keys-cells.tsx index d72aca89..40df40ca 100644 --- a/web/src/features/keys/components/api-keys-cells.tsx +++ b/web/src/features/keys/components/api-keys-cells.tsx @@ -34,6 +34,7 @@ import { TooltipTrigger, } from '@/components/ui/tooltip' import { copyToClipboard } from '@/lib/copy-to-clipboard' +import { formatQuota } from '@/lib/format' import type { ApiKey } from '../types' import { useApiKeys } from './api-keys-provider' @@ -141,6 +142,40 @@ export function ApiKeyCell({ apiKey }: { apiKey: ApiKey }) { ) } +type UnlimitedQuotaBadgeProps = { + used: number +} + +export function UnlimitedQuotaBadge(props: UnlimitedQuotaBadgeProps) { + const { t } = useTranslation() + const formattedUsed = formatQuota(props.used) + + return ( + + + } + > + + + + + {t('Used:')} {formattedUsed} + + + + ) +} + export function ModelLimitsCell({ apiKey }: { apiKey: ApiKey }) { const { t } = useTranslation() diff --git a/web/src/features/keys/components/api-keys-columns.tsx b/web/src/features/keys/components/api-keys-columns.tsx index a3584a12..645d0513 100644 --- a/web/src/features/keys/components/api-keys-columns.tsx +++ b/web/src/features/keys/components/api-keys-columns.tsx @@ -41,8 +41,9 @@ import type { ApiKey } from '../types' import { ApiKeyTimestampCell } from './api-key-timestamp-cell' import { ApiKeyCell, - ModelLimitsCell, IpRestrictionsCell, + ModelLimitsCell, + UnlimitedQuotaBadge, } from './api-keys-cells' import { DataTableRowActions } from './data-table-row-actions' @@ -145,14 +146,7 @@ export function useApiKeysColumns(now: number): ColumnDef[] { cell: ({ row }) => { const apiKey = row.original if (apiKey.unlimited_quota) { - return ( - - ) + return } const used = apiKey.used_quota diff --git a/web/src/features/keys/components/api-keys-table.tsx b/web/src/features/keys/components/api-keys-table.tsx index 079505b2..3561df52 100644 --- a/web/src/features/keys/components/api-keys-table.tsx +++ b/web/src/features/keys/components/api-keys-table.tsx @@ -53,7 +53,7 @@ import { ERROR_MESSAGES, } from '../constants' import type { ApiKey } from '../types' -import { ApiKeyCell } from './api-keys-cells' +import { ApiKeyCell, UnlimitedQuotaBadge } from './api-keys-cells' import { useApiKeysColumns } from './api-keys-columns' import { useApiKeys } from './api-keys-provider' import { DataTableBulkActions } from './data-table-bulk-actions' @@ -168,7 +168,7 @@ function ApiKeysMobileList({
{t('Quota')} {apiKey.unlimited_quota ? ( - {t('Unlimited')} + ) : ( {formatQuota(apiKey.remain_quota)}