feature/1.8-Improve system observability

2026-06-14 20:41:15 +08:00 · 2025-04-27 17:43:51 +08:00
parent 7d255f4be7
commit acfe5b988b
9 changed files with 144 additions and 26 deletions
@@ -957,5 +957,8 @@
  "K6b882d4a": "Avg Token per Subscriber",
  "K6c2d93b6": "Failed to load data, please try again",
  "Kf5eeb9c5": "Avg Token per Subscriber",
-  "K1639a17a": "API Routes Docs"
+  "K1639a17a": "API Routes Docs",
+  "K33bc1ad1": "Input Token",
+  "Ke00ff18b": "Output Token",
+  "K81140e5b": "Total Token"
 }
@@ -979,5 +979,8 @@
  "K6b882d4a": "平均トークン/加入者",
  "K6c2d93b6": "データの読み込みに失敗しました。もう一度お試しください",
  "Kf5eeb9c5": "平均トークン/加入者 統計",
-  "K1639a17a": "APIルートのドキュメント"
+  "K1639a17a": "APIルートのドキュメント",
+  "K33bc1ad1": "入力トークン",
+  "Ke00ff18b": "出力トークン",
+  "K81140e5b": "合計トークン"
 }
@@ -908,5 +908,8 @@
  "K8158a6e4": "平均流量",
  "K6c2d93b6": "加载数据失败，请重试",
  "Kf5eeb9c5": "平均 Token/订阅者统计",
-  "K1639a17a": "API 路由文档"
+  "K1639a17a": "API 路由文档",
+  "K33bc1ad1": "输入 Token",
+  "Ke00ff18b": "输出 Token",
+  "K81140e5b": "总 Token"
 }
@@ -979,5 +979,8 @@
  "K6b882d4a": "每位訂閱者平均 Token",
  "K6c2d93b6": "載入資料失敗，請重試",
  "Kf5eeb9c5": "每位訂閱者平均 Token 統計",
-  "K1639a17a": "API 路由文件"
+  "K1639a17a": "API 路由文件",
+  "K33bc1ad1": "輸入 Token",
+  "Ke00ff18b": "輸出 Token",
+  "K81140e5b": "總計 Token"
 }
@@ -7,7 +7,10 @@ type AreaChartInfo = {
  value: string
  date: string[]
  data: number[]
+  max: string
+  min: string
 }
