diff --git a/README.md b/README.md
index 12b76d5..d7e0f15 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,4 @@
-
+
[](https://github.com/yoobool/flask-state/tree/master/.github/ISSUE_TEMPLATE)
[](https://gitter.im/flaskstate/community)
@@ -11,7 +11,7 @@ English | [简体中文](https://github.com/yoobool/flask-state/blob/master/READ
Flask-State is a lightweight chart plugin for displaying machine state data in your web application.
-* **Monitored Metric:** CPU, memory, disk usage, LoadAVG and boot time.
+* **Monitored Metric:** CPU, memory, disk usage, disk IO, Network IO, LoadAVG and boot time.
* **Extensible:** Offers rich customization options, including redis monitoring, user authentication,
custom logging, i18n and etc.
* **Stable:** Solves multiprocessing concurrency problems (if you use [gunicorn](https://gunicorn.org/))
@@ -20,7 +20,7 @@ built on top of lightweight dependencies.
This project is in active development and thoroughly tested to ensure that Flask-State
stays up-to-date with its project roadmap.
-
+
## Documentation
@@ -39,8 +39,8 @@ Alternatively, install Flask-State via NPM or include this script tag to the hea
section of your HTML document:
```html
-
-
+
+
```
```bash
diff --git a/README.zh-CN.md b/README.zh-CN.md
index 0c1d3e4..a2be850 100644
--- a/README.zh-CN.md
+++ b/README.zh-CN.md
@@ -1,6 +1,6 @@
[English](https://github.com/yoobool/flask-state/blob/master/README.md) | 简体中文
-
+
[](https://github.com/yoobool/flask-state/tree/master/.github/ISSUE_TEMPLATE)
[](https://gitter.im/flaskstate/community)
@@ -12,7 +12,7 @@
Flask-State是一款在您浏览器上使用的轻便、图表化插件。
-* **监控状态**：CPU，内存，磁盘，LoadAvg，启动时长。
+* **监控状态**：CPU，内存，磁盘，磁盘IO, 网络IO, LoadAvg，启动时长。
* **可扩展**：除记录本机状态外，还包括丰富的扩展功能选择。其中有Redis监控、用户验证、自定义logging和i18n等。
* **稳定**：轻量级的依赖关系，同时解决了多进程并发问题。
@@ -20,7 +20,7 @@ Flask-State是一个活跃的项目，经过了充分的测试以及有一系列
###
-
+
## Documentation
@@ -31,6 +31,21 @@ Flask-State是一个活跃的项目，经过了充分的测试以及有一系列
从这里 [PyPI](https://pip.pypa.io/en/stable/quickstart/) 下载:
+```bash
+pip install Flask-State
+```
+
+通过NPM安装Flask-State或将此脚本标签放在HTML文件的开头部分:
+
+```html
+
+
+```
+
+```bash
+npm install flask-state --save
+```
+
## Usage
Flask-State插件安装后，还需要引入JavaScript文件和CSS文件，然后初始化组件运行方式。在某些配置上，你也可以选择修改。
diff --git a/examples/static/flask_state.png b/examples/static/flask_state.png
old mode 100644
new mode 100755
index 625c437..820490c
Binary files a/examples/static/flask_state.png and b/examples/static/flask_state.png differ
diff --git a/examples/static/initial.js b/examples/static/initial.js
index 60b872b..3d87e42 100644
--- a/examples/static/initial.js
+++ b/examples/static/initial.js
@@ -43,9 +43,9 @@ class MachineStatus {
/* Insert window element */
initFlaskStateContainer() {
- let _chart = this.mobile ? `
`
- : ``;
- let _content = `Host Status
Memory
CPU
Disk Usage
Load Avg
Uptime
Redis Status
Used Mem
Mem Fragmentation Ratio
Cache Hits Ratio
24h Hits Ratio
Uptime
Connections
` + _chart + `
`
+ : ``;
+ let _content = `Host Status
Memory
CPU
Disk Usage
Load Avg
Disk IO
Network IO
Uptime
Redis Status
Used Mem
Mem Fragmentation Ratio
Cache Hits Ratio
24h Hits Ratio
Uptime
Connections
` + _chart + `
';
+ if (tableName === 'networkIO') {
+ for (let i = 0; i < params.length; i++) {
+ value += (params[i].marker + params[i].seriesName + ': ' + MachineStatus.getFormatBit(params[i].value) + '
')
+ }
+ return value;
+ }
for (let i = 0; i < params.length; i++) {
value += (params[i].marker + params[i].seriesName + ': ' + params[i].value +
(tableName === 'loadavg' ? '' : '%') + '
')
@@ -353,7 +366,7 @@ class MachineStatus {
textStyle: {
fontSize: 14
},
- show: titleText === 'Load Avg',
+ show: titleText === 'Load Avg' || tableName === "networkIO",
},
grid: {
left: '3%',
@@ -382,7 +395,13 @@ class MachineStatus {
yAxis: {
type: 'value',
axisLabel: {
- formatter: (value) => value + (titleText === 'Load Avg' ? '' : '%'),
+ formatter: (value) => {
+ if (tableName === 'networkIO') {
+ let result = MachineStatus.getFormatBit(value, 0);
+ return result.substring(0, result.length - 2);
+ }
+ return value + (titleText === 'Load Avg' ? '' : '%')
+ },
},
},
series: [
@@ -406,13 +425,24 @@ class MachineStatus {
});
});
}
+ if (tableName === 'networkIO') {
+ baseData.legend.data = ['recv', 'sent'];
+ baseData.series = [];
+ baseData.legend.data.forEach((name) => {
+ baseData.series.push({
+ name: name,
+ type: 'line',
+ symbol: 'none',
+ hoverAnimation: false
+ });
+ });
+ }
return baseData;
}
/* Get Echarts data */
static getChartsData(rawData) {
let cpuList = [];
- let diskUsageList = [];
let loadAvgList = [];
let loadAvg5minList = [];
let loadAvg15minList = [];
@@ -421,7 +451,6 @@ class MachineStatus {
for (let i = 0; i < rawData.length; i++) {
let item = rawData[i];
cpuList.push(item.cpu);
- diskUsageList.push(item.disk_usage);
loadAvgList.push(item.load_avg[0]);
loadAvg5minList.push(item.load_avg[1]);
loadAvg15minList.push(item.load_avg[2]);
@@ -429,12 +458,50 @@ class MachineStatus {
tsList.push(item.ts);
}
return {
- 'cpu_list': cpuList, 'disk_usage_list': diskUsageList,
- 'load_avg_list': [loadAvgList, loadAvg5minList, loadAvg15minList],
+ 'cpu_list': cpuList, 'load_avg_list': [loadAvgList, loadAvg5minList, loadAvg15minList],
'memory_list': memoryList, 'ts_list': tsList
};
};
+ /* Get Echarts data */
+ static getIOChartsData(rawData) {
+ let netRecvList = [];
+ let netSentList = [];
+ let tsList = [];
+ for (let i = 0; i < rawData.length; i++) {
+ let item = rawData[i];
+ tsList.push(item[0] * SECONDS_TO_MILLISECONDS);
+ netRecvList.push(item[1]);
+ netSentList.push(item[2]);
+ }
+ return {
+ 'net_recv': netRecvList, 'net_sent': netSentList, 'ts_list': tsList
+ };
+ };
+
+ /* Get format Bit */
+ static getFormatBit(value, fixed = 2) {
+ let suffix;
+ let b_value = value / 8;
+ if (b_value >= 10e11) {
+ b_value = (b_value / 10e11).toFixed(fixed);
+ suffix = "TB/s";
+ } else if (b_value >= 10e8) {
+ b_value = (b_value / 10e8).toFixed(fixed);
+ suffix = "GB/s";
+ } else if (b_value >= 10e5) {
+ b_value = (b_value / 10e5).toFixed(fixed);
+ suffix = "MB/s";
+ } else if (b_value >= 10e2) {
+ b_value = (b_value / 10e2).toFixed(fixed);
+ suffix = "KB/s";
+ } else {
+ suffix = "B/s";
+ b_value = b_value.toFixed(2);
+ }
+ return b_value + ' ' + suffix;
+ };
+
/* Get format time */
static getFormatSeconds(value, days = 'days', hours = 'hours', minutes = 'min', seconds = 'seconds') {
let secondTime = parseInt(value);
diff --git a/examples/templates/index.html b/examples/templates/index.html
index 2b28895..3a608be 100644
--- a/examples/templates/index.html
+++ b/examples/templates/index.html
@@ -5,16 +5,17 @@
index
-
-
+
+
+
-