From 5ba7a5c492571d6672d2224956196eeb1f91c198 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: Fri, 12 Oct 2018 23:43:58 +0800
Subject: [PATCH] fix: Fix Instance list display

---
 .../pages/ServiceDetail/EditInstanceDialog.js | 12 +++---
 .../src/pages/ServiceDetail/InstanceTable.js  | 41 +++++++++++++++----
 2 files changed, 39 insertions(+), 14 deletions(-)

diff --git a/console/src/main/resources/static/src/pages/ServiceDetail/EditInstanceDialog.js b/console/src/main/resources/static/src/pages/ServiceDetail/EditInstanceDialog.js
index 6c7566b2e..3dbe9a764 100644
--- a/console/src/main/resources/static/src/pages/ServiceDetail/EditInstanceDialog.js
+++ b/console/src/main/resources/static/src/pages/ServiceDetail/EditInstanceDialog.js
@@ -51,20 +51,22 @@ class EditInstanceDialog extends React.Component {
             >
                 <Form {...DIALOG_FORM_LAYOUT}>
                     <FormItem label="IP:">
-                        <p>1.1.1.1</p>
+                        <p>{editInstance.ip}</p>
                     </FormItem>
                     <FormItem label={`${I18N.PORT}:`}>
-                        <p>8080</p>
+                        <p>{editInstance.port}</p>
                     </FormItem>
                     <FormItem label={`${I18N.WEIGHT}:`}>
                         <Input
                             className="in-text"
-                            value={editInstance.healthy}
-                            onChange={healthy => this.onChangeCluster({healthy})}
+                            value={editInstance.weight}
+                            onChange={weight => this.onChangeCluster({weight})}
                         />
                     </FormItem>
                     <FormItem label={`${I18N.WHETHER_ONLINE}:`}>
-                        <Switch onChange={f => f}/>
+                        <Switch
+                            checked={editInstance.enabled}
+                            onChange={enabled => this.onChangeCluster({enabled})}/>
                     </FormItem>
                     <FormItem label={`${I18N.METADATA}:`}>
                         <Input
diff --git a/console/src/main/resources/static/src/pages/ServiceDetail/InstanceTable.js b/console/src/main/resources/static/src/pages/ServiceDetail/InstanceTable.js
index d097722bd..838ab6ff9 100644
--- a/console/src/main/resources/static/src/pages/ServiceDetail/InstanceTable.js
+++ b/console/src/main/resources/static/src/pages/ServiceDetail/InstanceTable.js
@@ -33,7 +33,7 @@ class InstanceTable extends React.Component {
                 startPg: pageNum
             },
             beforeSend: () => this.setState({loading: true}),
-            success: res => this.setState({instance: res}),
+            success: instance => this.setState({instance}),
             complete: () => this.setState({loading: false})
         })
     }
@@ -42,20 +42,41 @@ class InstanceTable extends React.Component {
         this.refs.editInstanceDialog.show(instance)
     }
 
-    switchState() {
+    switchState(index, record) {
+        const {instance} = this.state
+        const {ip, port, weight, enabled} = record
+        const {clusterName, serviceName} = this.props
+        const newVal = Object.assign({}, instance)
+        newVal.list[index]['enabled'] = !enabled
+        window.request({
+            method: 'POST',
+            url: '/nacos/v1/ns/instance/update',
+            data: {serviceName, clusterName, ip, port, weight, enable: !enabled},
+            dataType: 'text',
+            beforeSend: () => this.setState({loading: true}),
+            success: () => this.setState({instance: newVal}),
+            complete: () => this.setState({loading: false})
+        })
+    }
+
+    onChangePage(pageNum) {
+        this.setState({pageNum}, () => this.getInstanceList())
     }
 
     render() {
-        const {clusterName} = this.props
-        const {instance = {}, pageSize, loading} = this.state
+        const {instance, pageSize, loading} = this.state
         return instance.count ? (
             <div>
                 <Table dataSource={instance.list} loading={loading}>
                     <Table.Column title="IP" dataIndex="ip"/>
                     <Table.Column title={I18N.PORT} dataIndex="port"/>
                     <Table.Column title={I18N.WEIGHT} dataIndex="weight"/>
-                    <Table.Column title={I18N.HEALTHY} dataIndex="healthy"/>
-                    <Table.Column title={I18N.METADATA} dataIndex="metadata"/>
+                    <Table.Column title={I18N.HEALTHY} dataIndex="healthy" cell={val => `${val}`}/>
+                    <Table.Column
+                        title={I18N.METADATA}
+                        dataIndex="metadata"
+                        cell={metadata => Object.keys(metadata).map(k => `${k}=${metadata[k]}`).join(',')}
+                    />
                     <Table.Column
                         title={I18N.OPERATION}
                         width={150}
@@ -67,9 +88,9 @@ class InstanceTable extends React.Component {
                                     onClick={() => this.openInstanceDialog(record)}
                                 >{I18N.EDITOR}</Button>
                                 <Button
-                                    type={record.online ? 'normal' : 'secondary'}
+                                    type={record.enabled ? 'normal' : 'secondary'}
                                     onClick={() => this.switchState(index, record)}
-                                >{I18N[record.online ? 'OFFLINE' : 'ONLINE']}</Button>
+                                >{I18N[record.enabled ? 'OFFLINE' : 'ONLINE']}</Button>
                             </div>
                         )}/>
                 </Table>
@@ -78,7 +99,9 @@ class InstanceTable extends React.Component {
                         ? (
                             <Pagination
                                 className="pagination"
-                                onChange={currentPage => this.onChange(clusterName, currentPage)}
+                                total={instance.count}
+                                pageSize={pageSize}
+                                onChange={currentPage => this.onChangePage(currentPage)}
                             />
                         )
                         : null