[ISSUE-3917] Enhance service detail console web, add metadata filter (#4439)

* add metadata filter at back-end of nacos naming console

* code enhance

* 添加input，tag等组件，初步布局

* 实现页面交互，可添加，删除filter

* 更新filter向后端发起请求获取数据

* 实现更新更改过滤条件，刷新表格

* 添加国际化配置

* 输入完后按空格直接添加，没输入的input给出响应

* 提交单元测试，更新打包后的静态资源

* 修改配置 解决生产环境上sourcemap不生效的问题

* 用hook重构组件InstanceFilter

* 多个集群各自使用过滤

* 解决多集群时，元数据过滤无法单独使用的问题

* revert backend code

* revert metadata filter test

* 只从客户端已获取到的实例中过滤

* 变动更新到打包后的mian.js

Co-authored-by: jzhishu <john1994@foxmail.com>

console-ui/build/webpack.prod.conf.js

@@ -36,12 +36,12 @@ module.exports = Object.assign({}, base, {
     minimizer: [
       new UglifyJsPlugin({
         cache: true,
-        parallel: true,
+        parallel: true
-        sourceMap: true,
       }),
       new OptimizeCSSAssetsPlugin({}),
     ],
   },
+  devtool: 'eval-source-map',
   plugins: [
     new CleanWebpackPlugin({
       cleanOnceBeforeBuildPatterns:[
@@ -54,5 +54,5 @@ module.exports = Object.assign({}, base, {
       chunkFilename: '[id].css',
     }),
   ],
-  mode: 'production',
+  mode: 'production'
 });

console-ui/src/locales/en-US.js

@@ -176,6 +176,11 @@ const I18N_CONF = {
     serviceNameRequired: 'Please enter a service name',
     protectThresholdRequired: 'Please enter a protect threshold',
   },
+  InstanceFilter: {
+    title: 'Metadata Filter',
+    addFilter: 'Add Filter',
+    clear: 'Clear',
+  },
   InstanceTable: {
     operation: 'Operation',
     port: 'Port',

console-ui/src/locales/zh-CN.js

@@ -176,6 +176,11 @@ const I18N_CONF = {
     serviceNameRequired: '请输入服务名',
     protectThresholdRequired: '请输入保护阈值',
   },
+  InstanceFilter: {
+    title: '元数据过滤',
+    addFilter: '添加过滤',
+    clear: '清空',
+  },
   InstanceTable: {
     operation: '操作',
     port: '端口',

console-ui/src/pages/ServiceManagement/ServiceDetail/InstanceTable.js

@@ -20,6 +20,7 @@ import { request } from '../../../globalLib';
 import { Button, ConfigProvider, Message, Pagination, Table } from '@alifd/next';
 import { HEALTHY_COLOR_MAPPING } from './constant';
 import EditInstanceDialog from './EditInstanceDialog';
+import { isDiff } from './util';
 
 @ConfigProvider.config
 class InstanceTable extends React.Component {
@@ -30,6 +31,11 @@ class InstanceTable extends React.Component {
     clusterName: PropTypes.string,
     serviceName: PropTypes.string,
     groupName: PropTypes.string,
+    filters: PropTypes.object,
+  };
+
+  static defaultProps = {
+    filters: new Map(),
   };
 
   constructor(props) {
@@ -38,6 +44,7 @@ class InstanceTable extends React.Component {
     this.state = {
       loading: false,
       instance: { count: 0, list: [] },
+      // tableData: {},
       pageNum: 1,
       pageSize: 10,
     };
@@ -56,7 +63,8 @@ class InstanceTable extends React.Component {
   }
 
   getInstanceList() {
-    const { clusterName, serviceName, groupName } = this.props;
+    const { clusterName, serviceName, groupName, filters } = this.props;
+
     if (!clusterName) return;
     const { pageSize, pageNum } = this.state;
     request({
@@ -118,9 +126,16 @@ class InstanceTable extends React.Component {
     const { locale = {} } = this.props;
     const { clusterName, serviceName, groupName } = this.props;
     const { instance, pageSize, loading } = this.state;
-    return instance.count ? (
+    const instanceList = instanceFilter(instance.list, this.props.filters);
+
+    const _instance = {
+      count: instanceList.length,
+      list: instanceList,
+    };
+
+    return _instance.count ? (
       <div>
-        <Table dataSource={instance.list} loading={loading} getRowProps={this.rowColor}>
+        <Table dataSource={_instance.list} loading={loading} rowProps={this.rowColor}>
           <Table.Column width={138} title="IP" dataIndex="ip" />
           <Table.Column width={100} title={locale.port} dataIndex="port" />
           <Table.Column
@@ -170,10 +185,10 @@ class InstanceTable extends React.Component {
             )}
           />
         </Table>
-        {instance.count > pageSize ? (
+        {_instance.count > pageSize ? (
           <Pagination
             className="pagination"
-            total={instance.count}
+            total={_instance.count}
             pageSize={pageSize}
             onChange={currentPage => this.onChangePage(currentPage)}
           />
@@ -192,4 +207,20 @@ class InstanceTable extends React.Component {
   }
 }
 
+const instanceFilter = function(array, filters) {
+  return array.filter(item => {
+    const { metadata } = item;
+    let isTargetInstance = true;
+
+    filters.forEach((value, key) => {
+      if (value !== metadata[key]) {
+        isTargetInstance = false;
+        return isTargetInstance;
+      }
+    });
+
+    return isTargetInstance;
+  });
+};
+
 export default InstanceTable;

console-ui/src/pages/ServiceManagement/ServiceDetail/ServiceDetail.js

@@ -17,13 +17,14 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { request } from '@/globalLib';
-import { Input, Button, Card, ConfigProvider, Form, Loading, Message } from '@alifd/next';
+import { Input, Button, Card, ConfigProvider, Form, Loading, Message, Tag } from '@alifd/next';
 import EditServiceDialog from './EditServiceDialog';
 import EditClusterDialog from './EditClusterDialog';
 import InstanceTable from './InstanceTable';
 import { getParameter } from 'utils/nacosutil';
 import MonacoEditor from 'components/MonacoEditor';
 import { MONACO_READONLY_OPTIONS, METADATA_ENTER } from './constant';
+import InstanceFilter from './InstanceFilter';
 import './ServiceDetail.scss';
 
 const FormItem = Form.Item;
@@ -56,6 +57,7 @@ class ServiceDetail extends React.Component {
       service: {},
       pageSize: 10,
       pageNum: {},
+      instanceFilters: new Map(),
     };
   }
 
@@ -94,9 +96,19 @@ class ServiceDetail extends React.Component {
     this.editClusterDialog.current.getInstance().show(cluster);
   }
 
+  setFilters = clusterName => filters => {
+    const { instanceFilters } = this.state;
+    const newFilters = new Map(Array.from(instanceFilters));
+    newFilters.set(clusterName, filters);
+
+    this.setState({
+      instanceFilters: newFilters,
+    });
+  };
+
   render() {
     const { locale = {} } = this.props;
-    const { serviceName, groupName, loading, service = {}, clusters } = this.state;
+    const { serviceName, groupName, loading, service = {}, clusters, instanceFilters } = this.state;
     const { metadata = {}, selector = {} } = service;
     let metadataText = '';
     if (Object.keys(metadata).length) {
@@ -175,10 +187,12 @@ class ServiceDetail extends React.Component {
                 </Button>
               }
             >
+              <InstanceFilter setFilters={this.setFilters(cluster.name)} />
               <InstanceTable
                 clusterName={cluster.name}
                 serviceName={serviceName}
                 groupName={groupName}
+                filters={instanceFilters.get(cluster.name)}
               />
             </Card>
           ))}

console-ui/src/pages/ServiceManagement/ServiceDetail/ServiceDetail.scss

@@ -36,6 +36,9 @@
   .cluster-card {
     margin-bottom: 30px;
   }
+  .inner-card {
+    margin-bottom: 10px;
+  }
 }
 
 .service-detail-edit-dialog,

console-ui/src/pages/ServiceManagement/ServiceDetail/instanceFilter.js

@@ -0,0 +1,137 @@
+/*
+ * Copyright 1999-2018 Alibaba Group Holding Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the 'License');
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an 'AS IS' BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React, { useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
+import { Input, ConfigProvider, Button, Form, Tag, Card } from '@alifd/next';
+import { isDiff } from './util';
+
+const { Group: TagGroup, Closeable: CloseableTag } = Tag;
+const FormItem = Form.Item;
+
+function InstanceFilter(props) {
+  const [key, setKey] = useState('');
+  const [value, setValue] = useState('');
+  const [keyState, setKeyState] = useState('');
+  const [valueState, setValueState] = useState('');
+  const [filters, setFilters] = useState(new Map());
+  const { locale = {} } = props;
+
+  const addFilter = () => {
+    updateInput();
+
+    if (key && value) {
+      const newFilters = new Map(Array.from(filters)).set(key, value);
+
+      setFilters(newFilters);
+      setKeyState('');
+      setValueState('');
+
+      clearInput();
+    }
+  };
+
+  const removeFilter = key => {
+    const newFilters = new Map(Array.from(filters));
+    newFilters.delete(key);
+
+    setFilters(newFilters);
+  };
+
+  const clearFilters = () => {
+    setFilters(new Map());
+  };
+
+  const clearInput = () => {
+    setKey('');
+    setValue('');
+  };
+
+  const updateInput = () => {
+    if (!key) {
+      setKeyState('error');
+    } else {
+      setKeyState('');
+    }
+
+    if (!value) {
+      setValueState('error');
+    } else {
+      setValueState('');
+    }
+  };
+
+  useEffect(() => {
+    props.setFilters(filters);
+  }, [filters]);
+
+  return (
+    <Card contentHeight="auto" className="inner-card">
+      <Form inline size="small">
+        <FormItem label={locale.title}>
+          <FormItem>
+            <Input
+              placeholder={'key'}
+              value={key}
+              trim
+              onChange={key => setKey(key)}
+              onPressEnter={addFilter}
+              state={keyState}
+            />
+          </FormItem>
+          <FormItem>
+            <Input
+              placeholder={'value'}
+              value={value}
+              trim
+              onChange={value => setValue(value)}
+              onPressEnter={addFilter}
+              state={valueState}
+            />
+          </FormItem>
+          <FormItem label="">
+            <Button type="primary" onClick={addFilter} style={{ marginRight: 10 }}>
+              {locale.addFilter}
+            </Button>
+            {filters.size > 0 ? (
+              <Button type="primary" onClick={clearFilters}>
+                {locale.clear}
+              </Button>
+            ) : (
+              ''
+            )}
+          </FormItem>
+        </FormItem>
+      </Form>
+      <TagGroup>
+        {Array.from(filters).map(filter => {
+          return (
+            <CloseableTag size="medium" key={filter[0]} onClose={() => removeFilter(filter[0])}>
+              {`${filter[0]} : ${filter[1]}`}
+            </CloseableTag>
+          );
+        })}
+      </TagGroup>
+    </Card>
+  );
+}
+
+InstanceFilter.propTypes = {
+  locale: PropTypes.object,
+  setFilters: PropTypes.func.isRequired,
+};
+
+export default ConfigProvider.config(InstanceFilter);

console-ui/src/pages/ServiceManagement/ServiceDetail/util.js

@@ -0,0 +1,26 @@
+/*
+ * Copyright 1999-2018 Alibaba Group Holding Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export const isDiff = function(prev, next) {
+  if (prev.size !== next.size) return true;
+
+  let isDiff = false;
+  next.forEach((value, key) => {
+    isDiff = value !== prev.get(key);
+  });
+
+  return isDiff;
+};

console-ui/test/sample/instanceFilter.spec.js

@@ -0,0 +1,364 @@
+const $ = require('jquery');
+const fs = require('fs');
+const path = require('path');
+const chai = require('chai');
+const should = chai.should();
+const JWebDriver = require('jwebdriver');
+chai.use(JWebDriver.chaiSupportChainPromise);
+const resemble = require('resemblejs-node');
+resemble.outputSettings({
+  errorType: 'flatDifferenceIntensity',
+});
+
+const rootPath = getRootPath();
+
+module.exports = function() {
+  let driver, testVars;
+
+  before(function() {
+    let self = this;
+    driver = self.driver;
+    testVars = self.testVars;
+  });
+
+  it('× url: http://localhost:8000/#/serviceDetail?name=scenator&groupName=DEFAULT_GROUP', async function() {
+    await driver.url(
+      _(`http://localhost:8000/#/serviceDetail?name=scenator&groupName=DEFAULT_GROUP`)
+    );
+  });
+
+  it('url: http://localhost:8000/#/serviceDetail?name=scenator&groupName=DEFAULT_GROUP', async function() {
+    await driver.url(
+      _(`http://localhost:8000/#/serviceDetail?name=scenator&groupName=DEFAULT_GROUP`)
+    );
+  });
+
+  it('waitBody: ', async function() {
+    await driver
+      .sleep(500)
+      .wait('body', 30000)
+      .html()
+      .then(function(code) {
+        isPageError(code).should.be.false;
+      });
+  });
+
+  it('click: #username, 142, 43, 0', async function() {
+    await driver
+      .sleep(300)
+      .wait('#username', 30000)
+      .sleep(300)
+      .mouseMove(142, 43)
+      .click(0);
+  });
+
+  it('sendKeys: nacos{ENTER}{TAB}nacos{ENTER}', async function() {
+    await driver.sendKeys('nacos{ENTER}{TAB}nacos{ENTER}');
+  });
+
+  it('click: 权限控制 ( #root li[role="menuitem"]:nth-child(3) > div[role="listitem"].next-menu-item > div.next-menu-item-inner, 112, 24, 0 )', async function() {
+    await driver
+      .sleep(300)
+      .wait(
+        '#root li[role="menuitem"]:nth-child(3) > div[role="listitem"].next-menu-item > div.next-menu-item-inner',
+        30000
+      )
+      .sleep(300)
+      .mouseMove(112, 24)
+      .click(0);
+  });
+
+  it('click: 服务管理 ( #root li[role="menuitem"]:nth-child(2) > div[role="listitem"].next-menu-item > div.next-menu-item-inner, 83, 27, 0 )', async function() {
+    await driver
+      .sleep(300)
+      .wait(
+        '#root li[role="menuitem"]:nth-child(2) > div[role="listitem"].next-menu-item > div.next-menu-item-inner',
+        30000
+      )
+      .sleep(300)
+      .mouseMove(83, 27)
+      .click(0);
+  });
+
+  it('click: 服务列表 ( #root li[role="menuitem"]:nth-child(1) > div.next-menu-item-inner, 63, 30, 0 )', async function() {
+    await driver
+      .sleep(300)
+      .wait('#root li[role="menuitem"]:nth-child(1) > div.next-menu-item-inner', 30000)
+      .sleep(300)
+      .mouseMove(63, 30)
+      .click(0);
+  });
+
+  it('× click: 详情 ( #root tr.last > td[role="gridcell"].last > div.next-table-cell-wrapper > div > a:nth-child(1), 13, 3, 0 )', async function() {
+    await driver
+      .sleep(300)
+      .wait(
+        '#root tr.last > td[role="gridcell"].last > div.next-table-cell-wrapper > div > a:nth-child(1)',
+        30000
+      )
+      .sleep(300)
+      .mouseMove(13, 3)
+      .click(0);
+  });
+
+  it('scrollElementTo: #root div.right-panel, 0, 158', async function() {
+    await driver
+      .sleep(300)
+      .wait('#root div.right-panel', 30000)
+      .sleep(300)
+      .scrollElementTo(0, 158);
+  });
+
+  it('× click: div:nth-child(1) > div.next-form-item-control > span.next-small > input, 130, 11, 0', async function() {
+    await driver
+      .sleep(300)
+      .wait('div:nth-child(1) > div.next-form-item-control > span.next-small > input', 30000)
+      .sleep(300)
+      .mouseMove(130, 11)
+      .click(0);
+  });
+
+  it('sendKeys: name{TAB}ins1', async function() {
+    await driver.sendKeys('name{TAB}ins1');
+  });
+
+  it('× click: 添加过滤 ( //span[text()="添加过滤"], 43, 1, 0 )', async function() {
+    await driver
+      .sleep(300)
+      .wait('//span[text()="添加过滤"]', 30000)
+      .sleep(300)
+      .mouseMove(43, 1)
+      .click(0);
+  });
+
+  it('scrollElementTo: #root div.right-panel, 0, 37', async function() {
+    await driver
+      .sleep(300)
+      .wait('#root div.right-panel', 30000)
+      .sleep(300)
+      .scrollElementTo(0, 37);
+  });
+
+  it('scrollTo: 0, 1', async function() {
+    await driver.scrollTo(0, 1);
+  });
+
+  function _(str) {
+    if (typeof str === 'string') {
+      return str.replace(/\{\{(.+?)\}\}/g, function(all, key) {
+        return testVars[key] || '';
+      });
+    } else {
+      return str;
+    }
+  }
+};
+
+if (module.parent && /mocha\.js/.test(module.parent.id)) {
+  runThisSpec();
+}
+
+function runThisSpec() {
+  // read config
+  let webdriver = process.env['webdriver'] || '';
+  let proxy = process.env['wdproxy'] || '';
+  let config = require(rootPath + '/config.json');
+  let webdriverConfig = Object.assign({}, config.webdriver);
+  let host = webdriverConfig.host;
+  let port = webdriverConfig.port || 4444;
+  let group = webdriverConfig.group || 'default';
+  let match = webdriver.match(/([^\:]+)(?:\:(\d+))?/);
+  if (match) {
+    host = match[1] || host;
+    port = match[2] || port;
+  }
+  let testVars = config.vars;
+  let browsers = webdriverConfig.browsers;
+  browsers = browsers.replace(/^\s+|\s+$/g, '');
+  delete webdriverConfig.host;
+  delete webdriverConfig.port;
+  delete webdriverConfig.group;
+  delete webdriverConfig.browsers;
+
+  // read hosts
+  let hostsPath = rootPath + '/hosts';
+  let hosts = '';
+  if (fs.existsSync(hostsPath)) {
+    hosts = fs.readFileSync(hostsPath).toString();
+  }
+  let specName = path
+    .relative(rootPath, __filename)
+    .replace(/\\/g, '/')
+    .replace(/\.js$/, '');
+
+  browsers.split(/\s*,\s*/).forEach(function(browserName) {
+    let caseName = specName + ' : ' + browserName;
+
+    let browserInfo = browserName.split(' ');
+    browserName = browserInfo[0];
+    let browserVersion = browserInfo[1];
+
+    describe(caseName, function() {
+      this.timeout(600000);
+      this.slow(1000);
+
+      let driver;
+      before(function() {
+        let self = this;
+        let driver = new JWebDriver({
+          host: host,
+          port: port,
+        });
+        let sessionConfig = Object.assign({}, webdriverConfig, {
+          group: group,
+          browserName: browserName,
+          version: browserVersion,
+          'ie.ensureCleanSession': true,
+        });
+        if (proxy) {
+          sessionConfig.proxy = {
+            proxyType: 'manual',
+            httpProxy: proxy,
+            sslProxy: proxy,
+          };
+        } else if (hosts) {
+          sessionConfig.hosts = hosts;
+        }
+
+        try {
+          self.driver = driver
+            .session(sessionConfig)
+            .windowSize(1024, 768)
+            .config({
+              pageloadTimeout: 30000, // page onload timeout
+              scriptTimeout: 5000, // sync script timeout
+              asyncScriptTimeout: 10000, // async script timeout
+            });
+        } catch (e) {
+          console.log(e);
+        }
+
+        self.testVars = testVars;
+        let casePath = path.dirname(caseName);
+        if (config.reporter && config.reporter.distDir) {
+          self.screenshotPath = config.reporter.distDir + '/reports/screenshots/' + casePath;
+          self.diffbasePath = config.reporter.distDir + '/reports/diffbase/' + casePath;
+        } else {
+          self.screenshotPath = rootPath + '/reports/screenshots/' + casePath;
+          self.diffbasePath = rootPath + '/reports/diffbase/' + casePath;
+        }
+        self.caseName = caseName.replace(/.*\//g, '').replace(/\s*[:\.\:\-\s]\s*/g, '_');
+        mkdirs(self.screenshotPath);
+        mkdirs(self.diffbasePath);
+        self.stepId = 0;
+        return self.driver;
+      });
+
+      module.exports();
+
+      beforeEach(function() {
+        let self = this;
+        self.stepId++;
+        if (self.skipAll) {
+          self.skip();
+        }
+      });
+
+      afterEach(async function() {
+        let self = this;
+        let currentTest = self.currentTest;
+        let title = currentTest.title;
+        if (
+          currentTest.state === 'failed' &&
+          /^(url|waitBody|switchWindow|switchFrame):/.test(title)
+        ) {
+          self.skipAll = true;
+        }
+
+        if (
+          (config.screenshots && config.screenshots.captureAll && !/^(closeWindow):/.test(title)) ||
+          currentTest.state === 'failed'
+        ) {
+          const casePath = path.dirname(caseName);
+          const filepath = `${self.screenshotPath}/${self.caseName}_${self.stepId}`;
+          const relativeFilePath = `./screenshots/${casePath}/${self.caseName}_${self.stepId}`;
+          let driver = self.driver;
+          try {
+            // catch error when get alert msg
+            await driver.getScreenshot(filepath + '.png');
+            let url = await driver.url();
+            let html = await driver.source();
+            html = '<!--url: ' + url + ' -->\n' + html;
+            fs.writeFileSync(filepath + '.html', html);
+            let cookies = await driver.cookies();
+            fs.writeFileSync(filepath + '.cookie', JSON.stringify(cookies));
+            appendToContext(self, relativeFilePath + '.png');
+          } catch (e) {}
+        }
+      });
+
+      after(function() {
+        return this.driver.close();
+      });
+    });
+  });
+}
+
+function getRootPath() {
+  let rootPath = path.resolve(__dirname);
+  while (rootPath) {
+    if (fs.existsSync(rootPath + '/config.json')) {
+      break;
+    }
+    rootPath = rootPath.substring(0, rootPath.lastIndexOf(path.sep));
+  }
+  return rootPath;
+}
+
+function mkdirs(dirname) {
+  if (fs.existsSync(dirname)) {
+    return true;
+  } else {
+    if (mkdirs(path.dirname(dirname))) {
+      fs.mkdirSync(dirname);
+      return true;
+    }
+  }
+}
+
+function callSpec(name) {
+  try {
+    require(rootPath + '/' + name)();
+  } catch (e) {
+    console.log(e);
+    process.exit(1);
+  }
+}
+
+function isPageError(code) {
+  return (
+    code == '' ||
+    / jscontent="errorCode" jstcache="\d+"|diagnoseConnectionAndRefresh|dnserror_unavailable_header|id="reportCertificateErrorRetry"|400 Bad Request|403 Forbidden|404 Not Found|500 Internal Server Error|502 Bad Gateway|503 Service Temporarily Unavailable|504 Gateway Time-out/i.test(
+      code
+    )
+  );
+}
+
+function appendToContext(mocha, content) {
+  try {
+    const test = mocha.currentTest || mocha.test;
+
+    if (!test.context) {
+      test.context = content;
+    } else if (Array.isArray(test.context)) {
+      test.context.push(content);
+    } else {
+      test.context = [test.context];
+      test.context.push(content);
+    }
+  } catch (e) {
+    console.log('error', e);
+  }
+}
+
+function catchError(error) {}

naming/src/main/java/com/alibaba/nacos/naming/controllers/CatalogController.java

@@ -213,7 +213,8 @@ public class CatalogController {
         ObjectNode result = JacksonUtils.createEmptyJsonNode();
         
         List<Service> services = new ArrayList<>();
-        final int total = serviceManager.getPagedService(namespaceId, pageNo - 1, pageSize, param, containedInstance, services, hasIpCount);
+        final int total = serviceManager
+                .getPagedService(namespaceId, pageNo - 1, pageSize, param, containedInstance, services, hasIpCount);
         if (CollectionUtils.isEmpty(services)) {
             result.replace("serviceList", JacksonUtils.transferToJsonNode(Collections.emptyList()));
             result.put("count", 0);