Merge pull request #465 from jameslcj/hotfix_393

fix #393

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

@@ -51,7 +51,7 @@ class EditServiceDialog extends React.Component {
     const { name, protectThreshold, healthCheckMode, metadataText, selector } = editService;
     request({
       method: isCreate ? 'PUT' : 'POST',
-      url: `v1/ns/service/${isCreate ? 'create' : 'update'}`,
+      url: 'v1/ns/service',
       data: {
         serviceName: name,
         protectThreshold,
@@ -85,6 +85,13 @@ class EditServiceDialog extends React.Component {
     });
   }
 
+  getFormItemLayout = () => {
+    return {
+      labelCol: { span: 6 },
+      wrapperCol: { span: 14 },
+    };
+  };
+
   render() {
     const { locale = {} } = this.props;
     const { isCreate, editService, editServiceDialogVisible } = this.state;
@@ -95,6 +102,7 @@ class EditServiceDialog extends React.Component {
       metadataText,
       selector = { type: 'none' },
     } = editService;
+    const formItemLayout = this.getFormItemLayout();
     return (
       <Dialog
         className="service-detail-edit-dialog"
@@ -105,27 +113,22 @@ class EditServiceDialog extends React.Component {
         onClose={() => this.hide()}
       >
         <Form {...DIALOG_FORM_LAYOUT}>
-          <Form.Item label={`${locale.serviceName}:`}>
+          <Form.Item label={`${locale.serviceName}:`} {...formItemLayout}>
             {!isCreate ? (
               <p>{name}</p>
             ) : (
-              <Input
-                className="in-text"
-                value={name}
-                onChange={name => this.onChangeCluster({ name })}
-              />
+              <Input value={name} onChange={name => this.onChangeCluster({ name })} />
             )}
           </Form.Item>
-          <Form.Item label={`${locale.protectThreshold}:`}>
+          <Form.Item label={`${locale.protectThreshold}:`} {...formItemLayout}>
             <Input
-              className="in-text"
               value={protectThreshold}
               onChange={protectThreshold => this.onChangeCluster({ protectThreshold })}
             />
           </Form.Item>
-          <Form.Item label={`${locale.healthCheckPattern}:`}>
+          <Form.Item label={`${locale.healthCheckPattern}:`} {...formItemLayout}>
             <Select
-              className="in-select"
+              className="full-width"
               defaultValue={healthCheckMode}
               onChange={healthCheckMode => this.onChangeCluster({ healthCheckMode })}
             >
@@ -134,16 +137,15 @@ class EditServiceDialog extends React.Component {
               <Select.Option value="none">{locale.healthCheckPatternNone}</Select.Option>
             </Select>
           </Form.Item>
-          <Form.Item label={`${locale.metadata}:`}>
-            <Input
-              className="in-text"
+          <Form.Item label={`${locale.metadata}:`} {...formItemLayout}>
+            <Input.TextArea
               value={metadataText}
               onChange={metadataText => this.onChangeCluster({ metadataText })}
             />
           </Form.Item>
-          <Form.Item label={`${locale.type}:`}>
+          <Form.Item label={`${locale.type}:`} {...formItemLayout}>
             <Select
-              className="in-select"
+              className="full-width"
               defaultValue={selector.type}
               onChange={type => this.onChangeCluster({ selector: { ...selector, type } })}
             >
@@ -152,9 +154,8 @@ class EditServiceDialog extends React.Component {
             </Select>
           </Form.Item>
           {selector.type === 'label' && (
-            <Form.Item label={`${locale.selector}:`}>
+            <Form.Item label={`${locale.selector}:`} {...formItemLayout}>
               <Input.TextArea
-                className="in-text"
                 value={selector.expression}
                 onChange={expression =>
                   this.onChangeCluster({ selector: { ...selector, expression } })

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

@@ -132,9 +132,6 @@ 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>

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

@@ -53,3 +53,11 @@
     width: 120px;
   }
 }
+
+.service-detail-edit-dialog {
+  width: 600px;
+}
+
+.full-width {
+  width: 100%;
+}