pull/161/head
Pavel Loginov 2019-10-06 00:30:16 +03:00
parent 30432686ed
commit 4a1a4008b5
11 changed files with 126 additions and 308 deletions

View File

@ -24,7 +24,7 @@ template = template.render(h2 = 1, title = "Metrics",
autorefresh = 1,
role = sql.get_user_role_by_uuid(user_id.value),
user = user,
servers = sql.get_dick_permit(),
servers = sql.select_servers_metrics(user_id.value),
versions = funct.versions(),
token = token)
print(template)

View File

@ -10,7 +10,7 @@ form = cgi.FieldStorage()
serv = form.getvalue('serv')
act = form.getvalue('act')
if form.getvalue('new_metrics'):
if form.getvalue('new_metrics') or form.getvalue('new_waf_metrics'):
print('Content-type: application/json\n')
else:
print('Content-type: text/html\n')
@ -442,19 +442,7 @@ if form.getvalue('table_metrics'):
if form.getvalue('new_metrics'):
from datetime import timedelta
import http.cookies
# cookie = http.cookies.SimpleCookie(os.environ.get("HTTP_COOKIE"))
# user_id = cookie.get('uuid')
# servers = sql.select_servers_metrics(user_id.value)
# servers = sorted(servers)
serv = form.getvalue('server')
# p = {}
# for serv in servers:
# serv = serv[0]
# p[serv] = {}
metric = sql.select_metrics(serv)
metrics = {}
metrics['chartData'] = {}
@ -463,175 +451,43 @@ if form.getvalue('new_metrics'):
curr_con = ''
curr_ssl_con = ''
sess_rate = ''
max_sess_rate = ''
for i in metric:
labels += str(i[5].split(' ')[1])+','
curr_con += str(i[1])+','
curr_ssl_con += str(i[2])+','
sess_rate += str(i[3])+','
max_sess_rate += str(i[4])+','
server = str(i[0])
metrics['chartData']['labels'] = labels
# metrics[rep_date]['server'] = str(i[0])
metrics['chartData']['curr_con'] = curr_con
metrics['chartData']['curr_ssl_con'] = curr_ssl_con
metrics['chartData']['sess_rate'] = sess_rate
metrics['chartData']['max_sess_rate'] = max_sess_rate
metrics['chartData']['server'] = server
import json
print(json.dumps(metrics))
if form.getvalue('metrics'):
from datetime import timedelta
from bokeh.plotting import figure, output_file, show
from bokeh.models import ColumnDataSource, HoverTool, DatetimeTickFormatter, DatePicker
from bokeh.layouts import widgetbox, gridplot
from bokeh.models.widgets import Button, RadioButtonGroup, Select
import pandas as pd
import http.cookies
cookie = http.cookies.SimpleCookie(os.environ.get("HTTP_COOKIE"))
user_id = cookie.get('uuid')
servers = sql.select_servers_metrics(user_id.value)
servers = sorted(servers)
p = {}
for serv in servers:
serv = serv[0]
p[serv] = {}
metric = sql.select_metrics(serv)
metrics = {}
for i in metric:
rep_date = str(i[5])
metrics[rep_date] = {}
metrics[rep_date]['server'] = str(i[0])
metrics[rep_date]['curr_con'] = str(i[1])
metrics[rep_date]['curr_ssl_con'] = str(i[2])
metrics[rep_date]['sess_rate'] = str(i[3])
metrics[rep_date]['max_sess_rate'] = str(i[4])
if form.getvalue('new_waf_metrics'):
serv = form.getvalue('server')
metric = sql.select_waf_metrics(serv)
metrics = {}
metrics['chartData'] = {}
metrics['chartData']['labels'] = {}
labels = ''
curr_con = ''
df = pd.DataFrame.from_dict(metrics, orient="index")
df = df.fillna(0)
df.index = pd.to_datetime(df.index)
df.index.name = 'Date'
df.sort_index(inplace=True)
source = ColumnDataSource(df)
output_file("templates/metrics_out.html", mode='inline')
x_min = df.index.min() - pd.Timedelta(hours=1)
x_max = df.index.max() + pd.Timedelta(minutes=1)
for i in metric:
labels += str(i[2].split(' ')[1])+','
curr_con += str(i[1])+','
p[serv] = figure(
tools="pan,box_zoom,reset,xwheel_zoom",
title=metric[0][0],
x_axis_type="datetime", y_axis_label='Connections',
x_range = (x_max.timestamp()*1000-60*100000, x_max.timestamp()*1000)
)
hover = HoverTool(
tooltips=[
("Connections", "@curr_con"),
("SSL connections", "@curr_ssl_con"),
("Sessions rate", "@sess_rate")
],
mode='mouse'
)
p[serv].ygrid.band_fill_color = "#f3f8fb"
p[serv].ygrid.band_fill_alpha = 0.9
p[serv].y_range.start = 0
p[serv].y_range.end = int(df['curr_con'].max()) + 150
p[serv].add_tools(hover)
p[serv].title.text_font_size = "20px"
p[serv].line("Date", "curr_con", source=source, alpha=0.5, color='#5cb85c', line_width=2, legend="Conn")
p[serv].line("Date", "curr_ssl_con", source=source, alpha=0.5, color="#5d9ceb", line_width=2, legend="SSL con")
p[serv].line("Date", "sess_rate", source=source, alpha=0.5, color="#33414e", line_width=2, legend="Sessions")
p[serv].legend.orientation = "horizontal"
p[serv].legend.location = "top_left"
p[serv].legend.padding = 5
plots = []
for key, value in p.items():
plots.append(value)
grid = gridplot(plots, ncols=2, plot_width=800, plot_height=250, toolbar_location = "left", toolbar_options=dict(logo=None))
show(grid)
metrics['chartData']['labels'] = labels
metrics['chartData']['curr_con'] = curr_con
metrics['chartData']['server'] = serv
import json
print(json.dumps(metrics))
if form.getvalue('waf_metrics'):
from datetime import timedelta
from bokeh.plotting import figure, output_file, show
from bokeh.models import ColumnDataSource, HoverTool, DatetimeTickFormatter, DatePicker
from bokeh.layouts import widgetbox, gridplot
from bokeh.models.widgets import Button, RadioButtonGroup, Select
import pandas as pd
import http.cookies
cookie = http.cookies.SimpleCookie(os.environ.get("HTTP_COOKIE"))
user_id = cookie.get('uuid')
servers = sql.select_waf_servers_metrics(user_id.value)
servers = sorted(servers)
p = {}
for serv in servers:
serv = serv[0]
p[serv] = {}
metric = sql.select_waf_metrics(serv)
metrics = {}
for i in metric:
rep_date = str(i[2])
metrics[rep_date] = {}
metrics[rep_date]['conn'] = str(i[1])
df = pd.DataFrame.from_dict(metrics, orient="index")
df = df.fillna(0)
df.index = pd.to_datetime(df.index)
df.index.name = 'Date'
df.sort_index(inplace=True)
source = ColumnDataSource(df)
output_file("templates/metrics_waf_out.html", mode='inline')
x_min = df.index.min() - pd.Timedelta(hours=1)
x_max = df.index.max() + pd.Timedelta(minutes=1)
p[serv] = figure(
tools="pan,box_zoom,reset,xwheel_zoom",
title=metric[0][0],
x_axis_type="datetime", y_axis_label='Connections',
x_range = (x_max.timestamp()*1000-60*100000, x_max.timestamp()*1000)
)
hover = HoverTool(
tooltips=[
("Connections", "@conn"),
],
mode='mouse'
)
p[serv].ygrid.band_fill_color = "#f3f8fb"
p[serv].ygrid.band_fill_alpha = 0.9
p[serv].y_range.start = 0
p[serv].y_range.end = int(df['conn'].max()) + 150
p[serv].add_tools(hover)
p[serv].title.text_font_size = "20px"
p[serv].line("Date", "conn", source=source, alpha=0.5, color='#5cb85c', line_width=2, legend="Conn")
p[serv].legend.orientation = "horizontal"
p[serv].legend.location = "top_left"
p[serv].legend.padding = 5
plots = []
for key, value in p.items():
plots.append(value)
grid = gridplot(plots, ncols=2, plot_width=800, plot_height=250, toolbar_location = "left", toolbar_options=dict(logo=None))
show(grid)
if form.getvalue('get_hap_v'):
output = funct.check_haproxy_version(serv)

