You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@stratos.apache.org by la...@apache.org on 2015/03/17 18:59:23 UTC
[02/50] [abbrv] stratos git commit: add tab view after application
deployed
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 <si...@gmail.com>
Authored: Thu Mar 12 04:59:48 2015 +0530
Committer: Dakshika Jayathilaka <si...@gmail.com>
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,