add icons to app inspector
and support non-autogeneration in icon pipe
diff --git a/ui-modules/app-inspector/app/components/entity-tree/entity-node.html b/ui-modules/app-inspector/app/components/entity-tree/entity-node.html
index 9159b45..4a73f51 100644
--- a/ui-modules/app-inspector/app/components/entity-tree/entity-node.html
+++ b/ui-modules/app-inspector/app/components/entity-tree/entity-node.html
@@ -22,9 +22,12 @@
<brooklyn-status-icon value="{{entity.serviceState}}" ng-if="entity.serviceState || entity.applicationId"></brooklyn-status-icon>
<i class="fa fa-2x fa-external-link" ng-if="!entity.serviceState && !entity.applicationId"></i>
<span>{{entity.name}}</span>
+ <span class="node-icon"><img ng-src="{{ entity | iconGeneratorPipe:{doNotAutogenerate: true} }}"/></span>
</a>
- <div class="entity-node-toggle" ng-if="entity.children.length > 0 || entity.members.length > 0" ng-click="onToggle($event)" >
+ <div class="entity-node-toggle-wrapper">
+ <div class="entity-node-toggle" ng-if="entity.children.length > 0 || entity.members.length > 0" ng-click="onToggle($event)" >
<span class="glyphicon" ng-class="isChildrenOpen ? 'glyphicon-chevron-up' : 'glyphicon-chevron-down'"></span>
+ </div>
</div>
</div>
<div class="entity-node-children" ng-show="isChildrenOpen">
diff --git a/ui-modules/app-inspector/app/components/entity-tree/entity-node.less b/ui-modules/app-inspector/app/components/entity-tree/entity-node.less
index 619ee24..ac4f717 100644
--- a/ui-modules/app-inspector/app/components/entity-tree/entity-node.less
+++ b/ui-modules/app-inspector/app/components/entity-tree/entity-node.less
@@ -75,10 +75,28 @@
margin-left: 10px;
}
}
+ .entity-node-toggle-wrapper {
+ width: 38px;
+ flex-grow: 0;
+ }
.entity-node-toggle {
- flex-shrink: 1;
+ width: 38px;
padding: 12px;
cursor: row-resize;
}
}
+ .node-icon {
+ .pull-right();
+ flex-grow: 0 !important;
+ max-height: 20px; //let it extend above and below span's boundaries
+ overflow: visible !important;
+ margin-top: -8px;
+ margin-left: 0 !important;
+ img {
+ .make-icon(36px);
+ }
+ img[src] {
+ margin-left: 10px;
+ }
+ }
}
diff --git a/ui-modules/app-inspector/app/views/main/inspect/summary/summary.less b/ui-modules/app-inspector/app/views/main/inspect/summary/summary.less
index ccd0ee0..059df66 100644
--- a/ui-modules/app-inspector/app/views/main/inspect/summary/summary.less
+++ b/ui-modules/app-inspector/app/views/main/inspect/summary/summary.less
@@ -20,14 +20,38 @@
.entity-header {
+
.entity-name {
+ display: flex;
border: none;
-webkit-font-smoothing: antialiased;
+ align-items: center;
+
+ .node-icon {
+ flex: 0 1 0px;
+ margin-left: 3px;
+ img[src] {
+ .make-icon(80px);
+ margin-right: 18px;
+ }
+ }
+
+ .node-name {
+ flex: 1 0 200px;
+ border: none;
+ }
+ .editable-wrap {
+ flex: 1 0 200px;
+ width: auto;
+ }
+
+ &.loading {
+ margin-left: 5px;
+ margin-top: 16px;
+ margin-bottom: 16px;
+ }
}
- .editable-wrap {
- width: 100%;
- }
-
+
.editable {
color: @primary-500;
height: 34px;
diff --git a/ui-modules/app-inspector/app/views/main/inspect/summary/summary.template.html b/ui-modules/app-inspector/app/views/main/inspect/summary/summary.template.html
index 8f5bea0..378bcfd 100644
--- a/ui-modules/app-inspector/app/views/main/inspect/summary/summary.template.html
+++ b/ui-modules/app-inspector/app/views/main/inspect/summary/summary.template.html
@@ -19,8 +19,11 @@
<div class="entity-summary" ng-init="show = { status: true, mostRecentActivityInError: true, policies: true };">
<div class="tab-header">
<div class="entity-header">
- <h2 ng-if="!vm.entity" class="entity-name"><loading-state error="vm.error.entity"></loading-state></h2>
- <h2 ng-if="vm.entity" class="entity-name" editable-text="vm.name" blur="submit" buttons="no" blur="submit" onaftersave="vm.updateEntityName()">{{ vm.entity.name }}</h2>
+ <h2 ng-if="!vm.entity" class="entity-name loading"><loading-state error="vm.error.entity"></loading-state></h2>
+ <h2 ng-if="vm.entity" class="entity-name">
+ <span class="node-icon"><img ng-src="{{ vm.entity | iconGeneratorPipe:{doNotAutogenerate: true} }}"/></span>
+ <span class="node-name" editable-text="vm.name" blur="submit" buttons="no" blur="submit" onaftersave="vm.updateEntityName()">{{ vm.entity.name }}</span>
+ </h2>
</div>
<p ng-if="vm.sensors['main.uri']">
<a ng-href="{{vm.sensors['main.uri']}}">{{vm.sensors['main.uri']}}</a>
diff --git a/ui-modules/utils/icon-generator/icon-generator.js b/ui-modules/utils/icon-generator/icon-generator.js
index cdf4325..0146e2f 100644
--- a/ui-modules/utils/icon-generator/icon-generator.js
+++ b/ui-modules/utils/icon-generator/icon-generator.js
@@ -63,17 +63,30 @@
}
export function iconGeneratorPipe(iconGenerator) {
- return function (input, field) {
+ return function (input, opts) {
+ let field, doNotAutogenerate=false;
+ if (opts) {
+ if (typeof opts === 'string') {
+ field = opts;
+ } else {
+ field = opts.field;
+ doNotAutogenerate = opts.doNotAutogenerate;
+ }
+ }
+ let generateFrom = input;
if (typeof(input) === 'object') {
if (input.hasOwnProperty('iconUrl') && input.iconUrl) {
return input.iconUrl;
} else if (input.hasOwnProperty('links') && input.links.hasOwnProperty('iconUrl') && input.links.iconUrl) {
return input.links.iconUrl;
} else if (input.hasOwnProperty(field || 'id')) {
- return iconGenerator(input[field || 'id'])
+ generateFrom = input[field || 'id'];
}
}
- return iconGenerator(input);
+ if (doNotAutogenerate) {
+ return null;
+ }
+ return iconGenerator(generateFrom);
}
}
