stratos-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From im...@apache.org
Subject [4/8] stratos git commit: basic application editor setup
Date Sat, 13 Dec 2014 04:19:31 GMT
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 <sinhaladjs@gmail.com>
Authored: Fri Dec 12 11:28:43 2014 +0530
Committer: Imesh Gunaratne <imesh@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
+
                         }
                     }
 


Mime
View raw message