refactor: closes #1354

console/src/main/resources/static/console-fe/src/pages/ClusterManagement/ClusterNodeList/ClusterNodeList.js

@@ -109,13 +109,7 @@ class ClusterNodeList extends React.Component {
 
   render() {
     const { locale = {} } = this.props;
-    const {
-      pubNoData,
-      clusterNodeList,
-      nodeIp,
-      nodeIpPlaceholder,
-      query,
-    } = locale;
+    const { pubNoData, clusterNodeList, nodeIp, nodeIpPlaceholder, query } = locale;
     const { keyword, nowNamespaceName, nowNamespaceId } = this.state;
     const { init, getValue } = this.field;
     this.init = init;
@@ -159,7 +153,9 @@ class ClusterNodeList extends React.Component {
                 <FormItem label="">
                   <Button
                     type="primary"
-                    onClick={() => this.setState({ currentPage: 1 }, () => this.queryClusterStateList())}
+                    onClick={() =>
+                      this.setState({ currentPage: 1 }, () => this.queryClusterStateList())
+                    }
                     style={{ marginRight: 10 }}
                   >
                     {query}

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

@@ -17,7 +17,6 @@ import { request } from '../../../globalLib';
 import { Dialog, Form, Input, Switch, Select, Message, ConfigProvider } from '@alifd/next';
 import { DIALOG_FORM_LAYOUT, METADATA_SEPARATOR, METADATA_ENTER } from './constant';
 import MonacoEditor from 'components/MonacoEditor';
-import { replaceEnter, processMetaData } from 'utils/nacosutil';
 
 @ConfigProvider.config
 class EditClusterDialog extends React.Component {
@@ -42,7 +41,9 @@ class EditClusterDialog extends React.Component {
   show(_editCluster) {
     let editCluster = _editCluster;
     const { metadata = {} } = editCluster;
-    editCluster.metadataText = processMetaData(METADATA_ENTER)(metadata);
+    if (Object.keys(metadata).length) {
+      editCluster.metadataText = JSON.stringify(metadata, null, '\t');
+    }
     this.setState({
       editCluster,
       editClusterDialogVisible: true,
@@ -69,7 +70,7 @@ class EditClusterDialog extends React.Component {
       data: {
         serviceName,
         clusterName: name,
-        metadata: replaceEnter(METADATA_SEPARATOR)(metadataText),
+        metadata: metadataText,
         checkPort: defaultCheckPort,
         useInstancePort4Check: useIPPort4Check,
         healthChecker: JSON.stringify(healthChecker),
@@ -163,7 +164,7 @@ class EditClusterDialog extends React.Component {
           ]}
           <Form.Item label={`${locale.metadata}:`}>
             <MonacoEditor
-              language={'properties'}
+              language="json"
               width={'100%'}
               height={200}
               value={metadataText}

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

@@ -17,7 +17,6 @@ import { request } from '../../../globalLib';
 import { Dialog, Form, Input, Switch, Message, ConfigProvider } from '@alifd/next';
 import { DIALOG_FORM_LAYOUT, METADATA_ENTER, METADATA_SEPARATOR } from './constant';
 import MonacoEditor from 'components/MonacoEditor';
-import { replaceEnter, processMetaData } from 'utils/nacosutil';
 
 @ConfigProvider.config
 class EditInstanceDialog extends React.Component {
@@ -45,7 +44,7 @@ class EditInstanceDialog extends React.Component {
     let editInstance = _editInstance;
     const { metadata = {} } = editInstance;
     if (Object.keys(metadata).length) {
-      editInstance.metadataText = processMetaData(METADATA_ENTER)(metadata);
+      editInstance.metadataText = JSON.stringify(metadata, null, '\t');
     }
     this.setState({ editInstance, editInstanceDialogVisible: true });
   }
@@ -68,7 +67,7 @@ class EditInstanceDialog extends React.Component {
         ephemeral,
         weight,
         enabled,
-        metadata: replaceEnter(METADATA_SEPARATOR)(metadataText),
+        metadata: metadataText,
       },
       dataType: 'text',
       beforeSend: () => openLoading(),
@@ -127,7 +126,7 @@ class EditInstanceDialog extends React.Component {
           </Form.Item>
           <Form.Item label={`${locale.metadata}:`}>
             <MonacoEditor
-              language={'properties'}
+              language="json"
               width={'100%'}
               height={200}
               value={editInstance.metadataText}

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

@@ -17,7 +17,6 @@ import { request } from '../../../globalLib';
 import { Dialog, Form, Input, Select, Message, ConfigProvider } from '@alifd/next';
 import { DIALOG_FORM_LAYOUT, METADATA_SEPARATOR, METADATA_ENTER } from './constant';
 import MonacoEditor from 'components/MonacoEditor';
-import { replaceEnter, processMetaData } from 'utils/nacosutil';
 
 @ConfigProvider.config
 class EditServiceDialog extends React.Component {
@@ -44,7 +43,7 @@ class EditServiceDialog extends React.Component {
     let editService = _editService;
     const { metadata = {}, name } = editService;
     if (Object.keys(metadata).length) {
-      editService.metadataText = processMetaData(METADATA_ENTER)(metadata);
+      editService.metadataText = JSON.stringify(metadata, null, '\t');
     }
     this.setState({ editService, editServiceDialogVisible: true, isCreate: !name });
   }
@@ -85,7 +84,7 @@ class EditServiceDialog extends React.Component {
         serviceName: name,
         groupName: groupName || 'DEFAULT_GROUP',
         protectThreshold,
-        metadata: replaceEnter(METADATA_SEPARATOR)(metadataText),
+        metadata: metadataText,
         selector: JSON.stringify(selector),
       },
       dataType: 'text',
@@ -181,7 +180,7 @@ class EditServiceDialog extends React.Component {
           </Form.Item>
           <Form.Item label={`${locale.metadata}:`} {...formItemLayout}>
             <MonacoEditor
-              language={'properties'}
+              language="json"
               width={'100%'}
               height={200}
               value={metadataText}

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

@@ -18,7 +18,7 @@ import { Input, Button, Card, ConfigProvider, Form, Loading, Message } from '@al
 import EditServiceDialog from './EditServiceDialog';
 import EditClusterDialog from './EditClusterDialog';
 import InstanceTable from './InstanceTable';
-import { getParameter, processMetaData } from 'utils/nacosutil';
+import { getParameter } from 'utils/nacosutil';
 import MonacoEditor from 'components/MonacoEditor';
 import { MONACO_READONLY_OPTIONS, METADATA_ENTER } from './constant';
 import './ServiceDetail.scss';
@@ -95,7 +95,10 @@ class ServiceDetail extends React.Component {
     const { locale = {} } = this.props;
     const { serviceName, groupName, loading, service = {}, clusters } = this.state;
     const { metadata = {}, selector = {} } = service;
-    const metadataText = processMetaData(METADATA_ENTER)(metadata);
+    let metadataText = '';
+    if (Object.keys(metadata).length) {
+      metadataText = JSON.stringify(metadata, null, '\t');
+    }
     return (
       <div className="main-container service-detail">
         <Loading
@@ -140,7 +143,7 @@ class ServiceDetail extends React.Component {
             </FormItem>
             <FormItem label={`${locale.metadata}:`}>
               <MonacoEditor
-                language={'properties'}
+                language="json"
                 width={'100%'}
                 height={200}
                 value={metadataText}

console/src/main/resources/static/console-fe/src/utils/nacosutil.js

@@ -47,6 +47,18 @@ export const getParameter = (search, name) => {
   return value;
 };
 
+export const encodeKV = (text, separator) =>
+  text
+    .split('\r\n')
+    .filter(row => row.trim() && row.split('=').filter(kv => kv.trim()).length === 2)
+    .map(row =>
+      row
+        .split('=')
+        .map(kv => encodeURIComponent(kv.trim()))
+        .join('=')
+    )
+    .join(separator);
+
 /**
  * 将回车符和空格替换
  * @param {*} separator 替换符
@@ -56,8 +68,7 @@ export const replaceEnter = (separator = ',') => text => {
     return text;
   }
 
-  return text
-    .replace(/\r\n/g, separator)
+  return encodeKV(text, separator)
     .replace(/[\r\n]/g, separator)
     .replace(/[\t\s]/g, '');
 };