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