Merge branch 'master' of ssh://git.infini.ltd:64221/infini/search-center

web/config/router.config.js

@@ -121,6 +121,10 @@ export default [
             path: '/data/import',
             name: 'export',
             component: './DataManagement/Import',
+          },{
+            path: '/data/doc',
+            name: 'query',
+            component: './DataManagement/Query',
           },
         ]
       },

web/src/components/PageHeaderWrapper/index.js

@@ -8,7 +8,7 @@ import styles from './index.less';
 import MenuContext from '@/layouts/MenuContext';
 
 const PageHeaderWrapper = ({ children, contentWidth, wrapperClassName, top, ...restProps }) => (
-  <div style={{ margin: '-24px -24px 0' }} className={wrapperClassName}>
+  <div style={{ margin: '-10px -10px 0' }} className={wrapperClassName}>
     {top}
     <MenuContext.Consumer>
       {value => (

web/src/components/PageHeaderWrapper/index.less

@@ -1,7 +1,7 @@
 @import '~antd/lib/style/themes/default.less';
 
 .content {
-  margin: 24px 24px 0;
+  margin: 10px 10px 0;
 }
 
 @media screen and (max-width: @screen-sm) {

web/src/layouts/BasicLayout.js

@@ -201,7 +201,7 @@ class BasicLayout extends React.PureComponent {
   getContentStyle = () => {
     const { fixedHeader } = this.props;
     return {
-      margin: '24px 24px 0',
+      margin: '10px 10px 0',
       paddingTop: fixedHeader ? 64 : 0,
     };
   };

web/src/locales/zh-CN.js

@@ -96,6 +96,7 @@ export default {
   'menu.data.snapshot': '快照管理',
   'menu.data.rebuild': '重建管理',
   'menu.data.export': '导入导出',
+  'menu.data.query': '文档管理',
 
   'menu.search': '搜索管理',
   'menu.search.template': '搜索模板',

web/src/pages/Dashboard/ClusterMonitor.js

@@ -258,7 +258,7 @@ class ClusterMonitor extends PureComponent {
           <Row gutter={24} style={{marginBottom:10}}>
             <Col xl={12} lg={24} md={24} sm={24} xs={24}>
               <Card>
-                <SliderChart title="节点内存使用占比(%)" xname="time" yname="heap_ratio"
+                <SliderChart title="内存使用占比(%)" xname="time" yname="heap_ratio"
                   generateFunc={generateHeapData}
                   unit="%"
                   scale={{

web/src/pages/DataManagement/Document.js

@@ -10,14 +10,50 @@ import {
   Modal,
   message,
   Divider,
+  Drawer,
+  Tabs,
+  Descriptions,
+  Menu,
+  Dropdown,
+  Icon
 } from 'antd';
 import StandardTable from '@/components/StandardTable';
 import PageHeaderWrapper from '@/components/PageHeaderWrapper';
 
 import styles from '../List/TableList.less';
+import JSONPretty from 'react-json-prettify';
 
 const FormItem = Form.Item;
 const { TextArea } = Input;
+const {TabPane} = Tabs;
+
+class JSONWrapper extends PureComponent {
+  state ={
+    height: 400,
+  }
+  componentDidMount(){
+    
+    let  getElementTop = (elem)=>{
+      　　var elemTop=elem.offsetTop;
+      　　elem=elem.offsetParent;
+      
+      　　while(elem!=null){ 
+      　　　　elemTop+=elem.offsetTop;
+      　　　　elem=elem.offsetParent;     
+      　　}
+      
+      　　return elemTop;
+      
+      }
+      console.log(getElementTop(this.refs.jsonw));
+    this.setState({height: window.innerHeight - getElementTop(this.refs.jsonw) -50});
+  }
+  render(){
+    return (
+    <div id="jsonw" ref="jsonw" onClick={()=>{console.log(document.getElementById('jsonw').offsetTop)}} style={{overflow:"scroll", height: this.state.height}}> {this.props.children}</div>
+    )
+  }
+}
 
 const CreateForm = Form.create()(props => {
   const { modalVisible, form, handleAdd, handleModalVisible } = props;
@@ -109,6 +145,8 @@ class Document extends PureComponent {
     selectedRows: [],
     formValues: {},
     updateFormValues: {},
+    drawerVisible: false,
+    editingIndex:{},
   };
   datasource = `[{"health":"green","status":"open","index":"blogs_fixed","uuid":"Q6zngGf9QVaWqpV0lF-0nw","pri":"1","rep":"1","docs.count":"1594","docs.deleted":"594","store.size":"17.9mb","pri.store.size":"8.9mb"},{"health":"red","status":"open","index":"elastic_qa","uuid":"_qkVlQ5LRoOKffV-nFj8Uw","pri":"1","rep":"1","docs.count":null,"docs.deleted":null,"store.size":null,"pri.store.size":null},{"health":"green","status":"open","index":".kibana-event-log-7.9.0-000001","uuid":"fgTtyl62Tc6F1ddJfPwqHA","pri":"1","rep":"1","docs.count":"20","docs.deleted":"0","store.size":"25kb","pri.store.size":"12.5kb"},{"health":"green","status":"open","index":"blogs","uuid":"Mb2n4wnNQSKqSToI_QO0Yg","pri":"1","rep":"1","docs.count":"1594","docs.deleted":"0","store.size":"11mb","pri.store.size":"5.5mb"},{"health":"green","status":"open","index":".kibana-event-log-7.9.0-000002","uuid":"8GpbwnDXR2KJUsw6srLnWw","pri":"1","rep":"1","docs.count":"9","docs.deleted":"0","store.size":"96.9kb","pri.store.size":"48.4kb"},{"health":"green","status":"open","index":".apm-agent-configuration","uuid":"vIaV9k2VS-W48oUOe2xNWA","pri":"1","rep":"1","docs.count":"0","docs.deleted":"0","store.size":"416b","pri.store.size":"208b"},{"health":"green","status":"open","index":"logs_server1","uuid":"u56jv2AyR2KOkruOfxIAnA","pri":"1","rep":"1","docs.count":"5386","docs.deleted":"0","store.size":"5.1mb","pri.store.size":"2.5mb"},{"health":"green","status":"open","index":".kibana_1","uuid":"dBCrfVblRPGVlYAIlP_Duw","pri":"1","rep":"1","docs.count":"3187","docs.deleted":"50","store.size":"24.8mb","pri.store.size":"12.4mb"},{"health":"green","status":"open","index":".tasks","uuid":"3RafayGeSNiqglO2BHof9Q","pri":"1","rep":"1","docs.count":"3","docs.deleted":"0","store.size":"39.9kb","pri.store.size":"19.9kb"},{"health":"green","status":"open","index":"filebeat-7.9.0-elastic_qa","uuid":"tktSYU14S3CrsrJb0ybpSQ","pri":"1","rep":"1","docs.count":"3009880","docs.deleted":"0","store.size":"1.6gb","pri.store.size":"850.1mb"},{"health":"green","status":"open","index":"analysis_test","uuid":"6ZHEAW1ST_qfg7mo4Bva4w","pri":"1","rep":"1","docs.count":"0","docs.deleted":"0","store.size":"416b","pri.store.size":"208b"},{"health":"green","status":"open","index":".apm-custom-link","uuid":"Y4N2TeVERrGacEGwY-NPAQ","pri":"1","rep":"1","docs.count":"0","docs.deleted":"0","store.size":"416b","pri.store.size":"208b"},{"health":"green","status":"open","index":"kibana_sample_data_ecommerce","uuid":"4FIWJKhGSr6bE72R0xEQyA","pri":"1","rep":"1","docs.count":"4675","docs.deleted":"0","store.size":"9.2mb","pri.store.size":"4.6mb"},{"health":"green","status":"open","index":".kibana_task_manager_1","uuid":"9afyndU_Q26oqOiEIoqRJw","pri":"1","rep":"1","docs.count":"6","docs.deleted":"2","store.size":"378.8kb","pri.store.size":"12.5kb"},{"health":"green","status":"open","index":".async-search","uuid":"2VbJgnN7SsqC-DWN64yXUQ","pri":"1","rep":"1","docs.count":"0","docs.deleted":"0","store.size":"3.9kb","pri.store.size":"3.7kb"}]`;
 
@@ -116,6 +154,14 @@ class Document extends PureComponent {
     {
       title: '索引名称',
       dataIndex: 'index',
+      render: (text, record) => (
+      <a onClick={()=>{
+        this.setState({
+          editingIndex: record,
+          drawerVisible: true,
+        });
+      }}>{text}</a>
+      )
     },
     {
       title: '文档数',
@@ -137,8 +183,8 @@ class Document extends PureComponent {
       title: '操作',
       render: (text, record) => (
         <Fragment>
-          <a onClick={() => this.handleUpdateModalVisible(true, record)}>设置</a>
+          {/* <a onClick={() => this.handleUpdateModalVisible(true, record)}>设置</a>
-          <Divider type="vertical" />
+          <Divider type="vertical" /> */}
           <a onClick={() => {
             this.state.selectedRows.push(record);
             this.handleDeleteClick();
@@ -147,7 +193,7 @@ class Document extends PureComponent {
           <a onClick={() => {
             this.state.selectedRows.push(record);
             this.handleDeleteClick();
-          }}>新增文档</a>
+          }}>文档管理</a>
         </Fragment>
       ),
     },
@@ -327,7 +373,7 @@ class Document extends PureComponent {
         pageSize: 5,
       },
     };
-    const { selectedRows, modalVisible, updateModalVisible, updateFormValues } = this.state;
+    const { selectedRows, modalVisible, updateModalVisible, updateFormValues,editingIndex, drawerVisible } = this.state;
     const parentMethods = {
       handleAdd: this.handleAdd,
       handleModalVisible: this.handleModalVisible,
@@ -336,6 +382,7 @@ class Document extends PureComponent {
       handleUpdateModalVisible: this.handleUpdateModalVisible,
       handleUpdate: this.handleUpdate,
     };
+    
     return (
       <Fragment>
         <Card bordered={false}>
@@ -368,6 +415,193 @@ class Document extends PureComponent {
             values={updateFormValues}
           />
         ) : null}
+        <Drawer title={editingIndex.index}
+          visible={drawerVisible}
+          onClose={()=>{
+            this.setState({
+              drawerVisible: false,
+            });
+          }}
+          width={640}
+        >
+           <Tabs defaultActiveKey="1" onChange={()=>{}}>
+            <TabPane tab="Summary" key="1">
+            <Descriptions title="General" column={2}>
+              <Descriptions.Item label="Health">green</Descriptions.Item>
+              <Descriptions.Item label="Status">open</Descriptions.Item>
+              <Descriptions.Item label="Primaries">1</Descriptions.Item>
+              <Descriptions.Item label="Replicas">0</Descriptions.Item>
+              <Descriptions.Item label="Docs Count">5</Descriptions.Item>
+              <Descriptions.Item label="Docs Deleted">0</Descriptions.Item>
+              <Descriptions.Item label="Storage Size">115.3kb</Descriptions.Item>
+              <Descriptions.Item label="Primary Storage Size"></Descriptions.Item>
+              <Descriptions.Item label="Alias">
+              </Descriptions.Item>
+            </Descriptions>
+            </TabPane>
+            <TabPane tab="Mappings" key="2">
+              <JSONWrapper>
+              <JSONPretty json={JSON.parse(`{
+  "mappings": {
+    "_doc": {
+      "dynamic": "strict",
+      "_meta": {
+        "migrationMappingPropertyHashes": {
+          "migrationVersion": "4a1746014a75ade3a714e1db5763276f",
+          "originId": "2f4316de49999235636386fe51dc06c1",
+          "task": "235412e52d09e7165fac8a67a43ad6b4",
+          "updated_at": "00da57df13e94e9d98437d13ace4bfe0",
+          "references": "7997cf5a56cc02bdc9c93361bde732b0",
+          "namespace": "2f4316de49999235636386fe51dc06c1",
+          "type": "2f4316de49999235636386fe51dc06c1",
+          "namespaces": "2f4316de49999235636386fe51dc06c1"
+        }
+      },
+      "properties": {
+        "migrationVersion": {
+          "dynamic": "true",
+          "properties": {
+            "task": {
+              "type": "text",
+              "fields": {
+                "keyword": {
+                  "type": "keyword",
+                  "ignore_above": 256
+                }
+              }
+            }
+          }
+        },
+        "namespace": {
+          "type": "keyword"
+        },
+        "namespaces": {
+          "type": "keyword"
+        },
+        "originId": {
+          "type": "keyword"
+        },
+        "references": {
+          "type": "nested",
+          "properties": {
+            "id": {
+              "type": "keyword"
+            },
+            "name": {
+              "type": "keyword"
+            },
+            "type": {
+              "type": "keyword"
+            }
+          }
+        },
+        "task": {
+          "properties": {
+            "attempts": {
+              "type": "integer"
+            },
+            "ownerId": {
+              "type": "keyword"
+            },
+            "params": {
+              "type": "text"
+            },
+            "retryAt": {
+              "type": "date"
+            },
+            "runAt": {
+              "type": "date"
+            },
+            "schedule": {
+              "properties": {
+                "interval": {
+                  "type": "keyword"
+                }
+              }
+            },
+            "scheduledAt": {
+              "type": "date"
+            },
+            "scope": {
+              "type": "keyword"
+            },
+            "startedAt": {
+              "type": "date"
+            },
+            "state": {
+              "type": "text"
+            },
+            "status": {
+              "type": "keyword"
+            },
+            "taskType": {
+              "type": "keyword"
+            },
+            "user": {
+              "type": "keyword"
+            }
+          }
+        },
+        "type": {
+          "type": "keyword"
+        },
+        "updated_at": {
+          "type": "date"
+        }
+      }
+    }
+  }
+}
+
+`)} theme={{
+  background: '#F5F7FA',
+  brace: '#343741',
+  keyQuotes: '#343741',
+  valueQuotes: '#343741',
+  colon: '#343741',
+  comma: '#343741',
+  key: '#343741',
+  value: {
+      string: '#343741',
+      null: '#343741',
+      number: '#343741',
+      boolean: '#343741',
+  },
+  bracket: '#343741',
+}} /></JSONWrapper>
+            </TabPane>
+            <TabPane tab="Stats" key="3">
+              Content of Tab Pane 3
+            </TabPane>
+            <TabPane tab="Edit settings" key="4">
+              Content of Tab Pane 3
+            </TabPane>
+          </Tabs>
+          <div style={{position:'absolute', bottom: 10}}>
+          <Dropdown 
+            placement="topLeft"
+            overlay={(
+            <Menu onClick={()=>{}}>
+              <Menu.Item key="1">
+                <Icon type="delete" />
+                Delete
+              </Menu.Item>
+              <Menu.Item key="2">
+                <Icon type="edit" />
+                Edit
+              </Menu.Item>
+              <Menu.Item key="3">
+                <Icon type="close" />
+                Close
+              </Menu.Item>
+            </Menu>
+          )}>
+            <Button type="primary">
+              Manage <Icon type="up" />
+            </Button>
+          </Dropdown>
+          </div>
+        </Drawer>
       </Fragment>
     );
   }

web/src/pages/DataManagement/Query.js

@@ -0,0 +1,141 @@
+import React, { Component } from 'react';
+import { connect } from 'dva';
+import PageHeaderWrapper from '@/components/PageHeaderWrapper';
+import { Col, Form, Row,Select, Input, Card,Icon,List, Descriptions } from 'antd';
+
+const {Option} = Select;
+
+@Form.create()
+class Query extends React.Component {
+    state={
+        bodyDisplay: 'none',
+        data: [{
+            index: 'blogs-001',
+            id: 'dpOsA3YBCjFOm54VZoNF',
+            source: `{
+                "title" : "elastic search test title",
+                "content": "如默认结构不满足需求，可以自定义该模板，但是自定义模板时必须包含各个 dom 节点的 class，样式可以自定义。",
+                "created_at" : "2020-11-23"
+              }`
+          },
+          {
+            index: 'blogs-002',
+            id: "dpOsA3YBCjFOm54VZoNB",
+            source: `{
+                "title" : "elastic search test title",
+                "created_at" : "2020-11-23",
+                "content": "如默认结构不满足需求，可以自定义该模板，但是自定义模板时必须包含各个 dom 节点的 class，样式可以自定义。"
+              }`
+          },
+          {
+            index: 'blogs-002',
+            id: "dpOsA3YBCjFOm54VZoNC",
+            source: `{
+                "title" : "elastic search test title",
+                "created_at" : "2020-11-23",
+                "content":"如默认结构不满足需求，可以自定义该模板，但是自定义模板时必须包含各个 dom 节点的 class，样式可以自定义。"
+              }`
+          },
+          {
+            index: 'blogs-001',
+            id:"dpOsA3YBCjFOm54VZoNG",
+            source: `{
+                "title" : "elastic search test title",
+                "content":"如默认结构不满足需求，可以自定义该模板，但是自定义模板时必须包含各个 dom 节点的 class，样式可以自定义。",
+                "created_at" : "2020-11-23"
+              }`
+          }, {
+            index: 'blogs-001',
+            id:"dpOsA3YBCjFOm54VZoNG",
+            source: `{
+                "title" : "elastic search test title",
+                "content":"如默认结构不满足需求，可以自定义该模板，但是自定义模板时必须包含各个 dom 节点的 class，样式可以自定义。",
+                "created_at" : "2020-11-23"
+              }`
+          }]
+    }
+   
+    render(){
+        // const {getFieldDecorator} = this.props.form;
+        return (
+            <div>
+                <Card>
+                    <Row gutter={[16, { xs: 8, sm: 16, md: 24, lg: 32 }]}>
+                        <Col span={20}>
+                        <Input.Group compact>
+                            <Select
+                                defaultValue="GET"
+                                style={{ width: 80 }}
+                                >
+                                <Option value="GET">GET</Option>
+                                <Option value="POST">POST</Option>
+                                <Option value="PUT">PUT</Option>
+                            </Select>
+                            <Input.Search
+                                style={{width:"80%"}}
+                                placeholder="input query url"
+                                enterButton="execute"     
+                                onSearch={value => console.log(value)}
+                            />
+                        </Input.Group>
+                        </Col>
+                        <Col span={4}>
+                            <a style={{marginTop:5,display:'block'}} onClick={(e)=>{
+                                this.setState((preState)=>{
+                                    if(preState.bodyDisplay == 'none') {
+                                        return {
+                                            bodyDisplay: 'block',
+                                        };
+                                    }else{
+                                        return {
+                                            bodyDisplay: 'none'
+                                        };
+                                    }
+                                });
+                            }}>{this.state.bodyDisplay == 'none' ? '展开':'收起'}<Icon type="down" /></a>
+                        </Col>
+                    </Row>
+                    <Row style={{display: this.state.bodyDisplay}} gutter={[16, { xs: 8, sm: 16, md: 24, lg: 32 }]}>
+                        <Col span={20}>
+                            <Input.TextArea placeholder="query body" rows={8}/>
+                        </Col>
+                    </Row>
+
+                    <List
+                        grid={{ gutter: 16, column: 2}}
+                        dataSource={this.state.data}
+                        pagination={{
+                            onChange: page => {
+                              console.log(page);
+                            },
+                            pageSize: 4,
+                            total: 50
+                        }}
+                        renderItem={item => (
+                        <List.Item>
+                            <Card title={`${item.index} ${item.id}`}
+                            extra={<a onClick={()=>{}}>More</a>}
+                             actions={[
+                                <Icon type="edit" key="edit" onClick={(e)=>{}} />,
+                                <Icon type="delete" key="delete" />,
+                              ]}>
+                                <Descriptions bordered column={1}>
+                                    {/* <Descriptions.Item label="ID">
+                                        {item.id}
+                                    </Descriptions.Item> */}
+                                    <Descriptions.Item label="Source">
+                                        {item.source}
+                                    </Descriptions.Item>
+                                </Descriptions>
+                            </Card>
+                        </List.Item>
+                        )}
+                    />
+                </Card>
+            </div>
+        )
+    }
+    
+}
+
+export default Query;

web/src/pages/DataManagement/Rebuild.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import { connect } from 'dva';
 import PageHeaderWrapper from '@/components/PageHeaderWrapper';
-import {Steps, Card, Form, Select, Input,Button, Divider,message,Spin} from 'antd';
+import {Steps, Card, Form, Select, Input,Button, Divider,message,Spin, Row, Col,Result} from 'antd';
 
 const {Step} = Steps;
 const {Option} = Select;
@@ -128,6 +128,19 @@ class Rebuild extends Component {
               </div>
             </div>
           )
+          break;
+        case 3:
+          stepDom = (<Result
+            status="success"
+            title="数据重建成功"
+            subTitle=""
+            extra={[
+              // <Button type="primary" key="console">
+              // </Button>,
+              <Button key="continue">继续重建</Button>,
+            ]}
+          />)
+          break;
     }
     return stepDom;
   }
@@ -206,10 +219,10 @@ class Rebuild extends Component {
       <PageHeaderWrapper >
         <Card>
           <Steps current={this.state.currentStep}>
-            <Step title="源索引信息" description="This is a description." />
+            <Step title="源索引信息"  /> 
-            <Step title="目标索引信息" description="This is a description." />
+            <Step title="目标索引信息" />
-            <Step title="数据重建中" subTitle="Left 00:00:08" description="This is a description." />
+            <Step title="数据重建中" subTitle="剩余 00:00:08"  />
-            <Step title="重建结果" description="This is a description." />
+            <Step title="重建结果" />
           </Steps>
           <Divider/>
           {this.renderSteps(this.state.currentStep)}

web/src/pages/DataManagement/backup/BakAndRestore.js

@@ -89,11 +89,18 @@ class BakAndRestore extends Component {
       }
     };
     return (
+      <div>
+         <div style={{marginBottom: 10}}>
+            <Button icon="plus" type="primary" onClick={() => {}}>
+              新建
+            </Button>
+        </div>
         <StandardTable
           selectedRows={[]}
           data={data}
           columns={this.repoColumns}
         /> 
+      </div>
     );
   };
 
@@ -164,11 +171,18 @@ class BakAndRestore extends Component {
       }
     };
     return (
+      <div>
+         <div style={{marginBottom: 10}}>
+            <Button icon="plus" type="primary" onClick={() => {}}>
+              新建
+            </Button>
+        </div>
         <StandardTable
           selectedRows={[]}
           data={data}
           columns={this.snapshotColumns}
         /> 
+      </div>
     );
   };
 
@@ -222,11 +236,22 @@ class BakAndRestore extends Component {
               visible={this.state.snapshotVisible}
             >
               <div>
-                <Descriptions>
+                <Descriptions bordered>
-                  <Descriptions.Item label="快照名称">Zhou Maomao</Descriptions.Item>
+                  <Descriptions.Item label="快照名称" span={2}>cluster_snapshot_1</Descriptions.Item>
-                  <Descriptions.Item label="仓库">1810000000</Descriptions.Item>
+                  <Descriptions.Item label="时长">2s</Descriptions.Item>
+                  <Descriptions.Item label="仓库" span={3}>
+                    <Select value="my_local_repo" style={{width:200}}>
+                      <Select.Option value="my_local_repo">my_local_repo</Select.Option>
+                      <Select.Option value="remote_aws_repo">remote_aws_repo</Select.Option>
+                    </Select>
+                  </Descriptions.Item>
+                  <Descriptions.Item  span={3} label="创建时间">2020-10-09 20:30:23</Descriptions.Item>
                 </Descriptions>
-                <Button type="primary" className={styles.btnRestore}>恢复</Button>
+                <div className={styles.drawerFooter}>
+                  <Button className={styles.btnRestore} type="primary" >恢复</Button>
+                  <Button type="primary">保存</Button>
+                </div>
+                
               </div>
             </Drawer>
         </Fragment>

web/src/pages/DataManagement/backup/BakAndRestore.less

@@ -6,7 +6,10 @@
       }
     }
 }
-.btnRestore{
+.drawerFooter{
   position:absolute;
   bottom: 20px;
+  .btnRestore{
+    margin-right: 10px;
+  }
 }