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 2021/05/03 08:27:23 UTC
[brooklyn-ui] 06/08: Highlight changed relationships in a switched
view
This is an automated email from the ASF dual-hosted git repository.
heneveld pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/brooklyn-ui.git
commit d9540198f86bf45bb308826c9b070e3f1974a853
Author: Mykola Mandra <my...@cloudsoftcorp.com>
AuthorDate: Tue Apr 27 16:12:25 2021 +0100
Highlight changed relationships in a switched view
Signed-off-by: Mykola Mandra <my...@cloudsoftcorp.com>
---
.../app/components/entity-tree/entity-node.html | 14 ++++----
.../app/components/entity-tree/entity-node.less | 40 ++++++++++++++++++++--
.../entity-tree/entity-tree.directive.js | 29 +++++++++-------
3 files changed, 60 insertions(+), 23 deletions(-)
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 69ccc43..8227a3a 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
@@ -17,16 +17,16 @@
under the License.
-->
<div class="entity-node">
- <div ng-if="isOpen" class="entity-node-item" ng-class="{ 'active': isSelected() }" uib-popover-template="'EntityNodeInfoTemplate.html'" popover-trigger="'mouseenter'" popover-placement="right" popover-popup-delay="1000">
+ <div ng-if="isOpen" class="entity-node-item" ng-class="{ 'active': isSelected(), 'highlight' : isChanged() && !isSelected() }" uib-popover-template="'EntityNodeInfoTemplate.html'" popover-trigger="'mouseenter'" popover-placement="right" popover-popup-delay="1000">
<a ng-href="{{getHref()}}" class="entity-node-link">
<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 ng-class="{ 'secondary' : isSecondary() }">{{entity.name}}</span>
+ <span>{{entity.name}}</span>
<span class="node-icon"><img ng-src="{{ iconUrl }}"/></span>
</a>
<div class="entity-node-toggle-wrapper">
<div class="entity-node-toggle"
- ng-if="entitiesInCurrentView(entity.children) > 0 || entitiesInCurrentView(entity.members) > 0 || entitiesInCurrentView(entity.otherNodes) > 0"
+ ng-if="nodesInCurrentView() > 0"
ng-click="onToggle($event)" >
<span class="glyphicon" ng-class="isChildrenOpen ? 'glyphicon-chevron-up' : 'glyphicon-chevron-down'"></span>
</div>
@@ -35,15 +35,15 @@
<div class="entity-node-children" ng-show="isChildrenOpen">
<!-- Entity children -->
<entity-node ng-repeat="child in entity.children track by child.id"
- ng-show="child.viewModes.has(viewMode)"
+ ng-if="child.viewModes.has(viewMode)"
entity="child" application-id="applicationId" view-mode="viewMode"></entity-node>
<!-- Or entity members -->
<entity-node ng-repeat="child in entity.members track by child.id"
- ng-show="child.viewModes.has(viewMode) && (!entity.children || entity.children.length === 0)"
+ ng-if="child.viewModes.has(viewMode) && (!entity.children || entity.children.length === 0)"
entity="child" application-id="applicationId" view-mode="viewMode"></entity-node>
<!-- Other nodes under entity -->
<entity-node ng-repeat="child in entity.otherNodes track by child.id"
- ng-show="child.viewModes.has(viewMode)"
+ ng-if="child.viewModes.has(viewMode)"
entity="child" application-id="applicationId" view-mode="viewMode"></entity-node>
</div>
<script type="text/ng-template" id="EntityNodeInfoTemplate.html">
@@ -58,7 +58,7 @@
</tr>
<tr>
<td><b>Number of children</b></td>
- <td>{{entity.children.length || 0}}</td>
+ <td>{{nodesInCurrentView()}}</td>
</tr>
</table>
</script>
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 f8ff200..5537805 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
@@ -47,6 +47,13 @@
border-radius: @border-radius-base;
box-shadow: 0 1px 2px rgba(0,0,0,0.1);
transition: all .2s ease-in-out;
+ &.highlight {
+ animation: fadeOut 1s;
+ -webkit-animation: fadeOut 1s;
+ -moz-animation: fadeOut 1s;
+ -o-animation: fadeOut 1s;
+ -ms-animation: fadeOut 1s;
+ }
&:hover {
background-color: @body-bg;
}
@@ -73,9 +80,6 @@
flex-grow: 1;
padding-top: 3px;
margin-left: 10px;
- &.secondary {
- color: @gray-lighter;
- }
}
}
.entity-node-toggle-wrapper {
@@ -107,4 +111,34 @@
padding-top: 0;
margin-top: -1px;
}
+
+ @keyframes fadeOut {
+ 0% {background-color: lighten(@brand-primary, 50%);}
+ 50% {background-color: lighten(@brand-primary, 50%);}
+ 100% {background-color: transparent}
+ }
+
+ @-moz-keyframes fadeOut {
+ 0% {background-color: lighten(@brand-primary, 50%);}
+ 50% {background-color: lighten(@brand-primary, 50%);}
+ 100% {background-color: transparent}
+ }
+
+ @-webkit-keyframes fadeOut {
+ 0% {background-color: lighten(@brand-primary, 50%);}
+ 50% {background-color: lighten(@brand-primary, 50%);}
+ 100% {background-color: transparent}
+ }
+
+ @-o-keyframes fadeOut {
+ 0% {background-color: lighten(@brand-primary, 50%);}
+ 50% {background-color: lighten(@brand-primary, 50%);}
+ 100% {background-color: transparent}
+ }
+
+ @-ms-keyframes fadeOut {
+ 0% {background-color: lighten(@brand-primary, 50%);}
+ 50% {background-color: lighten(@brand-primary, 50%);}
+ 100% {background-color: transparent}
+ }
}
diff --git a/ui-modules/app-inspector/app/components/entity-tree/entity-tree.directive.js b/ui-modules/app-inspector/app/components/entity-tree/entity-tree.directive.js
index eeec3c6..0ea3b69 100644
--- a/ui-modules/app-inspector/app/components/entity-tree/entity-tree.directive.js
+++ b/ui-modules/app-inspector/app/components/entity-tree/entity-tree.directive.js
@@ -120,7 +120,6 @@ export function entityTreeDirective() {
if ($scope.viewModes.has(VIEW_HOST_FOR_HOSTED_ON)) {
addHostForHostedOnView(entities, relationships);
}
- console.log('-------------THE END-------------------------');
}
/**
@@ -200,7 +199,6 @@ export function entityTreeDirective() {
* @param {string} viewMode The view mode to display copy of the entity in only.
*/
function flipParentAndChild(parent, child, entities, viewMode) {
- console.log('Flip parent with a child!', parent, child);
let parentOfTheParent = findEntity(entities, parent.parentId);
if (parentOfTheParent) {
hideEntityInView(child, viewMode);
@@ -471,24 +469,29 @@ export function entityNodeDirective() {
};
/**
- * @returns {boolean} True if entity is a secondary in a current view, false otherwise. Secondary entity is one
- * that is not part of relationship view the id currently displayed.
+ * @returns {boolean} True if entity is changed in a current view, false otherwise.
*/
- $scope.isSecondary = function() {
- return !$scope.entity.viewModesHighlight.has($scope.viewMode);
+ $scope.isChanged = function() {
+ return $scope.entity.viewModesHighlight.has($scope.viewMode) && $scope.viewMode !== VIEW_PARENT_CHILD;
};
/**
- * Counts amount of entities that are expected to be displayed in the current view.
+ * Counts amount of entity nodes that are expected to be displayed in the current view.
*
- * @param {Array.<Object>} entities The array of entities to count amount for.
- * @returns {number} Amount of entities in the current view.
+ * @returns {number} Amount of entity nodes in the current view.
*/
- $scope.entitiesInCurrentView = (entities) => {
- if (!entities) {
- return 0;
+ $scope.nodesInCurrentView = () => {
+ let amount = 0;
+ if ($scope.entity.children) {
+ amount += $scope.entity.children.filter(entity => entity.viewModes.has($scope.viewMode)).length;
}
- return entities.filter(entity => entity.viewModes.has($scope.viewMode)).length || 0;
+ if ($scope.entity.members) {
+ amount += $scope.entity.members.filter(entity => entity.viewModes.has($scope.viewMode)).length;
+ }
+ if ($scope.entity.otherNodes) {
+ amount += $scope.entity.otherNodes.filter(entity => entity.viewModes.has($scope.viewMode)).length;
+ }
+ return amount;
}
}
}