From d706b62e6099e9d9a09ba14b507f65fc38c86b3e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=8E=8B=E5=BD=A6=E6=B0=91?= <yanmin.wang@ele.me>
Date: Thu, 13 Dec 2018 17:13:44 +0800
Subject: [PATCH] fix: Support operation of selector on console, #393

---
 .../console-fe/build/webpack.dev.conf.js      |  2 +-
 .../static/console-fe/src/locales/en-US.js    |  6 +++
 .../static/console-fe/src/locales/zh-CN.js    |  6 +++
 .../ServiceDetail/EditServiceDialog.js        | 39 +++++++++++++++++--
 .../ServiceDetail/ServiceDetail.js            | 13 ++++++-
 5 files changed, 61 insertions(+), 5 deletions(-)

diff --git a/console/src/main/resources/static/console-fe/build/webpack.dev.conf.js b/console/src/main/resources/static/console-fe/build/webpack.dev.conf.js
index 5e3c8ead9..9f78be315 100644
--- a/console/src/main/resources/static/console-fe/build/webpack.dev.conf.js
+++ b/console/src/main/resources/static/console-fe/build/webpack.dev.conf.js
@@ -26,7 +26,7 @@ module.exports = Object.assign({}, base, {
       context: ['/'],
       changeOrigin: true,
       secure: false,
-      target: 'http://11.163.128.36:8848',
+      target: 'http://11.160.165.126:8848',
       pathRewrite: {'^/v1' : '/nacos/v1'}
     }],
     disableHostCheck: true,
