Skip to content

Commit

Permalink
完善文档和功能 (#17)
Browse files Browse the repository at this point in the history
修改README.md, 美化显示界面以及完善文档

Signed-off-by: 25hours886 <[email protected]>
  • Loading branch information
25hours886 authored Oct 30, 2023
1 parent 530e106 commit b9d8a41
Show file tree
Hide file tree
Showing 36 changed files with 1,679 additions and 3,228 deletions.
2 changes: 1 addition & 1 deletion .env.production
Original file line number Diff line number Diff line change
Expand Up @@ -8,4 +8,4 @@ VITE_BASE_API = 'https://www.fastmock.site/mock/761e2dda2b8890ab86c928a74e8f6538
VITE_ROUTER_HISTORY = 'hash'

## 打包路径(就是网站前缀,例如部署到 https://un-pany.github.io/v3-admin-vite/ 域名下,就需要填写 /v3-admin-vite/)
VITE_PUBLIC_PATH = '/openGemini/'
VITE_PUBLIC_PATH = '/openGemini-CM/'
2 changes: 1 addition & 1 deletion .env.staging
Original file line number Diff line number Diff line change
Expand Up @@ -8,4 +8,4 @@ VITE_BASE_API = 'https://www.fastmock.site/mock/761e2dda2b8890ab86c928a74e8f6538
VITE_ROUTER_HISTORY = 'hash'

## 打包路径(就是网站前缀,例如部署到 https://un-pany.github.io/v3-admin-vite/ 域名下,就需要填写 /v3-admin-vite/)
VITE_PUBLIC_PATH = '/openGemini/'
VITE_PUBLIC_PATH = '/openGemini-CM/'
1 change: 0 additions & 1 deletion .vscode/extensions.json
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@
"esbenp.prettier-vscode",
"vue.vscode-typescript-vue-plugin",
"vue.volar",
"antfu.unocss",
"zixuanchen.vitest-explorer",
"wiensss.region-highlighter"
]
Expand Down
168 changes: 166 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,2 +1,166 @@
# openGemini-CM
openGemini Cluster Management Tool
<div align="center">
<img alt="openGemini-CM Logo" width="120" height="120" src="./src/assets/layouts/logo.png">
<h1>OpenGemini Cluster Management Tool</h1>
<span>English | <a href="./README.zh-CN.md">中文</a></span>
</div>

# Introduction
This project adopts the open-source mid to backend management system basic solution V3 Admin Vite, and implements the development of cluster management tools for openGemini in the form of WEB. The specific functions include displaying basic cluster information, monitoring cluster resources, generating configuration files, displaying logs, and executing commands.

# Deployment Architecture

