redisManage.js

import React,{Component} from 'react';
import './style.less';
import WhiteBar from '../../components/Common/WhiteBar';
import {Icon, Input, Form, Button, Row, Col, Message, List, Modal } from 'antd';
import { API_SYS_MONITOR } from '@src/Api';
import axios from '@src/axios/index';
import storage from '@src/utils/localStorage'

const FormItem = Form.Item;
const TextArea = Input.TextArea


class RedisManage extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      allKeyData: [],
      allKeyLoad: false,
      keyValueData: [],
      keyValueLoad: false,
      mapValueData:{},
      allKey: '',
      valueKey: '',
      expire: '',
      btnAuth: []
    }
  }
  
  componentWillMount() {
    const btnAuth = storage.get('btnAuth')
    this.setState({btnAuth})
  }
  componentDidMount() {
    this.getAllKey()
  }

  getAllKey () {
    this.setState({allKeyLoad: true,keyValueData: [], mapValueData: {}, allKey: '', valueKey: ''})
    this.props.form.resetFields()
    axios.ajax({
      url: API_SYS_MONITOR.getAllKey,
     }).then(res => {  

      var _allKeyData = null;
      if(res && res.length > 0 ) {
      _allKeyData = res
      } else {
      _allKeyData = []
      }

      this.setState({
        allKeyData: _allKeyData,
        keyValueData: [],
        mapValueData: {},
        allKeyLoad: false,
      })
    })
  }
  getValueByKey = (item)=>{
    if(!item){
      Message.error('请选择缓存名称')
      return
    }

    this.setState({keyValueLoad: true, keyValueData: [], mapValueData: {}, valueKey: ''})
    this.props.form.resetFields()

    axios.ajax({
      url: API_SYS_MONITOR.getValueByKey,
      data: {key: item},
     }).then(res => {  
      const expire= res.expire === -1 ? '永久': res.expire;   
      var _keyValueData= [], _mapValueData =[];

      if( res && res.type === 'hash' && res.data.length > 0 ) { 
        _keyValueData =  res.data
        _mapValueData = {}
      }else if (res  && res.data) { 
        _keyValueData =  []
        _mapValueData = {
          reMark: res.data, 
          name: item, 
          key: item, 
          expire: expire
        }
      } else {
        _keyValueData= []
        _mapValueData = {}
      }
      this.setState({
        keyValueData: _keyValueData,
        mapValueData:_mapValueData,
        keyValueLoad: false,
        expire: expire,
        allKey: item
      }, ()=> {
        if ( res && res.type !== 'hash') {
          this.props.form.setFieldsValue(this.state.mapValueData)
        }
       
      })


     })
  }

  getMapByValue = (item) => {
    
    if(!item && !this.state.valueKey){
      Message.error('请选择缓存名称')
      return
    }
    this.props.form.resetFields()

    axios.ajax({
      url: API_SYS_MONITOR.getMapValueByKey,
      data: {key: this.state.allKey, mkey: item},
     }).then(res => {  
      if( res) {       
        this.setState({
          mapValueData:{
            reMark: res, 
            name:this.state.allKey, 
            key:item, 
            expire: this.state.expire
          },
          valueKey: item
        },() => {
          this.props.form.setFieldsValue(this.state.mapValueData)
        })
      }else {
        this.setState({
          mapValueData:{},
          valueKey: item
        })
      }
     })
  }

  deleteKey = (item, optName)=> {
    Modal.confirm({
      title: '删除',
      content: `您要删除 : ${item} ？`,
      okText:"确认",
      cancelText:"取消",
      onOk: () => {
        axios.ajax({
          url: API_SYS_MONITOR.removeByKey,
          data:{
            key: optName==='key' ? this.state.allKey : item, 
            mkey: optName==='key' ? item : ''
          }
         }).then(res => {          
            Message.success('操作成功')
            optName ==='key' ? this.getValueByKey(this.state.allKey) : this.getAllKey()
        })
      }
    })

    
  }

  deleteAllRedis = ()=>{
    Modal.confirm({
      title: '清除全部缓存',
      content: `您要清除全部缓存？`,
      okText:"确认",
      cancelText:"取消",
      onOk: () => {
        axios.ajax({
          url: API_SYS_MONITOR.removeAllKey
         }).then(res => { 
          Message.success('操作成功')
          window.location.href = '#/login'
        })
      }
    })

    
  }
 
  render () {  
    const { getFieldDecorator } = this.props.form;
    return (
      <div className="redisBg">
        <WhiteBar title="缓存监控" />
        <div className="redisContent">
          <Row gutter={24}>
            <Col span="8">
              <div className = "redisList">
                <div className="rdsListTitle titleBgBlue">
                  <span>
                    <i className= "iconfont icon-huancunliebiao"></i>
                    &nbsp;缓存列表
                  </span>
                  <span>
                  <Icon type="reload" theme="outlined" onClick={()=>this.getAllKey()}/>
                  </span>
                </div>
                <div className="rdsListContent">
                  <List
                    className="listLi"
                    size="small"
                    header={
                    <div className="listStrong">
                        <span className="spanOne"></span>                       
                        <span className="spanTwo">缓存名称</span>
                        <span className="spanThree">操作</span>
                    </div>
                    }     
                    loading= {this.state.allKeyLoad}             
                    dataSource={this.state.allKeyData}
                    renderItem={(item,index) => (
                      <List.Item>
                        <span className="spanOne">{index + 1}</span>
                        <span className="spanTwo" onClick = {() => this.getValueByKey(item)}>{item}</span>
                        <span className="spanThree" >
                          {
                            this.state.btnAuth.indexOf('redis-hash-delete') !== -1 ?
                              <Icon type="delete" theme="outlined" onClick = {() => this.deleteKey(item, 'name')}/>
                              : ''
                          }    
                        </span>

                        
                      </List.Item>)
                    }
                  />
                </div>
              </div>
            </Col>
            <Col span="8">
              <div className = "redisList">
                <div className="rdsListTitle titleBgGreen">
                  <span>
                  <i className= "iconfont icon-jianmingliebiao"></i>
                    &nbsp;键名列表
                  </span>
                  <span>
                    <Icon type="reload" theme="outlined" onClick= {()=> this.getValueByKey(this.state.allKey)}/>
                  </span>
                </div>
                <div className="rdsListContent">
                  <List
                    className="listLi"
                    size="small"
                    header={
                    <div className="listStrong">
                        <span className="spanOne"></span>                       
                        <span className="spanTwo">键名</span>
                        <span className="spanThree">操作</span>
                    </div>
                    }     
                    loading= {this.state.keyValueLoad}             
                    dataSource={this.state.keyValueData}
                    renderItem={(item,index) => (
                      <List.Item>
                        <span className="spanOne">{index + 1}</span>
                        <span className="spanTwo" onClick = {() => this.getMapByValue(item)}>{item}</span>
                        <span className="spanThree">
                          {
                            this.state.btnAuth.indexOf('redis-key-delete') !== -1 ?                          
                              <Icon type="delete" theme="outlined" onClick = {() => this.deleteKey(item, 'key')}/>
                            : ''
                          }               
                        </span>
                      </List.Item>)
                    }
                  />
                </div>
              </div>
            </Col>
            <Col span="8">
              <div className = "redisList">
                <div className="rdsListTitle titleBgOrg">
                  <span>
                  <i className= "iconfont icon-huancunneirong"></i>
                    &nbsp;缓存列表
                  </span>
                  <span>
                  {
                    this.state.btnAuth.indexOf('redis-all-delete') !== -1 ? 
                    <Button className="tranBtn" onClick= {()=> this.deleteAllRedis()}>
                      <Icon type="delete" theme="outlined" />
                      清除全部缓存
                    </Button>  : ''
                  }    
                                      
                  </span>
                </div>
                <div className="rdsListContent" style={{padding:'14px'}}>
                  <Form layout='vertical'  ref="listForm">                  
                    <FormItem label="缓存名称">
                      {
                        getFieldDecorator('name', {
                        })(
                          <Input placeholder="缓存名称"/>
                        )
                      }
                    </FormItem>  
                    <FormItem label="缓存键名">
                      {
                        getFieldDecorator('key', {
                        })(
                          <Input placeholder="缓存键名"/>
                        )
                      }
                    </FormItem>  
                    <FormItem label="缓存剩余生存时间(秒)">
                      {
                        getFieldDecorator('expire', {
                        })(
                          <Input placeholder="缓存剩余生存时间(秒)"/>
                        )
                      }
                    </FormItem> 
                    <FormItem label="缓存内容">
                      {
                        getFieldDecorator('reMark', {
                        })(
                          <TextArea placeholder="缓存内容" rows={8} columns={10} />
                        )
                      }
                    </FormItem>                   
                    
                  </Form>
                </div>
              </div>
            </Col>
          </Row>
        </div>
      </div>
    )
  }
}

export default Form.create()(RedisManage);