如何做一个zookeeper可视化项目

如何做一个zookeeper可视化项目

author: huifer

gir_repo: https://github.com/huifer/zk-...

技术选型

• 后端技术

  • spring boot
  • curator-framework

• 前端技术

  • vue
  • element-ui

选型说明:

• spring boot 快速搭建 rest-api
• curator-framework 与zookeeper 进行交互的jar
• vue element-ui 前端展示

实现

• curator-framework 的使用具体查看: CSDN
• zookeeper 的数据存储是树结构存储, 因此选择 element-ui 的树形控件比较合理. element-ui-tree

创建树结构

• 选好了数据格式接下来就是处理出这份数据了. 创建出这个树结构
• 定义树结构的 java 对象

  @Data
  @AllArgsConstructor
  public static class Hc {

    private String path;
    private String showName;
    private List child;

  }

• 造树的方法

   private static List child(List strings, String path) {
     List hc = new ArrayList<>();
 
     for (String string : strings) {
       if (path.equals("/")) {
         hc.add(new Hc(path + string, string, null));
       } else {
 
         Hc hc1 = new Hc(path + "/" + string, string, null);
         hc.add(hc1);
       }
     }
     return hc;
   }
  public static void calcTree(CuratorFramework curatorFramework, String path, Hc c) throws Exception {
    List strings = curatorFramework.getChildren().forPath(path);
    c.setPath(path);
    c.setChild(child(strings, path));

    for (Hc hc : c.getChild()) {
      calcTree(curatorFramework, hc.getPath(), hc);
    }

  }


  public Hc tree() throws Exception {

    CuratorFramework build = CuratorFrameworkFactory.builder().connectString(ZkConfig.getIP_PORT())
        .sessionTimeoutMs(30000)
        .retryPolicy(new ExponentialBackoffRetry(1000, 10)).build();
    build.start();
    Hc hc = new Hc(null, "/", null);
    calcTree(build, "/", hc);
    build.close();
    return hc;
  }

• 通过这样的方式我们就可以获取这个树结构了.

{"path":"/","showName":"/","child":[{"path":"/a","showName":"a","child":[{"path":"/a/a_1","showName":"a_1","child":[{"path":"/a/a_1/a_1_1","showName":"a_1_1","child":[]}]},{"path":"/a/a_2","showName":"a_2","child":[]}]},{"path":"/temp","showName":"temp","child":[]},{"path":"/zookeeper","showName":"zookeeper","child":[{"path":"/zookeeper/config","showName":"config","child":[]},{"path":"/zookeeper/quota","showName":"quota","child":[]}]},{"path":"/d","showName":"d","child":[]}]}

单个节点的信息

• 节点信息再次作者定义三个信息

  1. stat: 状态
  2. data: 数据

  3. type: 节点类型

     1. 持久化节点
     2. 临时节点

@Data
@AllArgsConstructor
@NoArgsConstructor
public class NodeInfo {

  private Stat stat;
  private String data;

  /**
   * 持久化节点,临时节点
   */
  private String type;

}

• 获取信息的方法

  public Object info(String path) throws Exception {
    CuratorFramework build = CuratorFrameworkFactory.builder().connectString(ZkConfig.getIP_PORT())
        .sessionTimeoutMs(30000)
        .retryPolicy(new ExponentialBackoffRetry(1000, 10)).build();
    build.start();
    // 数据
    Stat stat = new Stat();
    byte[] bytes = build.getData().storingStatIn(stat).forPath(path);

    String data;
    if (bytes != null && bytes.length > 0) {

      data = new String(bytes);
    } else {
      data = "";
    }
    build.close();
    return new NodeInfo(stat, data, nodeType(stat));
  }

• controller 就不在此进行贴代码了有兴趣的可以查看zk-view

前端展示

• 前端不是很熟练,就直接贴一贴代码就过了. 后续各位如果需要做创建节点的操作可以自行开发.

  
  
  
  
  
  
  
  
  
  



  
    
  

  

    
      
状态
      {{message}}
      
      
数据

      
      

      节点类型: {{node_type}}