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

fix: intl refresh in modal confirm

Browse Source
This commit is contained in:
jialin
2024-07-19 09:34:14 +08:00
parent 34b5c2b034
commit 1439f59131
10 changed files with 156 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/delete-modal/index.less
+22
View File
@@ -0,0 +1,22 @@
:local(.delete-modal-content) {
display: flex;
font-size: var(--font-size-middle);
:global {
.anticon {
font-size: 20px;
margin-right: 10px;
color: var(--ant-color-warning);
}
.title {
display: flex;
align-items: center;
}
}
}
:local(.content) {
padding-top: 15px;
padding-left: 30px;
}
src/components/delete-modal/index.tsx
+62 -14
View File
@@ -1,29 +1,77 @@
import ModalFooter from '@/components/modal-footer';
import { ExclamationCircleFilled } from '@ant-design/icons';
import { useIntl } from '@umijs/max';
import { Modal, type ModalFuncProps } from 'antd';
import { forwardRef } from 'react';
import { Button, Modal, Space, message, type ModalFuncProps } from 'antd';
import { forwardRef, useImperativeHandle, useState } from 'react';
import Styles from './index.less';
const DeleteModal: React.FC<ModalFuncProps> = forwardRef((props, ref) => {
const DeleteModal = forwardRef((props, ref) => {
const intl = useIntl();
const { title, open, onOk, onCancel, content } = props;
const [visible, setVisible] = useState(false);
const [config, setConfig] = useState<ModalFuncProps & { content: string }>(
{}
);
useImperativeHandle(ref, () => ({
show: (data: ModalFuncProps & { content: string }) => {
setConfig(data);
setVisible(true);
},
hide: () => {
setVisible(false);
}
}));
const handleCancel = () => {
setVisible(false);
config.onCancel?.();
};
const handleOk = async () => {
await config.onOk?.();
message.success(intl.formatMessage({ id: 'common.message.success' }));
setVisible(false);
};
return (
<Modal
title={title}
simple={true}
open={open}
centered={true}
onOk={onOk}
onCancel={onCancel}
style={{
top: '20%'
}}
open={visible}
onOk={handleOk}
onCancel={handleCancel}
destroyOnClose={true}
closeIcon={false}
maskClosable={false}
keyboard={false}
width={600}
width={460}
styles={{}}
footer={<ModalFooter onCancel={onCancel} onOk={onOk}></ModalFooter>}
footer={
<Space size={20}>
<Button onClick={handleCancel} size="middle">
{intl.formatMessage({ id: 'common.button.cancel' })}
</Button>
<Button type="primary" onClick={handleOk} size="middle">
{intl.formatMessage({ id: 'common.button.delete' })}
</Button>
</Space>
}
>
{content}
<div className={Styles['delete-modal-content']}>
<span className="title">
<ExclamationCircleFilled />
<span>
{intl.formatMessage({ id: 'common.title.delete.confirm' })}
</span>
</span>
</div>
<div className={Styles['content']}>
{config.content &&
intl.formatMessage(
{ id: 'common.delete.confirm' },
{ type: intl.formatMessage({ id: config.content }) }
)}
</div>
</Modal>
);
});
src/components/modal-footer/index.tsx
+11 -1
View File
@@ -7,6 +7,8 @@ type ModalFooterProps = {
cancelText?: string;
okText?: string;
htmlType?: 'button' | 'submit';
okBtnProps?: any;
cancelBtnProps?: any;
form?: any;
loading?: boolean;
};
@@ -15,6 +17,8 @@ const ModalFooter: React.FC<ModalFooterProps> = ({
onCancel,
cancelText,
okText,
okBtnProps,
cancelBtnProps,
loading,
htmlType = 'button',
form
@@ -22,7 +26,12 @@ const ModalFooter: React.FC<ModalFooterProps> = ({
const intl = useIntl();
return (
<Space size={20}>
<Button onClick={onCancel} style={{ width: '88px' }} loading={loading}>
<Button
onClick={onCancel}
style={{ width: '88px' }}
loading={loading}
{...cancelBtnProps}
>
{cancelText || intl.formatMessage({ id: 'common.button.cancel' })}
</Button>
<Button
@@ -31,6 +40,7 @@ const ModalFooter: React.FC<ModalFooterProps> = ({
style={{ width: '88px' }}
loading={loading}
htmlType={htmlType}
{...okBtnProps}
>
{okText || intl.formatMessage({ id: 'common.button.save' })}
</Button>
src/locales/en-US/common.ts
+2 -1
View File
@@ -191,5 +191,6 @@ export default {
'common.button.help': 'Help',
'common.button.feedback': 'Feedback',
'common.button.docs': 'Documentation',
'common.button.version': 'Version'
'common.button.version': 'Version',
'common.title.delete.confirm': 'Confirm delete'
};
src/locales/zh-CN/common.ts
+3 -2
View File
@@ -175,7 +175,7 @@ export default {
'common.table.user': '用户',
'common.settings.instructions': '操作指引',
'common.settings.language': '语言',
'common.delete.confirm': '确定删除选中的{type}吗？',
'common.delete.confirm': '删除选中的{type}吗？',
'common.filter.name': '名称查询',
'common.form.password': '密码',
'common.form.username': '用户名',
@@ -184,5 +184,6 @@ export default {
'common.button.help': '帮助',
'common.button.feedback': '反馈',
'common.button.docs': '文档',
'common.button.version': '版本'
'common.button.version': '版本',
'common.title.delete.confirm': '确认删除'
};
src/pages/api-keys/index.tsx
+8 -13
View File
@@ -1,7 +1,7 @@
import DeleteModal from '@/components/delete-modal';
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';
@@ -11,7 +11,7 @@ import { useIntl } from '@umijs/max';
import { Button, Input, Space, Table, Tooltip } from 'antd';
import dayjs from 'dayjs';
import _ from 'lodash';
import { useEffect, useState } from 'react';
import { useEffect, useRef, useState } from 'react';
import { deleteApisKey, queryApisKeysList } from './apis';
import AddAPIKeyModal from './components/add-apikey';
import { ListItem } from './config/types';
@@ -19,12 +19,12 @@ import { ListItem } from './config/types';
const { Column } = Table;
const Models: React.FC = () => {
const { showDeleteModal } = useDeleteModal();
const rowSelection = useTableRowSelection();
const { sortOrder, setSortOrder } = useTableSort({
defaultSortOrder: 'descend'
});
const intl = useIntl();
const modalRef = useRef<any>(null);
const [dataSource, setDataSource] = useState([]);
const [total, setTotal] = useState(0);
const [openAddModal, setOpenAddModal] = useState(false);
@@ -98,12 +98,9 @@ const Models: React.FC = () => {
};
const handleDelete = (row: ListItem) => {
showDeleteModal({
modalRef.current.show({
title: '',
content: intl.formatMessage(
{ id: 'common.delete.confirm' },
{ type: intl.formatMessage({ id: 'apikeys.table.apikeys' }) }
),
content: 'apikeys.table.apikeys',
async onOk() {
console.log('OK');
await deleteApisKey(row.id);
@@ -113,12 +110,9 @@ const Models: React.FC = () => {
};
const handleDeleteBatch = () => {
showDeleteModal({
modalRef.current.show({
title: '',
content: intl.formatMessage(
{ id: 'common.delete.confirm' },
{ type: intl.formatMessage({ id: 'apikeys.table.apikeys' }) }
),
content: 'apikeys.table.apikeys',
async onOk() {
await handleBatchRequest(rowSelection.selectedRowKeys, deleteApisKey);
rowSelection.clearSelections();
@@ -262,6 +256,7 @@ const Models: React.FC = () => {
onCancel={handleModalCancel}
onOk={handleModalOk}
></AddAPIKeyModal>
<DeleteModal ref={modalRef}></DeleteModal>
</>
);
};
src/pages/llmodels/components/table-list.tsx
+7 -40
View File
@@ -5,7 +5,6 @@ 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';
@@ -66,7 +65,6 @@ const Models: React.FC<ModelsProps> = ({
const access = useAccess();
const intl = useIntl();
const [modal, contextHolder] = Modal.useModal();
const { showDeleteModal } = useDeleteModal();
const navigate = useNavigate();
const rowSelection = useTableRowSelection();
const { handleExpandChange, updateExpandedRowKeys, expandedRowKeys } =
@@ -82,8 +80,6 @@ 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 = [
@@ -152,41 +148,19 @@ const Models: React.FC<ModelsProps> = ({
setOpenLogModal(false);
}, []);
const handleDelete = async (row: any) => {
console.log('handleDelete=======111', row);
showDeleteModal({
modalRef.current.show({
title: '',
content: intl.formatMessage(
{ id: 'common.delete.confirm' },
{ type: intl.formatMessage({ id: 'models.table.models' }) }
),
content: 'models.table.models',
async onOk() {
await deleteModel(row.id);
updateExpandedRowKeys([row.id]);
}
});
// 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 = () => {
showDeleteModal({
modalRef.current.show({
title: '',
content: intl.formatMessage(
{ id: 'common.delete.confirm' },
{ type: intl.formatMessage({ id: 'models.table.models' }) }
),
content: 'models.table.models',
async onOk() {
await handleBatchRequest(rowSelection.selectedRowKeys, deleteModel);
rowSelection.clearSelections();
@@ -208,12 +182,9 @@ const Models: React.FC<ModelsProps> = ({
}
};
const handleDeleteInstace = (row: any, list: ModelInstanceListItem[]) => {
showDeleteModal({
modalRef.current.show({
title: '',
content: intl.formatMessage(
{ id: 'common.delete.confirm' },
{ type: intl.formatMessage({ id: 'models.instances' }) }
),
content: 'models.instances',
async onOk() {
await deleteModelInstance(row.id);
if (list.length === 1) {
@@ -430,11 +401,7 @@ const Models: React.FC<ModelsProps> = ({
open={openLogModal}
onCancel={handleLogModalCancel}
></ViewLogsModal>
<DeleteModal
open={deleteModalVisible}
{...deletConfig}
ref={modalRef}
></DeleteModal>
<DeleteModal ref={modalRef}></DeleteModal>
</>
);
};
src/pages/playground/components/view-code-modal.tsx
+24 -5
View File
@@ -56,10 +56,15 @@ const ViewCodeModal: React.FC<ViewModalProps> = (props) => {
const systemList = systemMessage
? [{ role: 'system', content: systemMessage }]
: [];
const code = `curl ${window.location.origin}/v1-openai/chat/completions \\\n-H "Content-Type: application/json" \\\n-H "Authorization: Bearer $\{GPUSTACK_API_KEY}" \\\n-d '${JSON.stringify(
const code = `curl ${window.location.origin}/v1-openai/chat/completions \\\n-H "Content-Type: application/json" \\\n-H "Authorization: Bearer {YOUR_GUPSTACK_API_KEY}" \\\n-d '${JSON.stringify(
{
...parameters,
messages: [...systemList, ...messageList]
messages: [
...systemList,
..._.map(messageList, (item: any) => {
return { role: item.role, content: item.content };
})
]
},
null,
2
@@ -69,10 +74,15 @@ const ViewCodeModal: React.FC<ViewModalProps> = (props) => {
const systemList = systemMessage
? [{ role: 'system', content: systemMessage }]
: [];
const code = `const OpenAI = require("openai");\n\nconst openai = new OpenAI({\n"apiKey": $\{GUPSTACK_API_KEY},\n"baseURL": "${BaseURL}"\n});\n\n\nasync function main(){\nconst params = ${JSON.stringify(
const code = `const OpenAI = require("openai");\n\nconst openai = new OpenAI({\n"apiKey": "YOUR_GUPSTACK_API_KEY",\n"baseURL": "${BaseURL}"\n});\n\n\nasync function main(){\nconst params = ${JSON.stringify(
{
...parameters,
messages: [...systemList, ...messageList]
messages: [
...systemList,
..._.map(messageList, (item: any) => {
return { role: item.role, content: item.content };
})
]
},
null,
2
@@ -95,7 +105,16 @@ const ViewCodeModal: React.FC<ViewModalProps> = (props) => {
const systemList = systemMessage
? [{ role: 'system', content: systemMessage }]
: [];
const code = `from openai import OpenAI\n\nbaseURL = ${BaseURL}\n\nclient = OpenAI(\nbase_url=baseURL, \napi_key="$\{GUPSTACK_API_KEY}"\n)\n\ncompletion = client.chat.completions.create(\n${formattedParams} messages=${JSON.stringify([...systemList, ...messageList], null, 2)})\nprint(completion.choices[0].message.content)`;
const code = `from openai import OpenAI\n\nbaseURL = "${BaseURL}"\n\nclient = OpenAI(\nbase_url=baseURL, \napi_key="YOUR_GUPSTACK_API_KEY"\n)\n\ncompletion = client.chat.completions.create(\n${formattedParams} messages=${JSON.stringify(
[
...systemList,
..._.map(messageList, (item: any) => {
return { role: item.role, content: item.content };
})
],
null,
2
)})\nprint(completion.choices[0].message.content)`;
setCodeValue(code);
}
formatCode();
src/pages/resources/components/workers.tsx
+9 -14
View File
@@ -1,7 +1,7 @@
import DeleteModal from '@/components/delete-modal';
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';
@@ -13,7 +13,7 @@ import {
import { useIntl } from '@umijs/max';
import { Button, Input, Space, Table, Tooltip } from 'antd';
import _ from 'lodash';
import { memo, useEffect, useState } from 'react';
import { memo, useEffect, useRef, useState } from 'react';
import { deleteWorker, queryWorkersList } from '../apis';
import { WorkerStatusMapValue, status } from '../config';
import { Filesystem, GPUDeviceItem, ListItem } from '../config/types';
@@ -25,7 +25,7 @@ const Resources: React.FC = () => {
const { sortOrder, setSortOrder } = useTableSort({
defaultSortOrder: 'descend'
});
const { showDeleteModal } = useDeleteModal();
const modalRef = useRef<any>(null);
const rowSelection = useTableRowSelection();
const intl = useIntl();
const [total, setTotal] = useState(0);
@@ -102,12 +102,9 @@ const Resources: React.FC = () => {
};
const handleDelete = (row: ListItem) => {
showDeleteModal({
modalRef.current.show({
title: '',
content: intl.formatMessage(
{ id: 'common.delete.confirm' },
{ type: ' worker ' }
),
content: 'worker',
async onOk() {
console.log('OK');
await deleteWorker(row.id);
@@ -117,12 +114,9 @@ const Resources: React.FC = () => {
};
const handleDeleteBatch = () => {
showDeleteModal({
modalRef.current.show({
title: '',
content: intl.formatMessage(
{ id: 'common.delete.confirm' },
{ type: ` wokers ` }
),
content: 'wokers',
async onOk() {
await handleBatchRequest(rowSelection.selectedRowKeys, deleteWorker);
rowSelection.clearSelections();
@@ -279,7 +273,7 @@ const Resources: React.FC = () => {
className="m-r-5"
style={{ display: 'flex', width: 25 }}
>
[{index}]
[{item.index}]
</span>
<ProgressBar
key={index}
@@ -383,6 +377,7 @@ const Resources: React.FC = () => {
}}
/>
</Table>
<DeleteModal ref={modalRef}></DeleteModal>
</>
);
};
src/pages/users/index.tsx
+8 -13
View File
@@ -1,8 +1,8 @@
import DeleteModal from '@/components/delete-modal';
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';
@@ -19,7 +19,7 @@ import { useIntl } from '@umijs/max';
import { Button, Input, Space, Table, message } from 'antd';
import dayjs from 'dayjs';
import _ from 'lodash';
import { useEffect, useState } from 'react';
import { useEffect, useRef, useState } from 'react';
import { createUser, deleteUser, queryUsersList, updateUser } from './apis';
import AddModal from './components/add-modal';
import { FormData, ListItem } from './config/types';
@@ -31,8 +31,8 @@ const Users: React.FC = () => {
const { sortOrder, setSortOrder } = useTableSort({
defaultSortOrder: 'descend'
});
const { showDeleteModal } = useDeleteModal();
const intl = useIntl();
const modalRef = useRef<any>(null);
const [total, setTotal] = useState(0);
const [openAddModal, setOpenAddModal] = useState(false);
const [loading, setLoading] = useState(false);
@@ -142,12 +142,9 @@ const Users: React.FC = () => {
};
const handleDelete = (row: ListItem) => {
showDeleteModal({
modalRef.current.show({
title: '',
content: intl.formatMessage(
{ id: 'common.delete.confirm' },
{ type: intl.formatMessage({ id: 'users.table.user' }) }
),
content: 'users.table.user',
async onOk() {
console.log('OK');
await deleteUser(row.id);
@@ -157,12 +154,9 @@ const Users: React.FC = () => {
};
const handleDeleteBatch = () => {
showDeleteModal({
modalRef.current.show({
title: '',
content: intl.formatMessage(
{ id: 'common.delete.confirm' },
{ type: intl.formatMessage({ id: 'users.table.user' }) }
),
content: 'users.table.user',
async onOk() {
await handleBatchRequest(rowSelection.selectedRowKeys, deleteUser);
rowSelection.clearSelections();
@@ -319,6 +313,7 @@ const Users: React.FC = () => {
onCancel={handleModalCancel}
onOk={handleModalOk}
></AddModal>
<DeleteModal ref={modalRef}></DeleteModal>
</>
);
};