diff --git a/scaleph-ui-react/src/pages/Project/Workspace/Artifact/Sql/CodeEditor/EditorRightResult/index.tsx b/scaleph-ui-react/src/pages/Project/Workspace/Artifact/Sql/CodeEditor/EditorRightResult/index.tsx index 9d2df88d6..f3fb5ebdf 100644 --- a/scaleph-ui-react/src/pages/Project/Workspace/Artifact/Sql/CodeEditor/EditorRightResult/index.tsx +++ b/scaleph-ui-react/src/pages/Project/Workspace/Artifact/Sql/CodeEditor/EditorRightResult/index.tsx @@ -23,8 +23,8 @@ const EditorRightResult: React.FC = () => { const [isLoading, setIsLoading] = useState(false); // 加载状态标志 const { executionData, setExecutionData } = useModel('executionResult'); // 执行结果和设置执行结果的model const [sessionClusterId, setSessionClusterId] = useState(); // 会话集群id - const [activeKey, setActiveKey] = useState(); // 控制当前激活的tab - const flinkArtifactSql = urlParams.state; // Flink SQL参数对象 + const [activeKey, setActiveKey] = useState(); // 控制当前激活的tab + const flinkArtifactSql: string | unknown = urlParams.state; // Flink SQL参数对象 let sqlData: string; const executionDataString = useRef(); const sessionClusterIdString = useRef(); @@ -41,7 +41,7 @@ const EditorRightResult: React.FC = () => { }; useEffect(() => { - const getResults = async (data: string) => { + const getResults = async (data: string, nextToken = 0) => { if (sqlData !== data) { setIsLoading(false); clearTimeout(clearTimeOut.current); @@ -49,11 +49,15 @@ const EditorRightResult: React.FC = () => { sqlData = data; } // 调用后端接口获取SQL结果 - const catalogArray = await WsFlinkSqlGatewayService.getSqlResults(sessionClusterId!, data); + const catalogArray: any = await WsFlinkSqlGatewayService.getSqlResults( + sessionClusterId!, + data, + nextToken, + ); if (catalogArray?.resultType === 'NOT_READY' || catalogArray?.resultType === 'PAYLOAD') { setIsLoading(true); clearTimeOut.current = setTimeout(() => { - getResults(data); + getResults(data, catalogArray?.nextToken); }, 5000); if (catalogArray?.resultType === 'PAYLOAD') { setDataList((prevDataList) => { @@ -82,14 +86,13 @@ const EditorRightResult: React.FC = () => { }; }, [executionData]); - useEffect(() => { + useEffect((): any => { return stopSqlCarryOut; }, []); useEffect(() => { const handleTabs = (result: any[]) => { if (!result || !dataList) return []; - return dataList.map((item, index) => ({ label: (
@@ -117,14 +120,23 @@ const EditorRightResult: React.FC = () => { }, [dataList]); const onEdit = (key: string | number | null | undefined) => { - let index = items.findIndex((item) => item?.key === key); - if (index === items?.length - 1) { + setDataList((prevList) => prevList.filter((item) => item?.jobID !== key)); + + const lastIndex = items?.length - 1; + const lastKey = items?.[lastIndex]?.key; + + if (key === lastKey) { + setActiveKey(items?.[lastIndex - 1]?.key || ''); + } else { + setActiveKey(lastKey || ''); + } + + setItems((prevItems) => prevItems.filter((item) => item?.key !== key)); + + if (lastIndex !== undefined && key === items[lastIndex]?.key) { setIsLoading(false); stopSqlCarryOut(); clearTimeout(clearTimeOut.current); - setItems(items.filter((item) => item?.key !== key)); - } else { - setItems(items.filter((item) => item?.key !== key)); } }; diff --git a/scaleph-ui-react/src/services/project/WsFlinkSqlGatewayService.ts b/scaleph-ui-react/src/services/project/WsFlinkSqlGatewayService.ts index f8b7932b4..68413e2af 100644 --- a/scaleph-ui-react/src/services/project/WsFlinkSqlGatewayService.ts +++ b/scaleph-ui-react/src/services/project/WsFlinkSqlGatewayService.ts @@ -32,9 +32,14 @@ export const WsFlinkSqlGatewayService = { }); }, - getSqlResults: async (sessionClusterId?: string | null, operationHandleId?: string) => { + getSqlResults: async ( + sessionClusterId?: string | null, + operationHandleId?: string, + nextToken?: string | number, + ) => { return request>(`${url}/${sessionClusterId}/${operationHandleId}/results`, { method: 'GET', + params: { token: nextToken }, }); },