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 @@ ...@@ -105,7 +105,7 @@
<item> <item>
<key> <string>text_content</string> </key> <key> <string>text_content</string> </key>
<value> <string>CACHE MANIFEST\n <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 # XXX + fonts\n
# images/ajax-loader.gif\n # images/ajax-loader.gif\n
CACHE:\n CACHE:\n
...@@ -119,8 +119,8 @@ URI.js\n ...@@ -119,8 +119,8 @@ URI.js\n
dygraph.js\n dygraph.js\n
gadget_erp5.css\n gadget_erp5.css\n
gadget_global.js\n gadget_global.js\n
gadget_erp5_graph.html\n gadget_field_graph_dygraph.html\n
gadget_erp5_graph.js\n gadget_field_graph_dygraph.js\n
gadget_jio.html\n gadget_jio.html\n
gadget_jio.js\n gadget_jio.js\n
gadget_translate.html\n gadget_translate.html\n
...@@ -328,7 +328,7 @@ NETWORK:\n ...@@ -328,7 +328,7 @@ NETWORK:\n
</item> </item>
<item> <item>
<key> <string>serial</string> </key> <key> <string>serial</string> </key>
<value> <string>961.46782.15224.10001</string> </value> <value> <string>961.61188.16000.18722</string> </value>
</item> </item>
<item> <item>
<key> <string>state</string> </key> <key> <string>state</string> </key>
...@@ -346,7 +346,7 @@ NETWORK:\n ...@@ -346,7 +346,7 @@ NETWORK:\n
</tuple> </tuple>
<state> <state>
<tuple> <tuple>
<float>1503935899.97</float> <float>1504800490.65</float>
<string>UTC</string> <string>UTC</string>
</tuple> </tuple>
</state> </state>
......
...@@ -511,13 +511,13 @@ html .custom-grid-wrap table thead tr th { ...@@ -511,13 +511,13 @@ html .custom-grid-wrap table thead tr th {
position: relative; position: relative;
} }
.graph-medium { .graph-medium {
height: 200px; height: 320px;
width: 100%; width: 98%;
} }
.graph-h-medium { .graph-h-medium {
height: 230px; height: 320px;
width: 100%; width: 98%;
margin: 30px 0; margin: 30px;
} }
.ui-grid-column .graph-state-labels { .ui-grid-column .graph-state-labels {
margin: 10px; margin: 10px;
......
...@@ -239,7 +239,7 @@ ...@@ -239,7 +239,7 @@
</item> </item>
<item> <item>
<key> <string>serial</string> </key> <key> <string>serial</string> </key>
<value> <string>961.46334.51033.4727</string> </value> <value> <string>961.59579.23436.30429</string> </value>
</item> </item>
<item> <item>
<key> <string>state</string> </key> <key> <string>state</string> </key>
...@@ -257,7 +257,7 @@ ...@@ -257,7 +257,7 @@
</tuple> </tuple>
<state> <state>
<tuple> <tuple>
<float>1504086678.92</float> <float>1504708727.24</float>
<string>UTC</string> <string>UTC</string>
</tuple> </tuple>
</state> </state>
......
...@@ -40,32 +40,22 @@ ...@@ -40,32 +40,22 @@
</div> </div>
</div> </div>
<h2 class="header-notice"><i class="fa fa-info" aria-hidden="true"></i> Graph content will be reloaded automatically every minutes.</h2> <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"> <!--<ul class="ui-grid-column ui-grid-column-5 graph_cpu">
<li class="ui-grid-span-4 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>
</li> </li>
<li class="ui-grid-span-1 custom-grid-wrap graph-cell"> <li class="ui-grid-span-1 custom-grid-wrap graph-cell">
</li> </li>
</ul> </ul>-->
<div class="ui-grid-a ui-responsive"> <div class="ui-grid-a ui-responsive">
<div class="ui-block-a"> <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 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> <div class="ui-grid-a ui-responsive">
<div class="ui-block-b"> <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_erp5_graph.html" data-gadget-scope="graph_memory_percent" class="graph graph-h-medium" data-gadget-sandbox="public"></div>
</div>
</div> </div>
<div class="ui-grid-b ui-responsive"> <div class="ui-grid-b ui-responsive">
<div class="ui-block-a"> <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_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> </div>
<div class='graph-footer'> <div class='graph-footer'>
......
...@@ -243,7 +243,7 @@ ...@@ -243,7 +243,7 @@
</item> </item>
<item> <item>
<key> <string>serial</string> </key> <key> <string>serial</string> </key>
<value> <string>961.47920.32703.17493</string> </value> <value> <string>961.59537.30226.3259</string> </value>
</item> </item>
<item> <item>
<key> <string>state</string> </key> <key> <string>state</string> </key>
...@@ -261,7 +261,7 @@ ...@@ -261,7 +261,7 @@
</tuple> </tuple>
<state> <state>
<tuple> <tuple>
<float>1504086069.06</float> <float>1504704987.14</float>
<string>UTC</string> <string>UTC</string>
</tuple> </tuple>
</state> </state>
......
...@@ -239,7 +239,7 @@ ...@@ -239,7 +239,7 @@
</item> </item>
<item> <item>
<key> <string>serial</string> </key> <key> <string>serial</string> </key>
<value> <string>961.22271.22355.17766</string> </value> <value> <string>961.61208.24795.20087</string> </value>
</item> </item>
<item> <item>
<key> <string>state</string> </key> <key> <string>state</string> </key>
...@@ -257,7 +257,7 @@ ...@@ -257,7 +257,7 @@
</tuple> </tuple>
<state> <state>
<tuple> <tuple>
<float>1504086036.21</float> <float>1504801600.39</float>
<string>UTC</string> <string>UTC</string>
</tuple> </tuple>
</state> </state>
......
...@@ -140,7 +140,7 @@ ...@@ -140,7 +140,7 @@
<div class="graph-full"> <div class="graph-full">
<div class="signal ui-content-hidden"></div> <div class="signal ui-content-hidden"></div>
<h2><i class="fa fa-line-chart" aria-hidden="true"></i> <strong>Promises result progression</strong></h2> <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>
<div class="promise-list"> <div class="promise-list">
</div> </div>
......
...@@ -246,7 +246,7 @@ ...@@ -246,7 +246,7 @@
</item> </item>
<item> <item>
<key> <string>serial</string> </key> <key> <string>serial</string> </key>
<value> <string>961.16513.57050.1211</string> </value> <value> <string>961.59699.24642.30873</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>1502377991.75</float> <float>1504711023.3</float>
<string>UTC</string> <string>UTC</string>
</tuple> </tuple>
</state> </state>
......
...@@ -310,18 +310,56 @@ ...@@ -310,18 +310,56 @@
"Date, Success, Error, Warning", "Date, Success, Error, Warning",
new Date() + ",0,0,0" 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"); $(".graph-full .signal").addClass("ui-content-hidden");
return gadget.state.graph_gadget.render( return gadget.state.graph_gadget.render({
data.join('\n'), value:{
{ data: data_list,
ylabel: '<span class="graph-label"><i class="fa fa-bar-chart"></i> Success/Failure count</span>', layout: {
legend: 'always', axis_dict : {
labelsDivStyles: { 'textAlign': 'right' } "0": {
}, "title": "Success/Failure counter",
"customInteractionModel" "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); //return RSVP.all(promise_list);
}); });
......
...@@ -246,7 +246,7 @@ ...@@ -246,7 +246,7 @@
</item> </item>
<item> <item>
<key> <string>serial</string> </key> <key> <string>serial</string> </key>
<value> <string>961.21935.10239.63812</string> </value> <value> <string>961.59703.38142.44032</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>1502465314.29</float> <float>1504711794.22</float>
<string>UTC</string> <string>UTC</string>
</tuple> </tuple>
</state> </state>
......
erp5_web erp5_web
erp5_web_renderjs_ui erp5_web_renderjs_ui
\ No newline at end of file erp5_officejs
\ No newline at end of file
web_page_module/Notify_min_js 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/gadget_monitoring_*
web_page_module/jquery.magnific-popup.min.js web_page_module/jquery.magnific-popup.min.js
web_page_module/jsen_json_validator_js web_page_module/jsen_json_validator_js
web_page_module/magnific-popup.css web_page_module/magnific-popup.css
web_page_module/monitoring_jio_* web_page_module/monitoring_jio_*
web_page_module/rjs_gadget_erp5_css
web_page_module/rjs_gadget_erp5_js web_page_module/rjs_gadget_erp5_js
web_page_module/rjs_gadget_global_js web_page_module/rjs_gadget_global_js
web_page_module/rjs_gadget_monitoring_html web_page_module/rjs_gadget_monitoring_html
......
web_page_module/Notify_min_js 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/gadget_monitoring_*
web_page_module/jquery.magnific-popup.min.js web_page_module/jquery.magnific-popup.min.js
web_page_module/jsen_json_validator_js web_page_module/jsen_json_validator_js
web_page_module/magnific-popup.css web_page_module/magnific-popup.css
web_page_module/monitoring_jio_* web_page_module/monitoring_jio_*
web_page_module/rjs_gadget_erp5_css
web_page_module/rjs_gadget_erp5_js web_page_module/rjs_gadget_erp5_js
web_page_module/rjs_gadget_global_js web_page_module/rjs_gadget_global_js
web_page_module/rjs_gadget_monitoring_html web_page_module/rjs_gadget_monitoring_html
......
web_page_module/Notify_min_js web_page_module/Notify_min_js
web_page_module/gadget_erp5_graph_*
web_page_module/gadget_monitoring_* web_page_module/gadget_monitoring_*
web_page_module/jquery.magnific-popup.min.js web_page_module/jquery.magnific-popup.min.js
web_page_module/jsen_json_validator_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