View File

@ -14,17 +14,17 @@ th, tr, td {
width: 6%;
padding: 10px;
}
.metrics1 {
width: 400px;
height: 100px;}
}
</style>
<link href="/inc/chart.min.css" rel="stylesheet">
<script src="/inc/metrics.js"></script>
<script src="/inc/chart.min.js"></script>
<div id="table_metrics"></div>
{% for s in servers %}
<canvas id="{{s.2}}" width="100" height="20" class="metrics1" role="img"></canvas>
<div class="chart-container" style="">
<canvas id="{{s.0}}" role="img"></canvas>
</div>
<script>
getChartData('{{s.2}}')
getChartData('{{s.0}}')
</script>
{% endfor %}

View File

@ -24,31 +24,21 @@
<tbody id="ajaxwafstatus"></tbody>
</table>
<div id="ajax"></div>
<style>
iframe {
border: none;
padding: 10px;
}
</style>
<div id="metrics_iframe"></div>
<link href="/inc/chart.min.css" rel="stylesheet">
<script src="/inc/metrics.js"></script>
<script src="/inc/chart.min.js"></script>
{% for s in servers %}
<div class="chart-container" style="">
<canvas id="{{s.0}}" role="img"></canvas>
</div>
<script>
getWafChartData('{{s.0}}')
</script>
{% endfor %}
<script>
showOverviewWaf()
function callIframe(url, callback) {
$('#metrics_iframe').html('<iframe id="metrics" style="width:100%;height:100%;" />');
$('iframe#metrics').attr('src', url);
$('iframe#metrics').load(function() {
callback(this);
});
}
function loadMetrics() {
callIframe('templates/metrics_waf_out.html', function(){
$.get( "options.py?waf_metrics=1&token="+$('#token').val(), function( data ) {
$( ".result" ).html( data );
});
});
}
loadMetrics()
</script>
{% endblock %}

