v6.3.16.0

Changelog: https://roxy-wi.org/changelog#6_3_16

app/create_db.py

@@ -916,7 +916,7 @@ def update_db_v_6_3_13_5():
 
 def update_ver():
 	try:
-		Version.update(version='6.3.15.0').execute()
+		Version.update(version='6.3.16.0').execute()
 	except Exception:
 		print('Cannot update version')
 

app/modules/tools/smon.py

@@ -45,7 +45,7 @@ def create_smon(name: str, hostname: str, port: int, enable: int, url: str, body
         telegrams = sql.get_user_telegram_by_group(user_group)
         smon_service = sql.select_smon_check_by_id(last_id, check_type)
         env = Environment(loader=FileSystemLoader('templates'), autoescape=True)
-        template = env.get_template('ajax/show_new_smon.html')
+        template = env.get_template('ajax/smon/show_new_smon.html')
         template = template.render(smon=smon, telegrams=telegrams, slacks=slacks, pds=pds, lang=lang, check_type=check_type,
                                    smon_service=smon_service)
         print(template)
@@ -113,7 +113,7 @@ def show_smon() -> None:
     lang = roxywi_common.get_user_lang()
     sort = common.checkAjaxInput(form.getvalue('sort'))
     env = Environment(loader=FileSystemLoader('templates'), autoescape=True)
-    template = env.get_template('ajax/smon_dashboard.html')
+    template = env.get_template('ajax/smon/smon_dashboard.html')
     template = template.render(smon=sql.smon_list(user_group), sort=sort, lang=lang, update=1)
     print(template)
 
@@ -147,3 +147,22 @@ def history_metrics(server_id: int, check_id: int) -> None:
     metrics['chartData']['curr_con'] = curr_con
 
     print(json.dumps(metrics))
+
+
+def history_statuses(dashboard_id: int, check_id: int) -> None:
+    env = Environment(loader=FileSystemLoader('templates'), autoescape=True)
+    template = env.get_template('ajax/smon/history_status.html')
+    smon_statuses = sql.select_smon_history(dashboard_id, check_id)
+
+    rendered_template = template.render(smon_statuses=smon_statuses)
+    print(rendered_template)
+
+
+def history_cur_status(dashboard_id: int, check_id: int) -> None:
+    env = Environment(loader=FileSystemLoader('templates'), autoescape=True)
+    template = env.get_template('ajax/smon/cur_status.html')
+    cur_status = sql.get_last_smon_status_by_check(dashboard_id, check_id)
+    smon = sql.select_one_smon(dashboard_id, check_id)
+
+    rendered_template = template.render(cur_status=cur_status, smon=smon)
+    print(rendered_template)

app/options.py

@@ -1035,6 +1035,20 @@ if form.getvalue('smon_history_check') is not None:
     check_id = int(form.getvalue('check_id'))
     smon_mod.history_metrics(server_id, check_id)
 
+if form.getvalue('smon_history_statuses') is not None:
+    import modules.tools.smon as smon_mod
+
+    dashboard_id = int(form.getvalue('dashboard_id'))
+    check_id = int(form.getvalue('check_id'))
+    smon_mod.history_statuses(dashboard_id, check_id)
+
+if form.getvalue('smon_cur_status') is not None:
+    import modules.tools.smon as smon_mod
+
+    dashboard_id = int(form.getvalue('dashboard_id'))
+    check_id = int(form.getvalue('check_id'))
+    smon_mod.history_cur_status(dashboard_id, check_id)
+
 if form.getvalue('showBytes') is not None:
     import modules.roxywi.overview as roxywi_overview
 

app/smon.py

@@ -87,9 +87,7 @@ elif action == 'checker_history':
 elif action == 'dashboard':
 	dashboard_id = int(form.getvalue('dashboard_id'))
 	check_id = int(form.getvalue('check_id'))
-	smon_statuses = sql.select_smon_history(dashboard_id, check_id)
 	smon_name = sql.get_smon_service_name_by_id(dashboard_id)
-	cur_status = sql.get_last_smon_status_by_check(dashboard_id, check_id)
 	check_interval = sql.get_setting('smon_check_interval')
 	smon = sql.select_one_smon(dashboard_id, check_id)
 	present = datetime.now(timezone('UTC'))
@@ -109,7 +107,7 @@ elif action == 'dashboard':
 		last_resp_time = round(sql.get_last_smon_res_time_by_check(dashboard_id, check_id), 2)
 	except Exception:
 		last_resp_time = 0
-	template = env.get_template('include/smon_history.html')
+	template = env.get_template('include/smon/smon_history.html')
 
 	for s in smon:
 		if s.smon_id.ssl_expire_date is not None:
@@ -117,11 +115,10 @@ elif action == 'dashboard':
 			cert_day_diff = (ssl_expire_date - present).days
 
 	rendered_template = template.render(
-		h2=1, autorefresh=0, role=user_params['role'], user=user_params['user'], smon=smon, group=user_group, lang=lang,
+		h2=1, autorefresh=1, role=user_params['role'], user=user_params['user'], smon=smon, group=user_group, lang=lang,
 		user_status=user_subscription['user_status'], check_interval=check_interval, user_plan=user_subscription['user_plan'],
-		token=user_params['token'], smon_statuses=smon_statuses, uptime=uptime, user_services=user_params['user_services'],
+		token=user_params['token'], uptime=uptime, user_services=user_params['user_services'], avg_res_time=avg_res_time,
-		cur_status=cur_status, avg_res_time=avg_res_time, smon_name=smon_name, cert_day_diff=cert_day_diff, check_id=check_id,
+		smon_name=smon_name, cert_day_diff=cert_day_diff, check_id=check_id, dashboard_id=dashboard_id, last_resp_time=last_resp_time
-		dashboard_id=dashboard_id, last_resp_time=last_resp_time
 	)
 	print(rendered_template)
 	sys.exit()

app/templates/ajax/smon/cur_status.html

@@ -0,0 +1,19 @@
+{% import 'languages/'+lang|default('en')+'.html' as lang %}
+{% set add_class = 'serverNone' %}
+{% set status = lang.smon_page.desc.DISABLED %}
+{% set service_status = [] %}
+{% for s in smon %}
+{% set service_status = service_status.append(s.smon_id.en) %}
+{% endfor %}
+{% if service_status.0 %}
+    {% if service_status %}
+        {% if cur_status %}
+            {% set add_class = 'serverUp' %}
+            {% set status = lang.smon_page.desc.UP %}
+        {% else %}
+            {% set add_class = 'serverDown' %}
+            {% set status = lang.smon_page.desc.DOWN %}
+        {% endif %}
+    {% endif %}
+{% endif %}
+<span class="{{add_class}} cur_status" style="font-size: 30px; border-radius: 50rem!important;min-width: 62px;">{{status}}</span>

app/templates/ajax/smon/history_status.html

@@ -0,0 +1,9 @@
+{% import 'languages/'+lang|default('en')+'.html' as lang %}
+{% for s in smon_statuses|reverse %}
+    {% if s.status %}
+        {% set add_class = 'serverUp' %}
+    {% else %}
+        {% set add_class = 'serverDown' %}
+    {% endif %}
+    <div class="smon_server_statuses {{add_class}}" title="" data-help="{{s.date}} {{s.mes}}" style=""></div>
+{% endfor %}

app/templates/ajax/smon/show_new_smon.html

@@ -4,13 +4,13 @@
     {% for s_service in smon_service %}
     <tr class="newserver" id="smon-{{s.id}}">
         {% if check_type == 'tcp' %}
-            {% include 'include/smon_tcp_server.html' %}
+            {% include 'include/smon/smon_tcp_server.html' %}
         {% elif check_type == 'ping' %}
-            {% include 'include/smon_ping_server.html' %}
+            {% include 'include/smon/smon_ping_server.html' %}
         {% elif check_type == 'http' %}
-            {% include 'include/smon_http_server.html' %}
+            {% include 'include/smon/smon_http_server.html' %}
         {% elif check_type == 'dns' %}
-            {% include 'include/smon_dns_server.html' %}
+            {% include 'include/smon/smon_dns_server.html' %}
         {% endif %}
     {% endfor %}
 {% endfor %}

app/templates/config.html

@@ -154,7 +154,11 @@
 		var info = cm.lineInfo(n);
 		cm.setGutterMarker(n, "breakpoints", info.gutterMarkers ? null : makeMarker());
 	});
