3.5.0-alpha2

app/modules/home/view.jade

@@ -1,4 +1,4 @@
-// @todo Remove code duplication for the VMs listing by using a macro.
+//- @todo Remove code duplication for the VMs listing by using a macro.
 .sub-bar
   .grid
     .grid-cell.overview
@@ -91,38 +91,38 @@
               a(ng-click="deleteVMs()")
                 i.fa.fa-trash-o.fa-fw
                 |  Delete
-// FIXME: Ugly trick to force the pools to be under the sub bar.
+
-div(style="margin-top: 50px; visibility: hidden; height: 0") .
+//- FIXME: Ugly trick to force the pools to be under the sub bar.
-// If we haven't any data
+//- Add +7px to the 50px for having some space before the first pool.
+div(style="margin-top: 57px; visibility: hidden; height: 0") .
+
+//- If we haven't any data
 div(ng-if="!pools.length")
   .grid
     .grid-cell.flat-panel.text-center
       h1 Welcome on Xen Orchestra!
-      h3 It seems you aren"t connected to any Xen host.
+      h3 It seems you aren't connected to any Xen host.
-      p You can add any XAPI capable server by following these steps:
+      p You can add any XAPI capable server by clicking on the menu icon "
-      ul.list-unstyled
-        li
-          | Click on the menu icon "
           i.fa.fa-th
           | " and choose "
           i.fa.fa-cog
           |  Settings"
-        li Then you can add a server (no need to reload, refresh is auto)
+
-        li Enjoy Xen Orchestra!
+      p Enjoy Xen Orchestra!
       p
         a.btn.btn-primary.big(ui-sref="about")
           i.fa.fa-info-circle
           |  About us
-// If we have data
+//- If we have data
 div(ng-if="pools.length")
-  // Contains a pool and all its children (hosts).
+  //- Contains a pool and all its children (hosts).
   .grid.pool-block(ng-repeat="pool in pools | orderBy:natural('name_label') track by pool.UUID")
-    // Pseudo pool if it is not a named pool.
+    //- Pseudo pool if it is not a named pool.
     .grid-cell.grid--gutters.pool-cell(ng-if="!pool.name_label")
       p.center(style="margin-top: 2em;") No pool connected
-    // Contains information about the pool if it is a named pool.
+    //- Contains information about the pool if it is a named pool.
     .grid-cell.grid--gutters.pool-cell(ng-if="pool.name_label")
-      // Header (name + dropdown menu).
+      //- Header (name + dropdown menu).
       .dropdown.dropdown-pool
         a.pool-name(ui-sref="pools_view({id: pool.UUID})")
           | {{pool.name_label}}
@@ -143,10 +143,10 @@ div(ng-if="pools.length")
             a.disabled(xo-click="pool_disconnect(pool.UUID)")
               i.fa.fa-unlink.fa-fw
               |  Disconnect
-      // /Header.
+      //- /Header.
-      // Stats & SRs list.
+      //- Stats & SRs list.
       div
-        // Stats.
+        //- Stats.
         ul.list-unstyled.stats
           li
             i(tooltip="{{pool.hosts.length}} hosts connected")
@@ -164,8 +164,8 @@ div(ng-if="pools.length")
             |  
             a(ui-sref="hosts_view({id: master.UUID})") {{master.name_label}}
           li(ng-if="!pool.master") No master
-        // /Stats.
+        //- /Stats.
-        // SRs.
+        //- SRs.
         div(ng-if="pool.SRs.length")
           p.center.small-caps SRs:
           table.table.table-hover.table-condensed
@@ -176,13 +176,13 @@ div(ng-if="pools.length")
               td.col-md-6.right.no-border
                 .progress.progress-small(tooltip="Disk: {{[SR.usage, SR.size] | %}} allocated")
                   .progress-bar(role="progressbar", aria-valuenow="{{100*SR.usage/SR.size}}", aria-valuemin="0", aria-valuemax="100", style="width: {{[SR.usage, SR.size] | %}}")
-    // Contains all the hosts of this pool.
+    //- Contains all the hosts of this pool.
     .grid-cell.grid--gutters.hosts-vms-cells
