rewrite editScript.js and modify interfaces

This commit is contained in:
zhengyingying 2014-04-02 21:10:22 +08:00
parent 2d2ff5593a
commit baf5f554dc
9 changed files with 320 additions and 26 deletions

View File

@ -9,12 +9,12 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description"
content="Bench4Q, a new method for QOS benchmarking.">
<title>Create scripts by yourself.</title>
<!-- The styles -->
<link id="bs-css" href="lib/chrisma/css/bootstrap-cerulean.css"
<link href="lib/chrisma/css/bootstrap-cerulean.css" rel="stylesheet">
<link href="lib/chrisma/css/opa-icons.css" rel="stylesheet">
<link
href="http://ajax.aspnetcdn.com/ajax/bootstrap/2.3.2/css/bootstrap-responsive.css"
rel="stylesheet">
<link href="lib/chrisma/css/opa-icons.css" rel="stylesheet">
<link href="lib/chrisma/css/charisma-app.css" rel="stylesheet">
<style type="text/css">
body {
padding-bottom: 40px;
@ -25,6 +25,7 @@ body {
}
</style>
<link href="lib/chrisma/css/charisma-app.css" rel="stylesheet">
<link href="css/bench4q.css" rel="stylesheet">
<link href='css/plugin.css' rel='stylesheet'>
<link rel="shortcut icon" href="images/bench4q.png">
<!-- The HTML5 shim, for IE6-8 support of HTML5 elements -->

View File

@ -6,16 +6,24 @@
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<meta charset="utf-8">
<title>Bench4Q</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description"
content="Bench4Q, a new method for QOS benchmarking.">
<link id="bs-css" href="lib/chrisma/css/bootstrap-cerulean.css"
<link href="lib/chrisma/css/bootstrap-cerulean.css" rel="stylesheet">
<link href="lib/chrisma/css/opa-icons.css" rel="stylesheet">
<link
href="http://ajax.aspnetcdn.com/ajax/bootstrap/2.3.2/css/bootstrap-responsive.css"
rel="stylesheet">
<style type="text/css">
</style>
<link href="lib/chrisma/css/charisma-app.css" rel="stylesheet">
<link rel="shortcut icon" href="image/bench4q.png">
<link
href="http://ajax.aspnetcdn.com/ajax/bootstrap/2.3.2/css/bootstrap-responsive.css"
rel="stylesheet">
<link href="lib/chrisma/css/charisma-app.css" rel="stylesheet">
<link href='lib/chrisma/css/opa-icons.css' rel='stylesheet'>
<link href='lib/jsoneditor/css/jsoneditor.css' rel='stylesheet'>
<link href='bench4q-css/editor.css' rel='stylesheet'>
<link rel="shortcut icon" href="images/bench4q.png">
<link href='css/editor.css' rel='stylesheet'>
<!-- The HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
@ -284,6 +292,19 @@
</div>
</div>
</div>
<div class="span10 row-fluid">
<div class="span4 chooseScript" >
<p>UsePlugins:</p> <select name="usePlugins" id="usePlugins" onchange=" choosePlugin();">
<option >please choose one plug-in</option>
</select>
</div>
<div class="span4 chooseScript" >
<p>Behaviors:</p> <select name="behaviors" id="behaviors" onchange="chooseBehavior();">
<!-- <option value="send">Send -->
</select>
</div>
</div>
<div id="showPluginMethodForm"></div>
</div>
</div>
@ -326,9 +347,11 @@
<script src="lib/ace/js/mode-json.js"></script>
<script src="lib/ace/js/theme-textmate.js"></script>
<script src="lib/ace/js/theme-jsoneditor.js"></script>
<script src="script/jsonEditorApp.js"></script>
<script src="script/editScript.js"></script>
<script src="script/base.js"></script>
<script src="script/jsonEditorApp.js"></script>
<script src="script/behaviorsForm.js"></script>
<script src="script/pluginModel.js"></script>
<script src="script/editScript.js"></script>
</fmt:bundle>
</body>
</html>

View File

@ -9,15 +9,13 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description"
content="Bench4Q, a new method for QOS benchmarking.">
<link id="bs-css" href="lib/chrisma/css/bootstrap-cerulean.css"
rel="stylesheet">
<link href="lib/chrisma/css/bootstrap-cerulean.css" rel="stylesheet">
<link href="lib/chrisma/css/opa-icons.css" rel="stylesheet">
<link href="lib/chrisma/css/charisma-app.css" rel="stylesheet">
<link
href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/themes/redmond/jquery-ui.css"
href="http://ajax.aspnetcdn.com/ajax/bootstrap/2.3.2/css/bootstrap-responsive.css"
rel="stylesheet">
<link href="lib/chrisma/css/charisma-app.css" rel="stylesheet">
<link href="css/bench4q.css" rel="stylesheet">
<link rel="shortcut icon" href="images/bench4q.png">
<style type="text/css">
body {

View File

@ -0,0 +1,256 @@
var pluginNameList = new Array();
var parameters = new HashMap();
var parameterList = new HashMap();
var pluginName;
function loadUsePluigns(data) {
for (var i = 0; i < data.usePlugins.length; i++) {
var usePlugin = data.usePlugins[i];
pluginNameList.push(usePlugin.id);
}
var selectNode = document.getElementsByName("usePlugins")[0];
for (var j = 0; j < pluginNameList.length; j++) {
var textNode = document.createTextNode(pluginNameList[j]);
var optionNode = document.createElement("option");
optionNode.setAttribute("value", pluginNameList[j]);
optionNode.appendChild(textNode);
selectNode.appendChild(optionNode);
}
}
function choosePlugin() {
var plugin = document.getElementById("usePlugins");
if (plugin.options[plugin.selectedIndex].value != 0) {
pluginName = plugin.options[plugin.selectedIndex].value;
}
loadBehaviors();
}
var clickScriptId;
function chooseBehavior() {
var behaviorMethod = 0;
var behaviors = document.getElementById("behaviors");
if (behaviors.options[behaviors.selectedIndex].value != 0) {
behaviorMethod = behaviors.options[behaviors.selectedIndex].value;
}
document.getElementById("showPluginMethodForm").innerHTML = "";
var plugin_id = behaviorMethod.split("_")[0];
var behavior_id = behaviorMethod.split("_")[1];
clickScriptId = plugin_id + "_" + behavior_id;
loadFormParameters(plugin_id, behavior_id);
}
function loadBehaviors() {
$('#behaviors').html("");
var selectNode = document.getElementsByName("behaviors")[0];
var text = document.createTextNode("Please choose one behavior");
var option = document.createElement("option");
option.appendChild(text);
selectNode.appendChild(option);
$.each(modelData.pages, function(i, item) {
$.each(item.batches, function(i, item) {
var id = item.Id;
$.each(item.behaviors, function(i, item) {
if (item.use == pluginName) {
var textNode = document.createTextNode(item.use + "_" + id
+ "." + item.name + "_" + item.id);
var optionNode = document.createElement("option");
optionNode.setAttribute("value", id + "_" + item.id);
optionNode.appendChild(textNode);
selectNode.appendChild(optionNode);
}
});
});
});
}
function loadFormParameters(plugin_id, behavior_id) {
var plugin = "", method = "";
$.each(modelData.pages, function(i, item) {
$.each(item.batches, function(i, item) {
if (item.Id == plugin_id) {
$.each(item.behaviors, function(i, item) {
if (item.id == behavior_id) {
plugin = item.use;
method = item.name;
$.each(item.parameters, function(i, item) {
parameters.put(item.key, item.value);
});
}
});
}
});
});
loadMethodParameters(plugin, method, plugin_id, behavior_id);
}
function loadMethodParameters(plugin, method, plugin_id, behavior_id) {
var behaviorData = plugin + "_" + plugin_id + "." + method + "_"
+ behavior_id;
var behaviorIndex = /*plugin_id+"_"+*/ behavior_id;
$
.post(
"loadMethodParameters",
{
pluginName : plugin,
methodName : method
},
function(data) {
if (!data.success) {
alert(data.failedMessage);
return;
}
data = data.data;
var documentHtml = "";
var boxHeader = "";
var fieldHTML = createBehaviorsForm(data, behaviorData,
behaviorIndex);
boxHeader = "<div class='box-header well' data-original-title> "
+ "<i class='icon-pencil left'></i>"
+ "<h2>sample:<i>"
+ behaviorData
+ "</i></h2></div>";
documentHtml = "<div id='"
+ behaviorIndex
+ "' class=''><p class='hide'>"
+ behaviorData
+ "</p><div class='span10 box' style='margin-left:15px;'>"
+ boxHeader + "<div class='box-content'>"
+ fieldHTML + "</div></div></div>";
document.getElementById("showPluginMethodForm").innerHTML += documentHtml;
createForm(behaviorIndex);
});
}
function createForm(behaviorIndex) {
var formNode = document.getElementById(behaviorIndex);
var contents = formNode.lastChild.lastChild.childNodes;
var contentLength = contents.length;
for (var j = 0; j < contentLength; j++) {
var type = $(contents[j]).attr("class");
if (type == "Field sample_frame") {
var key = contents[j].lastChild.firstChild.nodeValue;
var value = parameters.get(key);
if (value != "" && value != null) {
$(contents[j].lastChild.lastChild).val(value);
}
} else if (type == "MultiField sample_frame") {
var key = contents[j].firstChild.firstChild.nodeValue.split(":")[0];
var value = parameters.get(key);
if (!(value == "" || value == null)) {
value = value.split(";");
var fieldLength = value.length;
for (var t = 0; t < fieldLength; t++) {
addField(20, behaviorIndex);
$($(contents[j]).find("table").children()[t]).find("input")
.val(value[t]);
}
}
} else if (type == "Table sample_frame") {
var key = contents[j].lastChild.firstChild.nodeValue;
var value = parameters.get(key);
if (value != "" && value != null) {
value = parameters.get(key).split("|;");
var table = $(contents[j]).find("table");
var col = table.find("th").length;
var row = value.length - 1;
var tbody = $(contents[j]).find("tbody");
for (var m = 0; m < row; m++) {
var input = value[m].split("|");
if (m != 0) {
var selectedNode = contents[j].lastChild.firstChild.nextSibling.nextSibling;
addCol(selectedNode);
}
for (var n = 0; n < col; n++) {
var rowNode = $(tbody).children()[m];
var colNode = $(rowNode).children()[n];
$(colNode).find("input").val(input[n]);
}
}
}
}
}
}
function saveFormModification() {
var div = document.getElementById("showPluginMethodForm").firstChild;
var plugin_method = div.firstChild.firstChild.nodeValue.split(".");
var pluginId = plugin_method[0].split("_")[1];
var behaviorId = plugin_method[1].split("_")[1];
var contents = div.lastChild.lastChild.childNodes;
var length = contents.length;
for (var i = 0; i < length; i++) {
var node = contents[i];
var key = "", value = "", temp = "";
if ($(node).attr("class") == "Field sample_frame") {
key = node.lastChild.firstChild.nodeValue;
temp = $(node).find("input").val();
if (temp != "") {
value = temp;
}
} else if ($(node).attr("class") == "MultiField sample_frame") {
key = node.firstChild.firstChild.nodeValue.split(":")[0];
var fieldNode = $(node).find("table").children();
var fieldLength = $(fieldNode).length;
for (var j = 0; j < fieldLength; j++) {
temp = $(fieldNode[j]).find("input").val();
if (temp != "") {
value += temp;
}
if (j != fieldLength - 1) {
value += ";";
}
}
} else if ($(node).attr("class") == "Table sample_frame") {
key = node.lastChild.firstChild.nodeValue;
var table = $(node).find("table");
var col = table.find("th").length;
var row = table.find("tbody").children().length;
var tbody = $(node).find("tbody");
for (var m = 0; m < row; m++) {
for (var n = 0; n < col; n++) {
var rowNode = $(tbody).children()[m];
var colNode = $(rowNode).children()[n];
temp = $(colNode).find("input").val();
if (temp != "") {
value += temp + "|";
}
}
if (value != "") {
value += ";";
}
}
} else if ($(node).attr("class") == "CheckBox sample_frame") {
key = node.lastChild.firstChild.nodeValue;
var id = $(node).attr("id");
$('input[name=' + id + ']:checked').each(function() {
temp = $(this).val();
if (temp != "") {
value += temp + ";";
}
});
}
parameterList.put(key, value);
}
modifyJsonData(pluginId, behaviorId);
}
function modifyJsonData(pluginId, behaviorId) {
for(var i=0;i<parameterList.length();i++){
alert("key="+parameterList.getKeys()[i]+",value="+parameterList.getValues()[i]);
}
$.each(modelData.pages, function(i, item) {
$.each(item.batches, function(i, item) {
if (item.Id == pluginId) {
$.each(item.behaviors, function(i, item) {
if (item.id == behaviorId) {
$.each(item.parameters, function(i, item) {
item.value = parameterList.get(item.key);
});
}
});
}
});
});
}

View File

@ -51,8 +51,6 @@ editor.load = function(scriptId) {
codeEditor = new jsoneditor.JSONEditor(codeContainer, options);
codeEditor.set(data);
loadUsePluigns(data);
/*loadBehaviors(data);*/
//alert(data.pages.length);
}, "json");
var $submit = $("#submit");
@ -72,6 +70,8 @@ editor.load = function(scriptId) {
alert(p);
}
}, editor.save = function() {
saveFormModification();
codeEditor.set(modelData);
if (codeEditor != null) {
var script = codeEditor.get();
$.ajax({

View File

@ -346,7 +346,7 @@ function saveBehavior(selectedNode) {
use = plugin_method[0].split("_")[0];
if (use == "timer") {
type = "TIMERBEHAVIOR";
} else {
} else if(use=="http"){
type = "USERBEHAVIOR";
}
var parameters = new Array();

View File

@ -9,9 +9,12 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description"
content="Bench4Q, a new method for QOS benchmarking.">
<link id="bs-css" href="lib/chrisma/css/bootstrap-cerulean.css"
<link href="lib/chrisma/css/bootstrap-cerulean.css" rel="stylesheet">
<link href="lib/chrisma/css/opa-icons.css" rel="stylesheet">
<link
href="http://ajax.aspnetcdn.com/ajax/bootstrap/2.3.2/css/bootstrap-responsive.css"
rel="stylesheet">
<link href="lib/chrisma/css/charisma-app.css" rel="stylesheet">
<style type="text/css">
body {
padding-bottom: 40px;

View File

@ -6,9 +6,15 @@
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<meta charset="utf-8">
<title>Bench4Q</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description"
content="Bench4Q, a new method for QOS benchmarking.">
<link id="bs-css" href="lib/chrisma/css/bootstrap-cerulean.css" rel="stylesheet">
<link href="lib/chrisma/css/bootstrap-cerulean.css" rel="stylesheet">
<link href="lib/chrisma/css/opa-icons.css" rel="stylesheet">
<link
href="http://ajax.aspnetcdn.com/ajax/bootstrap/2.3.2/css/bootstrap-responsive.css"
rel="stylesheet">
<link href="lib/chrisma/css/charisma-app.css" rel="stylesheet">
<style type="text/css">
body {
padding-bottom: 40px;

View File

@ -4,10 +4,17 @@
<html>
<head>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>Bench4Q</title>
<link id="bs-css" href="lib/chrisma/css/bootstrap-cerulean.css"
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description"
content="Bench4Q, a new method for QOS benchmarking.">
<link href="lib/chrisma/css/bootstrap-cerulean.css" rel="stylesheet">
<link href="lib/chrisma/css/opa-icons.css" rel="stylesheet">
<link
href="http://ajax.aspnetcdn.com/ajax/bootstrap/2.3.2/css/bootstrap-responsive.css"
rel="stylesheet">
<link href="lib/chrisma/css/charisma-app.css" rel="stylesheet">
<style type="text/css">
body {
padding-bottom: 40px;