diff --git a/src/components/delete-modal/index.tsx b/src/components/delete-modal/index.tsx index db4ad06a..dbe62e02 100644 --- a/src/components/delete-modal/index.tsx +++ b/src/components/delete-modal/index.tsx @@ -10,7 +10,7 @@ import { type ModalFuncProps } from 'antd'; import { createStyles } from 'antd-style'; -import { useState } from 'react'; +import { forwardRef, useImperativeHandle, useState } from 'react'; import styled from 'styled-components'; const useStyles = createStyles(({ css }) => ({ @@ -71,7 +71,7 @@ interface Configuration { checked: boolean; } -export default function useDeleteModel() { +const DeleteModal = forwardRef((props, ref) => { const intl = useIntl(); const { styles } = useStyles(); const { saveScrollHeight, restoreScrollHeight } = useBodyScroll(); @@ -123,89 +123,89 @@ export default function useDeleteModel() { } }; - const DeleteModal = () => { - return ( - - - - - } - > -
- - - - {config.title - ? intl.formatMessage({ id: config.title }) - : intl.formatMessage({ id: 'common.title.delete.confirm' })} - - -
-
- {config.checkConfig && ( - - - setConfiguration({ - checked: e.target.checked - }) - } - > - - {intl.formatMessage({ id: config.checkConfig?.checkText })} - - - - )} -
- ); - }; - return { - DeleteModal, + useImperativeHandle(ref, () => ({ show, hide, configuration - }; -} + })); + + return ( + + + + + } + > +
+ + + + {config.title + ? intl.formatMessage({ id: config.title }) + : intl.formatMessage({ id: 'common.title.delete.confirm' })} + + +
+
+ {config.checkConfig && ( + + + setConfiguration({ + checked: e.target.checked + }) + } + > + + {intl.formatMessage({ id: config.checkConfig?.checkText })} + + + + )} +
+ ); +}); + +export default DeleteModal; diff --git a/src/components/logs-viewer/config.ts b/src/components/logs-viewer/config.ts index fb81e382..f7f52ff2 100644 --- a/src/components/logs-viewer/config.ts +++ b/src/components/logs-viewer/config.ts @@ -1,7 +1,7 @@ export const controlSeqRegex = /\x1b\[(\d*);?(\d*)?([A-DJKHfm])/g; export const replaceLineRegex = /\r\n/g; -export const PageSize = 500; +export const PageSize = 1000; export const throttle = void>( func: T, diff --git a/src/components/logs-viewer/logs-pagination.tsx b/src/components/logs-viewer/logs-pagination.tsx index 5a5dff64..868ee8dc 100644 --- a/src/components/logs-viewer/logs-pagination.tsx +++ b/src/components/logs-viewer/logs-pagination.tsx @@ -106,4 +106,4 @@ const LogsPagination: React.FC = (props) => { ); }; -export default React.memo(LogsPagination); +export default LogsPagination; diff --git a/src/components/logs-viewer/styles/index.less b/src/components/logs-viewer/styles/index.less index a4cba1cb..e5d33bcc 100644 --- a/src/components/logs-viewer/styles/index.less +++ b/src/components/logs-viewer/styles/index.less @@ -17,7 +17,7 @@ top: 0; bottom: 0; right: -18px; - width: 80px; + // width: 80px; height: 185px; &:hover { diff --git a/src/components/logs-viewer/styles/logs-list.less b/src/components/logs-viewer/styles/logs-list.less index e1c71004..a5c55135 100644 --- a/src/components/logs-viewer/styles/logs-list.less +++ b/src/components/logs-viewer/styles/logs-list.less @@ -15,6 +15,7 @@ .text { min-height: 22px; + padding-inline-end: 80px; &.numable { position: relative; diff --git a/src/components/logs-viewer/styles/pagination.less b/src/components/logs-viewer/styles/pagination.less index 28af886f..db723688 100644 --- a/src/components/logs-viewer/styles/pagination.less +++ b/src/components/logs-viewer/styles/pagination.less @@ -12,7 +12,7 @@ } .ant-btn { - background-color: rgba(71, 71, 71, 100%) !important; + background-color: rgba(71, 71, 71, 70%) !important; } .pages { diff --git a/src/components/logs-viewer/virtual-log-list.tsx b/src/components/logs-viewer/virtual-log-list.tsx index 917568c2..ed2e46d6 100644 --- a/src/components/logs-viewer/virtual-log-list.tsx +++ b/src/components/logs-viewer/virtual-log-list.tsx @@ -11,7 +11,6 @@ import React, { useRef, useState } from 'react'; -import styled from 'styled-components'; import LogsList from './logs-list'; import LogsPagination from './logs-pagination'; import './styles/index.less'; @@ -28,12 +27,6 @@ interface LogsViewerProps { diffHeight?: number; } -const PaginationWrapper = styled.div` - position: absolute; - right: 50px; - top: 30px; -`; - const LogsViewer: React.FC = forwardRef((props, ref) => { const { diffHeight, url, tail: defaultTail, enableScorllLoad = true } = props; const { pageSize, page, setPage, setTotalPage, totalPage } = @@ -302,16 +295,6 @@ const LogsViewer: React.FC = forwardRef((props, ref) => { return (
- {/* - - */}
= forwardRef((props, ref) => {
( perPage: 10, search: '' }); - const { DeleteModal, show, hide, configuration } = useDeleteModel(); const { setChunkRequest } = useSetChunkRequest(); const { updateChunkedList, cacheDataListRef } = useUpdateChunkedList({ events: ['UPDATE', 'DELETE', 'INSERT'], @@ -204,7 +202,7 @@ export default function useTableFetch( row: ListItem & { name: string; id: number }, options?: any ) => { - show({ + modalRef.current?.show({ content: contentForDelete, operation: 'common.delete.single.confirm', name: row.name, @@ -212,7 +210,7 @@ export default function useTableFetch( async onOk() { console.log('OK'); await deleteAPI?.(row.id, { - ...configuration + ...modalRef.current?.configuration }); fetchData(); } @@ -220,7 +218,7 @@ export default function useTableFetch( }; const handleDeleteBatch = (options = {}) => { - show({ + modalRef.current?.show({ content: contentForDelete, operation: 'common.delete.confirm', selection: true, @@ -232,7 +230,7 @@ export default function useTableFetch( rowSelection.selectedRowKeys, async (id: any) => { await deleteAPI(id, { - configuration + ...modalRef.current?.configuration }); successIds.push(id); } @@ -275,7 +273,6 @@ export default function useTableFetch( sortOrder, queryParams, modalRef, - DeleteModal, setQueryParams, handleDelete, handleDeleteBatch, diff --git a/src/locales/en-US/common.ts b/src/locales/en-US/common.ts index 48ba137e..eeb50f1f 100644 --- a/src/locales/en-US/common.ts +++ b/src/locales/en-US/common.ts @@ -210,7 +210,7 @@ export default { 'common.button.feedback': 'Feedback', 'common.button.docs': 'Documentation', 'common.button.version': 'Version', - 'common.title.delete.confirm': 'Confirm delete', + 'common.title.delete.confirm': 'Confirm deletion', 'common.title.stop.confirm': 'Confirm stop', 'common.title.start.confirm': 'Confirm start', 'common.title.recreate.confirm': 'Confirm recreate', diff --git a/src/pages/api-keys/index.tsx b/src/pages/api-keys/index.tsx index 72b64842..d251a5d0 100644 --- a/src/pages/api-keys/index.tsx +++ b/src/pages/api-keys/index.tsx @@ -1,4 +1,5 @@ import AutoTooltip from '@/components/auto-tooltip'; +import DeleteModal from '@/components/delete-modal'; import PageTools from '@/components/page-tools'; import { PageAction } from '@/config'; import HotKeys from '@/config/hotkeys'; @@ -31,7 +32,7 @@ const APIKeys: React.FC = () => { rowSelection, queryParams, sortOrder, - DeleteModal, + modalRef, handleDelete, handleDeleteBatch, fetchData, @@ -260,7 +261,7 @@ const APIKeys: React.FC = () => { onCancel={handleModalCancel} onOk={handleModalOk} > - + ); }; diff --git a/src/pages/llmodels/components/table-list.tsx b/src/pages/llmodels/components/table-list.tsx index 1d978219..dcbf0a22 100644 --- a/src/pages/llmodels/components/table-list.tsx +++ b/src/pages/llmodels/components/table-list.tsx @@ -1,6 +1,6 @@ import { modelsExpandKeysAtom } from '@/atoms/models'; import AutoTooltip from '@/components/auto-tooltip'; -import useDeleteModel from '@/components/delete-modal'; +import DeleteModal from '@/components/delete-modal'; import DropDownActions from '@/components/drop-down-actions'; import DropdownButtons from '@/components/drop-down-buttons'; import { PageSize } from '@/components/logs-viewer/config'; @@ -146,7 +146,6 @@ const Models: React.FC = ({ loadend, total }) => { - const { DeleteModal, show } = useDeleteModel(); const { getGPUList, generateFormValues, gpuDeviceList } = useGenerateFormEditInitialValues(); const { saveScrollHeight, restoreScrollHeight } = useBodyScroll(); @@ -328,7 +327,7 @@ const Models: React.FC = ({ }, [onCancelViewLogs]); const handleDelete = async (row: any) => { - show({ + modalRef.current?.show({ content: 'models.table.models', operation: 'common.delete.single.confirm', name: row.name, @@ -343,7 +342,7 @@ const Models: React.FC = ({ }; const handleDeleteBatch = () => { - show({ + modalRef.current?.show({ content: 'models.table.models', operation: 'common.delete.confirm', selection: true, @@ -407,7 +406,7 @@ const Models: React.FC = ({ ); const handleDeleteInstace = useCallback( (row: any) => { - show({ + modalRef.current?.show({ content: 'models.instances', okText: 'common.button.delrecreate', operation: 'common.delete.single.confirm', @@ -488,7 +487,7 @@ const Models: React.FC = ({ } if (val === 'stop') { - show({ + modalRef.current?.show({ content: 'models.instances', title: 'common.title.stop.confirm', okText: 'common.button.stop', @@ -563,7 +562,7 @@ const Models: React.FC = ({ }; const handleStartBatch = async () => { - show({ + modalRef.current?.show({ content: 'models.table.models', title: 'common.title.start.confirm', okText: 'common.button.start', @@ -576,7 +575,7 @@ const Models: React.FC = ({ }; const handleStopBatch = async () => { - show({ + modalRef.current?.show({ content: 'models.table.models', title: 'common.title.stop.confirm', okText: 'common.button.stop', @@ -885,7 +884,7 @@ const Models: React.FC = ({ open={openLogModal} onCancel={handleLogModalCancel} > - + { dataSource, rowSelection, queryParams, - DeleteModal, + modalRef, fetchData, handleDelete, handleDeleteBatch, @@ -682,7 +683,7 @@ const ModelFiles = () => { }} > - + { dataSource, rowSelection, queryParams, - DeleteModal, + modalRef, handleDelete, handleDeleteBatch, fetchData, @@ -446,7 +447,7 @@ const Workers: React.FC = () => { /> - + setOpen(false)}> { rowSelection, queryParams, sortOrder, - DeleteModal, + modalRef, handleDelete, handleDeleteBatch, fetchData, @@ -320,7 +321,7 @@ const Users: React.FC = () => { onCancel={handleModalCancel} onOk={handleModalOk} > - + ); };