-      // Contains a host and all its children (VMs).
+      //- Contains a host and all its children (VMs).
       .grid(ng-repeat="host in pool.hosts | resolve | orderBy:natural('name_label') track by host.UUID")
-        // Contains information about the host.
+        //- Contains information about the host.
         .grid-cell.host-cell
-          // Header (name + dropdown menu).
+          //- Header (name + dropdown menu).
           .dropdown.dropdown-pool
             a.host-name(ui-sref="hosts_view({id: host.UUID})")
               | {{host.name_label}}
@@ -223,32 +223,32 @@ div(ng-if="pools.length")
                 a(xo-click="pool_addHost(host.UUID)")
                   i.fa.fa-cloud-download.fa-fw
                   |  Add to pool
-          // /Header.
+          //- /Header.
-          // Stats.
+          //- Stats.
           ul.list-unstyled.stats
-            // Warning icon if host is halted or disabled
+            //- Warning icon if host is halted or disabled
             li.text-danger(ng-if="host.power_state === 'Halted'")
               i.fa.fa-warning
               |  Halted
             li.text-warning(ng-if="!host.enabled && host.power_state === 'Running'")
               i.fa.fa-warning
               |  Disabled
-            // Memory
+            //- Memory
             li(ng-if="host.power_state === 'Running' && host.enabled")
               i.xo-icon-memory.i-progress
               .progress.progress-small(tooltip="RAM: {{[host.memory.usage, host.memory.size] | %}} allocated")
                 .progress-bar(role="progressbar", aria-valuenow="{{100*host.memory.usage/host.memory.size}}", aria-valuemin="0", aria-valuemax="100", style="width: {{[host.memory.usage, host.memory.size] | %}}")
-            // Host address
+            //- Host address
             li.text-muted.substats
               i.xo-icon-network
               |  {{host.address}}
-        // Contains all the VMs of this host.
+        //- Contains all the VMs of this host.
         .grid.grid-cell.vm-cell
-          // If no VMs, fill the space with a message.
+          //- If no VMs, fill the space with a message.
           .vms-notice(ng-if="!host.VMs.length")
-            // TODO: put 'Halted' state in xo-server
+            //- TODO: put 'Halted' state in xo-server
             //p(ng-if="'Halted' === host.power_state")
-            //  | Host halted.
+            //-  | Host halted.
             p(ng-if="'shutdown' === values(host.current_operations)[0]")
               | Host halted.
             div(ng-if="'shutdown' !== values(host.current_operations)[0]")
@@ -256,25 +256,25 @@ div(ng-if="pools.length")
                 | Host disabled.
               p(ng-if="host.enabled")
                 | No VMs on this host.
-          // /Message if no VMs.
+          //- /Message if no VMs.
-          // TODO: comment
+          //- TODO: comment
           .table-responsive(ng-if="host.VMs.length")
             table.table.table-hover.table-condensed
-              // Contains a VM.
+              //- Contains a VM.
               tr(ng-repeat="VM in host.VMs | resolve | orderBy:natural('name_label') track by VM.UUID", xo-sref="VMs_view({id: VM.UUID})")
-                // Handle used for drag & drop.
+                //- Handle used for drag & drop.
                 td.grab
-                // Checkbox used for selection.
+                //- Checkbox used for selection.
                 td.select-vm
                   input(type="checkbox", ng-model="selected_VMs[VM.UUID]", ng-change="updateVMSelection(VM.UUID)")
-                // Power state
+                //- Power state
                 td.vm-power-state
                   i.xo-icon-working(ng-if="isVMWorking(VM)", tooltip="{{VM.power_state}} and {{values(VM.current_operations)[0]}}")
                   i(class="xo-icon-{{VM.power_state | lowercase}}",ng-if="!isVMWorking(VM)", tooltip="{{VM.power_state}}")
-                // VM name.
+                //- VM name.
                 td.vm-name.col-md-2
                   p.vm {{VM.name_label}}
-                // Quick actions.
+                //- Quick actions.
                 td.vm-quick-buttons.col-md-2
                   .quick-buttons
                     a(tooltip="Shutdown VM", xo-click="stopVM(VM.UUID)")
@@ -285,47 +285,47 @@ div(ng-if="pools.length")
                       i.fa.fa-refresh
                     a(tooltip="VM Console", xo-sref="consoles_view({id: VM.UUID})")
                       i.xo-icon-console
