From 714e2d927a0123aa915db159dc2576cf49af9731 Mon Sep 17 00:00:00 2001
From: jialin <jialinkuang@126.com>
Date: Thu, 18 Jul 2024 18:14:03 +0800
Subject: [PATCH] fix:  api key table list sort

---
 src/components/delete-modal/index.tsx         | 31 +++++++++
 src/components/drop-down-buttons/index.tsx    | 42 ++++++++++--
 .../seal-table/components/seal-column.tsx     |  1 +
 .../seal-table/components/table-row.tsx       |  9 ++-
 src/hooks/use-delete-modal.ts                 | 26 +++++++
 src/pages/api-keys/index.tsx                  | 22 +++---
 .../llmodels/components/instance-item.tsx     |  9 ++-
 src/pages/llmodels/components/table-list.tsx  | 67 ++++++++++++-------
 src/pages/resources/components/workers.tsx    | 16 ++---
 src/pages/users/index.tsx                     | 26 +++----
 10 files changed, 177 insertions(+), 72 deletions(-)
 create mode 100644 src/components/delete-modal/index.tsx
 create mode 100644 src/hooks/use-delete-modal.ts

diff --git a/src/components/delete-modal/index.tsx b/src/components/delete-modal/index.tsx
new file mode 100644
index 00000000..d6f5fd08
--- /dev/null
+++ b/src/components/delete-modal/index.tsx
@@ -0,0 +1,31 @@
+import ModalFooter from '@/components/modal-footer';
+import { useIntl } from '@umijs/max';
+import { Modal, type ModalFuncProps } from 'antd';
+import { forwardRef } from 'react';
+
+const DeleteModal: React.FC<ModalFuncProps> = forwardRef((props, ref) => {
+  const intl = useIntl();
+  const { title, open, onOk, onCancel, content } = props;
+
+  return (
+    <Modal
+      title={title}
+      simple={true}
+      open={open}
+      centered={true}
+      onOk={onOk}
+      onCancel={onCancel}
+      destroyOnClose={true}
+      closeIcon={false}
+      maskClosable={false}
+      keyboard={false}
+      width={600}
+      styles={{}}
+      footer={<ModalFooter onCancel={onCancel} onOk={onOk}></ModalFooter>}
+    >
+      {content}
+    </Modal>
+  );
+});
+
+export default DeleteModal;
diff --git a/src/components/drop-down-buttons/index.tsx b/src/components/drop-down-buttons/index.tsx
index 775fe9d4..582686aa 100644
--- a/src/components/drop-down-buttons/index.tsx
+++ b/src/components/drop-down-buttons/index.tsx
@@ -1,4 +1,5 @@
 import { MoreOutlined } from '@ant-design/icons';
+import { useIntl } from '@umijs/max';
 import { Button, Dropdown, Tooltip, type MenuProps } from 'antd';
 import _ from 'lodash';
 import { memo, useCallback } from 'react';
