From b7848ab4f6f14727f3fa9e6d315be0cd4f1467da Mon Sep 17 00:00:00 2001 From: Ben Thomasson Date: Tue, 20 Feb 2018 16:26:49 -0500 Subject: [PATCH] Adds breadcrumb to network UI * Adds functionality for breadcrumb * Changes the site icon to stay the same size --- awx/ui/client/src/network-ui/host.partial.svg | 2 +- awx/ui/client/src/network-ui/models.js | 23 +++++++++ .../network-nav/network.nav.block.less | 7 ++- .../network-nav/network.nav.controller.js | 5 ++ .../network-nav/network.nav.view.html | 12 +++-- .../src/network-ui/network.ui.controller.js | 49 ++++++++++++++++++- .../src/network-ui/network_ui.partial.svg | 2 +- .../client/src/network-ui/router.partial.svg | 2 +- awx/ui/client/src/network-ui/site.partial.svg | 6 +-- .../client/src/network-ui/switch.partial.svg | 2 +- awx/ui/client/src/network-ui/view.fsm.js | 1 + 11 files changed, 96 insertions(+), 15 deletions(-) diff --git a/awx/ui/client/src/network-ui/host.partial.svg b/awx/ui/client/src/network-ui/host.partial.svg index 212e71b3d3..7804d8781f 100644 --- a/awx/ui/client/src/network-ui/host.partial.svg +++ b/awx/ui/client/src/network-ui/host.partial.svg @@ -1,5 +1,5 @@ - + diff --git a/awx/ui/client/src/network-ui/models.js b/awx/ui/client/src/network-ui/models.js index 0859677f2b..0e92d990c8 100644 --- a/awx/ui/client/src/network-ui/models.js +++ b/awx/ui/client/src/network-ui/models.js @@ -661,6 +661,29 @@ Group.prototype.update_membership = function (devices, groups) { return [old_devices, this.devices, device_ids, old_groups, this.groups, group_ids]; }; +Group.prototype.is_in_breadcrumb = function(viewport){ + var groupY1 = this.top_extent(); + var groupX1 = this.left_extent(); + var groupY2 = this.bottom_extent(); + var groupX2 = this.right_extent(); + + var viewportY1 = viewport.top_extent(); + var viewportX1 = viewport.left_extent(); + var viewportY2 = viewport.bottom_extent(); + var viewportX2 = viewport.right_extent(); + + if (viewportX1 > groupX1 && + viewportY1 > groupY1 && + viewportX2 < groupX2 && + viewportY2 < groupY2) { + this.on_screen = true; + return true; + } else { + this.on_screen = false; + return false; + } +}; + function ToolBox(id, name, type, x, y, width, height) { this.id = id; diff --git a/awx/ui/client/src/network-ui/network-nav/network.nav.block.less b/awx/ui/client/src/network-ui/network-nav/network.nav.block.less index eb89a3366b..8493b4df63 100644 --- a/awx/ui/client/src/network-ui/network-nav/network.nav.block.less +++ b/awx/ui/client/src/network-ui/network-nav/network.nav.block.less @@ -105,9 +105,12 @@ padding-left:20px; } +.Networking-breadCrumbBarItem{ + margin: 0px; + padding-left:0px; +} + .Networking-breadCrumbText{ - color:@default-link; - text-transform: uppercase; font-size: 14px; } diff --git a/awx/ui/client/src/network-ui/network-nav/network.nav.controller.js b/awx/ui/client/src/network-ui/network-nav/network.nav.controller.js index d3b5072938..1d3d9547f9 100644 --- a/awx/ui/client/src/network-ui/network-nav/network.nav.controller.js +++ b/awx/ui/client/src/network-ui/network-nav/network.nav.controller.js @@ -14,6 +14,7 @@ function NetworkingController (models, $state, $scope, strings, CreateSelect2) { vm.leftPanelIsExpanded = true; vm.jumpToPanelExpanded = false; vm.keyPanelExpanded = false; + vm.groups = []; $scope.devices = []; vm.close = () => { $state.go('inventories'); @@ -43,6 +44,10 @@ function NetworkingController (models, $state, $scope, strings, CreateSelect2) { vm.leftPanelIsExpanded = !vm.leftPanelIsExpanded; }); + $scope.$on('awxNet-breadcrumbGroups', (e, groups) => { + vm.breadcrumb_groups = _.sortBy(groups, 'distance').reverse(); + }); + $scope.$on('instatiateSelect', (e, devices) => { for(var i = 0; i < devices.length; i++){ let device = devices[i]; diff --git a/awx/ui/client/src/network-ui/network-nav/network.nav.view.html b/awx/ui/client/src/network-ui/network-nav/network.nav.view.html index e9e1a1bb34..0f476d0f6e 100644 --- a/awx/ui/client/src/network-ui/network-nav/network.nav.view.html +++ b/awx/ui/client/src/network-ui/network-nav/network.nav.view.html @@ -117,10 +117,14 @@
-
Foo
/
-
Bar
/
-
Bread
/
-
crumb
+
    +
  1. + {{group.name}} +
    2. +
  2. + {{group.name}} +
    3. +
diff --git a/awx/ui/client/src/network-ui/network.ui.controller.js b/awx/ui/client/src/network-ui/network.ui.controller.js index 052693944b..a8e1430673 100644 --- a/awx/ui/client/src/network-ui/network.ui.controller.js +++ b/awx/ui/client/src/network-ui/network.ui.controller.js @@ -132,7 +132,40 @@ var NetworkUIController = function($scope, $document, $location, $window, $http, $scope.view_port = {'x': 0, 'y': 0, 'width': 0, - 'height': 0}; + 'height': 0, + top_extent: function (scaledY) { + this.x1 = this.x; + this.x2 = this.x + this.width; + this.y1 = this.y; + this.y2 = this.y + this.height; + var y2 = this.y2 !== null ? this.y2 : scaledY; + return (this.y1 < y2? this.y1 : y2); + }, + left_extent: function (scaledX) { + this.x1 = this.x; + this.x2 = this.x + this.width; + this.y1 = this.y; + this.y2 = this.y + this.height; + var x2 = this.x2 !== null ? this.x2 : scaledX; + return (this.x1 < x2? this.x1 : x2); + }, + bottom_extent: function (scaledY) { + this.x1 = this.x; + this.x2 = this.x + this.width; + this.y1 = this.y; + this.y2 = this.y + this.height; + var y2 = this.y2 !== null ? this.y2 : scaledY; + return (this.y1 > y2? this.y1 : y2); + }, + right_extent: function (scaledX) { + this.x1 = this.x; + this.x2 = this.x + this.width; + this.y1 = this.y; + this.y2 = this.y + this.height; + var x2 = this.x2 !== null ? this.x2 : scaledX; + return (this.x1 > x2? this.x1 : x2); + } + }; $scope.trace_id_seq = util.natural_numbers(0); $scope.trace_order_seq = util.natural_numbers(0); $scope.trace_id = $scope.trace_id_seq(); @@ -1208,6 +1241,18 @@ var NetworkUIController = function($scope, $document, $location, $window, $http, $scope.groups.push(group); }; + $scope.breadcrumbGroups = function(){ + let breadcrumbGroups = []; + for(var i = 0; i < $scope.groups.length; i++){ + let group = $scope.groups[i]; + if(group.is_in_breadcrumb($scope.view_port)){ + group.distance = util.distance(group.x1, group.y1, group.x2, group.y2); + breadcrumbGroups.push(group); + } + } + return breadcrumbGroups; + }; + $scope.forDevice = function(device_id, data, fn) { var i = 0; for (i = 0; i < $scope.devices.length; i++) { @@ -1419,7 +1464,6 @@ var NetworkUIController = function($scope, $document, $location, $window, $http, } }; - $scope.onGroupLabelEdit = function(data) { $scope.edit_group_label(data); }; @@ -1814,6 +1858,7 @@ var NetworkUIController = function($scope, $document, $location, $window, $http, $scope.updateInterfaceDots(); $scope.$emit('instatiateSelect', $scope.devices); + $scope.$emit('awxNet-breadcrumbGroups', $scope.breadcrumbGroups()); }; $scope.updateInterfaceDots = function() { diff --git a/awx/ui/client/src/network-ui/network_ui.partial.svg b/awx/ui/client/src/network-ui/network_ui.partial.svg index 6c9c5e4227..c82ce3020e 100644 --- a/awx/ui/client/src/network-ui/network_ui.partial.svg +++ b/awx/ui/client/src/network-ui/network_ui.partial.svg @@ -44,7 +44,7 @@ - + - + diff --git a/awx/ui/client/src/network-ui/site.partial.svg b/awx/ui/client/src/network-ui/site.partial.svg index a58ee52f93..a716c30de6 100644 --- a/awx/ui/client/src/network-ui/site.partial.svg +++ b/awx/ui/client/src/network-ui/site.partial.svg @@ -1,7 +1,7 @@ - + {{item.name}} - {{item.name}}{{item.edit_label?'_':''}} + ng-attr-y="50"> {{item.name}} + {{item.name}}{{item.edit_label?'_':''}} diff --git a/awx/ui/client/src/network-ui/switch.partial.svg b/awx/ui/client/src/network-ui/switch.partial.svg index a7e022b281..4fee735ed9 100644 --- a/awx/ui/client/src/network-ui/switch.partial.svg +++ b/awx/ui/client/src/network-ui/switch.partial.svg @@ -1,5 +1,5 @@ - + diff --git a/awx/ui/client/src/network-ui/view.fsm.js b/awx/ui/client/src/network-ui/view.fsm.js index 34ee4945f8..8ddda2bdb1 100644 --- a/awx/ui/client/src/network-ui/view.fsm.js +++ b/awx/ui/client/src/network-ui/view.fsm.js @@ -83,6 +83,7 @@ _Scale.prototype.onMouseWheel = function (controller, msg_type, message) { var item = controller.scope.context_menus[0]; item.enabled = false; controller.scope.$emit('awxNet-UpdateZoomWidget', controller.scope.current_scale, true); + controller.scope.$emit('awxNet-breadcrumbGroups', controller.scope.breadcrumbGroups()); controller.scope.updatePanAndScale(); controller.changeState(Ready); };