![openGemini架构图](https://github.com/25hours886/image/blob/main/openGemini-image/openGemini%E6%9E%B6%E6%9E%84.png)

The cluster management tool is deployed on the management node, which also deploys a standalone OpenGemini temporal database to store various monitoring indicators of the OpenGemini business cluster, such as node resource monitoring indicators (CPU, memory, disk I/O), error logs, etc. The above indicator data is collected and written into the database of the management node through the TS monitor tool. The monitoring tool queries basic cluster operation status information from it, retrieves error logs in the database through keywords, and echoes them.

# Development environment

## Environmental Information
1. [VSCode](https://code.visualstudio.com/Download) version v1.77+
2. [Node.js](https://nodejs.org/en/download) version v16.14+
3. pnpm version v8.7.4
```
npm install [email protected]
```

## Installation dependencies
Install dependencies such as element plus (icon component library), axios (making HTTP requests), cors (handling cross domain requests), echarts (providing visual icons), and express (building web servers and APIs) required for the project.

### Component Dependency
1. Clone project
```
git clone https://github.com/openGemini/openGemini-CM.git
```
2. Enter the project directory
```
cd openGemini-CM
```
3. Execute installation dependent command statements
```
pnpm i
```

### Install plugins (optional)
Open the project main directory using VSCode, and VSCode will automatically pop up a window asking if to install the recommended extensions for this warehouse project. Click Install to proceed.
The plugin path is. vscode/extensions. json, including ESLint, Prettier, Volar, and more.

At this point, the development environment configuration has been completed and secondary development can proceed

# Operating Environment
The running environment takes Linux as an example:
1. Install Node.js version 16.14.0
```
curl -o node-v16.14.0-linux-x64.tar.xz https://nodejs.org/dist/v16.14.0/node-v16.14.0-linux-x64.tar.xz
```
2. After the download is complete, extract the downloaded archive
```
tar -xvf node-v16.14.0-linux-x64.tar.xz
```
3. Move the extracted Node.js directory to the /usr/local directory
```
sudo mv node-v16.14.0-linux-x64 /usr/local/nodejs
```
4. Configure environment variables. Execute the following command to edit the ~/.bashrc file
```
nano ~/.bashrc
```
Then, add the following lines to the end of the file
```
export PATH="/usr/local/nodejs/bin:$PATH"
```
Press Ctrl + X to bring up the prompt, press Y to save the file changes. If you see "File Name to Write: .bashrc" in the prompt, press Enter to save the file successfully
5. Execute the following command to make the edited .bashrc file take effect
```
source ~/.bashrc
```
6. Run the following command to verify if Node.js has been successfully installed
```
node -v
```
If it displays v16.14.0, the installation was successful
7. Install pnpm, run the following command
```
pnpm -v
```
If you encounter an error message like "pnpm: command not found" execute
```
npm install -g pnpm
```
8. Navigate to the directory where you want to store the project and clone it
```
git clone https://github.com/openGemini/openGemini-CM.git
```
9. Enter the project directory
```
cd openGemini-CM
```
10. Run the project startup script
```
bash install_de.sh
bash run_preview.sh
```

# Service startup

Pull up the openGemini cluster and indicator collection tool ts monitor according to the deployment architecture, and take single machine deployment of openGemini cluster monitoring as an example:
1. Enter the project directory and start the openGemini database
```
sudo bash scripts/install_cluster.sh
sudo bash scripts/install_monitor.sh
```
2. Enter the usr/bin file to check if the tables in the database monitor are normal
```
./ts-cli -host 127.0.0.1 -port 8086
> show databases
> use monitor
> show measurements
```
The normal results are shown as follows:

![monitor中表的正常显示情况](https://github.com/25hours886/image/blob/main/openGemini-image/monitor%E4%B8%AD%E8%A1%A8%E7%9A%84%E6%AD%A3%E5%B8%B8%E6%98%BE%E7%A4%BA%E6%83%85%E5%86%B5.png)

3. Start the project
```
pnpm start
```

# Project Function Preview and Operation

- **User Management**: Login and logout demonstrations.
![用户管理](https://github.com/25hours886/image/blob/main/openGemini-image/%E7%94%A8%E6%88%B7%E7%AE%A1%E7%90%86.png)
The initial login username and password are: {editor, editor} or {admin, admin}.

- **Permission Management**: Built in instruction permissions and permission functions.
![权限管理页面](https://github.com/25hours886/image/blob/main/openGemini-image/%E6%9D%83%E9%99%90%E7%AE%A1%E7%90%86.png)
Switch from the editor role to the admin role and enter the password: admin.

- **Cluster Basic Information and Resource Monitoring**: Display the address of nodes in the current cluster, displaying the status of each node and information on its commonly used indicators.
![集群基本信息及资源监测](https://github.com/25hours886/image/blob/main/openGemini-image/%E9%9B%86%E7%BE%A4%E8%B5%84%E6%BA%90%E7%9B%91%E6%B5%8B.png)
The memory utilization rate (%) is as follows:
![内存利用率](https://github.com/25hours886/image/blob/main/openGemini-image/%E5%86%85%E5%AD%98%E5%88%A9%E7%94%A8%E7%8E%87(%25).jpg)
The CPU utilization rate (%) is as follows:
![CPU利用率](https://github.com/25hours886/image/blob/main/openGemini-image/CPU%E5%88%A9%E7%94%A8%E7%8E%87(%25).jpg)

- **Command Execution**: Enter commonly used SQL statements for openGemini, such as query, create, delete, insert, etc., and return the execution results. Taking creating a database geminiTest and creating a table logs in the database as an example:
Create a database geminiTest as follows:
![命令执行—创建数据库](https://github.com/25hours886/image/blob/main/openGemini-image/%E5%91%BD%E4%BB%A4%E6%89%A7%E8%A1%8C%E2%80%94%E5%88%9B%E5%BB%BA%E6%95%B0%E6%8D%AE%E5%BA%93.png)
The database geminiTest created by querying is as follows:
![命令执行—查询数据库](https://github.com/25hours886/image/blob/main/openGemini-image/%E5%91%BD%E4%BB%A4%E6%89%A7%E8%A1%8C%E2%80%94%E6%9F%A5%E8%AF%A2%E6%95%B0%E6%8D%AE%E5%BA%93.png)
Create table logs in the database geminiTest as follows:
![命令执行—创建表](https://github.com/25hours886/image/blob/main/openGemini-image/%E5%91%BD%E4%BB%A4%E6%89%A7%E8%A1%8C%E2%80%94%E5%88%9B%E5%BB%BA%E8%A1%A8.png)
The table logs created by the query are as follows:
![命令执行—显示表](https://github.com/25hours886/image/blob/main/openGemini-image/%E5%91%BD%E4%BB%A4%E6%89%A7%E8%A1%8C%E2%80%94%E6%98%BE%E7%A4%BA%E8%A1%A8.png)
Insert data information into the table logs as follows:
![命令执行—表中插入数据](https://github.com/25hours886/image/blob/main/openGemini-image/%E5%91%BD%E4%BB%A4%E6%89%A7%E8%A1%8C%E2%80%94%E8%A1%A8%E4%B8%AD%E6%8F%92%E5%85%A5%E6%95%B0%E6%8D%AE.png)
The data information in the query table logs is as follows:
![命令执行—查询表中数据](https://github.com/25hours886/image/blob/main/openGemini-image/%E5%91%BD%E4%BB%A4%E6%89%A7%E8%A1%8C%E2%80%94%E6%9F%A5%E8%AF%A2%E8%A1%A8%E4%B8%AD%E6%95%B0%E6%8D%AE.png)

- **Log Display**: Display error logs during the operation of the openGemini cluster, supporting retrieval by time or specific fields, sorted by time.
![日志显示](https://github.com/25hours886/image/blob/main/openGemini-image/%E6%97%A5%E5%BF%97%E6%98%BE%E7%A4%BA.png)

- **Configuration File Generation**: Modify and generate the configuration file for the openGemini cluster.
![配置文件生成](https://github.com/25hours886/image/blob/main/openGemini-image/%E9%85%8D%E7%BD%AE%E6%96%87%E4%BB%B6%E7%94%9F%E6%88%90.png)
对配置项进行修改后,点击“保存配置文件”。或恢复默认配置文件。

# LICENSE
[Apache 2.0 许可证](./LICENSE)
166 changes: 166 additions & 0 deletions README.zh-CN.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,166 @@
<div align="center">
<img alt="openGemini-CM Logo" width="120" height="120" src="./src/assets/layouts/logo.png">
<h1>OpenGemini Cluster Management Tool</h1>
<span><a href="./README.md">English</a> | 中文</span>
</div>

# 简介
本项目采用了开源的中后台管理系统基础解决方案 V3 Admin Vite,实现了 openGemini 的集群管理工具开发,体现形式为 WEB,具体功能包括集群基本信息显示、集群资源监控、配置文件生成、日志显示、命令执行等。

# 部署架构
![openGemini架构图](https://github.com/25hours886/image/blob/main/openGemini-image/openGemini%E6%9E%B6%E6%9E%84.png)

集群管理工具部署在管理节点上,该节点同时还部署单机的 openGemini 时序数据库,用于存储 openGemini 业务集群的各项监控指标,比如节点资源监控指标(cpu、内存、磁盘I/O),错误日志等。上述指标数据是通过 ts-monitor 工具采集并写入管理节点的数据库中,监控工具从中查询基本的集群运行状态信息,通过关键字检索库内错误日志并回显。

# 开发环境

## 环境信息
1. [VSCode](https://code.visualstudio.com/Download) version v1.77+
2. [Node.js](https://nodejs.org/en/download) version v16.14+
3. pnpm version v8.7.4
```
npm install [email protected]
```

## 安装依赖
安装项目所需的 element-plus(图标组件库)、axios(进行 HTTP 请求)、cors(处理跨域请求)、echarts(提供可视化图标)、express(构建 Web 服务器和 API)等依赖项。

### 组件依赖
1. 克隆项目
```
git clone https://github.com/openGemini/openGemini-CM.git
```
2. 进入项目目录
```
cd openGemini-CM
```
3. 执行安装依赖命令语句
```
pnpm i
```

### 安装插件(可选)
使用 VSCode 打开项目主目录,VSCode 会自动弹出窗口询问是否为此仓库安装项目所推荐的扩展,点击安装即可。
插件路径为 .vscode/extensions.json,包括 ESLint、Prettier、Volar等。

至此,已完成开发环境配置,可进行二次开发

# 运行环境
该运行环境以 Linux 为例:

1. 安装版本号为 16.14.0 的 nodejs
```
curl -o node-v16.14.0-linux-x64.tar.xz https://nodejs.org/dist/v16.14.0/node-v16.14.0-linux-x64.tar.xz
```
2. 下载完成后,解压缩下载的压缩包
```
tar -xvf node-v16.14.0-linux-x64.tar.xz
```
3. 将解压缩后的 Node.js 目录移动到 /usr/local 目录
```
sudo mv node-v16.14.0-linux-x64 /usr/local/nodejs
```
4. 配置环境变量,执行以下命令编辑 ~/.bashrc 文件
```
nano ~/.bashrc
```
并在文件末尾添加以下行
```
export PATH="/usr/local/nodejs/bin:$PATH"
```
按下 Ctrl + X 出现提示,按下 Y 保存文件修改,如果在提示中看到 File Name to Write: .bashrc,按下 Enter 保存文件成功
5. 执行以下命令使编辑的 .bashrc 文件生效
```
source ~/.bashrc
```
6. 运行以下命令验证 Node.js 是否已成功安装:
```
node -v
```
出现 v16.14.0 即成功安装
7. 安装 pnpm,执行
```
pnpm -v
```
若显示类似 pnpm: command not found 的错误信息,执行
```
npm install -g pnpm
```
8. 进入存放项目的目录,并克隆项目
```
git clone https://github.com/openGemini/openGemini-CM.git
```
9. 进入项目目录
```
cd openGemini-CM
```
10. 运行项目启动脚本
```
bash install_de.sh
bash run_preview.sh
```

# 服务启动

按照部署架构拉起 openGemini 集群和指标采集工具 ts-monitor,以单机部署 openGemini 集群监控为例:
1. 进入项目目录启动 openGemini 数据库
```
sudo bash scripts/install_cluster.sh
sudo bash scripts/install_monitor.sh
```
2. 进入 usr/bin文件中查看数据库 monitor 中的表是否正常
```
./ts-cli -host 127.0.0.1 -port 8086
> show databases
> use monitor
> show measurements
```
正常结果显示如下:

![monitor中表的正常显示情况](https://github.com/25hours886/image/blob/main/openGemini-image/monitor%E4%B8%AD%E8%A1%A8%E7%9A%84%E6%AD%A3%E5%B8%B8%E6%98%BE%E7%A4%BA%E6%83%85%E5%86%B5.png)

3. 启动项目
```
pnpm start
```

# 项目功能预览图及操作

- **用户管理**:登录、登出演示。
![用户管理](https://github.com/25hours886/image/blob/main/openGemini-image/%E7%94%A8%E6%88%B7%E7%AE%A1%E7%90%86.png)
初始登录用户名及密码为:{ editor, editor }或{ admin, admin }。

- **权限管理**:内置指令权限、权限函数。
![权限管理页面](https://github.com/25hours886/image/blob/main/openGemini-image/%E6%9D%83%E9%99%90%E7%AE%A1%E7%90%86.png)
从 editor 角色切换到 admin 角色,输入密码:admin。

- **集群基本信息及资源监控**:显示当前集群中节点地址,展示每个节点的状态及其常用指标的信息。
![集群基本信息及资源监测](https://github.com/25hours886/image/blob/main/openGemini-image/%E9%9B%86%E7%BE%A4%E8%B5%84%E6%BA%90%E7%9B%91%E6%B5%8B.png)
内存利用率(%)如下:
![内存利用率](https://github.com/25hours886/image/blob/main/openGemini-image/%E5%86%85%E5%AD%98%E5%88%A9%E7%94%A8%E7%8E%87(%25).jpg)
CPU利用率(%)如下:
![CPU利用率](https://github.com/25hours886/image/blob/main/openGemini-image/CPU%E5%88%A9%E7%94%A8%E7%8E%87(%25).jpg)

- **命令执行**:输入 openGemini 常用的sql语句,如查询,创建,删除,插入等,返回执行结果。以创建数据库 geminiTest,并在该数据库中创建表 logs 为例:
创建数据库 geminiTest 如下:
![命令执行—创建数据库](https://github.com/25hours886/image/blob/main/openGemini-image/%E5%91%BD%E4%BB%A4%E6%89%A7%E8%A1%8C%E2%80%94%E5%88%9B%E5%BB%BA%E6%95%B0%E6%8D%AE%E5%BA%93.png)
查询创建的数据库 geminiTest 如下:
![命令执行—查询数据库](https://github.com/25hours886/image/blob/main/openGemini-image/%E5%91%BD%E4%BB%A4%E6%89%A7%E8%A1%8C%E2%80%94%E6%9F%A5%E8%AF%A2%E6%95%B0%E6%8D%AE%E5%BA%93.png)
在数据库 geminiTest 中创建表 logs 如下:
![命令执行—创建表](https://github.com/25hours886/image/blob/main/openGemini-image/%E5%91%BD%E4%BB%A4%E6%89%A7%E8%A1%8C%E2%80%94%E5%88%9B%E5%BB%BA%E8%A1%A8.png)
查询所创建的表 logs 如下:
![命令执行—显示表](https://github.com/25hours886/image/blob/main/openGemini-image/%E5%91%BD%E4%BB%A4%E6%89%A7%E8%A1%8C%E2%80%94%E6%98%BE%E7%A4%BA%E8%A1%A8.png)
在表 logs 中插入数据信息如下:
![命令执行—表中插入数据](https://github.com/25hours886/image/blob/main/openGemini-image/%E5%91%BD%E4%BB%A4%E6%89%A7%E8%A1%8C%E2%80%94%E8%A1%A8%E4%B8%AD%E6%8F%92%E5%85%A5%E6%95%B0%E6%8D%AE.png)
查询表 logs 中数据信息如下:
![命令执行—查询表中数据](https://github.com/25hours886/image/blob/main/openGemini-image/%E5%91%BD%E4%BB%A4%E6%89%A7%E8%A1%8C%E2%80%94%E6%9F%A5%E8%AF%A2%E8%A1%A8%E4%B8%AD%E6%95%B0%E6%8D%AE.png)

- **日志显示**: 展示 openGemini 集群运行时的错误日志,支持按时间或特定字段检索,按时间排序。
![日志显示](https://github.com/25hours886/image/blob/main/openGemini-image/%E6%97%A5%E5%BF%97%E6%98%BE%E7%A4%BA.png)

- **配置文件生成**:修改并生成 openGemini 集群的配置文件。
![配置文件生成](https://github.com/25hours886/image/blob/main/openGemini-image/%E9%85%8D%E7%BD%AE%E6%96%87%E4%BB%B6%E7%94%9F%E6%88%90.png)
对配置项进行修改后,点击“保存配置文件”。或恢复默认配置文件。

# LICENSE
[Apache 2.0 许可证](./LICENSE)
Loading

0 comments on commit b9d8a41

Please sign in to comment.