feat: add token usage and top questions statistics retrieval

Author: wxg0103

ui/src/api/application/application.ts

@@ -192,6 +192,26 @@ const getStatistics: (
 ) => Promise<Result<any>> = (application_id, data, loading) => {
   return get(`${prefix.value}/${application_id}/application_stats`, data, loading)
 }
+/**
+ * 统计token消耗
+ */
+const getTokenUsage: (
+  application_id: string,
+  data: any,
+  loading?: Ref<boolean>,
+) => Promise<Result<any>> = (application_id, data, loading) => {
+  return get(`${prefix.value}/${application_id}/application_token_usage`, data, loading)
+}
+/**
+ * 统计提问次数
+ */
+const topQuestions: (
+  application_id: string,
+  data: any,
+  loading?: Ref<boolean>,
+) => Promise<Result<any>> = (application_id, data, loading) => {
+  return get(`${prefix.value}/${application_id}/top_questions`, data, loading)
+}
 /**
  * 打开调试对话id
  * @param application_id 应用id
@@ -207,11 +227,11 @@ const open: (application_id: string, loading?: Ref<boolean>) => Promise<Result<s
 
 /**
  * 生成提示词
- * @param workspace_id 
- * @param model_id 
- * @param application_id 
- * @param data 
- * @returns 
+ * @param workspace_id
+ * @param model_id
+ * @param application_id
+ * @param data
+ * @returns
  */
 const generate_prompt: (workspace_id:string ,model_id:string, application_id:string,data: any) => Promise<any> = (
   workspace_id,
@@ -408,5 +428,7 @@ export default {
   speechToText,
   getMcpTools,
   postUploadFile,
-  generate_prompt
+  generate_prompt,
+  getTokenUsage,
+  topQuestions
 }

ui/src/api/system-resource-management/application.ts

@@ -111,6 +111,23 @@ const getStatistics: (
 ) => Promise<Result<any>> = (application_id, data, loading) => {
   return get(`${prefix}/${application_id}/application_stats`, data, loading)
 }
+/**
+ * 统计token消耗
+ */
+const getTokenUsage: (
+  application_id: string,
+  data: any,
+  loading?: Ref<boolean>,
+) => Promise<Result<any>> = (application_id, data, loading) => {
+  return get(`${prefix}/${application_id}/application_token_usage`, data, loading)
+}
+const topQuestions: (
+  application_id: string,
+  data: any,
+  loading?: Ref<boolean>,
+) => Promise<Result<any>> = (application_id, data, loading) => {
+  return get(`${prefix}/${application_id}/top_questions`, data, loading)
+}
 /**
  * 打开调试对话id
  * @param application_id 应用id
@@ -126,10 +143,10 @@ const open: (application_id: string, loading?: Ref<boolean>) => Promise<Result<s
 
 /**
  * 生成提示词
- * @param application_id 
- * @param model_id 
- * @param data 
- * @returns 
+ * @param application_id
+ * @param model_id
+ * @param data
+ * @returns
  */
 const generate_prompt: (application_id:string, model_id:string, data: any) => Promise<any> = (
   application_id,
@@ -174,7 +191,7 @@ const playDemoText: (application_id: string, data: any, loading?: Ref<boolean>)
  * 文本转语音
  */
 const postTextToSpeech: (
-  application_id: String,
+  application_id: string,
   data: any,
   loading?: Ref<boolean>,
 ) => Promise<Result<any>> = (application_id, data, loading) => {
@@ -184,7 +201,7 @@ const postTextToSpeech: (
  * 语音转文本
  */
 const speechToText: (
-  application_id: String,
+  application_id: string,
   data: any,
   loading?: Ref<boolean>,
 ) => Promise<Result<any>> = (application_id, data, loading) => {
@@ -289,7 +306,7 @@ const updatePlatformConfig: (
 /**
  * mcp 节点
  */
-const getMcpTools: (application_id: String, loading?: Ref<boolean>) => Promise<Result<any>> = (
+const getMcpTools: (application_id: string, loading?: Ref<boolean>) => Promise<Result<any>> = (
   application_id,
   loading,
 ) => {
@@ -320,5 +337,7 @@ export default {
   speechToText,
   getMcpTools,
   putXpackAccessToken,
-  generate_prompt
+  generate_prompt,
+  getTokenUsage,
+  topQuestions
 }

ui/src/views/application-overview/component/StatisticsCharts.vue

@@ -13,14 +13,14 @@
       <el-card shadow="never">
         <div class="flex align-center ml-8 mr-8">
           <el-avatar :size="40" shape="square" :style="{ background: item.background }">
-            <appIcon :iconName="item.icon" :style="{ fontSize: '24px', color: item.color }" />
+            <appIcon :iconName="item.icon" :style="{ fontSize: '24px', color: item.color }"/>
           </el-avatar>
           <div class="ml-12">
             <p class="color-secondary lighter mb-4">{{ item.name }}</p>
             <div v-if="item.id !== 'starCharts'" class="flex align-baseline">
               <h2>{{ numberFormat(item.sum?.[0]) }}</h2>
               <span v-if="item.sum.length > 1" class="ml-12" style="color: #f54a45"
-                >+{{ numberFormat(item.sum?.[1]) }}</span
+              >+{{ numberFormat(item.sum?.[1]) }}</span
               >
             </div>
             <div v-else class="flex align-center mr-8">
@@ -47,23 +47,32 @@
     >
       <el-card shadow="never">
         <div class="p-8">
-          <AppCharts height="316px" :id="item.id" type="line" :option="item.option" />
+          <AppCharts height="316px" :id="item.id" type="line" :option="item.option"/>
         </div>
       </el-card>
     </el-col>
   </el-row>
 </template>
 <script setup lang="ts">
-import { ref, computed, onMounted } from 'vue'
+import {ref, computed, onMounted} from 'vue'
 import AppCharts from '@/components/app-charts/index.vue'
-import { getAttrsArray, getSum } from '@/utils/array'
-import { numberFormat } from '@/utils/common'
-import { t } from '@/locales'
+import {getAttrsArray, getSum} from '@/utils/array'
+import {numberFormat} from '@/utils/common'
+import {t} from '@/locales'
+
 const props = defineProps({
   data: {
     type: Array,
     default: () => [],
   },
+  tokenUsage: {
+    type: Array,
+    default: () => [],
+  },
+  topQuestions: {
+     type: Array,
+    default: () => [],
+  }
 })
 const statisticsType = computed(() => [
   {