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:
|
for line in io_stat:
|
||||||
time, value_down, value_up = line.split(",")
|
time, value_down, value_up = line.split(",")
|
||||||
time = datetime.utcfromtimestamp(float(time))
|
time = datetime.utcfromtimestamp(float(time))
|
||||||
value = float(value_down)
|
value = float(value_down+value_up)
|
||||||
if first_line:
|
if first_line:
|
||||||
first_line = False
|
first_line = False
|
||||||
else:
|
else:
|
||||||
@ -129,6 +129,13 @@ class OManager:
|
|||||||
return numpy.count_nonzero(x > 0)/len(x)
|
return numpy.count_nonzero(x > 0)/len(x)
|
||||||
|
|
||||||
stat.append({
|
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),
|
"io_mean": io_tas.get_f(numpy.mean),
|
||||||
"ping_mean": ping_tas.get_f(ping_mean),
|
"ping_mean": ping_tas.get_f(ping_mean),
|
||||||
"ping_rate": ping_tas.get_f(ping_rate)
|
"ping_rate": ping_tas.get_f(ping_rate)
|
||||||
@ -137,7 +144,8 @@ class OManager:
|
|||||||
xs = [j.isoformat() for j in ping_tas.get_ts()]
|
xs = [j.isoformat() for j in ping_tas.get_ts()]
|
||||||
return {
|
return {
|
||||||
"time": xs,
|
"time": xs,
|
||||||
"stat": stat
|
"instances": stat,
|
||||||
|
"lb_pids": self.pids
|
||||||
}
|
}
|
||||||
return {}
|
return {}
|
||||||
|
|
||||||
|
|||||||
@ -311,87 +311,26 @@
|
|||||||
<h4 class="card-title">Most Visited Pages</h4>
|
<h4 class="card-title">Most Visited Pages</h4>
|
||||||
</div>
|
</div>
|
||||||
<div class="table-responsive">
|
<div class="table-responsive">
|
||||||
<table class="table card-table table-vcenter">
|
<table id="ovpn_table" class="table card-table table-vcenter">
|
||||||
<thead>
|
<!-- <thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th>Page name</th>
|
<th>Connection name</th>
|
||||||
<th>Visitors</th>
|
<th>Visitors</th>
|
||||||
<th>Unique</th>
|
<th>Unique</th>
|
||||||
<th colspan="2">Bounce rate</th>
|
<th>Alive</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tr>
|
<tr>
|
||||||
<td>
|
<td>
|
||||||
/about.html
|
name
|
||||||
<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>
|
||||||
<td class="text-muted">4,896</td>
|
<td class="text-muted"></td>
|
||||||
<td class="text-muted">3,654</td>
|
<td class="text-muted"></td>
|
||||||
<td class="text-muted">82.54%</td>
|
|
||||||
<td class="text-right">
|
<td class="text-right">
|
||||||
<div class="chart-sparkline" id="sparkline-69"></div>
|
<div class="chart-sparkline" id="sparkline-69"></div>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</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>
|
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -444,6 +383,9 @@
|
|||||||
display: true,
|
display: true,
|
||||||
text: 'Chart.js Time Point Data'
|
text: 'Chart.js Time Point Data'
|
||||||
},
|
},
|
||||||
|
animation: {
|
||||||
|
duration: 0
|
||||||
|
},
|
||||||
scales: {
|
scales: {
|
||||||
xAxes: [{
|
xAxes: [{
|
||||||
type: 'time',
|
type: 'time',
|
||||||
@ -469,48 +411,17 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
var myChart = new Chart(ctx, config);
|
var traffic_chart = new Chart(ctx, config);
|
||||||
/*
|
|
||||||
{
|
function uuidv4() {
|
||||||
label: 'Dataset with string point data',
|
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
|
||||||
backgroundColor: color(window.chartColors.red).alpha(0.5).rgbString(),
|
var r = Math.random() * 16 | 0,
|
||||||
borderColor: window.chartColors.red,
|
v = c == 'x' ? r : (r & 0x3 | 0x8);
|
||||||
fill: false,
|
return v.toString(16);
|
||||||
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 random = (function () {
|
var random = (function () {
|
||||||
var seed = 0x2F6E2B1;
|
var seed = 0x2F6E2B2; // 0x2F6E2B1
|
||||||
return function () {
|
return function () {
|
||||||
// Robert Jenkins’ 32 bit integer hash function
|
// Robert Jenkins’ 32 bit integer hash function
|
||||||
seed = ((seed + 0x7ED55D16) + (seed << 12)) & 0xFFFFFFFF;
|
seed = ((seed + 0x7ED55D16) + (seed << 12)) & 0xFFFFFFFF;
|
||||||
@ -524,11 +435,13 @@
|
|||||||
}());
|
}());
|
||||||
colors = Array.from(Array(100), () => "#" + Math.floor(random() * 16777215).toString(16))
|
colors = Array.from(Array(100), () => "#" + Math.floor(random() * 16777215).toString(16))
|
||||||
var color = Chart.helpers.color;
|
var color = Chart.helpers.color;
|
||||||
|
|
||||||
var update_stat = function () {
|
var update_stat = function () {
|
||||||
$.getJSON("/stat", function (data) {
|
$.getJSON("/stat", function (data) {
|
||||||
var datasets = data.stat.map((value, index) => {
|
// update top chart
|
||||||
|
var datasets = data.instances.map((value, index) => {
|
||||||
return {
|
return {
|
||||||
label: `Connection ${index}`,
|
label: value.name,
|
||||||
backgroundColor: color(colors[index]).alpha(0.5).rgbString(),
|
backgroundColor: color(colors[index]).alpha(0.5).rgbString(),
|
||||||
borderColor: colors[index],
|
borderColor: colors[index],
|
||||||
fill: false,
|
fill: false,
|
||||||
@ -540,8 +453,41 @@
|
|||||||
}),
|
}),
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
myChart.data.datasets = datasets;
|
traffic_chart.data.datasets = datasets;
|
||||||
myChart.update();
|
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();
|
update_stat();
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user