root/gpustack-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: api key table list sort

Browse Source
This commit is contained in:
jialin
2024-07-18 18:14:50 +08:00
parent 73d07faacf
commit 714e2d927a
10 changed files with 177 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/delete-modal/index.tsx
+31
View File
@@ -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;
src/components/drop-down-buttons/index.tsx
+37 -5
View File
@@ -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}
src/components/seal-table/components/seal-column.tsx
+1
View File
@@ -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
src/components/seal-table/components/table-row.tsx
+8 -1
View File
@@ -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
src/hooks/use-delete-modal.ts
+26
View File
@@ -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 };
}
src/pages/api-keys/index.tsx
+9 -13
View File
@@ -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');
}}
src/pages/llmodels/components/instance-item.tsx
+6 -3
View File
@@ -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 />
}
];
src/pages/llmodels/components/table-list.tsx
+43 -24
View File
@@ -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;
src/pages/resources/components/workers.tsx
+5 -11
View File
@@ -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');
}
});
};
src/pages/users/index.tsx
+11 -15
View File
@@ -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');
}}