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
Show 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 @@ ...@@ -26,7 +26,6 @@
<body> <body>
<div data-gadget-url="gadget_officejs_monitoring_jio.html" data-gadget-scope="jio_gadget" data-gadget-sandbox="public"></div> <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"> <!--<ul class="ui-grid-column ui-grid-column-5 graph_cpu">
<li class="ui-grid-span-5 custom-grid-wrap graph-cell"> <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> <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 @@ ...@@ -36,13 +35,22 @@
</li> </li>
</ul>--> </ul>-->
<div class="ui-grid-a ui-responsive"> <div class="ui-grid-a ui-responsive">
<div data-gadget-url="gadget_field_graph_dygraph.html" data-gadget-scope="graph_cpu" class="graph graph-h-medium" data-gadget-sandbox="public"></div> <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> </div>
<div class="ui-grid-b ui-responsive"> </form>
<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 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>
<div class="ui-grid-a ui-responsive"> <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 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>
<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> </body>
</html> </html>
bt5/erp5_web_monitoring/PathTemplateItem/web_page_module/gadget_erp5_page_ojsm_resources_view_html.xml
View file @ 91122e12
...@@ -246,7 +246,7 @@ ...@@ -246,7 +246,7 @@
</item> </item>
<item> <item>
<key> <string>serial</string> </key> <key> <string>serial</string> </key>
<value> <string>963.22427.36654.49664</string> </value> <value> <string>971.40737.38602.8192</string> </value>
</item> </item>
<item> <item>
<key> <string>state</string> </key> <key> <string>state</string> </key>
...@@ -264,7 +264,7 @@ ...@@ -264,7 +264,7 @@
</tuple> </tuple>
<state> <state>
<tuple> <tuple>
<float>1510327355.11</float> <float>1542206472.63</float>
<string>UTC</string> <string>UTC</string>
</tuple> </tuple>
</state> </state>
......
bt5/erp5_web_monitoring/PathTemplateItem/web_page_module/gadget_erp5_page_ojsm_resources_view_js.js
View file @ 91122e12
...@@ -14,7 +14,7 @@ ...@@ -14,7 +14,7 @@
max_date = data[data.length - 1].split(',')[0]; max_date = data[data.length - 1].split(',')[0];
begin_date = new Date(max_date); begin_date = new Date(max_date);
end_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)]; date_window = [Date.parse(begin_date), Date.parse(end_date)];
} }
return date_window; return date_window;
...@@ -60,7 +60,7 @@ ...@@ -60,7 +60,7 @@
date_diff, date_diff,
line_list = [], line_list = [],
data_list = [], data_list = [],
axis_dict = {}; axis_list = [];
function convertElement(element) { function convertElement(element) {
var element_list = element.split(','); var element_list = element.split(',');
...@@ -72,22 +72,32 @@ ...@@ -72,22 +72,32 @@
]; ];
} }
//"date, io rw counter, io cycles counter, disk used" //"date, io rw counter, io cycles counter, disk used"
line_list = ["date", "io rw count (Kb/s)", "io cycles count (/1000)"]; //, "disk used"]; line_list = ["io rw count (Kb/s)", "io cycles count (/1000)"]; //, "disk used"];
axis_dict["0"] = { axis_list.push({
"title": "IO resources usage", "0": {
"title": "IO read/write counter",
"scale_type": "linear", "scale_type": "linear",
"value_type": "date", "value_type": "date",
"zoom_range": date_window "zoom_range": date_window
}; }
for (i = 1; i < line_list.length; i += 1) { });
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(); line_list[i] = line_list[i].trim();
data_list.push({ data_list.push({
value_dict: {"0": [], "1": []}, value_dict: {"0": [], "1": []},
type: "surface", type: "surface",
axis_mapping_id_dict: {"1": "1_" + i}, axis_mapping_id_dict: {"1": "1_1"},
title: line_list[i] 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) { if (gadget.property_dict.io_data.data.length > 2) {
prev_element = convertElement(gadget.property_dict.io_data.data[1]); prev_element = convertElement(gadget.property_dict.io_data.data[1]);
...@@ -106,18 +116,34 @@ ...@@ -106,18 +116,34 @@
prev_element = element; prev_element = element;
} }
} }
return { return [
{
value: { value: {
data: data_list, data: [data_list[0]],
layout: { layout: {
axis_dict : axis_dict, axis_dict : axis_list[0],
title: "IO resources usage" 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 () {
if (reload_only === true) {
return;
}
return new RSVP.Queue() return new RSVP.Queue()
.push(function () { .push(function () {
var key, var key,
...@@ -131,7 +157,11 @@ ...@@ -131,7 +157,11 @@
}) })
.push(function () { .push(function () {
var data = updateIOData(gadget, gadget.property_dict.date_window); var data = updateIOData(gadget, gadget.property_dict.date_window);
return gadget.property_dict.graph_io.render(data); return RSVP.all([
gadget.property_dict.graph_io_read.render(data[0]),
gadget.property_dict.graph_io_write.render(data[1])
]);
});
}) })
.push(function () { .push(function () {
var data_list = [], var data_list = [],
...@@ -183,11 +213,28 @@ ...@@ -183,11 +213,28 @@
}); });
}) })
.push(function () { .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 = [], var data_list = [],
axis_dict = {}, axis_dict = {},
previous_time = 0, previous_time = 0,
line_list, line_list,
graph_index = 1,
cpu_time_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, i,
j; j;
...@@ -209,34 +256,40 @@ ...@@ -209,34 +256,40 @@
line_list = ["date", "total process", "CPU percent", line_list = ["date", "total process", "CPU percent",
"CPU time", "CPU threads"]; "CPU time", "CPU threads"];
} }
for (i = 1; i < line_list.length; i += 1) {
line_list[i] = line_list[i].trim();
if (line_list[i] === "CPU time") {
cpu_time_index = i;
}
if (line_list[i] === cpu_graph_dict[cpu_graph_key]) {
graph_index = i;
break;
}
}
axis_dict["0"] = { axis_dict["0"] = {
"title": "Process resources usage", "title": line_list[graph_index],
"scale_type": "linear", "scale_type": "linear",
"value_type": "date", "value_type": "date",
"zoom_range": gadget.property_dict.date_window "zoom_range": gadget.property_dict.date_window
}; };
for (i = 1; i < line_list.length; i += 1) { axis_dict["1_1"] = {"title": line_list[graph_index], "position": "right"};
line_list[i] = line_list[i].trim();
data_list.push({ data_list.push({
value_dict: {"0": [], "1": []}, value_dict: {"0": [], "1": []},
type: "line", type: "line",
axis_mapping_id_dict: {"1": "1_" + i}, axis_mapping_id_dict: {"1": "1_1"},
title: line_list[i] title: line_list[graph_index]
}); });
if (line_list[i] === "CPU time") {
cpu_time_index = i;
}
axis_dict["1_" + i] = {"title": line_list[i], "position": "right"};
}
for (i = 1; i < gadget.property_dict.process_data.data.length; i += 1) { for (i = 1; i < gadget.property_dict.process_data.data.length; i += 1) {
line_list = gadget.property_dict.process_data.data[i].split(','); line_list = gadget.property_dict.process_data.data[i].split(',');
for (j = 1; j < line_list.length; j += 1) { for (j = 1; j < line_list.length; j += 1) {
// XXX - repeating date everytime // Date
data_list[j - 1].value_dict["0"].push(line_list[0]); if (j === graph_index) {
data_list[0].value_dict["0"].push(line_list[0]);
if (j === cpu_time_index) { if (j === cpu_time_index) {
data_list[j - 1].value_dict["1"].push(getCPUTime(line_list[j])); data_list[0].value_dict["1"].push(getCPUTime(line_list[j]));
} else { } else {
data_list[j - 1].value_dict["1"].push(line_list[j]); data_list[0].value_dict["1"].push(line_list[j]);
}
} }
} }
} }
...@@ -259,6 +312,7 @@ ...@@ -259,6 +312,7 @@
}) })
.ready(function (gadget) { .ready(function (gadget) {
gadget.property_dict = {}; gadget.property_dict = {};
gadget.property_dict.disable_update = true;
gadget.property_dict.resource_dict = { gadget.property_dict.resource_dict = {
memory_resource: "monitor_resource_memory.data", memory_resource: "monitor_resource_memory.data",
cpu_resource: "monitor_resource_process.data", cpu_resource: "monitor_resource_process.data",
...@@ -278,9 +332,15 @@ ...@@ -278,9 +332,15 @@
}); });
}) })
.ready(function (gadget) { .ready(function (gadget) {
return gadget.getDeclaredGadget("graph_io") return gadget.getDeclaredGadget("graph_io_read")
.push(function (graph_io) { .push(function (graph_io_read) {
gadget.property_dict.graph_io = graph_io; 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) { .ready(function (gadget) {
...@@ -309,6 +369,11 @@ ...@@ -309,6 +369,11 @@
gadget.getUrlFor({command: 'change', options: { gadget.getUrlFor({command: 'change', options: {
page: 'ojsm_processes_view', page: 'ojsm_processes_view',
key: gadget.state.opml_outline.reference 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 @@ ...@@ -319,6 +384,66 @@
processes_url: url_list[1] 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 () { .push(function () {
gadget.property_dict.jio_gadget.createJio({ gadget.property_dict.jio_gadget.createJio({
type: "webhttp", type: "webhttp",
...@@ -339,11 +464,29 @@ ...@@ -339,11 +464,29 @@
.declareAcquiredMethod('jio_get', 'jio_get') .declareAcquiredMethod('jio_get', 'jio_get')
.declareAcquiredMethod("getUrlFor", "getUrlFor") .declareAcquiredMethod("getUrlFor", "getUrlFor")
.declareAcquiredMethod("notifySubmitted", 'notifySubmitted') .declareAcquiredMethod("notifySubmitted", 'notifySubmitted')
.declareAcquiredMethod("redirect", "redirect")
//.declareAcquiredMethod("notifySubmitting", 'notifySubmitting')
.onLoop(function () { .onLoop(function () {
if (!this.property_dict.disable_update) {
return updateGraph(this); return updateGraph(this);
}
}, 65000) }, 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 // declared service
///////////////////////////////////////////////////////////////// /////////////////////////////////////////////////////////////////
...@@ -351,83 +494,6 @@ ...@@ -351,83 +494,6 @@
return updateGraph(this); 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)); }(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 @@ ...@@ -242,7 +242,7 @@
</item> </item>
<item> <item>
<key> <string>serial</string> </key> <key> <string>serial</string> </key>
<value> <string>963.27984.14453.52343</string> </value> <value> <string>971.40812.22256.57156</string> </value>
</item> </item>
<item> <item>
<key> <string>state</string> </key> <key> <string>state</string> </key>
...@@ -260,7 +260,7 @@ ...@@ -260,7 +260,7 @@
</tuple> </tuple>
<state> <state>
<tuple> <tuple>
<float>1510651329.34</float> <float>1542208228.67</float>
<string>UTC</string> <string>UTC</string>
</tuple> </tuple>
</state> </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