You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@stratos.apache.org by im...@apache.org on 2014/12/13 05:19:31 UTC
[4/8] stratos git commit: basic application editor setup
basic application editor setup
Project: http://git-wip-us.apache.org/repos/asf/stratos/repo
Commit: http://git-wip-us.apache.org/repos/asf/stratos/commit/3bf8da14
Tree: http://git-wip-us.apache.org/repos/asf/stratos/tree/3bf8da14
Diff: http://git-wip-us.apache.org/repos/asf/stratos/diff/3bf8da14
Branch: refs/heads/4.1.0-test
Commit: 3bf8da14642ec8286edec39ec1945d92bf2a7d40
Parents: 3cf81a8
Author: Dakshika Jayathilaka <si...@gmail.com>
Authored: Fri Dec 12 11:28:43 2014 +0530
Committer: Imesh Gunaratne <im...@apache.org>
Committed: Sat Dec 13 09:45:24 2014 +0530
----------------------------------------------------------------------
.../console/applications_form.jag | 11 +-
.../theme0/css/custom/application_editor.css | 125 +++
.../theme0/helpers/applications_editor.js | 7 +
.../theme0/js/custom/applications-editor.js | 755 +++++++++++++++++++
.../theme0/partials/applications_editor.hbs | 147 ++++
.../theme0/renderers/applications_form.js | 8 +-
6 files changed, 1045 insertions(+), 8 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/stratos/blob/3bf8da14/components/org.apache.stratos.manager.console/console/applications_form.jag
----------------------------------------------------------------------
diff --git a/components/org.apache.stratos.manager.console/console/applications_form.jag b/components/org.apache.stratos.manager.console/console/applications_form.jag
index 91d01b3..91805ab 100644
--- a/components/org.apache.stratos.manager.console/console/applications_form.jag
+++ b/components/org.apache.stratos.manager.console/console/applications_form.jag
@@ -32,23 +32,25 @@ var log = new Log("apachestratos.applications_form"),
uriMatcher = new URIMatcher(request.getRequestURI()),
elements = uriMatcher.match('/{context}/applications/{formtype}/'),
breadcrumbPathLevelOne = 'applications',
- formDataEdit = topology_data = '',
+ formDataEdit = topology_data = editorGroups = editorCartridges = '',
isEdit = applicationView = applicationEditor= isForm = false,
userPermissions = session.get('PERMISSIONS');
//create left menu
var leftMenu = menuGenerator(context, menuJson.menu, userPermissions);
+
if (!elements) {
elements = uriMatcher.match('/{context}/applications/{formtype}/{action}/');
isForm = true;
-
if (elements.formtype == 'applications' && elements.action != 'new') {
applicationView = true;
topology_data = util.RESTCalls.getApplicationTopology(elements.action);
}else if(elements.formtype == 'applications' && elements.action == 'new'){
applicationEditor = true;
+ editorGroups = util.RESTCalls.getGroups();
+ editorCartridges = util.RESTCalls.getCartridges();
}else if(elements.action != 'new'){
isEdit = true;
}
@@ -69,7 +71,6 @@ var formtype = elements.formtype;
switch (formtype) {
case "groups":
list_data = util.RESTCalls.getGroups();
- log.info(list_data)
if (list_data.groups && list_data.groups.length === 0) {
list_data = null;
}else{
@@ -114,9 +115,11 @@ var caramelData = {
isEdit: isEdit,
appName: elements.action,
topology_data: JSON.stringify(topology_data),
+ editorGroups: JSON.stringify(editorGroups),
+ editorCartridges: JSON.stringify(editorCartridges),
applicationView: applicationView,
applicationEditor: applicationEditor,
-formTitle: formTitle,
+ formTitle: formTitle,
formDataRaw: JSON.stringify(formDataRaw),
//formDataRaw: JSON.stringify(partition_data.partition[0]),
formDataEdit: JSON.stringify(formDataEdit),
http://git-wip-us.apache.org/repos/asf/stratos/blob/3bf8da14/components/org.apache.stratos.manager.console/console/themes/theme0/css/custom/application_editor.css
----------------------------------------------------------------------
diff --git a/components/org.apache.stratos.manager.console/console/themes/theme0/css/custom/application_editor.css b/components/org.apache.stratos.manager.console/console/themes/theme0/css/custom/application_editor.css
new file mode 100644
index 0000000..ee511fb
--- /dev/null
+++ b/components/org.apache.stratos.manager.console/console/themes/theme0/css/custom/application_editor.css
@@ -0,0 +1,125 @@
+.left-side{
+ float: left;
+ width: 20%;
+}
+
+.right-side{
+ float: left;
+ width: 79%;
+ margin-top:20px;
+}
+#applicationId{
+ left: 318px;
+ top: 33px;
+}
+
+.stepnode {
+ border: 1px solid black;
+ position: absolute !important;
+ width: 5em;
+ height: 5em;
+ padding: 0.5em;
+ z-index: 1;
+ border-radius: 0.5em;
+ box-shadow: 2px 2px 19px #aaa;
+ background: white;
+ word-wrap: break-word;
+ padding-top: 24px;
+ text-align: center;
+}
+
+.block-cartridge {
+ width: 80px;
+ height: 80px;
+ background-color: rgb(109, 123, 112);
+ float: left;
+ margin: 5px;
+ padding: 5px;
+ word-wrap: break-word;
+ cursor: pointer;
+}
+
+.block-group {
+ width: 80px;
+ height: 80px;
+ background-color: rgb(109, 123, 112);
+ float: left;
+ margin: 5px;
+ padding: 5px;
+ word-wrap: break-word;
+ cursor: pointer;
+}
+
+.app-creator {
+ height: 600px;
+ background-color: rgb(244, 244, 244);
+ border: 1px solid #ddd;
+ border-radius: 4px;
+ margin-left: 10px;
+ position: relative;
+ background-image: url("../images/grid.png");
+}
+
+#whiteboard{
+ width: 800px;
+ height: 600px;
+ position: absolute;
+}
+
+.description{
+ min-height: 300px;
+ max-height: 400px;
+}
+
+.component-section{
+ max-height: 200px;
+ overflow: auto;
+ min-height: 200px;
+}
+
+.description-section{
+ min-height: 260px;
+ max-height: 400px;
+ overflow: auto;
+}
+
+.app-details {
+ margin: 10px;
+}
+
+.app-details-tab-content{
+ border: 1px solid #ddd;
+ border-top: transparent;
+ min-height: 233px;
+ padding: 20px;
+ border-radius: 0 0 4px 4px;
+}
+.dragActive {
+ border: 2px dotted orange;
+
+}
+
+.node-disable{
+ background-color: #bdc3c7;
+}
+
+
+.node circle {
+ fill: #fff;
+ stroke: steelblue;
+ stroke-width: 3px;
+}
+
+.node text { font: 12px sans-serif; }
+
+.link {
+ fill: none;
+ stroke: #ccc;
+ stroke-width: 2px;
+}
+
+.input-false{
+ background-color: #CCC;
+ border-color: #ddd;
+ border-width: 1px;
+}
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/stratos/blob/3bf8da14/components/org.apache.stratos.manager.console/console/themes/theme0/helpers/applications_editor.js
----------------------------------------------------------------------
diff --git a/components/org.apache.stratos.manager.console/console/themes/theme0/helpers/applications_editor.js b/components/org.apache.stratos.manager.console/console/themes/theme0/helpers/applications_editor.js
new file mode 100644
index 0000000..2af9bc9
--- /dev/null
+++ b/components/org.apache.stratos.manager.console/console/themes/theme0/helpers/applications_editor.js
@@ -0,0 +1,7 @@
+var resources = function (page, meta) {
+ return {
+ js: ['JSONEditor-0.7.12/jsoneditor-0.7.12.js','bootstrap-switch-3.0.2/bootstrap-switch.min.js', 'custom/script.js','custom/form.js', 'd3js-v3/d3.v3.min.js',
+ 'jquery.contextMenu/jquery.contextMenu.js', 'jquery.contextMenu/jquery.ui.position.js', 'jsplumb-1.7.2/dom.jsPlumb-1.7.2-min.js','custom/applications-editor.js'],
+ css: ['bootstrap-switch-3.0.2/bootstrap-switch.min.css', 'custom/style.css', 'custom/application_editor.css']
+ };
+};
http://git-wip-us.apache.org/repos/asf/stratos/blob/3bf8da14/components/org.apache.stratos.manager.console/console/themes/theme0/js/custom/applications-editor.js
----------------------------------------------------------------------
diff --git a/components/org.apache.stratos.manager.console/console/themes/theme0/js/custom/applications-editor.js b/components/org.apache.stratos.manager.console/console/themes/theme0/js/custom/applications-editor.js
new file mode 100644
index 0000000..89b0af8
--- /dev/null
+++ b/components/org.apache.stratos.manager.console/console/themes/theme0/js/custom/applications-editor.js
@@ -0,0 +1,755 @@
+// repaint
+function Repaint(){
+ $("#whiteboard").resize(function(){
+ jsPlumb.repaintEverything();
+ });
+}
+// drag
+function DragEl(el){
+ jsPlumb.draggable($(el) ,{
+ containment:"#whiteboard"
+ });
+}
+
+
+// JsPlumb Config
+var color = "gray",
+ exampleColor = "#00f",
+ arrowCommon = { foldback:0.7, fillStyle:color, width:14 };
+
+jsPlumb.importDefaults({
+ Connector : [ "Bezier", { curviness:63 } ],
+ /*Overlays: [
+ [ "Arrow", { location:0.7 }, arrowCommon ],
+ ]*/
+});
+
+
+var nodeDropOptions = {
+ activeClass:"dragActive"
+};
+
+var bottomConnectorOptions = {
+ endpoint:"Rectangle",
+ paintStyle:{ width:25, height:21, fillStyle:'#666' },
+ isSource:true,
+ connectorStyle : { strokeStyle:"#666" },
+ isTarget:false,
+ maxConnections:5
+};
+
+var endpointOptions = {
+ isTarget:true,
+ endpoint:"Dot",
+ paintStyle:{
+ fillStyle:"gray"
+ },
+ dropOptions: nodeDropOptions,
+ maxConnections:1
+};
+
+var groupOptions = {
+ isTarget:true,
+ endpoint:"Dot",
+ paintStyle:{
+ fillStyle:"gray"
+ },
+ dropOptions: nodeDropOptions,
+ maxConnections:1
+};
+
+var generatedCartridgeEndpointOptions = {
+ isTarget:false,
+ endpoint:"Dot",
+ paintStyle:{
+ fillStyle:"gray"
+ },
+ dropOptions: '',
+ maxConnections:1
+};
+
+var generatedGroupOptions = {
+ isTarget:false,
+ endpoint:"Dot",
+ paintStyle:{
+ fillStyle:"gray"
+ },
+ dropOptions: nodeDropOptions,
+ maxConnections:1
+};
+
+jsPlumb.ready(function() {
+ //create application level block
+ jsPlumb.addEndpoint('applicationId', {
+ anchor:"BottomCenter"
+ }, bottomConnectorOptions);
+});
+
+var cartridgeCounter=0;
+//add cartridge to editor
+function addJsplumbCartridge(idname, cartridgeCounter) {
+
+ var Div = $('<div>').attr({'id':cartridgeCounter+'-'+idname, 'data-type':'cartridge', 'data-ctype':idname } )
+ .text(idname)
+ .addClass('input-false')
+ .appendTo('#whiteboard');
+ $(Div).addClass('stepnode');
+ jsPlumb.addEndpoint($(Div), {
+ anchor: "TopCenter"
+ }, endpointOptions);
+ // jsPlumb.addEndpoint($(Div), sourceEndpoint);
+ DragEl($(Div));
+ Repaint();
+}
+
+//add group to editor
+function addJsplumbGroup(groupJSON, cartridgeCounter){
+
+ var divRoot = $('<div>').attr({'id':cartridgeCounter+'-'+groupJSON.name,'data-type':'group','data-ctype':groupJSON.name})
+ .text(groupJSON.name)
+ .addClass('input-false')
+ .addClass('stepnode')
+ .appendTo('#whiteboard');
+ jsPlumb.addEndpoint($(divRoot), {
+ anchor:"BottomCenter"
+ }, bottomConnectorOptions);
+
+ jsPlumb.addEndpoint($(divRoot), {
+ anchor: "TopCenter"
+ }, groupOptions);
+ DragEl($(divRoot));
+
+ for (var prop in groupJSON) {
+ if(prop == 'cartridges'){
+ genJsplumbCartridge(groupJSON[prop], divRoot, groupJSON.name)
+ }
+ if(prop == 'groups'){
+ genJsplumbGroups(groupJSON[prop], divRoot, groupJSON.name)
+ }
+ }
+
+ function genJsplumbCartridge(item, currentParent, parentName){
+ for (var i = 0; i < item.length; i++) {
+ var id = item[i];
+ var divCartridge = $('<div>').attr({'id':cartridgeCounter+'-'+parentName+'-'+item[i],'data-type':'cartridge','data-ctype':item[i]} )
+ .text(item[i])
+ .addClass('input-false')
+ .addClass('stepnode')
+ .appendTo('#whiteboard');
+
+ jsPlumb.addEndpoint($(divCartridge), {
+ anchor: "TopCenter"
+ }, generatedCartridgeEndpointOptions);
+
+ //add connection options
+ jsPlumb.connect({
+ source:$(currentParent),
+ target:$(divCartridge),
+ paintStyle:{strokeStyle:"blue", lineWidth:1 },
+ Connector : [ "Bezier", { curviness:63 } ],
+ anchors:["BottomCenter", "TopCenter"],
+ endpoint:"Dot"
+ });
+
+ DragEl($(divCartridge));
+ }
+ }
+
+ function genJsplumbGroups(item, currentParent, parentName) {
+ for (var prop in item) {
+ var divGroup = $('<div>').attr({'id':cartridgeCounter+'-'+parentName+'-'+item[prop]['name'],'data-type':'group','data-ctype':item[prop]['name'] })
+ .text(item[prop]['name'])
+ .addClass('stepnode')
+ .addClass('input-false')
+ .appendTo('#whiteboard');
+ jsPlumb.addEndpoint($(divGroup), {
+ anchor:"BottomCenter"
+ }, bottomConnectorOptions);
+
+ jsPlumb.addEndpoint($(divGroup), {
+ anchor: "TopCenter"
+ }, generatedGroupOptions);
+
+ //add connection options
+ jsPlumb.connect({
+ source:$(currentParent),
+ target:$(divGroup),
+ paintStyle:{strokeStyle:"blue", lineWidth:1 },
+ Connector : [ "Bezier", { curviness:63 } ],
+ anchors:["BottomCenter", "TopCenter"],
+ endpoint:"Dot"
+ });
+
+ DragEl($(divGroup));
+
+ if(item[prop].hasOwnProperty('cartridges')) {
+ genJsplumbCartridge(item[prop].cartridges, divGroup, parentName+'-'+item[prop]['name'] );
+ }
+ if(item[prop].hasOwnProperty('groups')) {
+ genJsplumbGroups(item[prop].groups, divGroup, parentName+'-'+item[prop]['name'])
+ }
+ }
+ }
+
+
+
+}
+//use to activate tab
+function activateTab(tab){
+ $('.nav-tabs a[href="#' + tab + '"]').tab('show');
+};
+//generate treefor Groups
+function generateGroupTree(groupJSON){
+
+ var rawout = [];
+ //create initial node for tree
+ var rootnode ={};
+ rootnode.name = groupJSON.name;
+ rootnode.parent = null;
+ rootnode.type = 'groups';
+ rawout.push(rootnode);
+
+ for (var prop in groupJSON) {
+ if(prop == 'cartridges'){
+ getCartridges(groupJSON[prop],rawout, rootnode.name)
+ }
+ if(prop == 'groups'){
+ getGroups(groupJSON[prop], rawout, rootnode.name)
+ }
+ }
+
+ function getCartridges(item, collector, parent){
+ for (var i = 0; i < item.length; i++) {
+ var type = 'cartridges';
+ var cur_name = item[i];
+ collector.push({"name": cur_name, "parent": parent, "type": type});
+ }
+ }
+
+ function getGroups(item, collector, parent){
+ for (var prop in item) {
+ var cur_name = item[prop]['name'];
+ var type = 'groups';
+ collector.push({"name": cur_name, "parent": parent, "type": type});
+ if(item[prop].hasOwnProperty('cartridges')) {
+ getCartridges(item[prop].cartridges, collector, cur_name);
+ }
+ if(item[prop].hasOwnProperty('groups')) {
+ getGroups(item[prop].groups, collector, cur_name)
+ }
+ }
+ }
+
+ return rawout;
+
+}
+
+// ************** Generate the tree diagram *****************
+function generateGroupPreview(data) {
+ //clean current graph and text
+ $(".description-section").html('');
+
+ //mapping data
+ var dataMap = data.reduce(function(map, node) {
+ map[node.name] = node;
+ return map;
+ }, {});
+ var treeData = [];
+ data.forEach(function(node) {
+ // add to parent
+ var parent = dataMap[node.parent];
+ if (parent) {
+ // create child array if it doesn't exist
+ (parent.children || (parent.children = []))
+ // add node to child array
+ .push(node);
+ } else {
+ // parent is null or missing
+ treeData.push(node);
+ }
+ });
+
+ var source = treeData[0];
+
+//generate position for tree view
+ var margin = {top: 25, right: 5, bottom: 5, left: 5},
+ width = 320 - margin.right - margin.left,
+ height = 500 - margin.top - margin.bottom;
+
+ var i = 0;
+
+ var tree = d3.layout.tree()
+ .size([height, width]);
+
+ var diagonal = d3.svg.diagonal()
+ .projection(function(d) { return [d.x, d.y]; });
+
+ var svg = d3.select(".description-section").append("svg")
+ .attr("width", width)
+ .attr("height", height)
+ .append("g")
+ .attr("transform", "translate(" + -90+ "," + margin.top + ")");
+
+ // Compute the new tree layout.
+ var nodes = tree.nodes(source).reverse(),
+ links = tree.links(nodes);
+
+ // Normalize for fixed-depth.
+ nodes.forEach(function(d) { d.y = d.depth * 100; });
+
+ // Declare the nodes…
+ var node = svg.selectAll("g.node")
+ .data(nodes, function(d) { return d.id || (d.id = ++i); });
+
+ // Enter the nodes.
+ var nodeEnter = node.enter().append("g")
+ .attr("class", "node")
+ .attr("transform", function(d) {
+ return "translate(" + d.x + "," + d.y + ")"; });
+
+ nodeEnter.append("circle")
+ .attr("r", 4)
+ .style("fill", "#fff");
+
+ nodeEnter.append("text")
+ .attr("y", function(d) {
+ return d.children || d._children ? -20 : 20; })
+ .attr("dy", ".35em")
+ .attr("text-anchor", "middle")
+ .text(function(d) { return d.name; })
+ .style("fill-opacity", 1);
+
+ // Declare the links
+ var link = svg.selectAll("path.link")
+ .data(links, function(d) { return d.target.id; });
+
+ // Enter the links.
+ link.enter().insert("path", "g")
+ .attr("class", "link")
+ .attr("d", diagonal);
+
+}
+
+// ************* Add context menu for nodes ******************
+//remove nodes from workarea
+function deleteNode(endPoint){
+ if(endPoint.attr('id') != 'applicationId'){
+ var that=endPoint; //get all of your DIV tags having endpoints
+ for (var i=0;i<that.length;i++) {
+ var endpoints = jsPlumb.getEndpoints($(that[i])); //get all endpoints of that DIV
+ for (var m=0;m<endpoints.length;m++) {
+ // if(endpoints[m].anchor.type=="TopCenter") //Endpoint on right side
+ jsPlumb.deleteEndpoint(endpoints[m]); //remove endpoint
+ }
+ }
+ jsPlumb.detachAllConnections(endPoint);
+ endPoint.remove();
+ }
+
+}
+
+//genrate context menu for nodes
+$(function(){
+ $.contextMenu({
+ selector: '.stepnode',
+ callback: function(key, options) {
+ var m = "clicked: " + key + $(this);
+ if(key == 'delete'){
+ deleteNode($(this));
+ }else if(key == 'edit'){
+
+ }
+
+ window.console && console.log($(this));
+ },
+ items: {
+ "edit": {name: "Edit", icon: "edit"},
+ "delete": {name: "Delete", icon: "delete"},
+ "sep1": "---------",
+ "quit": {name: "Quit", icon: "quit"}
+ }
+ });
+
+});
+
+var applicationJson = {};
+//Definition JSON builder
+function generateJsplumbTree(collector, connections){
+
+ //get general data
+ $('input.level-root').each(function(){
+ var inputId = $(this).attr('id');
+ collector[inputId] = $(this).val();
+ });
+ collector['components']={};
+ collector['components']['dependencies']={};
+ collector['components']['groups']=[];
+ collector['components']['cartridges']=[];
+ collector['components']['dependencies']['startupOrders']=[];
+ collector['components']['dependencies']['scalingDependents']=[];
+ var startupOrders = $('input#startupOrders').val().split(' ').join('').split(/["][,]+/g);
+ for (var i = 0; i < startupOrders.length; i++) {
+ startupOrders[i] = startupOrders[i].replace(/"/g, "");
+ }
+
+ var scalingDependents = $('input#scalingDependents').val().split(' ').join('').split(/["][,]+/g);
+ for (var i = 0; i < scalingDependents.length; i++) {
+ scalingDependents[i] = scalingDependents[i].replace(/"/g, "");
+ }
+ collector['components']['dependencies']['startupOrders'] = startupOrders;
+ collector['components']['dependencies']['scalingDependents'] = scalingDependents;
+ collector['components']['dependencies']['terminationBehaviour']=$('select#terminationBehaviour').val();
+
+ //generate raw data tree from connections
+ var rawtree = [];
+ $.each(jsPlumb.getConnections(), function (idx, connection) {
+ var dataType = $('#'+connection.targetId).attr('data-type');
+ var jsonContent = JSON.parse(decodeURIComponent($('#'+connection.targetId).attr('data-generated')));
+ rawtree.push({
+ parent: connection.sourceId,
+ content: jsonContent,
+ dtype:dataType,
+ id: connection.targetId
+ });
+ });
+
+ //generate heirache by adding json and extra info
+ var nodes = [];
+ var toplevelNodes = [];
+ var lookupList = {};
+
+ for (var i = 0; i < rawtree.length; i++) {
+ var n = rawtree[i].content;
+ if(rawtree[i].dtype == 'cartridge'){
+ n.id = rawtree[i].id;
+ n.parent_id = ((rawtree[i].parent == 'applicationId') ? 'applicationId': rawtree[i].parent);
+ n.dtype =rawtree[i].dtype;
+ }else if(rawtree[i].dtype == 'group'){
+ n.id = rawtree[i].id;
+ n.parent_id = ((rawtree[i].parent == 'applicationId') ? 'applicationId': rawtree[i].parent);
+ n.dtype =rawtree[i].dtype;
+ n.groups = [];
+ n.cartridges =[];
+ }
+
+ lookupList[n.id] = n;
+ nodes.push(n);
+
+ if (n.parent_id == 'applicationId' && rawtree[i].dtype == 'cartridge') {
+ collector['components']['cartridges'].push(n);
+ }else if(n.parent_id == 'applicationId' && rawtree[i].dtype == 'group'){
+ collector['components']['groups'].push(n);
+ }
+
+ }
+
+ //merge any root level stuffs
+ for (var i = 0; i < nodes.length; i++) {
+ var n = nodes[i];
+ if (!(n.parent_id == 'applicationId') && n.dtype == 'cartridge') {
+ lookupList[n.parent_id]['cartridges'] = lookupList[n.parent_id]['cartridges'].concat([n]);
+ }else if(!(n.parent_id == 'applicationId') && n.dtype == 'group'){
+ lookupList[n.parent_id]['groups'] = lookupList[n.parent_id]['groups'].concat([n]);
+ }
+ }
+
+ //cleanup JSON, remove extra items added to object level
+ function traverse(o) {
+ for (var i in o) {
+ if(i == 'id' || i == 'parent_id' || i == 'dtype'){
+ delete o[i];
+ }else if(i == 'groups' && o[i].length == 0){
+ delete o[i];
+ }
+ if (o[i] !== null && typeof(o[i])=="object") {
+ //going on step down in the object tree!!
+ traverse(o[i]);
+ }
+ }
+ }
+
+ traverse(collector);
+ console.log(collector)
+ console.log(JSON.stringify(collector));
+ $('#messages').html(JSON.stringify(collector, null, 4))
+}
+
+//setting up schema and defaults
+var cartridgeBlockTemplate = {
+ "type":"object",
+ "$schema": "http://json-schema.org/draft-03/schema",
+ "id": "root",
+ "format":"grid",
+ "properties":{
+ "type": {
+ "type":"string",
+ "id": "root/type",
+ "default": "name",
+ "required":false
+ },
+ "cartridgeMax": {
+ "type":"number",
+ "id": "root/cartridgeMax",
+ "default":2,
+ "required":false
+ },
+ "cartridgeMin": {
+ "type":"number",
+ "id": "root/cartridgeMin",
+ "default":1,
+ "required":false
+ },
+ "subscribableInfo": {
+ "type":"object",
+ "id": "root/subscribableInfo",
+ "required":false,
+ "properties":{
+ "alias": {
+ "type":"string",
+ "id": "root/subscribableInfo/alias",
+ "default": "alias2",
+ "required":false
+ },
+ "autoscalingPolicy": {
+ "type":"string",
+ "id": "root/subscribableInfo/autoscalingPolicy",
+ "default": "autoscale_policy_1",
+ "required":false
+ },
+ "privateRepo": {
+ "type":"string",
+ "id": "root/subscribableInfo/privateRepo",
+ "default": "true",
+ "required":false
+ },
+ "repoPassword": {
+ "type":"string",
+ "id": "root/subscribableInfo/repoPassword",
+ "default": "password",
+ "required":false
+ },
+ "repoURL": {
+ "type":"string",
+ "id": "root/subscribableInfo/repoURL",
+ "default": "http://xxx:10080/git/default.git",
+ "required":false
+ },
+ "repoUsername": {
+ "type":"string",
+ "id": "root/subscribableInfo/repoUsername",
+ "default": "user",
+ "required":false
+ }
+ }
+ }
+ }
+};
+
+var cartridgeBlockDefault = {
+ "type":"tomcat",
+ "cartridgeMin":1,
+ "cartridgeMax":2,
+ "subscribableInfo":{
+ "alias":"alias2",
+ "autoscalingPolicy":"autoscale_policy_1",
+ "privateRepo":"true",
+ "repoPassword":"password",
+ "repoURL":"http://xxx:10080/git/default.git",
+ "repoUsername":"user"
+ }
+};
+
+var groupBlockTemplate = {
+ "type":"object",
+ "$schema": "http://json-schema.org/draft-03/schema",
+ "id": "root",
+ "required":false,
+ "properties":{
+ "name": {
+ "type":"string",
+ "id": "root/name",
+ "default": "name",
+ "required":false
+ },
+ "alias": {
+ "type":"string",
+ "id": "root/alias",
+ "default": "alias",
+ "required":false
+ },
+ "groupMaxInstances": {
+ "type":"number",
+ "id": "root/groupMaxInstances",
+ "default":2,
+ "required":false
+ },
+ "groupMinInstances": {
+ "type":"number",
+ "id": "root/groupMinInstances",
+ "default":1,
+ "required":false
+ },
+ "isGroupScalingEnabled": {
+ "type":"boolean",
+ "id": "root/isGroupScalingEnabled",
+ "default": "false",
+ "required":false
+ }
+ }
+};
+
+var groupBlockDefault = {
+ "name":"group2",
+ "alias":"group2alias",
+ "groupMinInstances":1,
+ "groupMaxInstances":2,
+ "isGroupScalingEnabled":"false"
+};
+
+//create cartridge list
+var cartridgeListHtml='';
+function generateCartridges(data){
+ for(var cartridge in data){
+ var cartridgeData = data[cartridge];
+ cartridgeListHtml += '<div class="block-cartridge" ' +
+ 'data-info="'+cartridgeData.description+ '"'+
+ 'data-toggle="tooltip" data-placement="bottom" title="Single Click to view details. Double click to add"'+
+ 'id="'+cartridgeData.cartridgeType+'">'
+ + cartridgeData.displayName+
+ '</div>'
+ }
+ //append cartridge into html content
+ $('#cartridge-list').append(cartridgeListHtml);
+}
+
+//create group list
+var groupListHtml='';
+function generateGroups(data){
+ for(var group in data){
+ var groupData = data[group];
+ groupListHtml += '<div class="block-group" ' +
+ ' data-info="'+encodeURIComponent(JSON.stringify(groupData))+'"'+
+ 'id="'+groupData.name+'">'
+ + groupData.name+
+ '</div>'
+ }
+ //append cartridge into html content
+ $('#group-list').append(groupListHtml);
+}
+// Document ready events
+$(document).ready(function(){
+
+ $('#app-generate').on('click', function(){
+ generateJsplumbTree(applicationJson, jsPlumb.getConnections());
+ });
+ //*******************Adding JSON editor *************//
+ JSONEditor.defaults.theme = 'bootstrap3';
+ JSONEditor.defaults.iconlib = 'fontawesome4';
+ JSONEditor.defaults.show_errors = "always";
+ var editor, blockId;
+
+
+ DragEl(".stepnode");
+ Repaint();
+
+ $('#whiteboard').on('dblclick', '.stepnode', function(){
+ //get tab activated
+ if($(this).attr('id') == 'applicationId'){
+ activateTab('general');
+ }else{
+ activateTab('components');
+ }
+
+ blockId = $(this).attr('id');
+ var blockType = $(this).attr('data-type');
+ var startval;
+ var ctype = $(this).attr('data-ctype');
+ if(blockType == 'cartridge' || blockType == 'group-cartridge'){
+ startval = cartridgeBlockDefault;
+ startval['type'] = ctype;
+ }else{
+ startval = groupBlockDefault;
+ startval['name'] = ctype;
+ }
+
+ if($(this).attr('data-generated')) {
+ startval = JSON.parse(decodeURIComponent($(this).attr('data-generated')));
+ }
+ $('#component-data').html('');
+
+ switch (blockType){
+ case 'cartridge':
+ generateHtmlBlock(cartridgeBlockTemplate, startval);
+ break;
+
+ case 'group':
+ generateHtmlBlock(groupBlockTemplate, startval);
+ break;
+
+ case 'group-cartridge':
+ generateHtmlBlock(cartridgeBlockTemplate, startval);
+ break;
+ }
+
+ });
+
+ function generateHtmlBlock(schema, startval){
+ // Initialize the editor
+ editor = new JSONEditor(document.getElementById('component-data'), {
+ ajax: false,
+ disable_edit_json: true,
+ schema: schema,
+ format: "grid",
+ startval: startval
+ });
+ if(editor.getEditor('root.type')){
+ editor.getEditor('root.type').disable();
+ }else{
+ editor.getEditor('root.name').disable();
+ }
+
+ }
+
+ //get component JSON data
+ $('#component-info-update').on('click', function(){
+ $('#'+blockId).attr('data-generated', encodeURIComponent(JSON.stringify(editor.getValue())));
+ $('#'+blockId).removeClass('input-false');
+
+ });
+
+ //get create cartridge list
+ generateCartridges(cartridgeList.cartridge);
+ //get group JSON
+ generateGroups(groupList.groups);
+
+ //handle single click for cartridge
+ $('#cartridge-list').on('click', ".block-cartridge", function(){
+ $('.description-section').html($(this).attr('data-info'));
+ });
+ //handle double click for cartridge
+ $('#cartridge-list').on('dblclick', ".block-cartridge", function(){
+ addJsplumbCartridge($(this).attr('id'),cartridgeCounter);
+ //increase global count for instances
+ cartridgeCounter++;
+ });
+
+ //handle single click for groups
+ $('#group-list').on('click', ".block-group", function(){
+ var groupJSON = JSON.parse(decodeURIComponent($(this).attr('data-info')));
+ mydata = generateGroupTree(groupJSON);
+ generateGroupPreview(mydata);
+
+
+ });
+ //handle double click event for groups
+ $('#group-list').on('dblclick', ".block-group", function(){
+ var groupJSON = JSON.parse(decodeURIComponent($(this).attr('data-info')));
+ addJsplumbGroup(groupJSON,cartridgeCounter);
+ //increase global count for instances
+ cartridgeCounter++;
+ });
+
+
+});
+
+
http://git-wip-us.apache.org/repos/asf/stratos/blob/3bf8da14/components/org.apache.stratos.manager.console/console/themes/theme0/partials/applications_editor.hbs
----------------------------------------------------------------------
diff --git a/components/org.apache.stratos.manager.console/console/themes/theme0/partials/applications_editor.hbs b/components/org.apache.stratos.manager.console/console/themes/theme0/partials/applications_editor.hbs
index e69de29..9abc1dc 100644
--- a/components/org.apache.stratos.manager.console/console/themes/theme0/partials/applications_editor.hbs
+++ b/components/org.apache.stratos.manager.console/console/themes/theme0/partials/applications_editor.hbs
@@ -0,0 +1,147 @@
+<div id="centered">
+ <div class="row title">
+ <div class="title-main text-center">
+ <h1>Create Your Application</h1>
+ </div>
+ </div>
+ <div class='container' id='content'>
+ <div class='row'>
+ <div class='container text-center form-toolbar'>
+ <div class='col-md-5'>
+ <div class="editor-button">
+
+ </div>
+
+ </div>
+ <div class='col-md-7'>
+ <button class='btn btn-info btn-lg pull-right' type='button' id='deploy' data-form='{{formContext}}'> Deploy {{formTitle}}</button>
+ <button class='btn btn-default btn-lg pull-right button-gap' type='button' onclick='window.location.replace(document.referrer)'> Cancel</button>
+
+ </div>
+ </div>
+ </div>
+ <div class="left-side">
+ <div class="components">
+ <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
+ <div class="panel panel-default">
+ <div class="panel-heading" role="tab" id="headingOne">
+ <h4 class="panel-title">
+ <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"
+ aria-expanded="true" aria-controls="collapseOne">
+ Cartridges
+ </a>
+ </h4>
+ </div>
+ <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel"
+ aria-labelledby="headingOne">
+ <div class="panel-body component-section" id="cartridge-list">
+ <!-- Automatic content will be added -->
+ </div>
+ </div>
+ </div>
+ <div class="panel panel-default ">
+ <div class="panel-heading" role="tab" id="headingTwo">
+ <h4 class="panel-title">
+ <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"
+ aria-expanded="false" aria-controls="collapseTwo">
+ Groups
+ </a>
+ </h4>
+ </div>
+ <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel"
+ aria-labelledby="headingTwo">
+ <div class="panel-body component-section" id="group-list">
+ <!-- group will automatically added -->
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="description" >
+ <div class="panel panel-default">
+ <div class="panel-heading">
+ <h3 class="panel-title">Details</h3>
+ </div>
+ <div class="panel-body description-section">
+
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="right-side">
+ <div class="app-creator">
+ <div id="whiteboard">
+ <div id="applicationId" class="stepnode">
+ App Id
+ </div>
+ </div>
+
+ </div>
+ <div class="app-details">
+ <div role="tabpanel app-details-tab" >
+
+ <!-- Nav tabs -->
+ <ul class="nav nav-tabs" role="tablist">
+ <li role="presentation" class="active"><a href="#general" aria-controls="general" role="tab"
+ data-toggle="tab">General Details</a></li>
+ <li role="presentation"><a href="#components" aria-controls="components"
+ role="tab" data-toggle="tab">Components</a></li>
+
+ </ul>
+
+ <!-- Tab panes -->
+ <div class="tab-content app-details-tab-content">
+ <div role="tabpanel" class="tab-pane active" id="general">
+
+ <div class="form-group">
+ <label class="control-label" for="applicationId">Application Id:</label>
+ <input type="text" class="form-control level-root" placeholder="" id="applicationId">
+ </div>
+ <div class="form-group">
+ <label class="control-label" for="alias">Alias:</label>
+ <input type="text" class="form-control level-root" placeholder="" id="alias">
+ </div>
+ <div class="panel panel-default">
+ <div class="panel-heading">Dependencies</div>
+ <div class="panel-body">
+ <div class="form-group">
+ <label class="control-label" for="alias">Startup Orders:</label>
+ <input type="text" class="form-control level-components" placeholder="" id="startupOrders">
+ </div>
+ <div class="form-group">
+ <label class="control-label" for="alias">Scaling Dependents:</label>
+ <input type="text" class="form-control level-components" placeholder="" id="scalingDependents">
+ </div>
+ <div class="form-group">
+ <label class="control-label" for="alias">Termination Behaviour:</label>
+ <select class="form-control level-components" id="terminationBehaviour">
+ <option value="terminate-none">terminate-none</option>
+ <option value="terminate-dependents">terminate-dependents</option>
+ <option value="terminate-all">terminate-all</option>
+ </select>
+ </div>
+ </div>
+ </div>
+
+ </div>
+ <div role="tabpanel" class="tab-pane components" id="components">
+ <button type="button" class="btn btn-primary" id="component-info-update">Update</button>
+ <button type="button" class="btn btn-primary" id="app-generate">Generate</button>
+ <div id="component-data">
+
+ </div>
+ </div>
+ </div>
+
+ </div>
+ </div>
+ </div>
+ </div>
+
+ </div>
+
+<script>
+ //use for application generation;
+ var cartridgeList = {{{editorCartridges}}};
+ var groupList = {{{editorGroups}}};
+</script>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/stratos/blob/3bf8da14/components/org.apache.stratos.manager.console/console/themes/theme0/renderers/applications_form.js
----------------------------------------------------------------------
diff --git a/components/org.apache.stratos.manager.console/console/themes/theme0/renderers/applications_form.js b/components/org.apache.stratos.manager.console/console/themes/theme0/renderers/applications_form.js
index 2a7d8fe..d5ec8be 100644
--- a/components/org.apache.stratos.manager.console/console/themes/theme0/renderers/applications_form.js
+++ b/components/org.apache.stratos.manager.console/console/themes/theme0/renderers/applications_form.js
@@ -136,7 +136,8 @@ var render = function (theme, data, meta, require) {
context: {
formContext: data.breadcrumbPathLevelTwo,
appName: data.appName,
- topology_data: data.topology_data,
+ editorCartridges: data.editorCartridges,
+ editorGroups:data.editorGroups,
form_action: data.form_action,
formHtml: data.formHtml,
formData: data.formData,
@@ -144,9 +145,8 @@ var render = function (theme, data, meta, require) {
formDataEdit: data.formDataEdit,
isForm: data.isForm,
isEdit: data.isEdit,
- formTitle: data.formTitle,
- content_body: {sections: data.list_data
- }
+ formTitle: data.formTitle
+
}
}