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 <[email protected]> AuthorDate: Tue Apr 27 16:12:25 2021 +0100 Highlight changed relationships in a switched view Signed-off-by: Mykola Mandra <[email protected]> --- .../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; } } }