-
+	myCodeMirror.on("beforeChange", function (cm, change) {
+		$(window).bind('beforeunload', function(){
+		  return 'Are you sure you want to leave?';
+		});
+	});
 	function makeMarker() {
 		var marker = document.createElement("div");
 		marker.style.color = "#822";

app/templates/hapservers.html

@@ -5,8 +5,8 @@
 {% from 'include/input_macros.html' import input, checkbox, select, copy_to_clipboard %}
 <script src="/inc/overview-6.3.9.js"></script>
 <link href="/inc/css/chart.min.css" rel="stylesheet">
-<script src="/inc/metrics.js"></script>
+<script src="/inc/metrics-6.3.16.0.js"></script>
-<script src="/inc/chart.min.js"></script>
+<script src="/inc/chart.min-4.3.0.js"></script>
 {% if servers|length == 0 %} {% include 'include/getstarted.html' %} {% endif %}
 <style>
 .ui-checkboxradio-label {
@@ -69,6 +69,7 @@
 			<script>
 				var server_ip = '{{s.2}}'
 				function showMetrics() {
+					removeData();
 					{%- if service == 'haproxy' %}
 						{%- for s in servers %}
 							{%- if s.8.0.9 %}

app/templates/include/smon/smon_history.html

@@ -9,12 +9,11 @@
 {% else %}
 <link href="/inc/css/chart.min.css" rel="stylesheet">
 <link href="/inc/css/smon.css" rel="stylesheet">
-<script src="/inc/chart.min.js"></script>
+<script src="/inc/chart.min-4.3.0.js"></script>
-<script src="/inc/metrics.js"></script>
+<script src="/inc/metrics-6.3.16.0.js"></script>
+<script src="/inc/smon-6.3.16.js"></script>
 <div class="row wrap1">
-{% set service_status = [] %}
 {% for s in smon %}
-    {% set service_status = service_status.append(s.smon_id.en) %}
     <div id="smon_name" class="col-md-8">
     {% if check_id == 2 %}
         <a href="{{s.url}}" title="{{lang.words.open|title()}}" target="_blank">{{s.url}}</a>
@@ -30,31 +29,10 @@
 </div>
 <div class="row statuses wrap">
     <div class="col-md-8" style="transform: translateX(0px);">
-        {% for s in smon_statuses|reverse %}
+        <div id="smon_history_statuses"></div>
-            {% if s.status %}
-                {% set add_class = 'serverUp' %}
-            {% else %}
-                {% set add_class = 'serverDown' %}
-            {% endif %}
-            <div class="smon_server_statuses {{add_class}}" title="" data-help="{{s.date}} {{s.mes}}" style=""></div>
-        {% endfor %}
         <div id="check_interval">{{lang.words.checking|title()}} {{lang.words.every}} {{check_interval}} {{lang.words.minutes2}}</div>
     </div>
-    <div class="col-md-4">
+    <div class="col-md-4" id="cur_status"></div>
-        {% if service_status.0 %}
-            {% if cur_status %}
-                {% set add_class = 'serverUp' %}
-                {% set status = lang.smon_page.desc.UP %}
-            {% else %}
-                {% set add_class = 'serverDown' %}
-                {% set status = lang.smon_page.desc.DOWN %}
-            {% endif %}
-        {% else %}
-            {% set add_class = 'serverNone' %}
-            {% set status = lang.smon_page.desc.DISABLED %}
-        {% endif %}
-        <span class="{{add_class}} cur_status" style="font-size: 30px; border-radius: 50rem!important;min-width: 62px;">{{status}}</span>
-    </div>
 </div>
 <div class="row statuses wrap">
     {% for s in smon %}
@@ -90,11 +68,20 @@
     </div>
     {% endfor %}
 </div>
-<div class="chart-container" style="width: 98%">
+<div class="chart-container_overview" style="width: 98%;">
     <canvas id="metrics_3" role="img"></canvas>
 </div>
 {% endif %}
 <script>
-    getSmonHistoryCheckData('{{dashboard_id}}', '{{check_id}}')
+    function showSmonHistory() {
+		let metrics = new Promise(
+			(resolve, reject) => {
+				removeData();
+				getSmonHistoryCheckData('{{dashboard_id}}', '{{check_id}}');
+			});
+		metrics.then();
+        show_statuses('{{dashboard_id}}', '{{check_id}}');
+	}
+	showSmonHistory();
 </script>
 {% endblock %}

app/templates/metrics.html

@@ -16,8 +16,8 @@
 	}
 </style>
 <link href="/inc/css/chart.min.css" rel="stylesheet">
-<script src="/inc/metrics.js"></script>
+<script src="/inc/metrics-6.3.16.0.js"></script>
-<script src="/inc/chart.min.js"></script>
+<script src="/inc/chart.min-4.3.0.js"></script>
 {% if user_status == 0 %}
 	{% include 'include/no_sub.html' %}
 {% elif services == '0' %}
@@ -123,7 +123,6 @@
 			metrics.then();
 		});
 	});
