move self-developed front-end codes to ui/

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

2 files changed, 198 insertions, 0 deletions

diff --git a/testapi/opnfv_testapi/ui/components/pods/pods.html b/testapi/opnfv_testapi/ui/components/pods/pods.html
new file mode 100644
index 0000000..22f2934
--- /dev/null
+++ b/testapi/opnfv_testapi/ui/components/pods/pods.html
@@ -0,0 +1,76 @@
+<h3>Pods</h3>
+<p>This page is used to create or query pods.<br>
+    Querying pods is open to everybody.<br>
+    But only login users are granted the privilege to create the new pod.
+</p>
+
+<div class="row" style="margin-bottom:24px;"></div>
+
+<div class="pod-create" ng-class="{ 'hidden': ! auth.isAuthenticated }">
+    <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>
+                            owner: {{pod.owner}}<br>
+                            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>
+<br>
+<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/testapi/opnfv_testapi/ui/components/pods/podsController.js b/testapi/opnfv_testapi/ui/components/pods/podsController.js
new file mode 100644
index 0000000..489fa8a
--- /dev/null
+++ b/testapi/opnfv_testapi/ui/components/pods/podsController.js
@@ -0,0 +1,122 @@
+/*
+ * 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 = '';
+
+        /**
+         * 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;
+
+            if(ctrl.name != ""){
+                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 (data, status) {
+                        ctrl.showError = true;
+                        if(status == 403){
+                            ctrl.error =
+                                'Error creating the new pod from server: Pod\'s name already exists'
+                        }
+                    });
+            }
+            else{
+                ctrl.showError = true;
+                ctrl.error = 'Name is missing.'
+            }
+        }
+
+        /**
+         * 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);
+                });
+        }
+    }
+})();