feat: add monitor provider valueLabel and valueFormatter to custom display

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',
+              name,
-              value: datum.value ? datum.value + 'ms' : 'null',
+              value: datum.value ? formatterFn(datum.value) : 'null',
             };
           },
         },

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<string, any>;
 
-    if (isEmpty(payload.certInfo)) {
-      return null;
-    }
-
     return (
       <MonitorStatsBlock
         title="Usage"
         desc={dayjs(data.updatedAt).format('YYYY-MM-DD')}
-        text={`${payload.totalUsed} / ${payload.totalGranted}`}
+        text={`$${payload.totalUsed} / $${payload.totalGranted}`}
       />
     );
   }
@@ -60,4 +55,6 @@ export const openaiProvider: MonitorProvider = {
   name: 'openai',
   form: MonitorOpenai,
   overview: [MonitorOpenaiOverview],
+  valueLabel: 'Balance',
+  valueFormatter: (value) => `$${value / 100}`,
 };

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<{

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(() => {
           <Tabs
             items={[
               {
-                key: 'script',
+                key: 'auto',
-                label: 'Script',
+                label: 'Auto',
                 children: <InstallScript />,
               },
               {

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,