style: keep the logs pagination visible

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 (
-      <Modal
-        style={{
-          top: '20%'
-        }}
-        open={visible}
-        onOk={handleOk}
-        onCancel={handleCancel}
-        destroyOnClose={false}
-        closeIcon={false}
-        maskClosable={false}
-        keyboard={false}
-        width={460}
-        styles={{
-          footer: {
-            marginTop: '20px'
-          }
-        }}
-        footer={
-          <Space size={20}>
-            <Button onClick={handleCancel} size="middle">
-              {config.cancelText
-                ? intl.formatMessage({ id: config.cancelText })
-                : intl.formatMessage({ id: 'common.button.cancel' })}
-            </Button>
-            <Button type="primary" onClick={handleOk} size="middle">
-              {config.okText
-                ? intl.formatMessage({ id: config.okText })
-                : intl.formatMessage({ id: 'common.button.delete' })}
-            </Button>
-          </Space>
-        }
-      >
-        <div className={styles['delete-modal-content']}>
-          <span className="title">
-            <ExclamationCircleFilled />
-            <span>
-              {config.title
-                ? intl.formatMessage({ id: config.title })
-                : intl.formatMessage({ id: 'common.title.delete.confirm' })}
-            </span>
-          </span>
-        </div>
-        <div
-          className={styles['content']}
-          dangerouslySetInnerHTML={{
-            __html: config.content
-              ? intl.formatMessage(
-                  {
-                    id: config.operation || ''
-                  },
-                  {
-                    type: intl.formatMessage({ id: config.content }),
-                    name: config.name
-                  }
-                )
-              : ''
-          }}
-        ></div>
-        {config.checkConfig && (
-          <CheckboxWrapper>
-            <Checkbox
-              checked={configuration.checked}
-              onChange={(e) =>
-                setConfiguration({
-                  checked: e.target.checked
-                })
-              }
-            >
-              <span className="check-text">
-                {intl.formatMessage({ id: config.checkConfig?.checkText })}
-              </span>
-            </Checkbox>
-          </CheckboxWrapper>
-        )}
-      </Modal>
-    );
-  };
-  return {
-    DeleteModal,
+  useImperativeHandle(ref, () => ({
     show,
     hide,
     configuration
-  };
-}
+  }));
+
+  return (
+    <Modal
+      style={{
+        top: '20%'
+      }}
+      open={visible}
+      onOk={handleOk}
+      onCancel={handleCancel}
+      destroyOnClose={false}
+      closeIcon={false}
+      maskClosable={false}
+      keyboard={false}
+      width={460}
+      styles={{
+        footer: {
+          marginTop: '20px'
+        }
+      }}
+      footer={
+        <Space size={20}>
+          <Button onClick={handleCancel} size="middle">
+            {config.cancelText
+              ? intl.formatMessage({ id: config.cancelText })
+              : intl.formatMessage({ id: 'common.button.cancel' })}
+          </Button>
+          <Button type="primary" onClick={handleOk} size="middle">
+            {config.okText
+              ? intl.formatMessage({ id: config.okText })
+              : intl.formatMessage({ id: 'common.button.delete' })}
+          </Button>
+        </Space>
+      }
+    >
+      <div className={styles['delete-modal-content']}>
+        <span className="title">
+          <ExclamationCircleFilled />
+          <span>
+            {config.title
+              ? intl.formatMessage({ id: config.title })
+              : intl.formatMessage({ id: 'common.title.delete.confirm' })}
+          </span>
+        </span>
+      </div>
+      <div
+        className={styles['content']}
+        dangerouslySetInnerHTML={{
+          __html: config.content
+            ? intl.formatMessage(
+                {
+                  id: config.operation || ''
+                },
+                {
+                  type: intl.formatMessage({ id: config.content }),
+                  name: config.name
+                }
+              )
+            : ''
+        }}
+      ></div>
+      {config.checkConfig && (
+        <CheckboxWrapper>
+          <Checkbox
+            checked={configuration.checked}
+            onChange={(e) =>
+              setConfiguration({
+                checked: e.target.checked
+              })
+            }
+          >
+            <span className="check-text">
+              {intl.formatMessage({ id: config.checkConfig?.checkText })}
+            </span>
+          </Checkbox>
+        </CheckboxWrapper>
+      )}
+    </Modal>
+  );
+});
+
+export default DeleteModal;

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 = <T extends (...args: any[]) => void>(
   func: T,

src/components/logs-viewer/logs-pagination.tsx

@@ -106,4 +106,4 @@ const LogsPagination: React.FC<LogsPaginationProps> = (props) => {
   );
 };
 
