[ISSUE #876] feature(console):support console show cluster node state

console/src/main/resources/static/console-fe/src/index.js

@@ -41,6 +41,7 @@ import ListeningToQuery from './pages/ConfigurationManagement/ListeningToQuery';
 import ConfigurationManagement from './pages/ConfigurationManagement/ConfigurationManagement';
 import ServiceList from './pages/ServiceManagement/ServiceList';
 import ServiceDetail from './pages/ServiceManagement/ServiceDetail';
+import ClusterNodeList from './pages/ClusterManagement/ClusterNodeList';
 
 import reducers from './reducers';
 import { changeLanguage } from './reducers/locale';
@@ -81,6 +82,7 @@ const MENU = [
   { path: '/configurationManagement', component: ConfigurationManagement },
   { path: '/serviceManagement', component: ServiceList },
   { path: '/serviceDetail', component: ServiceDetail },
+  { path: '/clusterManagement', component: ClusterNodeList },
 ];
 
 @connect(

console/src/main/resources/static/console-fe/src/layouts/MainLayout.js

@@ -391,7 +391,7 @@ class MainLayout extends React.Component {
   refreshNav() {
     const { navList } = this.state;
     const { location, history, functionMode } = this.props;
-    const [configUrl, serviceUrl] = ['/configurationManagement', '/serviceManagement'];
+    const [configUrl, serviceUrl, clusterUrl] = ['/configurationManagement', '/serviceManagement', '/clusterManagement'];
     this.setState(
       {
         navList: navList.map(item => {
@@ -407,6 +407,12 @@ class MainLayout extends React.Component {
           ) {
             item.enable = true;
           }
+          if (
+            item.serviceName === 'clusterManagementVirtual' &&
+            (functionMode === null || functionMode === 'cluster')
+          ) {
+            item.enable = true;
+          }
           return item;
         }),
       },
@@ -418,6 +424,9 @@ class MainLayout extends React.Component {
     if (functionMode === 'naming' && location.pathname === configUrl) {
       history.push(serviceUrl);
     }
+    if (functionMode === 'cluster' && location.pathname === clusterUrl) {
+      history.push(clusterUrl);
+    }
   }
 
   componentWillReceiveProps() {

console/src/main/resources/static/console-fe/src/locales/en-US.js

@@ -46,6 +46,8 @@ const I18N_CONF = {
     serviceManagement: 'Service List',
     serviceDetail: 'Service Details',
     namespace: 'Namespace',
+    clusterManagementVirtual: 'ClusterManagement',
+    clusterManagement: 'Cluster Node List',
   },
   NameSpace: {
     namespace: 'Namespaces',
@@ -89,6 +91,18 @@ const I18N_CONF = {
     promptDelete: 'Do you want to delete the service?',
     create: 'Create Service',
   },
+  ClusterNodeList: {
+    clusterNodeList: 'Node List',
+    nodeIp: 'NodeIp',
+    nodeIpPlaceholder: 'Please enter node Ip',
+    query: 'Search',
+    pubNoData: 'No results found.',
+    nodeState: 'NodeState',
+    clusterTerm: 'ClusterTerm',
+    leaderDueMs: 'LeaderDue(ms)',
+    heartbeatDueMs: 'HeartbeatDue(ms)',
+    voteFor: 'VoteFor',
+  },
   EditClusterDialog: {
     updateCluster: 'Update Cluster',
     checkType: 'Check Type',

console/src/main/resources/static/console-fe/src/locales/zh-CN.js

@@ -46,6 +46,8 @@ const I18N_CONF = {
     serviceManagement: '服务列表',
     serviceDetail: '服务详情',
     namespace: '命名空间',
+    clusterManagementVirtual: '集群管理',
+    clusterManagement: '节点列表',
   },
   NameSpace: {
     namespace: '命名空间',
@@ -89,6 +91,18 @@ const I18N_CONF = {
     promptDelete: '确定要删除当前服务吗？',
     create: '创建服务',
   },
+  ClusterNodeList: {
+    clusterNodeList: '节点列表',
+    nodeIp: '节点Ip',
+    nodeIpPlaceholder: '请输入节点Ip',
+    query: '查询',
+    pubNoData: '没有数据',
+    nodeState: '节点状态',
+    clusterTerm: '集群任期',
+    leaderDueMs: 'Leader止时(ms)',
+    heartbeatDueMs: '心跳止时(ms)',
+    voteFor: '投票对象',
+  },
   EditClusterDialog: {
     updateCluster: '更新集群',
     checkType: '检查类型',

console/src/main/resources/static/console-fe/src/menu.js

@@ -227,6 +227,37 @@ module.exports = {
       useRouter: false,
       id: 'namespace',
     },
+    {
+      enable: false,
+      isExtend: true,
+      name: '集群管理',
+      title: '集群管理',
+      isVirtual: true,
+      projectName: 'nacos',
+      serviceName: 'clusterManagementVirtual',
+      link: 'clusterManagementVirtual',
+      hasFusion: true,
+      template: '',
+      registerName: 'com.alibaba.nacos.page.clusterManagementVirtual',
+      useRouter: false,
+      id: 'com.alibaba.nacos.page.clusterManagementVirtual',
+      children: [
+        {
+          isExtend: false,
+          name: '节点状态',
+          title: '节点状态',
+          isVirtual: false,
+          projectName: 'nacos',
+          serviceName: 'clusterManagement',
+          link: 'clusterManagement',
+          hasFusion: true,
+          template: '',
+          registerName: 'com.alibaba.nacos.page.clusterManagement',
+          useRouter: false,
+          id: 'clusterManagement',
+        },
+      ],
+    },
   ],
   defaultKey: 'configurationManagement',
   projectName: 'nacos',

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

@@ -0,0 +1,204 @@
+/*
+ * Copyright 1999-2018 Alibaba Group Holding Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import {
+  Button,
+  Field,
+  Form,
+  Grid,
+  Input,
+  Loading,
+  Pagination,
+  Table,
+  ConfigProvider,
+} from '@alifd/next';
+import { request } from '../../../globalLib';
+import RegionGroup from '../../../components/RegionGroup';
+
+import './ClusterNodeList.scss';
+
+const FormItem = Form.Item;
+const { Row, Col } = Grid;
+const { Column } = Table;
+
+@ConfigProvider.config
+class ClusterNodeList extends React.Component {
+  static displayName = 'ClusterNodeList';
+
+  static propTypes = {
+    locale: PropTypes.object,
+  };
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      loading: false,
+      total: 0,
+      pageSize: 10,
+      currentPage: 1,
+      keyword: '',
+      dataSource: [],
+    };
+    this.field = new Field(this);
+  }
+
+  openLoading() {
+    this.setState({ loading: true });
+  }
+
+  closeLoading() {
+    this.setState({ loading: false });
+  }
+
+  openEditServiceDialog() {
+    try {
+      this.editServiceDialog.current.getInstance().show(this.state.service);
+    } catch (error) {}
+  }
+
+  queryClusterStateList() {
+    const { currentPage, pageSize, keyword, withInstances = false } = this.state;
+    const parameter = [
+      `withInstances=${withInstances}`,
+      `pageNo=${currentPage}`,
+      `pageSize=${pageSize}`,
+      `keyword=${keyword}`,
+    ];
+    request({
+      url: `v1/ns/operator/cluster/states?${parameter.join('&')}`,
+      beforeSend: () => this.openLoading(),
+      success: ({ count = 0, clusterStateList = [] } = {}) => {
+        this.setState({
+          dataSource: clusterStateList,
+          total: count,
+        });
+      },
+      error: () =>
+        this.setState({
+          dataSource: [],
+          total: 0,
+          currentPage: 0,
+        }),
+      complete: () => this.closeLoading(),
+    });
+  }
+
+  getQueryLater = () => {
+    setTimeout(() => this.queryClusterStateList());
+  };
+
+  setNowNameSpace = (nowNamespaceName, nowNamespaceId) =>
+    this.setState({
+      nowNamespaceName,
+      nowNamespaceId,
+    });
+
+  rowColor = row => ({ className: !row.voteFor ? '' : '' });
+
+  render() {
+    const { locale = {} } = this.props;
+    const {
+      pubNoData,
+      clusterNodeList,
+      nodeIp,
+      nodeIpPlaceholder,
+      query,
+    } = locale;
+    const { keyword, nowNamespaceName, nowNamespaceId } = this.state;
+    const { init, getValue } = this.field;
+    this.init = init;
+    this.getValue = getValue;
+
+    return (
+      <div className="main-container cluster-management">
+        <Loading
+          shape="flower"
+          style={{ position: 'relative', width: '100%' }}
+          visible={this.state.loading}
+          tip="Loading..."
+          color="#333"
+        >
+          <div style={{ marginTop: -15 }}>
+            <RegionGroup
+              setNowNameSpace={this.setNowNameSpace}
+              namespaceCallBack={this.getQueryLater}
+            />
+          </div>
+          <h3 className="page-title">
+            <span className="title-item">{clusterNodeList}</span>
+            <span className="title-item">|</span>
+            <span className="title-item">{nowNamespaceName}</span>
+            <span className="title-item">{nowNamespaceId}</span>
+          </h3>
+          <Row className="demo-row" style={{ marginBottom: 10, padding: 0 }}>
+            <Col span="24">
+              <Form inline field={this.field}>
+                <FormItem label={nodeIp}>
+                  <Input
+                    placeholder={nodeIpPlaceholder}
+                    style={{ width: 200 }}
+                    value={keyword}
+                    onChange={keyword => this.setState({ keyword })}
+                    onPressEnter={() =>
+                      this.setState({ currentPage: 1 }, () => this.queryClusterStateList())
+                    }
+                  />
+                </FormItem>
+                <FormItem label="">
+                  <Button
+                    type="primary"
+                    onClick={() => this.setState({ currentPage: 1 }, () => this.queryClusterStateList())}
+                    style={{ marginRight: 10 }}
+                  >
+                    {query}
+                  </Button>
+                </FormItem>
+              </Form>
+            </Col>
+          </Row>
+          <Row style={{ padding: 0 }}>
+            <Col span="24" style={{ padding: 0 }}>
+              <Table
+                dataSource={this.state.dataSource}
+                locale={{ empty: pubNoData }}
+                getRowProps={row => this.rowColor(row)}
+              >
+                <Column title={locale.nodeIp} dataIndex="nodeIp" />
+                <Column title={locale.nodeState} dataIndex="nodeState" />
+                <Column title={locale.clusterTerm} dataIndex="clusterTerm" />
+                <Column title={locale.leaderDueMs} dataIndex="leaderDueMs" />
+                <Column title={locale.heartbeatDueMs} dataIndex="heartbeatDueMs" />
+              </Table>
+            </Col>
+          </Row>
+          {this.state.total > this.state.pageSize && (
+            <div style={{ marginTop: 10, textAlign: 'right' }}>
+              <Pagination
+                current={this.state.currentPage}
+                total={this.state.total}
+                pageSize={this.state.pageSize}
+                onChange={currentPage =>
+                  this.setState({ currentPage }, () => this.queryClusterStateList())
+                }
+              />
+            </div>
+          )}
+        </Loading>
+      </div>
+    );
+  }
+}
+
+export default ClusterNodeList;

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

@@ -0,0 +1,29 @@
+/*
+ * Copyright 1999-2018 Alibaba Group Holding Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.cluster-management {
+  .page-title {
+    height: 30px;
+    width: 100%;
+    line-height: 30px;
+    margin: 0 0 20px;
+    padding: 0 0 0 10px;
+    border-left: 3px solid #09c;
+    color: #ccc;
+  }
+  .title-item {
+    font-size: 14px;
+    color: #000;
+    margin-right: 8px;
+  }
+}

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

@@ -0,0 +1,16 @@
+/*
+ * Copyright 1999-2018 Alibaba Group Holding Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import ClusterNodeList from './ClusterNodeList';
+
+export default ClusterNodeList;