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

Merge pull request #367 from marshmalien/7551-invert-capacity-percentages

Browse Source 
Invert capacity bar UI to display capacity consumed
This commit is contained in:
Marliana Lara 2017-08-31 14:34:16 -04:00 committed by GitHub
commit 2b99ddda02
12 changed files with 24 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
awx/ui/client/src/instance-groups/capacity-bar/capacity-bar.directive.js
View File

@ -8,7 +8,7 @@ export default ['templateUrl',
restrict: 'E',
link: function(scope) {
scope.$watch('capacity', function() {
scope.PercentRemainingStyle = {
scope.CapacityStyle = {
'flex-grow': scope.capacity * 0.01
};
}, true);

2
awx/ui/client/src/instance-groups/capacity-bar/capacity-bar.partial.html
View File

@ -1,4 +1,4 @@
<div class="CapacityBar">
<div class="CapacityBar-remaining" ng-style="PercentRemainingStyle"></div>
<div class="CapacityBar-remaining" ng-style="CapacityStyle"></div>
<div class="CapacityBar-consumed"></div>
</div>

3
awx/ui/client/src/instance-groups/instance-group.block.less
View File

@ -22,6 +22,7 @@
.Capacity-details--label {
color: @default-interface-txt;
margin: 0 10px 0 0;
width: 100px;
}
.Capacity-details--percentage {
@ -38,7 +39,7 @@
}
}
.List-tableCell--capacityRemainingColumn {
.List-tableCell--capacityColumn {
display: flex;
height: 40px;
align-items: center;

2
awx/ui/client/src/instance-groups/instance-group.partial.html
View File

@ -7,7 +7,7 @@
</div>
<div class="List-details">
<div class="Capacity-details">
<p class="Capacity-details--label" translate>Capacity</p>
<p class="Capacity-details--label" translate>Used Capacity</p>
<capacity-bar capacity="instanceGroupCapacity"></capacity-bar>
<span class="Capacity-details--percentage">{{ instanceGroupCapacity }}%</span>
</div>

2
awx/ui/client/src/instance-groups/instance-groups.list.js
View File

@ -18,7 +18,7 @@ export default ['i18n', function(i18n) {
uiSref: 'instanceGroups.instances.list({instance_group_id: instance_group.id})',
ngClass: "{'isActive' : isActive()}"
},
percent_capacity_remaining: {
consumed_capacity: {
label: i18n._('Capacity'),
nosort: true,
},

2
awx/ui/client/src/instance-groups/instances/instance-jobs/instance-jobs.partial.html
View File

@ -7,7 +7,7 @@
</div>
<div class="List-details">
<div class="Capacity-details">
<p class="Capacity-details--label" translate>Capacity</p>
<p class="Capacity-details--label" translate>Used Capacity</p>
<capacity-bar capacity="instanceCapacity"></capacity-bar>
<span class="Capacity-details--percentage">{{ instanceCapacity }}%</span>
</div>

2
awx/ui/client/src/instance-groups/instances/instance-jobs/instance-jobs.route.js
View File

@ -12,7 +12,7 @@ export default {
templateUrl: templateUrl('./instance-groups/instances/instance-jobs/instance-jobs'),
controller: function($scope, $rootScope, instance) {
$scope.instanceName = instance.hostname;
$scope.instanceCapacity = instance.percent_capacity_remaining;
$scope.instanceCapacity = instance.consumed_capacity;
$scope.instanceJobsRunning = instance.jobs_running;
$rootScope.breadcrumb.instance_name = instance.hostname;
}

13
awx/ui/client/src/instance-groups/instances/instances-list.partial.html
View File

@ -15,27 +15,28 @@
"{{'Name' | translate}}"
<i ng-if="columnNoSort !== 'true'" class="fa columnSortIcon fa-sort-up" ng-class="orderByIcon()"></i>
</th>
<th id="instance-percent_capacity_remaining-header" class="List-tableHeader list-header list-header-noSort" translate>
Capacity
</th>
<th id="instance-jobs_running-header" class="List-tableHeader list-header list-header-noSort" translate>
Running Jobs
</th>
<th id="instance-consumed_capacity-header" class="List-tableHeader list-header list-header-noSort" translate>
Used Capacity
</th>
</tr>
</thead>
<tbody>
<!-- ngRepeat: instance in instances -->
<tr ng-class="{isActive: isActive(instance.id)}" id="instance.id" class="List-tableRow instance_class ng-scope" ng-repeat="instance in instances">
<td class="List-tableCell hostname-column col-md-5 col-sm-5 col-xs-5">
<a ui-sref="instanceGroups.instances.list.job.list({instance_id: instance.id})" class="ng-binding">{{ instance.hostname }}</a></td>
<td class="List-tableCell List-tableCell--capacityRemainingColumn ng-binding">
<capacity-bar capacity="instance.percent_capacity_remaining"></capacity-bar><span>{{ instance.percent_capacity_remaining }}%</span>
<a ui-sref="instanceGroups.instances.list.job.list({instance_id: instance.id})" class="ng-binding">{{ instance.hostname }}</a>
</td>
<td class="List-tableCell jobs_running-column ng-binding">
<a ui-sref="instanceGroups.instances.jobs({instance_group_id: $stateParams.instance_group_id})">
{{ instance.jobs_running }}
</a>
</td>
<td class="List-tableCell List-tableCell--capacityColumn ng-binding">
<capacity-bar capacity="instance.consumed_capacity"></capacity-bar><span>{{ instance.consumed_capacity }}%</span>
</td>
</tr>
</tbody>
</table>

2
awx/ui/client/src/instance-groups/instances/instances.list.js
View File

@ -16,7 +16,7 @@ export default ['i18n', function(i18n) {
modalColumnClass: 'col-md-8',
uiSref: 'instanceGroups.instances.list.job({instance_id: instance.id})'
},
percent_capacity_remaining: {
consumed_capacity: {
label: i18n._('Capacity'),
nosort: true,
},

2
awx/ui/client/src/instance-groups/instances/instances.route.js
View File

@ -9,7 +9,7 @@ export default {
templateUrl: templateUrl('./instance-groups/instance-group'),
controller: function($scope, $rootScope, instanceGroup) {
$scope.instanceGroupName = instanceGroup.name;
$scope.instanceGroupCapacity = instanceGroup.percent_capacity_remaining;
$scope.instanceGroupCapacity = instanceGroup.consumed_capacity;
$scope.instanceGroupJobsRunning = instanceGroup.jobs_running;
$rootScope.breadcrumb.instance_group_name = instanceGroup.name;
}

12
awx/ui/client/src/instance-groups/list/instance-groups-list.partial.html
View File

@ -26,12 +26,12 @@
"{{'Name' | translate}}"
<i ng-if="columnNoSort !== 'true'" class="fa columnSortIcon fa-sort-up" ng-class="orderByIcon()"></i>
</th>
<th id="instance_group-percent_capacity_remaining-header" class="List-tableHeader list-header list-header-noSort" translate>
Capacity
</th>
<th id="instance_group-jobs_running-header" class="List-tableHeader list-header list-header-noSort" translate>
Running Jobs
</th>
<th id="instance_group-consumed_capacity-header" class="List-tableHeader list-header list-header-noSort" translate>
Used Capacity
</th>
</tr>
</thead>
<tbody>
@ -41,14 +41,14 @@
<a ui-sref="instanceGroups.instances.list({instance_group_id: instance_group.id})" class="ng-binding" >{{ instance_group.name }}</a>
<span class="badge List-titleBadge">{{ instance_group.instances }}</span>
</td>
<td class="List-tableCell List-tableCell--capacityRemainingColumn ng-binding">
<capacity-bar capacity="instance_group.percent_capacity_remaining"></capacity-bar><span>{{ instance_group.percent_capacity_remaining }}%</span>
</td>
<td class="List-tableCell jobs_running-column ng-binding">
<a ui-sref="instanceGroups.instances.jobs({instance_group_id: instance_group.id})">
{{ instance_group.jobs_running }}
</a>
</td>
<td class="List-tableCell List-tableCell--capacityColumn ng-binding">
<capacity-bar capacity="instance_group.consumed_capacity"></capacity-bar><span>{{ instance_group.consumed_capacity }}%</span>
</td>
</tr>
</tbody>
</table>

2
awx/ui/client/src/shared/instance-groups-multiselect/instance-groups-modal/instance-groups-modal.directive.js
View File

@ -52,7 +52,7 @@ export default ['templateUrl', '$window', function(templateUrl, $window) {
};
instanceGroupList.fields.name.ngClick = "linkoutInstanceGroup(instance_group)";
instanceGroupList.fields.name.columnClass = 'col-md-11 col-sm-11 col-xs-11';
delete instanceGroupList.fields.percent_capacity_remaining;
delete instanceGroupList.fields.consumed_capacity;
delete instanceGroupList.fields.jobs_running;
let html = `${GenerateList.build({