Skip to content

dream
dream
Commit 39946af2 authored by Kazuhiko Shiozaki's avatar Kazuhiko Shiozaki
Browse files
Options

beautify javascript code with 'js-beautify -w 80 -r -s 2 -j'.

parent 85550e7c
Hide whitespace changes
Inline Side-by-side
Showing with 732 additions and 463 deletions
dream/platform/static/src/dream.js
View file @ 39946af2
......@@ -17,18 +17,21 @@
* along with DREAM. If not, see <http://www.gnu.org/licenses/>.
* =========================================================================== */
/*jslint indent: 2, maxlen: 80, nomen: true */
(function (scope, $, jsPlumb, console) {
"use strict";
scope.Dream = function (configuration) {
var that = jsonPlumb(), priv = {};
var that = jsonPlumb(),
priv = {};
// Utility function to update the style of a box
priv.updateBoxStyle = function (box_id, style) {
var box;
box = $("#" + box_id);
$.each(style, function(key, value) {
$.each(style, function (key, value) {
box.css(key, value);
})
});
};
// Utility function to update the content of the box
......@@ -43,116 +46,123 @@
box.html(html_string);
};
priv.displayTool = function() {
priv.displayTool = function () {
var render_element = $("[id=tools]");
for (var key in configuration) {
if (key !== 'Dream-Configuration') {
render_element.append('<div id="' + key + '" class="tool">' +
key.split('-')[1] + "<ul/></div>");
};
};
key.split('-')[1] + "<ul/></div>");
}
}
render_element.append('<p/><a id="clear_all">Clear All</a>');
};
priv.initDialog = function() {
$( "#dialog-form" ).dialog({autoOpen: false});
priv.initDialog = function () {
$("#dialog-form").dialog({
autoOpen: false
});
};
that.initGeneralProperties = function() {
that.initGeneralProperties = function () {
var fieldset = $("#general-fieldset"),
previous_data = that.getData()['general'],
previous_value = "",
prefix = "General-";
fieldset.children().remove()
previous_data = that.getData()['general'],
previous_value = "",
prefix = "General-";
fieldset.children().remove();
$.each(configuration['Dream-Configuration']['property_list'],
function(idx, property){
function (idx, property) {
if (property._class === "Dream.Property") {
previous_value = previous_data[property.id] || "";
if (previous_value.length > 0) {
previous_value = ' value="' + previous_value + '"';
}
fieldset.append("<label>" + property.id + "</label>" +
'<input type="text" name="' + prefix + property.id + '"' +
previous_value + ' id="' + prefix + property.id + '"' +
' class="text ui-widget-content ui-corner-all"/>');
'<input type="text" name="' + prefix + property.id + '"' +
previous_value + ' id="' + prefix + property.id + '"' +
' class="text ui-widget-content ui-corner-all"/>');
}
});
});
};
priv.prepareDialogForElement = function(title, element_id) {
priv.prepareDialogForElement = function (title, element_id) {
// code to allow changing values on connections. For now we assume
// that it is throughput. But we will need more generic code
//var throughput = $( "#throughput" ),
// allFields = $( [] ).add( throughput );
$(function() {
$( "input[type=submit]" )
$(function () {
$("input[type=submit]")
.button()
.click(function( event ) {
.click(function (event) {
event.preventDefault();
});
});
// Render fields for that particular element
var fieldset = $("#dialog-fieldset");
$("#dialog-fieldset").children().remove()
$("#dialog-fieldset").children().remove();
var element_id_prefix = element_id.split("_")[0];
var property_list = configuration[element_id_prefix].property_list || [];
var previous_data = that.getData()["element"];
var element_name = previous_data[element_id]['name'] || element_id;
fieldset.append('<label>Name</label><input type="text" name="name" id="name" value="' + element_name + '" class="text ui-widget-content ui-corner-all"/>');
fieldset.append(
'<label>Name</label><input type="text" name="name" id="name" value="' +
element_name + '" class="text ui-widget-content ui-corner-all"/>');
previous_data = previous_data[element_id] || {};
previous_data = previous_data.data || {};
var previous_value;
var renderField = function(property_list, previous_data, prefix) {
var renderField = function (property_list, previous_data, prefix) {
if (prefix === undefined) {
prefix = "";
}
$.each(property_list, function(key, property) {
$.each(property_list, function (key, property) {
if (property._class === "Dream.Property") {
previous_value = previous_data[property.id] || "";
if (previous_value.length > 0) {
previous_value = ' value="' + previous_value + '"';
}
fieldset.append("<label>" + prefix + property.id + "</label>" +
'<input type="text" name="' + prefix + property.id + '"' +
previous_value +
' id="' + prefix + property.id + '"' +
' class="text ui-widget-content ui-corner-all"/>')
'<input type="text" name="' + prefix + property.id + '"' +
previous_value +
' id="' + prefix + property.id + '"' +
' class="text ui-widget-content ui-corner-all"/>');
} else if (property._class === "Dream.PropertyList") {
var next_prefix = prefix + property.id + "-";
var next_previous_data = previous_data[property.id] || {};
renderField(property.property_list, next_previous_data, next_prefix);
renderField(property.property_list, next_previous_data,
next_prefix);
}
});
};
renderField(property_list, previous_data);
$( "#dialog-form" ).dialog({
$("#dialog-form").dialog({
autoOpen: false,
height: 300,
width: 350,
modal: true,
title: title || "",
buttons: {
Cancel: function() {
$( this ).dialog( "close" );
Cancel: function () {
$(this).dialog("close");
},
Delete: function() {
if (confirm("Are you sure you want to delete " + element_id + " ?")) {
Delete: function () {
if (confirm("Are you sure you want to delete " + element_id +
" ?")) {
that.removeElement(element_id);
}
$( this ).dialog( "close" );
$(this).dialog("close");
},
Validate: function() {
Validate: function () {
var data = {}, prefixed_property_id, property_element;
var updateDataPropertyList = function(property_list, data, prefix) {
var updateDataPropertyList = function (property_list, data,
prefix) {
if (prefix === undefined) {
prefix = "";
}
$.each(property_list, function(key, property) {
$.each(property_list, function (key, property) {
if (property._class === "Dream.Property") {
prefixed_property_id = prefix + property.id;
property_element = $("#" + prefixed_property_id);
......@@ -160,18 +170,22 @@
} else if (property._class === "Dream.PropertyList") {
var next_prefix = prefix + property.id + "-";
data[property.id] = {};
updateDataPropertyList(property.property_list, data[property.id], next_prefix);
updateDataPropertyList(property.property_list, data[
property.id], next_prefix);
}
});
};
updateDataPropertyList(property_list, data);
that.updateElementData(element_id, {data: data, name: $("#name").val() || element_id});
$( this ).dialog( "close" );
},
that.updateElementData(element_id, {
data: data,
name: $("#name").val() || element_id
});
$(this).dialog("close");
}
},
close: function() {
close: function () {
//allFields.val( "" ).removeClass( "ui-state-error" );
}
});
......@@ -181,17 +195,19 @@
that.newElement = function (element) {
var element_prefix = element.id.split('_')[0];
priv.super_newElement(element, configuration[element_prefix]);
$("#" + element.id).bind('click', function() {
$( "#dialog-form" ).dialog( "destroy" ) ;
$("#" + element.id).bind('click', function () {
$("#dialog-form").dialog("destroy");
priv.prepareDialogForElement(element.id, element.id);
$( "#dialog-form" ).dialog( "open" );
$("#dialog-form").dialog("open");
});
// Store default values
var data = {}, property_list = configuration[element_prefix]["property_list"] || [];
var updateDefaultData = function(data, property_list) {
$.each(property_list, function(key, element) {
var data = {}, property_list = configuration[element_prefix][
"property_list"
] || [];
var updateDefaultData = function (data, property_list) {
$.each(property_list, function (key, element) {
if (element) {
if(element._class === "Dream.Property") {
if (element._class === "Dream.Property") {
data[element.id] = element._default;
} else if (element._class === "Dream.PropertyList") {
data[element.id] = {};
......@@ -201,74 +217,80 @@
}
}
});
}
};
updateDefaultData(data, property_list);
that.updateElementData(element.id, {data: data});
that.updateElementData(element.id, {
data: data
});
};
priv.super_start = that.start;
that.start = function() {
that.start = function () {
priv.super_start();
priv.displayTool();
priv.initDialog();
// save general configuration default values
var general_properties = {};
$.each(configuration["Dream-Configuration"].property_list, function(idx, element) {
$.each(configuration["Dream-Configuration"].property_list, function (
idx, element) {
general_properties[element.id] = element._default;
});
that.setGeneralProperties(general_properties);
that.initGeneralProperties();
};
priv.formatForManpy = function(data) {
priv.formatForManpy = function (data) {
var manpy_dict = {}, coreObject = [];
$.each(data['element'], function(idx, element) {
$.each(data['element'], function (idx, element) {
var clone_element = {};
/* clone the element and put content of 'data' at the top level. */
$.each(element, function(k, v) {
$.each(element, function (k, v) {
if (k == 'data') {
$.each(v, function(kk, vv) {
$.each(v, function (kk, vv) {
clone_element[kk] = vv;
});
} else {
clone_element[k] = v;
}
});
coreObject.push( clone_element );
coreObject.push(clone_element);
});
manpy_dict['elementList'] = coreObject;
manpy_dict['modelResource'] = [];
manpy_dict['general'] = data['general'];
return manpy_dict;
}
};
/** Runs the simulation, and call the callback with results once the
* simulation is finished.
*/
that.runSimulation = function(callback) {
that.runSimulation = function (callback) {
// handle Dream.General properties (in another function maybe ?)
var prefix = "General-", properties = {}, prefixed_property_id;
var prefix = "General-",
properties = {}, prefixed_property_id;
$.each(configuration['Dream-Configuration']['property_list'],
function(idx, property){
function (idx, property) {
if (property._class === "Dream.Property") {
prefixed_property_id = prefix + property.id;
properties[property.id] = $("#" + prefixed_property_id).val();
}
});
});
that.setGeneralProperties(properties);
var model = priv.formatForManpy(that.getData());
$.ajax(
'/runSimulation', {
data: JSON.stringify({json: model}),
contentType: 'application/json',
type: 'POST',
success: function(data, textStatus, jqXHR){
callback(data);
}
});
data: JSON.stringify({
json: model
}),
contentType: 'application/json',
type: 'POST',
success: function (data, textStatus, jqXHR) {
callback(data);
}
});
};
return that;
......
dream/platform/static/src/dream2.js
View file @ 39946af2
......@@ -17,181 +17,208 @@
* along with DREAM. If not, see <http://www.gnu.org/licenses/>.
* =========================================================================== */
(function($) {
/*jslint indent: 2, maxlen: 80, nomen: true */
(function ($) {
"use strict";
jsPlumb.bind("ready", function() {
jsPlumb.bind("ready", function () {
/* Initialize jsPlumb defaults
*/
// TODO: default for connections ?
jsPlumb.setRenderMode(jsPlumb.SVG);
jsPlumb.importDefaults({
Endpoint: [ "Dot", {radius: 2} ],
ConnectionOverlays : [
[ "Arrow", { location:1, width:10 } ]
Endpoint: ["Dot", {
radius: 2
}],
ConnectionOverlays: [
["Arrow", {
location: 1,
width: 10
}]
],
Anchor: "Continuous"
});
$.widget("dream.grapheditor", {
options: {
node_class: "graph_node", // CSS class for nodes
node_data_key: "grapheditor_node_data", // Key to store data on nodes using $.data
// XXX is it good idea to use
// $.data ???
draggable_nodes: true, // Can nodes be dragged
},
_create: function() {
this.nodes = {};
this.edges = {};
if (this.options.graph) {
this.graph(this.options.graph);
}
},
destroy: function() {
this.clear();
this._destroy();
},
clear: function() {
this.edges = {};
$.each(this.nodes, $.proxy(function(node_id, node) {
jsPlumb.remove(node);
delete(this["nodes"][node_id]);
}, this));
},
create_node_element: function(node_id, node_data) {
// Create an element for a node, and add it to the main element.
return $('<div>')
.uniqueId()
.addClass(this.options.node_class)
.text(node_data['name'] || node_id)
.appendTo(this.element)
},
add_node: function(node_id, node_data) {
/* add a node */
var element = this.create_node_element(node_id, node_data);
if (this.options.draggable_nodes) {
// make the node draggable
jsPlumb.draggable(element, {
containment: this.element,
stop: $.proxy(function(node_id, event) {
this.node_position(node_id, this.node_position(node_id));
this._trigger("node_moved", event, node_id);
}, this, node_id)
});
}
this.nodes[node_id] = element;
this.node_position(node_id, node_data);
this.node_data(node_id, node_data);
this._trigger('node_added', node_id);
},
create_edge_element: function(edge_id, source_node_id, destination_node_id, edge_data) {
// Create an element for an edge
var edge_label = edge_data['name'] || "";
jsPlumb.connect({
source: this.nodes[source_node_id].attr("id"),
target: this.nodes[destination_node_id].attr("id"),
paintStyle: { lineWidth: 1, strokeStyle: "#000" }, // XXX make this an option
overlays : [["Label", {label: edge_label}]]
});
},
add_edge: function(edge_id, source_node_id, destination_node_id, edge_data) {
/* add an edge */
this.create_edge_element(edge_id, source_node_id, destination_node_id, edge_data);
this.edges[edge_id] = [source_node_id, destination_node_id, edge_data];
this._trigger('edge_added', edge_id);
},
node_data: function(node_id, node_data) {
/* get or set data for a node */
var node = this.nodes[node_id];
if (node_data === undefined) {
return node.data(this.options.node_data_key);
}
this.nodes[node_id].data(this.options.node_data_key, node_data);
this._trigger("node_data_changed", node_id)
return this
},
edge_data: function(edge_id, edge_data) {
/* get or set data for an edge */
var edge = this.edges[edge_id];
if (edge_data === undefined) {
return edge[2]
}
this.edges[edge_id] = [edge[0], edge[1], edge_data]
this._trigger("edge_data_changed", edge_id)
return this
},
node_position: function(node_id, position) {
/* Get or set the position of a node with position given on a 0..1 scale */
var node = this.nodes[node_id],
node_position = node.position(),
element_position = this.element.position();
if (position === undefined) {
return {
"top": (node_position.top - element_position.top)
/ (this.element.height() - node.height()),
"left": (node_position.left - element_position.left)
/ (this.element.width() - node.width())
};
}
node.css({
"top": element_position.top +
Math.floor(position.top * (this.element.height() - node.height())) + "px",
"left": element_position.left +
Math.floor(position.left * (this.element.width() - node.width())) + "px"
$.widget("dream.grapheditor", {
options: {
node_class: "graph_node", // CSS class for nodes
node_data_key: "grapheditor_node_data", // Key to store data on nodes using $.data
// XXX is it good idea to use
// $.data ???
draggable_nodes: true // Can nodes be dragged
},
_create: function () {
this.nodes = {};
this.edges = {};
if (this.options.graph) {
this.graph(this.options.graph);
}
},
destroy: function () {
this.clear();
this._destroy();
},
clear: function () {
this.edges = {};
$.each(this.nodes, $.proxy(function (node_id, node) {
jsPlumb.remove(node);
delete(this["nodes"][node_id]);
}, this));
},
create_node_element: function (node_id, node_data) {
// Create an element for a node, and add it to the main element.
return $('<div>')
.uniqueId()
.addClass(this.options.node_class)
.text(node_data['name'] || node_id)
.appendTo(this.element);
},
add_node: function (node_id, node_data) {
/* add a node */
var element = this.create_node_element(node_id, node_data);
if (this.options.draggable_nodes) {
// make the node draggable
jsPlumb.draggable(element, {
containment: this.element,
stop: $.proxy(function (node_id, event) {
this.node_position(node_id, this.node_position(node_id));
this._trigger("node_moved", event, node_id);
}, this, node_id)
});
}
this.nodes[node_id] = element;
this.node_position(node_id, node_data);
this.node_data(node_id, node_data);
this._trigger('node_added', node_id);
},
create_edge_element: function (edge_id, source_node_id,
destination_node_id, edge_data) {
// Create an element for an edge
var edge_label = edge_data['name'] || "";
jsPlumb.connect({
source: this.nodes[source_node_id].attr("id"),
target: this.nodes[destination_node_id].attr("id"),
paintStyle: {
lineWidth: 1,
strokeStyle: "#000"
}, // XXX make this an option
overlays: [
["Label", {
label: edge_label
}]
]
});
},
add_edge: function (edge_id, source_node_id, destination_node_id,
edge_data) {
/* add an edge */
this.create_edge_element(edge_id, source_node_id,
destination_node_id, edge_data);
this.edges[edge_id] = [source_node_id, destination_node_id,
edge_data
];
this._trigger('edge_added', edge_id);
},
node_data: function (node_id, node_data) {
/* get or set data for a node */
var node = this.nodes[node_id];
if (node_data === undefined) {
return node.data(this.options.node_data_key);
}
this.nodes[node_id].data(this.options.node_data_key, node_data);
this._trigger("node_data_changed", node_id);
return this;
},
edge_data: function (edge_id, edge_data) {
/* get or set data for an edge */
var edge = this.edges[edge_id];
if (edge_data === undefined) {
return edge[2];
}
this.edges[edge_id] = [edge[0], edge[1], edge_data];
this._trigger("edge_data_changed", edge_id);
return this;
},
node_position: function (node_id, position) {
/* Get or set the position of a node with position given on a 0..1 scale */
var node = this.nodes[node_id],
node_position = node.position(),
element_position = this.element.position();
if (position === undefined) {
return {
"top": (node_position.top - element_position.top) / (this.element
.height() - node.height()),
"left": (node_position.left - element_position.left) / (this.element
.width() - node.width())
};
}
node.css({
"top": element_position.top +
Math.floor(position.top * (this.element.height() - node.height())) +
"px",
"left": element_position.left +
Math.floor(position.left * (this.element.width() - node.width())) +
"px"
});
// update node data with position
this.node_data(node_id, $.extend(this.node_data(node_id), {
top: position.top,
left: position.left
}));
jsPlumb.repaintEverything();
return this;
},
graph: function (value) {
// get or set the graph data
if (value === undefined) {
// get
var graph = {
"nodes": {},
"edges": {}
};
$.each(this.nodes, $.proxy(function (node_id, node) {
graph["nodes"][node_id] = node.data(this.options.node_data_key);
}, this));
$.each(this.edges, $.proxy(function (edge_id, edge) {
graph["edges"][edge_id] = this.edges[edge_id];
}, this));
return graph;
}
this.clear();
$.each(value.nodes, $.proxy(function (node_id, node) {
this.add_node(node_id, node);
}, this));
$.each(value.edges, $.proxy(function (edge_id, edge) {
this.add_edge(edge_id, edge[0], edge[1], edge[2] || {});
}, this));
return this;
}
});
// update node data with position
this.node_data(node_id, $.extend(this.node_data(node_id),
{top: position.top, left: position.left}));
jsPlumb.repaintEverything();
return this;
},
graph: function(value) {
// get or set the graph data
if ( value === undefined ) {
// get
var graph = {"nodes": {}, "edges": {}};
$.each(this.nodes, $.proxy(function(node_id, node) {
graph["nodes"][node_id] = node.data(this.options.node_data_key);
}, this));
$.each(this.edges, $.proxy(function(edge_id, edge) {
graph["edges"][edge_id] = this.edges[edge_id];
}, this));
return graph;
}
this.clear();
$.each(value.nodes, $.proxy(function(node_id, node) {
this.add_node(node_id, node);
}, this));
$.each(value.edges, $.proxy(function(edge_id, edge) {
this.add_edge(edge_id, edge[0], edge[1], edge[2] || {});
}, this));
return this;
}
});
$.getJSON("JSONInputs/Topology01.json", function(data) {
$("#main").grapheditor({graph: data,
node_moved: function(event, node_id) {
$.getJSON("JSONInputs/Topology01.json", function (data) {
$("#main").grapheditor({
graph: data,
node_moved: function (event, node_id) {
$("#debug_zone").val(JSON.stringify(
$("#main").grapheditor("graph"), undefined, " "));
}
......@@ -201,38 +228,50 @@ $.widget("dream.grapheditor", {
function move_node() {
$("#main").grapheditor("node_position", $("#node_id").val(), {
top: $("#node_top").val() / 100,
left: $("#node_left").val() / 100});
left: $("#node_left").val() / 100
});
}
$("#move_node").click(move_node);
$("#node_top").change(move_node);
$("#node_left").change(move_node);
// when node is selected or moved, update the sliders
function updateSliders(node_id) {
var node_pos = grapheditor.node_position(node_id);
$("#node_id").val(node_id);
$("#node_top").val(Math.floor(node_pos.top * 100)).slider("refresh");
$("#node_left").val(Math.floor(node_pos.left * 100)).slider("refresh");
$("#node_top").val(Math.floor(node_pos.top * 100)).slider(
"refresh");
$("#node_left").val(Math.floor(node_pos.left * 100)).slider(
"refresh");
}
// Access the nodes
var grapheditor = $("#main").data("dreamGrapheditor");
$.each(grapheditor.nodes, function(node_id, node) {
node.click(function(e){updateSliders(node_id)});
$.each(grapheditor.nodes, function (node_id, node) {
node.click(function (e) {
updateSliders(node_id);
});
// test: click to add a property
node.click(function(e){
$.mobile.changePage( "#dialog", { role: "dialog" } );
node.click(function (e) {
$.mobile.changePage("#dialog", {
role: "dialog"
});
$("#main").grapheditor("node_data", node_id,
$.extend( $("#main").grapheditor("node_data", node_id),
{"dbclick": 1} ))
$.extend($("#main").grapheditor("node_data", node_id), {
"dbclick": 1
}));
});
})
$("#main").on("grapheditornode_moved", function(event, node_id) { updateSliders(node_id) })
});
$("#main").on("grapheditornode_moved", function (event, node_id) {
updateSliders(node_id);
});
// reload from json
$("#load_json").click(function() { $("#main").grapheditor("graph",
JSON.parse($("#debug_zone").val()))});
$("#load_json").click(function () {
$("#main").grapheditor("graph",
JSON.parse($("#debug_zone").val()));
});
});
});
......
dream/platform/static/src/dream_launcher.js
View file @ 39946af2
......@@ -17,124 +17,268 @@
* along with DREAM. If not, see <http://www.gnu.org/licenses/>.
* =========================================================================== */
(function($) {
(function ($) {
"use strict";
jsPlumb.bind("ready", function() {
jsPlumb.bind("ready", function () {
var dream_instance, jio;
jio = new jIO.newJio({type: "local", username: "dream", applicationname: "dream"});
jio = new jIO.newJio({
type: "local",
username: "dream",
applicationname: "dream"
});
var window_id = 1;
var id_container = {}; // to allow generating next ids, like Machine_1, Machine_2, etc
var property_container = {entity: {id: "entity", type:"string", _class: "Dream.Property", _default: "Part"},
// XXX is it possible not to repeat id ?
mean: {id: "mean", type: "string", _class: "Dream.Property", _default: "0.9"},
distributionType: {id: "distributionType", type: "string", _class: "Dream.Property", _default: "Fixed"},
stdev: {id: "stdev", type: "string", _class: "Dream.Property", _default: "0.1"},
min: {id: "min", type: "string", _class: "Dream.Property", _default: "0.1"},
max: {id: "max", type: "string", _class: "Dream.Property", _default: "1"},
failureDistribution: {id: "failureDistribution", type: "string", _class: "Dream.Property", _default:"No"},
MTTF: {id: "MTTF", type: "string", _class: "Dream.Property", _default: "40"},
MTTR: {id: "MTTR", type: "string", _class: "Dream.Property", _default: "10"},
repairman: {id: "repairman", type: "string", _class: "Dream.Property", _default: "None"},
isDummy: {id: "isDummy", type: "string", _class: "Dream.Property", _default: "0"},
capacity: {id: "capacity", type: "string", _class: "Dream.Property", _default: "1"},
numberOfReplications: {id: "numberOfReplications", type: "string", _class: "Dream.Property", _default: "10"},
maxSimTime: {id: "maxSimTime", type: "string", _class: "Dream.Property", _default: "100"},
confidenceLevel: {id: "confidenceLevel", type: "string", _class: "Dream.Property", _default: "0.5"},
processTimeout: {id: "processTimeout", type: "string", _class: "Dream.Property", _default: "0.5"},
var property_container = {
entity: {
id: "entity",
type: "string",
_class: "Dream.Property",
_default: "Part"
},
// XXX is it possible not to repeat id ?
mean: {
id: "mean",
type: "string",
_class: "Dream.Property",
_default: "0.9"
},
distributionType: {
id: "distributionType",
type: "string",
_class: "Dream.Property",
_default: "Fixed"
},
stdev: {
id: "stdev",
type: "string",
_class: "Dream.Property",
_default: "0.1"
},
min: {
id: "min",
type: "string",
_class: "Dream.Property",
_default: "0.1"
},
max: {
id: "max",
type: "string",
_class: "Dream.Property",
_default: "1"
},
failureDistribution: {
id: "failureDistribution",
type: "string",
_class: "Dream.Property",
_default: "No"
},
MTTF: {
id: "MTTF",
type: "string",
_class: "Dream.Property",
_default: "40"
},
MTTR: {
id: "MTTR",
type: "string",
_class: "Dream.Property",
_default: "10"
},
repairman: {
id: "repairman",
type: "string",
_class: "Dream.Property",
_default: "None"
},
isDummy: {
id: "isDummy",
type: "string",
_class: "Dream.Property",
_default: "0"
},
capacity: {
id: "capacity",
type: "string",
_class: "Dream.Property",
_default: "1"
},
numberOfReplications: {
id: "numberOfReplications",
type: "string",
_class: "Dream.Property",
_default: "10"
},
maxSimTime: {
id: "maxSimTime",
type: "string",
_class: "Dream.Property",
_default: "100"
},
confidenceLevel: {
id: "confidenceLevel",
type: "string",
_class: "Dream.Property",
_default: "0.5"
},
processTimeout: {
id: "processTimeout",
type: "string",
_class: "Dream.Property",
_default: "0.5"
}
};
property_container["interarrivalTime"] = {
id: "interarrivalTime",
property_list: [property_container["mean"], property_container[
"distributionType"]],
_class: "Dream.PropertyList"
};
property_container["processingTime"] = {
id: "processingTime",
property_list: [property_container["mean"], property_container[
"distributionType"],
property_container["stdev"], property_container["min"],
property_container["max"]
],
_class: "Dream.PropertyList"
};
property_container["failures"] = {
id: "failures",
property_list: [property_container["failureDistribution"],
property_container["MTTF"],
property_container["MTTR"], property_container["repairman"]
],
_class: "Dream.PropertyList"
};
property_container["interarrivalTime"] = {id:"interarrivalTime",
property_list: [property_container["mean"], property_container["distributionType"]],
_class: "Dream.PropertyList"};
property_container["processingTime"] = {id:"processingTime",
property_list: [property_container["mean"], property_container["distributionType"],
property_container["stdev"], property_container["min"],
property_container["max"],
],
_class: "Dream.PropertyList"};
property_container["failures"] = {id:"failures",
property_list: [property_container["failureDistribution"], property_container["MTTF"],
property_container["MTTR"], property_container["repairman"],
],
_class: "Dream.PropertyList"};
var configuration = {
"Dream-Source": { anchor: {RightMiddle: {}}, /* TODO: make anchor not a configuration option and allow to connect from everywhere */
property_list: [property_container["interarrivalTime"], property_container["entity"]],
_class: 'Dream.Source',
},
"Dream-Machine": { anchor: {RightMiddle: {}, LeftMiddle: {}, TopCenter: {}, BottomCenter: {}},
property_list: [property_container["processingTime"], property_container["failures"]],
_class: 'Dream.Machine',
},
"Dream-Queue": { anchor: {RightMiddle: {}, LeftMiddle: {}},
property_list: [property_container["capacity"], property_container["isDummy"]],
_class: 'Dream.Queue',
},
"Dream-Exit": { anchor: {LeftMiddle: {},}, _class: 'Dream.Exit' },
"Dream-Repairman": { anchor: {TopCenter: {}, BottomCenter: {}},
property_list: [property_container["capacity"]],
_class: 'Dream.Repairman',
},
"Dream-Configuration": { property_list: [ property_container["numberOfReplications"],
property_container["maxSimTime"],
property_container["confidenceLevel"],
property_container["processTimeout"], ],
_class: 'Dream.Repairman', },
}
dream_instance = Dream(configuration)
"Dream-Source": {
anchor: {
RightMiddle: {}
},
/* TODO: make anchor not a configuration option and allow to connect from everywhere */
property_list: [property_container["interarrivalTime"],
property_container["entity"]
],
_class: 'Dream.Source'
},
"Dream-Machine": {
anchor: {
RightMiddle: {},
LeftMiddle: {},
TopCenter: {},
BottomCenter: {}
},
property_list: [property_container["processingTime"],
property_container["failures"]
],
_class: 'Dream.Machine'
},
"Dream-Queue": {
anchor: {
RightMiddle: {},
LeftMiddle: {}
},
property_list: [property_container["capacity"], property_container[
"isDummy"]],
_class: 'Dream.Queue'
},
"Dream-Exit": {
anchor: {
LeftMiddle: {}
},
_class: 'Dream.Exit'
},
"Dream-Repairman": {
anchor: {
TopCenter: {},
BottomCenter: {}
},
property_list: [property_container["capacity"]],
_class: 'Dream.Repairman'
},
"Dream-Configuration": {
property_list: [property_container["numberOfReplications"],
property_container["maxSimTime"],
property_container["confidenceLevel"],
property_container["processTimeout"]
],
_class: 'Dream.Repairman'
}
};
dream_instance = Dream(configuration);
dream_instance.start();
$( ".tool" ).draggable({ opacity: 0.7, helper: "clone",
stop: function(tool) {
var box_top, box_left, _class;
var offset = $("[id=render]").offset();
box_top = tool.clientY - offset.top + "px";
box_left = tool.clientX - offset.left + "px";
id_container[tool.target.id] = (id_container[tool.target.id] || 0) + 1;
_class = tool.target.id.replace('-', '.'); // XXX - vs .
dream_instance.newElement({id : tool.target.id + "_" + id_container[tool.target.id],
coordinate: {top: box_top, left: box_left},
_class: _class,
});
window_id += 1;
},
$(".tool").draggable({
opacity: 0.7,
helper: "clone",
stop: function (tool) {
var box_top, box_left, _class;
var offset = $("[id=render]").offset();
box_top = tool.clientY - offset.top + "px";
box_left = tool.clientX - offset.left + "px";
id_container[tool.target.id] = (id_container[tool.target.id] || 0) +
1;
_class = tool.target.id.replace('-', '.'); // XXX - vs .
dream_instance.newElement({
id: tool.target.id + "_" + id_container[tool.target.id],
coordinate: {
top: box_top,
left: box_left
},
_class: _class
});
window_id += 1;
}
});
// Check if there is already data when we first load the page, if yes, then build graph from it
jio.get({_id: "dream_demo"}, function(err, response) {
jio.get({
_id: "dream_demo"
}, function (err, response) {
if (response !== undefined && response.data !== undefined) {
// Add all elements
$.each(response.data.element, function(key, value) {
var preference_data = response.data.preference !== undefined ? response.data.preference[value.id] : {};
$.each(preference_data, function(preference_key, preference_value){
$.each(response.data.element, function (key, value) {
var preference_data = response.data.preference !== undefined ?
response.data.preference[value.id] : {};
$.each(preference_data, function (preference_key,
preference_value) {
value[preference_key] = preference_value;
});
dream_instance.newElement(value);
dream_instance.updateElementData(value.id, {data: value.data || {}});
dream_instance.updateElementData(value.id, {
data: value.data || {}
});
});
// Now link elements between them and update id_container
$.each(response.data.element, function(key, value) {
var element_id = value.id, prefix, suffix, splitted_element_id,
successor_list = value.successorList || [];
$.each(response.data.element, function (key, value) {
var element_id = value.id,
prefix, suffix, splitted_element_id,
successor_list = value.successorList || [];
splitted_element_id = element_id.split("_");
prefix = splitted_element_id[0];
suffix = splitted_element_id[1];
id_container[prefix] = Math.max((id_container[prefix] || 0), parseInt(suffix, 10));
$.each(successor_list, function(idx, successor_value) {
id_container[prefix] = Math.max((id_container[prefix] || 0),
parseInt(suffix, 10));
$.each(successor_list, function (idx, successor_value) {
dream_instance.connect(value.id, successor_value);
});
});
dream_instance.setGeneralProperties(response.data.general);
dream_instance.initGeneralProperties(); // XXX
$("#json_output").text(JSON.stringify(dream_instance.getData(), undefined, " "));
$("#json_output").text(JSON.stringify(dream_instance.getData(),
undefined, " "));
}
// once the data is read, we can subscribe to every changes
$.subscribe("Dream.Gui.onDataChange", function(event, data) {
$.subscribe("Dream.Gui.onDataChange", function (event, data) {
$("#json_output").text(JSON.stringify(data, undefined, " "));
jio.put({_id: "dream_demo", data: data}, function(err, response) { } );
jio.put({
_id: "dream_demo",
data: data
}, function (err, response) {});
});
});
......@@ -142,76 +286,103 @@
// Enable "Run Simulation" button
$("#run_simulation").button().click(
function(e){
dream_instance.runSimulation(
function(data) {
function (e) {
dream_instance.runSimulation(
function (data) {
if (data['success']) {
$("#json_result").text(JSON.stringify(data['success'], undefined, " "));
$("#json_result").text(JSON.stringify(data['success'],
undefined, " "));
// display demo graph.
$("#graph_zone").show();
var blockage_data = [], waiting_data = [], failure_data = [], working_data = [], ticks= [], counter = 1;
$.each(data['success'].elementList, function(idx, obj){
if (obj.results.working_ratio !== undefined) {
/* when there is only one replication, the ratio is given as a float,
var blockage_data = [],
waiting_data = [],
failure_data = [],
working_data = [],
ticks = [],
counter = 1;
$.each(data['success'].elementList, function (idx, obj) {
if (obj.results.working_ratio !== undefined) {
/* when there is only one replication, the ratio is given as a float,
otherwise we have a mapping avg, min max */
blockage_data.push([counter, obj.results.blockage_ratio.avg || obj.results.blockage_ratio]);
waiting_data.push([counter, obj.results.waiting_ratio.avg || obj.results.waiting_ratio]);
failure_data.push([counter, obj.results.failure_ratio.avg || obj.results.failure_ratio]);
working_data.push([counter, obj.results.working_ratio.avg || obj.results.working_ratio]);
ticks.push([counter, dream_instance.getData().element[obj.id].name || obj.id]);
counter ++;
}
})
var series = [
{label:"Working", data: working_data},
{label:"Waiting", data: waiting_data},
{label:"Failures", data: failure_data},
{label:"Blockage", data: blockage_data} ];
blockage_data.push([counter, obj.results.blockage_ratio
.avg || obj.results.blockage_ratio
]);
waiting_data.push([counter, obj.results.waiting_ratio.avg ||
obj.results.waiting_ratio
]);
failure_data.push([counter, obj.results.failure_ratio.avg ||
obj.results.failure_ratio
]);
working_data.push([counter, obj.results.working_ratio.avg ||
obj.results.working_ratio
]);
ticks.push([counter, dream_instance.getData().element[
obj.id].name || obj.id]);
counter++;
}
});
var series = [{
label: "Working",
data: working_data
}, {
label: "Waiting",
data: waiting_data
}, {
label: "Failures",
data: failure_data
}, {
label: "Blockage",
data: blockage_data
}];
var options = {
xaxis: {
minTickSize: 1,
ticks: ticks
},
yaxis: {max: 100},
yaxis: {
max: 100
},
series: {
bars: {
show: true,
barWidth: .9,
barWidth: 0.9,
align: "center"
},
stack: true,
},
stack: true
}
};
$.plot("#graph", series, options);
} else {
$("#json_result").effect('shake', 50).text(data['error']);
}
});
e.preventDefault();
return false;
});
});
e.preventDefault();
return false;
});
// Enable "Layout Graph" button
$("#layout_graph").button().click(
function(e){
dream_instance.positionGraph();
// XXX dirty way to redisplay after jio is saved
setTimeout(function() {window.history.go(0)}, 500);
});
function (e) {
dream_instance.positionGraph();
// XXX dirty way to redisplay after jio is saved
setTimeout(function () {
window.history.go(0);
}, 500);
});
// Enable "Clear All" button
$("#clear_all").button().click(
function(e){
id_container = {};
dream_instance.clearAll();
e.preventDefault();
return false;
});
})
function (e) {
id_container = {};
dream_instance.clearAll();
e.preventDefault();
return false;
});
});
$("#graph_zone").hide();
})(jQuery);
dream/platform/static/src/jsonPlumb.js
View file @ 39946af2
......@@ -28,54 +28,75 @@
var gradient_color = "#09098e";
jsPlumb.importDefaults({
// default drag options
DragOptions : { cursor: 'pointer', zIndex:2000 },
EndpointStyles : [{ fillStyle:'#225588' }, { fillStyle:'#558822' }],
DragOptions: {
cursor: 'pointer',
zIndex: 2000
},
EndpointStyles: [{
fillStyle: '#225588'
}, {
fillStyle: '#558822'
}],
//PaintStyle : {strokeStyle:"#736AFF", lineWidth:2 },
HoverPaintStyle : {strokeStyle:"#42a62c", lineWidth: 4},
Endpoint : [ "Dot", {radius:2} ],
ConnectionOverlays : [
[ "Arrow", {
location:1,
id:"arrow",
length:14,
foldback:0.8
} ],
HoverPaintStyle: {
strokeStyle: "#42a62c",
lineWidth: 4
},
Endpoint: ["Dot", {
radius: 2
}],
ConnectionOverlays: [
["Arrow", {
location: 1,
id: "arrow",
length: 14,
foldback: 0.8
}]
],
PaintStyle : {
gradient:{stops:[[0, color], [0.5, gradient_color], [1, color]]},
lineWidth:5,
strokeStyle:color,
PaintStyle: {
gradient: {
stops: [
[0, color],
[0.5, gradient_color],
[1, color]
]
},
lineWidth: 5,
strokeStyle: color
},
Anchor: "Continuous",
Connector: ["StateMachine", { curviness:20 }],
});
Connector: ["StateMachine", {
curviness: 20
}]
});
// listen for clicks on connections, and offer to change values on click.
jsPlumb.bind("click", function(conn) {
jsPlumb.bind("click", function (conn) {
jsPlumb.detach(conn);
});
jsPlumb.bind("beforeDetach", function(conn) {
jsPlumb.bind("beforeDetach", function (conn) {
return confirm("Delete connection?");
});
jsPlumb.bind("connectionDrag", function(connection) {
});
jsPlumb.bind("connectionDragStop", function(connection) {
});
jsPlumb.bind("connectionDrag", function (connection) {});
jsPlumb.bind("connectionDragStop", function (connection) {});
jsPlumb.makeTarget(jsPlumb.getSelector(".w"), {
dropOptions:{ hoverClass:"dragHover" },
anchor:"Continuous"
dropOptions: {
hoverClass: "dragHover"
},
anchor: "Continuous"
});
var updateConnectionData = function(connection, remove) {
var updateConnectionData = function (connection, remove) {
var source_element;
source_element = priv.element_container[connection.sourceId];
source_element.successorList = source_element.successorList || [];
if (remove) {
source_element.successorList.splice(source_element.successorList.indexOf(connection.targetId));
source_element.successorList.splice(source_element.successorList.indexOf(
connection.targetId));
} else {
source_element.successorList.push(connection.targetId);
}
......@@ -83,17 +104,17 @@
};
// bind to connection/connectionDetached events, and update the list of connections on screen.
jsPlumb.bind("connection", function(info, originalEvent) {
jsPlumb.bind("connection", function (info, originalEvent) {
updateConnectionData(info.connection);
});
jsPlumb.bind("connectionDetached", function(info, originalEvent) {
jsPlumb.bind("connectionDetached", function (info, originalEvent) {
updateConnectionData(info.connection, true);
});
priv.onDataChange();
priv.draggable();
};
priv.updateElementCoordinate = function(element_id, coordinate) {
priv.updateElementCoordinate = function (element_id, coordinate) {
var preference = priv.preference_container[element_id] || {}, element;
if (coordinate === undefined) {
coordinate = {};
......@@ -107,55 +128,61 @@
return coordinate;
};
priv.draggable = function() {
priv.draggable = function () {
// make all the window divs draggable
var stop = function(el) {
var stop = function (el) {
var element_id = el.target.id;
priv.updateElementCoordinate(element_id);
}
jsPlumb.draggable(jsPlumb.getSelector(".window"), { grid: [20, 20] ,
stop: stop,
};
jsPlumb.draggable(jsPlumb.getSelector(".window"), {
grid: [20, 20],
stop: stop
});
};
priv.addElementToContainer = function(element) {
priv.addElementToContainer = function (element) {
// Now update the container of elements
var element_data = {_class: element._class,
id: element.id,
name: element.id,
var element_data = {
_class: element._class,
id: element.id,
name: element.id
};
priv.element_container[element.id] = element_data;
priv.onDataChange();
};
priv.onDataChange = function() {
priv.onDataChange = function () {
$.publish("Dream.Gui.onDataChange", priv.getData());
};
that.positionGraph = function() {
that.positionGraph = function () {
$.ajax(
'/positionGraph', {
data: JSON.stringify(priv.getData()),
contentType: 'application/json',
type: 'POST',
success: function(data, textStatus, jqXHR){
$.each(data, function(node, pos) {
priv.updateElementCoordinate(node,
{top: (Math.floor(pos.top*$("#main").height()) - 45) + "px",
left: Math.floor(pos.left*$("#main").width()) + "px"});
});
}
});
data: JSON.stringify(priv.getData()),
contentType: 'application/json',
type: 'POST',
success: function (data, textStatus, jqXHR) {
$.each(data, function (node, pos) {
priv.updateElementCoordinate(node, {
top: (Math.floor(pos.top * $("#main").height()) - 45) +
"px",
left: Math.floor(pos.left * $("#main").width()) + "px"
});
});
}
});
}
};
priv.getData = function() {
return { "element": priv.element_container,
"preference": priv.preference_container,
"general": priv.general_container };
priv.getData = function () {
return {
"element": priv.element_container,
"preference": priv.preference_container,
"general": priv.general_container
};
};
priv.removeElement = function(element_id) {
priv.removeElement = function (element_id) {
jsPlumb.removeAllEndpoints($("#" + element_id));
$("#" + element_id).remove();
delete(priv.element_container[element_id]);
......@@ -187,14 +214,17 @@
};
that.clearAll = function () {
$("[id=render]").children().remove()
$.each(priv.element_container, function(element_id) {
$("[id=render]").children().remove();
$.each(priv.element_container, function (element_id) {
priv.removeElement(element_id);
});
};
that.connect = function (source_id, target_id) {
jsPlumb.connect({source: source_id, target: target_id});
jsPlumb.connect({
source: source_id,
target: target_id
});
};
that.setGeneralProperties = function (properties) {
......@@ -203,14 +233,15 @@
};
that.newElement = function (element, option) {
var render_element, style_string="", coordinate=element.coordinate,
box;
var render_element, style_string = "",
coordinate = element.coordinate,
box;
render_element = $("[id=render]");
if (coordinate !== undefined) {
coordinate = priv.updateElementCoordinate(element.id, coordinate)
coordinate = priv.updateElementCoordinate(element.id, coordinate);
}
render_element.append('<div class="window" id="' +
element.id + '">' + element.id + '</div>');
element.id + '">' + element.id + '</div>');
box = $("#" + element.id);
box.css("top", coordinate.top);
box.css("left", coordinate.left);
......@@ -225,18 +256,24 @@
if (element._class === "Dream.Repairman") {
color = "rgb(189,11,11)";
gradient_color = "rgb(255,0,0)";
};
}
var endpoint = {
endpoint: "Rectangle",
paintStyle:{ width:25, height:21, fillStyle:color },
isSource:true,
scope:"blue rectangle",
maxConnections:3,
isTarget:true,
paintStyle: {
width: 25,
height: 21,
fillStyle: color
},
isSource: true,
scope: "blue rectangle",
maxConnections: 3,
isTarget: true
};
for (var key in option.anchor) {
jsPlumb.addEndpoint(element.id, { anchor: key }, endpoint);
};
jsPlumb.addEndpoint(element.id, {
anchor: key
}, endpoint);
}
priv.addElementToContainer(element);
};
......
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