Fixed: #73

Fixed this commmit by Lorenzo as well: openbaton/dashboard@5882d1b he tried to add html for image status, but it was not working proper and displaying nothing in that column. So, I fixed the html and add the javascript code as well that refresh image status every 10 sec.
openbaton · Jul 20, 2017 · a98558d · a98558d
1 parent 5882d1b
commit a98558d
Show file tree

Hide file tree

Showing 3 changed files with 66 additions and 32 deletions.
diff --git a/src/main/resources/static/js/controllers/vimInstanceController.js b/src/main/resources/static/js/controllers/vimInstanceController.js
@@ -34,11 +34,11 @@ angular.module('app').controller('vimInstanceCtrl', function ($scope, $routePara
     $scope.setFormInput = function () {
         formInput = true;
         fileInput = false;
-        
+
     };
     $scope.setFileInput = function () {
         formInput = false;
-        fileInput = true;    
+        fileInput = true;
     };
 
     $scope.changeText = function (text) {
@@ -84,14 +84,14 @@ angular.module('app').controller('vimInstanceCtrl', function ($scope, $routePara
     $scope.hoverOut = function () {
         this.hoverEdit = false;
     };
-function checkKey() {
-    if (angular.isUndefined($scope.newvim.keyPair)) {
-        return;
-    }
-    if ($scope.newvim.keyPair === '') {
-        delete $scope.newvim.keyPair;
+    function checkKey() {
+        if (angular.isUndefined($scope.newvim.keyPair)) {
+            return;
+        }
+        if ($scope.newvim.keyPair === '') {
+            delete $scope.newvim.keyPair;
+        }
     }
-}
     $scope.setFile = function (element) {
         $scope.$apply(function ($scope) {
 
@@ -137,7 +137,7 @@ function checkKey() {
                         loadVIM();
                     })
                     .error(function (data, status) {
-                            showError(data, status);
+                        showError(data, status);
 
                     });
             } else if ($scope.textTopologyJson !== '') {
@@ -159,9 +159,9 @@ function checkKey() {
 
         }
         $('#modalDC').on('hidden.bs.modal', function () {
-        $(this).find("input,textarea,select").val('').end();
+            $(this).find("input,textarea,select").val('').end();
 
-            });
+        });
         $scope.textTopologyJson = '';
         $scope.file = '';
     };
@@ -262,8 +262,30 @@ function checkKey() {
                     $scope.vimInstanceJSON = JSON.stringify(response, undefined, 4);
 
                 }).error(function (data, status) {
+                showError(data, status);
+            });
+        else {
+            http.get(url)
+                .success(function (response) {
+                    $scope.vimInstances = response;
+                })
+                .error(function (data, status) {
                     showError(data, status);
                 });
+        }
+    }
+
+    $scope.loadVIM = function() {
+        if (!angular.isUndefined($routeParams.vimInstanceId))
+            http.get(url + $routeParams.vimInstanceId)
+                .success(function (response, status) {
+                    console.log(response);
+                    $scope.vimInstance = response;
+                    $scope.vimInstanceJSON = JSON.stringify(response, undefined, 4);
+
+                }).error(function (data, status) {
+                showError(data, status);
+            });
         else {
             http.get(url)
                 .success(function (response) {
@@ -274,7 +296,24 @@ function checkKey() {
                 });
         }
     }
+    var promise = $interval($scope.loadVIM, 10000);
+    $scope.$on('$destroy',function(){
+        if(promise)
+            $interval.cancel(promise);
+    });
 
+    $scope.ActiveVIM = function(status) {
+        if(status === 'ACTIVE') {
+            return true;
+        }
+        return false;
+    };
+    $scope.PendingVIM = function(status) {
+        if(status != 'ACTIVE') {
+            return true;
+        }
+        return false;
+    };
 
     function loadInstalled() {
         http.get(bareUrl + "/api/v1/plugins").success(function (response) {
@@ -298,15 +337,15 @@ function checkKey() {
     function showError(data, status) {
         if (status === 500) {
             $scope.alerts.push({
-            type: 'danger',
-            msg: 'An error occured and could not be handled properly, please, report to us and we will fix it as soon as possible'
-        });
+                type: 'danger',
+                msg: 'An error occured and could not be handled properly, please, report to us and we will fix it as soon as possible'
+            });
         } else {
-        console.log('Status: ' + status + ' Data: ' + JSON.stringify(data));
-        $scope.alerts.push({
-            type: 'danger',
-            msg:  data.message + " Code: " + status
-        });
+            console.log('Status: ' + status + ' Data: ' + JSON.stringify(data));
+            $scope.alerts.push({
+                type: 'danger',
+                msg:  data.message + " Code: " + status
+            });
         }
 
         $('.modal').modal('hide');

diff --git a/src/main/resources/static/pages/nsdescriptors/nsdescriptors.html b/src/main/resources/static/pages/nsdescriptors/nsdescriptors.html
@@ -1340,6 +1340,7 @@ <h4 class="modal-title">{{nsdToSend.name}}</h4>
                 </tab>
                 <tab heading="Keys">
                     <form role="form" class="form-horizontal">
+                        <br>
                         <p> A key pair allows you to SSH into your VNF Component Instances. You may select an existing
                             key pair,
                             import a key pair, or generate a new key pair.</p>
@@ -1481,6 +1482,7 @@ <h4 class="modal-title">{{nsdToSend.name}}</h4>
                 <tab heading="Configuration parameters">
                     <div class="container-fluid">
                         <p>
+                            <br>
                             Configuration parameters are the dynamic parameters and would be used during lifecycle
                             events
                         </p>

diff --git a/src/main/resources/static/pages/vim-instances/vim-instanceinfo.html b/src/main/resources/static/pages/vim-instances/vim-instanceinfo.html
@@ -181,7 +181,7 @@ <h4>Images</h4>
                         <!--<th class="col-sm-4" ng-click="predicate = 'id'; reverse = !reverse">Id <i class="fa fa-sort"></i> </th>-->
                         <th ng-click="predicate = 'extId'; reverse = !reverse">External Id <i class="fa fa-sort"></i>
                         </th>
-                        <th ng-click="predicate = 'status'; reverse = !reverse">Status<i class="fa fa-sort"></i></th>
+                        <th ng-click="predicate = 'status'; reverse = !reverse">Status <i class="fa fa-sort"></i></th>
                         <th ng-click="predicate = 'minRam'; reverse = !reverse">Minimum Ram <i class="fa fa-sort"></i>
                         </th>
                         <th ng-click="predicate = 'minDiskSpace'; reverse = !reverse">Minimum Disk <i
@@ -196,17 +196,10 @@ <h4>Images</h4>
                         <td>{{image.name}}</td>
                         <!--<td>{{image.id}}</td>-->
                         <td>{{image.extId}}</td>
-                        <td>{{image.status}}
-                            <span ng-show='(image.status === "ACTIVE")'>
-                                <span class="glyphicon glyphicon-ok text-success" aria-hidden="true"></span>
-                            </span>
-                            <span ng-show='(image.status != "ACTIVE" && image.status === "UNRECOGNIZED")'>
-                                <span class="glyphicon glyphicon-refresh glyphicon-refresh-animate"></span>
-                            </span>
-                            <span ng-show='(image.status === "UNRECOGNIZED")'>
-                                <span class="glyphicon glyphicon-remove"></span>
-                            </span>
-                        </td>
+                        < <td style="text-align: center;">{{image.status}} <span ng-show='ActiveVIM(image.status)'><span
+                            class="glyphicon glyphicon-ok text-success" aria-hidden="true"></span></span><span
+                            ng-show='PendingVIM(image.status)'><span
+                            class="glyphicon glyphicon-refresh glyphicon-refresh-animate"></span></span></td>
                         <td>{{image.minRam}}</td>
                         <td>{{image.minDiskSpace}}</td>
                         <td>{{image.isPublic}}</td>