@@ -14,6 +15,7 @@ const DropdownButtons: React.FC<DropdownButtonsProps> = ({
   size = 'small',
   onSelect
 }) => {
+  const intl = useIntl();
   const handleMenuClick = useCallback((item: any) => {
     console.log('menu click', item.key);
     const selectItem = _.find(items, { key: item.key });
@@ -32,22 +34,52 @@ const DropdownButtons: React.FC<DropdownButtonsProps> = ({
   return (
     <>
       {items?.length === 1 ? (
-        <Tooltip title={_.head(items)?.label}>
+        <Tooltip title={intl.formatMessage({ id: _.head(items)?.label })}>
           <Button
             {..._.head(items)}
             icon={_.get(items, '0.icon')}
             size={size}
+            {..._.get(items, '0.props')}
             onClick={handleButtonClick}
           ></Button>
         </Tooltip>
       ) : (
         <Dropdown.Button
-          menu={{
-            items: _.tail(items),
-            onClick: handleMenuClick
+          dropdownRender={(menus: any) => {
+            return (
+              <div
+                className="flex flex-column "
+                style={{
+                  backgroundColor: 'var(--color-white-1)',
+                  padding: 5,
+                  alignItems: 'flex-start',
+                  borderRadius: 'var(--border-radius-base)',
+                  boxShadow: 'var(--ant-box-shadow-secondary)'
+                }}
+              >
+                {_.map(_.tail(items), (item: any) => {
+                  return (
+                    <Button
+                      {...item.props}
+                      type="text"
+                      size="middle"
+                      icon={item.icon}
+                      key={item.key}
+                      onClick={() => handleMenuClick(item)}
+                      style={{ width: '100%', justifyContent: 'flex-start' }}
+                    >
+                      {intl.formatMessage({ id: item.label })}
+                    </Button>
+                  );
+                })}
+              </div>
+            );
           }}
           buttonsRender={([leftButton, rightButton]) => [
-            <Tooltip title={_.head(items)?.label} key="leftButton">
+            <Tooltip
+              title={intl.formatMessage({ id: _.head(items)?.label })}
+              key="leftButton"
+            >
               <Button
                 onClick={handleButtonClick}
                 size={size}
diff --git a/src/components/seal-table/components/seal-column.tsx b/src/components/seal-table/components/seal-column.tsx
index 1915877b..2ca2b8af 100644
--- a/src/components/seal-table/components/seal-column.tsx
+++ b/src/components/seal-table/components/seal-column.tsx
@@ -6,6 +6,7 @@ import { SealColumnProps } from '../types';
 
 const SealColumn: React.FC<SealColumnProps> = (props) => {
   const row: Record<string, any> = useContext(RowContext);
+  console.log('seal column====', row);
   const { dataIndex, render, align } = props;
   return (
     <div
diff --git a/src/components/seal-table/components/table-row.tsx b/src/components/seal-table/components/table-row.tsx
index 2db0b53f..7c4bcf4b 100644
--- a/src/components/seal-table/components/table-row.tsx
+++ b/src/components/seal-table/components/table-row.tsx
@@ -43,7 +43,14 @@ const TableRow: React.FC<
   const childrenDataRef = useRef<any[]>([]);
   childrenDataRef.current = childrenData;
 
-  console.log('table row====', childrenData, record.name, firstLoad, expanded);
+  console.log(
+    'table row====',
+    record,
+    childrenData,
+    record.name,
+    firstLoad,
+    expanded
+  );
   const { updateChunkedList, cacheDataListRef } = useUpdateChunkedList({
     dataList: childrenData,
     setDataList: setChildrenData
diff --git a/src/hooks/use-delete-modal.ts b/src/hooks/use-delete-modal.ts
new file mode 100644
index 00000000..758533a3
--- /dev/null
+++ b/src/hooks/use-delete-modal.ts
@@ -0,0 +1,26 @@
+import { useIntl } from '@umijs/max';
+import { Modal, message, type ModalFuncProps } from 'antd';
+import { useRef } from 'react';
+
+export default function useDeleteModal() {
+  const intl = useIntl();
+  const modalRef = useRef<any>();
+  const showDeleteModal = (config: ModalFuncProps = {}) => {
+    modalRef.current = Modal.confirm({
+      ...config,
+      okText: intl.formatMessage({
+        id: 'common.button.delete'
+      }),
+      onCancel: () => {
+        config.onCancel?.();
+        modalRef.current.destroy?.();
+      },
+      onOk: async () => {
+        await config.onOk?.();
+        message.success(intl.formatMessage({ id: 'common.message.success' }));
+      }
+    });
+  };
+
+  return { showDeleteModal };
+}
diff --git a/src/pages/api-keys/index.tsx b/src/pages/api-keys/index.tsx
index 83a8c283..c0febedb 100644
--- a/src/pages/api-keys/index.tsx
+++ b/src/pages/api-keys/index.tsx
@@ -1,13 +1,14 @@
 import PageTools from '@/components/page-tools';
 import { PageAction } from '@/config';
 import type { PageActionType } from '@/config/types';
+import useDeleteModal from '@/hooks/use-delete-modal';
 import useTableRowSelection from '@/hooks/use-table-row-selection';
 import useTableSort from '@/hooks/use-table-sort';
 import { handleBatchRequest } from '@/utils';
 import { DeleteOutlined, PlusOutlined, SyncOutlined } from '@ant-design/icons';
 import { PageContainer } from '@ant-design/pro-components';
 import { useIntl } from '@umijs/max';
-import { Button, Input, Modal, Space, Table, Tooltip, message } from 'antd';
+import { Button, Input, Space, Table, Tooltip } from 'antd';
 import dayjs from 'dayjs';
 import _ from 'lodash';
 import { useEffect, useState } from 'react';
@@ -18,6 +19,7 @@ import { ListItem } from './config/types';
 const { Column } = Table;
 
 const Models: React.FC = () => {
+  const { showDeleteModal } = useDeleteModal();
   const rowSelection = useTableRowSelection();
   const { sortOrder, setSortOrder } = useTableSort({
     defaultSortOrder: 'descend'
@@ -96,7 +98,7 @@ const Models: React.FC = () => {
   };
 
   const handleDelete = (row: ListItem) => {
-    Modal.confirm({
+    showDeleteModal({
       title: '',
       content: intl.formatMessage(
         { id: 'common.delete.confirm' },
@@ -105,17 +107,13 @@ const Models: React.FC = () => {
       async onOk() {
         console.log('OK');
         await deleteApisKey(row.id);
-        message.success(intl.formatMessage({ id: 'common.message.success' }));
         fetchData();
-      },
-      onCancel() {
-        console.log('Cancel');
       }
     });
   };
 
   const handleDeleteBatch = () => {
-    Modal.confirm({
+    showDeleteModal({
       title: '',
       content: intl.formatMessage(
         { id: 'common.delete.confirm' },
@@ -123,12 +121,8 @@ const Models: React.FC = () => {
       ),
       async onOk() {
         await handleBatchRequest(rowSelection.selectedRowKeys, deleteApisKey);
-        message.success(intl.formatMessage({ id: 'common.message.success' }));
         rowSelection.clearSelections();
         fetchData();
-      },
-      onCancel() {
-        console.log('Cancel');
       }
     });
   };
@@ -214,7 +208,9 @@ const Models: React.FC = () => {
             dataIndex="expires_at"
             key="expiration"
             render={(text, record) => {
-              return dayjs(text).format('YYYY-MM-DD HH:mm:ss');
+              return text
+                ? dayjs(text).format('YYYY-MM-DD HH:mm:ss')
+                : intl.formatMessage({ id: 'apikeys.form.expiration.never' });
             }}
           />
           <Column
@@ -232,7 +228,7 @@ const Models: React.FC = () => {
             defaultSortOrder="descend"
             sortOrder={sortOrder}
             showSorterTooltip={false}
-            sorter={true}
+            sorter={false}
             render={(text, record) => {
               return dayjs(text).format('YYYY-MM-DD HH:mm:ss');
             }}
diff --git a/src/pages/llmodels/components/instance-item.tsx b/src/pages/llmodels/components/instance-item.tsx
index 74fdd448..731441af 100644
--- a/src/pages/llmodels/components/instance-item.tsx
+++ b/src/pages/llmodels/components/instance-item.tsx
@@ -30,9 +30,10 @@ const InstanceItem: React.FC<InstanceItemProps> = ({
   console.log('instance item====');
 
   const intl = useIntl();
+
   const childActionList = [
     {
-      label: intl.formatMessage({ id: 'common.button.viewlog' }),
+      label: 'common.button.viewlog',
       key: 'viewlog',
       status: [
         InstanceStatusMap.Running,
@@ -42,9 +43,11 @@ const InstanceItem: React.FC<InstanceItemProps> = ({
       icon: <FieldTimeOutlined />
     },
     {
-      label: intl.formatMessage({ id: 'common.button.delete' }),
+      label: 'common.button.delete',
       key: 'delete',
-      danger: true,
+      props: {
+        danger: true
+      },
       icon: <DeleteOutlined />
     }
   ];
diff --git a/src/pages/llmodels/components/table-list.tsx b/src/pages/llmodels/components/table-list.tsx
index 22a6bc9f..cd9f7713 100644
--- a/src/pages/llmodels/components/table-list.tsx
+++ b/src/pages/llmodels/components/table-list.tsx
@@ -1,9 +1,11 @@
+import DeleteModal from '@/components/delete-modal';
 import DropdownButtons from '@/components/drop-down-buttons';
 import PageTools from '@/components/page-tools';
 import SealTable from '@/components/seal-table';
 import SealColumn from '@/components/seal-table/components/seal-column';
 import { PageAction } from '@/config';
 import type { PageActionType } from '@/config/types';
+import useDeleteModal from '@/hooks/use-delete-modal';
 import useExpandedRowKeys from '@/hooks/use-expanded-row-keys';
 import useTableRowSelection from '@/hooks/use-table-row-selection';
 import useTableSort from '@/hooks/use-table-sort';
@@ -20,7 +22,7 @@ import { Access, useAccess, useIntl, useNavigate } from '@umijs/max';
 import { Button, Input, Modal, Space, message } from 'antd';
 import dayjs from 'dayjs';
 import _ from 'lodash';
-import { memo, useCallback, useState } from 'react';
+import { useCallback, useRef, useState } from 'react';
 import {
   MODELS_API,
   MODEL_INSTANCE_API,
@@ -60,10 +62,11 @@ const Models: React.FC<ModelsProps> = ({
   loading,
   total
 }) => {
-  // const { modal } = App.useApp();
   console.log('model list====2');
   const access = useAccess();
   const intl = useIntl();
+  const [modal, contextHolder] = Modal.useModal();
+  const { showDeleteModal } = useDeleteModal();
   const navigate = useNavigate();
   const rowSelection = useTableRowSelection();
   const { handleExpandChange, updateExpandedRowKeys, expandedRowKeys } =
@@ -79,22 +82,27 @@ const Models: React.FC<ModelsProps> = ({
     undefined
   );
   const [currentInstanceUrl, setCurrentInstanceUrl] = useState<string>('');
+  const [deleteModalVisible, setDeleteModalVisible] = useState(false);
+  const [deletConfig, setDeletConfig] = useState<any>({});
+  const modalRef = useRef<any>(null);
 
   const ActionList = [
     {
-      label: intl.formatMessage({ id: 'common.button.edit' }),
+      label: 'common.button.edit',
       key: 'edit',
       icon: <EditOutlined />
     },
     {
-      label: intl.formatMessage({ id: 'models.openinplayground' }),
+      label: 'models.openinplayground',
       key: 'chat',
       icon: <WechatWorkOutlined />
     },
     {
-      label: intl.formatMessage({ id: 'common.button.delete' }),
+      label: 'common.button.delete',
       key: 'delete',
-      danger: true,
+      props: {
+        danger: true
+      },
       icon: <DeleteOutlined />
     }
   ];
@@ -144,7 +152,8 @@ const Models: React.FC<ModelsProps> = ({
     setOpenLogModal(false);
   }, []);
   const handleDelete = async (row: any) => {
-    Modal.confirm({
+    console.log('handleDelete=======111', row);
+    showDeleteModal({
       title: '',
       content: intl.formatMessage(
         { id: 'common.delete.confirm' },
@@ -152,16 +161,27 @@ const Models: React.FC<ModelsProps> = ({
       ),
       async onOk() {
         await deleteModel(row.id);
-        message.success(intl.formatMessage({ id: 'common.message.success' }));
         updateExpandedRowKeys([row.id]);
-      },
-      onCancel() {
-        console.log('Cancel');
       }
     });
+    // setDeleteModalVisible(true);
+    // setDeletConfig({
+    //   title: '',
+    //   content: intl.formatMessage(
+    //     { id: 'common.delete.confirm' },
+    //     { type: intl.formatMessage({ id: 'models.table.models' }) }
+    //   ),
+    //   async onOk() {
+    //     await deleteModel(row.id);
+    //     updateExpandedRowKeys([row.id]);
+    //   },
+    //   onCancel: () => {
+    //     setDeleteModalVisible(false);
+    //   }
+    // });
   };
   const handleDeleteBatch = () => {
-    Modal.confirm({
+    showDeleteModal({
       title: '',
       content: intl.formatMessage(
         { id: 'common.delete.confirm' },
@@ -169,12 +189,8 @@ const Models: React.FC<ModelsProps> = ({
       ),
       async onOk() {
         await handleBatchRequest(rowSelection.selectedRowKeys, deleteModel);
-        message.success(intl.formatMessage({ id: 'common.message.success' }));
         rowSelection.clearSelections();
         updateExpandedRowKeys(rowSelection.selectedRowKeys);
-      },
-      onCancel() {
-        console.log('Cancel');
       }
     });
   };
@@ -192,7 +208,7 @@ const Models: React.FC<ModelsProps> = ({
     }
   };
   const handleDeleteInstace = (row: any, list: ModelInstanceListItem[]) => {
-    Modal.confirm({
+    showDeleteModal({
       title: '',
       content: intl.formatMessage(
         { id: 'common.delete.confirm' },
@@ -200,13 +216,9 @@ const Models: React.FC<ModelsProps> = ({
       ),
       async onOk() {
         await deleteModelInstance(row.id);
-        message.success(intl.formatMessage({ id: 'common.message.success' }));
         if (list.length === 1) {
           updateExpandedRowKeys([row.model_id]);
         }
-      },
-      onCancel() {
-        console.log('Cancel');
       }
     });
   };
@@ -234,6 +246,7 @@ const Models: React.FC<ModelsProps> = ({
 
   const handleSelect = useCallback((val: any, row: ListItem) => {
     if (val === 'edit') {
+      console.log('row=======', row);
       handleEdit(row);
     }
     if (val === 'chat') {
@@ -393,12 +406,13 @@ const Models: React.FC<ModelsProps> = ({
             key="operation"
             dataIndex="operation"
             render={(text, record) => {
-              return !record.transition ? (
+              console.log('record====9999', record);
+              return (
                 <DropdownButtons
                   items={setActionList(record)}
                   onSelect={(val) => handleSelect(val, record)}
                 ></DropdownButtons>
-              ) : null;
+              );
             }}
           />
         </SealTable>
@@ -416,8 +430,13 @@ const Models: React.FC<ModelsProps> = ({
         open={openLogModal}
         onCancel={handleLogModalCancel}
       ></ViewLogsModal>
+      <DeleteModal
+        open={deleteModalVisible}
+        {...deletConfig}
+        ref={modalRef}
+      ></DeleteModal>
     </>
   );
 };
 
-export default memo(Models);
+export default Models;
diff --git a/src/pages/resources/components/workers.tsx b/src/pages/resources/components/workers.tsx
index 7009ae60..0ffd42d1 100644
--- a/src/pages/resources/components/workers.tsx
+++ b/src/pages/resources/components/workers.tsx
@@ -1,6 +1,7 @@
 import PageTools from '@/components/page-tools';
 import ProgressBar from '@/components/progress-bar';
 import StatusTag from '@/components/status-tag';
+import useDeleteModal from '@/hooks/use-delete-modal';
 import useTableRowSelection from '@/hooks/use-table-row-selection';
 import useTableSort from '@/hooks/use-table-sort';
 import { convertFileSize, handleBatchRequest } from '@/utils';
@@ -10,7 +11,7 @@ import {
   SyncOutlined
 } from '@ant-design/icons';
 import { useIntl } from '@umijs/max';
-import { Button, Input, Modal, Space, Table, Tooltip, message } from 'antd';
+import { Button, Input, Space, Table, Tooltip } from 'antd';
 import _ from 'lodash';
 import { memo, useEffect, useState } from 'react';
 import { deleteWorker, queryWorkersList } from '../apis';
@@ -24,6 +25,7 @@ const Resources: React.FC = () => {
   const { sortOrder, setSortOrder } = useTableSort({
     defaultSortOrder: 'descend'
   });
+  const { showDeleteModal } = useDeleteModal();
   const rowSelection = useTableRowSelection();
   const intl = useIntl();
   const [total, setTotal] = useState(0);
@@ -100,7 +102,7 @@ const Resources: React.FC = () => {
   };
 
   const handleDelete = (row: ListItem) => {
-    Modal.confirm({
+    showDeleteModal({
       title: '',
       content: intl.formatMessage(
         { id: 'common.delete.confirm' },
@@ -109,17 +111,13 @@ const Resources: React.FC = () => {
       async onOk() {
         console.log('OK');
         await deleteWorker(row.id);
-        message.success(intl.formatMessage({ id: 'common.message.success' }));
         fetchData();
-      },
-      onCancel() {
-        console.log('Cancel');
       }
     });
   };
 
   const handleDeleteBatch = () => {
-    Modal.confirm({
+    showDeleteModal({
       title: '',
       content: intl.formatMessage(
         { id: 'common.delete.confirm' },
@@ -127,12 +125,8 @@ const Resources: React.FC = () => {
       ),
       async onOk() {
         await handleBatchRequest(rowSelection.selectedRowKeys, deleteWorker);
-        message.success(intl.formatMessage({ id: 'common.message.success' }));
         rowSelection.clearSelections();
         fetchData();
-      },
-      onCancel() {
-        console.log('Cancel');
       }
     });
   };
diff --git a/src/pages/users/index.tsx b/src/pages/users/index.tsx
index 881ece94..28109495 100644
--- a/src/pages/users/index.tsx
+++ b/src/pages/users/index.tsx
@@ -2,6 +2,7 @@ import DropdownButtons from '@/components/drop-down-buttons';
 import PageTools from '@/components/page-tools';
 import { PageAction } from '@/config';
 import type { PageActionType } from '@/config/types';
+import useDeleteModal from '@/hooks/use-delete-modal';
 import useTableRowSelection from '@/hooks/use-table-row-selection';
 import useTableSort from '@/hooks/use-table-sort';
 import { handleBatchRequest } from '@/utils';
@@ -15,7 +16,7 @@ import {
 } from '@ant-design/icons';
 import { PageContainer } from '@ant-design/pro-components';
 import { useIntl } from '@umijs/max';
-import { Button, Input, Modal, Space, Table, message } from 'antd';
+import { Button, Input, Space, Table, message } from 'antd';
 import dayjs from 'dayjs';
 import _ from 'lodash';
 import { useEffect, useState } from 'react';
@@ -30,6 +31,7 @@ const Users: React.FC = () => {
   const { sortOrder, setSortOrder } = useTableSort({
     defaultSortOrder: 'descend'
   });
+  const { showDeleteModal } = useDeleteModal();
   const intl = useIntl();
   const [total, setTotal] = useState(0);
   const [openAddModal, setOpenAddModal] = useState(false);
@@ -49,13 +51,15 @@ const Users: React.FC = () => {
   const ActionList = [
     {
       key: 'edit',
-      label: intl.formatMessage({ id: 'common.button.edit' }),
+      label: 'common.button.edit',
       icon: <EditOutlined></EditOutlined>
     },
     {
       key: 'delete',
-      danger: true,
-      label: intl.formatMessage({ id: 'common.button.delete' }),
+      props: {
+        danger: true
+      },
+      label: 'common.button.delete',
       icon: <DeleteOutlined></DeleteOutlined>
     }
   ];
@@ -138,7 +142,7 @@ const Users: React.FC = () => {
   };
 
   const handleDelete = (row: ListItem) => {
-    Modal.confirm({
+    showDeleteModal({
       title: '',
       content: intl.formatMessage(
         { id: 'common.delete.confirm' },
@@ -147,17 +151,13 @@ const Users: React.FC = () => {
       async onOk() {
         console.log('OK');
         await deleteUser(row.id);
-        message.success(intl.formatMessage({ id: 'common.message.success' }));
         fetchData();
-      },
-      onCancel() {
-        console.log('Cancel');
       }
     });
   };
 
   const handleDeleteBatch = () => {
-    Modal.confirm({
+    showDeleteModal({
       title: '',
       content: intl.formatMessage(
         { id: 'common.delete.confirm' },
@@ -165,12 +165,8 @@ const Users: React.FC = () => {
       ),
       async onOk() {
         await handleBatchRequest(rowSelection.selectedRowKeys, deleteUser);
-        message.success(intl.formatMessage({ id: 'common.message.success' }));
         rowSelection.clearSelections();
         fetchData();
-      },
-      onCancel() {
-        console.log('Cancel');
       }
     });
   };
@@ -295,7 +291,7 @@ const Users: React.FC = () => {
             defaultSortOrder="descend"
             sortOrder={sortOrder}
             showSorterTooltip={false}
-            sorter={true}
+            sorter={false}
             render={(text, record) => {
               return dayjs(text).format('YYYY-MM-DD HH:mm:ss');
             }}