application deployment view js added
Project: http://git-wip-us.apache.org/repos/asf/stratos/repo Commit: http://git-wip-us.apache.org/repos/asf/stratos/commit/5eae1409 Tree: http://git-wip-us.apache.org/repos/asf/stratos/tree/5eae1409 Diff: http://git-wip-us.apache.org/repos/asf/stratos/diff/5eae1409 Branch: refs/heads/master Commit: 5eae1409eb27f92e37e058137bad76ec32f0b42d Parents: 2ad2952 Author: Dakshika Jayathilaka <[email protected]> Authored: Thu Dec 18 16:48:41 2014 +0530 Committer: Imesh Gunaratne <[email protected]> Committed: Thu Dec 18 17:43:21 2014 +0530 ---------------------------------------------------------------------- .../theme0/js/custom/applications-deploy.js | 236 +++++++++++++++++++ 1 file changed, 236 insertions(+) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/stratos/blob/5eae1409/components/org.apache.stratos.manager.console/console/themes/theme0/js/custom/applications-deploy.js ---------------------------------------------------------------------- diff --git a/components/org.apache.stratos.manager.console/console/themes/theme0/js/custom/applications-deploy.js b/components/org.apache.stratos.manager.console/console/themes/theme0/js/custom/applications-deploy.js new file mode 100644 index 0000000..d3c96e7 --- /dev/null +++ b/components/org.apache.stratos.manager.console/console/themes/theme0/js/custom/applications-deploy.js @@ -0,0 +1,236 @@ +// 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:20 +}; + +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 +}; + +function dagrePosition(){ + // construct dagre graph from JsPlumb graph + var g = new dagre.graphlib.Graph(); + g.setGraph({ranksep:'80'}); + g.setDefaultEdgeLabel(function() { return {}; }); + var nodes = $(".stepnode"); + + for (var i = 0; i < nodes.length; i++) { + var n = nodes[i]; + g.setNode(n.id, {width: 52, height: 52}); + } + var edges = jsPlumb.getAllConnections(); + for (var i = 0; i < edges.length; i++) { + var c = edges[i]; + g.setEdge(c.source.id,c.target.id ); + } + // calculate the layout (i.e. node positions) + dagre.layout(g); + + // Applying the calculated layout + g.nodes().forEach(function(v) { + $("#" + v).css("left", g.node(v).x + "px"); + $("#" + v).css("top", g.node(v).y + "px"); + }); + jsPlumb.repaintEverything(); +} +//add group to editor +var cartridgeCounter =0; +//add group to editor +function addJsplumbGroup(groupJSON, cartridgeCounter){ + + var divRoot = $('<div>').attr({'id':cartridgeCounter+'-'+groupJSON.alias,'data-type':'group','data-ctype':groupJSON.alias}) + .text(groupJSON.alias) + .addClass('input-false') + .addClass('stepnode') + .appendTo('#whiteboard'); + $(divRoot).append('<div class="notification"><i class="fa fa-exclamation-circle fa-2x"></i></div>'); + jsPlumb.addEndpoint($(divRoot), { + anchor:"BottomCenter" + }, bottomConnectorOptions); + + DragEl($(divRoot)); + if(groupJSON['components']['cartridges']) { + genJsplumbCartridge(groupJSON['components']['cartridges'], divRoot, groupJSON.alias); + } + if(groupJSON['components']['groups']){ + genJsplumbGroups(groupJSON['components']['groups'], divRoot, groupJSON.alias); + } + + function genJsplumbCartridge(item, currentParent, parentName){ + for (var prop in item) { + var id = item[prop].type; + var divCartridge = $('<div>').attr({'id':cartridgeCounter+'-'+parentName+'-'+item[prop].type} ) + .text(item[prop].type) + .addClass('input-false') + .addClass('stepnode') + .appendTo('#whiteboard'); + $(divCartridge).append('<div class="notification"><i class="fa fa-exclamation-circle fa-2x"></i></div>'); + 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'); + $(divGroup).append('<div class="notification"><i class="fa fa-exclamation-circle fa-2x"></i></div>'); + 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']) + } + } + } + + + +} + + +jsPlumb.bind("ready", function() { + addJsplumbGroup(applicationJSON, cartridgeCounter); + //reposition after group add + dagrePosition(); +}); + + +// Document ready events +$(document).ready(function(){ + //trigger deploy button + $('#deploy').click(function(){ + var deployjson = $('textarea#deployjsonedit').val(); + var formtype = 'deployments'; + var applicationId = applicationJSON.applicationId; + var btn = $(this); + console.log('hit kme') + btn.html("<i class='fa fa-spinner fa-spin'></i> Adding "+formtype); + $.ajax({ + type: "POST", + url: caramel.context + "/controllers/applications/application_requests.jag", + dataType: 'json', + data: { "formPayload": deployjson, "formtype": formtype, "appId":applicationId }, + success: function (data) { + if (data.status == 'error') { + var n = noty({text: data.message, layout: 'bottomRight', type: 'error'}); + } else if (data.status == 'warning') { + var n = noty({text: data.message, layout: 'bottomRight', type: 'warning'}); + } else { + var n = noty({text: data.message, layout: 'bottomRight', type: 'success'}); + } + } + }) + .always(function () { + btn.html('Add '+formtype); + }); + + }); +}); \ No newline at end of file
