brooklyn-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From henev...@apache.org
Subject [25/50] [abbrv] brooklyn-ui git commit: include status icon in the app tree (no live update though)
Date Mon, 01 Feb 2016 17:52:09 GMT
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 <alex.heneveld@cloudsoftcorp.com>
Authored: Tue Sep 17 04:38:40 2013 +0100
Committer: Alex Heneveld <alex.heneveld@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;">
-            &nbsp;
-        </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>
- -->


Mime
View raw message