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

tweaks to styling of capacity bar

Browse Source
This commit is contained in:
John Mitchell 2017-09-21 11:07:50 -04:00
parent 2306c34689
commit 25e503219f
No known key found for this signature in database
GPG Key ID: FE6A9B5BD4EB5C94
8 changed files with 25 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
awx/ui/client/src/instance-groups/capacity-bar/capacity-bar.block.less
View File

@ -1,8 +1,10 @@
capacity-bar {
width: 50%;
margin-right: 10px;
margin-right: 25px;
min-width: 100px;
display: flex;
align-items: center;
.CapacityBar {
background-color: @default-bg;
@ -13,6 +15,7 @@ capacity-bar {
width: 100%;
border-radius: 100vw;
overflow: hidden;
margin-right: 10px;
}
.CapacityBar-remaining {
@ -31,4 +34,8 @@ capacity-bar {
background-color: @d7grey;
}
}
.Capacity-details--percentage {
color: @default-data-txt;
}
}

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

@ -19,9 +19,19 @@ export default ['templateUrl',
}, true);
scope.$watch('capacity', function() {
scope.CapacityStyle = {
'flex-grow': scope.capacity * 0.01
};
if (scope.totalCapacity !== 0) {
scope.CapacityStyle = {
'flex-grow': scope.capacity * 0.01
};
scope.consumedCapacity = `${scope.capacity}%`;
} else {
scope.CapacityStyle = {
'flex-grow': 1
};
scope.consumedCapacity = null;
}
}, true);
}
};

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

@ -1,5 +1,6 @@
<div class="CapacityBar"
ng-class="{'CapacityBar--offline': isOffline">
ng-class="{'CapacityBar--offline': isOffline}">
<div class="CapacityBar-remaining" ng-style="CapacityStyle"></div>
<div class="CapacityBar-consumed"></div>
</div>
<span class="Capacity-details--percentage" ng-show="consumedCapacity">{{ consumedCapacity }}</span>

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

@ -24,10 +24,6 @@
margin: 0 10px 0 0;
width: 100px;
}
.Capacity-details--percentage {
color: @default-data-txt;
}
}
.RunningJobs-details {

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

@ -9,7 +9,6 @@
<div class="Capacity-details">
<p class="Capacity-details--label" translate>Used Capacity</p>
<capacity-bar capacity="instanceGroupCapacity" total-capacity="instanceGroupTotalCapacity"></capacity-bar>
<span class="Capacity-details--percentage">{{ instanceGroupCapacity }}%</span>
</div>
<div class="RunningJobs-details">
<p class="RunningJobs-details--label" translate>Running Jobs</p>

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

@ -9,7 +9,6 @@
<div class="Capacity-details">
<p class="Capacity-details--label" translate>Used Capacity</p>
<capacity-bar capacity="instanceCapacity" total-capacity="instanceTotalCapacity"></capacity-bar>
<span class="Capacity-details--percentage">{{ instanceCapacity }}%</span>
</div>
<div class="RunningJobs-details">
<p class="RunningJobs-details--label" translate>Running Jobs</p>

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

@ -35,7 +35,7 @@
</a>
</td>
<td class="List-tableCell List-tableCell--capacityColumn ng-binding">
<capacity-bar capacity="instance.consumed_capacity" total-capacity="instance.capacity"></capacity-bar><span>{{ instance.consumed_capacity }}%</span>
<capacity-bar capacity="instance.consumed_capacity" total-capacity="instance.capacity">
</td>
</tr>
</tbody>

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

@ -47,7 +47,7 @@
</a>
</td>
<td class="List-tableCell List-tableCell--capacityColumn ng-binding">
<capacity-bar capacity="instance_group.consumed_capacity" total-capacity="instance_group.capacity"></capacity-bar><span>{{ instance_group.consumed_capacity }}%</span>
<capacity-bar capacity="instance_group.consumed_capacity" total-capacity="instance_group.capacity"></capacity-bar>
</td>
</tr>
</tbody>