table
This commit is contained in:
mantaohuang
parent
951a09e7f5
commit
522dbb6e6f
12
o_manager.py
12
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 {}
|
||||
|
||||
|
||||
@ -311,87 +311,26 @@
|
||||
<h4 class="card-title">Most Visited Pages</h4>
|
||||
</div>
|
||||
<div class="table-responsive">
|
||||
<table class="table card-table table-vcenter">
|
||||
<thead>
|
||||
<table id="ovpn_table" class="table card-table table-vcenter">
|
||||
<!-- <thead>
|
||||
<tr>
|
||||
<th>Page name</th>
|
||||
<th>Connection name</th>
|
||||
<th>Visitors</th>
|
||||
<th>Unique</th>
|
||||
<th colspan="2">Bounce rate</th>
|
||||
<th>Alive</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tr>
|
||||
<td>
|
||||
/about.html
|
||||
<a href="#" class="link-secondary ml-2"><svg xmlns="http://www.w3.org/2000/svg" class="icon"
|
||||
width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"
|
||||
stroke-linecap="round" stroke-linejoin="round">
|
||||
<path stroke="none" d="M0 0h24v24H0z" />
|
||||
<path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5" />
|
||||
<path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5" /></svg>
|
||||
</a>
|
||||
name
|
||||
</td>
|
||||
<td class="text-muted">4,896</td>
|
||||
<td class="text-muted">3,654</td>
|
||||
<td class="text-muted">82.54%</td>
|
||||
<td class="text-muted"></td>
|
||||
<td class="text-muted"></td>
|
||||
<td class="text-right">
|
||||
<div class="chart-sparkline" id="sparkline-69"></div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
/special-promo.html
|
||||
<a href="#" class="link-secondary ml-2"><svg xmlns="http://www.w3.org/2000/svg" class="icon"
|
||||
width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"
|
||||
stroke-linecap="round" stroke-linejoin="round">
|
||||
<path stroke="none" d="M0 0h24v24H0z" />
|
||||
<path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5" />
|
||||
<path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5" /></svg>
|
||||
</a>
|
||||
</td>
|
||||
<td class="text-muted">3,652</td>
|
||||
<td class="text-muted">3,215</td>
|
||||
<td class="text-muted">76.29%</td>
|
||||
<td class="text-right">
|
||||
<div class="chart-sparkline" id="sparkline-70"></div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
/news/1,new-ui-kit.html
|
||||
<a href="#" class="link-secondary ml-2"><svg xmlns="http://www.w3.org/2000/svg" class="icon"
|
||||
width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"
|
||||
stroke-linecap="round" stroke-linejoin="round">
|
||||
<path stroke="none" d="M0 0h24v24H0z" />
|
||||
<path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5" />
|
||||
<path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5" /></svg>
|
||||
</a>
|
||||
</td>
|
||||
<td class="text-muted">3,256</td>
|
||||
<td class="text-muted">2,865</td>
|
||||
<td class="text-muted">72.65%</td>
|
||||
<td class="text-right">
|
||||
<div class="chart-sparkline" id="sparkline-71"></div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
/lorem-ipsum-dolor-sit-amet-very-long-url.html
|
||||
<a href="#" class="link-secondary ml-2"><svg xmlns="http://www.w3.org/2000/svg" class="icon"
|
||||
width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"
|
||||
stroke-linecap="round" stroke-linejoin="round">
|
||||
<path stroke="none" d="M0 0h24v24H0z" />
|
||||
<path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5" />
|
||||
<path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5" /></svg>
|
||||
</a>
|
||||
</td>
|
||||
<td class="text-muted">986</td>
|
||||
<td class="text-muted">865</td>
|
||||
<td class="text-muted">44.89%</td>
|
||||
<td class="text-right">
|
||||
<div class="chart-sparkline" id="sparkline-72"></div>
|
||||
</td>
|
||||
</tr>
|
||||
</tr> -->
|
||||
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
@ -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($(`<thead>
|
||||
<tr>
|
||||
<th>Connection name</th>
|
||||
<th>Visitors</th>
|
||||
<th>Unique</th>
|
||||
<th>Alive</th>
|
||||
</tr>
|
||||
</thead>`))
|
||||
data.instances.forEach((instace, index) => {
|
||||
var tr = `<tr>
|
||||
<td>
|
||||
${instance.name}
|
||||
</td>
|
||||
<td class="text-muted"></td>
|
||||
<td class="text-muted"></td>
|
||||
<td class="text-right">
|
||||
<div class="chart-sparkline" id="sparkline-${index}"></div>
|
||||
</td>
|
||||
</tr>`
|
||||
});
|
||||
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();
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user