version0.4

## Version 0.4
- update the flask version to 2.x, socket-io version to 4.x, Python version to 3.x
- use Vite and react to build the frontend.

.gitignore

@@ -59,4 +59,5 @@ docs/_build/
 # PyBuilder
 target/
 .idea
-config_dev.py
+config_dev.py
+/.DS_Store

README.md

@@ -8,32 +8,41 @@ we use `redis info` to monitor the redis usage. PAPA means a father who is monit
 [中文文档](https://github.com/no13bus/redispapa/blob/master/README_CN.md)
 
 ## Let's start
-- `pip install -r requirements.txt`
+- `cd backend && pip3 install -r requirements.txt`
 - check out the file `config.py` and make your own configure accoding to your redis servers.
 - the REDIS_SERVER should be formated like this `['ip:port:password', 'ip:port', .....]`
-- type this command `python run.py`, then you can watch it in `http://127.0.0.1:5000`
+- type this command `python3 run.py`, then you can watch it in `http://127.0.0.1:5000`
 - we recommand use this command to deploy: `gunicorn --worker-class socketio.sgunicorn.GeventSocketIOWorker run:app -b 0.0.0.0:5000`
+- `cd frontend && yarn install`
+- `yarn dev`
 
 ## The tech we use
-- [Angular](https://github.com/angular/angular)
-- [Flask](https://github.com/mitsuhiko/flask)
+- [Python3](https://docs.python.org/3/)
+- [React](https://github.com/facebook/react)
+- [Flask](https://github.com/pallets/flask)
 - [Socket.io](http://socket.io/)
-- [Highchart](http://www.highcharts.com/)
+- [Ant Design](https://ant.design/)
+- [Ant Design Charts](https://charts.ant.design/)
+- [Vite](https://vitejs.dev/)
 
 
 
 ## Project Details
 - we do not use any database to store the redis information, we store the data in the memory.
 - we use flask to start serveral threads which is equal to your redis server amount，and then send infomation to the front-end at regular time by socket.io.
-- we use angular to render the front-end。angular will get the data from socket.io and then render the templates with highchart-ng and ngSocketIO.
-- the good part of angular is two way bindings, when you change the redis server ip in the front-end select element, you will get a new front-end immediately.
+- we use vite and react to render the front-end。React will get the data from socket.io and then render the templates with ant design charts.
+- when you change the redis server ip in the front-end select element, you will get a new redis data immediately.
 
 ## Project Screen
 ![1](https://raw.githubusercontent.com/no13bus/redispapa/master/screen/1.png)
 ![2](https://raw.githubusercontent.com/no13bus/redispapa/master/screen/2.png)
 ![3](https://raw.githubusercontent.com/no13bus/redispapa/master/screen/3.png)
-![version 0.2](https://raw.githubusercontent.com/no13bus/redispapa/master/screen/4.png)
-![version 0.2](https://raw.githubusercontent.com/no13bus/redispapa/master/screen/5.png)
+![4](https://raw.githubusercontent.com/no13bus/redispapa/master/screen/4.png)
+![5](https://raw.githubusercontent.com/no13bus/redispapa/master/screen/5.png)
+
+## Version 0.4
+- update the flask version to 2.x, socket-io version to 4.x, Python version to 3.x
+- use Vite and react to build the frontend. 
 
 ## Version 0.3
 - docker support: you can pull the [docker image of redispapa](https://registry.hub.docker.com/u/sinchb/redispapa/) from docker hub
@@ -71,9 +80,4 @@ from the redis server.
 supply kinds of information of redis server
 
 ## The links
-- [redis stat](https://github.com/junegunn/redis-stat)
-- [highchart-ng](https://github.com/pablojim/highcharts-ng)
-- [ng-socket-io](https://github.com/mbenford/ngSocketIO)
-- [Angular](https://github.com/angular/angular)
-- [Flask](https://github.com/mitsuhiko/flask)
-
+- [redis stat](https://github.com/junegunn/redis-stat)

README_CN.md

@@ -1,15 +1,18 @@
 ## 开始使用
-- `pip install -r requirements.txt`
+- `cd backend && pip3 install -r requirements.txt`
 - 配置好config.py内的需要监控的redis服务器的相关信息.
 - REDIS_SERVER服务器的类型这样 `['ip:port:pawword', 'ip:port', .....]`
-- `python run.py` 即可进行redis服务监控
+- `python3 run.py` 即可进行redis服务监控
 - 如果线上部署的话，推荐使用gunicorn部署. `gunicorn --worker-class socketio.sgunicorn.GeventSocketIOWorker run:app -b 0.0.0.0:5000`
 
 ## 使用到的技术
-- angular
-- flask
-- socket.io
-- highchart
+- [Python3](https://docs.python.org/3/)
+- [React](https://github.com/facebook/react)
+- [Flask](https://github.com/pallets/flask)
+- [Socket.io](http://socket.io/)
+- [Ant Design](https://ant.design/)
+- [Ant Design Charts](https://charts.ant.design/)
+- [Vite](https://vitejs.dev/)
 
 
 
@@ -39,6 +42,11 @@ cd /path/to/your/redispapa/
 docker build -t=your-redispapa-tag .
 ```
 
+## Version 0.4
+- 将项目中用到的框架升级到最新版本，Python升级到3.x, flask升级到2.x, socketIO升级到4.x
+- 使用Vite和React来构建前端页面, 使用前后端分离的方式来开发项目
+
+
 ## version 0.2
 - 加入新特性: 在前端执行redis命令, 返回执行结果。
 - 执行方法如下: 网页上的command内写redis命令, args写命令的各个参数.
@@ -50,7 +58,3 @@ docker build -t=your-redispapa-tag .
 
 ## 相关项目连接
 - [redis stat](https://github.com/junegunn/redis-stat)
-- [highchart-ng](https://github.com/pablojim/highcharts-ng)
-- [ng-socket-io](https://github.com/mbenford/ngSocketIO)
-- [angular](https://github.com/angular/angular)
-- [flask](https://github.com/mitsuhiko/flask)

backend/run.py

@@ -30,9 +30,9 @@ def __init__(self, host, port, password=None):
         self.port = port
         self.password = password
         self.client = redis.StrictRedis(host=self.host, port=self.port, password=self.password)
-        self.status = {}
+        self.status = []
         self.table = []
-        self.table_row = []
+        self.table_row = {}
         self.commands_chart = []
         self.mem_chart = []
         self.cpu_chart = []
@@ -58,10 +58,15 @@ def exec_cmd(self, *args):
             result = cmd_method(*args[1:])
             if not result:
                 result = 'None'
+            else:
+                if isinstance(result, bool):
+                    result = str(result)
+                else:
+                    result = str(result, encoding='utf-8')
             emit('result', {'data': result, 'm_type': 'info'})
         except Exception as ex:
-            emit('result', {'data': ex.message, 'm_type': 'error'})
-            print(' %s ' % ex.message)
+            emit('result', {'data': str(ex), 'm_type': 'error'})
+            print(' %s ' % ex)
 
     def run(self):
         while 1:
@@ -71,56 +76,56 @@ def run(self):
                 redis_info = self.client.info()
                 self.nowtime = datetime.datetime.now().strftime("%Y-%m-%d %H:%M:%S %Z")
                 # status
-                self.status['redis_server_ip'] = '%s:%s' % (self.host, self.port)
-                self.status['redis_version'] = redis_info['redis_version']
-                self.status['redis_mode'] = redis_info['redis_mode'] if 'redis_mode' in redis_info else ''
-                self.status['process_id'] = redis_info['process_id']
-                self.status['uptime_in_seconds'] = redis_info['uptime_in_seconds']
-                self.status['uptime_in_days'] = redis_info['uptime_in_days']
-                self.status['role'] = redis_info['role']
-                self.status['connected_slaves'] = redis_info['connected_slaves']
-                self.status['rdb_bgsave_in_progress'] = redis_info['rdb_bgsave_in_progress'] if 'rdb_bgsave_in_progress' in redis_info else ''
-                self.status['rdb_last_save_time'] = redis_info['rdb_last_save_time'] if 'rdb_last_save_time' in redis_info else ''
-
+                self.status = []
+                self.status.append({"key":'redis_server_ip' , "value": '%s:%s' % (self.host, self.port)})
+                self.status.append({"key":'redis_version', "value": redis_info['redis_version']})
+                self.status.append({"key":'redis_mode', "value": redis_info['redis_mode'] if 'redis_mode' in redis_info else ''})
+                self.status.append({"key":'process_id',  "value":redis_info['process_id']})
+                self.status.append({"key":'uptime_in_seconds', "value": redis_info['uptime_in_seconds']})
+                self.status.append({"key":'uptime_in_days', "value": redis_info['uptime_in_days']})
+                self.status.append({"key":'role', "value": redis_info['role']})
+                self.status.append({"key":'connected_slaves',"value":  redis_info['connected_slaves']})
+                self.status.append({"key":'rdb_bgsave_in_progress', "value": redis_info['rdb_bgsave_in_progress'] if 'rdb_bgsave_in_progress' in redis_info else ''})
+                self.status.append({"key":'rdb_last_save_time', "value": redis_info['rdb_last_save_time'] if 'rdb_last_save_time' in redis_info else ''})
                 # table
-                self.table_row = []
+                self.table_row = {}
                 # nowtime = datetime.datetime.now().strftime("%H:%M:%S")
-                self.table_row.append(self.nowtime)
+                self.table_row["time"] = self.nowtime
                 self.used_cpu_user = redis_info['used_cpu_user']
                 self.used_cpu_sys = redis_info['used_cpu_sys']
-                self.table_row.append(self.used_cpu_user)
-                self.table_row.append(self.used_cpu_sys)
-                self.table_row.append(redis_info['connected_clients'])
-                self.table_row.append(redis_info['blocked_clients'])
+                self.table_row["us"] = (self.used_cpu_user)
+                self.table_row["sy"] = (self.used_cpu_sys)
+                self.table_row["cl"] = (redis_info['connected_clients'])
+                self.table_row["bcl"] = (redis_info['blocked_clients'])
                 self.mem = round(redis_info['used_memory'] / 1024 / 1024, 2)
-                self.table_row.append('%sM' % self.mem)
+                self.table_row["mem"] = ('%sM' % self.mem)
                 self.mem_rss = round(redis_info['used_memory_rss'] / 1024 / 1024, 2)
-                self.table_row.append('%sM' % self.mem_rss)
+                self.table_row["rss"] = ('%sM' % self.mem_rss)
                 keys = sum([v['keys'] for k, v in redis_info.items() if k.startswith('db') and 'keys' in v])
-                self.table_row.append(keys)
+                self.table_row["keys"] = (keys)
                 if len(self.table) == 0:
-                    self.table_row.append(0)
-                    self.table_row.append(0)
-                    self.table_row.append(0)
-                    self.table_row.append(0)
-                    self.table_row.append(0)
+                    self.table_row["cmd"] = (0)
+                    self.table_row["exp"] = (0)
+                    self.table_row["evt"] = (0)
+                    self.table_row["hit"] = (0)
+                    self.table_row["mis"] = (0)
                 else:
                     self.commands_per_seconds = (redis_info['total_commands_processed'] - self.last_total_commands_processed) / INFO_INTERVAL
-                    self.table_row.append(self.commands_per_seconds)
-                    self.table_row.append((redis_info['expired_keys'] - self.last_expired_keys) / INFO_INTERVAL)
-                    self.table_row.append((redis_info['evicted_keys'] - self.last_evicted_keys) / INFO_INTERVAL)
-                    self.table_row.append((redis_info['keyspace_hits'] - self.last_keyspace_hits) / INFO_INTERVAL)
-                    self.table_row.append((redis_info['keyspace_misses'] - self.last_keyspace_misses) / INFO_INTERVAL)
+                    self.table_row["cmd"] = (self.commands_per_seconds)
+                    self.table_row["exp"] = ((redis_info['expired_keys'] - self.last_expired_keys) / INFO_INTERVAL)
+                    self.table_row["evt"] = ((redis_info['evicted_keys'] - self.last_evicted_keys) / INFO_INTERVAL)
+                    self.table_row["hit"] = ((redis_info['keyspace_hits'] - self.last_keyspace_hits) / INFO_INTERVAL)
+                    self.table_row["mis"] = ((redis_info['keyspace_misses'] - self.last_keyspace_misses) / INFO_INTERVAL)
 
                 self.last_total_commands_processed = redis_info['total_commands_processed']
                 self.last_expired_keys = redis_info['expired_keys']
                 self.last_evicted_keys = redis_info['evicted_keys']
                 self.last_keyspace_hits = redis_info['keyspace_hits']
                 self.last_keyspace_misses = redis_info['keyspace_misses']
                 if redis_info['aof_enabled']:
-                    self.table_row.append(redis_info['aof_current_size'])
+                    self.table_row["aofcs"] = (redis_info['aof_current_size'])
                 else:
-                    self.table_row.append(0)
+                    self.table_row["aofcs"] = (0)
 
                 self.table.append(self.table_row)
                 if len(self.table) > TABLE_MAX_ROWS:

frontend/src/components/Chart/index.less

@@ -0,0 +1,6 @@
+.chart-title{
+    text-align: center;
+    font-weight: bold;
+    font-size: large;
+    margin-bottom: 20px;
+}

frontend/src/components/Chart/index.tsx

@@ -0,0 +1,48 @@
+import { Space, Table, Tag } from 'antd';
+import React from 'react';
+import { Line, LineConfig } from '@ant-design/charts';
+import { ChartData, ChartType } from '@/data.d'
+import './index.less'
+
+interface PropsType {
+  chartData: ChartData[];
+  chartTitle: string;
+}
+
+
+const Chart: React.FC<PropsType> = ({ chartTitle, chartData }) => {
+
+
+  const chartConfig = {
+    data: chartData,
+    xField: 'time',
+    yField: 'value',
+    seriesField: 'category',
+    point: {
+      size: 5,
+      shape: 'diamond',
+    },
+    xAxis: {
+      title: {
+        text: 'time'
+      }
+    },
+    yAxis: {
+      title: {
+        text: 'value'
+      }
+    },
+  };
+
+
+
+  return (
+    <div className="charts-item">
+      <div className="chart-title">{chartTitle}</div>
+      <Line {...chartConfig} />
+
+    </div>
+  );
+};
+
+export default Chart;