From 2ee77e39ffca1aae3fb820b00efbbf6148600334 Mon Sep 17 00:00:00 2001 From: williamhliu <137068196+williamhliu@users.noreply.github.com> Date: Tue, 15 Oct 2024 10:24:27 +0800 Subject: [PATCH] (feature)(chat-sdk) add export error msg and export data (#1803) --- webapp/packages/chat-sdk/src/common/type.ts | 1 + .../src/components/ChatItem/ExecuteItem.tsx | 72 ++++++++++++------- .../src/components/ChatItem/ParseTip.tsx | 4 +- .../src/components/ChatItem/SqlItem.tsx | 15 +++- .../src/components/ChatItem/index.tsx | 5 +- .../src/components/ChatItem/style.less | 14 ++++ webapp/packages/chat-sdk/src/utils/utils.ts | 27 +++++++ 7 files changed, 109 insertions(+), 29 deletions(-) diff --git a/webapp/packages/chat-sdk/src/common/type.ts b/webapp/packages/chat-sdk/src/common/type.ts index 17be67340..3a74b47a1 100644 --- a/webapp/packages/chat-sdk/src/common/type.ts +++ b/webapp/packages/chat-sdk/src/common/type.ts @@ -148,6 +148,7 @@ export type MsgDataType = { similarQueries: SimilarQuestionType[]; recommendedDimensions: DrillDownDimensionType[]; textResult: string; + errorMsg: string; }; export enum ParseStateEnum { diff --git a/webapp/packages/chat-sdk/src/components/ChatItem/ExecuteItem.tsx b/webapp/packages/chat-sdk/src/components/ChatItem/ExecuteItem.tsx index 0a0fa9fdc..ecd64ee33 100644 --- a/webapp/packages/chat-sdk/src/components/ChatItem/ExecuteItem.tsx +++ b/webapp/packages/chat-sdk/src/components/ChatItem/ExecuteItem.tsx @@ -1,11 +1,12 @@ -import { Spin, Row, Col, Switch } from 'antd'; -import { CheckCircleFilled } from '@ant-design/icons'; +import { Spin, Switch, Button } from 'antd'; +import { CheckCircleFilled, DownloadOutlined } from '@ant-design/icons'; import { PREFIX_CLS, MsgContentTypeEnum } from '../../common/constants'; import { MsgDataType } from '../../common/type'; import ChatMsg from '../ChatMsg'; import WebPage from '../ChatMsg/WebPage'; import Loading from './Loading'; import React, { ReactNode, useState } from 'react'; +import { exportCsvFile } from '../../utils/utils'; type Props = { queryId?: number; @@ -59,6 +60,20 @@ const ExecuteItem: React.FC = ({ ); }; + const onExportData = () => { + const { queryColumns, queryResults } = data || {}; + if (!!queryResults) { + const exportData = queryResults.map(item => { + return Object.keys(item).reduce((result, key) => { + const columnName = queryColumns?.find(column => column.nameEn === key)?.name || key; + result[columnName] = item[key]; + return result; + }, {}); + }); + exportCsvFile(exportData); + } + }; + if (executeLoading) { return getNodeTip(`${titlePrefix}查询中`); } @@ -67,7 +82,7 @@ const ExecuteItem: React.FC = ({ return getNodeTip( <> {titlePrefix}查询失败 - {data?.queryTimeCost && isDeveloper && ( + {!!data?.queryTimeCost && isDeveloper && ( (耗时: {data.queryTimeCost}ms) )} , @@ -83,28 +98,35 @@ const ExecuteItem: React.FC = ({ <>
-
- - - {titlePrefix}查询 - {data?.queryTimeCost && isDeveloper && ( - (耗时: {data.queryTimeCost}ms) - )} - - - {[MsgContentTypeEnum.METRIC_TREND, MsgContentTypeEnum.METRIC_BAR].includes( - msgContentType as MsgContentTypeEnum - ) && ( - { - setShowMsgContentTable(checked); - }} - /> - )} - - +
+
+ {titlePrefix}查询 + {!!data?.queryTimeCost && isDeveloper && ( + (耗时: {data.queryTimeCost}ms) + )} +
+
+ {[MsgContentTypeEnum.METRIC_TREND, MsgContentTypeEnum.METRIC_BAR].includes( + msgContentType as MsgContentTypeEnum + ) && ( + { + setShowMsgContentTable(checked); + }} + /> + )} + {!!data?.queryColumns?.length && ( + + )} +
= ({ return getNode( <> 意图解析失败 - {parseTimeCost && isDeveloper && ( + {!!parseTimeCost && isDeveloper && ( (耗时: {parseTimeCost}ms) )} , @@ -338,7 +338,7 @@ const ParseTip: React.FC = ({
意图解析 - {parseTimeCost && isDeveloper && ( + {!!parseTimeCost && isDeveloper && ( (耗时: {parseTimeCost}ms) )} {parseInfoOptions?.length > 1 ? '：' : ''} diff --git a/webapp/packages/chat-sdk/src/components/ChatItem/SqlItem.tsx b/webapp/packages/chat-sdk/src/components/ChatItem/SqlItem.tsx index 961b8ae16..34c3c3686 100644 --- a/webapp/packages/chat-sdk/src/components/ChatItem/SqlItem.tsx +++ b/webapp/packages/chat-sdk/src/components/ChatItem/SqlItem.tsx @@ -19,6 +19,7 @@ type Props = { queryMode?: string; sqlInfo: SqlInfoType; sqlTimeCost?: number; + executeErrorMsg: string; }; const SqlItem: React.FC = ({ @@ -31,6 +32,7 @@ const SqlItem: React.FC = ({ queryMode, sqlInfo, sqlTimeCost, + executeErrorMsg, }) => { const [sqlType, setSqlType] = useState(''); @@ -126,6 +128,14 @@ ${format(sqlInfo.querySQL)} `; }; + const getErrorMsgText = () => { + return ` +异常日志 + +${executeErrorMsg} +`; + }; + const onExportLog = () => { let text = ''; if (question) { @@ -148,6 +158,9 @@ ${format(sqlInfo.querySQL)} if (sqlInfo.querySQL) { text += getQuerySQLText(); } + if (!!executeErrorMsg) { + text += getErrorMsgText(); + } exportTextFile(text, `supersonic-debug-${agentId}-${queryId}.log`); }; @@ -157,7 +170,7 @@ ${format(sqlInfo.querySQL)}
SQL生成 - {sqlTimeCost && ( + {!!sqlTimeCost && ( (耗时: {sqlTimeCost}ms) )} ： diff --git a/webapp/packages/chat-sdk/src/components/ChatItem/index.tsx b/webapp/packages/chat-sdk/src/components/ChatItem/index.tsx index 5bb604fd6..3553dfb9b 100644 --- a/webapp/packages/chat-sdk/src/components/ChatItem/index.tsx +++ b/webapp/packages/chat-sdk/src/components/ChatItem/index.tsx @@ -73,6 +73,7 @@ const ChatItem: React.FC = ({ const [executeMode, setExecuteMode] = useState(false); const [executeLoading, setExecuteLoading] = useState(false); const [executeTip, setExecuteTip] = useState(''); + const [executeErrorMsg, setExecuteErrorMsg] = useState(''); const [data, setData] = useState(); const [entitySwitchLoading, setEntitySwitchLoading] = useState(false); const [dimensionFilters, setDimensionFilters] = useState([]); @@ -87,8 +88,9 @@ const ChatItem: React.FC = ({ const updateData = (res: Result) => { let tip: string = ''; let data: MsgDataType | undefined = undefined; - const { queryColumns, queryResults, queryState, queryMode, response, chatContext } = + const { queryColumns, queryResults, queryState, queryMode, response, chatContext, errorMsg } = res.data || {}; + setExecuteErrorMsg(errorMsg); if (res.code === 400 || res.code === 401 || res.code === 412) { tip = res.msg; } else if (res.code !== 200) { @@ -366,6 +368,7 @@ const ChatItem: React.FC = ({ queryMode={parseInfo.queryMode} sqlInfo={parseInfo.sqlInfo} sqlTimeCost={parseTimeCost?.sqlTime} + executeErrorMsg={executeErrorMsg} /> )} JSON.stringify(row[header], replacer)).join(',')); + } + + // 创建Blob并下载文件 + const csvString = '\ufeff' + csvRows.join('\n'); + const blob = new Blob([csvString], { type: 'text/csv;charset=utf-8;' }); + const url = window.URL.createObjectURL(blob); + const a = document.createElement('a'); + a.href = url; + a.download = 'data.csv'; // 指定下载文件名 + document.body.appendChild(a); + a.click(); + a.remove(); + window.URL.revokeObjectURL(url); // 释放Blob URL +}