From e4fdc3820f6bfb5280c81a37224085f4cede1da8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?ZZQ=E7=9A=84?=
 <33930711+zzq1314zll@users.noreply.github.com>
Date: Tue, 4 Aug 2020 11:12:27 +0800
Subject: [PATCH] [ISSUE  #3439] Increment console config page size (#3507)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 配置pageSize列表 #3439

* Service List Page Increase the number of pages switching function is the same as the configuration management page #3500
---
 .../static/console-fe/src/constants.js        |   2 +
 .../ConfigurationManagement.js                |   4 +-
 .../ServiceList/ServiceList.js                | 279 +++++++++---------
 3 files changed, 141 insertions(+), 144 deletions(-)

diff --git a/console/src/main/resources/static/console-fe/src/constants.js b/console/src/main/resources/static/console-fe/src/constants.js
index a6d112201..2dd94bd0a 100644
--- a/console/src/main/resources/static/console-fe/src/constants.js
+++ b/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];
diff --git a/console/src/main/resources/static/console-fe/src/pages/ConfigurationManagement/ConfigurationManagement/ConfigurationManagement.js b/console/src/main/resources/static/console-fe/src/pages/ConfigurationManagement/ConfigurationManagement/ConfigurationManagement.js
index 79695ffa1..4780fa99d 100644
--- a/console/src/main/resources/static/console-fe/src/pages/ConfigurationManagement/ConfigurationManagement/ConfigurationManagement.js
+++ b/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' }}
diff --git a/console/src/main/resources/static/console-fe/src/pages/ServiceManagement/ServiceList/ServiceList.js b/console/src/main/resources/static/console-fe/src/pages/ServiceManagement/ServiceList/ServiceList.js
index 4bc74cb63..36361566d 100644
--- a/console/src/main/resources/static/console-fe/src/pages/ServiceManagement/ServiceList/ServiceList.js
+++ b/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,156 +195,143 @@ class ServiceList extends React.Component {
 
     return (
       <div className="main-container service-management">
-        <Loading
-          shape="flower"
+        <div style={{ marginTop: -15 }}>
+          <RegionGroup
+            setNowNameSpace={this.setNowNameSpace}
+            namespaceCallBack={this.getQueryLater}
+          />
+        </div>
+        <h3 className="page-title">
+          <span className="title-item">{serviceList}</span>
+          <span className="title-item">|</span>
+          <span className="title-item">{nowNamespaceName}</span>
+          <span className="title-item">{nowNamespaceId}</span>
+        </h3>
+        <Row
+          className="demo-row"
           style={{
-            position: 'relative',
-            width: '100%',
+            marginBottom: 10,
+            padding: 0,
           }}
-          visible={this.state.loading}
-          tip="Loading..."
-          color="#333"
         >
-          <div style={{ marginTop: -15 }}>
-            <RegionGroup
-              setNowNameSpace={this.setNowNameSpace}
-              namespaceCallBack={this.getQueryLater}
-            />
-          </div>
-          <h3 className="page-title">
-            <span className="title-item">{serviceList}</span>
-            <span className="title-item">|</span>
-            <span className="title-item">{nowNamespaceName}</span>
-            <span className="title-item">{nowNamespaceId}</span>
-          </h3>
-          <Row
-            className="demo-row"
-            style={{
-              marginBottom: 10,
-              padding: 0,
-            }}
-          >
-            <Col span="24">
-              <Form inline field={this.field}>
-                <FormItem label={serviceName}>
-                  <Input
-                    placeholder={serviceNamePlaceholder}
-                    style={{ width: 200 }}
-                    value={search.serviceName}
-                    onChange={serviceName => this.setState({ search: { ...search, serviceName } })}
-                    onPressEnter={() =>
-                      this.setState({ currentPage: 1 }, () => this.queryServiceList())
-                    }
-                  />
-                </FormItem>
-                <FormItem label={groupName}>
-                  <Input
-                    placeholder={groupNamePlaceholder}
-                    style={{ width: 200 }}
-                    value={search.groupName}
-                    onChange={groupName => this.setState({ search: { ...search, groupName } })}
-                    onPressEnter={() =>
-                      this.setState({ currentPage: 1 }, () => this.queryServiceList())
-                    }
-                  />
-                </FormItem>
-                <Form.Item label={`${hiddenEmptyService}:`}>
-                  <Switch
-                    checked={hasIpCount}
-                    onChange={hasIpCount =>
-                      this.setState({ hasIpCount, currentPage: 1 }, () => {
-                        localStorage.setItem('hasIpCount', hasIpCount);
-                        this.queryServiceList();
-                      })
-                    }
-                  />
-                </Form.Item>
-                <FormItem label="">
-                  <Button
-                    type="primary"
-                    onClick={() => this.setState({ currentPage: 1 }, () => this.queryServiceList())}
-                    style={{ marginRight: 10 }}
-                  >
-                    {query}
-                  </Button>
-                </FormItem>
-                <FormItem label="" style={{ float: 'right' }}>
-                  <Button type="secondary" onClick={() => this.openEditServiceDialog()}>
-                    {create}
-                  </Button>
-                </FormItem>
-              </Form>
-            </Col>
-          </Row>
-          <Row style={{ padding: 0 }}>
-            <Col span="24" style={{ padding: 0 }}>
-              <Table
-                dataSource={this.state.dataSource}
-                locale={{ empty: pubNoData }}
-                getRowProps={row => this.rowColor(row)}
-              >
-                <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"
+          <Col span="24">
+            <Form inline field={this.field}>
+              <FormItem label={serviceName}>
+                <Input
+                  placeholder={serviceNamePlaceholder}
+                  style={{ width: 200 }}
+                  value={search.serviceName}
+                  onChange={serviceName => this.setState({ search: { ...search, serviceName } })}
+                  onPressEnter={() =>
+                    this.setState({ currentPage: 1 }, () => this.queryServiceList())
+                  }
                 />
-                <Column title={locale.columnTriggerFlag} dataIndex="triggerFlag" />
-                <Column
-                  title={operation}
-                  align="center"
-                  cell={(value, index, record) => (
-                    // @author yongchao9  #2019年05月18日 下午5:46:28
-                    /* Add a link to view "sample code"
+              </FormItem>
+              <FormItem label={groupName}>
+                <Input
+                  placeholder={groupNamePlaceholder}
+                  style={{ width: 200 }}
+                  value={search.groupName}
+                  onChange={groupName => this.setState({ search: { ...search, groupName } })}
+                  onPressEnter={() =>
+                    this.setState({ currentPage: 1 }, () => this.queryServiceList())
+                  }
+                />
+              </FormItem>
+              <Form.Item label={`${hiddenEmptyService}:`}>
+                <Switch
+                  checked={hasIpCount}
+                  onChange={hasIpCount =>
+                    this.setState({ hasIpCount, currentPage: 1 }, () => {
+                      localStorage.setItem('hasIpCount', hasIpCount);
+                      this.queryServiceList();
+                    })
+                  }
+                />
+              </Form.Item>
+              <FormItem label="">
+                <Button
+                  type="primary"
+                  onClick={() => this.setState({ currentPage: 1 }, () => this.queryServiceList())}
+                  style={{ marginRight: 10 }}
+                >
+                  {query}
+                </Button>
+              </FormItem>
+              <FormItem label="" style={{ float: 'right' }}>
+                <Button type="secondary" onClick={() => this.openEditServiceDialog()}>
+                  {create}
+                </Button>
+              </FormItem>
+            </Form>
+          </Col>
+        </Row>
+        <Row style={{ padding: 0 }}>
+          <Col span="24" style={{ padding: 0 }}>
+            <Table
+              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.columnTriggerFlag} dataIndex="triggerFlag" />
+              <Column
+                title={operation}
+                align="center"
+                cell={(value, index, record) => (
+                  // @author yongchao9  #2019年05月18日 下午5:46:28
+                  /* Add a link to view "sample code"
                      replace the original button with a label,
                      which is consistent with the operation style in configuration management.
                      */
-                    <div>
-                      <a
-                        onClick={() => {
-                          const { name, groupName } = record;
-                          this.props.history.push(
-                            generateUrl('/serviceDetail', { name, groupName })
-                          );
-                        }}
-                        style={{ marginRight: 5 }}
-                      >
-                        {detail}
-                      </a>
-                      <span style={{ marginRight: 5 }}>|</span>
-                      <a style={{ marginRight: 5 }} onClick={() => this.showSampleCode(record)}>
-                        {sampleCode}
-                      </a>
-                      <span style={{ marginRight: 5 }}>|</span>
-                      <a onClick={() => this.deleteService(record)} style={{ marginRight: 5 }}>
-                        {deleteAction}
-                      </a>
-                    </div>
-                  )}
-                />
-              </Table>
-            </Col>
-          </Row>
-          {this.state.total > this.state.pageSize && (
-            <div
-              style={{
-                marginTop: 10,
-                textAlign: 'right',
-              }}
-            >
-              <Pagination
-                current={this.state.currentPage}
-                total={this.state.total}
-                pageSize={this.state.pageSize}
-                onChange={currentPage =>
-                  this.setState({ currentPage }, () => this.queryServiceList())
-                }
+                  <div>
+                    <a
+                      onClick={() => {
+                        const { name, groupName } = record;
+                        this.props.history.push(generateUrl('/serviceDetail', { name, groupName }));
+                      }}
+                      style={{ marginRight: 5 }}
+                    >
+                      {detail}
+                    </a>
+                    <span style={{ marginRight: 5 }}>|</span>
+                    <a style={{ marginRight: 5 }} onClick={() => this.showSampleCode(record)}>
+                      {sampleCode}
+                    </a>
+                    <span style={{ marginRight: 5 }}>|</span>
+                    <a onClick={() => this.deleteService(record)} style={{ marginRight: 5 }}>
+                      {deleteAction}
+                    </a>
+                  </div>
+                )}
               />
-            </div>
-          )}
-        </Loading>
+            </Table>
+          </Col>
+        </Row>
+        <div
+          style={{
+            marginTop: 10,
+            textAlign: 'right',
+          }}
+        >
+          <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}
+            onPageSizeChange={pageSize => this.handlePageSizeChange(pageSize)}
+            onChange={currentPage => this.setState({ currentPage }, () => this.queryServiceList())}
+          />
+        </div>
+
         <ShowServiceCodeing ref={this.showcode} />
         <EditServiceDialog
           ref={this.editServiceDialog}