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/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');
}}