+
 type ServiceAreaCharProps = {
  customClassNames?: string
  dataInfo?: AreaChartInfo
@@ -101,15 +104,15 @@ const ServiceAreaChart = ({ customClassNames, dataInfo, height }: ServiceAreaCha
        <div className="text-[16px] text-[#999]">{$t(dataInfo?.title || '')}</div>
        <div className="relative top-[-6px]">
          <span className="text-[30px] font-bold">{dataInfo?.value}</span>
-          <div className="absolute top-[5px] right-[8%] flex flex-col items-end">
-            <div className="flex items-center mb-1">
+          <div className="absolute top-[5px] right-[8%] grid grid-cols-[auto_auto] gap-y-1 justify-items-end">
+            <div className="flex justify-center items-center">
              <span className="text-[#ff4683] text-[9px]">▲</span>
-              <span className="ml-1">381 T/s</span>
            </div>
-            <div className="flex items-center">
+            <span className="ml-1 text-right">{dataInfo?.max}</span>
+            <div className="flex justify-center items-center">
              <span className="text-[#4bdb6a] text-[9px]">▼</span>
-              <span className="ml-1">381 T/s</span>
            </div>
+            <span className="ml-1 text-right">{dataInfo?.min}</span>
          </div>
        </div>
      </div>
@@ -20,10 +20,16 @@ type ServiceBarCharProps = {
  height?: number
 }

+
 const ServiceBarChar = ({ customClassNames, dataInfo, height }: ServiceBarCharProps) => {
  const chartRef = useRef<ECharts>(null)
  const [option, setOption] = useState<EChartsOption | undefined>({})
  const [detaultColor] = useState('#5470c6')
+  const tokenMap = {
+    inputToken: $t('输入 Token'),
+    outputToken: $t('输出 Token'),
+    totalToken: $t('总 Token')
+  }
  const setChartOption = (dataInfo: BarChartInfo) => {
    const isNumberArray = typeof dataInfo.data[0] !== 'object'
    const legendData = isNumberArray ? [dataInfo.title] : dataInfo.data.map((item) => item.name)
@@ -42,7 +48,7 @@ const ServiceBarChar = ({ customClassNames, dataInfo, height }: ServiceBarCharPr
      // 为每个数据系列添加一行
      data.forEach((item, index) => {
        const color = item.color
-        const name = item.name
+        const name = tokenMap[item.name as keyof typeof tokenMap] || item.name
        const value = item.value[dataInfo.date.indexOf(params.name)] || 0

        const marker = `<span style="display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:${color};"></span>`
@@ -86,9 +92,14 @@ const ServiceBarChar = ({ customClassNames, dataInfo, height }: ServiceBarCharPr
        containLabel: true
      },
      tooltip: {
-        trigger: 'item',
-        formatter: function (params: { name: string; color: string; seriesIndex?: number }) {
-          return tooltipFormatter(params)
+        trigger: 'axis',
+        axisPointer: {
+          type: 'shadow'
+        },
+        formatter: function (params: any) {
+          // 如果是数组，取第一个参数的name
+          const param = Array.isArray(params) ? params[0] : params
+          return tooltipFormatter(param)
        }
      },
      legend: {
@@ -67,8 +67,13 @@ const ServiceOverview = ({ serviceType }: { serviceType: 'aiService' | 'restServ
        'request_total',
        'token_total',
        'avg_token',
+        'max_token',
+        'min_token',
        'avg_request_per_subscriber',
-        'avg_token_per_subscriber'
+        'avg_token_per_subscriber',
+        'input_token',
+        'output_token',
+        'total_token'
      ],
      eoApiPrefix: 'http://uat.apikit.com:11204/mockApi/aoplatform/api/v1/'
    }).then((response) => {
@@ -80,42 +85,38 @@ const ServiceOverview = ({ serviceType }: { serviceType: 'aiService' | 'restServ
          apiNum: 3,
          serviceKind: 'ai',
          avaliableMonitor: false,
+          maxToken: 100,
+          minToken: 1,
          requestOverview: [
            {
              '2xx': 1.0,
              '4xx': 2.0,
              '5xx': 3.0,
-              fsdf: 4.0
            },
            {
              '2xx': 2.0,
              '4xx': 3.0,
              '5xx': 4.0,
-              fsdf: 5.0
            },
            {
              '2xx': 3.0,
              '4xx': 4.0,
              '5xx': 5.0,
-              fsdf: 6.0
            },
            {
              '2xx': 4.0,
              '4xx': 5.0,
              '5xx': 6.0,
-              fsdf: 7.0
            },
            {
              '2xx': 5.0,
              '4xx': 6.0,
              '5xx': 7.0,
-              fsdf: 8.0
            },
            {
              '2xx': 6.0,
              '4xx': 7.0,
              '5xx': 8.0,
-              fsdf: 9.0
            }
          ],
          tokenOverview: [
@@ -152,7 +153,36 @@ const ServiceOverview = ({ serviceType }: { serviceType: 'aiService' | 'restServ
          ],
          avgTokenOverview: [11, 231, 343, 1414, 25, 362],
          avgRequestPerSubscriberOverview: [1, 2, 3, 4, 5, 6],
-          avgTokenPerSubscriberOverview: [4, 5, 1, 11, 4, 9],
+          avgTokenPerSubscriberOverview: [{
+            inputToken: 1.0,
+            outputToken: 2.0,
+            totalToken: 3.0
+          },
+          {
+            inputToken: 22.0,
+            outputToken: 3.0,
+            totalToken: 44.0
+          },
+          {
+            inputToken: 42.0,
+            outputToken: 15.0,
+            totalToken: 6.0
+          },
+          {
+            inputToken: 5.0,
+            outputToken: 16.0,
+            totalToken: 7.0
+          },
+          {
+            inputToken: 6.0,
+            outputToken: 37.0,
+            totalToken: 8.0
+          },
+          {
+            inputToken: 64.0,
+            outputToken: 7.0,
+            totalToken: 8.0
+          }],
          requestTotal: '12 GB',
          tokenTotal: '14 GB',
          avgToken: '1 k',
@@ -208,6 +238,8 @@ const ServiceOverview = ({ serviceType }: { serviceType: 'aiService' | 'restServ
        data: serviceOverview.avgResponseTimeOverview,
        value: serviceOverview.avgResponseTime,
        date: serviceOverview.date,
+        max: serviceOverview.maxResponseTime,
+        min: serviceOverview.minResponseTime,
        type: 'area'
      },
      // 平均请求
@@ -264,6 +296,8 @@ const ServiceOverview = ({ serviceType }: { serviceType: 'aiService' | 'restServ
        data: serviceOverview.avgTokenOverview,
        value: serviceOverview.avgToken,
        date: serviceOverview.date,
+        min: serviceOverview.minToken,
+        max: serviceOverview.maxToken,
        type: 'area'
      },
      // 平均请求
@@ -276,7 +310,10 @@ const ServiceOverview = ({ serviceType }: { serviceType: 'aiService' | 'restServ
      // 评价 token 消耗
      setBarChartInfoData({
        title: $t('平均 Token/订阅者统计'),
-        data: serviceOverview.avgTokenPerSubscriberOverview,
+        data: serviceOverview.avgTokenPerSubscriberOverview.map((item: { inputToken: number; outputToken: number }) => ({
+          inputToken: item.inputToken,
+          outputToken: item.outputToken
+        })),
        value: serviceOverview.avgTokenPerSubscriber,
        date: serviceOverview.date
      })
@@ -301,6 +338,8 @@ const ServiceOverview = ({ serviceType }: { serviceType: 'aiService' | 'restServ
        'avg_traffic_per_subscriber_overview',
        'request_total',
        'traffic_total',
+        'max_response_time',
+        'min_response_time',
        'avg_response_time',
        'avg_request_per_subscriber',
        'avg_traffic_per_subscriber'
@@ -315,6 +354,8 @@ const ServiceOverview = ({ serviceType }: { serviceType: 'aiService' | 'restServ
          apiNum: 3,
          serviceKind: 'ai',
          avaliableMonitor: false,
+          maxResponseTime: 110,
+          minResponseTime: 31,
          requestOverview: [
            {
              '2xx': 1.0,
@@ -29,6 +29,9 @@ export const setBarChartInfoData = ({ title, value, data, date }: BarData) => {
    '2xx': '#7EC26A',
    '4xx': '#F2CF59',
    '5xx': '#F17975',
+    inputToken:'#7EC26A',
+    outputToken: '#F2CF59',
+    totalToken: '#F17975',
    '200': '#7EC26A',
    '400': '#F2CF59',
    '500': '#F17975'
@@ -60,6 +60,8 @@ export default function DashboardTotal() {
        'request_total',
        'token_total',
        'avg_token',
+        'min_token',
+        'max_token',
        'avg_request_per_subscriber',
        'avg_token_per_subscriber'
      ],
@@ -138,9 +140,42 @@ export default function DashboardTotal() {
              '5xx': 8.0
            }
          ],
+          minToken: '1 k',
+          maxToken: '10 k',
          avgTokenOverview: [11, 231, 343, 1414, 25, 362],
          avgRequestPerSubscriberOverview: [1, 2, 3, 4, 5, 6],
-          avgTokenPerSubscriberOverview: [4, 5, 1, 11, 4, 9],
+          avgTokenPerSubscriberOverview: [
+            {
+              inputToken: 1.0,
+              outputToken: 2.0,
+              totalToken: 3.0
+            },
+            {
+              inputToken: 22.0,
+              outputToken: 3.0,
+              totalToken: 44.0
+            },
+            {
+              inputToken: 42.0,
+              outputToken: 15.0,
+              totalToken: 6.0
+            },
+            {
+              inputToken: 5.0,
+              outputToken: 16.0,
+              totalToken: 7.0
+            },
+            {
+              inputToken: 6.0,
+              outputToken: 37.0,
+              totalToken: 8.0
+            },
+            {
+              inputToken: 64.0,
+              outputToken: 7.0,
+              totalToken: 8.0
+            }
+          ],
          requestTotal: '12 GB',
          tokenTotal: '14 GB',
          avgToken: '1 k',
@@ -172,6 +207,8 @@ export default function DashboardTotal() {
        'request_total',
        'traffic_total',
        'avg_response_time',
+        'max_response_time',
+        'min_response_time',
        'avg_request_per_subscriber',
        'avg_traffic_per_subscriber'
      ],
@@ -254,15 +291,17 @@ export default function DashboardTotal() {
          avgResponseTimeOverview: [123, 232, 443, 54, 125, 61],
          avgTrafficPerSubscriberOverview: [44, 235, 11, 114, 234, 239],
          requestTotal: '11 GB',
+          minResponseTime: '1 k',
+          maxResponseTime: '102 k',
          trafficTotal: '22 GB',
          avgResponseTime: '33 k',
          avgRequestPerSubscriber: '44 k',
          avgTrafficPerSubscriber: '55 k',
          date: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
        }
-        // 设置 REST 服务数据
+        // 存储 REST 服务数据
        setRestServiceOverview(serviceOverview)
-        // 存储 REST 报表数据
+        // 设置 REST 报表数据
        setRestChartInfoData(serviceOverview)
      } else {
        message.error(msg || $t(RESPONSE_TIPS.error))
@@ -299,6 +338,8 @@ export default function DashboardTotal() {
        data: serviceOverview.avgResponseTimeOverview,
        value: serviceOverview.avgResponseTime,
        date: serviceOverview.date,
+        min: serviceOverview.minResponseTime,
+        max: serviceOverview.maxResponseTime,
        type: 'area'
      },
      // 平均请求
@@ -347,6 +388,8 @@ export default function DashboardTotal() {
        data: serviceOverview.avgTokenOverview,
        value: serviceOverview.avgToken,
        date: serviceOverview.date,
+        min: serviceOverview.minToken,
+        max: serviceOverview.maxToken,
        type: 'area'
      },
      // 平均请求
@@ -359,7 +402,12 @@ export default function DashboardTotal() {
      // 平均 token 消耗
      setBarChartInfoData({
        title: $t('平均 Token/订阅者统计'),
-        data: serviceOverview.avgTokenPerSubscriberOverview,
+        data: serviceOverview.avgTokenPerSubscriberOverview.map(
+          (item: { inputToken: number; outputToken: number }) => ({
+            inputToken: item.inputToken,
+            outputToken: item.outputToken
+          })
+        ),
        value: serviceOverview.avgTokenPerSubscriber,
        date: serviceOverview.date
      })