Wipe iprange on the list after deleting one, dont get hypervisor with…

… uuid 'pooled', show when a package changes on the vm list, and make the vm list not so slow.
project-fifo · Mar 11, 2014 · 3eb7e61 · 3eb7e61
1 parent 1db00ab
commit 3eb7e61
Show file tree

Hide file tree

Showing 18 changed files with 319 additions and 52 deletions.
diff --git a/app/index.html b/app/index.html
@@ -24,19 +24,20 @@
     <!-- build:js scripts/bower_components.js -->
     <!-- bower:js -->
     <script src="bower_components/jquery/jquery.js"></script>
-    <script src="bower_components/moment/moment.js"></script>
     <script src="bower_components/angular/angular.js"></script>
+    <script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
+    <script src="bower_components/angular-cookies/angular-cookies.js"></script>
+    <script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
+    <script src="bower_components/alertify.js/lib/alertify.js"></script>
+    <script src="bower_components/typeahead.js/dist/typeahead.js"></script>
+    <script src="bower_components/moment/moment.js"></script>
+    <script src="bower_components/angular-gettext/dist/angular-gettext.js"></script>
     <script src="bower_components/angular-route/angular-route.js"></script>
-    <script src="bower_components/angular-animate/angular-animate.js"></script>
+    <script src="bower_components/angular-resource/angular-resource.js"></script>
     <script src="bower_components/angular-moment/angular-moment.js"></script>
+    <script src="bower_components/angular-animate/angular-animate.js"></script>
     <script src="bower_components/d3/d3.js"></script>
-    <script src="bower_components/angular-resource/angular-resource.js"></script>
-    <script src="bower_components/angular-cookies/angular-cookies.js"></script>
-    <script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
-    <script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
     <script src="bower_components/ng-table/ng-table.js"></script>
-    <script src="bower_components/angular-gettext/dist/angular-gettext.js"></script>
-    <script src="bower_components/typeahead.js/dist/typeahead.js"></script>
     <!-- endbower -->
     <!-- endbuild -->
 
@@ -103,6 +104,8 @@
     <script src="bower_components/alertify.js/lib/alertify.min.js"></script>
     <script src="bower_components/msgpack-javascript/msgpack.js"></script>
     <script src="vendor/jquery.simplecolorpicker.js"></script>
+    <script src="bower_components/danialfarid-angular-file-upload/dist/angular-file-upload-shim.js"></script>
+    <script src="bower_components/danialfarid-angular-file-upload/dist/angular-file-upload.js"></script>
     <!-- Taken from https://raw.github.com/mgcrea/angular-strap/master/src/directives/modal.js (Im just using that part of angular-strap.. deleted dependency and changes 'modal hide' => 'modal hidenono + addClass('fade') => addClass('fadenono') -->
     <script type="text/javascript" src="vendor/modal.js"></script>
     <script src="scripts/directives/services.js"></script>

