feat: improve model rate limit tracking

2026-05-12 03:22:29 +08:00
parent 05632172d0
commit ba850a06c6
25 changed files with 1223 additions and 96 deletions
@@ -1,6 +1,6 @@
 import { useEffect, useMemo, useState, type FormEvent, type ReactNode } from 'react';
-import { Boxes, CheckCircle2, Globe2, KeyRound, Pencil, Plus, RotateCcw, Search, ServerCog, ShieldCheck, SlidersHorizontal, Trash2, X } from 'lucide-react';
-import type { BaseModelCatalogItem, CatalogProvider, IntegrationPlatform, PlatformModel, PricingRuleSet } from '@easyai-ai-gateway/contracts';
+import { Boxes, CheckCircle2, Gauge, Globe2, KeyRound, Pencil, Plus, RotateCcw, Search, ServerCog, ShieldCheck, SlidersHorizontal, Trash2, X } from 'lucide-react';
+import type { BaseModelCatalogItem, CatalogProvider, IntegrationPlatform, ModelRateLimitStatus, PlatformModel, PricingRuleSet } from '@easyai-ai-gateway/contracts';
 import { Badge, Button, Card, CardContent, CardHeader, CardTitle, ConfirmDialog, EmptyState, FormDialog, Input, Label, ScreenMessage, Select, Table, TableCell, TableHead, TableRow } from '../../components/ui';
 import type { LoadState, PlatformWithModelsInput } from '../../types';
 import {
@@ -22,8 +22,9 @@ import { ModelCatalogCard } from './ModelCatalogCard';

 export function PlatformManagementPanel(props: {
  baseModels: BaseModelCatalogItem[];
-  message: string;
-  networkProxyConfig: { globalHttpProxy?: string; globalHttpProxySet: boolean; globalHttpProxySource?: string } | null;
+	  message: string;
+	  modelRateLimits: ModelRateLimitStatus[];
+	  networkProxyConfig: { globalHttpProxy?: string; globalHttpProxySet: boolean; globalHttpProxySource?: string } | null;
  platforms: IntegrationPlatform[];
  platformModels: PlatformModel[];
  pricingRuleSets: PricingRuleSet[];
@@ -33,8 +34,9 @@ export function PlatformManagementPanel(props: {
  onSavePlatform: (input: PlatformWithModelsInput) => Promise<void>;
 }) {
  const defaultProvider = props.providers[0]?.providerKey ?? props.baseModels[0]?.providerKey ?? '';
+  const [now, setNow] = useState(() => Date.now());
  const [dialogOpen, setDialogOpen] = useState(false);
-  const [viewMode, setViewMode] = useState<'platforms' | 'models'>('platforms');
+	  const [viewMode, setViewMode] = useState<'platforms' | 'models' | 'limits'>('platforms');
  const [modelQuery, setModelQuery] = useState('');
  const [selectedPlatformId, setSelectedPlatformId] = useState('');
  const [validationMessage, setValidationMessage] = useState('');
@@ -72,6 +74,11 @@ export function PlatformManagementPanel(props: {
    });
  }, [modelQuery, platformMap, props.platformModels, selectedModelPlatformId]);

+  useEffect(() => {
+    const timer = window.setInterval(() => setNow(Date.now()), 1000);
+    return () => window.clearInterval(timer);
+  }, []);
+
  function openCreateDialog() {
    const provider = providerOptions[0] ?? '';
    const providerName = providerDisplayName(provider, providerMap);
@@ -166,12 +173,14 @@ export function PlatformManagementPanel(props: {
          </Button>
        </CardHeader>
        <CardContent>
-          <div className="platformViewTabs">
-            <button type="button" data-active={viewMode === 'platforms'} onClick={() => setViewMode('platforms')}>平台视图</button>
-            <button type="button" data-active={viewMode === 'models'} onClick={() => setViewMode('models')}>模型视图</button>
-          </div>
-          {viewMode === 'platforms' ? (
-            <PlatformTable
+	          <div className="platformViewTabs">
+	            <button type="button" data-active={viewMode === 'platforms'} onClick={() => setViewMode('platforms')}>平台视图</button>
+	            <button type="button" data-active={viewMode === 'models'} onClick={() => setViewMode('models')}>模型视图</button>
+	            <button type="button" data-active={viewMode === 'limits'} onClick={() => setViewMode('limits')}>实时限流</button>
+	          </div>
+	          {viewMode === 'platforms' ? (
+	            <PlatformTable
+              now={now}
              platformModelCount={platformModelCount}
              platforms={props.platforms}
              providerMap={providerMap}
@@ -180,8 +189,8 @@ export function PlatformManagementPanel(props: {
              onCreate={openCreateDialog}
              onEdit={openEditDialog}
            />
-          ) : (
-            <PlatformModelTable
+	          ) : viewMode === 'models' ? (
+	            <PlatformModelTable
              baseModels={props.baseModels}
              modelQuery={modelQuery}
              models={filteredPlatformModels}
@@ -190,9 +199,12 @@ export function PlatformManagementPanel(props: {
              platforms={props.platforms}
              providerMap={providerMap}
              onModelQueryChange={setModelQuery}
-              onPlatformChange={setSelectedPlatformId}
-            />
-          )}
+              now={now}
+	              onPlatformChange={setSelectedPlatformId}
+	            />
+	          ) : (
+	            <RateLimitStatusTable statuses={props.modelRateLimits} platformMap={platformMap} now={now} />
+	          )}
          {props.message && <p className="formMessage">{props.message}</p>}
        </CardContent>
      </Card>
@@ -391,6 +403,7 @@ function ModelBindingPolicy(props: { form: PlatformWizardForm; onChange: (value:
 }

 function PlatformTable(props: {
+  now: number;
  platformModelCount: Map<string, number>;
  platforms: IntegrationPlatform[];
  providerMap: Map<string, CatalogProvider>;
@@ -428,6 +441,7 @@ function PlatformTable(props: {
        const pricing = platformPricingSummary(platform, props.pricingRuleSets);
        const rateLimit = platformRateLimitSummary(platform.rateLimitPolicy);
        const runtime = platformRuntimeSummary(platform);
+        const platformCooldownMs = cooldownRemainingMs(platform.cooldownUntil, props.now);
        return (
          <TableRow key={platform.id}>
            <TableCell>
@@ -458,8 +472,14 @@ function PlatformTable(props: {
            <TableCell>{props.platformModelCount.get(platform.id) ?? 0}</TableCell>
            <TableCell>
              <span className="platformTableName">
-                <strong><Badge variant={platform.status === 'enabled' ? 'success' : 'secondary'}>{platform.status}</Badge></strong>
-                <small>{runtime}</small>
+                <strong>
+                  {platformCooldownMs > 0 ? (
+                    <Badge variant="warning">冷却中</Badge>
+                  ) : (
+                    <Badge variant={platform.status === 'enabled' ? 'success' : 'secondary'}>{platform.status}</Badge>
+                  )}
+                </strong>
+                <small>{platformCooldownMs > 0 ? `剩余 ${formatCooldownRemaining(platformCooldownMs)}` : runtime}</small>
              </span>
            </TableCell>
            <TableCell>
@@ -487,6 +507,7 @@ function PlatformModelTable(props: {
  platformMap: Map<string, IntegrationPlatform>;
  platforms: IntegrationPlatform[];
  providerMap: Map<string, CatalogProvider>;
+  now: number;
  onModelQueryChange: (value: string) => void;
  onPlatformChange: (value: string) => void;
 }) {
@@ -520,12 +541,14 @@ function PlatformModelTable(props: {
              const provider = platform ? props.providerMap.get(platform.provider) : undefined;
              const baseModel = findBaseModelForPlatformModel(platform, props.baseModels, model);
              const modelIconPath = readPlatformModelIconPath(model, baseModel);
+              const modelCooldownMs = cooldownRemainingMs(model.cooldownUntil, props.now);
              return (
                <ModelCatalogCard
                  key={model.id}
                  badges={[
-                    <Badge variant="outline">{model.modelType.join(', ')}</Badge>,
-                    <Badge variant={model.enabled ? 'success' : 'secondary'}>{model.enabled ? 'enabled' : 'disabled'}</Badge>,
+                    <Badge key="type" variant="outline">{model.modelType.join(', ')}</Badge>,
+                    ...(modelCooldownMs > 0 ? [<Badge key="cooldown" variant="warning">冷却中 · {formatCooldownRemaining(modelCooldownMs)}</Badge>] : []),
+                    <Badge key="enabled" variant={model.enabled ? 'success' : 'secondary'}>{model.enabled ? 'enabled' : 'disabled'}</Badge>,
                  ]}
                  chips={platformModelChips(model)}
                  iconPath={modelIconPath || provider?.iconPath}
@@ -545,6 +568,62 @@ function PlatformModelTable(props: {
          <EmptyState title="没有匹配的模型" description="换个平台或搜索关键词试试。" />
        )
      )}
+    </section>
+	  );
+	}
+
+function RateLimitStatusTable(props: { statuses: ModelRateLimitStatus[]; platformMap: Map<string, IntegrationPlatform>; now: number }) {
+  if (!props.statuses.length) {
+    return <EmptyState title="暂无限流状态" description="模型产生请求后会在这里显示实时 RPM、TPM 和并发窗口。" />;
+  }
+  return (
+    <section className="platformLimitView">
+      <div className="platformLimitHeader">
+        <span><Gauge size={15} />按综合满载率从高到低排序</span>
+        <small>每 3 秒刷新一次；TPM 显示已结算 + 预占。</small>
+      </div>
+      <div className="platformLimitTableViewport">
+        <Table className="platformDataTable platformLimitTable">
+          <TableRow className="shTableHeader">
+            <TableHead>模型</TableHead>
+            <TableHead>平台</TableHead>
+            <TableHead>并发</TableHead>
+            <TableHead>TPM</TableHead>
+            <TableHead>RPM</TableHead>
+            <TableHead>状态</TableHead>
+            <TableHead>满载率</TableHead>
+          </TableRow>
+          {props.statuses.map((status) => {
+            const platform = props.platformMap.get(status.platformId);
+            return (
+              <TableRow key={status.platformModelId}>
+                <TableCell>
+                  <span className="platformTableName">
+                    <strong>{status.displayName || status.modelAlias || status.modelName}</strong>
+                    <small>{status.providerModelName || status.modelName}</small>
+                  </span>
+                </TableCell>
+                <TableCell>
+                  <span className="platformTableName">
+                    <strong>{platform ? platformDisplayName(platform) : status.platformName}</strong>
+                    <small>{status.provider}</small>
+                  </span>
+                </TableCell>
+                <TableCell>{metricCell(status.concurrent)}</TableCell>
+                <TableCell>{metricCell(status.tpm, true)}</TableCell>
+                <TableCell>{metricCell(status.rpm)}</TableCell>
+                <TableCell>{modelRuntimeStatusCell(status, props.now)}</TableCell>
+                <TableCell>
+                  <span className="rateLoadCell">
+                    <strong>{formatPercent(status.loadRatio)}</strong>
+                    <span className="rateLoadTrack"><i style={{ width: `${Math.min(status.loadRatio * 100, 100)}%` }} /></span>
+                  </span>
+                </TableCell>
+              </TableRow>
+            );
+          })}
+        </Table>
+      </div>
    </section>
  );
 }
@@ -1112,7 +1191,63 @@ function rateLimitMetricText(metric: string) {
    concurrent: '并发',
    queue_size: '队列',
  };
-  return labels[metric] ?? metric;
+	  return labels[metric] ?? metric;
+	}
+
+function metricCell(metric: ModelRateLimitStatus['rpm'], includeReserved = false) {
+  if (!metric.limited) return <span className="rateMetricCell"><strong>{formatLimit(metric.currentValue)} / 不限</strong><small>未配置上限</small></span>;
+  return (
+    <span className="rateMetricCell">
+      <strong>{formatLimit(metric.currentValue)} / {formatLimit(metric.limitValue)}</strong>
+      <small>{includeReserved && metric.reservedValue > 0 ? `已用 ${formatLimit(metric.usedValue)} · 预占 ${formatLimit(metric.reservedValue)}` : `窗口 ${formatPercent(metric.ratio)}`}</small>
+    </span>
+  );
+}
+
+function modelRuntimeStatusCell(status: ModelRateLimitStatus, now: number) {
+  const modelCooldownMs = cooldownRemainingMs(status.modelCooldownUntil, now);
+  const platformCooldownMs = cooldownRemainingMs(status.platformCooldownUntil, now);
+  if (modelCooldownMs > 0) {
+    return (
+      <span className="platformTableName">
+        <strong><Badge variant="warning">模型冷却中</Badge></strong>
+        <small>剩余 {formatCooldownRemaining(modelCooldownMs)}</small>
+      </span>
+    );
+  }
+  if (platformCooldownMs > 0) {
+    return (
+      <span className="platformTableName">
+        <strong><Badge variant="warning">平台冷却中</Badge></strong>
+        <small>剩余 {formatCooldownRemaining(platformCooldownMs)}</small>
+      </span>
+    );
+  }
+  return (
+    <span className="platformTableName">
+      <strong><Badge variant={status.enabled ? 'success' : 'secondary'}>{status.enabled ? '可用' : '已停用'}</Badge></strong>
+      <small>{status.enabled ? '参与路由' : '不参与路由'}</small>
+    </span>
+  );
+}
+
+function cooldownRemainingMs(cooldownUntil: string | undefined, now: number) {
+  if (!cooldownUntil) return 0;
+  const until = Date.parse(cooldownUntil);
+  if (!Number.isFinite(until)) return 0;
+  return Math.max(until - now, 0);
+}
+
+function formatCooldownRemaining(milliseconds: number) {
+  const minutes = milliseconds / 60000;
+  if (minutes >= 1) return `${trimNumber(Math.ceil(minutes * 10) / 10)} 分钟`;
+  const seconds = Math.ceil(milliseconds / 1000);
+  return `${Math.max(seconds, 1)} 秒`;
+}
+
+function formatPercent(value: number) {
+  if (!Number.isFinite(value) || value <= 0) return '0%';
+  return `${trimNumber(value * 100)}%`;
 }

 function platformRuntimeSummary(platform: IntegrationPlatform) {