WIP

console/src/main/resources/static/console-fe/src/locales/en-US.js

@@ -78,6 +78,7 @@ const I18N_CONF = {
     serviceList: 'Service List',
     serviceName: 'Service Name',
     serviceNamePlaceholder: 'Enter Service Name',
+    hiddenEmptyService: 'Hidden Empty Service',
     query: 'Search',
     pubNoData: 'No results found.',
     columnServiceName: 'Service Name',

console/src/main/resources/static/console-fe/src/locales/zh-CN.js

@@ -78,6 +78,7 @@ const I18N_CONF = {
     serviceList: '服务列表',
     serviceName: '服务名称',
     serviceNamePlaceholder: '请输入服务名称',
+    hiddenEmptyService: '隐藏空服务',
     query: '查询',
     pubNoData: '没有数据',
     columnServiceName: '服务名',

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

@@ -25,6 +25,7 @@ import {
   Dialog,
   Message,
   ConfigProvider,
+  Switch,
 } from '@alifd/next';
 import { request } from '../../../globalLib';
 import RegionGroup from '../../../components/RegionGroup';
@@ -57,6 +58,7 @@ class ServiceList extends React.Component {
       currentPage: 1,
       keyword: '',
       dataSource: [],
+      hide: true,
     };
     this.field = new Field(this);
   }
@@ -71,14 +73,12 @@ class ServiceList extends React.Component {
 
   openEditServiceDialog() {
     try {
-      this.editServiceDialog.current.getInstance()
-        .show(this.state.service);
-    } catch (error) {
-    }
+      this.editServiceDialog.current.getInstance().show(this.state.service);
+    } catch (error) {}
   }
 
   queryServiceList() {
-    const { currentPage, pageSize, keyword, withInstances = false } = this.state;
+    const { currentPage, pageSize, keyword, withInstances = false, hide } = this.state;
     const parameter = [
       `withInstances=${withInstances}`,
       `pageNo=${currentPage}`,
@@ -119,8 +119,7 @@ class ServiceList extends React.Component {
    *
    */
   showSampleCode(record) {
-    this.showcode.current.getInstance()
-      .openDialog(record);
+    this.showcode.current.getInstance().openDialog(record);
   }
 
   deleteService(service) {
@@ -157,7 +156,6 @@ class ServiceList extends React.Component {
 
   rowColor = row => ({ className: !row.healthyInstanceCount ? 'row-bg-red' : '' });
 
-
   render() {
     const { locale = {} } = this.props;
     const {
@@ -165,6 +163,7 @@ class ServiceList extends React.Component {
       serviceList,
       serviceName,
       serviceNamePlaceholder,
+      hiddenEmptyService,
       query,
       create,
       operation,
@@ -172,7 +171,7 @@ class ServiceList extends React.Component {
       sampleCode,
       deleteAction,
     } = locale;
-    const { keyword, nowNamespaceName, nowNamespaceId } = this.state;
+    const { keyword, nowNamespaceName, nowNamespaceId, hide } = this.state;
     const { init, getValue } = this.field;
     this.init = init;
     this.getValue = getValue;
@@ -221,6 +220,9 @@ class ServiceList extends React.Component {
                     }
                   />
                 </FormItem>
+                <Form.Item label={`${hiddenEmptyService}:`}>
+                  <Switch checked={hide} onChange={hide => this.setState({ hide })} />
+                </Form.Item>
                 <FormItem label="">
                   <Button
                     type="primary"
@@ -266,8 +268,9 @@ class ServiceList extends React.Component {
                       <a
                         onClick={() =>
                           this.props.history.push(
-                            `/serviceDetail?name=${record.name}&groupName=${record.groupName}`,
-                          )}
+                            `/serviceDetail?name=${record.name}&groupName=${record.groupName}`
+                          )
+                        }
                         style={{ marginRight: 5 }}
                       >
                         {detail}
@@ -277,10 +280,7 @@ class ServiceList extends React.Component {
                         {sampleCode}
                       </a>
                       <span style={{ marginRight: 5 }}>|</span>
-                      <a
-                        onClick={() => this.deleteService(record)}
-                        style={{ marginRight: 5 }}
-                      >
+                      <a onClick={() => this.deleteService(record)} style={{ marginRight: 5 }}>
                         {deleteAction}
                       </a>
                     </div>
@@ -290,7 +290,8 @@ class ServiceList extends React.Component {
             </Col>
           </Row>
           {this.state.total > this.state.pageSize && (
-            <div style={{
+            <div
+              style={{
                 marginTop: 10,
                 textAlign: 'right',
               }}

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

@@ -26,4 +26,8 @@
     color: #000;
     margin-right: 8px;
   }
+  .next-switch-off {
+    background-color: #f2f3f7;
+    border-color: #c4c6cf;
+  }
 }