diff --git a/src/client/components/monitor/MonitorDataChart.tsx b/src/client/components/monitor/MonitorDataChart.tsx index ff73ead..6701a30 100644 --- a/src/client/components/monitor/MonitorDataChart.tsx +++ b/src/client/components/monitor/MonitorDataChart.tsx @@ -6,6 +6,7 @@ import React, { useState, useMemo } from 'react'; import { useSocketSubscribeList } from '../../api/socketio'; import { trpc } from '../../api/trpc'; import { useCurrentWorkspaceId } from '../../store/user'; +import { getMonitorProvider } from './provider'; export const MonitorDataChart: React.FC<{ monitorId: string }> = React.memo( (props) => { @@ -38,6 +39,11 @@ export const MonitorDataChart: React.FC<{ monitorId: string }> = React.memo( return [dayjs().subtract(0.5, 'hour'), dayjs()]; }, [rangeType]); + const { data: monitorInfo } = trpc.monitor.get.useQuery({ + workspaceId, + monitorId, + }); + const { data: _recentData = [] } = trpc.monitor.recentData.useQuery({ workspaceId, monitorId, @@ -51,6 +57,8 @@ export const MonitorDataChart: React.FC<{ monitorId: string }> = React.memo( endAt: range[1].valueOf(), }); + const providerInfo = getMonitorProvider(monitorInfo?.type ?? ''); + const { data, annotations } = useMemo(() => { const annotations: AreaConfig['annotations'] = []; let start: number | null = null; @@ -114,9 +122,16 @@ export const MonitorDataChart: React.FC<{ monitorId: string }> = React.memo( return dayjs(datum.time).format('YYYY-MM-DD HH:mm'); }, formatter(datum) { + const name = providerInfo?.valueLabel + ? providerInfo?.valueLabel + : 'usage'; + const formatterFn = providerInfo?.valueFormatter + ? providerInfo?.valueFormatter + : (value: number) => `${value}ms`; + return { - name: 'usage', - value: datum.value ? datum.value + 'ms' : 'null', + name, + value: datum.value ? formatterFn(datum.value) : 'null', }; }, }, diff --git a/src/client/components/monitor/provider/openai.tsx b/src/client/components/monitor/provider/openai.tsx index d7424ba..72e25f2 100644 --- a/src/client/components/monitor/provider/openai.tsx +++ b/src/client/components/monitor/provider/openai.tsx @@ -5,7 +5,6 @@ import { useCurrentWorkspaceId } from '../../../store/user'; import { trpc } from '../../../api/trpc'; import dayjs from 'dayjs'; import { MonitorStatsBlock } from '../MonitorStatsBlock'; -import { isEmpty } from 'lodash-es'; export const MonitorOpenai: React.FC = React.memo(() => { return ( @@ -40,15 +39,11 @@ export const MonitorOpenaiOverview: MonitorOverviewComponent = React.memo( const payload = data.payload as Record; - if (isEmpty(payload.certInfo)) { - return null; - } - return ( ); } @@ -60,4 +55,6 @@ export const openaiProvider: MonitorProvider = { name: 'openai', form: MonitorOpenai, overview: [MonitorOpenaiOverview], + valueLabel: 'Balance', + valueFormatter: (value) => `$${value / 100}`, }; diff --git a/src/client/components/monitor/provider/types.ts b/src/client/components/monitor/provider/types.ts index 2cf9110..3318c57 100644 --- a/src/client/components/monitor/provider/types.ts +++ b/src/client/components/monitor/provider/types.ts @@ -6,6 +6,8 @@ export interface MonitorProvider { link?: (info: MonitorInfo) => React.ReactNode; form: React.ComponentType; overview?: MonitorOverviewComponent[]; + valueLabel?: string; + valueFormatter?: (value: number) => string; } export type MonitorOverviewComponent = React.ComponentType<{ diff --git a/src/client/pages/Servers.tsx b/src/client/pages/Servers.tsx index 3733e13..850bd44 100644 --- a/src/client/pages/Servers.tsx +++ b/src/client/pages/Servers.tsx @@ -4,8 +4,6 @@ import { Button, Divider, Empty, - Form, - Input, Modal, Popconfirm, Steps, @@ -32,7 +30,6 @@ import { useIntervalUpdate } from '../hooks/useIntervalUpdate'; import clsx from 'clsx'; import { isServerOnline } from '../../shared'; import { defaultErrorHandler, trpc } from '../api/trpc'; -import { useEvent } from '../hooks/useEvent'; import { useRequest } from '../hooks/useRequest'; export const Servers: React.FC = React.memo(() => { @@ -108,8 +105,8 @@ export const Servers: React.FC = React.memo(() => { , }, { diff --git a/src/server/model/monitor/provider/openai.ts b/src/server/model/monitor/provider/openai.ts index 22f9e6d..f44a61b 100644 --- a/src/server/model/monitor/provider/openai.ts +++ b/src/server/model/monitor/provider/openai.ts @@ -36,7 +36,7 @@ export const openai: MonitorProvider<{ const res = await getBillingCreditGrants(sessionKey); - const balance = res.total_granted - res.total_used; + const balance = (res.total_granted - res.total_used) * 100; await saveMonitorStatus(monitor.id, 'credit', { totalGranted: res.total_granted,