modify cluster manage

web/src/components/kibana/console/components/Console.tsx

@@ -43,7 +43,7 @@ const ConsoleWrapper = ({
           <EuiFlexItem className="conApp__tabsExtension">
           <RequestStatusBar
             requestInProgress={requestInProgress}
-            // selectedCluster={selectedCluster}
+            selectedCluster={selectedCluster}
             requestResult={
               lastDatum
                 ? {

web/src/components/kibana/console/components/request_status_bar/request_status_bar.tsx

@@ -63,8 +63,14 @@ const mapStatusCodeToBadgeColor = (statusCode: number) => {
 export const RequestStatusBar: FunctionComponent<Props> = ({
   requestInProgress,
   requestResult,
+  selectedCluster,
 }) => {
   let content: React.ReactNode = null;
+  const clusterContent = (<EuiFlexItem grow={false} style={{marginRight:'auto'}}>
+  <EuiBadge>
+    {selectedCluster.endpoint}&nbsp;-&nbsp;{selectedCluster.version}
+  </EuiBadge>
+</EuiFlexItem>);
 
   if (requestInProgress) {
     content = (
@@ -122,6 +128,7 @@ export const RequestStatusBar: FunctionComponent<Props> = ({
       gutterSize="s"
       responsive={false}
     >
+      {clusterContent}
       {content}
     </EuiFlexGroup>
   );

web/src/components/kibana/data/public/query/timefilter/timefilter.ts

@@ -23,7 +23,9 @@ import moment from 'moment';
 import { areRefreshIntervalsDifferent, areTimeRangesDifferent } from './lib/diff_time_picker_vals';
 import { getForceNow } from './lib/get_force_now';
 import { TimefilterConfig, InputTimeRange, TimeRangeBounds } from './types';
-import { calculateBounds, getTime, RefreshInterval, TimeRange } from '../../../common';
+import { getTime, RefreshInterval, TimeRange } from '../../../common';
+import { calculateBounds } from '../../../common/query/timefilter/get_time';
+
 import { TimeHistoryContract } from './time_history';
 import { IndexPattern } from '../../index_patterns';
 
@@ -173,6 +175,9 @@ export class Timefilter {
   }
 
   public calculateBounds(timeRange: TimeRange): TimeRangeBounds {
+    if(typeof calculateBounds !== 'function'){
+      console.log(typeof(calculateBounds), calculateBounds)
+    }
     return calculateBounds(timeRange, { forceNow: this.getForceNow() });
   }
 

web/src/models/global.js

@@ -53,6 +53,8 @@ export default {
         return {
           name: item.name,
           id: item.id,
+          endpoint: item.endpoint,
+          version: item.version,
         };
       })
 

web/src/pages/DataManagement/context.js

@@ -164,7 +164,7 @@ const filterManager = new FilterManager();
 const storage = new Storage(localStorage); 
 const queryStringManager = new QueryStringManager(storage);
 const timefilterConfig = {
-  timeDefaults: { from: 'now-1y', to: 'now' },
+  timeDefaults: { from: 'now-15m', to: 'now' },
   refreshIntervalDefaults: { pause: true, value: 10000 },
 };
 const timeHistory = new TimeHistory(storage);

web/src/pages/System/Cluster/Form.js

@@ -1,10 +1,11 @@
 import React from 'react';
-import {Card, Form, Icon, Input, InputNumber, Button, Switch, message} from 'antd';
+import {Card, Form, Icon, Input, InputNumber, Button, Switch, message, Spin} from 'antd';
 import router from 'umi/router';
 
 import  styles from './Form.less';
 import {connect} from "dva";
 import NewCluster from './Step';
+import PageHeaderWrapper from '@/components/PageHeaderWrapper';
 
 @Form.create()
 @connect(({clusterConfig}) =>({
@@ -21,6 +22,7 @@ class ClusterForm extends React.Component{
     this.state = {
       confirmDirty: false,
       needAuth: needAuth,
+      isLoading: false,
     }
   }
   componentDidMount() {
@@ -61,6 +63,7 @@ class ClusterForm extends React.Component{
         description: values.description,
         enabled: values.enabled,
         monitored: values.monitored,
+        version: values.version,
         schema: values.isTLS === true ? 'https': 'http',
         // order: values.order,
       }
@@ -95,6 +98,40 @@ class ClusterForm extends React.Component{
     })
   }
 
+  tryConnect = async ()=>{
+    const {dispatch, form} = this.props;
+    const values =  await form.validateFields((errors, values) => {
+      if(errors){
+        return false;
+      }
+      let newVals = {
+        name: values.name,
+        host: values.host,
+        basic_auth: {
+          username: values.username,
+          password: values.password,
+        },
+        schema: values.isTLS === true ? 'https': 'http',
+      }
+      return values;
+    });
+    if(!values){
+      return
+    }
+    this.setState({isLoading: true})
+    const res = await dispatch({
+      type: 'clusterConfig/doTryConnect',
+      payload: values
+    });
+    if(res){
+      message.success('连接成功！')
+      form.setFieldsValue({
+        version: res.version
+      })
+    }
+    this.setState({isLoading: false})
+  }
+
   render() {
     const {getFieldDecorator} = this.props.form;
     const formItemLayout = {
@@ -121,11 +158,13 @@ class ClusterForm extends React.Component{
     };
     const {editValue, editMode} = this.props.clusterConfig;
     return (
+    <PageHeaderWrapper>
       <Card title={editMode === 'NEW' ? '注册集群': '修改集群配置'}
         extra={[<Button type="primary" onClick={()=>{
           router.push('/system/cluster');
         }}>返回</Button>]}
       >
+      <Spin spinning={this.state.isLoading}>
       <Form {...formItemLayout}>
         <Form.Item label="集群名称">
           {getFieldDecorator('name', {
@@ -154,6 +193,13 @@ class ClusterForm extends React.Component{
             ],
           })(<Input placeholder="127.0.0.1:9200" />)}
         </Form.Item>
+        <Form.Item style={{marginBottom:0}}>
+          {getFieldDecorator('version', {
+            initialValue: editValue.version,
+            rules: [
+            ],
+          })(<Input type="hidden"/>)}
+        </Form.Item>
         <Form.Item label="TLS">
         {getFieldDecorator('isTLS', {
             initialValue: editValue?.schema === "https",
@@ -175,14 +221,14 @@ class ClusterForm extends React.Component{
         {this.state.needAuth === true ? (<div>
         <Form.Item label="用户名">
           {getFieldDecorator('username', {
-            initialValue: editValue.basic_auth.username,
+            initialValue: editValue.basic_auth?.username,
             rules: [
             ],
           })(<Input autoComplete='off' />)}
         </Form.Item>
         <Form.Item label="密码" hasFeedback>
           {getFieldDecorator('password', {
-            initialValue: editValue.basic_auth.password,
+            initialValue: editValue.basic_auth?.password,
             rules: [
             ],
           })(<Input.Password />)}
@@ -220,9 +266,14 @@ class ClusterForm extends React.Component{
           <Button type="primary" onClick={this.handleSubmit}>
             {editMode === 'NEW' ? '注册': '保存'}
           </Button>
+          <Button style={{marginLeft: 15}} onClick={this.tryConnect}>
+              测试连接
+          </Button>
         </Form.Item>
       </Form>
+      </Spin>
       </Card>
+      </PageHeaderWrapper>
     )
   }
 }

web/src/pages/System/Cluster/Index.js

@@ -2,10 +2,27 @@ import  React from 'react';
 import {Button, Card, Col, Divider, Form, Input, Row, Table, Switch, Icon, Popconfirm, message} from "antd";
 import Link from "umi/link";
 import {connect} from "dva";
+import {HealthStatusCircle} from './health_status';
+import PageHeaderWrapper from '@/components/PageHeaderWrapper';
+import styles from './step.less';
+import clusterBg from '@/assets/cluster_bg.png';
 
-const HealthStatusCircle = ({status})=>{
+const content = (
-  return <div style={{background: status, height:14, width:14, borderRadius: 14, boxShadow: '0px 0px 5px #555'}}></div>
+  <div className={styles.pageHeaderContent}>
-}
+    <p>
+      集群管理通过注册新集群，删除集群让您高效的管理多个 Elasticsearch 集群。
+    </p>
+  </div>
+);
+
+const extraContent = (
+  <div className={styles.extraImg}>
+    <img
+      alt="集群管理"
+      src={clusterBg}
+    />
+  </div>
+);
 
 @Form.create()
 @connect(({clusterConfig}) =>({
@@ -18,10 +35,15 @@ class Index extends  React.Component {
     key: 'name',
   },{
     title: '健康状态',
-    dataIndex: 'status.health_status',
+    dataIndex: 'id',
     key: 'health_status',
     render: (val)=>{
-      return <HealthStatusCircle  status={val}/>
+      const {clusterStatus} = this.props.clusterConfig;
+      if(!clusterStatus || !clusterStatus[val]){
+        return
+      }
+      const status = clusterStatus[val].health_status;
+      return <HealthStatusCircle  status={status}/>
     }
   },{
     title: '所属业务',
@@ -54,10 +76,14 @@ class Index extends  React.Component {
     // }
   },{
     title: '节点数',
-    dataIndex: 'node_count',
+    dataIndex: 'id',
     key: 'mode_count',
-    render: ()=>{
+    render: (val)=>{
-      return 1;
+      const {clusterStatus} = this.props.clusterConfig;
+      if(!clusterStatus || !clusterStatus[val]){
+        return
+      }
+      return clusterStatus[val].nodes_count;
     }
   },{
     title: '集群地址',
@@ -69,7 +95,7 @@ class Index extends  React.Component {
       dataIndex: 'monitored',
       key: 'monitored',
       render: (val) => {
-        return val? '是': '否';
+        return val? '启用': '关闭';
       }
     },
   // {
@@ -114,15 +140,26 @@ class Index extends  React.Component {
     })
   }
   componentDidMount() {
+    this.fetchData({})
+    this.fetchClusterStatus();
+  }
+  componentWillUnmount(){
+    if(this.fetchClusterStatusTimer){
+      clearTimeout(this.fetchClusterStatusTimer);
+    }
+  }
+  fetchClusterStatus = async ()=>{
     const {dispatch} = this.props;
-    dispatch({
+    const res = await dispatch({
       type: 'clusterConfig/fetchClusterStatus',
-    }).then(()=>{
+    });
-      if(typeof this.props.clusterConfig.data === 'undefined') {
+    if(this.fetchClusterStatusTimer){
-        this.fetchData({})
+      clearTimeout(this.fetchClusterStatusTimer);
-      }
+    }
-    })
+    if(!res){
-  
+     return
+    }
+    this.fetchClusterStatusTimer = setTimeout(this.fetchClusterStatus, 10000);
   }
 
   handleSearchClick = ()=>{
@@ -185,43 +222,45 @@ class Index extends  React.Component {
     };
     const {data} = this.props.clusterConfig;
     return (
-      <Card>
+      <PageHeaderWrapper title="集群管理" content={content} extraContent={extraContent}>
-        <div style={{display:'flex', marginBottom:10, flex:"1 1 auto", justifyContent: 'space-between'}}>
+        <Card>
-            <div>
+          <div style={{display:'flex', marginBottom:10, flex:"1 1 auto", justifyContent: 'space-between'}}>
-              <Form>
+              <div>
-                <Row gutter={{md:24, sm:16}}>
+                <Form>
-                  <Col md={16} sm={20}>
+                  <Row gutter={{md:24, sm:16}}>
-                    <Form.Item {...formItemLayout} label="集群名称">
+                    <Col md={16} sm={20}>
-                      {getFieldDecorator('name')(<Input placeholder="please input cluster name" />)}
+                      <Form.Item {...formItemLayout} label="集群名称">
-                    </Form.Item>
+                        {getFieldDecorator('name')(<Input placeholder="please input cluster name" />)}
-                  </Col>
+                      </Form.Item>
-                  <Col md={8} sm={16}>
+                    </Col>
-                    <div style={{paddingTop:4}}>
+                    <Col md={8} sm={16}>
-                      <Button type="primary" icon="search" onClick={this.handleSearchClick}>
+                      <div style={{paddingTop:4}}>
-                        搜索
+                        <Button type="primary" icon="search" onClick={this.handleSearchClick}>
-                      </Button>
+                          搜索
-                    </div>
+                        </Button>
-                  </Col>
+                      </div>
-                </Row>
+                    </Col>
-              </Form>
+                  </Row>
+                </Form>
+              </div>
+              <div>
+                {/* <span style={{marginRight:24}}><Switch
+                  checkedChildren={<Icon type="check" />}
+                  unCheckedChildren={<Icon type="close" />}
+                  onChange={this.handleEnabledChange}
+                  defaultChecked
+                />是否启用</span> */}
+              <Link to='/system/cluster/regist' onClick={this.handleNewClick}> <Button type="primary" icon="plus">注册集群</Button></Link>
+              </div>
             </div>
-            <div>
+            <Table
-              <span style={{marginRight:24}}><Switch
+              bordered
-                checkedChildren={<Icon type="check" />}
+              columns={this.columns}
-                unCheckedChildren={<Icon type="close" />}
+              dataSource={data}
-                onChange={this.handleEnabledChange}
+              rowKey='id'
-                defaultChecked
+            />
-              />是否启用</span>
+        </Card>
-            <Link to='/system/cluster/regist' onClick={this.handleNewClick}> <Button type="primary" icon="plus">注册集群</Button></Link>
+      </PageHeaderWrapper>
-            </div>
-          </div>
-          <Table
-            bordered
-            columns={this.columns}
-            dataSource={data}
-            rowKey='id'
-          />
-      </Card>
     );
   }
 

web/src/pages/System/Cluster/Step.js

@@ -4,20 +4,19 @@ import { useState, useRef } from 'react';
 import {InitialStep, ExtraStep, ResultStep} from './steps';
 import PageHeaderWrapper from '@/components/PageHeaderWrapper';
 import styles from './step.less';
+import clusterBg from '@/assets/cluster_bg.png';
 
 const { Step } = Steps;
 
 const steps = [
   {
-    title: '初始化',
+    title: '连接',
   },
   {
-    title: '信息确认',
+    title: '确认',
-    content: 'Second-content',
   },
   {
     title: '完成',
-    content: 'Last-content',
   },
 ];
 
@@ -152,7 +151,7 @@ const ClusterStep = ({
       <p>
         输入集群地址和身份验证信息分步创建集群。
       </p>
-      <div className={styles.contentLink}>
+      {/* <div className={styles.contentLink}>
         <a>
           <img alt="" src="https://gw.alipayobjects.com/zos/rmsportal/MjEImQtenlyueSmVEfUD.svg" />{' '}
           快速开始
@@ -165,15 +164,15 @@ const ClusterStep = ({
           <img alt="" src="https://gw.alipayobjects.com/zos/rmsportal/ohOEPSYdDTNnyMbGuyLb.svg" />{' '}
           产品文档
         </a>
-      </div>
+      </div> */}
     </div>
   );
 
   const extraContent = (
     <div className={styles.extraImg}>
       <img
-        alt="这是一个标题"
+        alt="集群管理"
-        src="https://gw.alipayobjects.com/zos/rmsportal/RzwpdLnhmvDJToTdfDPe.png"
+        src={clusterBg}
       />
     </div>
   );

web/src/pages/System/Cluster/health_status.js

@@ -0,0 +1,3 @@
+export const HealthStatusCircle = ({status})=>{
+  return <div style={{background: status, height:14, width:14, borderRadius: 14, boxShadow: '0px 0px 5px #555'}}></div>
+}

web/src/pages/System/Cluster/models/cluster.js

@@ -21,7 +21,8 @@ export default {
         payload: {
           clusterStatus: res
         }
-      })
+      });
+      return res;
     },
     *fetchClusterList({payload}, {call, put, select}){
       let res = yield call(searchClusterConfig, payload);
@@ -31,9 +32,9 @@ export default {
       }
       res = formatESSearchResult(res)
       const {clusterStatus} = yield select(state => state.clusterConfig);
-      for(let item of res.data){
+      // for(let item of res.data){
-        item.status= clusterStatus[item.id]
+      //   item.status= clusterStatus[item.id]
-      }
+      // }
       yield put({
         type: 'saveData',
         payload: res

web/src/pages/System/Cluster/steps/extra_step.js

@@ -1,4 +1,5 @@
 import {Form, Input, Switch, Icon, InputNumber, Divider, Descriptions} from 'antd';
+import {HealthStatusCircle} from '../health_status';
 
 @Form.create()
 export class ExtraStep extends React.Component {
@@ -19,19 +20,28 @@ export class ExtraStep extends React.Component {
     return (
       <>
         <Descriptions column={2} size="small" bordered>
+          <Descriptions.Item label="集群地址" >
+              {initialValue?.host}
+          </Descriptions.Item>
+          <Descriptions.Item label="TLS" >
+            {initialValue?.isTLS ? <Icon type="lock" style={{color:  '#52c41a'}}/> : null}
+          </Descriptions.Item>
           <Descriptions.Item label="集群版本" >
               {initialValue?.version}
-            </Descriptions.Item>
-          <Descriptions.Item label="健康状态" >
-            {initialValue?.status}
           </Descriptions.Item>
-          <Descriptions.Item label="节点数" >
+          <Descriptions.Item label="身份验证" >
+            {initialValue?.username ? <Icon type="user"/>: null}
+          </Descriptions.Item>
+          <Descriptions.Item label="健康状态" >
+            <HealthStatusCircle status={initialValue?.status}/>
+          </Descriptions.Item>
+          <Descriptions.Item label="节点总数" >
             {initialValue?.number_of_nodes}
           </Descriptions.Item>     
           <Descriptions.Item label="数据节点数" >
             {initialValue?.number_of_data_nodes}
           </Descriptions.Item>
-          <Descriptions.Item label="分片数" >
+          <Descriptions.Item label="分片总数" >
             {initialValue?.active_shards}
           </Descriptions.Item>
         </Descriptions>