fix: json stream data is truncated

src/components/seal-table/components/table-row.tsx

@@ -196,7 +196,7 @@ const TableRow: React.FC<
     const handleVisibilityChange = async () => {
       if (document.visibilityState === 'hidden') {
         cacheDataListRef.current = [];
-        setChildrenData([]);
+        // setChildrenData([]);
       }
     };
 
@@ -295,7 +295,13 @@ const TableRow: React.FC<
               {childrenData.length ? (
                 renderChildrenData()
               ) : (
-                <Empty image={Empty.PRESENTED_IMAGE_SIMPLE}></Empty>
+                <Empty
+                  image={Empty.PRESENTED_IMAGE_SIMPLE}
+                  style={{
+                    marginBlock: 0,
+                    height: 54
+                  }}
+                ></Empty>
               )}
             </Spin>
           </div>

src/components/seal-table/index.tsx

@@ -26,6 +26,7 @@ const SealTable: React.FC<SealTableProps & { pagination: PaginationProps }> = (
     onCell,
     expandedRowKeys,
     loading,
+    loadend,
     expandable,
     pollingChildren,
     watchChildren,
@@ -117,7 +118,7 @@ const SealTable: React.FC<SealTableProps & { pagination: PaginationProps }> = (
     if (!props.dataSource.length) {
       return (
         <div className="empty-wrapper">
-          <Empty image={Empty.PRESENTED_IMAGE_SIMPLE}></Empty>
+          <Empty image={loadend ? Empty.PRESENTED_IMAGE_SIMPLE : null}></Empty>
         </div>
       );
     }

src/components/seal-table/styles/index.less

@@ -39,6 +39,10 @@
     border-top: 0;
     border-radius: 0 0 var(--ant-table-header-border-radius)
       var(--ant-table-header-border-radius);
+
+    .ant-empty-image {
+      height: 30px;
+    }
   }
 
   .row-wrapper {

src/components/seal-table/types.ts

@@ -49,6 +49,7 @@ export interface SealTableProps {
   pollingChildren?: boolean;
   watchChildren?: boolean;
   loading?: boolean;
+  loadend?: boolean;
   onCell?: (record: any, dataIndex: string) => void;
   onSort?: (dataIndex: string, order: 'ascend' | 'descend') => void;
   onExpand?: (expanded: boolean, record: any, rowKey: any) => void;

src/hooks/use-chunk-request.ts

@@ -123,6 +123,7 @@ const useSetChunkRequest = () => {
   const particalConfig = { params: {}, contentType: 'json' };
   const timer = useRef<any>(null);
   const loadedSize = useRef(0);
+  const bufferedDataRef = useRef('');
 
   const reset = () => {
     loaded.current = 0;
@@ -187,17 +188,33 @@ const useSetChunkRequest = () => {
           loaded.current = e.loaded || 0;
           total.current = e.total || 0;
 
-          let result = response;
+          let currentRes = sliceData(response, e.loaded, loadedSize);
-          let cres = '';
+          let result: any[] = [];
-          console.log('chunkrequest============e==', result);
+          let cres = currentRes;
+
           if (contentType === 'json') {
-            const currentRes = sliceData(response, e.loaded, loadedSize);
+            // Append the new data to the buffered data
-            result = parseData(currentRes);
+            bufferedDataRef.current += currentRes;
-            result = resetResultSchema(result);
+
-            cres = currentRes;
+            // Find valid JSON strings in the buffered data
+            let validJSON = findValidJSONStrings(bufferedDataRef.current);
+            if (validJSON.length > 0) {
+              result = resetResultSchema(validJSON);
+
+              // Calculate the position of the last complete JSON fragment, keeping the unfinished part
+              const lastValidJSON = validJSON[validJSON.length - 1];
+              const lastJSONIndex = bufferedDataRef.current.lastIndexOf(
+                JSON.stringify(lastValidJSON)
+              );
+              bufferedDataRef.current = bufferedDataRef.current.slice(
+                lastJSONIndex + JSON.stringify(lastValidJSON).length
+              );
+            }
+            handler(result);
+          } else {
+            handler(currentRes);
           }
 
-          handler(result);
           console.log('chunkrequest===', {
             result,
             url,

src/pages/llmodels/components/table-list.tsx

@@ -77,6 +77,7 @@ interface ModelsProps {
   workerList: WorkerListItem[];
   dataSource: ListItem[];
   loading: boolean;
+  loadend: boolean;
   total: number;
 }
 
@@ -125,6 +126,7 @@ const Models: React.FC<ModelsProps> = ({
   workerList,
   queryParams,
   loading,
+  loadend,
   total
 }) => {
   const [expandAtom, setExpandAtom] = useAtom(modelsExpandKeysAtom);
@@ -819,6 +821,7 @@ const Models: React.FC<ModelsProps> = ({
           expandedRowKeys={expandedRowKeys}
           onExpand={handleExpandChange}
           loading={loading}
+          loadend={loadend}
           rowKey="id"
           childParentKey="model_id"
           expandable={true}

src/pages/llmodels/index.tsx

@@ -22,11 +22,13 @@ const Models: React.FC = () => {
     dataList: ListItem[];
     deletedIds: number[];
     loading: boolean;
+    loadend: boolean;
     total: number;
   }>({
     dataList: [],
     deletedIds: [],
     loading: false,
+    loadend: false,
     total: 0
   });
 
@@ -52,6 +54,7 @@ const Models: React.FC = () => {
         return {
           total: pre.total,
           loading: false,
+          loadend: true,
           dataList: list,
           deletedIds: opts?.deletedIds || []
         };
@@ -95,6 +98,7 @@ const Models: React.FC = () => {
       setDataSource({
         dataList: res.items || [],
         loading: false,
+        loadend: true,
         total: res.pagination.total,
         deletedIds: []
       });
@@ -103,6 +107,7 @@ const Models: React.FC = () => {
         setDataSource({
           dataList: [],
           loading: false,
+          loadend: true,
           total: dataSource.total,
           deletedIds: []
         });
@@ -173,13 +178,9 @@ const Models: React.FC = () => {
 
   const handleOnCancelViewLogs = useCallback(async () => {
     isPageHidden.current = false;
-    await Promise.all([
+    await createModelsInstanceChunkRequest();
-      createModelsChunkRequest(),
+    await createModelsChunkRequest();
-      createModelsInstanceChunkRequest()
+    fetchData();
-    ]);
-    setTimeout(() => {
-      fetchData();
-    }, 100);
   }, [fetchData, createModelsChunkRequest, createModelsInstanceChunkRequest]);
 
   const handleSearch = useCallback(async () => {
@@ -235,10 +236,8 @@ const Models: React.FC = () => {
     const handleVisibilityChange = async () => {
       if (document.visibilityState === 'visible') {
         isPageHidden.current = false;
-        await Promise.all([
+        await createModelsInstanceChunkRequest();
-          createModelsChunkRequest(),
+        await createModelsChunkRequest();
-          createModelsInstanceChunkRequest()
-        ]);
         fetchData();
       } else {
         isPageHidden.current = true;
@@ -273,6 +272,7 @@ const Models: React.FC = () => {
         onCancelViewLogs={handleOnCancelViewLogs}
         queryParams={queryParams}
         loading={dataSource.loading}
+        loadend={dataSource.loadend}
         total={dataSource.total}
         deleteIds={dataSource.deletedIds}
         gpuDeviceList={gpuDeviceList}