refactor(gui): GSR List and Manifest List use DataView (#460)

ui/web/src/modules/Deploy/ManifestList.tsx

@@ -1,15 +1,16 @@
 import { IconDelete, IconRefresh, IconUndo } from '@douyinfe/semi-icons';
-import { Space, Table } from '@douyinfe/semi-ui';
+import { Space } from '@douyinfe/semi-ui';
+import { createColumnHelper, getCoreRowModel, useReactTable } from '@tanstack/react-table';
 import { formatTime } from '@yuants/data-model';
 import { IDeploySpec } from '@yuants/extension';
 import { t } from 'i18next';
 import { useObservableState } from 'observable-hooks';
-import { BehaviorSubject, Subject, defer, repeat, shareReplay } from 'rxjs';
+import { useEffect, useMemo } from 'react';
+import { BehaviorSubject } from 'rxjs';
 import { executeCommand, registerCommand } from '../CommandCenter';
-import { Button } from '../Interactive';
+import { Button, DataView } from '../Interactive';
 import { registerPage } from '../Pages';
 import { supabase } from '../SupaBase';
-import { useEffect } from 'react';
 
 export interface ISupabaseManifestRecord {
   id: string;
@@ -48,73 +49,76 @@ registerPage('ManifestList', () => {
     executeCommand('Manifest.Load');
   }, []);
 
+  const columns = useMemo(() => {
+    const columnHelper = createColumnHelper<ISupabaseManifestRecord>();
+    return [
+      columnHelper.accessor('id', {
+        header: () => 'ID',
+      }),
+      columnHelper.accessor('manifest.package', {
+        header: () => 'Package',
+      }),
+      columnHelper.accessor('manifest.version', {
+        header: () => 'Version',
+      }),
+      columnHelper.accessor('updated_at', {
+        header: () => 'Updated At',
+        cell: (x) => formatTime(x.getValue()),
+      }),
+      columnHelper.accessor('created_at', {
+        header: () => 'Created At',
+        cell: (x) => formatTime(x.getValue()),
+      }),
+      columnHelper.accessor('expired_at', {
+        header: () => 'Expired At',
+        cell: (x) => {
+          const t = x.getValue();
+          return t ? formatTime(t) : '-';
+        },
+      }),
+      columnHelper.accessor('manifest', {
+        header: () => 'Manifest',
+        cell: (x) => <div style={{ width: 300 }}>{JSON.stringify(x.getValue())}</div>,
+      }),
+      columnHelper.display({
+        id: 'actions',
+        header: () => 'Actions',
+        cell: (x) => {
+          const v = x.row.original;
+          return (
+            <Space>
+              {/* <Button icon={<IconEdit />} onClick={() => executeCommand('Manifest.Edit', { id: v.id })}>
+            {t('common:edit')}
+          </Button> */}
+              {v.expired_at && (
+                <Button icon={<IconUndo />} onClick={() => executeCommand('Manifest.Recover', { id: v.id })}>
+                  {t('common:recover')}
+                </Button>
+              )}
+              {!v.expired_at && (
+                <Button
+                  type="danger"
+                  icon={<IconDelete />}
+                  onClick={() => executeCommand('Manifest.Delete', { id: v.id })}
+                >
+                  {t('common:delete')}
+                </Button>
+              )}
+            </Space>
+          );
+        },
+      }),
+    ];
+  }, []);
+
+  const table = useReactTable({ columns, data, getCoreRowModel: getCoreRowModel() });
+
   return (
     <Space vertical align="start">
       <Space>
         <Button icon={<IconRefresh />} onClick={() => executeCommand('Manifest.Load')}></Button>
       </Space>
-      <Table
-        dataSource={data}
-        columns={[
-          //
-          {
-            title: 'ID',
-            render: (_, v) => v.id,
-          },
-          {
-            title: 'Package',
-            render: (_, v) => v.manifest.package,
-          },
-          {
-            title: 'Version',
-            render: (_, v) => v.manifest.version,
-          },
-          {
-            title: 'Updated At',
-            render: (_, v) => formatTime(v.updated_at),
-          },
-          {
-            title: 'Created At',
-            render: (_, v) => formatTime(v.created_at),
-          },
-          {
-            title: 'Expired At',
-            render: (_, v) => (v.expired_at ? formatTime(v.expired_at) : '-'),
-          },
-          {
-            title: 'Manifest',
-            width: 300,
-            render: (_, v) => JSON.stringify(v.manifest),
-          },
-          {
-            title: 'Actions',
-            render: (_, v) => (
-              <Space>
-                {/* <Button icon={<IconEdit />} onClick={() => executeCommand('Manifest.Edit', { id: v.id })}>
-                  {t('common:edit')}
-                </Button> */}
-                {v.expired_at && (
-                  <Button
-                    icon={<IconUndo />}
-                    onClick={() => executeCommand('Manifest.Recover', { id: v.id })}
-                  >
-                    {t('common:recover')}
-                  </Button>
-                )}
-                {!v.expired_at && (
-                  <Button
-                    type="danger"
-                    icon={<IconDelete />}
-                    onClick={() => executeCommand('Manifest.Delete', { id: v.id })}
-                  >
-                    {t('common:delete')}
-                  </Button>
-                )}
-              </Space>
-            ),
-          },
-        ]}
-      ></Table>
+      <DataView table={table} />
     </Space>
   );
 });