-                // Description.
+                //- Description.
                 td.vm-description.col-md-4
                   i(class="xo-icon-{{osType(VM.os_version.distro)}}",ng-if="VM.os_version.distro", tooltip="{{VM.os_version.name}}")
                     |  
                   i.fa.fa-fw(ng-if="!VM.os_version.distro")
                   | {{VM.name_description}}
-                // Metrics.
+                //- Metrics.
-                // Memory
+                //- Memory
                 td.vm-memory-stat.col-md-2
                   .cpu
                     | {{VM.memory.size | bytesToSize}}
                   i.fa.fa-fw(ng-if="VM.PV_drivers")
                   i.xo-icon-info.fa-fw(ng-if="!VM.PV_drivers", tooltip="Xen tools not installed")
-                // /Metrics.
+                //- /Metrics.
-                // Address.
+                //- Address.
                 td.text-muted.text-right.col-md-2
                   | {{VM.addresses["0/ip"]}}
-      // Contains a pseudo-host which contains all VMs not in any hosts.
+      //- Contains a pseudo-host which contains all VMs not in any hosts.
       .grid(ng-if="pool.VMs.length")
-        // This is where the information about a host would be displayed.
+        //- This is where the information about a host would be displayed.
         .grid-cell.host-cell
-        // Contains all the VMs of this pool.
+        //- Contains all the VMs of this pool.
         .grid.grid-cell.vm-cell
-          // TODO: comment
+          //- TODO: comment
           .table-responsive
             table.table.table-hover.table-condensed
-              // Contains a VM.
+              //- Contains a VM.
               tr(ng-repeat="VM in pool.VMs | resolve | orderBy:natural('name_label') track by VM.UUID", xo-sref="VMs_view({id: VM.UUID})")
-                // Handle used for drag & drop.
+                //- Handle used for drag & drop.
                 td.grab
-                // Checkbox used for selection.
+                //- Checkbox used for selection.
                 td.select-vm
                   input(type="checkbox", ng-model="selected_VMs[VM.UUID]", ng-change="updateVMSelection(VM.UUID)")
-                // Power state
+                //- Power state
                 td.vm-power-state
                   i.xo-icon-working(ng-if="isVMWorking(VM)", tooltip="{{VM.power_state}} and {{values(VM.current_operations)[0]}}")
                   i(class="xo-icon-{{VM.power_state | lowercase}}",ng-if="!isVMWorking(VM)", tooltip="{{VM.power_state}}")
-                // VM name.
+                //- VM name.
                 td.vm-name.col-md-2
                   p.vm {{VM.name_label}}
-                // Quick actions.
+                //- Quick actions.
                 td.vm-quick-buttons.col-md-2
                   .quick-buttons
                     a(tooltip="Shutdown VM", xo-click="stopVM(VM.UUID)")
@@ -336,21 +336,21 @@ div(ng-if="pools.length")
                       i.fa.fa-refresh
                     a(tooltip="VM Console")
                       i.xo-icon-console
-                // Description.
+                //- Description.
                 td.vm-description.col-md-4
                   i(class="xo-icon-{{osType(VM.os_version.distro)}}",ng-if="VM.os_version.distro", tooltip="{{VM.os_version.name}}")
                     |  
                   i.fa.fa-fw(ng-if="!VM.os_version.distro")
                   | {{VM.name_description}}
-                // Metrics.
+                //- Metrics.
-                // Memory
+                //- Memory
                 td.vm-memory-stat.col-md-2
                   .cpu
                     | {{VM.memory.size | bytesToSize}}
                   i.fa.fa-fw(ng-if="VM.PV_drivers")
                   i.xo-icon-info.fa-fw(ng-if="!VM.PV_drivers", tooltip="Xen tools not installed")
-                // /Metrics.
+                //- /Metrics.
-                // Address.
+                //- Address.
                 td.text-muted.text-right.col-md-2
                   | {{VM.addresses["0/ip"]}}
         // /Pseudo host containing VMs not on any hosts.

app/services.coffee

