From 522dbb6e6f787946da0db9f6ae26d79d75674a4b Mon Sep 17 00:00:00 2001 From: mantaohuang Date: Tue, 28 Jul 2020 12:25:19 -0400 Subject: [PATCH] table --- o_manager.py | 12 +++- tabler/index.html | 176 ++++++++++++++++------------------------------ 2 files changed, 71 insertions(+), 117 deletions(-) diff --git a/o_manager.py b/o_manager.py index 1647188..f79706e 100644 --- a/o_manager.py +++ b/o_manager.py @@ -102,7 +102,7 @@ class OManager: for line in io_stat: time, value_down, value_up = line.split(",") time = datetime.utcfromtimestamp(float(time)) - value = float(value_down) + value = float(value_down+value_up) if first_line: first_line = False else: @@ -129,6 +129,13 @@ class OManager: return numpy.count_nonzero(x > 0)/len(x) stat.append({ + "idx": i["idx"], + "name": i["op"].name, + "weight": i["weight"], + "pids": i["op"].pids, + "status": i["op"].status, + "log": i["op"].get_log(lines=10), + "name": i["op"].name, "io_mean": io_tas.get_f(numpy.mean), "ping_mean": ping_tas.get_f(ping_mean), "ping_rate": ping_tas.get_f(ping_rate) @@ -137,7 +144,8 @@ class OManager: xs = [j.isoformat() for j in ping_tas.get_ts()] return { "time": xs, - "stat": stat + "instances": stat, + "lb_pids": self.pids } return {} diff --git a/tabler/index.html b/tabler/index.html index df05d8e..3bd67c5 100644 --- a/tabler/index.html +++ b/tabler/index.html @@ -311,87 +311,26 @@

Most Visited Pages

- - +
+ +
@@ -444,6 +383,9 @@ display: true, text: 'Chart.js Time Point Data' }, + animation: { + duration: 0 + }, scales: { xAxes: [{ type: 'time', @@ -469,48 +411,17 @@ } } }; - var myChart = new Chart(ctx, config); - /* - { - label: 'Dataset with string point data', - backgroundColor: color(window.chartColors.red).alpha(0.5).rgbString(), - borderColor: window.chartColors.red, - fill: false, - data: [{ - x: newDateString(0), - y: randomScalingFactor() - }, { - x: newDateString(2), - y: randomScalingFactor() - }, { - x: newDateString(4), - y: randomScalingFactor() - }, { - x: newDateString(5), - y: randomScalingFactor() - }], - }, { - label: 'Dataset with date object point data', - backgroundColor: color(window.chartColors.blue).alpha(0.5).rgbString(), - borderColor: window.chartColors.blue, - fill: false, - data: [{ - x: newDate(0), - y: randomScalingFactor() - }, { - x: newDate(2), - y: randomScalingFactor() - }, { - x: newDate(4), - y: randomScalingFactor() - }, { - x: newDate(5), - y: randomScalingFactor() - }] - } - */ + var traffic_chart = new Chart(ctx, config); + + function uuidv4() { + return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) { + var r = Math.random() * 16 | 0, + v = c == 'x' ? r : (r & 0x3 | 0x8); + return v.toString(16); + }); + } var random = (function () { - var seed = 0x2F6E2B1; + var seed = 0x2F6E2B2; // 0x2F6E2B1 return function () { // Robert Jenkins’ 32 bit integer hash function seed = ((seed + 0x7ED55D16) + (seed << 12)) & 0xFFFFFFFF; @@ -524,11 +435,13 @@ }()); colors = Array.from(Array(100), () => "#" + Math.floor(random() * 16777215).toString(16)) var color = Chart.helpers.color; + var update_stat = function () { $.getJSON("/stat", function (data) { - var datasets = data.stat.map((value, index) => { + // update top chart + var datasets = data.instances.map((value, index) => { return { - label: `Connection ${index}`, + label: value.name, backgroundColor: color(colors[index]).alpha(0.5).rgbString(), borderColor: colors[index], fill: false, @@ -540,8 +453,41 @@ }), } }) - myChart.data.datasets = datasets; - myChart.update(); + traffic_chart.data.datasets = datasets; + traffic_chart.update(); + // update table + var ovpn_table = $("#ovpn_table"); + ovpn_table.empty(); + ovpn_table.append($(` + + Connection name + Visitors + Unique + Alive + + `)) + data.instances.forEach((instace, index) => { + var tr = ` + + ${instance.name} + + + + +
+ + ` + }); + ovpn_table.append(tr); + + $().peity && $(`#sparkline-${index}`).text(instance.ping_rate.join(", ")).peity("line", { + width: 64, + height: 40, + stroke: "#206bc4", + strokeWidth: 2, + fill: ["#d2e1f3"], + padding: .2, + }); }); } update_stat();