Merge pull request #449 from loadchange/issues-393

Fixes #393

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://console.nacos.io',
       pathRewrite: {'^/v1' : '/nacos/v1'}
     }],
     disableHostCheck: true,

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',

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: '服务端',

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>
     );

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

@@ -81,7 +81,15 @@ class InstanceTable extends React.Component {
     request({
       method: 'POST',
       url: 'v1/ns/instance/update',
-      data: { serviceName, clusterName, ip, port, weight, enable: !enabled, metadata },
+      data: {
+        serviceName,
+        clusterName,
+        ip,
+        port,
+        weight,
+        enable: !enabled,
+        metadata: JSON.stringify(metadata),
+      },
       dataType: 'text',
       beforeSend: () => this.openLoading(),
       success: () => this.setState({ instance: newVal }),

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