diff --git a/console/src/main/resources/static/console-fe/src/locales/en-US.js b/console/src/main/resources/static/console-fe/src/locales/en-US.js
index cbc45afe5..cb9e05593 100644
--- a/console/src/main/resources/static/console-fe/src/locales/en-US.js
+++ b/console/src/main/resources/static/console-fe/src/locales/en-US.js
@@ -94,6 +94,8 @@ const I18N_CONF = {
     editCluster: 'Edit Cluster',
     cluster: 'Cluster',
     metadata: 'Metadata',
+    selector: 'Selector',
+    type: 'Type',
     healthCheckPattern: 'Health check pattern',
     protectThreshold: 'Protect Threshold',
     serviceName: 'Service Name',
@@ -104,6 +106,10 @@ const I18N_CONF = {
     updateService: 'Edit Service',
     serviceName: 'Service Name',
     metadata: 'Metadata',
+    type: 'Type',
+    typeLabel: 'Label',
+    typeNone: 'None',
+    selector: 'Selector',
     protectThreshold: 'Protect Threshold',
     healthCheckPattern: 'Health check pattern',
     healthCheckPatternService: 'Service',
diff --git a/console/src/main/resources/static/console-fe/src/locales/zh-CN.js b/console/src/main/resources/static/console-fe/src/locales/zh-CN.js
index 221ca8523..c6db4e99d 100644
--- a/console/src/main/resources/static/console-fe/src/locales/zh-CN.js
+++ b/console/src/main/resources/static/console-fe/src/locales/zh-CN.js
@@ -94,6 +94,8 @@ const I18N_CONF = {
     editCluster: '集群配置',
     cluster: '集群',
     metadata: '元数据',
+    selector: '表达式',
+    type: '服务路由类型',
     healthCheckPattern: '健康检查模式',
     protectThreshold: '保护阈值',
     serviceName: '服务名',
@@ -104,6 +106,10 @@ const I18N_CONF = {
     updateService: '更新服务',
     serviceName: '服务名',
     metadata: '元数据',
+    type: '服务路由类型',
+    typeLabel: '标签',
+    typeNone: '默认',
+    selector: '表达式',
     protectThreshold: '保护阈值',
     healthCheckPattern: '健康检查模式',
     healthCheckPatternService: '服务端',
diff --git a/console/src/main/resources/static/console-fe/src/pages/ServiceManagement/ServiceDetail/EditServiceDialog.js b/console/src/main/resources/static/console-fe/src/pages/ServiceManagement/ServiceDetail/EditServiceDialog.js
index a0f430a28..c6a0f0bee 100644
--- a/console/src/main/resources/static/console-fe/src/pages/ServiceManagement/ServiceDetail/EditServiceDialog.js
+++ b/console/src/main/resources/static/console-fe/src/pages/ServiceManagement/ServiceDetail/EditServiceDialog.js
@@ -48,11 +48,17 @@ class EditServiceDialog extends React.Component {
   onConfirm() {
     const { isCreate } = this.state;
     const editService = Object.assign({}, this.state.editService);
-    const { name, protectThreshold, healthCheckMode, metadataText } = editService;
+    const { name, protectThreshold, healthCheckMode, metadataText, selector } = editService;
     request({
       method: isCreate ? 'PUT' : 'POST',
       url: `v1/ns/service/${isCreate ? 'create' : 'update'}`,
-      data: { serviceName: name, protectThreshold, healthCheckMode, metadata: metadataText },
+      data: {
+        serviceName: name,
+        protectThreshold,
+        healthCheckMode,
+        metadata: metadataText,
+        selector,
+      },
       dataType: 'text',
       beforeSend: () => this.setState({ loading: true }),
       success: res => {
@@ -82,7 +88,13 @@ class EditServiceDialog extends React.Component {
   render() {
     const { locale = {} } = this.props;
     const { isCreate, editService, editServiceDialogVisible } = this.state;
-    const { name, protectThreshold, healthCheckMode, metadataText } = editService;
+    const {
+      name,
+      protectThreshold,
+      healthCheckMode,
+      metadataText,
+      selector = { type: 'none' },
+    } = editService;
     return (
       <Dialog
         className="service-detail-edit-dialog"
@@ -129,6 +141,27 @@ class EditServiceDialog extends React.Component {
               onChange={metadataText => this.onChangeCluster({ metadataText })}
             />
           </Form.Item>
+          <Form.Item label={`${locale.type}:`}>
+            <Select
+              className="in-select"
+              defaultValue={selector.type}
+              onChange={type => this.onChangeCluster({ selector: { ...selector, type } })}
+            >
+              <Select.Option value="label">{locale.typeLabel}</Select.Option>
+              <Select.Option value="none">{locale.typeNone}</Select.Option>
+            </Select>
+          </Form.Item>
+          {selector.type === 'label' && (
+            <Form.Item label={`${locale.selector}:`}>
+              <Input.TextArea
+                className="in-text"
+                value={selector.expression}
+                onChange={expression =>
+                  this.onChangeCluster({ selector: { ...selector, expression } })
+                }
+              />
+            </Form.Item>
+          )}
         </Form>
       </Dialog>
     );
diff --git a/console/src/main/resources/static/console-fe/src/pages/ServiceManagement/ServiceDetail/ServiceDetail.js b/console/src/main/resources/static/console-fe/src/pages/ServiceManagement/ServiceDetail/ServiceDetail.js
index 06b5c3049..2527127a9 100644
--- a/console/src/main/resources/static/console-fe/src/pages/ServiceManagement/ServiceDetail/ServiceDetail.js
+++ b/console/src/main/resources/static/console-fe/src/pages/ServiceManagement/ServiceDetail/ServiceDetail.js
@@ -83,7 +83,7 @@ class ServiceDetail extends React.Component {
   render() {
     const { locale = {} } = this.props;
     const { serviceName, loading, service = {}, clusters } = this.state;
-    const { metadata = {} } = service;
+    const { metadata = {}, selector = {} } = service;
     const metadataText = Object.keys(metadata)
       .map(key => `${key}=${metadata[key]}`)
       .join(',');
@@ -132,6 +132,17 @@ class ServiceDetail extends React.Component {
             <FormItem label={`${locale.metadata}:`}>
               <p>{metadataText}</p>
             </FormItem>
+            <FormItem label={`${locale.metadata}:`}>
+              <p>{metadataText}</p>
+            </FormItem>
+            <FormItem label={`${locale.type}:`}>
+              <p>{selector.type}</p>
+            </FormItem>
+            {service.type === 'label' && (
+              <FormItem label={`${locale.selector}:`}>
+                <p>{selector.selector}</p>
+              </FormItem>
+            )}
           </Form>
           {clusters.map(cluster => (
             <Card