[feature] ai, change fetch to grafana proxy

**Phenomenon and reproduction steps**

none

**Root cause and solution**

none

**Impactions**

none

**Test method**

none

**Affected branch(es)**

- main

**Checklist**

- [ ] Dependencies update required
- [ ] Common bug (similar problem in other repo)

Author: twou12031

deepflow-apptracing-panel/src/components/AskGPT.tsx

@@ -265,7 +265,7 @@ export const AskGPT: React.FC<Props> = ({ data }) => {
         })
         .flat()
       setAiEngines(list)
-      setCheckedAiEngine(list.filter(e => !e.disabled)?.[0].value || '')
+      setCheckedAiEngine(list.filter(e => !e.disabled)?.[0]?.value || '')
     } catch (error: any) {
       setErrorMsg(`GET ENGINES FAILED: ${error.message}`)
       setDrawerData({
@@ -345,7 +345,7 @@ export const AskGPT: React.FC<Props> = ({ data }) => {
               }}
               onClick={onStartRequestClick}
               icon={drawerData.inRequest ? 'fa fa-spinner' : 'info'}
-              variant={errorMsg !== '' ? 'destructive' : drawerData.inRequest ? 'secondary' : 'primary'}
+              variant={drawerData.inRequest ? 'secondary' : 'primary'}
             >
               {requestBtnText}
             </Button>
@@ -355,7 +355,7 @@ export const AskGPT: React.FC<Props> = ({ data }) => {
                 width: '16px',
                 height: '16px',
                 position: 'absolute',
-                right: '110px',
+                right: '115px',
                 top: '7px',
                 opacity: drawerData.inRequest ? 0 : 1
               }}

deepflow-querier-datasource/src/datasource.ts

@@ -335,38 +335,24 @@ export class DataSource extends DataSourceWithBackend<MyQuery, MyDataSourceOptio
   }
 
   async getAIConfigs() {
-    const { aiUrl } = DATA_SOURCE_SETTINGS
-    if (!aiUrl) {
-      throw new Error('Please set AI url in datasource settings.')
-    }
-    return await fetch(`${aiUrl}/v1/llm_agent_config`, {
-      method: 'GET'
-    })
-      .then(response => {
-        if (!response.ok) {
-          throw Error(response.statusText)
-        }
-        return response
-      })
-      // 注意这个API支持多个点，但我们用多个API并行查
-      .then(async res => {
-        const { DATA } = await res.json()
+    const fetchOption = {
+      method: 'get',
+      url: `${DATA_SOURCE_SETTINGS.basicUrl}/ai/v1/llm_agent_config`
+    } as BackendSrvRequest
+    return await getBackendSrv()
+      .fetch(fetchOption)
+      .toPromise()
+      .then((res: any) => {
+        const { DATA } = res.data
         return DATA
       })
-      .catch(e => {
-        throw new Error(`请求数据失败: ${e}`)
-      })
   }
 
   async askGPTRequest(
     engine: { platform: string; engine_name: string },
     postData: { system_content: string; user_content: string },
     receiveFn: any
   ) {
-    const { aiUrl } = DATA_SOURCE_SETTINGS
-    if (!aiUrl) {
-      throw new Error('Please set AI url in datasource settings.')
-    }
     let answer = ''
 
     const onStreamEnd = () => {
@@ -384,56 +370,24 @@ export class DataSource extends DataSourceWithBackend<MyQuery, MyDataSourceOptio
         streamer
       })
     }, 32)
-    const callback = (chunk: string) => {
-      answer += chunk
-      streamer.write(chunk)
-    }
-    // @ts-ignore
-    const getGPTAnswerHandler = async (reader, callback) => {
-      // @ts-ignore
-      const handleData = async ({ done, value }) => {
-        if (done) {
-          return
-        }
-        // 将收到的数据处理为字符串
-        const chunk = new TextDecoder().decode(value)
-        // 处理单个数据块
-        if (!callback) {
-          throw Error('chunked需要指定callback')
-        }
-        callback(chunk)
-        // 继续等待下一个数据块
-        // reader.read().then(handleData)
-        const res = await reader.read()
-        return handleData(res)
-      }
-      const res = await reader.read()
-      return handleData(res)
-    }
-    await fetch(`${aiUrl}/v1/ai/stream/${engine.platform}?engine=${engine.engine_name}`, {
-      method: 'POST',
+
+    const fetchOption = {
+      method: 'post',
+      url: `${DATA_SOURCE_SETTINGS.basicUrl}/ai/v1/ai/stream/${engine.platform}?engine=${engine.engine_name}`,
+      responseType: 'text',
       headers: {
         'Content-Type': 'application/json'
-        // 'x-user-id': '1',
-        // 'x-user-type': '1'
       },
-      body: JSON.stringify(postData)
-    })
-      .then(response => {
-        if (!response.ok) {
-          throw Error(response.statusText)
-        }
-        return response
-      })
-      // 注意这个API支持多个点，但我们用多个API并行查
-      .then(async res => {
-        const reader = res.body?.getReader()
-        await getGPTAnswerHandler(reader, callback)
+      data: JSON.stringify(postData)
+    } as BackendSrvRequest
+    await getBackendSrv()
+      .fetch(fetchOption)
+      .toPromise()
+      .then((res: any) => {
+        answer = res.data
+        streamer.write(res.data)
       })
-      .catch(e => {
-        throw new Error(`请求数据失败: ${e}`)
-      })
-
+    
     streamer.end()
   }
 }

deepflow-querier-datasource/src/plugin.json

@@ -74,15 +74,11 @@
     },
     {
       "path": "ai",
-      "url": "http://earth.df",
+      "url": "{{ .JsonData.aiUrl }}",
       "headers": [
         {
           "name": "Content-Type",
           "content": "application/json"
-        },
-        {
-          "name": "Authorization",
-          "content": "Bearer gAAAAABkmWHtindtStIzizwp2tor8x2bWk3l0IEacEf3KDF-bEHfI8VQOc3Bs-r_rgfoAoHKpmkfKQzlDWWYQ2T_wPEnhW0KLzkZr_qRtqSl-58BVr9wDnhRXVaR2oMPORN7atGexZpCYJ0in9vY0cMp9f6RHVRa-l_quQ2GbDwak6jq6yeyeGRFyiRg5nkWGeu0mn9R97MM"
         }
       ]
     }

deepflow-topo-panel/src/components/AskGPT.tsx

@@ -260,7 +260,7 @@ export const AskGPT: React.FC<Props> = ({ data }) => {
         })
         .flat()
       setAiEngines(list)
-      setCheckedAiEngine(list.filter(e => !e.disabled)?.[0].value || '')
+      setCheckedAiEngine(list.filter(e => !e.disabled)?.[0]?.value || '')
     } catch (error: any) {
       setErrorMsg(`GET ENGINES FAILED: ${error.message}`)
       setDrawerData({
@@ -340,7 +340,7 @@ export const AskGPT: React.FC<Props> = ({ data }) => {
               }}
               onClick={onStartRequestClick}
               icon={drawerData.inRequest ? 'fa fa-spinner' : 'info'}
-              variant={errorMsg !== '' ? 'destructive' : drawerData.inRequest ? 'secondary' : 'primary'}
+              variant={drawerData.inRequest ? 'secondary' : 'primary'}
             >
               {requestBtnText}
             </Button>
@@ -350,7 +350,7 @@ export const AskGPT: React.FC<Props> = ({ data }) => {
                 width: '16px',
                 height: '16px',
                 position: 'absolute',
-                right: '110px',
+                right: '115px',
                 top: '7px',
                 opacity: drawerData.inRequest ? 0 : 1
               }}