feat: Service Detail page API docking

console/src/main/resources/static/src/pages/ServiceDetail/EditClusterDialog.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import {Dialog, Form, Input, Switch, Select} from '@alifd/next';
+import {Dialog, Form, Input, Switch, Select, Message} from '@alifd/next';
 import {I18N, DIALOG_FORM_LAYOUT} from './constant'
 
 const FormItem = Form.Item;
@@ -22,7 +22,7 @@ class EditClusterDialog extends React.Component {
         this.setState({
             editCluster,
             editClusterDialogVisible: true
-        }, () => console.log(this.state.editCluster))
+        })
     }
 
     hide() {
@@ -30,7 +30,29 @@ class EditClusterDialog extends React.Component {
     }
 
     onConfirm() {
-        console.log('confirm', this.props, this.state)
+        const {openLoading, closeLoading, getServiceDetail} = this.props
+        const {name, serviceName, metadataText, healthChecker} = this.state.editCluster
+        window.request({
+            method: 'POST',
+            url: '/nacos/v1/ns/cluster/update',
+            data: {
+                serviceName,
+                clusterName: name,
+                metadata: metadataText,
+                healthChecker: JSON.stringify(healthChecker)
+            },
+            dataType: 'text',
+            beforeSend: () => openLoading(),
+            success: res => {
+                if (res !== 'ok') {
+                    Message.error(res)
+                    return
+                }
+                this.hide()
+                getServiceDetail()
+            },
+            complete: () => closeLoading()
+        })
     }
 
     onChangeCluster(changeVal) {

console/src/main/resources/static/src/pages/ServiceDetail/EditInstanceDialog.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import {Dialog, Form, Input, Switch} from '@alifd/next';
+import {Dialog, Form, Input, Switch, Message} from '@alifd/next';
 import {I18N, DIALOG_FORM_LAYOUT} from './constant'
 
 const FormItem = Form.Item;
@@ -28,7 +28,24 @@ class EditInstanceDialog extends React.Component {
     }
 
     onConfirm() {
-        console.log('confirm', this.props, this.state)
+        const {serviceName, clusterName, getInstanceList, openLoading, closeLoading} = this.props
+        const {ip, port, weight, enabled, metadataText} = this.state.editInstance
+        window.request({
+            method: 'POST',
+            url: '/nacos/v1/ns/instance/update',
+            data: {serviceName, clusterName, ip, port, weight, enable: enabled, metadata: metadataText},
+            dataType: 'text',
+            beforeSend: () => openLoading(),
+            success: res => {
+                if (res !== 'ok') {
+                    Message.error(res)
+                    return
+                }
+                this.hide()
+                getInstanceList()
+            },
+            complete: () => closeLoading()
+        })
     }
 
     onChangeCluster(changeVal) {

console/src/main/resources/static/src/pages/ServiceDetail/EditServiceDialog.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import {Dialog, Form, Input, Select} from '@alifd/next';
+import {Dialog, Form, Input, Select, Message} from '@alifd/next';
 import {I18N, DIALOG_FORM_LAYOUT} from './constant'
 
 const FormItem = Form.Item;
@@ -29,8 +29,23 @@ class EditServiceDialog extends React.Component {
     }
 
     onConfirm() {
-        const editService = Object.assign({}, this.state)
+        const editService = Object.assign({}, this.state.editService)
-        console.log('confirm', editService)
+        const {name, protectThreshold, healthCheckMode, metadataText} = editService
+        window.request({
+            method: 'POST',
+            url: '/nacos/v1/ns/service/update',
+            data: {serviceName: name, protectThreshold, healthCheckMode, metadata: metadataText},
+            dataType: 'text',
+            beforeSend: () => this.setState({loading: true}),
+            success: res => {
+                if (res !== 'ok') {
+                    Message.error(res)
+                    return
+                }
+                this.props.getServiceDetail()
+            },
+            complete: () => this.setState({loading: false})
+        })
         this.hide()
     }
 

console/src/main/resources/static/src/pages/ServiceDetail/InstanceTable.js

@@ -20,6 +20,14 @@ class InstanceTable extends React.Component {
         this.getInstanceList()
     }
 
+    openLoading() {
+        this.setState({loading: true})
+    }
+
+    closeLoading() {
+        this.setState({loading: false})
+    }
+
     getInstanceList() {
         const {clusterName, serviceName} = this.props
         if (!clusterName) return
@@ -32,9 +40,9 @@ class InstanceTable extends React.Component {
                 pgSize: pageSize,
                 startPg: pageNum
             },
-            beforeSend: () => this.setState({loading: true}),
+            beforeSend: () => this.openLoading(),
             success: instance => this.setState({instance}),
-            complete: () => this.setState({loading: false})
+            complete: () => this.closeLoading()
         })
     }
 
@@ -53,9 +61,9 @@ class InstanceTable extends React.Component {
             url: '/nacos/v1/ns/instance/update',
             data: {serviceName, clusterName, ip, port, weight, enable: !enabled},
             dataType: 'text',
-            beforeSend: () => this.setState({loading: true}),
+            beforeSend: () => this.openLoading(),
             success: () => this.setState({instance: newVal}),
-            complete: () => this.setState({loading: false})
+            complete: () => this.closeLoading()
         })
     }
 
@@ -64,6 +72,7 @@ class InstanceTable extends React.Component {
     }
 
     render() {
+        const {clusterName, serviceName} = this.props
         const {instance, pageSize, loading} = this.state
         return instance.count ? (
             <div>
@@ -106,7 +115,14 @@ class InstanceTable extends React.Component {
                         )
                         : null
                 }
-                <EditInstanceDialog ref="editInstanceDialog"/>
+                <EditInstanceDialog
+                    ref="editInstanceDialog"
+                    serviceName={serviceName}
+                    clusterName={clusterName}
+                    openLoading={()=>this.openLoading()}
+                    closeLoading={()=>this.closeLoading()}
+                    getInstanceList={() => this.getInstanceList()}
+                />
             </div>
         ) : null
     }

console/src/main/resources/static/src/pages/ServiceDetail/ServiceDetail.js

@@ -125,8 +125,18 @@ class ServiceDetail extends React.Component {
                         ))
                     }
                 </Loading>
-                <EditServiceDialog ref="editServiceDialog"/>
+                <EditServiceDialog
-                <EditClusterDialog ref="editClusterDialog"/>
+                    ref="editServiceDialog"
+                    openLoading={() => this.openLoading()}
+                    closeLoading={() => this.closeLoading()}
+                    getServiceDetail={() => this.getServiceDetail()}
+                />
+                <EditClusterDialog
+                    ref="editClusterDialog"
+                    openLoading={() => this.openLoading()}
+                    closeLoading={() => this.closeLoading()}
+                    getServiceDetail={() => this.getServiceDetail()}
+                />
             </div>
         );
     }