[ISSES#1469] add cluster delete button (#6170)

console-ui/src/locales/en-US.js

@@ -142,6 +142,10 @@ const I18N_CONF = {
     pubNoData: 'No results found.',
     nodeState: 'NodeState',
     extendInfo: 'NodeMetaData',
+    operation: 'Operation',
+    leave: 'Leave',
+    confirm: 'Confirm',
+    confirmTxt: 'Confirm that you want to go offline this cluster node?',
   },
   EditClusterDialog: {
     updateCluster: 'Update Cluster',

console-ui/src/locales/zh-CN.js

@@ -141,6 +141,10 @@ const I18N_CONF = {
     pubNoData: '没有数据',
     nodeState: '节点状态',
     extendInfo: '节点元数据',
+    operation: '操作',
+    leave: '下线',
+    confirm: '确认',
+    confirmTxt: '确认要下线此集群节点?',
   },
   EditClusterDialog: {
     updateCluster: '更新集群',

console-ui/src/pages/ClusterManagement/ClusterNodeList/ClusterNodeList.js

@@ -20,7 +20,6 @@ import {
   Button,
   Field,
   Tag,
-  Icon,
   Collapse,
   Form,
   Grid,
@@ -28,10 +27,12 @@ import {
   Loading,
   Pagination,
   Table,
+  Dialog,
   ConfigProvider,
 } from '@alifd/next';
 import { request } from '../../../globalLib';
 import RegionGroup from '../../../components/RegionGroup';
+import axios from 'axios';
 
 import './ClusterNodeList.scss';
 
@@ -102,6 +103,39 @@ class ClusterNodeList extends React.Component {
     });
   }
 
+  leave(nodes) {
+    this.openLoading();
+    axios
+      .post('v1/core/cluster/server/leave', nodes)
+      .then(() => {
+        this.queryClusterStateList();
+        this.closeLoading();
+      })
+      .catch(() => {
+        this.queryClusterStateList();
+        this.closeLoading();
+      });
+  }
+
+  showLeaveDialog(value) {
+    const { locale = {} } = this.props;
+    Dialog.confirm({
+      title: locale.confirm,
+      content: locale.confirmTxt,
+      onOk: () => this.leave([value]),
+      onCancel: () => {},
+    });
+  }
+
+  renderCol(value, index, record) {
+    const { locale = {} } = this.props;
+    return (
+      <Button onClick={this.showLeaveDialog.bind(this, value)} type="primary" warning>
+        {locale.leave}
+      </Button>
+    );
+  }
+
   getQueryLater = () => {
     setTimeout(() => this.queryClusterStateList());
   };
@@ -178,7 +212,7 @@ class ClusterNodeList extends React.Component {
                 locale={{ empty: pubNoData }}
                 getRowProps={row => this.rowColor(row)}
               >
-                <Column title={locale.nodeIp} dataIndex="address" width="30%" />
+                <Column title={locale.nodeIp} dataIndex="address" width="20%" />
                 <Column
                   title={locale.nodeState}
                   dataIndex="state"
@@ -215,7 +249,7 @@ class ClusterNodeList extends React.Component {
                 <Column
                   title={locale.extendInfo}
                   dataIndex="extendInfo"
-                  width="50%"
+                  width="30%"
                   cell={function(value, index, record) {
                     function showCollapse() {
                       const collapse = (
@@ -235,6 +269,12 @@ class ClusterNodeList extends React.Component {
                     return showCollapse();
                   }}
                 />
+                <Column
+                  title={locale.operation}
+                  dataIndex="address"
+                  width="20%"
+                  cell={this.renderCol.bind(this)}
+                />
               </Table>
             </Col>
           </Row>