Commit 528c3570 authored by Alain Takoudjou's avatar Alain Takoudjou Committed by Alain Takoudjou

[erp5_web_monitoring] Use generic erp5 graph gadget

parent 71063a4b
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, user-scalable=no" />
<title>ERP5 Graph</title>
<!-- custom css -->
<!-- renderjs -->
<script src="rsvp.js" type="text/javascript"></script>
<script src="renderjs.js" type="text/javascript"></script>
<!-- custom script -->
<script src="dygraph.js" type="text/javascript"></script>
<script src="gadget_erp5_graph.js" type="text/javascript"></script>
</head>
<body>
<div class="custom-grid-wrap">
<div class="custom-grid ui-corner-all ui-body-inherit ui-shadow ui-corner-all"></div>
</div>
</body>
</html>
\ No newline at end of file
/*global window, rJS, console, RSVP, Dygraph */
/*jslint indent: 2, maxerr: 3 */
(function(rJS, window, RSVP, Dygraph) {
"use strict";
// Custom Interaction Model for synchronised graphs
var customInteractionModel = Dygraph.Interaction.defaultModel;
customInteractionModel.touchend = function(event, g, context) {
Dygraph.Interaction.endTouch(event, g, context);
var viewWindow = g.xAxisRange();
g.getFunctionOption("zoomCallback").call(g, viewWindow[0], viewWindow[1], g.yAxisRanges());
};
/*customInteractionModel.touchmove = function(event, g, context) {
Dygraph.Interaction.moveTouch(event, g, context);
var viewWindow = g.xAxisRange();
g.getFunctionOption("zoomCallback").call(g, viewWindow[0], viewWindow[1], g.yAxisRanges());
};
customInteractionModel.mousemove = function(event, g, context) {
if (context.isPanning) {
var viewWindow = g.xAxisRange();
g.getFunctionOption("zoomCallback").call(g, viewWindow[0], viewWindow[1], g.yAxisRanges());
}
}*/
customInteractionModel.mouseup = function(event, g, context) {
if (context.isPanning) {
var viewWindow = g.xAxisRange();
g.getFunctionOption("zoomCallback").call(g, viewWindow[0], viewWindow[1], g.yAxisRanges());
}
};
rJS(window)
.setState({graph: ""})
/////////////////////////////////////////////////////////////////
// ready
/////////////////////////////////////////////////////////////////
.ready(function(gadget) {
return;
})
/////////////////////////////////////////////////////////////////
// declared methods
/////////////////////////////////////////////////////////////////
.declareMethod('getColors', function() {
var gadget = this;
return new RSVP.Queue()
.push(function () {
return gadget.state.graph.getColors();
});
})
.declareMethod('setVisibility', function(num, value) {
var gadget = this;
return new RSVP.Queue()
.push(function () {
return gadget.state.graph.setVisibility(num, value);
});
})
.declareMethod('updateOptions', function(options, ndarray) {
var gadget = this;
return new RSVP.Queue()
.push(function () {
gadget.state.graph.ndarray = ndarray;
return gadget.state.graph.updateOptions(options);
});
})
.declareMethod('resize', function(width, height) {
var gadget = this;
return new RSVP.Queue()
.push(function () {
return gadget.state.graph.resize(width, height);
});
})
// render gadget
.declareMethod('render', function(data, option_dict, interactionModel) {
var gadget = this;
if (interactionModel === "customInteractionModel") {
option_dict.interactionModel = customInteractionModel;
}
return new RSVP.Queue()
.push(function () {
return gadget.changeState({
graph: new Dygraph(
gadget.element,
data,
option_dict
)
});
});
});
}(rJS, window, RSVP, Dygraph));
\ No newline at end of file
......@@ -105,7 +105,7 @@
<item>
<key> <string>text_content</string> </key>
<value> <string>CACHE MANIFEST\n
# generated on Fri, 11 august 2017 15:47:33 +0000\n
# generated on Fri, 07 sep 2017 15:47:33 +0000\n
# XXX + fonts\n
# images/ajax-loader.gif\n
CACHE:\n
......@@ -119,8 +119,8 @@ URI.js\n
dygraph.js\n
gadget_erp5.css\n
gadget_global.js\n
gadget_erp5_graph.html\n
gadget_erp5_graph.js\n
gadget_field_graph_dygraph.html\n
gadget_field_graph_dygraph.js\n
gadget_jio.html\n
gadget_jio.js\n
gadget_translate.html\n
......@@ -328,7 +328,7 @@ NETWORK:\n
</item>
<item>
<key> <string>serial</string> </key>
<value> <string>961.46782.15224.10001</string> </value>
<value> <string>961.61188.16000.18722</string> </value>
</item>
<item>
<key> <string>state</string> </key>
......@@ -346,7 +346,7 @@ NETWORK:\n
</tuple>
<state>
<tuple>
<float>1503935899.97</float>
<float>1504800490.65</float>
<string>UTC</string>
</tuple>
</state>
......
......@@ -511,13 +511,13 @@ html .custom-grid-wrap table thead tr th {
position: relative;
}
.graph-medium {
height: 200px;
width: 100%;
height: 320px;
width: 98%;
}
.graph-h-medium {
height: 230px;
width: 100%;
margin: 30px 0;
height: 320px;
width: 98%;
margin: 30px;
}
.ui-grid-column .graph-state-labels {
margin: 10px;
......
......@@ -239,7 +239,7 @@
</item>
<item>
<key> <string>serial</string> </key>
<value> <string>961.46334.51033.4727</string> </value>
<value> <string>961.59579.23436.30429</string> </value>
</item>
<item>
<key> <string>state</string> </key>
......@@ -257,7 +257,7 @@
</tuple>
<state>
<tuple>
<float>1504086678.92</float>
<float>1504708727.24</float>
<string>UTC</string>
</tuple>
</state>
......
......@@ -40,32 +40,22 @@
</div>
</div>
<h2 class="header-notice"><i class="fa fa-info" aria-hidden="true"></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-4 custom-grid-wrap graph-cell">
<!--<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>
</li>
<li class="ui-grid-span-1 custom-grid-wrap graph-cell">
</li>
</ul>
</ul>-->
<div class="ui-grid-a ui-responsive">
<div class="ui-block-a">
<div data-gadget-url="gadget_erp5_graph.html" data-gadget-scope="graph_memory_used" class="graph graph-h-medium" data-gadget-sandbox="public"></div>
</div>
<div class="ui-block-b">
<div data-gadget-url="gadget_erp5_graph.html" data-gadget-scope="graph_memory_percent" class="graph graph-h-medium" data-gadget-sandbox="public"></div>
</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 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-b ui-responsive">
<div class="ui-block-a">
<div data-gadget-url="gadget_erp5_graph.html" data-gadget-scope="graph_disk_used" class="graph graph-h-medium" data-gadget-sandbox="public"></div>
</div>
<div class="ui-block-b">
<div data-gadget-url="gadget_erp5_graph.html" data-gadget-scope="graph_io_rw" class="graph graph-h-medium" data-gadget-sandbox="public"></div>
</div>
<div class="ui-block-c">
<div data-gadget-url="gadget_erp5_graph.html" data-gadget-scope="graph_io_counter" class="graph graph-h-medium" data-gadget-sandbox="public"></div>
</div>
<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='graph-footer'>
......
......@@ -243,7 +243,7 @@
</item>
<item>
<key> <string>serial</string> </key>
<value> <string>961.47920.32703.17493</string> </value>
<value> <string>961.59537.30226.3259</string> </value>
</item>
<item>
<key> <string>state</string> </key>
......@@ -261,7 +261,7 @@
</tuple>
<state>
<tuple>
<float>1504086069.06</float>
<float>1504704987.14</float>
<string>UTC</string>
</tuple>
</state>
......
......@@ -239,7 +239,7 @@
</item>
<item>
<key> <string>serial</string> </key>
<value> <string>961.22271.22355.17766</string> </value>
<value> <string>961.61208.24795.20087</string> </value>
</item>
<item>
<key> <string>state</string> </key>
......@@ -257,7 +257,7 @@
</tuple>
<state>
<tuple>
<float>1504086036.21</float>
<float>1504801600.39</float>
<string>UTC</string>
</tuple>
</state>
......
......@@ -140,7 +140,7 @@
<div class="graph-full">
<div class="signal ui-content-hidden"></div>
<h2><i class="fa fa-line-chart" aria-hidden="true"></i> <strong>Promises result progression</strong></h2>
<div data-gadget-url="gadget_erp5_graph.html" data-gadget-scope="graph_gadget" class="graph graph-medium "></div>
<div data-gadget-url="gadget_field_graph_dygraph.html" data-gadget-scope="graph_gadget" class="graph graph-medium "></div>
</div>
<div class="promise-list">
</div>
......
......@@ -246,7 +246,7 @@
</item>
<item>
<key> <string>serial</string> </key>
<value> <string>961.16513.57050.1211</string> </value>
<value> <string>961.59699.24642.30873</string> </value>
</item>
<item>
<key> <string>state</string> </key>
......@@ -264,7 +264,7 @@
</tuple>
<state>
<tuple>
<float>1502377991.75</float>
<float>1504711023.3</float>
<string>UTC</string>
</tuple>
</state>
......
......@@ -310,18 +310,56 @@
"Date, Success, Error, Warning",
new Date() + ",0,0,0"
],
data = element_dict.data || promise_data;
data = element_dict.data || promise_data,
data_list = [],
line_list,
i;
data_list.push({
value_dict: {"0": [], "1": []},
type: "scatter",
axis_mapping_id_dict: {"1": "1_1"},
title: "promises success counter"
});
data_list.push({
value_dict: {"0": [], "1": []},
type: "scatter",
axis_mapping_id_dict: {"1": "1_2"},
title: "promises error counter"
});
for (i = 1; i < data.length; i += 1) {
line_list = data[i].split(',');
data_list[0].value_dict["0"].push(line_list[0]);
data_list[0].value_dict["1"].push(line_list[1]);
// XXX repeating date entry
data_list[1].value_dict["0"].push(line_list[0]);
data_list[1].value_dict["1"].push(line_list[2]);
}
$(".graph-full .signal").addClass("ui-content-hidden");
return gadget.state.graph_gadget.render(
data.join('\n'),
{
ylabel: '<span class="graph-label"><i class="fa fa-bar-chart"></i> Success/Failure count</span>',
legend: 'always',
labelsDivStyles: { 'textAlign': 'right' }
},
"customInteractionModel"
);
return gadget.state.graph_gadget.render({
value:{
data: data_list,
layout: {
axis_dict : {
"0": {
"title": "Success/Failure counter",
"scale_type": "linear",
"value_type": "date"
},
"1_1": {
"title": "Promises success counter",
"position": "left"
},
"1_2": {
"title": "Promises error counter",
"position": "left"
}
},
title: "Success/Failure counter"
}
}
});
});
//return RSVP.all(promise_list);
});
......
......@@ -246,7 +246,7 @@
</item>
<item>
<key> <string>serial</string> </key>
<value> <string>961.21935.10239.63812</string> </value>
<value> <string>961.59703.38142.44032</string> </value>
</item>
<item>
<key> <string>state</string> </key>
......@@ -264,7 +264,7 @@
</tuple>
<state>
<tuple>
<float>1502465314.29</float>
<float>1504711794.22</float>
<string>UTC</string>
</tuple>
</state>
......
erp5_web
erp5_web_renderjs_ui
\ No newline at end of file
erp5_web_renderjs_ui
erp5_officejs
\ No newline at end of file
web_page_module/Notify_min_js
web_page_module/rjs_gadget_erp5_css
web_page_module/gadget_erp5_graph_*
web_page_module/gadget_monitoring_*
web_page_module/jquery.magnific-popup.min.js
web_page_module/jsen_json_validator_js
web_page_module/magnific-popup.css
web_page_module/monitoring_jio_*
web_page_module/rjs_gadget_erp5_css
web_page_module/rjs_gadget_erp5_js
web_page_module/rjs_gadget_global_js
web_page_module/rjs_gadget_monitoring_html
......
web_page_module/Notify_min_js
web_page_module/rjs_gadget_erp5_css
web_page_module/gadget_erp5_graph_*
web_page_module/gadget_monitoring_*
web_page_module/jquery.magnific-popup.min.js
web_page_module/jsen_json_validator_js
web_page_module/magnific-popup.css
web_page_module/monitoring_jio_*
web_page_module/rjs_gadget_erp5_css
web_page_module/rjs_gadget_erp5_js
web_page_module/rjs_gadget_global_js
web_page_module/rjs_gadget_monitoring_html
......
web_page_module/Notify_min_js
web_page_module/gadget_erp5_graph_*
web_page_module/gadget_monitoring_*
web_page_module/jquery.magnific-popup.min.js
web_page_module/jsen_json_validator_js
......
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