From b75d9018957f6b30421b1cb1a98e73e69bd25e6e Mon Sep 17 00:00:00 2001
From: "shiweisong.ssw" <shiweisong.ssw@digital-engine.com>
Date: Mon, 26 Jun 2023 17:35:46 +0800
Subject: [PATCH] feat: fetch chunk list

---
 .../datastores/documents/chunklist/page.tsx   | 64 +++++++++++++++++++
 datacenter/app/datastores/documents/page.tsx  | 16 ++++-
 2 files changed, 79 insertions(+), 1 deletion(-)
 create mode 100644 datacenter/app/datastores/documents/chunklist/page.tsx

diff --git a/datacenter/app/datastores/documents/chunklist/page.tsx b/datacenter/app/datastores/documents/chunklist/page.tsx
new file mode 100644
index 000000000..a75cc56fb
--- /dev/null
+++ b/datacenter/app/datastores/documents/chunklist/page.tsx
@@ -0,0 +1,64 @@
+"use client";
+
+import Router from 'next/router'
+import { withRouter } from 'next/router'
+import React, { useState, useEffect } from 'react';
+import { Table, Popover } from 'antd';
+import moment from 'moment';
+
+const ChunkList = ({ router }) => {
+    const [chunkList, setChunkList] = useState<any>([]);
+    useEffect(() => {
+        async function fetchChunks() {
+            const res = await fetch(`http://localhost:8000/knowledge/${router.query.spacename}/chunk/list`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({
+                    document_id: router.query.documentid
+                }),
+            });
+            const data = await res.json();
+            if (data.success) {
+                setChunkList(data.data);
+            }
+        }
+        fetchChunks();
+    }, []);
+    return (
+        <div className='p-4'>
+            <Table
+                columns={[
+                    {
+                        title: 'Name',
+                        dataIndex: 'doc_name',
+                        key: 'doc_name',
+                        align: 'center',
+                    },
+                    {
+                        title: 'Content',
+                        dataIndex: 'content',
+                        key: 'content',
+                        align: 'center',
+                        render: (text: string, label: any) => {
+                            return <Popover content={text} trigger="hover">{text.length < 10 ? `${text.slice(0, 10)}...` : text}</Popover>;
+                        }
+                    },
+                    {
+                        title: 'Meta Data',
+                        dataIndex: 'meta_info',
+                        key: 'meta_info',
+                        align: 'center',
+                        render: (text: string, label: any) => {
+                            return <Popover content={JSON.stringify(text || '{}', null, 2)} trigger="hover">{text.length < 10 ? `${text.slice(0, 10)}...` : text}</Popover>;
+                        }
+                    },
+                ]}
+                dataSource={chunkList}
+            />
+        </div>
+    )
+}
+
+export default withRouter(ChunkList);
\ No newline at end of file
diff --git a/datacenter/app/datastores/documents/page.tsx b/datacenter/app/datastores/documents/page.tsx
index 63e2bdd35..a29c0a03f 100644
--- a/datacenter/app/datastores/documents/page.tsx
+++ b/datacenter/app/datastores/documents/page.tsx
@@ -1,8 +1,9 @@
 "use client";
 
+import Router from 'next/router'
 import { withRouter } from 'next/router'
 import React, { useState, useEffect } from 'react';
-import { Table } from 'antd';
+import { Table, Button } from 'antd';
 import moment from 'moment';
 
 const Documents = ({ router }) => {
@@ -58,6 +59,19 @@ const Documents = ({ router }) => {
                         key: 'status',
                         align: 'center',
                     },
+                    {
+                        title: 'Operation',
+                        dataIndex: 'operation',
+                        key: 'operation',
+                        align: 'center',
+                        render: (_: any, label: any) => {
+                            return (
+                                <Button onClick={() => {
+                                    Router.push(`/datastores/documents/chunklist?spacename=${router.query.name}&documentid=${label.id}`)
+                                }}>Detail of Chunks</Button>
+                            )
+                        }
+                    },
                 ]}
                 dataSource={documents}
             />