ui/web/src/modules/GeneralSpecificRelations/GeneralSpecificRelationList.tsx

@@ -1,10 +1,12 @@
 import { IconCopyAdd, IconDelete, IconEdit, IconRefresh, IconSearch } from '@douyinfe/semi-icons';
-import { Button, Modal, Popconfirm, Space, Table, Toast } from '@douyinfe/semi-ui';
+import { Button, Modal, Popconfirm, Space, Toast } from '@douyinfe/semi-ui';
+import { createColumnHelper, getCoreRowModel, useReactTable } from '@tanstack/react-table';
 import { IDataRecord } from '@yuants/protocol';
 import { useObservable, useObservableState } from 'observable-hooks';
-import { useState } from 'react';
+import { useMemo, useState } from 'react';
 import { EMPTY, combineLatest, filter, first, mergeMap, tap, toArray } from 'rxjs';
 import Form from '../Form';
+import { DataView } from '../Interactive';
 import { registerPage } from '../Pages';
 import { terminal$ } from '../Terminals';
 
@@ -67,7 +69,13 @@ registerPage('GeneralSpecificRelationList', () => {
             terminal?.queryDataRecords<IGeneralSpecificRelation>({
               type: 'general_specific_relation',
               tags: {},
-              options: {},
+              options: {
+                sort: [
+                  //
+                  ['origin.general_product_id', 1],
+                  ['origin.specific_datasource_id', 1],
+                ],
+              },
             }) ?? EMPTY
           ).pipe(
             //
@@ -90,11 +98,81 @@ registerPage('GeneralSpecificRelationList', () => {
     [searchFormData, refreshId],
   );
 
-  const records = useObservableState(records$);
+  const records = useObservableState(records$, []);
 
   const [isModalVisible, setModalVisible] = useState(false);
   const [formData, setFormData] = useState({} as IGeneralSpecificRelation);
 
+  const columns = useMemo(() => {
+    const columnHelper = createColumnHelper<IDataRecord<IGeneralSpecificRelation>>();
+    return [
+      columnHelper.accessor('origin.general_product_id', {
+        header: () => '标准品种ID',
+      }),
+      columnHelper.accessor('origin.specific_datasource_id', {
+        header: () => '具体数据源ID',
+      }),
+      columnHelper.accessor('origin.specific_product_id', {
+        header: () => '具体品种ID',
+      }),
+      columnHelper.accessor((x) => 0, {
+        id: 'actions',
+        header: () => '操作',
+        cell: (x) => {
+          const record = x.row.original;
+          return (
+            <Space>
+              <Button
+                icon={<IconEdit />}
+                onClick={() => {
+                  setFormData(record.origin);
+
+                  setModalVisible(true);
+                }}
+              ></Button>
+              <Popconfirm
+                style={{ width: 300 }}
+                title="确定是否删除？"
+                content="此操作将不可逆"
+                onConfirm={() => {
+                  {
+                    terminal$
+                      .pipe(
+                        //
+                        filter((x): x is Exclude<typeof x, null> => !!x),
+                        first(),
+                        mergeMap((terminal) =>
+                          terminal.removeDataRecords({
+                            type: 'general_specific_relation',
+                            id: record.id,
+                          }),
+                        ),
+                        tap({
+                          complete: () => {
+                            Toast.success(`成功删除数据记录 ${record.id}`);
+                            setRefreshId((x) => x + 1);
+                          },
+                        }),
+                      )
+                      .subscribe();
+                  }
+                }}
+              >
+                <Button icon={<IconDelete />} type="danger"></Button>
+              </Popconfirm>
+            </Space>
+          );
+        },
+      }),
+    ];
+  }, []);
+
+  const table = useReactTable({
+    columns,
+    data: records,
+    getCoreRowModel: getCoreRowModel(),
+  });
+
   return (
     <Space vertical align="start" style={{ width: '100%' }}>
       <Space>
@@ -125,61 +203,8 @@ registerPage('GeneralSpecificRelationList', () => {
           刷新
         </Button>
       </Space>
-      <Table
-        dataSource={records}
-        style={{ width: '100%' }}
-        columns={[
-          //
-          { title: '标准品种 ID', render: (_, record) => record.origin.general_product_id },
-          { title: '具体品种 ID', render: (_, record) => record.origin.specific_product_id },
-          { title: '具体品种数据源 ID', render: (_, record) => record.origin.specific_datasource_id },
-          {
-            title: '操作',
-            render: (_, record) => (
-              <Space>
-                <Button
-                  icon={<IconEdit />}
-                  onClick={() => {
-                    setFormData(record.origin);
+      <DataView table={table} />
 
-                    setModalVisible(true);
-                  }}
-                ></Button>
-                <Popconfirm
-                  style={{ width: 300 }}
-                  title="确定是否删除？"
-                  content="此操作将不可逆"
-                  onConfirm={() => {
-                    {
-                      terminal$
-                        .pipe(
-                          //
-                          filter((x): x is Exclude<typeof x, null> => !!x),
-                          first(),
-                          mergeMap((terminal) =>
-                            terminal.removeDataRecords({
-                              type: 'general_specific_relation',
-                              id: record.id,
-                            }),
-                          ),
-                          tap({
-                            complete: () => {
-                              Toast.success(`成功删除数据记录 ${record.id}`);
-                              setRefreshId((x) => x + 1);
-                            },
-                          }),
-                        )
-                        .subscribe();
-                    }
-                  }}
-                >
-                  <Button icon={<IconDelete />} type="danger"></Button>
-                </Popconfirm>
-              </Space>
-            ),
-          },
-        ]}
-      ></Table>
       <Modal
         visible={isModalVisible}
         onCancel={() => {

ui/web/src/modules/Interactive/ListView.tsx

@@ -4,7 +4,7 @@ import { Table, flexRender } from '@tanstack/react-table';
 export function ListView<T>(props: { table: Table<T> }) {
   const { table } = props;
   return (
-    <Space vertical align="start">
+    <Space vertical align="start" style={{ width: '100%' }}>
       <div>{table.getRowModel().rows.length} Items</div>
       <List>
         {table.getRowModel().rows.map((row) => (

ui/web/src/modules/Interactive/TableView.tsx

@@ -4,7 +4,7 @@ import { Table, flexRender } from '@tanstack/react-table';
 export function TableView<T>(props: { table: Table<T> }) {
   const { table } = props;
   return (
-    <Space vertical align="start">
+    <Space vertical align="start" style={{ width: '100%' }}>
       <div>{table.getRowModel().rows.length} Items</div>
       <table className="semi-table">
         <thead