-
  </script>
 {% endif %}
 {% endif %}

app/templates/ovw.html

@@ -4,7 +4,7 @@
 {% block content %}
 <link href="/inc/css/chart.min.css" rel="stylesheet">
 <script src="/inc/metrics.js"></script>
-<script src="/inc/chart.min.js"></script>
+<script src="/inc/chart.min-4.3.0.js"></script>
 <script src="/inc/overview-6.3.9.js"></script>
 <script>
 	$("#secIntervals").css("display", "none");

app/templates/smon.html

@@ -3,7 +3,7 @@
 {% block h2 %}{{ title }}{% endblock %}
 {% block content %}
 {% from 'include/input_macros.html' import input, checkbox, select %}
-<script src="/inc/smon-6.3.13.js"></script>
+<script src="/inc/smon-6.3.16.js"></script>
 <script src="/inc/users.js"></script>
 <script src="/inc/fontawesome.min.js"></script>
 <script src="/inc/jquery.timeago.js" type="text/javascript"></script>
@@ -76,7 +76,7 @@
 				{% for s_service in smon_http %}
 					{% if s_service.smon_id|string() == s.id|string() %}
 						<tr id="smon-http-{{s.id}}">
-							{% include 'include/smon_http_server.html' %}
+							{% include 'include/smon/smon_http_server.html' %}
 					{% endif %}
 				{% endfor %}
 			{% endif %}
@@ -107,7 +107,7 @@
 		{% for s in smon %}
 			{% if s.id|string() == s_service.smon_id|string() %}
 				<tr id="smon-tcp-{{s.id}}">
-					{% include 'include/smon_tcp_server.html' %}
+					{% include 'include/smon/smon_tcp_server.html' %}
 			{% endif %}
 		{% endfor %}
 	{% endfor %}
@@ -138,7 +138,7 @@
 			{% for s_service in smon_ping %}
 				{% if s_service.smon_id|string() == s.id|string() %}
 					<tr id="smon-ping-{{s.id}}">
-						{% include 'include/smon_ping_server.html' %}
+						{% include 'include/smon/smon_ping_server.html' %}
 				{% endif %}
 			{% endfor %}
 		{% endif %}
