add Pods page in webportal

delete OPNFV Powered Guidelines page
add Pods page with create/list operations

Change-Id: Ib9fd2834bd9d54ee33600458a90e3aac76382589
Signed-off-by: SerenaFeng <feng.xiaowei@zte.com.cn>

9 files changed, 212 insertions, 504 deletions

diff --git a/utils/test/testapi/3rd_party/static/testapi-ui/app.js b/utils/test/testapi/3rd_party/static/testapi-ui/app.js
index bb31ab081..5f5b86159 100644
--- a/utils/test/testapi/3rd_party/static/testapi-ui/app.js
+++ b/utils/test/testapi/3rd_party/static/testapi-ui/app.js
@@ -26,6 +26,22 @@
         .module('testapiApp')
         .config(configureRoutes);
 
+    angular
+        .module('testapiApp')
+        .directive('dynamicModel', ['$compile', '$parse', function ($compile, $parse) {
+            return {
+                restrict: 'A',
+                terminal: true,
+                priority: 100000,
+                link: function (scope, elem) {
+                    var name = $parse(elem.attr('dynamic-model'))(scope);
+                    elem.removeAttr('dynamic-model');
+                    elem.attr('ng-model', name);
+                    $compile(elem)(scope);
+                }
+            };
+        }]);
+
     configureRoutes.$inject = ['$stateProvider', '$urlRouterProvider'];
 
     /**
@@ -43,10 +59,10 @@
                 url: '/about',
                 templateUrl: 'testapi-ui/components/about/about.html'
             }).
-            state('guidelines', {
-                url: '/guidelines',
-                templateUrl: 'testapi-ui/components/guidelines/guidelines.html',
-                controller: 'GuidelinesController as ctrl'
+            state('pods', {
+                url: '/pods',
+                templateUrl: 'testapi-ui/components/pods/pods.html',
+                controller: 'PodsController as ctrl'
             }).
             state('communityResults', {
                 url: '/community_results',
diff --git a/utils/test/testapi/3rd_party/static/testapi-ui/components/guidelines/guidelines.html b/utils/test/testapi/3rd_party/static/testapi-ui/components/guidelines/guidelines.html
deleted file mode 100644
index 1dd39ff17..000000000
--- a/utils/test/testapi/3rd_party/static/testapi-ui/components/guidelines/guidelines.html
+++ /dev/null
@@ -1,80 +0,0 @@
-<h3>OpenStack Powered&#8482; Guidelines</h3>
-
-<!-- Guideline Filters -->
-<div class="row">
-    <div class="col-md-3">
-        <strong>Version:</strong>
-        <!-- Slicing the version file name here gets rid of the '.json' file extension -->
-        <select ng-model="ctrl.version"
-                ng-change="ctrl.update()"
-                class="form-control"
-                ng-options="versionFile.slice(0,-5) for versionFile in ctrl.versionList">
-        </select>
-    </div>
-    <div class="col-md-4">
-        <strong>Target Program:</strong>
-        <span class="program-about"><a target="_blank" href="http://www.openstack.org/brand/interop/">About</a></span>
-        <select ng-model="ctrl.target" class="form-control" ng-change="ctrl.updateTargetCapabilities()">
-            <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-if="ctrl.guidelines">
-    <strong>Guideline Status:</strong>
-    {{ctrl.guidelines.status | capitalize}}
-</div>
-
-<div ng-show="ctrl.guidelines">
-    <strong>Corresponding OpenStack Releases:</strong>
-    <ul class="list-inline">
-        <li ng-repeat="release in ctrl.guidelines.releases">
-            {{release | capitalize}}
-        </li>
-    </ul>
-</div>
-
-<strong>Capability Status:</strong>
-<div class="checkbox">
-    <label>
-    <input type="checkbox" ng-model="ctrl.status.required">
-    <span class="required">Required</span>
-    </label>
-    <label>
-    <input type="checkbox" ng-model="ctrl.status.advisory">
-    <span class="advisory">Advisory</span>
-    </label>
-    <label>
-    <input type="checkbox" ng-model="ctrl.status.deprecated">
-    <span class="deprecated">Deprecated</span>
-    </label>
-    <label>
-    <input type="checkbox" ng-model="ctrl.status.removed">
-    <span class="removed">Removed</span>
-    </label>
-    <a class="test-list-dl pull-right"
-       title="Get a test list for capabilities matching selected statuses."
-       ng-click="ctrl.openTestListModal()">
-
-        Test List <span class="glyphicon glyphicon-file"></span>
-    </a>
-</div>
-<!-- End Capability Filters -->
-
-<p><small>Tests marked with <span class="glyphicon glyphicon-flag text-warning"></span> are tests flagged by Interop Working Group.</small></p>
-
-<!-- Loading animation divs -->
-<div cg-busy="{promise:ctrl.versionsRequest,message:'Loading versions'}"></div>
-<div cg-busy="{promise:ctrl.capsRequest,message:'Loading capabilities'}"></div>
-
-<!-- Get the version-specific template -->
-<div ng-include src="ctrl.detailsTemplate"></div>
-
-<div ng-show="ctrl.showError" class="alert alert-danger" role="alert">
-    <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
-    <span class="sr-only">Error:</span>
-    {{ctrl.error}}
-</div>
diff --git a/utils/test/testapi/3rd_party/static/testapi-ui/components/guidelines/guidelinesController.js b/utils/test/testapi/3rd_party/static/testapi-ui/components/guidelines/guidelinesController.js
deleted file mode 100644
index a6f4258a2..000000000
--- a/utils/test/testapi/3rd_party/static/testapi-ui/components/guidelines/guidelinesController.js
+++ /dev/null
@@ -1,322 +0,0 @@
-/*
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-(function () {
-    'use strict';
-
-    angular
-        .module('testapiApp')
-        .controller('GuidelinesController', GuidelinesController);
-
-    GuidelinesController.$inject = ['$http', '$uibModal', 'testapiApiUrl'];
-
-    /**
-     * TestAPI Guidelines Controller
-     * This controller is for the '/guidelines' page where a user can browse
-     * through tests belonging to Interop WG defined capabilities.
-     */
-    function GuidelinesController($http, $uibModal, testapiApiUrl) {
-        var ctrl = this;
-
-        ctrl.getVersionList = getVersionList;
-        ctrl.update = update;
-        ctrl.updateTargetCapabilities = updateTargetCapabilities;
-        ctrl.filterStatus = filterStatus;
-        ctrl.getObjectLength = getObjectLength;
-        ctrl.openTestListModal = openTestListModal;
-
-        /** The target OpenStack marketing program to show capabilities for. */
-        ctrl.target = 'platform';
-
-        /** The various possible capability statuses. */
-        ctrl.status = {
-            required: true,
-            advisory: false,
-            deprecated: false,
-            removed: false
-        };
-
-        /**
-         * The template to load for displaying capability details.
-         */
-        ctrl.detailsTemplate = 'components/guidelines/partials/' +
-                               'guidelineDetails.html';
-
-        /**
-         * Retrieve an array of available guideline files from the TestAPI
-         * API server, sort this array reverse-alphabetically, and store it in
-         * a scoped variable. The scope's selected version is initialized to
-         * the latest (i.e. first) version here as well. After a successful API
-         * call, the function to update the capabilities is called.
-         * Sample API return array: ["2015.03.json", "2015.04.json"]
-         */
-        function getVersionList() {
-            var content_url = testapiApiUrl + '/guidelines';
-            ctrl.versionsRequest =
-                $http.get(content_url).success(function (data) {
-                    ctrl.versionList = data.sort().reverse();
-                    // Default to the first approved guideline which is expected
-                    // to be at index 1.
-                    ctrl.version = ctrl.versionList[1];
-                    ctrl.update();
-                }).error(function (error) {
-                    ctrl.showError = true;
-                    ctrl.error = 'Error retrieving version list: ' +
-                        angular.toJson(error);
-                });
-        }
-
-        /**
-         * This will contact the TestAPI API server to retrieve the JSON
-         * content of the guideline file corresponding to the selected
-         * version.
-         */
-        function update() {
-            var content_url = testapiApiUrl + '/guidelines/' + ctrl.version;
-            ctrl.capsRequest =
-                $http.get(content_url).success(function (data) {
-                    ctrl.guidelines = data;
-                    ctrl.updateTargetCapabilities();
-                }).error(function (error) {
-                    ctrl.showError = true;
-                    ctrl.guidelines = null;
-                    ctrl.error = 'Error retrieving guideline content: ' +
-                        angular.toJson(error);
-                });
-        }
-
-        /**
-         * This will update the scope's 'targetCapabilities' object with
-         * capabilities belonging to the selected OpenStack marketing program
-         * (programs typically correspond to 'components' in the Interop WG
-         * schema). Each capability will have its status mapped to it.
-         */
-        function updateTargetCapabilities() {
-            ctrl.targetCapabilities = {};
-            var components = ctrl.guidelines.components;
-            var targetCaps = ctrl.targetCapabilities;
-
-            // The 'platform' target is comprised of multiple components, so
-            // we need to get the capabilities belonging to each of its
-            // components.
-            if (ctrl.target === 'platform') {
-                var platform_components = ctrl.guidelines.platform.required;
-
-                // This will contain status priority values, where lower
-                // values mean higher priorities.
-                var statusMap = {
-                    required: 1,
-                    advisory: 2,
-                    deprecated: 3,
-                    removed: 4
-                };
-
-                // For each component required for the platform program.
-                angular.forEach(platform_components, function (component) {
-                    // Get each capability list belonging to each status.
-                    angular.forEach(components[component],
-                        function (caps, status) {
-                            // For each capability.
-                            angular.forEach(caps, function(cap) {
-                                // If the capability has already been added.
-                                if (cap in targetCaps) {
-                                    // If the status priority value is less
-                                    // than the saved priority value, update
-                                    // the value.
-                                    if (statusMap[status] <
-                                        statusMap[targetCaps[cap]]) {
-                                        targetCaps[cap] = status;
-                                    }
-                                }
-                                else {
-                                    targetCaps[cap] = status;
-                                }
-                            });
-                        });
-                });
-            }
-            else {
-                angular.forEach(components[ctrl.target],
-                    function (caps, status) {
-                        angular.forEach(caps, function(cap) {
-                            targetCaps[cap] = status;
-                        });
-                    });
-            }
-        }
-
-        /**
-         * This filter will check if a capability's status corresponds
-         * to a status that is checked/selected in the UI. This filter
-         * is meant to be used with the ng-repeat directive.
-         * @param {Object} capability
-         * @returns {Boolean} True if capability's status is selected
-         */
-        function filterStatus(capability) {
-            var caps = ctrl.targetCapabilities;
-            return (ctrl.status.required &&
-                caps[capability.id] === 'required') ||
-                (ctrl.status.advisory &&
-                caps[capability.id] === 'advisory') ||
-                (ctrl.status.deprecated &&
-                caps[capability.id] === 'deprecated') ||
-                (ctrl.status.removed &&
-                caps[capability.id] === 'removed');
-        }
-
-        /**
-         * This function will get the length of an Object/dict based on
-         * the number of keys it has.
-         * @param {Object} object
-         * @returns {Number} length of object
-         */
-        function getObjectLength(object) {
-            return Object.keys(object).length;
-        }
-
-        /**
-         * This will open the modal that will show a list of all tests
-         * belonging to capabilities with the selected status(es).
-         */
-        function openTestListModal() {
-            $uibModal.open({
-                templateUrl: '/components/guidelines/partials' +
-                        '/testListModal.html',
-                backdrop: true,
-                windowClass: 'modal',
-                animation: true,
-                controller: 'TestListModalController as modal',
-                size: 'lg',
-                resolve: {
-                    version: function () {
-                        return ctrl.version.slice(0, -5);
-                    },
-                    target: function () {
-                        return ctrl.target;
-                    },
-                    status: function () {
-                        return ctrl.status;
-                    }
-                }
-            });
-        }
-
-        ctrl.getVersionList();
-    }
-
-    angular
-        .module('testapiApp')
-        .controller('TestListModalController', TestListModalController);
-
-    TestListModalController.$inject = [
-        '$uibModalInstance', '$http', 'version',
-        'target', 'status', 'testapiApiUrl'
-    ];
-
-    /**
-     * Test List Modal Controller
-     * This controller is for the modal that appears if a user wants to see the
-     * test list corresponding to Interop WG capabilities with the selected
-     * statuses.
-     */
-    function TestListModalController($uibModalInstance, $http, version,
-        target, status, testapiApiUrl) {
-
-        var ctrl = this;
-
-        ctrl.version = version;
-        ctrl.target = target;
-        ctrl.status = status;
-        ctrl.close = close;
-        ctrl.updateTestListString = updateTestListString;
-
-        ctrl.aliases = true;
-        ctrl.flagged = false;
-
-        // Check if the API URL is absolute or relative.
-        if (testapiApiUrl.indexOf('http') > -1) {
-            ctrl.url = testapiApiUrl;
-        }
-        else {
-            ctrl.url = location.protocol + '//' + location.host +
-                testapiApiUrl;
-        }
-
-        /**
-         * This function will close/dismiss the modal.
-         */
-        function close() {
-            $uibModalInstance.dismiss('exit');
-        }
-
-        /**
-         * This function will return a list of statuses based on which ones
-         * are selected.
-         */
-        function getStatusList() {
-            var statusList = [];
-            angular.forEach(ctrl.status, function(value, key) {
-                if (value) {
-                    statusList.push(key);
-                }
-            });
-            return statusList;
-        }
-
-        /**
-         * This will get the list of tests from the API and update the
-         * controller's test list string variable.
-         */
-        function updateTestListString() {
-            var statuses = getStatusList();
-            if (!statuses.length) {
-                ctrl.error = 'No tests matching selected criteria.';
-                return;
-            }
-            ctrl.testListUrl = [
-                ctrl.url, '/guidelines/', ctrl.version, '/tests?',
-                'target=', ctrl.target, '&',
-                'type=', statuses.join(','), '&',
-                'alias=', ctrl.aliases.toString(), '&',
-                'flag=', ctrl.flagged.toString()
-            ].join('');
-            ctrl.testListRequest =
-                $http.get(ctrl.testListUrl).
-                    then(function successCallback(response) {
-                        ctrl.error = null;
-                        ctrl.testListString = response.data;
-                        if (!ctrl.testListString) {
-                            ctrl.testListCount = 0;
-                        }
-                        else {
-                            ctrl.testListCount =
-                                ctrl.testListString.split('\n').length;
-                        }
-                    }, function errorCallback(response) {
-                        ctrl.testListString = null;
-                        ctrl.testListCount = null;
-                        if (angular.isObject(response.data) &&
-                            response.data.message) {
-                            ctrl.error = 'Error retrieving test list: ' +
-                                response.data.message;
-                        }
-                        else {
-                            ctrl.error = 'Unknown error retrieving test list.';
-                        }
-                    });
-        }
-
-        updateTestListString();
-    }
-})();
diff --git a/utils/test/testapi/3rd_party/static/testapi-ui/components/guidelines/partials/guidelineDetails.html b/utils/test/testapi/3rd_party/static/testapi-ui/components/guidelines/partials/guidelineDetails.html
deleted file mode 100644
index f020c9a09..000000000
--- a/utils/test/testapi/3rd_party/static/testapi-ui/components/guidelines/partials/guidelineDetails.html
+++ /dev/null
@@ -1,50 +0,0 @@
-<!--
-HTML for guidelines page for all OpenStack Powered (TM) guideline schemas
-This expects the JSON data of the guidelines file to be stored in scope
-variable 'guidelines'.
--->
-
-<ol ng-show="ctrl.guidelines" class="capabilities">
-  <li class="capability-list-item" ng-repeat="capability in ctrl.guidelines.capabilities | arrayConverter | filter:ctrl.filterStatus | orderBy:'id'">
-    <span class="capability-name">{{capability.id}}</span><br />
-    <em>{{capability.description}}</em><br />
-    Status: <span class="{{ctrl.targetCapabilities[capability.id]}}">{{ctrl.targetCapabilities[capability.id]}}</span><br />
-    <span ng-if="capability.project">Project: {{capability.project | capitalize}}<br /></span>
-    <a ng-click="showAchievements = !showAchievements">Achievements ({{capability.achievements.length}})</a><br />
-    <ol uib-collapse="!showAchievements" class="list-inline">
-        <li ng-repeat="achievement in capability.achievements">
-            {{achievement}}
-        </li>
-    </ol>
-
-    <a ng-click="showTests = !showTests">Tests ({{ctrl.getObjectLength(capability.tests)}})</a>
-    <ul uib-collapse="!showTests">
-        <li ng-if="ctrl.guidelines.schema === '1.2'" ng-repeat="test in capability.tests">
-           <span ng-class="{'glyphicon glyphicon-flag text-warning': capability.flagged.indexOf(test) > -1}"></span>
-           {{test}}
-        </li>
-        <li ng-if="ctrl.guidelines.schema > '1.2'" ng-repeat="(testName, testDetails) in capability.tests">
-           <span ng-class="{'glyphicon glyphicon-flag text-warning': testDetails.flagged}" title="{{testDetails.flagged.reason}}"></span>
-           {{testName}}
-           <div class="test-detail" ng-if="testDetails.aliases">
-               <strong>Aliases:</strong>
-               <ul><li ng-repeat="alias in testDetails.aliases">{{alias}}</li></ul>
-           </div>
-        </li>
-    </ul>
-  </li>
-</ol>
-
-<div ng-show="ctrl.guidelines" class="criteria">
-    <hr>
-    <h4><a ng-click="showCriteria = !showCriteria">Criteria</a></h4>
-    <div uib-collapse="showCriteria">
-        <ul>
-            <li ng-repeat="(key, criterion) in ctrl.guidelines.criteria">
-                <span class="criterion-name">{{criterion.name}}</span><br />
-                <em>{{criterion.Description}}</em><br />
-                Weight: {{criterion.weight}}
-            </li>
-        </ul>
-    </div>
-</div>
diff --git a/utils/test/testapi/3rd_party/static/testapi-ui/components/guidelines/partials/testListModal.html b/utils/test/testapi/3rd_party/static/testapi-ui/components/guidelines/partials/testListModal.html
deleted file mode 100644
index 5b1d698d5..000000000
--- a/utils/test/testapi/3rd_party/static/testapi-ui/components/guidelines/partials/testListModal.html
+++ /dev/null
@@ -1,46 +0,0 @@
-<div class="modal-content">
-    <div class="modal-header">
-        <button type="button" class="close" aria-hidden="true" ng-click="modal.close()">&times;</button>
-        <h4>Test List ({{modal.testListCount}})</h4>
-        <p>Use this test list with <a title="testapi-client" target="_blank"href="https://github.com/openstack/testapi-client">testapi-client</a>
-           to run only tests in the {{modal.version}} OpenStack Powered&#8482; guideline from capabilities with the following statuses:
-        </p>
-        <ul class="list-inline">
-            <li class="required" ng-if="modal.status.required"> Required</li>
-            <li class="advisory" ng-if="modal.status.advisory"> Advisory</li>
-            <li class="deprecated" ng-if="modal.status.deprecated"> Deprecated</li>
-            <li class="removed" ng-if="modal.status.removed"> Removed</li>
-        </ul>
-        <div class="checkbox checkbox-test-list">
-            <label><input type="checkbox" ng-model="modal.aliases" ng-change="modal.updateTestListString()">Aliases</label>
-            <span class="glyphicon glyphicon-info-sign info-hover" aria-hidden="true"
-                  title="Include test aliases as tests may have been renamed over time. It does not hurt to include these."></span>
-            &nbsp;
-            <label><input type="checkbox" ng-model="modal.flagged" ng-change="modal.updateTestListString()">Flagged</label>
-            <span class="glyphicon glyphicon-info-sign info-hover" aria-hidden="true"
-                  title="Include flagged tests.">
-            </span>
-        </div>
-        <p ng-hide="modal.error"> Alternatively, get the test list directly from the API on your CLI:</p>
-        <code ng-hide="modal.error">wget "{{modal.testListUrl}}" -O {{modal.version}}-test-list.txt</code>
-    </div>
-    <div class="modal-body tests-modal-content">
-        <div cg-busy="{promise:modal.testListRequest,message:'Loading'}"></div>
-        <div ng-show="modal.error" class="alert alert-danger" role="alert">
-            <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
-            <span class="sr-only">Error:</span>
-            {{modal.error}}
-        </div>
-        <div class="form-group">
-            <textarea class="form-control" rows="16" id="tests" wrap="off">{{modal.testListString}}</textarea>
-        </div>
-    </div>
-    <div class="modal-footer">
-        <a target="_blank" href="{{modal.testListUrl}}" download="{{modal.version + '-test-list.txt'}}">
-            <button class="btn btn-primary" ng-if="modal.testListCount > 0" type="button">
-                Download
-            </button>
-        </a>
-        <button class="btn btn-primary" type="button" ng-click="modal.close()">Close</button>
-    </div>
-</div>
diff --git a/utils/test/testapi/3rd_party/static/testapi-ui/components/pods/pods.html b/utils/test/testapi/3rd_party/static/testapi-ui/components/pods/pods.html
new file mode 100644
index 000000000..cdfcfaf36
--- /dev/null
+++ b/utils/test/testapi/3rd_party/static/testapi-ui/components/pods/pods.html
@@ -0,0 +1,71 @@
+<h3>{{ctrl.pageHeader}}</h3>
+<p>{{ctrl.pageParagraph}}</p>
+<div class="row" style="margin-bottom:24px;"></div>
+
+<div class="pod-create">
+    <h4>Create</h4>
+    <div class="row">
+        <div ng-repeat="require in ctrl.createRequirements">
+            <div class="create-pod" style="margin-left:24px;">
+                <p class="input-group">
+                    <label for="cpid">{{require.label|capitalize}}: </label>
+                    <a ng-if="require.type == 'select'">
+                        <select dynamic-model="'ctrl.' + require.label" ng-options="option for option in require.selects"></select>
+                    </a>
+                    <a ng-if="require.type == 'text'">
+                        <input type="text" dynamic-model="'ctrl.' + require.label"/>
+                    </a>
+                    <a ng-if="require.type == 'textarea'">
+                        <textarea rows="2" cols="50" dynamic-model="'ctrl.' + require.label">
+                        </textarea>
+                    </a>
+                </p>
+            </div>
+        </div>
+
+        <div class="col-md-3" style="margin-top:12px; margin-left:8px;">
+            <button type="submit" class="btn btn-primary" ng-click="ctrl.create()">Create</button>
+        </div>
+    </div>
+</div>
+
+<div class="pods-filters" style="margin-top:36px;">
+    <h4>Filters</h4>
+    <div class="row">
+        <div class="col-md-3" style="margin-top:12px; margin-left:8px;">
+            <button type="submit" class="btn btn-primary" ng-click="ctrl.update()">Filter</button>
+            <button type="submit" class="btn btn-primary btn-danger" ng-click="ctrl.clearFilters()">Clear</button>
+        </div>
+    </div>
+</div>
+
+<div cg-busy="{promise:ctrl.authRequest,message:'Loading'}"></div>
+<div cg-busy="{promise:ctrl.podsRequest,message:'Loading'}"></div>
+
+<div ng-show="ctrl.data" class="pods-table" style="margin-top:24px; margin-left:8px;">
+    <table ng-data="ctrl.data.pods" ng-show="ctrl.data" class="table table-striped table-hover">
+        <tbody>
+            <tr ng-repeat-start="(index, pod) in ctrl.data.pods">
+                <td>
+                    <a href="#" ng-click="showPod = !showPod">{{pod.name}}</a>
+                    <div class="show-pod" ng-class="{ 'hidden': ! showPod }" style="margin-left:24px;">
+                        <p>
+                            role: {{pod.role}}<br>
+                            mode: {{pod.mode}}<br>
+                            create_date: {{pod.creation_date}}<br>
+                            details: {{pod.details}}
+                        </p>
+                    </div>
+                </td>
+            </tr>
+            <tr ng-repeat-end=>
+            </tr>
+        </tbody>
+    </table>
+</div>
+
+<div ng-show="ctrl.showError" class="alert alert-danger" role="alert">
+    <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
+    <span class="sr-only">Error:</span>
+    {{ctrl.error}}
+</div>
diff --git a/utils/test/testapi/3rd_party/static/testapi-ui/components/pods/podsController.js b/utils/test/testapi/3rd_party/static/testapi-ui/components/pods/podsController.js
new file mode 100644
index 000000000..53e8b1eff
--- /dev/null
+++ b/utils/test/testapi/3rd_party/static/testapi-ui/components/pods/podsController.js
@@ -0,0 +1,119 @@
+/*
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+(function () {
+    'use strict';
+
+    angular
+        .module('testapiApp')
+        .controller('PodsController', PodsController);
+
+    PodsController.$inject = [
+        '$scope', '$http', '$filter', '$state', 'testapiApiUrl','raiseAlert'
+    ];
+
+    /**
+     * TestAPI Pods Controller
+     * This controller is for the '/pods' page where a user can browse
+     * through pods declared in TestAPI.
+     */
+    function PodsController($scope, $http, $filter, $state, testapiApiUrl,
+        raiseAlert) {
+        var ctrl = this;
+
+        ctrl.url = testapiApiUrl + '/pods';
+
+        ctrl.create = create;
+        ctrl.update = update;
+        ctrl.open = open;
+        ctrl.clearFilters = clearFilters;
+
+        ctrl.roles = ['community-ci', 'production-ci'];
+        ctrl.modes = ['metal', 'virtual'];
+        ctrl.createRequirements = [
+            {label: 'name', type: 'text', required: true},
+            {label: 'mode', type: 'select', selects: ctrl.modes},
+            {label: 'role', type: 'select', selects: ctrl.roles},
+            {label: 'details', type: 'textarea', required: false}
+        ];
+
+        ctrl.name = '';
+        ctrl.role = 'community-ci';
+        ctrl.mode = 'metal';
+        ctrl.details = '';
+
+        ctrl.pageHeader = 'Pods';
+        ctrl.pageParagraph = 'This page is used to create or query pods.';
+
+        /**
+         * This is called when the date filter calendar is opened. It
+         * does some event handling, and sets a scope variable so the UI
+         * knows which calendar was opened.
+         * @param {Object} $event - The Event object
+         * @param {String} openVar - Tells which calendar was opened
+         */
+        function open($event, openVar) {
+            $event.preventDefault();
+            $event.stopPropagation();
+            ctrl[openVar] = true;
+        }
+
+        /**
+         * This function will clear all filters and update the results
+         * listing.
+         */
+        function clearFilters() {
+            ctrl.update();
+        }
+
+        /**
+         * This will contact the TestAPI to create a new pod.
+         */
+        function create() {
+            ctrl.showError = false;
+            var pods_url = ctrl.url;
+            var body = {
+                name: ctrl.name,
+                mode: ctrl.mode,
+                role: ctrl.role,
+                details: ctrl.details
+            };
+
+            ctrl.podsRequest =
+                $http.post(pods_url, body).error(function (error) {
+                    ctrl.showError = true;
+                    ctrl.error =
+                        'Error creating the new pod from server: ' +
+                        angular.toJson(error);
+                });
+        }
+
+        /**
+         * This will contact the TestAPI to get a listing of declared pods.
+         */
+        function update() {
+            ctrl.showError = false;
+            ctrl.podsRequest =
+                $http.get(ctrl.url).success(function (data) {
+                    ctrl.data = data;
+                }).error(function (error) {
+                    ctrl.data = null;
+                    ctrl.showError = true;
+                    ctrl.error =
+                        'Error retrieving pods from server: ' +
+                        angular.toJson(error);
+                });
+        }
+    }
+})();
diff --git a/utils/test/testapi/3rd_party/static/testapi-ui/index.html b/utils/test/testapi/3rd_party/static/testapi-ui/index.html
index 46ccc61b8..2d7399f93 100644
--- a/utils/test/testapi/3rd_party/static/testapi-ui/index.html
+++ b/utils/test/testapi/3rd_party/static/testapi-ui/index.html
@@ -40,7 +40,7 @@
         <script src="testapi-ui/shared/header/headerController.js"></script>
         <script src="testapi-ui/shared/alerts/alertModalFactory.js"></script>
         <script src="testapi-ui/shared/alerts/confirmModalFactory.js"></script>