@@ -361,7 +361,6 @@ module.exports = angular.module 'xoWebApp.services', [
 
       ++xoObjects.revision
     xoApi.on 'all', (event) ->
-      console.log event
       switch event.type
         when 'exit'
           for object in event.items

app/styles/main.sass

@@ -40,7 +40,7 @@ a, [ng-click], [xo-click], [xo-sref]
 
 // Force our content to be under the fixed navbar.
 .view-main
-  padding-top: 57px
+  padding-top: 50px
 
 //////////////////////////////////////////////////////////////////////
 

app/styles/to-clean.scss

@@ -49,7 +49,9 @@ input.inverse {margin: 0;}
 // FIXME: What is it?
 //.i-progress { float: center;  margin-right: 0em;}
 
-.pool-block { margin-left: 1em; margin-right: 1em; margin-top: 0.5em; margin-bottom: 0;}
+// Pool block
+// A block display a whole pool
+.pool-block { margin-left: 0.8em; margin-right: 0.8em; margin-top: 0.3em; margin-bottom: 0;}
 .pool-cell { margin-bottom: 0.5em; margin-left: 2em; margin-right: 1em; min-height: 6em; max-width: 190px; background-color: white; }
 /* row for all hosts/vms in a pool */
 .hosts-vms-cells { min-height: 6em; margin-right: -0.5em; }
@@ -180,7 +182,6 @@ a.btn.navbar-btn.btn-default.dropdown-toggle.inversed {background-color:#444; bo
 /* flex */
 .grid {
 	display: flex;
-	display: -webkit-flex;
 }
 
 .grid-cell {

gulpfile.js

@@ -268,6 +268,11 @@ gulp.task('build-styles', ['install-bower-components'], function () {
         SRC_DIR +'/styles'
       ]
     })
+  ).pipe($.autoprefixer([
+    'last 1 version',
+    '> 1%',
+  ])).pipe(
+    PRODUCTION ? $.csso() : noop()
   ).pipe(dest());
 });
 
@@ -300,9 +305,10 @@ gulp.task('check-pages', function () {
 
 gulp.task('check-scripts', function () {
   return merge(
-    gulp.src(SRC_DIR +'/**/*.coffee')
+    // Disable for now due to issues with gulp-coffeelint.
-      .pipe($.coffeelint())
+    //gulp.src(SRC_DIR +'/**/*.coffee')
-      .pipe($.coffeelint.reporter()),
+    //  .pipe($.coffeelint())
+    //  .pipe($.coffeelint.reporter()),
     gulp.src(SRC_DIR +'/**/*.js')
       .pipe($.jsvalidate())
       .pipe($.jshint())
@@ -324,16 +330,12 @@ gulp.task('check', [
   'check-scripts',
 ]);
 
-gulp.task('clean', function () {
+gulp.task('clean', function (done) {
-  return gulp.src(DIST_DIR, {
+  require('rimraf')(DIST_DIR, done);
-    read: false,
-  }).pipe($.clean());
 });
 
-gulp.task('distclean', ['clean'], function () {
+gulp.task('distclean', ['clean'], function (done) {
-  return gulp.src(BOWER_DIR, {
+  require('rimraf')(BOWER_DIR, done);
-    read: false,
-  }).pipe($.clean());
 });
 
 gulp.task('test', function () {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "xo-web",
-  "version": "3.5.0-alpha1",
+  "version": "3.5.0-alpha2",
   "description": "Web interface client for Xen-Orchestra",
   "keywords": [
     "xen",
@@ -17,8 +17,9 @@
     "debowerify": "^0.8.1",
     "event-stream": "^3.1.7",
     "gulp": "^3.8.7",
-    "gulp-clean": "^0.3.1",
+    "gulp-autoprefixer": "0.0.8",
     "gulp-coffee": "^2.1.1",
+    "gulp-csso": "^0.2.9",
     "gulp-embedlr": "^0.5.2",
     "gulp-htmlhint": "^0.0.9",
     "gulp-jade": "^0.7.0",
@@ -34,6 +35,7 @@
     "gulp-watch": "^0.6.9",
     "jshint-stylish": "^0.4.0",
     "minimist": "^1.1.0",
+    "rimraf": "^2.2.8",
     "vinyl": "^0.3.2",
     "watchify": "^1.0.2"
   },