@@ -172,7 +172,7 @@
 			{% for s_service in smon_dns %}
 				{% if s_service.smon_id|string() == s.id|string() %}
 					<tr id="smon-dns-{{s.id}}">
-						{% include 'include/smon_dns_server.html' %}
+						{% include 'include/smon/smon_dns_server.html' %}
 				{% endif %}
 			{% endfor %}
 		{% endif %}
@@ -222,7 +222,7 @@
 				<span class="need-field">*</span>
 			</td>
 			<td>
-				{{ input('new-smon-packet_size', value='56', type='number') }}
+				{{ input('new-smon-packet_size', value='56', type='number', placeholder='56') }}
 			</td>
 		</tr>
 		<tr class="smon_dns_check">
@@ -318,7 +318,7 @@
 	{% include 'ajax/alerts_history.html' %}
 {% else %}
 	<div class="main" id="smon_dashboard">
-		{% include 'ajax/smon_dashboard.html' %}
+		{% include 'ajax/smon/smon_dashboard.html' %}
 	</div>
 {% endif %}
 </div>

app/templates/statsview.html

@@ -7,9 +7,6 @@
 {% if selects|length == 0 %}
 	{% include 'include/getstarted.html' %}
 {% else %}
-<style>
-
-</style>
 <form action="statsview.py" method="post" class="left-space">
 	<input type="hidden" id="service" value="{{service}}" />
 	<select autofocus required name="serv" id="serv">
@@ -157,6 +154,6 @@
 		showStats();		
 	});
 </script>
-<link href="/inc/css/style.css" rel="stylesheet">
+<link href="/inc/css/style-6.3.9.css" rel="stylesheet">
 {% endif %}
 {% endblock %}

app/templates/waf.html

@@ -118,6 +118,11 @@
 					highlightSelectionMatches: {showToken: /\w/, annotateScrollbar: true}
 				});
 			myCodeMirror.refresh();
+			myCodeMirror.on("beforeChange", function (cm, change) {
+				$(window).bind('beforeunload', function(){
+				  return 'Are you sure you want to leave?';
+				});
+			});
 		</script>
 {% else %}
 	<style>
@@ -172,8 +177,8 @@
 	{% if service == 'haproxy' %}
 	<link href="/inc/css/chart.min.css" rel="stylesheet">
 	<script src="/inc/overview-6.3.9.js"></script>
-	<script src="/inc/metrics.js"></script>
+	<script src="/inc/metrics-6.3.16.0.js"></script>
-	<script src="/inc/chart.min.js"></script>
+	<script src="/inc/chart.min-4.3.0.js"></script>
 	<div id="table_metrics"></div>
 	<div class="metrics-time-range">
 		<b>{{lang.words.time_range|title()}}:</b>

inc/configshow.js

@@ -72,6 +72,7 @@ $( function() {
 				} else {
 					toastr.clear();
 					returnNiceCheckingConfig(data);
+					$(window).unbind('beforeunload');
 				}
 				if (data.indexOf('warning: ') != '-1') {
 					toastr.warning(data)

inc/metrics-6.3.16.0.js

@@ -27,83 +27,103 @@ function getHttpChartData(server) {
 }
 var charts = []
 function renderHttpChart(data, labels, server) {
-    var ctx = 'http_'+server
+    // Преобразование данных в массивы
+    const dataArray0 = data[0].split(',');
+    const dataArray1 = data[1].split(',');
+    const dataArray2 = data[2].split(',');
+    const dataArray3 = data[3].split(',');
+
+    // Удаление последнего пустого элемента в каждом массиве
+    dataArray0.pop();
+    dataArray1.pop();
+    dataArray2.pop();
+    dataArray3.pop();
+
+    var ctx = document.getElementById('http_' + server).getContext('2d');
     var myChart = new Chart(ctx, {
         type: 'line',
         data: {
             labels: labels.split(','),
             datasets: [
                 {
-                    parsing: false,
                     normalized: true,
                     label: '2xx',
-                    data: data[0].split(','),
+                    data: dataArray0,
                     borderColor: 'rgba(75, 192, 192, 1)',
                     backgroundColor: 'rgba(75, 192, 192, 0.2)',
+                    fill: true
                 },
                 {
-                    parsing: false,
                     normalized: true,
                     label: '3xx',
-                    data: data[1].split(','),
+                    data: dataArray1,
                     borderColor: 'rgba(54, 162, 235, 1)',
                     backgroundColor: 'rgba(54, 162, 235, 0.2)',
+                    fill: true
                 },
                 {
-				    parsing: false,
                     normalized: true,
                     label: '4xx',
-                    data: data[2].split(','),
+                    data: dataArray2,
                     borderColor: 'rgba(255, 206, 86, 1)',
                     backgroundColor: 'rgba(255, 206, 86, 0.2)',
+                    fill: true
                 },
                 {
-				    parsing: false,
                     normalized: true,
                     label: '5xx',
-                    data: data[3].split(','),
+                    dataArray3,
                     borderColor: 'rgb(255,86,86)',
                     backgroundColor: 'rgba(255,86,86,0.2)',
-                }
+                    fill: true
-            ]
+                },
+            ],
         },
         options: {
-            animation: false,
             maintainAspectRatio: false,
+            plugins: {
                 title: {
                     display: true,
                     text: data[4],
-				fontSize: 20,
+                    font: {
-				padding: 0,
+                        size: 20,
+                    },
+                    padding: {
+                        top: 0,
+                    },
+                },
             },
             scales: {
-                yAxes: [{
+                y: {
                     ticks: {
                         beginAtZero: true,
-                    }
+                    },
-                }],
+                },
-                xAxes: [{
+                x: {
                     ticks: {
+                        beginAtZero: true,
                         major: {
                             enabled: true,
-                            fontStyle: 'bold'
+                            fontStyle: 'bold',
                         },
                         source: 'data',
                         autoSkip: true,
                         autoSkipPadding: 45,
-                        maxRotation: 0
+                        maxRotation: 0,
-                    }
+                    },
-                }]
+                },
             },
             legend: {
                 display: true,
                 labels: {
-					fontColor: 'rgb(255, 99, 132)',
+                    color: 'rgb(255, 99, 132)',
-					defaultFontSize: '10',
+                    font: {
-					defaultFontFamily: 'BlinkMacSystemFont'
+                        size: 10,
+                        family: 'BlinkMacSystemFont',
+                    },
+                },
+            },
         },
-			}
-        }
     });
     charts.push(myChart);
 }