-        <script src="testapi-ui/components/guidelines/guidelinesController.js"></script>
+        <script src="testapi-ui/components/pods/podsController.js"></script>
         <script src="testapi-ui/components/results/resultsController.js"></script>
         <script src="testapi-ui/components/results-report/resultsReportController.js"></script>
         <script src="testapi-ui/components/profile/profileController.js"></script>
diff --git a/utils/test/testapi/3rd_party/static/testapi-ui/shared/header/header.html b/utils/test/testapi/3rd_party/static/testapi-ui/shared/header/header.html
index 85c33b68d..f5b2414c4 100644
--- a/utils/test/testapi/3rd_party/static/testapi-ui/shared/header/header.html
+++ b/utils/test/testapi/3rd_party/static/testapi-ui/shared/header/header.html
@@ -17,7 +17,7 @@ TestAPI
           <ul class="nav navbar-nav">
             <li ng-class="{ active: header.isActive('/')}"><a ui-sref="home">Home</a></li>
             <li ng-class="{ active: header.isActive('/about')}"><a ui-sref="about">About</a></li>
-            <li ng-class="{ active: header.isActive('/guidelines')}"><a ui-sref="guidelines">OPNFV Powered&#8482; Guidelines</a></li>
+            <li ng-class="{ active: header.isActive('/pods')}"><a ui-sref="pods">Pods</a></li>
             <li ng-class="{ active: header.isActive('/community_results')}"><a ui-sref="communityResults">Community Results</a></li>
             <!--
             <li ng-class="{ active: header.isCatalogActive('public')}" class="dropdown" uib-dropdown>