View File

@ -25,7 +25,7 @@ template = template.render(h2 = 1, title = "Web application firewall",
autorefresh = 1,
role = sql.get_user_role_by_uuid(user_id.value),
user = user,
table_stat = sql.select_table_metrics(user_id.value),
servers = sql.select_waf_servers_metrics(user_id.value),
versions = funct.versions(),
token = token)
print(template)

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -14,14 +14,10 @@ function getChartData(server) {
data.push(result.chartData.curr_con);
data.push(result.chartData.curr_ssl_con);
data.push(result.chartData.sess_rate);
data.push(result.chartData.max_sess_rate);
data.push(result.chartData.server);
var labels = result.chartData.labels;
renderChart(data, labels, server);
},
error: function (err) {
$("#loadingMessage").html("Error");
}
});
}
@ -49,19 +45,13 @@ function renderChart(data, labels, server) {
data: data[2].split(','),
borderColor: 'rgba(255, 206, 86, 1)',
backgroundColor: 'rgba(255, 206, 86, 0.2)',
},
{
label: 'max_sess_rate',
data: data[3].split(','),
borderColor: 'rgba(192, 192, 192, 1)',
backgroundColor: 'rgba(192, 192, 192, 0.2)',
}
]
},
options: {
title: {
display: true,
text: data[4],
text: data[3],
fontSize: 20,
padding: 0,
},
@ -81,6 +71,66 @@ function renderChart(data, labels, server) {
}
});
}
function getWafChartData(server) {
$.ajax({
url: "options.py",
data: {
new_waf_metrics: '1',
server: server,
token: $('#token').val()
},
type: "GET",
success: function (result) {
var data = [];
data.push(result.chartData.curr_con);
data.push(result.chartData.server);
var labels = result.chartData.labels;
renderWafChart(data, labels, server);
}
});
}
function renderWafChart(data, labels, server) {
var ctx = document.getElementById(server)
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: labels.split(','),
datasets: [
{
label: 'curr_con',
data: data[0].split(','),
borderColor: 'rgba(75, 192, 192, 1)',
backgroundColor: 'rgba(75, 192, 192, 0.2)',
}
]
},
options: {
title: {
display: true,
text: data[1],
fontSize: 20,
padding: 0,
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
}
}]
},
legend: {
display: true,
labels: {
fontColor: 'rgb(255, 99, 132)'
},
}
}
});
}
$("#secIntervals").css("display", "none");
function callIframe(url, callback) {
$('#metrics_iframe').html('<iframe id="metrics" style="width:100%;height:100%;" />');

View File

@ -148,7 +148,7 @@ pre {
float: right;
margin-top: 5px;
margin-left: 14px;
margin-right: 15px;
margin-right: 20px;
color: #fff !important;
font-size: 15px;
}
@ -328,14 +328,14 @@ pre {
padding-left: 10px;
font-style: italic;
}
.tooltip {
font-size: 12px;
padding-bottom: 10px;
}
.tooltipTop {
margin-bottom: -20px;
padding-top: 10px;
}
/* .tooltip { */
/* font-size: 12px; */
/* padding-bottom: 10px; */
/* } */
/* .tooltipTop { */
/* margin-bottom: -20px; */
/* padding-top: 10px; */
/* } */
.overview {
width: 100%;
/* margin-top: 1.5em; */
@ -565,12 +565,15 @@ ul{
border: none !important;
border-color: #5D9CEB !important;
}
.ui-tooltip, .arrow:after {
background: #33414E !important;
border: 1px solid #33414E !important;
border-radius: 5px !important;
color: #fff !important;
}
/* .ui-tooltip, .arrow:after { */
/* background: #33414E !important; */
/* border: 1px solid #33414E !important; */
/* border-radius: 5px !important; */
/* color: #fff !important; */
/* font-size: 10px !important; */
/* padding: 2px !important; */
/* margin-bottom: -20px !important; */
/* } */
.ui-tabs-nav {
border-radius: 0 !important;
padding-left: 25px !important;
@ -804,6 +807,14 @@ label {
margin-bottom: -40px;
padding-left: 70px;
}
.chart-container {
position: relative;
height: 310px;
width: 49%;
float: left;
margin-top: 20px;
margin-left: 10px;
}
@media (max-width: 1920px) {
#logo_span {
margin-left: 17%;

View File

@ -11,6 +11,4 @@ matplotlib==2.1.2
future==0.13.1
mysql-connector-python==8.0.11
Jinja2>=2.10.1
pandas==0.22.0
bokeh==0.13.0
python-ldap>=3.1.0