External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-04-10 12:39:22 -02: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
parent c3a7adcb0d c5d4ea01f6
commit 2b99ddda02
12 changed files with 24 additions and 22 deletions
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', restrict: 'E',
link: function(scope) { link: function(scope) {
scope.$watch('capacity', function() { scope.$watch('capacity', function() {
scope.PercentRemainingStyle = { scope.CapacityStyle = {
'flex-grow': scope.capacity * 0.01 'flex-grow': scope.capacity * 0.01
}; };
}, true); }, 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">
<div class="CapacityBar-remaining" ng-style="PercentRemainingStyle"></div> <div class="CapacityBar-remaining" ng-style="CapacityStyle"></div>
<div class="CapacityBar-consumed"></div> <div class="CapacityBar-consumed"></div>
</div> </div>

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

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

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

@@ -7,7 +7,7 @@
</div> </div>
<div class="List-details"> <div class="List-details">
<div class="Capacity-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> <capacity-bar capacity="instanceGroupCapacity"></capacity-bar>
<span class="Capacity-details--percentage">{{ instanceGroupCapacity }}%</span> <span class="Capacity-details--percentage">{{ instanceGroupCapacity }}%</span>
</div> </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})', uiSref: 'instanceGroups.instances.list({instance_group_id: instance_group.id})',
ngClass: "{'isActive' : isActive()}" ngClass: "{'isActive' : isActive()}"
}, },
percent_capacity_remaining: { consumed_capacity: {
label: i18n._('Capacity'), label: i18n._('Capacity'),
nosort: true, nosort: true,
}, },

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

@@ -7,7 +7,7 @@
</div> </div>
<div class="List-details"> <div class="List-details">
<div class="Capacity-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> <capacity-bar capacity="instanceCapacity"></capacity-bar>
<span class="Capacity-details--percentage">{{ instanceCapacity }}%</span> <span class="Capacity-details--percentage">{{ instanceCapacity }}%</span>
</div> </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'), templateUrl: templateUrl('./instance-groups/instances/instance-jobs/instance-jobs'),
controller: function($scope, $rootScope, instance) { controller: function($scope, $rootScope, instance) {
$scope.instanceName = instance.hostname; $scope.instanceName = instance.hostname;
$scope.instanceCapacity = instance.percent_capacity_remaining; $scope.instanceCapacity = instance.consumed_capacity;
$scope.instanceJobsRunning = instance.jobs_running; $scope.instanceJobsRunning = instance.jobs_running;
$rootScope.breadcrumb.instance_name = instance.hostname; $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}}" "{{'Name' | translate}}"
<i ng-if="columnNoSort !== 'true'" class="fa columnSortIcon fa-sort-up" ng-class="orderByIcon()"></i> <i ng-if="columnNoSort !== 'true'" class="fa columnSortIcon fa-sort-up" ng-class="orderByIcon()"></i>
</th> </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> <th id="instance-jobs_running-header" class="List-tableHeader list-header list-header-noSort" translate>
Running Jobs Running Jobs
</th> </th>
<th id="instance-consumed_capacity-header" class="List-tableHeader list-header list-header-noSort" translate>
Used Capacity
</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<!-- ngRepeat: instance in instances --> <!-- 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"> <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"> <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> <a ui-sref="instanceGroups.instances.list.job.list({instance_id: instance.id})" class="ng-binding">{{ instance.hostname }}</a>
<td class="List-tableCell List-tableCell--capacityRemainingColumn ng-binding">
<capacity-bar capacity="instance.percent_capacity_remaining"></capacity-bar><span>{{ instance.percent_capacity_remaining }}%</span>
</td> </td>
<td class="List-tableCell jobs_running-column ng-binding"> <td class="List-tableCell jobs_running-column ng-binding">
<a ui-sref="instanceGroups.instances.jobs({instance_group_id: $stateParams.instance_group_id})"> <a ui-sref="instanceGroups.instances.jobs({instance_group_id: $stateParams.instance_group_id})">
{{ instance.jobs_running }} {{ instance.jobs_running }}
</a> </a>
</td> </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> </tr>
</tbody> </tbody>
</table> </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', modalColumnClass: 'col-md-8',
uiSref: 'instanceGroups.instances.list.job({instance_id: instance.id})' uiSref: 'instanceGroups.instances.list.job({instance_id: instance.id})'
}, },
percent_capacity_remaining: { consumed_capacity: {
label: i18n._('Capacity'), label: i18n._('Capacity'),
nosort: true, 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'), templateUrl: templateUrl('./instance-groups/instance-group'),
controller: function($scope, $rootScope, instanceGroup) { controller: function($scope, $rootScope, instanceGroup) {
$scope.instanceGroupName = instanceGroup.name; $scope.instanceGroupName = instanceGroup.name;
$scope.instanceGroupCapacity = instanceGroup.percent_capacity_remaining; $scope.instanceGroupCapacity = instanceGroup.consumed_capacity;
$scope.instanceGroupJobsRunning = instanceGroup.jobs_running; $scope.instanceGroupJobsRunning = instanceGroup.jobs_running;
$rootScope.breadcrumb.instance_group_name = instanceGroup.name; $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}}" "{{'Name' | translate}}"
<i ng-if="columnNoSort !== 'true'" class="fa columnSortIcon fa-sort-up" ng-class="orderByIcon()"></i> <i ng-if="columnNoSort !== 'true'" class="fa columnSortIcon fa-sort-up" ng-class="orderByIcon()"></i>
</th> </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> <th id="instance_group-jobs_running-header" class="List-tableHeader list-header list-header-noSort" translate>
Running Jobs Running Jobs
</th> </th>
<th id="instance_group-consumed_capacity-header" class="List-tableHeader list-header list-header-noSort" translate>
Used Capacity
</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
@@ -41,14 +41,14 @@
<a ui-sref="instanceGroups.instances.list({instance_group_id: instance_group.id})" class="ng-binding" >{{ instance_group.name }}</a> <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> <span class="badge List-titleBadge">{{ instance_group.instances }}</span>
</td> </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"> <td class="List-tableCell jobs_running-column ng-binding">
<a ui-sref="instanceGroups.instances.jobs({instance_group_id: instance_group.id})"> <a ui-sref="instanceGroups.instances.jobs({instance_group_id: instance_group.id})">
{{ instance_group.jobs_running }} {{ instance_group.jobs_running }}
</a> </a>
</td> </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> </tr>
</tbody> </tbody>
</table> </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.ngClick = "linkoutInstanceGroup(instance_group)";
instanceGroupList.fields.name.columnClass = 'col-md-11 col-sm-11 col-xs-11'; 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; delete instanceGroupList.fields.jobs_running;
let html = `${GenerateList.build({ let html = `${GenerateList.build({