You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@brooklyn.apache.org by he...@apache.org on 2016/02/01 18:52:09 UTC
[25/50] [abbrv] brooklyn-ui git commit: include status icon in the
app tree (no live update though)
include status icon in the app tree (no live update though)
Project: http://git-wip-us.apache.org/repos/asf/brooklyn-ui/repo
Commit: http://git-wip-us.apache.org/repos/asf/brooklyn-ui/commit/e03bb7b4
Tree: http://git-wip-us.apache.org/repos/asf/brooklyn-ui/tree/e03bb7b4
Diff: http://git-wip-us.apache.org/repos/asf/brooklyn-ui/diff/e03bb7b4
Branch: refs/heads/0.6.0
Commit: e03bb7b4c0b82b6f4d944d3634ea7da132063c6c
Parents: a5f59b0
Author: Alex Heneveld <al...@cloudsoftcorp.com>
Authored: Tue Sep 17 04:38:40 2013 +0100
Committer: Alex Heneveld <al...@cloudsoftcorp.com>
Committed: Wed Sep 18 09:30:06 2013 +0100
----------------------------------------------------------------------
usage/jsgui/src/main/webapp/assets/css/base.css | 6 +-
.../webapp/assets/js/view/application-tree.js | 35 +++++++-----
.../webapp/assets/js/view/entity-summary.js | 4 +-
.../main/webapp/assets/tpl/apps/tree-item.html | 59 ++++++++------------
4 files changed, 50 insertions(+), 54 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/brooklyn-ui/blob/e03bb7b4/usage/jsgui/src/main/webapp/assets/css/base.css
----------------------------------------------------------------------
diff --git a/usage/jsgui/src/main/webapp/assets/css/base.css b/usage/jsgui/src/main/webapp/assets/css/base.css
index c3df6e6..bd69c3e 100644
--- a/usage/jsgui/src/main/webapp/assets/css/base.css
+++ b/usage/jsgui/src/main/webapp/assets/css/base.css
@@ -579,7 +579,7 @@ line-height: 18px;
.tree-box.outer {
margin-left: 12px;
margin-right: 0px;
- margin-bottom: 9px;
+ margin-bottom: 14px;
-webkit-border-radius: 4px 0 0 4px !important;
-moz-border-radius: 4px 0 0 4px !important;
border-radius: 4px 0 0 4px !important;
@@ -595,6 +595,10 @@ line-height: 18px;
border-radius: 3px 0 0 3px !important;
padding-left: 6px;
padding-bottom: 2px;
+ margin-left: 3px;
+}
+.tree-box.inner.depth-first {
+ margin-left: 8px;
}
.tree-box.inner.depth-odd {
background-color: #D8DAD8;
http://git-wip-us.apache.org/repos/asf/brooklyn-ui/blob/e03bb7b4/usage/jsgui/src/main/webapp/assets/js/view/application-tree.js
----------------------------------------------------------------------
diff --git a/usage/jsgui/src/main/webapp/assets/js/view/application-tree.js b/usage/jsgui/src/main/webapp/assets/js/view/application-tree.js
index efbad8b..9e1cc73 100644
--- a/usage/jsgui/src/main/webapp/assets/js/view/application-tree.js
+++ b/usage/jsgui/src/main/webapp/assets/js/view/application-tree.js
@@ -3,18 +3,20 @@
* @type {*}
*/
define([
- "underscore", "jquery", "backbone",
+ "underscore", "jquery", "backbone", "view/viewutils",
"model/app-tree", "./entity-details", "model/entity-summary", "model/application",
"text!tpl/apps/tree-item.html", "text!tpl/apps/tree-empty.html", "text!tpl/apps/details.html", "text!tpl/apps/entity-not-found.html"
-], function (_, $, Backbone,
+], function (_, $, Backbone, ViewUtils,
AppTree, EntityDetailsView, EntitySummary, Application,
TreeItemHtml, TreeEmptyHtml, EntityDetailsEmptyHtml, EntityNotFoundHtml) {
var treeViewTemplate = _.template(TreeItemHtml),
notFoundTemplate = _.template(EntityNotFoundHtml);
+
var ApplicationTreeView = Backbone.View.extend({
template: treeViewTemplate,
+ hoverTimer: null,
events:{
'click span.entity_tree_node .tree-change':'treeChange',
@@ -81,6 +83,7 @@ define([
parentApp:application.get("id"),
displayName:application.get("name"),
iconUrl:application.get("iconUrl"),
+ statusIconUrl: ViewUtils.computeStatusIcon(application.get("serviceUp"),application.get("serviceState")),
depth: 0
})),
treeFromEntity = function (entity, depth) {
@@ -94,6 +97,7 @@ define([
parentApp:application.get("id"),
displayName:entity.getDisplayName(),
iconUrl:entity.get("iconUrl"),
+ statusIconUrl: ViewUtils.computeStatusIcon(entity.get("serviceUp"),entity.get("serviceState")),
depth: depth
}))
var $parentTpl = $entityTpl.find("#children")
@@ -108,6 +112,7 @@ define([
parentApp:application.get("id"),
displayName:entity.getDisplayName(),
iconUrl:entity.get("iconUrl"),
+ statusIconUrl: ViewUtils.computeStatusIcon(entity.get("serviceUp"),entity.get("serviceState")),
depth: depth
}))
}
@@ -123,23 +128,16 @@ define([
// show the "light-popup" (expand / expand all / etc) menu
// if user hovers for 500ms. surprising there is no option for this.
- var hoverTimer;
$('.light-popup', $template).parent().parent().hover(
function (parent) {
- if (hoverTimer!=null) {
- clearTimeout(hoverTimer);
- hoverTimer = null;
- }
- hoverTimer = setTimeout(function() {
+ that.cancelHoverTimer();
+ that.hoverTimer = setTimeout(function() {
var menu = $(parent.currentTarget).find('.light-popup')
menu.show()
}, 500);
},
function (parent) {
- if (hoverTimer!=null) {
- clearTimeout(hoverTimer);
- hoverTimer = null;
- }
+ that.cancelHoverTimer();
var menu = $(parent.currentTarget).find('.light-popup')
menu.hide()
$('.light-popup').hide()
@@ -147,6 +145,13 @@ define([
return $template
},
+ cancelHoverTimer: function() {
+ var that = this;
+ if (that.hoverTimer!=null) {
+ clearTimeout(that.hoverTimer);
+ that.hoverTimer = null;
+ }
+ },
displayEntity: function(event) {
event.preventDefault();
@@ -213,8 +218,6 @@ define([
},
treeChange: function(event) {
- log("changing")
- log(event)
var $target = $(event.currentTarget);
var $treeBox = $target.closest('.tree-box');
if ($target.hasClass('tr-expand')) {
@@ -234,6 +237,7 @@ define([
}
}
// hide the popup menu
+ this.cancelHoverTimer();
$('.light-popup').hide()
// don't let other events interfere
return false
@@ -294,8 +298,9 @@ define([
$("span.entity_tree_node").removeClass("active")
if (id) {
var $selectedNode = $("span.entity_tree_node#"+id);
- this.showChildrenOf($selectedNode.parents('#app-tree .tree-box'), false)
$selectedNode.addClass("active")
+ // if we wanted to auto-expand the children of the selected node:
+// this.showChildrenOf($selectedNode.parents('#app-tree .tree-box'), false)
}
}
})
http://git-wip-us.apache.org/repos/asf/brooklyn-ui/blob/e03bb7b4/usage/jsgui/src/main/webapp/assets/js/view/entity-summary.js
----------------------------------------------------------------------
diff --git a/usage/jsgui/src/main/webapp/assets/js/view/entity-summary.js b/usage/jsgui/src/main/webapp/assets/js/view/entity-summary.js
index 7bc4ab2..6476fb7 100644
--- a/usage/jsgui/src/main/webapp/assets/js/view/entity-summary.js
+++ b/usage/jsgui/src/main/webapp/assets/js/view/entity-summary.js
@@ -44,8 +44,10 @@ define([
}})
},
updateSensorsNow: function(that) {
- <!-- hard-coded values for most commonly used sensors -->
+ // hard-coded values for most commonly used sensors
+ // this is redundant with values now returned from REST ApplicationResource.applicationTree
+ // but leaving them here until we more cleanly model that in javascript (e.g. lazy loading)
that.revealIfHasValue(that, "service.isUp", that.$(".serviceUp"))
that.revealIfHasValue(that, "service.state", that.$(".status"))
http://git-wip-us.apache.org/repos/asf/brooklyn-ui/blob/e03bb7b4/usage/jsgui/src/main/webapp/assets/tpl/apps/tree-item.html
----------------------------------------------------------------------
diff --git a/usage/jsgui/src/main/webapp/assets/tpl/apps/tree-item.html b/usage/jsgui/src/main/webapp/assets/tpl/apps/tree-item.html
index 1a2a380..82fcef3 100644
--- a/usage/jsgui/src/main/webapp/assets/tpl/apps/tree-item.html
+++ b/usage/jsgui/src/main/webapp/assets/tpl/apps/tree-item.html
@@ -1,21 +1,26 @@
-<div class="toggler-group tree-box <%= depth==0 ? "outer" : "inner "+(depth%2==1 ? "depth-odd" : "depth-even") %>">
+<div class="toggler-group tree-box <%=
+ depth==0 ? "outer" : "inner "+(depth%2==1 ? "depth-odd" : "depth-even")+(depth==1 ? " depth-first" : "") %>">
<div class="tree-node">
<span class="entity_tree_node name entity" id="<%= id %>" data-entity-type="<%= type %>" data-parent-app="<%= parentApp %>">
<a href="#/v1/applications/<%= parentApp %>/entities/<%= id %>">
- <%
+ <%
var isApp = type == "application";
- var iconSize = isApp ? 36 : 24;
- var iconsDivWidth = iconUrl ? iconSize * 3 / 2 : 16;
- var chevronLeft = (iconUrl ? iconSize : 0) + 3;
- var chevronTop = 3;
+ var entityIconSize = isApp ? 40 : 30;
+ var statusIconSize = isApp ? 24 : 16;
+
+ var chevronLeft = isApp ? 5.5 : 1.5;
+ var minHeight = hasChildren && statusIconUrl ? entityIconSize : 24;
+ var statusColumnWidth = hasChildren || statusIconUrl || (!isApp && !iconUrl /* for children, insert space so things line up */) ? statusIconSize : 0;
%>
- <div style="min-width: <%= iconsDivWidth %>px; max-width: <%= iconsDivWidth %>px; max-height: <%= iconSize %>px; display: inline-block; margin-right: 6px;">
- <% if (iconUrl) { %>
- <img src="<%= iconUrl %>" style="max-width: <%= iconSize %>px; max-height: <%= iconSize %>px;">
- <% } %>
+ <div style="min-width: <%= statusColumnWidth + (iconUrl ? entityIconSize : 6)%>px; min-height: <%= minHeight %>px; max-height: 40px; display: inline-block; margin-right: 4px; vertical-align: middle;">
+ <% if (statusIconUrl) { %>
+ <div style="position: absolute; left: 0px; margin: auto; top: <%= isApp && hasChildren ? 3 : 2 %>px;<% if (!hasChildren) { %> bottom: 0px;<% } %>">
+ <img src="<%= statusIconUrl %>" style="max-width: <%= statusIconSize %>px; max-height: <%= statusIconSize %>px; margin: auto; position: absolute; top: 0px;<% if (!hasChildren) { %> bottom: 0px;<% } %>">
+ </div>
+ <% } %>
<% if (hasChildren) { %>
- <div style="position: absolute; left: <%= chevronLeft %>px; top: <%= chevronTop %>px;">
+ <div style="position: absolute; left: <%= chevronLeft %>px; margin: auto; <%= statusIconUrl ? "bottom: 1px;" : isApp ? "top: 6px;" : "top: 6px;" %>">
<div class="toggler-icon icon-chevron-right tree-node-state tree-change">
<div class="light-popup">
<div class="light-popup-body">
@@ -28,37 +33,17 @@
</div>
</div>
</div>
- <% } else { %>
- <div style="position: absolute; left: <%= chevronLeft %>px; top: <%= chevronTop + 21 %>px;">
-
- </div>
<% } %>
- </div><%=
+ <% if (iconUrl) { %>
+ <img src="<%= iconUrl %>" style="max-width: <%= entityIconSize %>px; max-height: <%= entityIconSize %>px; position: absolute; left: <%= statusColumnWidth %>px; top: 0; bottom: 0; margin: auto;">
+ <% } %>
+ </div>
- displayName
+ <span style="max-height: 18px; position: relative; margin: auto; top: 2px; bottom: 0;"><%= displayName %></span>
- %></a>
+ </a>
</span>
</div>
<div id="children" class="toggler-target hide">
</div>
</div>
-
-<!--
-<li class="<%= type %>">
- <% if (type != "leaf") { %> <label> <% } %>
- <span id="<%= id %>" class="name entity entity_tree_node<%
- if (type == "leaf") { %> leaf<% }
- if (type == "application") { %> application<% }
- %>" data-entity-type="<%= type %>" data-parent-app="<%= parentApp %>">
- <a href="#/v1/applications/<%= parentApp %>/entities/<%= id %>">
-
- </a>
- </span>
- <% if (type != "leaf") { %> </label> <% } %>
- <% if (type != "leaf") { %>
- <input type="checkbox" checked="true"/>
- <ol class="tree entities"/>
- <% } %>
-</li>
- -->