@@ -130,54 +150,54 @@ function getChartData(server) {
     });
 }
 function renderChart(data, labels, server) {
-    var ctx = document.getElementById(server)
+    // Преобразование данных в массивы
+    const dataArray0 = data[0].split(',');
+    const dataArray1 = data[1].split(',');
+    const dataArray2 = data[2].split(',');
+
+    // Удаление последнего пустого элемента в каждом массиве
+    dataArray0.pop();
+    dataArray1.pop();
+    dataArray2.pop();
+    var ctx = document.getElementById(server);
     var myChart = new Chart(ctx, {
         type: 'line',
         data: {
             labels: labels.split(','),
             datasets: [
                 {
-                    parsing: false,
                     normalized: true,
                     label: 'Connections',
-                    data: data[0].split(','),
+                    data: dataArray0,
                     borderColor: 'rgba(75, 192, 192, 1)',
                     backgroundColor: 'rgba(75, 192, 192, 0.2)',
+                    fill: true
                 },
                 {
-                    parsing: false,
                     normalized: true,
                     label: 'SSL Connections',
-                    data: data[1].split(','),
+                    data: dataArray1,
                     borderColor: 'rgba(54, 162, 235, 1)',
                     backgroundColor: 'rgba(54, 162, 235, 0.2)',
+                    fill: true
                 },
                 {
-				    parsing: false,
                     normalized: true,
                     label: 'Session rate',
-                    data: data[2].split(','),
+                    data: dataArray2,
                     borderColor: 'rgba(255, 206, 86, 1)',
                     backgroundColor: 'rgba(255, 206, 86, 0.2)',
+                    fill: true
                 }
             ]
         },
         options: {
-            animation: false,
 			maintainAspectRatio: false,
-			title: {
-				display: true,
-				text: data[3],
-				fontSize: 20,
-				padding: 0,
-			},
             scales: {
-                yAxes: [{
+                y: {
-                    ticks: {
                     beginAtZero: true,
-                    }
+                },
-                }],
+                x: {
-                xAxes: [{
                     ticks: {
                         major: {
                             enabled: true,
@@ -188,21 +208,34 @@ function renderChart(data, labels, server) {
                         autoSkipPadding: 45,
                         maxRotation: 0
                     }
-                }]
+                }
+            },
+			plugins: {
+                title: {
+                    display: true,
+                    text: data[3],
+                    font: {
+                        size: 20,
+                    },
+                    padding: {
+                        top: 0,
+                    },
                 },
 				legend: {
 					display: true,
 					labels: {
-					fontColor: 'rgb(255, 99, 132)',
+						color: 'rgb(255, 99, 132)',
-					defaultFontSize: '10',
+						font: {
-					defaultFontFamily: 'BlinkMacSystemFont'
+                            size: 10,
+                            family: 'BlinkMacSystemFont'
+                        }
 					},
 				}
 			}
+        }
     });
     charts.push(myChart);
 }
-
 function getWafChartData(server) {
     $.ajax({
         url: "options.py",
@@ -223,10 +256,14 @@ function getWafChartData(server) {
     });
 }
 function renderServiceChart(data, labels, server, service) {
-    var ctx = service + '_' + server;
+    const dataArray = data[0].split(',');
-    var addinional_title = '';
+
-    if (service == 'waf') {
+    // Удаление последнего пустого элемента в каждом массиве
-        addinional_title = 'WAF '
+    dataArray.pop();
+    var ctx = document.getElementById(service + '_' + server).getContext('2d');
+    var additional_title = '';
+    if (service === 'waf') {
+        additional_title = 'WAF ';
     }
     var myChart = new Chart(ctx, {
         type: 'line',
@@ -234,31 +271,45 @@ function renderServiceChart(data, labels, server, service) {
             labels: labels.split(','),
             datasets: [
                 {
-                    parsing: false,
                     normalized: true,
                     label: 'Connections',
-                    data: data[0].split(','),
+                    data: dataArray,
                     borderColor: 'rgba(75, 192, 192, 1)',
                     backgroundColor: 'rgba(75, 192, 192, 0.2)',
+                    fill: true
                 }
             ]
         },
         options: {
             animation: false,
             maintainAspectRatio: false,
+            plugins: {
                 title: {
                     display: true,
-				text: addinional_title + data[1],
+                    text: additional_title + data[1],
-				fontSize: 20,
+                    font: {
-				padding: 0,
+                        size: 20
+                    },
+                    padding: {
+                        top: 0
+                    }
+                },
+                legend: {
+                    display: true,
+                    labels: {
+                        color: 'rgb(255, 99, 132)',
+                        font: {
+                            size: '10',
+                            family: 'BlinkMacSystemFont'
+                        }
+                    }
+                }
             },
             scales: {
-                yAxes: [{
+                y: {
-                    ticks: {
+                    beginAtZero: true
-                        beginAtZero: true,
+                },
-                    }
+                x: {
-                }],
-                xAxes: [{
                     ticks: {
                         major: {
                             enabled: true,
@@ -269,15 +320,7 @@ function renderServiceChart(data, labels, server, service) {
                         autoSkipPadding: 45,
                         maxRotation: 0
                     }
-                }]
+                }
-            },
-			legend: {
-				display: true,
-				labels: {
-					fontColor: 'rgb(255, 99, 132)',
-					defaultFontSize: '10',
-					defaultFontFamily: 'BlinkMacSystemFont'
-				},
             }
         }
     });
@@ -356,21 +399,25 @@ function getChartDataHapWiRam(ip) {
         success: function (result) {  
             var data = [];
             data.push(result.chartData.rams);
-            renderChartHapWiRam(data);
+            // Получение значений из строки и разделение их на массив
+            const ramsData = data[0].trim().split(' ');
+
+            // Преобразование значений в числа
+            const formattedData = ramsData.map(value => parseFloat(value));
+            renderChartHapWiRam(formattedData);
         }
     });
 }
 function renderChartHapWiRam(data) {
-    var ctx = 'ram'
+    var ctx = document.getElementById('ram').getContext('2d');
     var myChart = new Chart(ctx, {
-        type: 'horizontalBar',
+        type: 'bar',
         data: {
-            labels: ['total','used','free','shared','buff/cache','avaliable'],
+            labels: ['total','used','free','shared','buff','available'],
             datasets: [
                 {
-                    parsing: false,
                     normalized: true,
-                    data: data[0].split(' '),
+                    data: data,
                     backgroundColor: [
                         '#36a2eb',
                         '#ff6384',
@@ -378,35 +425,42 @@ function renderChartHapWiRam(data) {
                         '#ff9f40',
                         '#ffcd56',
                         '#4bc0c0',
-						
                     ]
                 }
             ]
         },
         options: {
-            animation: false,
             maintainAspectRatio: false,
+            plugins: {
                 title: {
                     display: true,
                     text: "RAM usage in Mb",
-				fontSize: 15,
+                    font: {
-				padding: 0,
+                        size: 15
+                    },
+                    padding: {
+                        top: 10,
+                        bottom: 0
+                    }
                 },
                 legend: {
                     display: false,
                     align: 'start',
                     position: 'left',
                     labels: {
-					fontColor: 'rgb(255, 99, 132)',
+                        color: 'rgb(255, 99, 132)',
-					defaultFontSize: 2,
+                        font: {
-					fontColor: 'black',
+                            size: 5,
-					defaultFontFamily: 'BlinkMacSystemFont',					
+                            family: 'BlinkMacSystemFont'
+                        },
                         boxWidth: 13,
                         padding: 5
                     },
                 }
             }
+        }
     });
+    charts.push(myChart);
 }
 function getChartDataHapWiCpu(ip) {
     $.ajax({
@@ -418,24 +472,25 @@ function getChartDataHapWiCpu(ip) {
 		},
 		type: "POST",
         success: function (result) {   
-            var data = [];
+            // Получение значений из строки и разделение их на массив
-            data.push(result.chartData.cpus);
+            const ramsData = result.chartData.cpus.trim().split(' ').map(parseFloat);
-            renderChartHapWiCpu(data);
+
+            // Преобразование значений в числа
+            const formattedData = ramsData.map(value => parseFloat(value));
+            renderChartHapWiCpu(formattedData);
         }
     });
 }
-
 function renderChartHapWiCpu(data) {
-    var ctx = 'cpu'
+    var ctx = document.getElementById('cpu').getContext('2d');
     var myChart = new Chart(ctx, {
-        type: 'horizontalBar',
+        type: 'bar',
         data: {
             labels: ['user','sys','nice','idle','wait','hi','si','steal'],
             datasets: [
                 {
-                    parsing: false,
                     normalized: true,
-                    data: data[0].split(' '),
+                    data: data,
                     backgroundColor: [
 						'#ff6384',
 						'#36a2eb',
@@ -444,42 +499,43 @@ function renderChartHapWiCpu(data) {
 						'#4bc0c0',
 						'#5d9ceb',
 						'#2c6969',
-						
 					]
                 }
             ]
         },
         options: {
-            animation: false,
+            animation: true,
 			maintainAspectRatio: false,
+			plugins: {
 				title: {
 					display: true,
 					text: "CPU usage in %",
-				fontSize: 15,
+					font: { size: 15 },
-				padding: 0,
+					padding: { top: 10 }
 				},
 				legend: {
 					display: false,
 					position: 'left',
 					align: 'end',
 					labels: {
-					fontColor: 'rgb(255, 99, 132)',
+						color: 'rgb(255, 99, 132)',
-					defaultFontSize: 2,
+						font: { size: 10, family: 'BlinkMacSystemFont' },
-					defaultFontFamily: 'BlinkMacSystemFont',
+						color: 'black',
-					fontColor: 'black',
 						boxWidth: 13,
 						padding: 5
 					},
+				}
 			},
             scales: {
-                xAxes: [{
+                x: {
                     ticks: {
-                        suggestedMax: 100
+                        max: 100
+                    }
                 }
-                }]
             },
         }
     });
+    charts.push(myChart);
 }
 $( function() {
    $('#dis_table_metric').click(function() {
@@ -526,31 +582,22 @@ function removeData() {
     }
 }
 function showOverviewHapWI() {
+    removeData();
 	getChartDataHapWiCpu('1');
 	getChartDataHapWiRam('1');
 	NProgress.configure({showSpinner: false});
 }
-function removeCpuRamCharts() {
-    var ctxCpu = document.getElementById("cpu")
-    var ctxRam = document.getElementById("ram")
-    ctxCpu.remove();
-    ctxRam.remove();
-    $('#cpu_div').html('<canvas id="cpu" role="img"></canvas>');
-    $('#ram_div').html('<canvas id="ram" role="img"></canvas>');
-}
 function updatingCpuRamCharts() {
 	if (cur_url[0] == 'overview.py') {
-		removeCpuRamCharts();
 		showOverviewHapWI();
 	} else if (cur_url[0] == 'hapservers.py' && cur_url[1].split('=')[0] == 'service') {
-		removeCpuRamCharts();
 		NProgress.configure({showSpinner: false});
-		getChartDataHapWiCpu(server_ip);
+        showOverviewHapWI();
-		getChartDataHapWiRam(server_ip);
-		removeData();
 		getChartData(server_ip);
 		getHttpChartData(server_ip);
 		getWafChartData(server_ip);
+	} else {
+        removeData();
     }
 }
 function getSmonHistoryCheckData(server, check_id) {
@@ -568,59 +615,90 @@ function getSmonHistoryCheckData(server, check_id) {
             var data = [];
             data.push(result.chartData.curr_con);
             var labels = result.chartData.labels;
-            renderSMONChart(data, labels, '3');
+            renderSMONChart(data[0], labels, '3');
         }
     });
 }
 function renderSMONChart(data, labels, server) {
-    var resp_time_word = $('#translate').attr('data-resp_time');
+    const resp_time_word = $('#translate').attr('data-resp_time');
-    var ctx = 'metrics_' + server;
+    const ctx = document.getElementById('metrics_' + server);
-    var myChart = new Chart(ctx, {
+
-        type: 'line',
+    // Преобразование данных в массивы
-        data: {
+    const labelArray = labels.split(',');
-            labels: labels.split(','),
+    const dataArray = data.split(',');
-            datasets: [
+
-                {
+    // Удаление последнего пустого элемента в каждом массиве
-                    parsing: false,
+    labelArray.pop();
-                    normalized: true,
+    dataArray.pop();
+
+    // Создание объекта dataset
+    const dataset = {
         label: resp_time_word + ' (ms)',
-                    data: data[0].split(','),
+        data: dataArray,
         borderColor: 'rgba(92, 184, 92, 1)',
         backgroundColor: 'rgba(92, 184, 92, 0.2)',
-                }
+        tension: 0.4,
-            ]
+        pointRadius: 3,
+        borderWidth: 1,
+        fill: true
+    };
+
+    const config = {
+        type: 'line',
+        data: {
+            labels: labelArray,
+            datasets: [dataset]
         },
         options: {
-            animation: false,
+            animation: true,
 			maintainAspectRatio: false,
-            scales: {
+			plugins: {
-                yAxes: [{
+				title: {
-                    ticks: {
+					display: true,
-                        beginAtZero: true,
+					font: { size: 15 },
-                    }
+					padding: { top: 10 }
-                }],
-                xAxes: [{
-                    ticks: {
-                        major: {
-                            enabled: true,
-                            fontStyle: 'bold'
 				},
+				legend: {
+					display: false,
+					position: 'left',
+					align: 'end',
+					labels: {
+						color: 'rgb(255, 99, 132)',
+						font: { size: 10, family: 'BlinkMacSystemFont' },
+						color: 'black',
+						boxWidth: 13,
+						padding: 5
+					},
+				}
+			},
+            scales: {
+                x: {
+                    title: {
+                        display: true,
+                        text: 'Time'
+                    },
+                    ticks: {
                         source: 'data',
                         autoSkip: true,
                         autoSkipPadding: 45,
                         maxRotation: 0
                     }
-                }]
                 },
-            legend: {
+                y: {
+                    title: {
                         display: true,
-                labels: {
+                        text: resp_time_word + ' (ms)'
-                    fontColor: 'rgb(255, 99, 132)',
-                    defaultFontSize: '10',
-                    defaultFontFamily: 'BlinkMacSystemFont'
                     },
+                    ticks: {
+                        font: {
+                            size: 10
                         }
                     }
-    });
+                }
+            }
+        }
+    };
+
+    const myChart = new Chart(ctx, config);
     charts.push(myChart);
 }

inc/script-6.3.9.js

@@ -256,6 +256,12 @@ function startSetInterval(interval) {
 		} else if (cur_url[0] == "smon.py" && cur_url[1].split('&')[0] == "action=view") {
 			intervalId = setInterval("showSmon('refresh')", interval);
 			showSmon('refresh');
+		} else if (cur_url[0] == "smon.py" && cur_url[1].split('&')[0] == "action=dashboard") {
+			if(interval < 60000) {
+				interval = 60000;
+			}
+			intervalId = setInterval('showSmonHistory()', interval);
+			showSmonHistory();
 		}
 	} else {
 		pauseAutoRefresh();
@@ -701,21 +707,21 @@ function viewLogs() {
 	}
 }
 $( function() {
-	$('a').click(function(e) {
+	// $('a').click(function(e) {
-		try {
+	// 	try {
-			var cur_path = window.location.pathname;
+	// 		var cur_path = window.location.pathname;
-			var attr = $(this).attr('href');
+	// 		var attr = $(this).attr('href');
-			if (typeof attr !== typeof undefined && attr !== false) {
+	// 		if (typeof attr !== typeof undefined && attr !== false) {
-				$('title').text($(this).attr('title'));
+	// 			$('title').text($(this).attr('title'));
-				history.pushState({}, '', $(this).attr('href'));
+	// 			history.pushState({}, '', $(this).attr('href'));
-				if ($(this).attr('href').split('#')[0] && $(this).attr('href').split('#')[0] != cur_path) {
+	// 			if ($(this).attr('href').split('#')[0] && $(this).attr('href').split('#')[0] != cur_path) {
-					window.history.go()
+	// 				window.history.go()
-				}
+	// 			}
-			}
+	// 		}
-		} catch (err) {
+	// 	} catch (err) {
-			console.log(err);
+	// 		console.log(err);
-		}
+	// 	}
-	});
+	// });
 	toastr.options.closeButton = true;
 	toastr.options.progressBar = true;
 	toastr.options.positionClass = 'toast-bottom-full-width';

inc/smon-6.3.16.js

@@ -370,3 +370,49 @@ function clear_check_vals() {
 	$('#new-smon-port').val('');
 	$('#new-smon-packet_size').val('');
 }
+function show_statuses(dashboard_id, check_id) {
+	$.ajax({
+		url: "options.py",
+		data: {
+			smon_history_statuses: 1,
+			dashboard_id: dashboard_id,
+			check_id: check_id,
+			token: $('#token').val()
+		},
+		type: "POST",
+		success: function (data) {
+			data = data.replace(/\s+/g, ' ');
+			if (data.indexOf('error:') != '-1' || data.indexOf('unique') != '-1') {
+				toastr.error(data);
+			} else {
+				toastr.clear();
+				$("#smon_history_statuses").html(data);
+				$( "[title]" ).tooltip({
+					"content": function () {
+						return $(this).attr("data-help");
+					},
+					show: {"delay": 1000}
+				});
+			}
+		}
+	});
+	$.ajax({
+		url: "options.py",
+		data: {
+			smon_cur_status: 1,
+			dashboard_id: dashboard_id,
+			check_id: check_id,
+			token: $('#token').val()
+		},
+		type: "POST",
+		success: function (data) {
+			data = data.replace(/\s+/g, ' ');
+			if (data.indexOf('error:') != '-1' || data.indexOf('unique') != '-1') {
+				toastr.error(data);
+			} else {
+				toastr.clear();
+				$("#cur_status").html(data);
+			}
+		}
+	});
+}

inc/waf-6.3.8.js

@@ -4,7 +4,7 @@ var overview = "/inc/overview-6.3.9.js"
 function showOverviewWaf(serv, hostnamea) {
 	var service = findGetParameter('service');
 	if (service == 'haproxy') {
-		$.getScript('/inc/chart.min.js');
+		$.getScript('/inc/chart.min-4.3.0.js');
 		showWafMetrics();
 	}
 	var i;

index.html

@@ -41,8 +41,8 @@
 		<script defer src="/inc/fontawesome.min.js"></script>
 		<link href="/inc/css/awesome-6.3.9.css" rel="stylesheet">
 		<link href="/inc/css/chart.min.css" rel="stylesheet">
-		<script src="/inc/metrics.js"></script>
+		<script src="/inc/metrics-6.3.16.0.js"></script>
-		<script src="/inc/chart.min.js"></script>
+		<script src="/inc/chart.min-4.3.0.js"></script>
 		<link rel="stylesheet" href="/inc/codemirror/codemirror.css">
 		<script src="/inc/codemirror/codemirror.js"></script>
 		<script src="/inc/codemirror/nginx.js"></script>