static files updated after introduction of new gadget

parent 433e86ec
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Graph</title>
<script src="../lib/rsvp.min.js" type="text/javascript"></script>
<script src="../lib/renderjs.min.js" type="text/javascript"></script>
<script src="../lib/jquery.js" type="text/javascript"></script>
<script src="../lib/jquery.flot.js"></script>
<script src="../lib/jquery.flot.stack.js"></script>
<script src="mixin_gadget.js" type="text/javascript"></script>
<script src="Output_viewGraph.js" type="text/javascript"></script>
</head>
<body>
<div class="graph_container" style="width: 100%;height:300px"></div>
</body>
</html>
/*global rJS, jQuery, initGadgetMixin, console */
/*jslint unparam: true */
(function(window, rJS, $, initGadgetMixin) {
"use strict";
function getRequestedValue(object, key) {
var value = 0;
if (object.results[key] !== undefined) {
if (object.results[key].avg !== undefined) {
value = object.results[key].avg;
} else {
value = object.results[key];
}
}
return value;
}
function graph_widget(output_data, config) {
/* FIXME: does not support more than one replic (Buffer family).
* + see george email to integrate without the need of an EG
*/
var conf_data = config.data, ticks = [], counter = 1, series = [], options = {};
$.each(output_data.elementList.sort(function(a, b) {
return a.id < b.id ? -1 : 1;
}), function(idx, obj) {
var reqKey, // ctrl_flag = false,
request, i;
// if the obj is of the requested family
if (obj.family === config.family) {
if (config.plot === "bars") {
for (reqKey in conf_data) {
if (conf_data.hasOwnProperty(reqKey)) {
request = 0;
for (i = 0; i <= conf_data[reqKey].length - 1; i += 1) {
request += getRequestedValue(obj, conf_data[reqKey][i]);
}
series.push({
label: reqKey,
data: [ [ counter, request ] ]
});
}
}
ticks.push([ counter, obj.id ]);
counter += 1;
} else if (config.plot === "line") {
series.push({
label: obj.name || obj.id,
data: obj.results.wip_stat_list
});
}
}
});
if (config.plot === "bars") {
options = {
xaxis: {
minTickSize: 1,
ticks: ticks
},
yaxis: {
max: 100
},
series: {
bars: {
show: true,
barWidth: .7,
align: "center"
},
stack: true
}
};
}
console.log("series");
console.log(series);
console.log("options");
console.log(options);
return [ series, options ];
}
var gadget_klass = rJS(window);
initGadgetMixin(gadget_klass);
gadget_klass.declareAcquiredMethod("aq_getAttachment", "jio_getAttachment").declareMethod("render", function(options) {
var jio_key = options.id, gadget = this;
gadget.props.jio_key = jio_key;
gadget.props.result = options.result;
return gadget.aq_getAttachment({
_id: gadget.props.jio_key,
_attachment: "simulation.json"
}).push(function(simulation_json) {
console.log("rendering view graph");
var json_data = JSON.parse(simulation_json), config = json_data.application_configuration.output[options.action].configuration;
console.log(config);
console.log(json_data.result.result_list[gadget.props.result]);
gadget.props.result_list = graph_widget(json_data.result.result_list[gadget.props.result], config);
});
}).declareMethod("startService", function() {
console.log("service graph");
console.log(this.props.result_list);
// XXX Manually calculate width and height when resizing
$.plot(this.props.element.querySelector(".graph_container"), this.props.result_list[0], this.props.result_list[1]);
});
})(window, rJS, jQuery, initGadgetMixin);
\ No newline at end of file
......@@ -2,81 +2,65 @@
/*jslint unparam: true */
(function(window, rJS, $, initGadgetMixin) {
"use strict";
function station_utilisation_graph_widget(output_data) {
var blockage_data = [], waiting_data = [], failure_data = [], working_data = [], ticks = [], counter = 1, series, options;
function getRequestedValue(object, key) {
var value = 0;
if (object.results[key] !== undefined) {
if (object.results[key].avg !== undefined) {
value = object.results[key].avg;
} else {
value = object.results[key];
}
}
return value;
}
function station_utilisation_graph_widget(output_data, config) {
var data = {}, ticks = [], counter = 1, key, series = [], options;
// initialize the data dict holding the properties requested
for (key in config) {
if (config.hasOwnProperty(key)) {
data[key] = [];
}
}
// XXX output is still elementList ???
$.each(output_data.elementList.sort(function(a, b) {
return a.id < b.id ? -1 : 1;
}), function(idx, obj) {
// add each object that has a working ratio
if (obj.results !== undefined && obj.results.working_ratio !== undefined) {
/* when there is only one replication, the ratio is given as a float,
otherwise we have a mapping avg, ub lb */
var blockage_ratio = 0, working_ratio = 0, waiting_ratio = 0, failure_ratio = 0;
if (obj.results.blockage_ratio !== undefined) {
if (obj.results.blockage_ratio.avg !== undefined) {
blockage_ratio = obj.results.blockage_ratio.avg;
} else {
blockage_ratio = obj.results.blockage_ratio;
}
}
blockage_data.push([ counter, blockage_ratio ]);
// XXX merge setup & loading ratio in working ratio for now
if (obj.results.setup_ratio !== undefined) {
if (obj.results.setup_ratio.avg !== undefined) {
working_ratio += obj.results.setup_ratio.avg;
} else {
working_ratio += obj.results.setup_ratio;
}
}
if (obj.results.loading_ratio !== undefined) {
if (obj.results.loading_ratio.avg !== undefined) {
working_ratio += obj.results.loading_ratio.avg;
} else {
working_ratio += obj.results.loading_ratio;
var ctrl_flag = false, reqKey, request, i;
// determine weather the current
// obj has the requested key
for (reqKey in config) {
if (config.hasOwnProperty(reqKey)) {
if (obj.results !== undefined && obj.results[config[reqKey][0]] !== undefined) {
// control flag, if the results contain
// entities that have working ratios
ctrl_flag = true;
break;
}
}
if (obj.results.working_ratio !== undefined) {
if (obj.results.working_ratio.avg !== undefined) {
working_ratio += obj.results.working_ratio.avg;
} else {
working_ratio += obj.results.working_ratio;
}
}
working_data.push([ counter, working_ratio ]);
if (obj.results.waiting_ratio !== undefined) {
if (obj.results.waiting_ratio.avg !== undefined) {
waiting_ratio = obj.results.waiting_ratio.avg;
} else {
waiting_ratio = obj.results.waiting_ratio;
}
}
waiting_data.push([ counter, waiting_ratio ]);
if (obj.results.failure_ratio !== undefined) {
if (obj.results.failure_ratio.avg !== undefined) {
failure_ratio = obj.results.failure_ratio.avg;
} else {
failure_ratio = obj.results.failure_ratio;
}
// if the obj contains the requested key
if (ctrl_flag === true) {
for (reqKey in config) {
if (config.hasOwnProperty(reqKey)) {
request = 0;
for (i = 0; i <= config[reqKey].length - 1; i += 1) {
request += getRequestedValue(obj, config[reqKey][i]);
}
data[reqKey].push([ counter, request ]);
}
}
failure_data.push([ counter, failure_ratio ]);
ticks.push([ counter, obj.id ]);
counter += 1;
}
});
series = [ {
label: "Working",
data: working_data
}, {
label: "Waiting",
data: waiting_data
}, {
label: "Failures",
data: failure_data
}, {
label: "Blockage",
data: blockage_data
} ];
for (key in data) {
if (data.hasOwnProperty(key)) {
series.push({
label: key,
data: data[key]
});
}
}
options = {
xaxis: {
minTickSize: 1,
......@@ -88,7 +72,7 @@
series: {
bars: {
show: true,
barWidth: .8,
barWidth: .7,
align: "center"
},
stack: true
......@@ -106,7 +90,8 @@
_id: gadget.props.jio_key,
_attachment: "simulation.json"
}).push(function(simulation_json) {
gadget.props.result_list = station_utilisation_graph_widget(JSON.parse(simulation_json).result.result_list[gadget.props.result]);
var json_data = JSON.parse(simulation_json), config = json_data.application_configuration.output[options.action].configuration.data;
gadget.props.result_list = station_utilisation_graph_widget(json_data.result.result_list[gadget.props.result], config);
});
}).declareMethod("startService", function() {
// XXX Manually calculate width and height when resizing
......
......@@ -180,15 +180,9 @@
var zoom_level = gadget.props.zoom_level * 1.1111, element = $(gadget.props.element).find("#" + element_id), new_value;
$.each(gadget.props.style_attr_list, function(i, j) {
new_value = $(gadget.props.element).find(".dummy_window").css(j).replace("px", "") * zoom_level + "px";
console.log(new_value);
element.css(j, new_value);
});
console.log("extra box style");
console.log(element[0]);
Object.keys(class_definition.css || {}).forEach(function(k) {
console.log("<>");
console.log(k);
console.log(class_definition.css[k]);
element.css(k, class_definition.css[k]);
});
}
......@@ -752,8 +746,6 @@
function addNode(gadget, node_id, node_data) {
console.log("addNODE 0");
var render_element = $(gadget.props.main), class_definition = gadget.props.data.class_definition[node_data._class], coordinate = node_data.coordinate, dom_element_id, box, absolute_position, domElement;
console.log("addnode class_definition");
console.log(class_definition);
dom_element_id = generateDomElementId(gadget.props.element);
gadget.props.node_id_to_dom_element_id[node_id] = dom_element_id;
node_data.name = node_data.name || class_definition.name;
......@@ -774,8 +766,6 @@
title: node_data.name || node_data.id,
name: node_data.name || node_data.id
}), "text/html").querySelector(".window");
console.log("dom element");
console.log(domElement);
render_element.append(domElement);
waitForNodeClick(gadget, domElement);
//waitForNodeClick(gadget, domElement, class_definition);
......@@ -783,10 +773,6 @@
absolute_position = convertToAbsolutePosition(gadget, coordinate.left, coordinate.top);
box.css("top", absolute_position[1]);
box.css("left", absolute_position[0]);
console.log("box " + dom_element_id);
console.log(box);
console.log("gadget");
console.log(gadget);
updateNodeStyle(gadget, dom_element_id, class_definition);
draggable(gadget);
// XXX make only this element draggable.
......
/*global window, document, RSVP, rJS, initGadgetMixin, console*/
/*global window, document, RSVP, rJS, initGadgetMixin*/
(function(window, document, RSVP, rJS, initGadgetMixin) {
"use strict";
/*jslint nomen: true*/
......@@ -29,12 +29,8 @@
/* display all nodes in the palette.
*/
tools_container.className = "tools-container";
console.log("rendering toolbox");
Object.keys(data.class_definition).forEach(function(key) {
var _class_object = data.class_definition[key], tool;
console.log("key");
console.log(key);
console.log(_class_object);
// XXX "expand" the json schema "allOF" etc
if (_class_object.allOf) {
if (_class_object.allOf[0].$ref === "#/node") {
......@@ -45,13 +41,8 @@
tool.draggable = true;
tool.dataset.class_name = JSON.stringify(key);
Object.keys(_class_object.css || {}).forEach(function(k) {
console.log("<>");
console.log(k);
console.log(_class_object.css[k]);
tool.style[k] = _class_object.css[k];
});
console.log("tool style");
console.log(tool.style);
tools_container.appendChild(tool);
}
}
......
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