Skip to content

Commit

Permalink
Feature #227: Filtering of active diagnostic charts
Browse files Browse the repository at this point in the history 
Feature thanks to automatic.com.au; co-authored-by: @morimoriysmoon
  • Loading branch information
@justparking
justparking authored Jan 6, 2022
1 parent 280523d commit 58bb588
Show file tree
Hide file tree
Showing 4 changed files with 139 additions and 72 deletions.
3 changes: 3 additions & 0 deletions nodel-webui-js/Gruntfile.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -177,6 +177,7 @@ module.exports = function(grunt) {
'./node_modules/@fortawesome/fontawesome-free/css/all.local.css',
'./node_modules/bootstrap/dist/css/bootstrap.css',
'./node_modules/bootstrap/dist/css/bootstrap-theme.css',
'./node_modules/bootstrap-select/dist/css/bootstrap-select.css',
'./node_modules/jquery.scrollbar/jquery.scrollbar.css',
'./node_modules/codemirror/lib/codemirror.css',
'./node_modules/codemirror/addon/dialog/dialog.css',
Expand All @@ -191,6 +192,7 @@ module.exports = function(grunt) {
'./node_modules/@fortawesome/fontawesome-free/css/all.local.css',
'./node_modules/bootstrap/dist/css/bootstrap.css',
'./node_modules/bootstrap/dist/css/bootstrap-theme.css',
'./node_modules/bootstrap-select/dist/css/bootstrap-select.css',
'./node_modules/jquery.scrollbar/jquery.scrollbar.css',
'./node_modules/codemirror/lib/codemirror.css',
'./node_modules/codemirror/addon/dialog/dialog.css',
Expand All @@ -210,6 +212,7 @@ module.exports = function(grunt) {
'./node_modules/jquery/dist/jquery.js',
'./node_modules/jsviews/jsviews.js',
'./node_modules/bootstrap/dist/js/bootstrap.js',
'./node_modules/bootstrap-select/dist/js/bootstrap-select.js',
'./node_modules/moment/moment.js',
'./node_modules/jquery.scrollbar/jquery.scrollbar.js',
'./node_modules/pagedown/Markdown.Converter.js',
Expand Down
1 change: 1 addition & 0 deletions nodel-webui-js/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
"@fortawesome/fontawesome-free": "^5.9.0",
"array.findindex": "^1.0.4",
"bootstrap": "^3.4.1",
"bootstrap-select": "1.13.10",
"cm-resize": "^1.0.1",
"codemirror": "^5.58.3",
"fuzzyset.js": "0.0.8",
Expand Down
203 changes: 131 additions & 72 deletions nodel-webui-js/src/nodel.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1859,7 +1859,7 @@ var setEvents = function(){
$('body').on('mousedown', function (e) {
if($(e.target).closest('.dropdown-menu').length){
$('body').one('mouseup', function (e) {
$('.dropdown').one('hide.bs.dropdown', function (e) {
$('.dropdown').not('.bootstrap-select').one('hide.bs.dropdown', function (e) {
return false;
});
});
Expand Down Expand Up @@ -2067,80 +2067,139 @@ var updateLogForm = function(){
}
};

var updateCharts = function(){
if(typeof $('body').data('nodel-charts') == 'undefined'){
if($(".nodel-charts").length) {
$('body').data('nodel-charts', false);
googleCharts.GoogleCharts.load(updateCharts);
var filterSelected = [];
var doUpdateCharts = function (rawMeasurements) {
var getCategoryAnd = function(measurement) {
var parts = measurement.name.split(".");
var category, subcategory;
if (parts.length === 2) {
category = parts[0];
subcategory = parts[1];
} else {
category = "general";
subcategory = measurement.name;
}
} else if(!$('body').data('nodel-charts') && google){
google.setOnLoadCallback(updateCharts);
$('body').data('nodel-charts', true);
$('body').data('nodel-charts-prepared',{});
} else if($('body').data('nodel-charts')){
$.getJSON('/REST/diagnostics/measurements', function(rawMeasurements) {
rawMeasurements.sort(function(x, y) {
return x.name.localeCompare(y.name);
return [category, subcategory];
};

rawMeasurements.sort(function (x, y) {
return x.name.localeCompare(y.name);
});

// prepare <select> element
var filter = $(".nodel-charts-filter");
if (!filter || filter.length < 1) {
// append element
$(".nodel-charts").append(
'<div class="nodel-charts-filter">\
<select id="charts-filter" multiple data-actions-box="true" data-width="100%" data-size="10" data-header="Select"></select>\
</div>'
);
// populate
$("#charts-filter").selectpicker();

// add options (category only)
var categorySet = {};
rawMeasurements.forEach(function (measurement, i, a) {
var parts = getCategoryAnd(measurement);
var category = parts[0];

if (!categorySet[category]) {
categorySet[category] = category;
$(".nodel-charts-filter select").append('<option value="' + category + '">' + category + "</option>");
}
});
// add callback
$(".nodel-charts-filter select").on("change", function (e) {
// console.info($(this).val()); // []
filterSelected = $(this).val();
// immediately update measurement
$.getJSON("/REST/diagnostics/measurements", function (rawMeasurements) {
doUpdateCharts(rawMeasurements);
});
rawMeasurements.forEach(function(measurement, i, a) {
try {
//drawChart(measurement.values, measurement.isRate, measurement.name);
if (measurement.isRate) scale = 10;
else scale = 1;
var chartData = new google.visualization.DataTable();
chartData.addColumn('string', measurement.name);
chartData.addColumn('number', measurement.name);
measurement.values.forEach(function(element, index, array) {
chartData.addRow(['', element/scale]);
});
var parts = measurement.name.split('.');
var category, subcategory;
if (parts.length == 2) {
category = parts[0];
subcategory = parts[1];
} else {
category = 'general';
subcategory = measurement.name;
}
re = /[^a-zA-Z0-9]/g;
categoryForDiv = category.replace(re, '_');
subcategoryForDiv = subcategory.replace(re, '_');
nameForDiv = measurement.name.replace(re, '_');
var categoryDiv = $('#' + categoryForDiv);
if (categoryDiv.length == 0) {
$('.nodel-charts').append('<div><h6>' + category + '</h6><hr/><div class="col-sm-12"><div class="row" id="'+categoryForDiv+'"></div></div></div>');
categoryDiv = $('#' + categoryForDiv);
}
var chartDiv = $('#' + nameForDiv);
var chart;
if (chartDiv.length == 0) {
// console.log('Preparing new ' + nameForDiv);
chartDiv = categoryDiv.append('<div id="' + nameForDiv + '" class="col-sm-4 chart-min"></div>');
chart = {
chart : new google.visualization.LineChart(document.getElementById(nameForDiv)),
options : {
title : subcategory,
vAxis : {
minValue : 0
},
legend : {
position : 'none'
}
}
};
var prepared = {};
prepared[measurement.name] = chart;
$.extend($('body').data('nodel-charts-prepared'), prepared);
} else {
chart = $('body').data('nodel-charts-prepared')[measurement.name];
}
chart.chart.draw(chartData, chart.options);
} catch (err) {
throw ('draw chart failed related to ' + measurement.name + ': ' + err);
}
});
}

// draw/delete charts
rawMeasurements.forEach(function (measurement, i, a) {
try {
var parts = getCategoryAnd(measurement);
var category = parts[0];
var subcategory = parts[1];

var re = /[^a-zA-Z0-9]/g;
var categoryForDiv = category.replace(re, "_");
var subcategoryForDiv = subcategory.replace(re, "_");
var nameForDiv = measurement.name.replace(re, "_");
var categoryDiv = $("#" + categoryForDiv);

// delete charts unless selected
if (filterSelected.indexOf(category) === -1) {
// get rid of element
$("#" + categoryForDiv + "_wrapper").remove();
return;
}

//drawChart(measurement.values, measurement.isRate, measurement.name);
var scale = measurement.isRate ? 10 : 1;
var chartData = new google.visualization.DataTable();
chartData.addColumn("string", measurement.name);
chartData.addColumn("number", measurement.name);
measurement.values.forEach(function (element, index, array) {
chartData.addRow(["", element / scale]);
});
}).always(function(){
$('body').data('nodel-charts-timer', setTimeout(function() { updateCharts(); }, 10000));

if (categoryDiv.length === 0) {
$(".nodel-charts").append('<div id="' + categoryForDiv + "_wrapper" + '"><h6>' + category + '</h6><hr/><div class="col-sm-12"><div class="row" id="' + categoryForDiv + '"></div></div></div>');
categoryDiv = $("#" + categoryForDiv);
}
var chartDiv = $("#" + nameForDiv);
var chart;
if (chartDiv.length === 0) {
// console.log('Preparing new ' + nameForDiv);
chartDiv = categoryDiv.append(
'<div id="' + nameForDiv + '" class="col-sm-4 chart-min"></div>'
);
chart = {
chart: new google.visualization.LineChart(document.getElementById(nameForDiv)),
options: {
title: subcategory,
vAxis: {
minValue: 0,
},
legend: {
position: "none",
},
},
};
var prepared = {};
prepared[measurement.name] = chart;
$.extend($("body").data("nodel-charts-prepared"), prepared);
} else {
chart = $("body").data("nodel-charts-prepared")[measurement.name];
}
chart.chart.draw(chartData, chart.options);
} catch (err) {
throw "draw chart failed related to " + measurement.name + ": " + err;
}
});
};

var updateCharts = function () {
if (typeof $("body").data("nodel-charts") == "undefined") {
if ($(".nodel-charts").length) {
$("body").data("nodel-charts", false);
googleCharts.GoogleCharts.load(updateCharts);
}
} else if (!$("body").data("nodel-charts") && google) {
google.setOnLoadCallback(updateCharts);
$("body").data("nodel-charts", true);
$("body").data("nodel-charts-prepared", {});
} else if ($("body").data("nodel-charts")) {
$.getJSON("/REST/diagnostics/measurements", function (rawMeasurements) {
doUpdateCharts(rawMeasurements);
}).always(function () {
$("body").data("nodel-charts-timer", setTimeout(function() { updateCharts(); }, 10000));
});
}
};
Expand Down
4 changes: 4 additions & 0 deletions nodel-webui-js/src/theme.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -645,9 +645,13 @@ div.nodel-console, div.nodel-serverlog {
overflow-anchor: none;
}
div.nodel-charts {
margin-bottom: 30px;
.chart-min{
min-height: 150px;
}
.dropdown-menu {
min-width: 100% !important;
}
}
.navbar-form {
padding-right: 0;
Expand Down

0 comments on commit 58bb588

Please sign in to comment.