feat: Bind data to segment table infiniflow#1841

gui/app/(dashboard)/actions.ts

@@ -2,7 +2,11 @@
 
 import { ApiUrl } from '@/lib/constant/api';
 import { CreateOption, DropOption } from '@/lib/constant/common';
-import { ITableColumns, ITableIndex } from '@/lib/databse-interface';
+import {
+  ITableColumns,
+  ITableIndex,
+  ITableSegment
+} from '@/lib/databse-interface';
 import { drop, get, post } from '@/lib/request';
 
 export const listDatabase = async () => {
@@ -198,4 +202,24 @@ export const showTableIndexes = async ({
     return [];
   }
 };
+
+export const showTableSegments = async ({
+  database_name,
+  table_name
+}: {
+  database_name: string;
+  table_name: string;
+}): Promise<ITableSegment[]> => {
+  try {
+    const x = await get(
+      `${ApiUrl.databases}/${database_name}/${ApiUrl.tables}/${table_name}/${ApiUrl.segments}`
+    );
+    if (x.error_code === 0) {
+      return x?.segments ?? [];
+    }
+    return [];
+  } catch (error) {
+    return [];
+  }
+};
 //#endregion

gui/app/(dashboard)/database/[databaseId]/table/[tableId]/indexes.tsx

@@ -25,11 +25,11 @@ export function TableIndexes({
   tableId,
   databaseId
 }: DatabaseRouteParams['params']) {
-  const { tableColumns } = useFetchTableIndexes({ tableId, databaseId });
+  const { tableIndexes } = useFetchTableIndexes({ tableId, databaseId });
 
   return (
     <div className="container mx-auto py-10">
-      <DataTable columns={columns} data={tableColumns} />
+      <DataTable columns={columns} data={tableIndexes} />
     </div>
   );
 }

gui/app/(dashboard)/database/[databaseId]/table/[tableId]/segments.tsx

@@ -1,91 +1,35 @@
-import {
-  Table,
-  TableBody,
-  TableCaption,
-  TableCell,
-  TableFooter,
-  TableHead,
-  TableHeader,
-  TableRow
-} from '@/components/ui/table';
+'use client';
+
+import { ITableSegment } from '@/lib/databse-interface';
+import { ColumnDef } from '@tanstack/react-table';
+import { useFetchTableSegments } from 'app/(dashboard)/database/hooks';
+import { DataTable } from 'app/(dashboard)/database/infinity-table';
 import { DatabaseRouteParams } from 'app/(dashboard)/database/interface';
 
-const invoices = [
-  {
-    invoice: 'INV001',
-    paymentStatus: 'Paid',
-    totalAmount: '$250.00',
-    paymentMethod: 'Credit Card'
-  },
-  {
-    invoice: 'INV002',
-    paymentStatus: 'Pending',
-    totalAmount: '$150.00',
-    paymentMethod: 'PayPal'
-  },
+export const columns: ColumnDef<ITableSegment>[] = [
   {
-    invoice: 'INV003',
-    paymentStatus: 'Unpaid',
-    totalAmount: '$350.00',
-    paymentMethod: 'Bank Transfer'
+    accessorKey: 'id',
+    header: 'id'
   },
   {
-    invoice: 'INV004',
-    paymentStatus: 'Paid',
-    totalAmount: '$450.00',
-    paymentMethod: 'Credit Card'
+    accessorKey: 'size',
+    header: 'size'
   },
   {
-    invoice: 'INV005',
-    paymentStatus: 'Paid',
-    totalAmount: '$550.00',
-    paymentMethod: 'PayPal'
-  },
-  {
-    invoice: 'INV006',
-    paymentStatus: 'Pending',
-    totalAmount: '$200.00',
-    paymentMethod: 'Bank Transfer'
-  },
-  {
-    invoice: 'INV007',
-    paymentStatus: 'Unpaid',
-    totalAmount: '$300.00',
-    paymentMethod: 'Credit Card'
+    accessorKey: 'status',
+    header: 'status'
   }
 ];
 
 export function TableSegments({
   tableId,
   databaseId
 }: DatabaseRouteParams['params']) {
+  const { tableSegments } = useFetchTableSegments({ tableId, databaseId });
+
   return (
-    <Table>
-      <TableCaption>TableSegments</TableCaption>
-      <TableHeader>
-        <TableRow>
-          <TableHead className="w-[100px]">Invoice</TableHead>
-          <TableHead>Status</TableHead>
-          <TableHead>Method</TableHead>
-          <TableHead className="text-right">Amount</TableHead>
-        </TableRow>
-      </TableHeader>
-      <TableBody>
-        {invoices.map((invoice) => (
-          <TableRow key={invoice.invoice}>
-            <TableCell className="font-medium">{invoice.invoice}</TableCell>
-            <TableCell>{invoice.paymentStatus}</TableCell>
-            <TableCell>{invoice.paymentMethod}</TableCell>
-            <TableCell className="text-right">{invoice.totalAmount}</TableCell>
-          </TableRow>
-        ))}
-      </TableBody>
-      <TableFooter>
-        <TableRow>
-          <TableCell colSpan={3}>Total</TableCell>
-          <TableCell className="text-right">$2,500.00</TableCell>
-        </TableRow>
-      </TableFooter>
-    </Table>
+    <div className="container mx-auto py-10">
+      <DataTable columns={columns} data={tableSegments} />
+    </div>
   );
 }

gui/app/(dashboard)/database/hooks.ts

@@ -5,7 +5,8 @@ import {
   listDatabase,
   listTable,
   showTableColumns,
-  showTableIndexes
+  showTableIndexes,
+  showTableSegments
 } from '../actions';
 import { initialData } from './constants';
 import { DatabaseRouteParams, TreeNode, TreeParentId } from './interface';
@@ -177,7 +178,7 @@ export const useFetchTableIndexes = ({
 }: DatabaseRouteParams['params']) => {
   const [tableIndexes, setTableIndexes] = useState<ITableIndex[]>([]);
 
-  const fetchTableColumns = useCallback(async () => {
+  const fetchTableIndexes = useCallback(async () => {
     const data = await showTableIndexes({
       database_name: databaseId,
       table_name: tableId
@@ -187,8 +188,30 @@ export const useFetchTableIndexes = ({
   }, []);
 
   useEffect(() => {
-    fetchTableColumns();
-  }, [fetchTableColumns]);
+    fetchTableIndexes();
+  }, [fetchTableIndexes]);
+
+  return { tableIndexes };
+};
+
+export const useFetchTableSegments = ({
+  databaseId,
+  tableId
+}: DatabaseRouteParams['params']) => {
+  const [tableSegments, setTableSegments] = useState<any[]>([]);
+
+  const fetchTableSegments = useCallback(async () => {
+    const data = await showTableSegments({
+      database_name: databaseId,
+      table_name: tableId
+    });
+
+    setTableSegments(data);
+  }, []);
+
+  useEffect(() => {
+    fetchTableSegments();
+  }, [fetchTableSegments]);
 
-  return { tableColumns: tableIndexes };
+  return { tableSegments };
 };

gui/lib/constant/api.ts

@@ -4,6 +4,7 @@ export const ApiUrl = {
   tables: 'tables',
   columns: 'columns',
   indexes: 'indexes',
+  segments: 'segments',
   configs: 'configs',
   variables: 'variables'
 };

gui/lib/databse-interface.ts

@@ -13,3 +13,9 @@ export interface ITableIndex {
   index_name: string;
   index_type: string;
 }
+
+export interface ITableSegment {
+  id: string;
+  size: string;
+  status: string;
+}