add tab view after application deployed
Project: http://git-wip-us.apache.org/repos/asf/stratos/repo Commit: http://git-wip-us.apache.org/repos/asf/stratos/commit/9325f1a2 Tree: http://git-wip-us.apache.org/repos/asf/stratos/tree/9325f1a2 Diff: http://git-wip-us.apache.org/repos/asf/stratos/diff/9325f1a2 Branch: refs/heads/master-deployment-policy-fix-merge Commit: 9325f1a2dee22ce1fdc9cb60d272798ccdfefb0e Parents: 61ecad6 Author: Dakshika Jayathilaka <[email protected]> Authored: Thu Mar 12 04:59:48 2015 +0530 Committer: Dakshika Jayathilaka <[email protected]> Committed: Thu Mar 12 04:59:48 2015 +0530 ---------------------------------------------------------------------- .../console/applications_form.jag | 7 +- .../themes/theme0/css/custom/topology.css | 61 +++++- .../theme0/helpers/applications_topology.js | 2 +- .../theme0/js/custom/applications_topology.js | 214 +++++++++++++++++++ .../theme0/partials/applications_topology.hbs | 59 +++-- .../theme0/renderers/applications_form.js | 1 + 6 files changed, 319 insertions(+), 25 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/stratos/blob/9325f1a2/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 409ab8f..e936bab 100644 --- a/components/org.apache.stratos.manager.console/console/applications_form.jag +++ b/components/org.apache.stratos.manager.console/console/applications_form.jag @@ -33,7 +33,7 @@ var log = new Log("apachestratos.applications_form"), elements = uriMatcher.match('/{context}/applications/{formtype}/'), breadcrumbPathLevelOne = 'applications', formDataEdit = topologyData = editorGroups = editorCartridges = editorAutoscalePolicies = applicationHbs ='', - editorDeploymentPolicies = applicationPolicyData ='', + editorDeploymentPolicies = applicationPolicyData = applicationJSON ='', isEdit = isForm = false, userPermissions = session.get('PERMISSIONS'); @@ -49,7 +49,7 @@ if (!elements) { var applicationName = elements.applicationId; //get application json - var applicationJSON = util.RESTCalls.getApplicationJSON(applicationName); + applicationJSON = util.RESTCalls.getApplicationJSON(applicationName); var applicationAlias = applicationJSON.alias; if(elements.action == 'view'){ @@ -75,6 +75,9 @@ if (!elements) { if (elements.formtype == 'applications' && elements.action != 'new') { applicationHbs = 'applicationTopology'; topologyData = util.RESTCalls.getApplicationTopology(elements.action); + //get application json + applicationJSON = util.RESTCalls.getApplicationJSON(elements.action); + }else if(elements.formtype == 'applications' && elements.action == 'new'){ applicationHbs = 'applicationEditor'; editorGroups = util.RESTCalls.getGroups(); http://git-wip-us.apache.org/repos/asf/stratos/blob/9325f1a2/components/org.apache.stratos.manager.console/console/themes/theme0/css/custom/topology.css ---------------------------------------------------------------------- diff --git a/components/org.apache.stratos.manager.console/console/themes/theme0/css/custom/topology.css b/components/org.apache.stratos.manager.console/console/themes/theme0/css/custom/topology.css index 3bd34ea..25e2970 100644 --- a/components/org.apache.stratos.manager.console/console/themes/theme0/css/custom/topology.css +++ b/components/org.apache.stratos.manager.console/console/themes/theme0/css/custom/topology.css @@ -18,7 +18,7 @@ background-color: white; border-radius: 4px; border: 1px solid #DDDDDD; - margin: 0 15px; + margin: 30px 0 15px; } .st-active{color: #1abc9c;} @@ -30,6 +30,7 @@ .left-side { float: left; width: 15%; + margin-top: 30px; } .keys>div { @@ -44,4 +45,60 @@ left: 60%; } -#export{margin-right: 5px;} \ No newline at end of file +#export{} + +.topology-buttons{ + float: right; + margin-top: 38px; + margin-left: -92px; + z-index: 999; + position: relative; + padding: 10px 10px 0px; +} + +.topology-buttons i{ + padding: 5px; + background-color: #fff; + border: 1px solid; + cursor: pointer; + font-size: 20px; +} + +.app-creator { + margin-top: 30px; + height: 600px; + background-color: rgb(244, 244, 244); + border: 1px solid #ddd; + border-radius: 4px; + margin-left: 10px; + position: relative; +} + +#whiteboard{ + width: 100%; + height: 585px; + position: absolute; + overflow: auto; +} +.stepnode { + border: 1px solid silver; + 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; + cursor: pointer; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} +.stepnode i { + margin-top: 2px; + color: #e67e22; +} \ No newline at end of file http://git-wip-us.apache.org/repos/asf/stratos/blob/9325f1a2/components/org.apache.stratos.manager.console/console/themes/theme0/helpers/applications_topology.js ---------------------------------------------------------------------- diff --git a/components/org.apache.stratos.manager.console/console/themes/theme0/helpers/applications_topology.js b/components/org.apache.stratos.manager.console/console/themes/theme0/helpers/applications_topology.js index 584a829..234c9f3 100644 --- a/components/org.apache.stratos.manager.console/console/themes/theme0/helpers/applications_topology.js +++ b/components/org.apache.stratos.manager.console/console/themes/theme0/helpers/applications_topology.js @@ -1,7 +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', 'd3js-v3/d3.v3.min.js' , - 'canvg/rgbcolor.js', 'canvg/canvg.js','custom/applications_topology.js'], + 'jsplumb-1.7.2/dom.jsPlumb-1.7.2-min.js', 'dagre-v0.7.0/dagre.min.js', 'canvg/rgbcolor.js', 'canvg/canvg.js','custom/applications_topology.js'], css: ['bootstrap-switch-3.0.2/bootstrap-switch.min.css', 'custom/style.css', 'custom/topology.css'] }; }; http://git-wip-us.apache.org/repos/asf/stratos/blob/9325f1a2/components/org.apache.stratos.manager.console/console/themes/theme0/js/custom/applications_topology.js ---------------------------------------------------------------------- diff --git a/components/org.apache.stratos.manager.console/console/themes/theme0/js/custom/applications_topology.js b/components/org.apache.stratos.manager.console/console/themes/theme0/js/custom/applications_topology.js index 98ec5ef..9296e5a 100644 --- a/components/org.apache.stratos.manager.console/console/themes/theme0/js/custom/applications_topology.js +++ b/components/org.apache.stratos.manager.console/console/themes/theme0/js/custom/applications_topology.js @@ -342,3 +342,217 @@ function update(source) { } +//Application view +// 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('application') + .addClass('stepnode') + .appendTo('#whiteboard'); + + 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'); + + + 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']) + } + } + } + + + +} + +var initapp = 0; + +$("a[href='#application']").on('shown.bs.tab', function(e) { + if(initapp == 0){ + addJsplumbGroup(applicationJSON, cartridgeCounter); + //reposition after group add + dagrePosition(); + initapp++; + } +}); + + + http://git-wip-us.apache.org/repos/asf/stratos/blob/9325f1a2/components/org.apache.stratos.manager.console/console/themes/theme0/partials/applications_topology.hbs ---------------------------------------------------------------------- diff --git a/components/org.apache.stratos.manager.console/console/themes/theme0/partials/applications_topology.hbs b/components/org.apache.stratos.manager.console/console/themes/theme0/partials/applications_topology.hbs index 719e216..249bef8 100644 --- a/components/org.apache.stratos.manager.console/console/themes/theme0/partials/applications_topology.hbs +++ b/components/org.apache.stratos.manager.console/console/themes/theme0/partials/applications_topology.hbs @@ -12,45 +12,64 @@ <button class='btn btn-default btn-lg' type='button' style="margin-left: -15px; " onclick='window.location.replace(document.referrer)'> Back</button> </div> - <div class='col-md-11'> - <button class='btn btn-info btn-lg pull-right' type='button' id='refresh' data-form=''>Refresh </button> - <a class='btn btn-info btn-lg pull-right' type='button' id='export' data-form=''>Export As PNG </a> - </div> </div> </div> - <div class="left-side"> - <div class="panel panel-default"> - <div class="panel-heading"> - <h3 class="panel-title">Legends</h3> + <!-- Nav tabs --> + <ul class="nav nav-tabs" role="tablist"> + <li class="active"><a href="#topology" role="tab" data-toggle="tab">Topology View</a></li> + <li><a href="#application" role="tab" data-toggle="tab">Application View</a></li> + </ul> + + <!-- Tab panes --> + <div class="tab-content"> + <div class="tab-pane active" id="topology"> + <div class="topology-buttons"> + <a id='export' ><i class="fa fa-save" data-toggle="tooltip" data-placement="top" title="Export as PNG"></i></a> + <i class="fa fa-refresh" id='refresh' data-toggle="tooltip" data-placement="top" title="Refresh Topology"></i> </div> - <div class="panel-body"> - <div class="keys"> - <div><i class="fa fa-square st-active"></i> Active </div> - <div><i class="fa fa-square st-created"></i> Created </div> - <div><i class="fa fa-square st-inactive"></i> Inactive </div> - <div><i class="fa fa-square st-terminated"></i> Terminated </div> - <div><i class="fa fa-square st-other"></i> Other </div> + <div class="left-side"> + <div class="panel panel-default"> + <div class="panel-heading"> + <h3 class="panel-title">Legends</h3> + </div> + <div class="panel-body"> + <div class="keys"> + <div><i class="fa fa-square st-active"></i> Active </div> + <div><i class="fa fa-square st-created"></i> Created </div> + <div><i class="fa fa-square st-inactive"></i> Inactive </div> + <div><i class="fa fa-square st-terminated"></i> Terminated </div> + <div><i class="fa fa-square st-other"></i> Other </div> + </div> + </div> </div> </div> + <div class="application-topology"> + + </div> + <canvas id="canvasOriginal" height="190" width="190" style="display:none"></canvas> </div> - </div> - <div class="application-topology"> + <div class="tab-pane" id="application"> + <div class="app-creator"> + <div id="whiteboard"> + </div> + </div> + </div> </div> - <canvas id="canvasOriginal" height="190" width="190" style="display:none"></canvas> </div> </div> <script type="text/javascript"> -$(document).ready(function () { var topologydata = {{{topologyData}}}; + var applicationJSON = {{{applicationJSON}}}; +$(document).ready(function () { //initial generation with deafult call update(genTree(topologydata)); $('#refresh').click(function(){ //get ajax call - $(".application-topology").html('<i class="fa fa-spinner fa-spin fa-4x"></i>'); + $(".application-topology").html('<i class="fa fa-spinner fa-pulse fa-4x"></i>'); var formtype = 'applicationtopology'; var applicationId = "{{appName}}"; http://git-wip-us.apache.org/repos/asf/stratos/blob/9325f1a2/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 4c8559c..1e69d1b 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 @@ -134,6 +134,7 @@ var render = function (theme, data, meta, require) { formContext: data.breadcrumbPathLevelTwo, appName: data.appName, topologyData: data.topologyData, + applicationJSON:data.applicationJSON, form_action: data.form_action, formHtml: data.formHtml, formData: data.formData,
