专业的编程技术博客社区

网站首页 > 博客文章 正文

一款全新、强大的 ElasticSearch 可视化工具

baijin 2025-04-06 13:31:55 博客文章 37 ℃ 0 评论

简介

elasticsearch的客户端比较出名的就是elasticsearch head和Kibana了,但是elasticsearch head已经停止更新,且样式老旧,功能不全。

而Kibana虽功能全面,但是启动麻烦,大部分功能用不上,很不灵活,所以采用vite2+vue3+ts+arco-design进行开发了一个elasticsearch的客户端 —— es-client。

特色/功能

  • 页面美观: 使用arco-design组件库,布局更加美观合理
  • 可视化查询: 可以轻松构建查询条件,无需了解_search语法即可查询
  • 索引管理: 快速查看索引信息,进行简单的索引操作
  • 数据导出: 支持多种格式(JSON,CSV,TXT...)数据导出
  • 深色模式: 可以自由切换浅色模式与深色模式
  • JSON视图: 通过Highlight.js实现JSON美化
  • 表格视图: 支持将查询的数据以表格形式展示
  • 支持认证: 可以通过Basic认证访问到elasticsearch
  • 复制按钮: 一键复制查询的结果
  • http客户端支持: 拥有和kibana一样的查询方式
  • 低分辨率适应: 布局合理,在低分辨率情况下也能正常展示

使用指南

基础准备

# 拉取代码
git clone https://gitee.com/qiaoshengda/es-client.git
# 前往项目目录
cd es-client
# 安装依赖
pnpm  install

Chrome/Edge插件

构建

插件构建是最简单的,只需要执行一个命令

# 构建edge
pnpm build:edge
# 或者构建chrome
pnpm build:chrome

虽然提供了两个命令,但其实只是环境变量有区别,最终的的插件都在src-edge这个目录中。

安装

  • 打开chrome/edge浏览器
  • 打开插件管理
  • 开启开发者模式
  • 点击加载解压缩的拓展
  • 选择插件目录中的src-edge这个文件夹

项目预览

首页

数据浏览

基础查询

高级查询

设置

开源地址

https://gitee.com/q2316367743/es-client

本文暂时没有评论,来添加一个吧(●'◡'●)

欢迎 发表评论:

最近发表
标签列表