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/18 13:13:39 UTC
[7/9] stratos git commit: application deployment view js added
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 <si...@gmail.com>
Authored: Thu Dec 18 16:48:41 2014 +0530
Committer: Imesh Gunaratne <im...@apache.org>
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