Skip to content

erp5
erp5
Commit 91122e12 authored by Alain Takoudjou's avatar Alain Takoudjou
Browse files
Options

[erp5_web_monitoring] split graph display and allow to disable auto update 

Show Ressource consumption graph into separated graphs. Auto update of graph content is disabled by default, a new option is added to enable if needed.
parent b9674a7c
Hide whitespace changes
Inline Side-by-side
Showing with 213 additions and 139 deletions
bt5/erp5_web_monitoring/PathTemplateItem/web_page_module/gadget_erp5_page_ojsm_resources_view_html.html
View file @ 91122e12
......@@ -26,7 +26,6 @@
<body>
<div data-gadget-url="gadget_officejs_monitoring_jio.html" data-gadget-scope="jio_gadget" data-gadget-sandbox="public"></div>
<h2 class="header-notice"><i class="ui-icon ui-icon-custom ui-icon-info"></i> Graph content will be reloaded automatically every minutes.</h2>
<!--<ul class="ui-grid-column ui-grid-column-5 graph_cpu">
<li class="ui-grid-span-5 custom-grid-wrap graph-cell">
<div data-gadget-url="gadget_erp5_graph.html" data-gadget-scope="graph_cpu" class="graph graph-h-medium" data-gadget-sandbox="public"></div>
......@@ -36,13 +35,22 @@
</li>
</ul>-->
<div class="ui-grid-a ui-responsive">
<form class="save_form ui-body-c" novalidate style="padding-left: 30px">
<div data-gadget-url="gadget_erp5_form.html"
data-gadget-scope="form_cpu_graph"
data-gadget-sandbox="public">
</div>
</form>
<div data-gadget-url="gadget_field_graph_dygraph.html" data-gadget-scope="graph_cpu" class="graph graph-h-medium" data-gadget-sandbox="public"></div>
</div>
<div class="ui-grid-b ui-responsive">
<div data-gadget-url="gadget_field_graph_dygraph.html" data-gadget-scope="graph_io" class="graph graph-h-medium" data-gadget-sandbox="public"></div>
</div>
<div class="ui-grid-a ui-responsive">
<div data-gadget-url="gadget_field_graph_dygraph.html" data-gadget-scope="graph_memory_used" class="graph graph-h-medium" data-gadget-sandbox="public"></div>
</div>
<div class="ui-grid-a ui-responsive">
<div data-gadget-url="gadget_field_graph_dygraph.html" data-gadget-scope="graph_io_read" class="graph graph-h-medium" data-gadget-sandbox="public"></div>
</div>
<div class="ui-grid-a ui-responsive">
<div data-gadget-url="gadget_field_graph_dygraph.html" data-gadget-scope="graph_io_write" class="graph graph-h-medium" data-gadget-sandbox="public"></div>
</div>
</body>
</html>
bt5/erp5_web_monitoring/PathTemplateItem/web_page_module/gadget_erp5_page_ojsm_resources_view_html.xml
View file @ 91122e12
......@@ -246,7 +246,7 @@
</item>
<item>
<key> <string>serial</string> </key>
<value> <string>963.22427.36654.49664</string> </value>
<value> <string>971.40737.38602.8192</string> </value>
</item>
<item>
<key> <string>state</string> </key>
......@@ -264,7 +264,7 @@
</tuple>
<state>
<tuple>
<float>1510327355.11</float>
<float>1542206472.63</float>
<string>UTC</string>
</tuple>
</state>
......
bt5/erp5_web_monitoring/PathTemplateItem/web_page_module/gadget_erp5_page_ojsm_resources_view_js.js
View file @ 91122e12
......@@ -14,7 +14,7 @@
max_date = data[data.length - 1].split(',')[0];
begin_date = new Date(max_date);
end_date = new Date(max_date);
begin_date.setHours(begin_date.getHours() - 2);
begin_date.setHours(begin_date.getHours() - 8);
date_window = [Date.parse(begin_date), Date.parse(end_date)];
}
return date_window;
......@@ -60,7 +60,7 @@
date_diff,
line_list = [],
data_list = [],
axis_dict = {};
axis_list = [];
function convertElement(element) {
var element_list = element.split(',');
......@@ -72,22 +72,32 @@
];
}
//"date, io rw counter, io cycles counter, disk used"
line_list = ["date", "io rw count (Kb/s)", "io cycles count (/1000)"]; //, "disk used"];
axis_dict["0"] = {
"title": "IO resources usage",
"scale_type": "linear",
"value_type": "date",
"zoom_range": date_window
};
for (i = 1; i < line_list.length; i += 1) {
line_list = ["io rw count (Kb/s)", "io cycles count (/1000)"]; //, "disk used"];
axis_list.push({
"0": {
"title": "IO read/write counter",
"scale_type": "linear",
"value_type": "date",
"zoom_range": date_window
}
});
axis_list.push({
"0": {
"title": "IO cycles counter",
"scale_type": "linear",
"value_type": "date",
"zoom_range": date_window
}
});
for (i = 0; i < line_list.length; i += 1) {
line_list[i] = line_list[i].trim();
data_list.push({
value_dict: {"0": [], "1": []},
type: "surface",
axis_mapping_id_dict: {"1": "1_" + i},
axis_mapping_id_dict: {"1": "1_1"},
title: line_list[i]
});
axis_dict["1_" + i] = {"title": line_list[i], "position": "right"};
axis_list[i]["1_1"] = {"title": line_list[i], "position": "right"};
}
if (gadget.property_dict.io_data.data.length > 2) {
prev_element = convertElement(gadget.property_dict.io_data.data[1]);
......@@ -106,32 +116,52 @@
prev_element = element;
}
}
return {
value: {
data: data_list,
layout: {
axis_dict : axis_dict,
title: "IO resources usage"
return [
{
value: {
data: [data_list[0]],
layout: {
axis_dict : axis_list[0],
title: "IO write counter"
}
}
},
{
value: {
data: [data_list[1]],
layout: {
axis_dict : axis_list[1],
title: "IO cycles counter"
}
}
}
};
];
}
function updateGraph(gadget) {
function updateGraph(gadget, reload_only) {
return new RSVP.Queue()
.push(function () {
var key,
promise_list = [];
for (key in gadget.property_dict.resource_dict) {
if (gadget.property_dict.resource_dict.hasOwnProperty(key)) {
promise_list.push(loadGraphData(gadget, key));
}
if (reload_only === true) {
return;
}
return RSVP.all(promise_list);
})
.push(function () {
var data = updateIOData(gadget, gadget.property_dict.date_window);
return gadget.property_dict.graph_io.render(data);
return new RSVP.Queue()
.push(function () {
var key,
promise_list = [];
for (key in gadget.property_dict.resource_dict) {
if (gadget.property_dict.resource_dict.hasOwnProperty(key)) {
promise_list.push(loadGraphData(gadget, key));
}
}
return RSVP.all(promise_list);
})
.push(function () {
var data = updateIOData(gadget, gadget.property_dict.date_window);
return RSVP.all([
gadget.property_dict.graph_io_read.render(data[0]),
gadget.property_dict.graph_io_write.render(data[1])
]);
});
})
.push(function () {
var data_list = [],
......@@ -183,11 +213,28 @@
});
})
.push(function () {
//return gadget.element.querySelector('form button[type="submit"]').click();
return gadget.getDeclaredGadget('form_cpu_graph')
.push(function (form_gadget) {
return form_gadget.getContent();
})
.push(function (form_doc) {
return form_doc.cpu_graph_select_key;
});
})
.push(function (cpu_graph_key) {
var data_list = [],
axis_dict = {},
previous_time = 0,
line_list,
graph_index = 1,
cpu_time_index = -1,
cpu_graph_dict = {
cpu_percent: "CPU percent",
cpu_time: "CPU time",
cpu_threads: "CPU threads",
cpu_process: "total process"
},
i,
j;
......@@ -209,34 +256,40 @@
line_list = ["date", "total process", "CPU percent",
"CPU time", "CPU threads"];
}
axis_dict["0"] = {
"title": "Process resources usage",
"scale_type": "linear",
"value_type": "date",
"zoom_range": gadget.property_dict.date_window
};
for (i = 1; i < line_list.length; i += 1) {
line_list[i] = line_list[i].trim();
data_list.push({
value_dict: {"0": [], "1": []},
type: "line",
axis_mapping_id_dict: {"1": "1_" + i},
title: line_list[i]
});
if (line_list[i] === "CPU time") {
cpu_time_index = i;
}
axis_dict["1_" + i] = {"title": line_list[i], "position": "right"};
if (line_list[i] === cpu_graph_dict[cpu_graph_key]) {
graph_index = i;
break;
}
}
axis_dict["0"] = {
"title": line_list[graph_index],
"scale_type": "linear",
"value_type": "date",
"zoom_range": gadget.property_dict.date_window
};
axis_dict["1_1"] = {"title": line_list[graph_index], "position": "right"};
data_list.push({
value_dict: {"0": [], "1": []},
type: "line",
axis_mapping_id_dict: {"1": "1_1"},
title: line_list[graph_index]
});
for (i = 1; i < gadget.property_dict.process_data.data.length; i += 1) {
line_list = gadget.property_dict.process_data.data[i].split(',');
for (j = 1; j < line_list.length; j += 1) {
// XXX - repeating date everytime
data_list[j - 1].value_dict["0"].push(line_list[0]);
if (j === cpu_time_index) {
data_list[j - 1].value_dict["1"].push(getCPUTime(line_list[j]));
} else {
data_list[j - 1].value_dict["1"].push(line_list[j]);
// Date
if (j === graph_index) {
data_list[0].value_dict["0"].push(line_list[0]);
if (j === cpu_time_index) {
data_list[0].value_dict["1"].push(getCPUTime(line_list[j]));
} else {
data_list[0].value_dict["1"].push(line_list[j]);
}
}
}
}
......@@ -259,6 +312,7 @@
})
.ready(function (gadget) {
gadget.property_dict = {};
gadget.property_dict.disable_update = true;
gadget.property_dict.resource_dict = {
memory_resource: "monitor_resource_memory.data",
cpu_resource: "monitor_resource_process.data",
......@@ -278,9 +332,15 @@
});
})
.ready(function (gadget) {
return gadget.getDeclaredGadget("graph_io")
.push(function (graph_io) {
gadget.property_dict.graph_io = graph_io;
return gadget.getDeclaredGadget("graph_io_read")
.push(function (graph_io_read) {
gadget.property_dict.graph_io_read = graph_io_read;
});
})
.ready(function (gadget) {
return gadget.getDeclaredGadget("graph_io_write")
.push(function (graph_io_write) {
gadget.property_dict.graph_io_write = graph_io_write;
});
})
.ready(function (gadget) {
......@@ -309,6 +369,11 @@
gadget.getUrlFor({command: 'change', options: {
page: 'ojsm_processes_view',
key: gadget.state.opml_outline.reference
}}),
gadget.getUrlFor({command: 'change', options: {
page: 'ojsm_resources_view',
key: gadget.state.opml_outline.reference,
auto_reload: "yes"
}})
]);
})
......@@ -319,6 +384,66 @@
processes_url: url_list[1]
});
})
.push(function () {
return gadget.getDeclaredGadget('form_cpu_graph');
})
.push(function (form_view) {
return form_view.render({
erp5_document: {
"_embedded": {"_view": {
"my_graph_auto_update": {
"description": "Enable graph content automatic update",
"title": "Auto update graph every minutes",
"default": "off",
"items": [
["Off", "off"],
["On", "on"]
],
"css_class": "",
"editable": 1,
"key": "graph_auto_update_key",
"hidden": 0,
"type": "ListField"
},
"my_cpu_graph_select": {
"description": "",
"title": "CPU graph to display",
"default": "cpu_percent",
"items": [
["CPU Percentage", "cpu_percent"],
["CPU Used Time", "cpu_time"],
["CPU Threads Amount", "cpu_threads"],
["Total Process Amount", "cpu_process"]
],
"editable": 1,
"key": "cpu_graph_select_key",
"hidden": 0,
"type": "ListField"
}
}},
"_links": {
"type": {
// form_list display portal_type in header
name: ""
}
}
},
form_definition: {
group_list: [[
"left",
[["my_graph_auto_update"], ["my_cpu_graph_select"]]
],
[
"right",
[]
],
[
"bottom",
[]
]]
}
});
})
.push(function () {
gadget.property_dict.jio_gadget.createJio({
type: "webhttp",
......@@ -339,11 +464,29 @@
.declareAcquiredMethod('jio_get', 'jio_get')
.declareAcquiredMethod("getUrlFor", "getUrlFor")
.declareAcquiredMethod("notifySubmitted", 'notifySubmitted')
.declareAcquiredMethod("redirect", "redirect")
//.declareAcquiredMethod("notifySubmitting", 'notifySubmitting')
.onLoop(function () {
return updateGraph(this);
if (!this.property_dict.disable_update) {
return updateGraph(this);
}
}, 65000)
.onEvent('change', function (evt) {
var gadget = this;
if (evt.target.getAttribute("name") === "cpu_graph_select_key") {
updateGraph(gadget, true);
}
if (evt.target.getAttribute("name") === "graph_auto_update_key") {
if (evt.target.value == "on") {
gadget.property_dict.disable_update = false;
} else {
gadget.property_dict.disable_update = true;
}
}
})
/////////////////////////////////////////////////////////////////
// declared service
/////////////////////////////////////////////////////////////////
......@@ -351,83 +494,6 @@
return updateGraph(this);
/*function toggleSerieVisibility(evt) {
var checkbox = evt.target.nextSibling,
index = $(evt.target).attr('rel');
if ($(checkbox).prop("checked")) {
$(checkbox).prop("checked", false).checkboxradio("refresh");
} else {
$(checkbox).prop("checked", true).checkboxradio("refresh");
}
return gadget.property_dict.graph_cpu.setVisibility(parseInt(index, 10), $(checkbox).prop("checked"))
.push(function () {
return evt;
});
}*/
/**.push(function () {
return gadget.property_dict.graph_cpu.render(
gadget.property_dict.process_data.data.join('\n'),
{
xlabel: '<span class="graph-label"><i class="fa fa-line-chart"></i> Process resources usage</span>',
labelsDivStyles: { 'textAlign': 'right' },
dateWindow: date_window,
},
"customInteractionModel"
);
})
.push(function () {
var label_list = gadget.property_dict.graph_cpu_label_list,
element = 'graph_cpu';
if (gadget.property_dict.graph_cpu_label_list.length > 0) {
label_list = label_list.slice(1); // remove date column
return gadget.property_dict.graph_cpu.getColors()
.push(function (color_list) {
var label_content,
name_list = [],
i;
for (i = 0; i < label_list.length; i += 1) {
name_list.push({
name: label_list[i],
id: "label_" + label_list[i].trim().replace(/\s/g, '_'),
color: color_list[i],
graph: element,
index: i
});
}
label_content = graph_labels_widget({
label_list: name_list
});
gadget.property_dict.element.querySelector(".ui-panel-overview ." + element + " .ui-grid-span-1")
.innerHTML = label_content;
return $(gadget.property_dict.element.querySelectorAll("[data-role=controlgroup]"))
.controlgroup().controlgroup("refresh");
});
}
})
.push(function () {
var promise_list = [],
element_list = gadget.property_dict.element.querySelectorAll("label.graph_cpu"),
i;
for (i = 0; i < element_list.length; i += 1) {
promise_list.push(
loopEventListener(
element_list[i],
'click',
false,
toggleSerieVisibility
)
);
if ($(element_list[i]).attr('for').toLowerCase() !== 'label_cpu_percent' && $(element_list[i]).attr('for').toLowerCase() !== 'label_total_process') {
promise_list.push(gadget.property_dict.graph_cpu.setVisibility(
parseInt($(element_list[i]).attr('rel'), 10), false)
);
promise_list.push($(element_list[i]).click());
}
}
RSVP.all(promise_list);
return updateGraphTimer();
})**/
});
}(window, rJS, RSVP));
\ No newline at end of file
bt5/erp5_web_monitoring/PathTemplateItem/web_page_module/gadget_erp5_page_ojsm_resources_view_js.xml
View file @ 91122e12
......@@ -242,7 +242,7 @@
</item>
<item>
<key> <string>serial</string> </key>
<value> <string>963.27984.14453.52343</string> </value>
<value> <string>971.40812.22256.57156</string> </value>
</item>
<item>
<key> <string>state</string> </key>
......@@ -260,7 +260,7 @@
</tuple>
<state>
<tuple>
<float>1510651329.34</float>
<float>1542208228.67</float>
<string>UTC</string>
</tuple>
</state>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7