summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorthuva4 <tharma.thuva@gmail.com>2017-12-05 05:13:32 +0530
committerthuva4 <tharma.thuva@gmail.com>2017-12-05 05:47:00 +0530
commit41ff15069d96ea1040cb457b39f909967dabb8bc (patch)
treecc60bf106552ccb7223434cb387fdb0df258ae78
parentae88dfd997ae0516ec097033c378740ea8580483 (diff)
Add view option in pods page
Created the view function for the pods page. It will redirect to pods/:name page where user can see the more details about the pod. Change-Id: I0d6c06098fd78ecca523a49e2bb532001adaeaa8 Signed-off-by: thuva4 <tharma.thuva@gmail.com>
-rw-r--r--testapi/3rd_party/static/testapi-ui/assets/css/style.css24
-rw-r--r--testapi/opnfv_testapi/ui/app.js5
-rw-r--r--testapi/opnfv_testapi/ui/components/pods/pod/pod.html47
-rw-r--r--testapi/opnfv_testapi/ui/components/pods/pod/podController.js56
-rw-r--r--testapi/opnfv_testapi/ui/components/pods/pods.html22
-rw-r--r--testapi/opnfv_testapi/ui/components/pods/podsController.js5
-rw-r--r--testapi/opnfv_testapi/ui/index.html1
7 files changed, 140 insertions, 20 deletions
diff --git a/testapi/3rd_party/static/testapi-ui/assets/css/style.css b/testapi/3rd_party/static/testapi-ui/assets/css/style.css
index 3811638..feed1b6 100644
--- a/testapi/3rd_party/static/testapi-ui/assets/css/style.css
+++ b/testapi/3rd_party/static/testapi-ui/assets/css/style.css
@@ -243,23 +243,23 @@ a.glyphicon {
vertical-align: middle;
}
-.podTable-col {
+.podsTable-col {
font-size: 20px !important;
}
-.podTable-col a:not(:first-child) {
+.podsTable-col a:not(:first-child) {
margin-left: 10px;
}
-.podTable {
+.podsTable {
padding: 10px 0;
margin: 10px 0;
background-color: #fff;
}
-.podTable .search {
+.podsTable .search {
width: 150px;
}
-.podTable >div {
+.podsTable >div {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
@@ -268,4 +268,16 @@ a.glyphicon {
-ms-flex-align: center;
align-items: right;
margin: 10px 0;
-} \ No newline at end of file
+}
+
+.podsTableTd {
+ border-top:none!important;
+ float: right!important;
+ padding-bottom:0px!important;
+ font-weight:bold;
+}
+
+.podsTableLeftTd{
+ border-top:none!important;
+ padding-bottom:0px!important;
+}
diff --git a/testapi/opnfv_testapi/ui/app.js b/testapi/opnfv_testapi/ui/app.js
index 77fb1fb..28e5810 100644
--- a/testapi/opnfv_testapi/ui/app.js
+++ b/testapi/opnfv_testapi/ui/app.js
@@ -64,6 +64,11 @@
templateUrl: 'testapi-ui/components/pods/pods.html',
controller: 'PodsController as ctrl'
}).
+ state('pod', {
+ url: '/pods/:name',
+ templateUrl: 'testapi-ui/components/pods/pod/pod.html',
+ controller: 'PodController as ctrl'
+ }).
state('projects', {
url: '/projects',
templateUrl: 'testapi-ui/components/projects/projects.html',
diff --git a/testapi/opnfv_testapi/ui/components/pods/pod/pod.html b/testapi/opnfv_testapi/ui/components/pods/pod/pod.html
new file mode 100644
index 0000000..b78eb2d
--- /dev/null
+++ b/testapi/opnfv_testapi/ui/components/pods/pod/pod.html
@@ -0,0 +1,47 @@
+<legend>Pod</legend>
+<div style="padding-right:0px">
+ <div class="table-responsive">
+ <table class="table" ng-data="ctrl.data.pods">
+ <tbody>
+ <tr style="padding:9px">
+ <td class="podsTableTd">Id&nbsp;:</td>
+ <td class="podsTableLeftTd">{{ctrl.data._id}}</td>
+ </tr>
+ <tr style="padding:9px">
+ <td class="podsTableTd">Name&nbsp;:</td>
+ <td width="90%" class="podsTableLeftTd">{{ctrl.data.name}}</td>
+ </tr>
+ <tr style="padding:9px">
+ <td class="podsTableTd">Owner&nbsp;:</td>
+ <td width="90%" class="podsTableLeftTd">{{ctrl.data.owner}}</td>
+ </tr>
+ <tr style="padding:9px">
+ <td class="podsTableTd">Role&nbsp;:</td>
+ <td width="90%" class="podsTableLeftTd">{{ctrl.data.role}}</td>
+ </tr>
+ <tr style="padding:9px">
+ <td class="podsTableTd">Mode&nbsp;:</td>
+ <td width="90%" class="podsTableLeftTd">{{ctrl.data.mode}}</td>
+ </tr>
+ <tr style="padding:9px">
+ <td class="podsTableTd">Created&nbsp;at&nbsp;:</td>
+ <td width="90%" class="podsTableLeftTd">{{ctrl.data['creation_date']}}</td>
+ </tr>
+ <tr style="padding:9px">
+ <td class="podsTableTd">Details&nbsp;:</td>
+ <td width="90%" class="podsTableLeftTd">{{ctrl.data.details}}</td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+</div>
+<div class="col-md-12">
+ <div ng-show="ctrl.showError" class="col-md-12 alert alert-danger" role="alert">
+ <span class="pull-right">&nbsp;{{ctrl.error}}</span>
+ <span class="glyphicon glyphicon-exclamation-sign pull-right" aria-hidden="true" >Error:</span>
+ </div>
+ <div ng-show="ctrl.showSuccess" class="col-md-12 alert alert-success" role="alert">
+ <span class="pull-right">&nbsp;{{ctrl.success}}</span>
+ <span class="glyphicon glyphicon-ok pull-right" aria-hidden="true"></span>
+ </div>
+ </div> \ No newline at end of file
diff --git a/testapi/opnfv_testapi/ui/components/pods/pod/podController.js b/testapi/opnfv_testapi/ui/components/pods/pod/podController.js
new file mode 100644
index 0000000..a2e18e8
--- /dev/null
+++ b/testapi/opnfv_testapi/ui/components/pods/pod/podController.js
@@ -0,0 +1,56 @@
+/*
+ * 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('PodController', PodController);
+
+ PodController.$inject = [
+ '$scope', '$http', '$filter', '$state', '$window', '$uibModal', 'testapiApiUrl','raiseAlert',
+ 'confirmModal'
+ ];
+
+ /**
+ * TestAPI Pod Controller
+ * This controller is for the '/pod' page where a user can browse
+ * through pod declared in TestAPI.
+ */
+ function PodController($scope, $http, $filter, $state, $window, $uibModal, testapiApiUrl,
+ raiseAlert, confirmModal) {
+ var ctrl = this;
+ ctrl.url = testapiApiUrl + '/pods';
+ ctrl.name = $state.params['name'];
+ ctrl.loadDetails = loadDetails
+
+ /**
+ *Contact the testapi and retrevie the pod details
+ */
+ function loadDetails(){
+ var podUrl = ctrl.url + '/' + ctrl.name;
+ ctrl.showError = false;
+ ctrl.podsRequest =
+ $http.get(podUrl).success(function (data) {
+ ctrl.data = data;
+ }).catch(function (error) {
+ ctrl.data = null;
+ ctrl.showError = true;
+ ctrl.error = error.statusText;
+ });
+ }
+ ctrl.loadDetails();
+ }
+})(); \ No newline at end of file
diff --git a/testapi/opnfv_testapi/ui/components/pods/pods.html b/testapi/opnfv_testapi/ui/components/pods/pods.html
index ca0458b..02f4a48 100644
--- a/testapi/opnfv_testapi/ui/components/pods/pods.html
+++ b/testapi/opnfv_testapi/ui/components/pods/pods.html
@@ -7,7 +7,7 @@
<div cg-busy="{promise:ctrl.authRequest,message:'Loading'}"></div>
<div cg-busy="{promise:ctrl.podsRequest,message:'Loading'}"></div>
<br>
-<div class="row podTable" style="vertical-align:middle">
+<div class="row podsTable" style="vertical-align:middle">
<div class="col-sm-1 pull-right" ng-class="{ 'hidden': !auth.isAuthenticated }" >
<button type="button" class="btn btn-danger" ng-click="ctrl.openBatchDeleteModal()">
<i class="fa fa-minus"></i> Delete</button>
@@ -50,10 +50,8 @@
text-align: center;">
<th>Bulk Select</th>
<th>Name</th>
- <th>Details</th>
<th>Role</th>
<th>Mode</th>
- <th>CreatedAt</th>
<th>Operation</th>
</tr>
</thead>
@@ -65,20 +63,16 @@
</div>
</td>
<td>{{pod.name}}</td>
- <td style="width:20%;">{{pod.details}}</td>
<td>{{pod.role}}</td>
<td>{{pod.mode}}</td>
<td>
- {{pod.creation_date}}
- </td>
- <td>
- <span class="podTable-col">
- <a class="text-warning" title="Edit" ng-class="{ 'hidden': !auth.isAuthenticated }" >
- <i class="fa fa-pencil-square-o"></i></a>
- <a class="text-danger" ng-click="ctrl.openDeleteModal(pod.name)" title="Delete" ng-class="{ 'hidden': !auth.isAuthenticated }">
- <i class="fa fa-trash-o"></i></a>
- <a class="text-info" ><i class="fa fa-eye"></i></a>
- </span>
+ <span class="podsTable-col">
+ <a class="text-warning" title="Edit" ng-class="{ 'hidden': !auth.isAuthenticated }" >
+ <i class="fa fa-pencil-square-o"></i></a>
+ <a class="text-danger" ng-click="ctrl.openDeleteModal(pod.name)" title="Delete" ng-class="{ 'hidden': !auth.isAuthenticated }">
+ <i class="fa fa-trash-o"></i></a>
+ <a class="text-info" ng-click="ctrl.viewPod(pod.name)"><i class="fa fa-eye"></i></a>
+ </span>
</td>
</tr>
<tr ng-repeat-end=>
diff --git a/testapi/opnfv_testapi/ui/components/pods/podsController.js b/testapi/opnfv_testapi/ui/components/pods/podsController.js
index fa60143..c66873a 100644
--- a/testapi/opnfv_testapi/ui/components/pods/podsController.js
+++ b/testapi/opnfv_testapi/ui/components/pods/podsController.js
@@ -46,6 +46,7 @@
ctrl.openCreateModal = openCreateModal
ctrl.podDelete = podDelete
ctrl.batchDelete = batchDelete;
+ ctrl.viewPod = viewPod
/**
* This is called when the date filter calendar is opened. It
@@ -117,6 +118,10 @@
});
}
+ function viewPod(name){
+ console.log('hello');
+ $state.go('pod', {'name':name}, {reload: true});
+ }
/**
* This will contact the TestAPI to delete a pod for given
* name.
diff --git a/testapi/opnfv_testapi/ui/index.html b/testapi/opnfv_testapi/ui/index.html
index 00c2b9c..3191858 100644
--- a/testapi/opnfv_testapi/ui/index.html
+++ b/testapi/opnfv_testapi/ui/index.html
@@ -44,6 +44,7 @@
<script src="testapi-ui/shared/alerts/alertModalFactory.js"></script>
<script src="testapi-ui/shared/alerts/confirmModalFactory.js"></script>
<script src="testapi-ui/components/pods/podsController.js"></script>
+ <script src="testapi-ui/components/pods/pod/podController.js"></script>
<script src="testapi-ui/components/projects/projectsController.js"></script>
<script src="testapi-ui/components/projects/project/projectController.js"></script>
<script src="testapi-ui/components/results/resultsController.js"></script>