[ISSUE #3439] Increment console config page size (#3507)

* 配置pageSize列表 #3439

* Service List Page Increase the number of pages switching function is the same as the configuration management page #3500

console/src/main/resources/static/console-fe/src/constants.js

@@ -38,3 +38,5 @@ export const PERMISSIONS_LIST = 'PERMISSIONS_LIST';
 export const GET_NAMESPACES = 'GET_NAMESPACES';
 
 export const GET_CONFIGURATION = 'GET_CONFIGURATION';
+
+export const GLOBAL_PAGE_SIZE_LIST = [10, 20, 30, 50, 100];

console/src/main/resources/static/console-fe/src/pages/ConfigurationManagement/ConfigurationManagement/ConfigurationManagement.js

@@ -46,7 +46,7 @@ import { connect } from 'react-redux';
 import { getConfigs } from '../../../reducers/configuration';
 
 import './index.scss';
-import { LANGUAGE_KEY } from '../../../constants';
+import { LANGUAGE_KEY, GLOBAL_PAGE_SIZE_LIST } from '../../../constants';
 
 const { Panel } = Collapse;
 const configsTableSelected = new Map();
@@ -1384,7 +1384,7 @@ class ConfigurationManagement extends React.Component {
                 </div>
                 <Pagination
                   style={{ float: 'right' }}
-                  pageSizeList={[10, 20, 30]}
+                  pageSizeList={ GLOBAL_PAGE_SIZE_LIST }
                   pageSizePosition="start"
                   pageSizeSelector="dropdown"
                   popupProps={{ align: 'bl tl' }}

console/src/main/resources/static/console-fe/src/pages/ServiceManagement/ServiceList/ServiceList.js

@@ -37,6 +37,7 @@ import EditServiceDialog from '../ServiceDetail/EditServiceDialog';
 import ShowServiceCodeing from 'components/ShowCodeing/ShowServiceCodeing';
 
 import './ServiceList.scss';
+import { GLOBAL_PAGE_SIZE_LIST } from '../../../constants';
 
 const FormItem = Form.Item;
 const { Row, Col } = Grid;
@@ -94,12 +95,14 @@ class ServiceList extends React.Component {
       `serviceNameParam=${search.serviceName}`,
       `groupNameParam=${search.groupName}`,
     ];
+    this.openLoading();
     request({
       url: `v1/ns/catalog/services?${parameter.join('&')}`,
       success: ({ count = 0, serviceList = [] } = {}) => {
         this.setState({
           dataSource: serviceList,
           total: count,
+          loading: false,
         });
       },
       error: () =>
@@ -107,6 +110,7 @@ class ServiceList extends React.Component {
           dataSource: [],
           total: 0,
           currentPage: 0,
+          loading: false,
         }),
     });
   }
@@ -129,6 +133,10 @@ class ServiceList extends React.Component {
     this.showcode.current.getInstance().openDialog(record);
   }
 
+  handlePageSizeChange(pageSize) {
+    this.setState({ pageSize }, () => this.queryServiceList());
+  }
+
   deleteService(service) {
     const { locale = {} } = this.props;
     const { prompt, promptDelete } = locale;
@@ -187,16 +195,6 @@ class ServiceList extends React.Component {
 
     return (
       <div className="main-container service-management">
-        <Loading
-          shape="flower"
-          style={{
-            position: 'relative',
-            width: '100%',
-          }}
-          visible={this.state.loading}
-          tip="Loading..."
-          color="#333"
-        >
         <div style={{ marginTop: -15 }}>
           <RegionGroup
             setNowNameSpace={this.setNowNameSpace}
@@ -274,15 +272,13 @@ class ServiceList extends React.Component {
               dataSource={this.state.dataSource}
               locale={{ empty: pubNoData }}
               getRowProps={row => this.rowColor(row)}
+              loading={this.state.loading}
             >
               <Column title={locale.columnServiceName} dataIndex="name" />
               <Column title={locale.groupName} dataIndex="groupName" />
               <Column title={locale.columnClusterCount} dataIndex="clusterCount" />
               <Column title={locale.columnIpCount} dataIndex="ipCount" />
-                <Column
-                  title={locale.columnHealthyInstanceCount}
-                  dataIndex="healthyInstanceCount"
-                />
+              <Column title={locale.columnHealthyInstanceCount} dataIndex="healthyInstanceCount" />
               <Column title={locale.columnTriggerFlag} dataIndex="triggerFlag" />
               <Column
                 title={operation}
@@ -297,9 +293,7 @@ class ServiceList extends React.Component {
                     <a
                       onClick={() => {
                         const { name, groupName } = record;
-                          this.props.history.push(
-                            generateUrl('/serviceDetail', { name, groupName })
-                          );
+                        this.props.history.push(generateUrl('/serviceDetail', { name, groupName }));
                       }}
                       style={{ marginRight: 5 }}
                     >
@@ -319,7 +313,6 @@ class ServiceList extends React.Component {
             </Table>
           </Col>
         </Row>
-          {this.state.total > this.state.pageSize && (
         <div
           style={{
             marginTop: 10,
@@ -328,15 +321,17 @@ class ServiceList extends React.Component {
         >
           <Pagination
             current={this.state.currentPage}
+            pageSizeList={GLOBAL_PAGE_SIZE_LIST}
+            pageSizePosition="start"
+            pageSizeSelector="dropdown"
+            popupProps={{ align: 'bl tl' }}
             total={this.state.total}
             pageSize={this.state.pageSize}
-                onChange={currentPage =>
-                  this.setState({ currentPage }, () => this.queryServiceList())
-                }
+            onPageSizeChange={pageSize => this.handlePageSizeChange(pageSize)}
+            onChange={currentPage => this.setState({ currentPage }, () => this.queryServiceList())}
           />
         </div>
-          )}
-        </Loading>
+
         <ShowServiceCodeing ref={this.showcode} />
         <EditServiceDialog
           ref={this.editServiceDialog}