diff --git a/src/client/components/monitor/MonitorInfoEditor.tsx b/src/client/components/monitor/MonitorInfoEditor.tsx index 04554b0..1cd7154 100644 --- a/src/client/components/monitor/MonitorInfoEditor.tsx +++ b/src/client/components/monitor/MonitorInfoEditor.tsx @@ -32,9 +32,11 @@ export const MonitorInfoEditor: React.FC = React.memo( const initialValues = props.initialValues ?? defaultValues; const isEdit = Boolean(initialValues.id); - const formEl = useMemo(() => { - const provider = getMonitorProvider(typeValue); + const provider = useMemo(() => { + return getMonitorProvider(typeValue); + }, [typeValue]); + const formEl = useMemo(() => { if (!provider) { return null; } @@ -42,7 +44,7 @@ export const MonitorInfoEditor: React.FC = React.memo( const Component = provider.form; return ; - }, [typeValue]); + }, [provider]); const handleSubmit = useEvent((values) => { props.onSave({ @@ -81,7 +83,11 @@ export const MonitorInfoEditor: React.FC = React.memo( name="interval" rules={[{ required: true }]} > - + {formEl} diff --git a/src/client/components/monitor/provider/openai.tsx b/src/client/components/monitor/provider/openai.tsx index 72e25f2..9cb7455 100644 --- a/src/client/components/monitor/provider/openai.tsx +++ b/src/client/components/monitor/provider/openai.tsx @@ -57,4 +57,5 @@ export const openaiProvider: MonitorProvider = { overview: [MonitorOpenaiOverview], valueLabel: 'Balance', valueFormatter: (value) => `$${value / 100}`, + minInterval: 300, // min allow request in 5 minute, avoid to pressure for chatgpt }; diff --git a/src/client/components/monitor/provider/types.ts b/src/client/components/monitor/provider/types.ts index 3318c57..d9a5269 100644 --- a/src/client/components/monitor/provider/types.ts +++ b/src/client/components/monitor/provider/types.ts @@ -6,8 +6,24 @@ export interface MonitorProvider { link?: (info: MonitorInfo) => React.ReactNode; form: React.ComponentType; overview?: MonitorOverviewComponent[]; + + /** + * Custom chart value label name + */ valueLabel?: string; + + /** + * Custom chart value label number display + */ valueFormatter?: (value: number) => string; + /** + * Minimum value of this provider + * + * Helps reduce pressure on third-party services + * + * unit: second + */ + minInterval?: number; } export type MonitorOverviewComponent = React.ComponentType<{