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 <[email protected]> Authored: Tue Sep 17 04:38:40 2013 +0100 Committer: Alex Heneveld <[email protected]> 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> - -->
