External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-01-14 03:10:42 -03:30
Code Issues Packages Projects Releases Wiki Activity

Adds breadcrumb to network UI

Browse Source 
* Adds functionality for breadcrumb
* Changes the site icon to stay the same size
This commit is contained in:
Ben Thomasson 2018-02-20 16:26:49 -05:00
parent a222fb5ebd
commit b7848ab4f6
No known key found for this signature in database
GPG Key ID: 5818EF4CC895D5F5
11 changed files with 96 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
awx/ui/client/src/network-ui/host.partial.svg
View File

@ -1,5 +1,5 @@
<!-- Copyright (c) 2017 Red Hat, Inc. -->
<g ng-if="item.icon || (current_scale > 0.5 && current_scale < 5) || !item.in_group">
<g ng-if="item.icon || current_scale > 0.5 || !item.in_group">
<g transform="scale(0.75)">
<g ng-if="item.moving">
<!--horizontal line -->

23
awx/ui/client/src/network-ui/models.js
View File

@ -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;

7
awx/ui/client/src/network-ui/network-nav/network.nav.block.less
View File

@ -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;
}

5
awx/ui/client/src/network-ui/network-nav/network.nav.controller.js
View File

@ -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];

12
awx/ui/client/src/network-ui/network-nav/network.nav.view.html
View File

@ -117,10 +117,14 @@
</div>
</div>
<div class="Networking-toolbar Networking-breadCrumbBar">
<div class="Networking-breadCrumbText">Foo </div><div class="Networking-breadCrumbSlash">/</div>
<div class="Networking-breadCrumbText">Bar </div><div class="Networking-breadCrumbSlash">/</div>
<div class="Networking-breadCrumbText">Bread </div><div class="Networking-breadCrumbSlash">/</div>
<div class="Networking-breadCrumbText Networking-breadCrumbText--last">crumb</div>
<ol class="Networking-breadCrumbBarItem">
<li class="BreadCrumb-item Networking-breadCrumbText" ng-repeat="group in vm.breadcrumb_groups | limitTo:(vm.breadcrumb_groups.length-1)">
<span>{{group.name}}</span>
</li>
<li class="BreadCrumb-item Networking-breadCrumbText" ng-repeat="group in vm.breadcrumb_groups | limitTo:-1" class="active">
<span>{{group.name}}</span>
</li>
</ol>
</div>
</div>

49
awx/ui/client/src/network-ui/network.ui.controller.js
View File

@ -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() {

2
awx/ui/client/src/network-ui/network_ui.partial.svg
View File

@ -44,7 +44,7 @@
<g awx-net-stream></g>
</g> <!-- end ng-repeat stream in streams-->
</g> <!-- end ng-if current_scale -->
<g>
<g ng-if="current_scale < 5">
<g ng-repeat="item in devices"
ng-attr-transform="translate({{item.x}},{{item.y}})"

2
awx/ui/client/src/network-ui/router.partial.svg
View File

@ -1,5 +1,5 @@
<!-- Copyright (c) 2017 Red Hat, Inc. -->
<g ng-if="item.icon || (current_scale > 0.5 && current_scale < 5) || !item.in_group">
<g ng-if="item.icon || current_scale > 0.5 || !item.in_group">
<g transform="scale(0.75)">
<g ng-if="item.moving">
<!--horizontal line -->

6
awx/ui/client/src/network-ui/site.partial.svg
View File

@ -1,7 +1,7 @@
<!-- Copyright (c) 2017 Red Hat, Inc. -->
<g ng-if="current_scale <= 0.1 && item.type == 'site'" ng-attr-transform="translate({{item.width()/2}}, {{item.height()/2}})">
<g ng-attr-transform="scale({{1/(0.1)}})">
<g ng-attr-transform="scale({{1/(2*current_scale)}})">
<g ng-if="item.moving">
<!--horizontal line -->
<line x1="-150"
@ -98,8 +98,8 @@
filter="url(#background)"
text-anchor="middle"
ng-attr-x="0"
ng-attr-y="{{1200*current_scale}}"> {{item.name}} </text>
<text class="NetworkUI__site-text" filter="url(#background)" text-anchor="middle" x="0" ng-attr-y="{{1200*current_scale}}">{{item.name}}{{item.edit_label?'_':''}}</text>
ng-attr-y="50"> {{item.name}} </text>
<text class="NetworkUI__site-text" filter="url(#background)" text-anchor="middle" x="0" ng-attr-y="50">{{item.name}}{{item.edit_label?'_':''}}</text>
</g>
</g>

2
awx/ui/client/src/network-ui/switch.partial.svg
View File

@ -1,5 +1,5 @@
<!-- Copyright (c) 2017 Red Hat, Inc. -->
<g ng-if="item.icon || (current_scale > 0.5 && current_scale < 5) || !item.in_group">
<g ng-if="item.icon || current_scale > 0.5 || !item.in_group">
<g transform="scale(0.75)">
<g ng-if="item.moving">
<!--horizontal line -->

1
awx/ui/client/src/network-ui/view.fsm.js
View File

@ -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);
};