Fix static aria-valuenow in utilization bar charts

The utilization bar charts are rendering `aria-value` now attributes,
but they contain static (therefore mostly wrong) values.

This patch makes them dynamic, introduces missing ones in the default
layout and adds tests.

Author: huerlisi

src/charts/utilization-bar/utilization-bar-chart.html

@@ -2,14 +2,14 @@
   <span ng-if="!layout || layout.type === 'regular'">
     <div ng-if="chartTitle" class="progress-description">{{chartTitle}}</div>
     <div class="progress progress-label-top-right" ng-if="chartData.dataAvailable !== false">
-      <div class="progress-bar" role="progressbar" ng-class="{'animate': animate,
+      <div class="progress-bar" role="progressbar" aria-valuenow="{{chartData.percentageUsed}}" aria-valuemin="0" aria-valuemax="100" ng-class="{'animate': animate,
            'progress-bar-success': isOk, 'progress-bar-danger': isError, 'progress-bar-warning': isWarn}"
            ng-style="{width:chartData.percentageUsed + '%'}" tooltip="{{chartData.percentageUsed}}% Used" >
         <span ng-if="chartFooter" ng-bind-html="chartFooter"></span>
         <span ng-if="!chartFooter && (!footerLabelFormat || footerLabelFormat === 'actual')"><strong>{{chartData.used}} of {{chartData.total}} {{units}}</strong> Used</span>
         <span ng-if="!chartFooter && footerLabelFormat === 'percent'"><strong>{{chartData.percentageUsed}}%</strong> Used</span>
       </div>
-      <div class="progress-bar progress-bar-remaining" role="progressbar" aria-valuenow="5" aria-valuemin="0" aria-valuemax="100"
+      <div class="progress-bar progress-bar-remaining" role="progressbar" aria-valuenow="{{100 - chartData.percentageUsed}}" aria-valuemin="0" aria-valuemax="100"
            ng-style="{width:(100 - chartData.percentageUsed) + '%'}" tooltip="{{100 - chartData.percentageUsed}}% Available">
       </div>
     </div>
@@ -19,14 +19,14 @@
          ng-style="{'padding-left':layout.titleLabelWidth, 'padding-right':layout.footerLabelWidth}">
       <div ng-if="chartTitle" class="progress-description"  ng-style="{'max-width':layout.titleLabelWidth}">{{chartTitle}}</div>
       <div class="progress" ng-if="chartData.dataAvailable !== false">
-        <div class="progress-bar" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"
+        <div class="progress-bar" role="progressbar" aria-valuenow="{{chartData.percentageUsed}}" aria-valuemin="0" aria-valuemax="100"
              ng-class="{'animate': animate, 'progress-bar-success': isOk, 'progress-bar-danger': isError, 'progress-bar-warning': isWarn}"
              ng-style="{width:chartData.percentageUsed + '%'}" tooltip="{{chartData.percentageUsed}}% Used">
           <span ng-if="chartFooter" ng-bind-html="chartFooter"></span>
           <span ng-if="(!chartFooter) && (!footerLabelFormat || footerLabelFormat === 'actual')" ng-style="{'max-width':layout.footerLabelWidth}"><strong>{{chartData.used}} {{units}}</strong> Used</span>
           <span ng-if="(!chartFooter) && footerLabelFormat === 'percent'" ng-style="{'max-width':layout.footerLabelWidth}"><strong>{{chartData.percentageUsed}}%</strong> Used</span>
         </div>
-        <div class="progress-bar progress-bar-remaining" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"
+        <div class="progress-bar progress-bar-remaining" role="progressbar" aria-valuenow="{{100 - chartData.percentageUsed}}" aria-valuemin="0" aria-valuemax="100"
              ng-style="{width:(100 - chartData.percentageUsed) + '%'}" tooltip="{{100 - chartData.percentageUsed}}% Available">
         </div>
       </div>

test/charts/utilization-bar/utilization-bar.spec.js

@@ -38,6 +38,13 @@ describe('Directive: pfUtilizationBarChart', function() {
     expect(utilizationBar).toBe("80%");
   });
 
+  it("should set aria-valuenow values", function() {
+    remaining = angular.element(element).find('.progress-bar-remaining');
+    used = angular.element(element).find('.progress-bar').not('.progress-bar-remaining');
+    expect(remaining.attr('aria-valuenow')).toBe("20");
+    expect(used.attr('aria-valuenow')).toBe("80");
+  });
+
   it("should set the charts title and usage label", function() {
     title = angular.element(element).find('.progress-description').html();
     expect(title).toBe("CPU Usage");