-export default React.memo(LogsPagination);
+export default LogsPagination;

src/components/logs-viewer/styles/index.less

@@ -17,7 +17,7 @@
         top: 0;
         bottom: 0;
         right: -18px;
-        width: 80px;
+        // width: 80px;
         height: 185px;
 
         &:hover {

src/components/logs-viewer/styles/logs-list.less

@@ -15,6 +15,7 @@
 
     .text {
       min-height: 22px;
+      padding-inline-end: 80px;
 
       &.numable {
         position: relative;

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 {

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<LogsViewerProps> = 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<LogsViewerProps> = forwardRef((props, ref) => {
 
   return (
     <div className="logs-viewer-wrap-w2">
-      {/* <PaginationWrapper>
-        <Pagination
-          simple={{ readOnly: true }}
-          total={totalPage}
-          current={page}
-          pageSize={pageSize}
-          showSizeChanger={false}
-          hideOnSinglePage={false}
-        ></Pagination>
-      </PaginationWrapper> */}
       <div className="wrap">
         <div>
           <LogsList
@@ -331,7 +314,7 @@ const LogsViewer: React.FC<LogsViewerProps> = forwardRef((props, ref) => {
           <div className="pg">
             <div
               className={classNames('pg-inner', {
-                'at-top': isAtTop
+                'at-top': true
               })}
             >
               <LogsPagination

src/hooks/use-table-fetch.ts

@@ -1,4 +1,3 @@
-import useDeleteModel from '@/components/delete-modal';
 import useSetChunkRequest from '@/hooks/use-chunk-request';
 import useTableRowSelection from '@/hooks/use-table-row-selection';
 import useTableSort from '@/hooks/use-table-sort';
@@ -56,7 +55,6 @@ export default function useTableFetch<ListItem>(
     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<ListItem>(
     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<ListItem>(
       async onOk() {
         console.log('OK');
         await deleteAPI?.(row.id, {
-          ...configuration
+          ...modalRef.current?.configuration
         });
         fetchData();
       }
@@ -220,7 +218,7 @@ export default function useTableFetch<ListItem>(
   };
 
   const handleDeleteBatch = (options = {}) => {
-    show({
+    modalRef.current?.show({
       content: contentForDelete,
       operation: 'common.delete.confirm',
       selection: true,
@@ -232,7 +230,7 @@ export default function useTableFetch<ListItem>(
           rowSelection.selectedRowKeys,
           async (id: any) => {
             await deleteAPI(id, {
-              configuration
+              ...modalRef.current?.configuration
             });
             successIds.push(id);
           }
@@ -275,7 +273,6 @@ export default function useTableFetch<ListItem>(
     sortOrder,
     queryParams,
     modalRef,
-    DeleteModal,
     setQueryParams,
     handleDelete,
     handleDeleteBatch,

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',

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}
       ></AddAPIKeyModal>
-      <DeleteModal></DeleteModal>
+      <DeleteModal ref={modalRef}></DeleteModal>
     </>
   );
 };

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<ModelsProps> = ({
   loadend,
   total
 }) => {
-  const { DeleteModal, show } = useDeleteModel();
   const { getGPUList, generateFormValues, gpuDeviceList } =
     useGenerateFormEditInitialValues();
   const { saveScrollHeight, restoreScrollHeight } = useBodyScroll();
@@ -328,7 +327,7 @@ const Models: React.FC<ModelsProps> = ({
   }, [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<ModelsProps> = ({
   };
 
   const handleDeleteBatch = () => {
-    show({
+    modalRef.current?.show({
       content: 'models.table.models',
       operation: 'common.delete.confirm',
       selection: true,
@@ -407,7 +406,7 @@ const Models: React.FC<ModelsProps> = ({
   );
   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<ModelsProps> = ({
         }
 
         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<ModelsProps> = ({
   };
 
   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<ModelsProps> = ({
   };
 
   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<ModelsProps> = ({
         open={openLogModal}
         onCancel={handleLogModalCancel}
       ></ViewLogsModal>
-      <DeleteModal></DeleteModal>
+      <DeleteModal ref={modalRef}></DeleteModal>
       <APIAccessInfoModal
         open={apiAccessInfo.show}
         data={apiAccessInfo.data}

src/pages/resources/components/model-files.tsx

@@ -1,5 +1,6 @@
 import { modelsExpandKeysAtom } from '@/atoms/models';
 import AutoTooltip from '@/components/auto-tooltip';
+import DeleteModal from '@/components/delete-modal';
 import DropdownButtons from '@/components/drop-down-buttons';
 import { TooltipOverlayScroller } from '@/components/overlay-scroller';
 import { FilterBar } from '@/components/page-tools';
@@ -293,7 +294,7 @@ const ModelFiles = () => {
     dataSource,
     rowSelection,
     queryParams,
-    DeleteModal,
+    modalRef,
     fetchData,
     handleDelete,
     handleDeleteBatch,
@@ -682,7 +683,7 @@ const ModelFiles = () => {
           }}
         ></Table>
       </ConfigProvider>
-      <DeleteModal></DeleteModal>
+      <DeleteModal ref={modalRef}></DeleteModal>
       <DownloadModal
         onCancel={handleDownloadCancel}
         onOk={handleDownload}

src/pages/resources/components/workers.tsx

@@ -1,4 +1,5 @@
 import AutoTooltip from '@/components/auto-tooltip';
+import DeleteModal from '@/components/delete-modal';
 import DropdownButtons from '@/components/drop-down-buttons';
 import { FilterBar } from '@/components/page-tools';
 import ProgressBar from '@/components/progress-bar';
@@ -93,7 +94,7 @@ const Workers: React.FC = () => {
     dataSource,
     rowSelection,
     queryParams,
-    DeleteModal,
+    modalRef,
     handleDelete,
     handleDeleteBatch,
     fetchData,
@@ -446,7 +447,7 @@ const Workers: React.FC = () => {
           />
         </Table>
       </ConfigProvider>
-      <DeleteModal></DeleteModal>
+      <DeleteModal ref={modalRef}></DeleteModal>
       <AddWorker open={open} onCancel={() => setOpen(false)}></AddWorker>
       <UpdateLabels
         open={updateLabelsData.open}

src/pages/users/index.tsx

@@ -1,4 +1,5 @@
 import AutoTooltip from '@/components/auto-tooltip';
+import DeleteModal from '@/components/delete-modal';
 import DropdownButtons from '@/components/drop-down-buttons';
 import PageTools from '@/components/page-tools';
 import { PageAction } from '@/config';
@@ -54,7 +55,7 @@ const Users: React.FC = () => {
     rowSelection,
     queryParams,
     sortOrder,
-    DeleteModal,
+    modalRef,
     handleDelete,
     handleDeleteBatch,
     fetchData,
@@ -320,7 +321,7 @@ const Users: React.FC = () => {
         onCancel={handleModalCancel}
         onOk={handleModalOk}
       ></AddModal>
-      <DeleteModal></DeleteModal>
+      <DeleteModal ref={modalRef}></DeleteModal>
     </>
   );
 };