diff --git a/app/scripts/app.js b/app/scripts/app.js
@@ -8,7 +8,7 @@ var wait = {
 
 angular.module('fifoApp',
   ['ngRoute', 'ngAnimate', 'ngResource','services.breadcrumbs', 
-  'gettext', 'infinite-scroll', 'ngTable', 'angularMoment', 'ngSanitize', 'ngCookies'])
+  'gettext', 'infinite-scroll', 'ngTable', 'angularMoment', 'ngSanitize', 'ngCookies', 'angularFileUpload'])
   .config(function ($routeProvider) {
     $routeProvider
       .when('/', {

diff --git a/app/scripts/controllers/datasets.js b/app/scripts/controllers/datasets.js
@@ -1,12 +1,20 @@
 'use strict';
 
 angular.module('fifoApp')
-  .controller('DatasetsCtrl', function ($scope, wiggle, datasetsat, status) {
+  .controller('DatasetsCtrl', function ($scope, wiggle, datasetsat, status, $upload) {
 
     $scope.datasets = {}
     $scope.datasetsat = {}
     $scope.endpoint = Config.datasets
 
+    var _uuid = function() {
+        function _p8(s) {
+            var p = (Math.random().toString(16)+"000000000").substr(2,8);
+            return s ? "-" + p.substr(0,4) + "-" + p.substr(4,4) : p ;
+        }
+        return _p8() + _p8(true) + _p8(true) + _p8();
+    }
+
     $scope.import = function(uuid) {
         var url = $scope.url
         if (uuid)
@@ -100,4 +108,100 @@ angular.module('fifoApp')
     }
     $scope.show()
 
+    // $scope.uploader = $fileUploader.create({
+    //     url: 'unknown_url',
+    //     // headers: {
+    //         // 'Content-Type': 'application/x-www-form-urlencoded'
+    //     // },
+    //     filters: [
+    //         function(item) {
+    //             return item.type == 'application/json' || item.type == 'application/x-gzip'
+    //         }
+    //     ]
+    // })
+
+    // var uploader = $scope.uploader,
+    var uuid = _uuid()
+
+    uuid = 'cec0e6ff-a1ca-33e5-8d2f-9b3bb4ebf871'
+
+    $scope.onFileSelect = function(files) {
+        var file = files[0]
+
+        //Read the file.
+        var fr = new FileReader();
+
+        fr.onprogress = function(ev) {
+            console.log(100 * ev.loaded / ev.total)
+        }
+        fr.onload = function() {
+            // $scope.manifest = fr.result
+            // $scope.$apply()
+
+            console.log('ONLOAD!!')
+            //Upload
+            // var url = Config.endpoint + 'datasets/' + uuid
+            var url = Config.endpoint + 'datasets/' + uuid + '/datassetss.tar.gz'
+            // url = 'http://localhost:7777' + url
+            var prom = $upload.http({
+                url: url,
+                headers: {
+                    'Content-Type': file.type
+                },
+                data: fr.result
+            })
+
+            prom.then(function(res) {
+                console.log('---> RES', res)
+            }, null, function(evt) {
+                console.log('--> EVT:', evt.loaded, evt.total, parseInt(100.0 * evt.loaded / evt.total))
+            })
+
+        }
+        // fr.readAsText(file)
+        fr.readAsArrayBuffer(file)
+        // fr.readAsBinaryString(file)
+        // readAsDataURL
+        console.log('subiendo esto...', file)
+
+    }
+
+        // uploader.bind('afteraddingfile', function (event, item) {
+        //     console.log('After adding file', item.file.type, item)
+
+        //     var mime = item.file.type
+        //     if (mime == 'application/json') 
+        //         item.url = Config.endpoint + 'datasets/' + uuid + '/dataset.tar.gz'
+        //     if (mime == 'application/x-gzip') 
+        //         item.url = Config.endpoint + 'datasets/' + uuid
+
+
+        //     if (mime != 'application/json') return;
+
+        //     var fr = new FileReader();
+        //     fr.onload = function() {
+        //         $scope.manifest = fr.result
+        //         $scope.$apply()
+        //     }
+        //     fr.readAsText(item.file)
+
+        // })
+
+        // uploader.bind('completeall', function (event, items) {
+
+        //     var failed = items.filter(function(i) {
+        //         return !i.isSuccess;
+        //     })
+        //     if (failed.length) {
+        //         status.info('Could not upload the dataset. Please try again.')
+        //     }
+
+        //     $scope.uploader.clearQueue();
+        // });
+
+        // uploader.bind('error', function (event, xhr, item, response) {
+        //     status.error('Could not upload ' + item.file.name + ': ' + (response || xhr.statusText))
+        // });
+
+
   });
diff --git a/app/scripts/controllers/ip-ranges.js b/app/scripts/controllers/ip-ranges.js
@@ -14,7 +14,8 @@ angular.module('fifoApp')
                 el.name +"(" + el.uuid + ")</b> Are you 100% sure you really want to do this?</p>",
             ok: function() {
                 wiggle.ipranges.delete({id: el.uuid}, function success (data, h) {
-                    delete $scope.ipranges[el.uuid]
+                    var idx = $scope.ipranges.indexOf(el)
+                    $scope.ipranges.splice(idx, 1)
                     status.success(el.name + ' deleted')
                 }, function error(data) {
                     console.error('Delete iprange error:', data)

diff --git a/app/scripts/controllers/machines.js b/app/scripts/controllers/machines.js
@@ -7,9 +7,7 @@ angular.module('fifoApp')
     $scope.auth = auth;
 
     $scope.infinitScroll = function() {
-      if ($scope.tableParams.count() >= $scope.vms.length)
-        return;
-      $scope.tableParams.count($scope.tableParams.count() + 25);
+      $scope.tableParams.count($scope.tableParams.count() + 15);
     }
 
     $scope.start = function(vm) {
@@ -23,6 +21,10 @@ angular.module('fifoApp')
         window.open('console.html?uuid=' + vm.uuid);
     }
 
+    $scope.hasMore = function() {
+      return $scope.tableParams.count() < $scope.vms.length
+    }
+
     var filterData = function() {
       var p = $scope.tableParams;
 
@@ -55,9 +57,6 @@ angular.module('fifoApp')
           var vm = $scope.vms.hash[msg.channel],
             data = msg.message.data;
 
-          vm.config = data.config;
-          vmService.updateCustomFields(vm);
-
           /* Get the extra data */
 
           var hyper = data.hypervisor
@@ -78,6 +77,11 @@ angular.module('fifoApp')
             vm._package = wiggle.packages.get({id: pack})
           }
 
+          if (!data.config) return;
+
+          vm.config = data.config;
+          vmService.updateCustomFields(vm);
+
           var set = data.config.dataset
           if (set) {
             vm.config.dataset = set
@@ -109,7 +113,7 @@ angular.module('fifoApp')
 
       $scope.tableParams = new ngTableParams({
         page: 1,
-        count: 25,
+        count: 15,
         total: 0, //0=disable
         sorting: {
           'config.alias': 'desc' //Could save this in the user metadata.. :P
@@ -154,7 +158,6 @@ angular.module('fifoApp')
   requestsPromise.then(function() {
     $scope.searchQuery = auth.currentUser().mdata('vm_searchQuery');
     filterData()
-    $scope.infinitScroll()
   });
 
   });
diff --git a/app/scripts/services/wiggle.js b/app/scripts/services/wiggle.js
@@ -103,7 +103,7 @@ angular.module('fifoApp').factory('wiggle', function ($resource, $http, $cacheFa
       if (vm.owner)
         vm._owner = services.orgs.get({id: vm.owner})
 
-      if (vm.hypervisor)
+      if (vm.hypervisor && vm.hypervisor != 'pooled')
         vm._hypervisor = services.hypervisors.get({id: vm.hypervisor})
 
       return vm;

diff --git a/app/views/datasets.html b/app/views/datasets.html
@@ -5,9 +5,10 @@
         <ul class="nav nav-tabs">
           <li class="active"><a href="#installed" data-toggle="tab" translate>Installed</a></li>
           <li><a href="#datasetsat" data-toggle="tab" translate>Remote datasets</a></li>
+          <!-- <li><a href="#upload" data-toggle="tab" translate>Upload</a></li> -->
         </ul>
         <div class="tab-content">
-          <div class="tab-pane active" id="installed">
+          <div class="tab-pane" id="installed">
             <div class="row-fluid table-responsive">
               <table class="table table-condensed table-hover">
                 <thead>
@@ -86,6 +87,76 @@
               </tbody>
             </table>
           </div>
+
+          <div class="tab-pane" id='upload'>
+
+            <style type="text/css">
+              .drop-zone { border: dotted 3px lightgray; }
+              .drop-zone.dragover { border: dotted 3px green; }
+            </style>
+            <h4 translate>Upload a new dataset by selecting a zvol and manifest file</h4>
+            <br/>
+
+            <div ng-show='dropSupported' class='container' ng-file-drop-available="dropSupported=true">
+              <div class='col-sm-4 well drop-zone' ng-file-drop='onFileSelect($files)'>Drop a manifest and a zvol files here</div>
+              <div class='col-sm-6' style='margin-top: 20px;'><input ng-file-select='onFileSelect($files)' type="file"/></div>
+            </div>
+
+            <pre style='white-space: pre-wrap' class='pre-scrollable' ng-if='manifest'>{{manifest}}</pre>   
+
+            <div class='upload' ng-if='uploader.queue.length'>
+              <table class="table table-condensed table-hover">
+                <thead>
+                    <tr>
+                        <th width="50%">Name</th>
+                        <th ng-show="uploader.isHTML5">Size</th>
+                        <th ng-show="uploader.isHTML5">Progress</th>
+                        <th>Status</th>
+                        <th></th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr ng-repeat="item in uploader.queue">
+                        <td><strong>{{ item.file.name }}</strong></td>
+                        <td ng-show="uploader.isHTML5" nowrap>{{ item.file.size/1024/1024|number:2 }} MB</td>
+                        <td ng-show="uploader.isHTML5">
+                            <div class="progress" style="margin-bottom: 0;">
+                                <div class="progress-bar" role="progressbar" ng-style="{ 'width': item.progress + '%' }"></div>
+                            </div>
+                        </td>
+                        <td class="text-center">
+                            <span ng-show="item.isSuccess"><i class="glyphicon glyphicon-ok"></i></span>
+                            <span ng-show="item.isCancel"><i class="glyphicon glyphicon-ban-circle"></i></span>
+                            <span ng-show="item.isError"><i class="glyphicon glyphicon-remove"></i></span>
+                        </td>
+                        <td nowrap>
+                              <span class="glyphicon glyphicon-trash" title='Remove' jq-run='tooltip' ng-click="item.remove()"></span>
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+
+            <div>
+                <div class='pull-right'>
+                  <button type="button" class="btn btn-default btn-s" 
+                    ng-click="uploader.uploadAll()" ng-disabled="!uploader.getNotUploadedItems().length">
+                      <span class="glyphicon glyphicon-upload"></span> Upload
+                  </button>
+                  <button type="button" class="btn btn-default btn-s" 
+                    ng-click="uploader.cancelAll()" ng-disabled="!uploader.isUploading">
+                      <span class="glyphicon glyphicon-ban-circle"></span> Cancel
+                  </button>
+                  <button type="button" class="btn btn-default btn-s" 
+                    ng-click="uploader.clearQueue()" ng-disabled="!uploader.queue.length">
+                      <span class="glyphicon glyphicon-trash"></span> Clear
+                  </button>
+                </div>
+            </div>
+          </div>
+
+
+          </div>
+
         </div>
       </div>
     </div>

diff --git a/app/views/machines.html b/app/views/machines.html
@@ -19,7 +19,8 @@
   <table
      class='table table-condensed table-hover'
      infinite-scroll='infinitScroll()'
-     infinite-scroll-distance="1"
+     infinite-scroll-disabled='!hasMore()'
+     infinite-scroll-immediate-check='false'
      ng-table='tableParams'>
 
     <tr ng-repeat='vm in vmsFiltered'>
@@ -36,8 +37,10 @@
         {{vm._package.name}}
       </td>
       <td ng-show="auth.canAccess(['cloud','datasets','list'])" jq-options="{container: 'body'}" sortable="'config._dataset.name'" class='fifo-hidden-xs nowrap'>
-        <img ng-src="images/logos/{{vm.config._dataset.os || 'unknown'}}.svg" class='oslogo'>
-        {{vm.config._dataset.name || ('Unknown' | translate)}}
+        <span ng-show='vm.config.dataset'>
+          <img ng-src="images/logos/{{vm.config._dataset.os || 'unknown'}}.svg" class='oslogo'>
+          {{vm.config._dataset.name || ('Unknown' | translate)}}
+        </span>
       </td>
       <td ng-show="auth.canAccess(['cloud','hypervisors','list'])" data-title="'Server'|translate" sortable="'hypervisor'" class='fifo-visible-lg fifo-visible-md'>
         <a class='nocolor' href="#/servers/{{vm.hypervisor}}">{{vm._hypervisor.alias}}</a>
@@ -59,3 +62,5 @@
     </tr>
   </table>
 </div>
+
+<div ng-show='hasMore()' class='text-center text-muted small'>Scroll to load more vms</div>
diff --git a/bower.json b/bower.json
@@ -18,7 +18,8 @@
     "msgpack-javascript": "*",
     "typeahead.js": "~0.9.3",
     "d3": "~3.3.9",
-    "ng-table": "~0.3.1"
+    "ng-table": "~0.3.1",
+    "danialfarid-angular-file-upload": "~1.2.8"
   },
   "resolutions": {
     "jquery": "~2.0.3",

diff --git a/dist/index.html b/dist/index.html
@@ -15,12 +15,12 @@
     </div>
     <div class="ng-view-include container" ng-view></div>
 
-    <script src="scripts/f0de7f48.bower_components.js"></script>
+    <script src="scripts/5d0b108f.bower_components.js"></script>
 
     <script src="scripts/config.js"></script>
-    <script src="scripts/60806743.main.js"></script>
+    <script src="scripts/2ed3592b.main.js"></script>
 
-    <script src="scripts/977c17e5.vendor.js"></script>
+    <script src="scripts/c1af14c1.vendor.js"></script>
 
 </body>
 </html>
diff --git a/dist/scripts/2ed3592b.main.js b/dist/scripts/2ed3592b.main.js
diff --git a/dist/scripts/5d0b108f.bower_components.js b/dist/scripts/5d0b108f.bower_components.js
diff --git a/dist/scripts/60806743.main.js b/dist/scripts/60806743.main.js
diff --git a/dist/scripts/977c17e5.vendor.js → dist/scripts/c1af14c1.vendor.js b/dist/scripts/977c17e5.vendor.js → dist/scripts/c1af14c1.vendor.js
diff --git a/dist/scripts/f0de7f48.bower_components.js b/dist/scripts/f0de7f48.bower_components.js