From db73a236a0d9e96c84d5f3eefddd630cc18059f2 Mon Sep 17 00:00:00 2001
From: "valentin.pocotilenco" <valentin.pocotilenco@renam.md>
Date: Thu, 25 Apr 2024 22:11:13 +0300
Subject: [PATCH] api bugFix. web refactoring
---
api.py | 4 +-
web/index.php | 6 +-
web/statistics.css | 53 +++++++++++-
web/statistics.js | 197 ++++++++++++++++++++++++++-------------------
4 files changed, 173 insertions(+), 87 deletions(-)
diff --git a/api.py b/api.py
index 72d3737..4fdcaff 100755
--- a/api.py
+++ b/api.py
@@ -119,7 +119,7 @@ def parseLog(lines,criteria):
for line in lines:
row = line.split('|')
- if len(row) <= 1:
+ if len(row) <= 1 or row[3].find("api/webdata") >= 0:
continue
rowDate = datetime.strptime(clearDateString(row[1]), '%a %b %d %H:%M:%S %Y').strftime('%Y-%m-%d')
@@ -515,7 +515,7 @@ class WebData(Resource):
lines = fo.readlines()
except FileNotFoundError as e:
- print(e)
+ # print(e)
results = {}
results = parseLog(lines, criteria)
diff --git a/web/index.php b/web/index.php
index 2e902d9..9889cc3 100644
--- a/web/index.php
+++ b/web/index.php
@@ -114,14 +114,16 @@ $data['check_result'] = htmlspecialchars($_GET["check_result"]);
<script type="text/javascript" src="statistics.js" /></script>
</div> <!-- END eccs-central -->
<div id="statisticsModal" class="modal">
- <div class="modal-content" style="height:45vh; width:85vw">
+ <div class="modal-content">
<span class="close">×</span>
<div class="chart-error" style="display: none;">
<i class="fa fa-exclamation-triangle"></i> Something happened. Can't retrieve data
</div>
- <div class="chart-container" style="position: relative; height:40vh; width:80vw">
+ <div class="chart-container">
<canvas id="statistics"></canvas>
</div>
+ <div class="data-container">
+ </div>
</div>
</div>
</body>
diff --git a/web/statistics.css b/web/statistics.css
index 8e7eba6..a997d6d 100644
--- a/web/statistics.css
+++ b/web/statistics.css
@@ -13,10 +13,23 @@
.modal-content {
background-color: #fefefe;
- margin: 15% auto 0;
+ margin: 5% auto 0;
padding: 20px;
border: 1px solid #888;
- width: 80%;
+ width:85vw;
+ min-height: 30vh;
+}
+
+.chart-container {
+ height: 30vh;
+ width: 80vw;
+}
+
+.data-container {
+ max-height:50vh;
+ width:80vw;
+ overflow-y: auto;
+ margin-top: 1rem;
}
.close {
@@ -31,4 +44,40 @@
color: black;
text-decoration: none;
cursor: pointer;
+}
+
+.collapsible {
+ background-color: #777;
+ color: white;
+ cursor: pointer;
+ padding: 0.5rem;
+ width: 100%;
+ border: none;
+ text-align: left;
+ outline: none;
+ font-size: 12px;
+}
+
+.active, .collapsible:hover {
+ background-color: #555;
+}
+
+.collapsible:after {
+ content: '\002B';
+ color: white;
+ font-weight: bold;
+ float: right;
+ margin-left: 5px;
+}
+
+.active:after {
+ content: "\2212";
+}
+
+.content {
+ padding: 0 18px;
+ max-height: 0;
+ overflow: hidden;
+ transition: max-height 0.2s ease-out;
+ background-color: #f1f1f1;
}
\ No newline at end of file
diff --git a/web/statistics.js b/web/statistics.js
index 14c307d..c4f8841 100644
--- a/web/statistics.js
+++ b/web/statistics.js
@@ -1,6 +1,17 @@
var statChart = {};
var baseURL = window.location.protocol + "//" + window.location.host + "/eccs";
+$(document).ready(function() {
+ $(".close").on("click", function() {
+ $("#statisticsModal").hide()
+ });
+
+ $("#statisticsButton").on("click", function() {
+ $("#statisticsModal").show()
+ getStatistics();
+ })
+});
+
function getStatistics() {
showLoading();
let reqData = {}
@@ -11,92 +22,98 @@ function getStatistics() {
if ($("#eccstable thead th:nth-last-child(2) input").val() != '') {
reqData['idp'] = $("#eccstable thead th:nth-last-child(2) input").val();
}
-
$.ajax({
url: baseURL + "/api/webdata",
type : 'GET',
contentType: "application/json",
data : reqData,
success: function(result) {
- drawChart(result)
+ try {
+ parsedData = $.parseJSON(result)
+ } catch (err) {
+ showMessage("Invalid data format received. Can't use to draw chart");
+ }
+
+ if ($.isEmptyObject(parsedData)) {
+ showMessage("No data for parameters specified. Please refine query string.");
+ return false;
+ }
+ fillInfo(parsedData);
},
- error: function (jqXHR,error,thrownError) {
+ error: function () {
showMessage("Something happened. Can't retrieve data");
}
});
}
-
function showMessage(text) {
- hideChart();
+ hideModalContent();
hideLoading();
$("#statisticsModal .chart-error span").text(text)
$("#statisticsModal .chart-error").css('display', 'block')
}
-
+function hideMessage() {
+ $("#statisticsModal .chart-error").css('display', 'none')
+}
function showLoading() {
- hideChart();
+ hideModalContent();
hideMessage();
$("#statisticsModal .chart-loading").css('display', 'block')
}
-
-function showChart() {
- hideMessage();
- hideLoading();
- $("#statisticsModal .chart-container").css('display', 'block')
-}
-
-function hideMessage() {
- $("#statisticsModal .chart-error").css('display', 'none')
-}
-
function hideLoading() {
$("#statisticsModal .chart-loading").css('display', 'none')
}
-
-function hideChart() {
- $("#statisticsModal .chart-container").css('display', 'none')
+function fillInfo(parsedData) {
+ let chartConfig = {};
+ let tabledata = {};
+ chartConfig["key"] = [];
+ chartConfig["data1"] = [];
+ chartConfig["data2"] = [];
+ chartConfig["data3"] = [];
+ $.each( parsedData, function( index, value ) {
+ if (value.request_count === undefined || value.request_uniq === undefined
+ || value.request_count.api === undefined || value.request_count.web === undefined
+ || value.request_uniq.idp === undefined) {
+ return true;
+ }
+ chartConfig["key"].push(index);
+ chartConfig["data1"].push(value.request_count.api);
+ chartConfig["data2"].push(value.request_count.web);
+ chartConfig["data3"].push(value.request_uniq.idp);
+ tabledata[index] = value.idp;
+ });
+ if (!chartConfig["key"].length) {
+ showMessage("No valid data for parameters specified. Please refine query string.");
+ return false;
+ }
+ drawChart(chartConfig);
+ fillTable(tabledata);
+ hideMessage();
+ hideLoading();
+ showModalContent();
}
-
-function drawChart(data) {
+function drawChart(chartData) {
+ let chartType = 'line';
+ let dataSet = [];
let key = [];
- let data1 = [];
- let data2 = [];
- let data3 = [];
- let chartData;
-
- try {
- chartData = $.parseJSON(data)
- } catch (err) {
- showMessage("Invalid data format received. Can't use to draw chart");
- }
-
- if ($.isEmptyObject(chartData)) {
- showMessage("No data for parameters specified. Please refine query string.");
- return false;
+ if (chartData["key"].length == 1) {
+ chartType = 'doughnut';
+ dataSet = [
+ { label: chartData["key"][0], data: [chartData["data1"][0], chartData["data2"][0], chartData["data3"][0]] },
+ ];
+ key = ['API', 'WEB', 'Unique IdP'];
+ } else {
+ dataSet = [
+ { label: 'API', data: chartData["data1"] },
+ { label: 'WEB', data: chartData["data2"] },
+ { label: 'Unique IdP', data: chartData["data3"] }
+ ];
+ key = chartData["key"];
}
-
- $.each( chartData, function( index, value ) {
- key.push(index)
- data1.push(value.request_count.api)
- data2.push(value.request_count.web)
- data3.push(value.request_uniq.idp)
- });
-
- let dataSet = [
- { label: 'API', data: data1 },
- { label: 'WEB', data: data2 },
- { label: 'Unique IdP', data: data3 }
- ];
-
let options = {
- type: 'line',
+ type: chartType,
data: {
labels: key,
datasets: dataSet
- // { label: 'API', data: data1 },
- // { label: 'WEB', data: data2 },
- // { label: 'Unique IdP', data: data3 }
- // ]
},
options: {
responsive: true,
@@ -108,11 +125,10 @@ function drawChart(data) {
}
}
var ctx = document.getElementById('statistics').getContext('2d');
-
- showChart();
-
-
-
+ if (!$.isEmptyObject(statChart) && statChart.config.type != chartType) {
+ statChart.destroy();
+ statChart = {};
+ }
if ($.isEmptyObject(statChart)) {
statChart = new Chart(ctx, options);
} else {
@@ -121,25 +137,44 @@ function drawChart(data) {
statChart.update();
}
}
-
-$(document).ready(function() {
- $(".close").on("click", function() {
- $("#statisticsModal").hide()
- });
-
- $(document).on('click',function(e) {
- if(($(e.target).closest("#statisticsModal").length > 0) && $(e.target).closest("canvas").length == 0
- && !$(e.target).closest("div").hasClass('modal-content') && !$("#statisticsModal").hasClass('immune')) {
- $("#statisticsModal").hide();
+function fillTable(tabledata) {
+ let container = $(".data-container")
+ container.html("");
+ $.each(tabledata, function (index, value) {
+ let list = '<ul style="list-style-type: decimal;">';
+ if (Object.keys(value).length > 0) {
+ $.each(value, function(idp, count) {
+ list += "<li>"+idp+":<strong>"+count+"</strong></li>"
+ })
+ } else {
+ list += 'No data';
}
- });
-
- $("#statisticsButton").on("click", function() {
- $("#statisticsModal").addClass('immune')
- $("#statisticsModal").show()
- setTimeout(function() {
- $("#statisticsModal").removeClass('immune')
- }, 1000);
- getStatistics();
+ list += "</ul>"
+ let button = document.createElement("button")
+ button.classList.add("collapsible");
+ button.textContent = index;
+ button.addEventListener("click", function() {
+ this.classList.toggle("active");
+ var content = this.nextElementSibling;
+
+ if (content.style.maxHeight){
+ content.style.maxHeight = null;
+ } else {
+ content.style.maxHeight = content.scrollHeight + "px";
+ }
+ });
+ let div = document.createElement("div")
+ div.classList.add("content");
+ div.innerHTML=list;
+ container.append(button)
+ container.append(div)
})
-});
+}
+function hideModalContent() {
+ $("#statisticsModal .chart-container").css('display', 'none')
+ $("#statisticsModal .data-container").css('display', 'none')
+}
+function showModalContent() {
+ $("#statisticsModal .chart-container").css('display', 'block')
+ $("#statisticsModal .data-container").css('display', 'block')
+}
--
GitLab