Show releases for selected capabilities version

The releases that each version corresponds to should be
information that is displayed.

Change-Id: Ie297a532c5d7d48e741b53c7974cd57956a00462

refstack-ui/app/assets/css/style.css

@@ -102,6 +102,8 @@ h1, h2, h3, h4, h5, h6 {
 
 .program-about {
   font-size: .8em;
+  padding-top: .3em;
+  float: right;
 }
 
 .jumbotron .left {
@@ -153,4 +155,4 @@ h1, h2, h3, h4, h5, h6 {
   .jumbotron.openstack-intro {
     padding: 40px;
   }
-}
+}

refstack-ui/app/components/capabilities/capabilities.html

@@ -1,17 +1,31 @@
 <h3>DefCore Capabilities</h3>
-<strong>Version:</strong>
+
-<select ng-model="version" ng-change="update()">
+<div class="row">
-    <option ng-repeat="versionFile in versionList" value="{{versionFile}}">{{versionFile.slice(0, -5)}}</option>
+    <div class="col-md-3">
-</select>
+        <strong>Version:</strong>
-<br /><br />
+        <select ng-model="version" ng-change="update()" class="form-control">
-<strong>Target Program:</strong>
+            <option ng-repeat="versionFile in versionList" value="{{versionFile}}">{{versionFile.slice(0, -5)}}</option>
-<select ng-model="target" >
+        </select>
-    <option value="platform">OpenStack Powered Platform</option>
+    </div>
-    <option value="compute">OpenStack Powered Compute</option>
+    <div class="col-md-4">
-    <option value="object">OpenStack Powered Object Storage</option>
+        <strong>Target Program:</strong>
-</select>
+        <span class="program-about"><a target="_blank" href="http://www.openstack.org/brand/interop/">About</a></span>
-<span class="program-about"><a target="_blank" href="http://www.openstack.org/brand/interop/">About</a></span>
+        <select ng-model="target" class="form-control">
-<br /><br />
+            <option value="platform">OpenStack Powered Platform</option>
+            <option value="compute">OpenStack Powered Compute</option>
+            <option value="object">OpenStack Powered Object Storage</option>
+        </select>
+    </div>
+</div>
+<br />
+<div ng-show="capabilities">
+    <strong>Corresponding OpenStack Releases:</strong>
+    <ul class="list-inline">
+        <li ng-repeat="release in capabilities.releases">
+            {{release | capitalize}}
+        </li>
+    </ul>
+</div>
 
 <strong>Capability Status:</strong>
 <div class="checkbox">

refstack-ui/app/components/results-report/resultsReport.html

@@ -32,6 +32,15 @@
             </select>
         </div>
     </div>
+
+    <br />
+    <strong>Corresponding OpenStack Releases:</strong>
+    <ul class="list-inline">
+        <li ng-repeat="release in capabilityData.releases">
+            {{release | capitalize}}
+        </li>
+    </ul>
+
     <strong>Status:</strong>
     <div class="progress">
         <div class="progress-bar"

refstack-ui/app/shared/filters.js

@@ -16,3 +16,14 @@ refstackApp.filter('arrayConverter', function () {
         return array;
     };
 });
+
+/**
+ *  Angular filter that will capitalize the first letter of a string.
+ */
+refstackApp.filter('capitalize', function() {
+    'use strict';
+
+    return function (string) {
+        return string.substring(0, 1).toUpperCase() + string.substring(1);
+    };
+});

refstack-ui/tests/unit/FilterSpec.js

@@ -17,4 +17,21 @@ describe('Refstack filters', function () {
             expect($filter(object)).toEqual(expected);
         });
     });
+
+    describe('Filter: capitalize', function() {
+        var $filter;
+        beforeEach(module('refstackApp'));
+        beforeEach(inject(function(_$filter_) {
+            $filter = _$filter_('capitalize');
+        }));
+
+        it('should capitalize the first letter', function () {
+            var string1 = 'somestring';
+            var string2 = 'someString';
+            var string3 = 'SOMESTRING';
+            expect($filter(string1)).toEqual('Somestring');
+            expect($filter(string2)).toEqual('SomeString');
+            expect($filter(string3)).toEqual(string3);
+        });
+    });
 });