feature #2748: Start working on the new provisioning view

install.sh

@@ -1428,6 +1428,7 @@ SUNSTONE_ETC_FILES="src/sunstone/etc/sunstone-server.conf \
 SUNSTONE_ETC_VIEW_FILES="src/sunstone/etc/sunstone-views/admin.yaml \
                     src/sunstone/etc/sunstone-views/user.yaml \
                     src/sunstone/etc/sunstone-views/cloud.yaml \
+                    src/sunstone/etc/sunstone-views/provision.yaml \
                      src/sunstone/etc/sunstone-views/vdcadmin.yaml"
 
 SUNSTONE_MODELS_FILES="src/sunstone/models/OpenNebulaJSON.rb \
@@ -1477,6 +1478,7 @@ SUNSTONE_PUBLIC_JS_PLUGINS_FILES="\
                         src/sunstone/public/js/plugins/acls-tab.js \
                         src/sunstone/public/js/plugins/vnets-tab.js \
                         src/sunstone/public/js/plugins/marketplace-tab.js \
+                        src/sunstone/public/js/plugins/provision-tab.js \
                         src/sunstone/public/js/plugins/config-tab.js \
                         src/sunstone/public/js/plugins/oneflow-dashboard.js \
                         src/sunstone/public/js/plugins/oneflow-services.js \
@@ -1604,6 +1606,7 @@ SUNSTONE_PUBLIC_IMAGES_FILES="src/sunstone/public/images/ajax-loader.gif \
                         src/sunstone/public/images/opennebula-sunstone-small.png \
                         src/sunstone/public/images/opennebula-sunstone-v4.0.png \
                         src/sunstone/public/images/opennebula-sunstone-v4.0-small.png \
+                        src/sunstone/public/images/one_small_logo.png \
                         src/sunstone/public/images/panel.png \
                         src/sunstone/public/images/panel_short.png \
                         src/sunstone/public/images/pbar.gif \

src/sunstone/etc/sunstone-views.yaml

@@ -21,11 +21,13 @@ available_tabs:
     - oneflow-dashboard
     - oneflow-services
     - oneflow-templates
+    - provision-tab
 groups:
     oneadmin:
         - admin
         - vdcadmin
         - user
         - cloud
+        - provision
 default:
-    - user
+    - user

src/sunstone/etc/sunstone-views/provision.yaml

@@ -0,0 +1,437 @@
+small_logo: images/opennebula-sunstone-v4.0-small.png
+enabled_tabs:
+    dashboard-tab: false
+    system-tab: false
+    users-tab: false
+    groups-tab: false
+    acls-tab: false
+    vresources-tab: false
+    vms-tab: false
+    templates-tab: false
+    images-tab: false
+    files-tab: false
+    infra-tab: false
+    clusters-tab: false
+    hosts-tab: false
+    datastores-tab: false
+    vnets-tab: false
+    marketplace-tab: false
+    oneflow-dashboard: false
+    oneflow-services: false
+    oneflow-templates: false
+    provision-tab: true
+tabs:
+    dashboard-tab:
+        panel_tabs:
+        actions:
+        widgets_three_per_row:
+            #- users
+        widgets_two_per_row:
+            #- network
+            #- storage
+            #- hosts
+            #- vms
+        widgets_one_per_row:
+            - vms
+    system-tab:
+        panel_tabs:
+        actions:
+    users-tab:
+        panel_tabs:
+            user_info_panel: true
+            user_quotas_tab: true
+        table_columns:
+            - 0         # Checkbox
+            - 1         # ID
+            - 2         # Name
+            - 3         # Group
+            - 4         # Auth driver
+            - 5         # VMs
+            - 6         # Memory
+            - 7         # CPU
+            #- 8         # Group ID
+        actions:
+            User.refresh: true
+            User.create_dialog: true
+            User.update_password: true
+            User.quotas_dialog: true
+            User.chgrp: true
+            User.addgroup: true
+            User.delgroup: true
+            User.chauth: true
+            User.delete: true
+    groups-tab:
+        panel_tabs:
+            group_quotas_tab: true
+        table_columns:
+            - 0         # Checkbox
+            - 1         # ID
+            - 2         # Name
+            - 3         # Users
+            - 4         # VMs
+            - 5         # Memory
+            - 6         # CPU
+        actions:
+            Group.refresh: true
+            Group.create_dialog: true
+            Group.quotas_dialog: true
+            Group.delete: true
+    acls-tab:
+        panel_tabs:
+        table_columns:
+            - 0         # Checkbox
+            - 1         # ID
+            - 2         # Applies to
+            - 3         # Affected resources
+            - 4         # Resource ID / Owned by
+            - 5         # Allowed operations
+            - 6         # Zone
+            #- 7         # ACL String
+        actions:
+            Acl.refresh: true
+            Acl.create_dialog: true
+            Acl.delete: true
+    vresources-tab:
+        panel_tabs:
+        actions:
+    vms-tab:
+        panel_tabs:
+            vm_info_tab: true
+            vm_capacity_tab: true
+            vm_hotplugging_tab: true
+            vm_network_tab: true
+            vm_snapshot_tab: true
+            vm_placement_tab: false
+            vm_actions_tab: true
+            vm_template_tab: false
+            vm_log_tab: false
+        table_columns:
+            - 0       # Checkbox
+            - 1       # ID
+            - 2       # Owner
+            - 3       # Group
+            - 4       # Name
+            - 5       # Status
+            #- 6       # Used CPU
+            #- 7       # Used Memory
+            - 8       # Host
+            - 9       # IPs
+            #- 10      # Start Time
+            - 11      # VNC
+        actions:
+            VM.refresh: true
+            VM.create_dialog: false
+            VM.easy_provision: true
+            VM.chown: false
+            VM.chgrp: false
+            VM.chmod: true
+            VM.deploy: false
+            VM.migrate: false
+            VM.migrate_live: false
+            VM.hold: true
+            VM.release: true
+            VM.suspend: true
+            VM.resume: true
+            VM.stop: true
+            VM.recover: false
+            VM.boot: true
+            VM.reboot: true
+            VM.reboot_hard: true
+            VM.poweroff: true
+            VM.poweroff_hard: true
+            VM.undeploy: true
+            VM.undeploy_hard: true
+            VM.shutdown: true
+            VM.shutdown_hard: true
+            VM.delete: true
+            VM.delete_recreate: true
+            VM.resize: false
+            VM.attachdisk: true
+            VM.detachdisk: true
+            VM.saveas: true
+            VM.attachnic: false
+            VM.detachnic: false
+            VM.snapshot_create: true
+            VM.snapshot_revert: true
+            VM.snapshot_delete: true
+            VM.resched: false
+            VM.unresched: false
+    templates-tab:
+        panel_tabs:
+            template_info_tab: true
+            template_template_tab: true
+        table_columns:
+            - 0         # Checkbox
+            - 1         # ID
+            - 2         # Owner
+            - 3         # Group
+            - 4         # Name
+            - 5         # Registration time
+        actions:
+            Template.refresh: true
+            Template.create_dialog: false
+            Template.easy_provision: true
+            Template.update_dialog: true
+            Template.instantiate_vms: true
+            Template.chown: false
+            Template.chgrp: false
+            Template.chmod: true
+            Template.clone_dialog: true
+            Template.delete: true
+        template_creation_tabs:
+            general: true
+            storage: true
+            network: true
+            os_booting: true
+            features: true
+            input_output: true
+            context: true
+            scheduling: false
+            other: false
+    images-tab:
+        panel_tabs:
+            image_info_panel: true
+        table_columns:
+            - 0         # Checkbox
+            - 1         # ID
+            - 2         # Owner
+            - 3         # Group
+            - 4         # Name
+            - 5         # Datastore
+            #- 6         # Size
+            - 7        # Type
+            #- 8         # Registration time
+            #- 9        # Persistent
+            - 10        # Status
+            - 11        # #VMs
+            #- 12       # Target
+        actions:
+            Image.refresh: true
+            Image.create_dialog: false
+            Image.chown: false
+            Image.chgrp: false
+            Image.chmod: false
+            Image.enable: false
+            Image.disable: false
+            Image.persistent: true
+            Image.nonpersistent: true
+            Image.clone_dialog: false
+            Image.delete: true
+    files-tab:
+        panel_tabs:
+            file_info_panel: true
+        table_columns:
+            - 0         # Checkbox
+            - 1         # ID
+            - 2         # Owner
+            - 3         # Group
+            - 4         # Name
+            - 5         # Datastore
+            #- 6         # Size
+            - 7        # Type
+            #- 8         # Registration time
+            #- 9        # Persistent
+            - 10        # Status
+            #- 11        # #VMs
+            #- 12       # Target
+        actions:
+            File.refresh: true
+            File.create_dialog: true
+            File.chown: false
+            File.chgrp: false
+            File.chmod: true
+            File.enable: true
+            File.disable: true
+            File.delete: true
+    infra-tab:
+        panel_tabs:
+        actions:
+    clusters-tab:
+        panel_tabs:
+            cluster_info_tab: true
+            cluster_host_tab: true
+            cluster_vnet_tab: true
+            cluster_datastore_tab: true
+        table_columns:
+            - 0         # Checkbox
+            - 1         # ID
+            - 2         # Name
+            - 3         # Hosts
+            - 4         # VNets
+            - 5         # Datastores
+        actions:
+            Cluster.refresh: true
+            Cluster.create_dialog: true
+            Cluster.update_dialog: true
+            Cluster.delete: true
+    hosts-tab:
+        panel_tabs:
+            host_info_tab: true
+            host_monitoring_tab: true
+        table_columns:
+            - 0         # Checkbox
+            - 1         # ID
+            - 2         # Name
+            - 3         # Cluster
+            - 4         # RVMs
+            #- 5         # Real CPU
+            - 6         # Allocated CPU
+            #- 7         # Real MEM
+            - 8         # Allocated MEM
+            - 9         # Status
+            #- 10        # IM MAD
+            #- 11        # VM MAD
+            #- 12        # Last monitored on
+        actions:
+            Host.refresh: true
+            Host.create_dialog: true
+            Host.addtocluster: true
+            Host.enable: true
+            Host.disable: true
+            Host.delete: true
+    datastores-tab:
+        panel_tabs:
+            datastore_info_tab: false
+            datastore_image_tab: true
+        table_columns:
+            - 0         # Checkbox
+            - 1         # ID
+            - 2         # Owner
+            - 3         # Group
+            - 4         # Name
+            - 5         # Capacity
+            - 6         # Cluster
+            #- 7         # Basepath
+            #- 8         # TM
+            #- 9         # DS
+            #- 10        # Type
+        actions:
+            Datastore.refresh: true
+            Datastore.create_dialog: false
+            Datastore.addtocluster: false
+            Datastore.chown: false
+            Datastore.chgrp: false
+            Datastore.chmod: true
+            Datastore.delete: false
+    vnets-tab:
+        panel_tabs:
+            vnet_info_tab: false
+            vnet_leases_tab: true
+        table_columns:
+            - 0         # Checkbox
+            - 1         # ID
+            - 2         # Owner
+            - 3         # Group
+            - 4         # Name
+            - 5         # Cluster
+            - 6         # Type
+            #- 7         # Bridge
+            - 8         # Leases
+        actions:
+            Network.refresh: true
+            Network.create_dialog: false
+            Network.addtocluster: false
+            Network.chown: false
+            Network.chgrp: false
+            Network.chmod: true
+            Network.delete: false
+            Network.addleases: false
+            Network.hold_lease: false
+            Network.remove_lease: false
+            Network.release_lease: false
+    marketplace-tab:
+        panel_tabs:
+            marketplace_info_tab: true
+        table_columns:
+            - 0         # Checkbox
+            #- 1         # ID
+            - 2         # Name
+            - 3         # Publisher
+            - 4         # Hypervisor
+            - 5         # Arch
+            - 6         # Format
+            #- 7         # Tags
+        actions:
+            Marketplace.refresh: true
+            Marketplace.import: true
+    oneflow-dashboard:
+        panel_tabs:
+        table_columns:
+        actions:
+    oneflow-services:
+        panel_tabs:
+            service_info_tab: true
+            service_roles_tab: true
+            service_log_tab: true
+        panel_tabs_actions:
+            service_roles_tab:
+                Role.scale: true
+                Role.hold: true
+                Role.release: true
+                Role.suspend: true
+                Role.resume: true
+                Role.stop: true
+                Role.boot: true
+                Role.reboot: true
+                Role.reboot_hard: true
+                Role.poweroff: true
+                Role.poweroff_hard: true
+                Role.shutdown: true
+                Role.shutdown_hard: true
+                Role.delete: true
+                Role.delete_recreate: true
+                RoleVM.hold: true
+                RoleVM.release: true
+                RoleVM.suspend: true
+                RoleVM.resume: true
+                RoleVM.stop: true
+                RoleVM.boot: true
+                RoleVM.reboot: true
+                RoleVM.reboot_hard: true
+                RoleVM.poweroff: true
+                RoleVM.poweroff_hard: true
+                RoleVM.undeploy: true
+                RoleVM.undeploy_hard: true
+                RoleVM.shutdown: true
+                RoleVM.shutdown_hard: true
+                RoleVM.delete: true
+                RoleVM.delete_recreate: true
+                RoleVM.resched: false
+                RoleVM.unresched: false
+                RoleVM.recover: false
+        table_columns:
+            - 0         # Checkbox
+            - 1         # ID
+            - 2         # Owner
+            - 3         # Group
+            - 4         # Name
+            - 5         # State
+        actions:
+            Service.refresh: true
+            Service.chown: false
+            Service.chgrp: false
+            Service.chmod: true
+            Service.shutdown: true
+            Service.recover: true
+            Service.delete: true
+    oneflow-templates:
+        panel_tabs:
+            service_template_info_panel: true
+            service_template_roles_tab: true
+        table_columns:
+            - 0         # Checkbox
+            - 1         # ID
+            - 2         # Owner
+            - 3         # Group
+            - 4         # Name
+        actions:
+            ServiceTemplate.refresh: true
+            ServiceTemplate.create_dialog: true
+            ServiceTemplate.instantiate: true
+            ServiceTemplate.chown: false
+            ServiceTemplate.chgrp: false
+            ServiceTemplate.chmod: true
+            ServiceTemplate.delete: true
+    provision-tab:
+        panel_tabs:
+        actions:

src/sunstone/public/js/plugins/dashboard-tab.js

@@ -185,20 +185,24 @@ var $dashboard;
 function dashboardQuotasHTML(){}
 
 $(document).ready(function(){
-    $dashboard = $('#dashboard-tab', main_tabs_context);
+    var tab_name = 'dashboard-tab';
 
-    $.each(Config.dashboardWidgets('widgets_three_per_row'), function(id, widget){
-      var html = '<div class="small-4 large-4 columns">'+widgets[widget]+'</div>';
-      $('#three_per_row', $dashboard).append(html);
-    })
+    if (Config.isTabEnabled(tab_name)) {
+      $dashboard = $('#dashboard-tab', main_tabs_context);
 
-    $.each(Config.dashboardWidgets('widgets_two_per_row'), function(id, widget){
-      var html = '<div class="small-6 large-6 columns">'+widgets[widget]+'</div>';
-      $('#two_per_row', $dashboard).append(html);
-    })
+      $.each(Config.dashboardWidgets('widgets_three_per_row'), function(id, widget){
+        var html = '<div class="small-4 large-4 columns">'+widgets[widget]+'</div>';
+        $('#three_per_row', $dashboard).append(html);
+      })
 
-    $.each(Config.dashboardWidgets('widgets_one_per_row'), function(id, widget){
-      var html = '<div class="row"><div class="large-12 columns">'+widgets[widget]+'</div></div><br>';
-      $('#one_per_row', $dashboard).append(html);
-    })
+      $.each(Config.dashboardWidgets('widgets_two_per_row'), function(id, widget){
+        var html = '<div class="small-6 large-6 columns">'+widgets[widget]+'</div>';
+        $('#two_per_row', $dashboard).append(html);
+      })
+
+      $.each(Config.dashboardWidgets('widgets_one_per_row'), function(id, widget){
+        var html = '<div class="row"><div class="large-12 columns">'+widgets[widget]+'</div></div><br>';
+        $('#one_per_row', $dashboard).append(html);
+      })
+    }
 });

src/sunstone/public/js/plugins/provision-tab.js

@@ -0,0 +1,515 @@
+/* -------------------------------------------------------------------------- */
+/* Copyright 2002-2014, OpenNebula Project (OpenNebula.org), C12G Labs        */
+/*                                                                            */
+/* 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.                                             */
+/* -------------------------------------------------------------------------- */
+
+var provision_create_vm = '<form id="provision_create_vm" class="hidden section_content">'+
+  '<div class="row">'+
+    '<div class="large-11 large-centered columns">'+
+      '<h2 class="subheader">'+tr("Create Virtual Machine")+'</h2>'+
+      '<br>'+
+    '</div>'+
+  '</div>'+
+  '<div class="row">'+
+    '<div class="large-9 large-centered columns">'+
+      '<input type="text" id="vm_name" placeholder="'+tr("Virtual Machine Name")+'" style="height: 40px !important; font-size: 16px; padding: 0.5rem  !important;"/>'+
+      '<br>'+
+    '</div>'+
+  '</div>'+
+  '<div class="row">'+
+    '<div class="large-10 large-centered columns">'+
+      '<h3 class="subheader">'+tr("Select Capacity")+'</h3>'+
+      '<br>'+
+    '</div>'+
+  '</div>'+
+  '<div class="row">'+
+    '<div class="large-9 large-centered columns">'+
+      '<table id="provision_templates_table">'+
+        '<thead class="hidden">'+
+          '<tr>'+
+            '<th>'+tr("ID")+'</th>'+
+            '<th>'+tr("Name")+'</th>'+
+          '</tr>'+
+        '</thead>'+
+        '<tbody class="hidden">'+
+        '</tbody>'+
+      '</table>'+
+      '<br>'+
+    '</div>'+
+  '</div>'+
+  '<div class="row">'+
+    '<div class="large-10 large-centered columns">'+
+      '<h3 class="subheader">'+tr("Select Image")+'</h3>'+
+      '<br>'+
+    '</div>'+
+  '</div>'+
+  '<div class="row">'+
+    '<div class="large-9 large-centered columns">'+
+      '<table id="provision_images_table">'+
+        '<thead class="hidden">'+
+          '<tr>'+
+            '<th>'+tr("ID")+'</th>'+
+            '<th>'+tr("Name")+'</th>'+
+          '</tr>'+
+        '</thead>'+
+        '<tbody class="hidden">'+
+        '</tbody>'+
+      '</table>'+
+      '<br>'+
+    '</div>'+
+  '</div>'+
+  '<br>'+
+  '<div class="row">'+
+    '<div class="large-9 columns large-centered">'+
+      '<div data-alert class="alert-box alert-box-error radius text-center hidden">'+
+      '</div>'+
+      '<button href="#" class="button large radius success right" type="submit">'+tr("Create")+'</button>'+
+    '</div>'+
+  '</div>'+
+  '<br>'+
+'</form>';
+
+var provision_list_vms = '<div id="provision_list_vms" class="section_content">'+
+  '<div class="row">'+
+    '<div class="large-11 large-centered columns">'+
+      '<h2 class="subheader">'+
+        tr("Virtual Machines")+
+        '<a href"#" id="provision_create_vm_button" class="button medium radius success right"><i class="fa fa-fw fa-plus"/>'+tr("Create")+'</a>'+
+      '</h2>'+
+    '</div>'+
+  '</div>'+
+  '<br>'+
+  '<div class="row">'+
+    '<div class="large-10 large-centered columns">'+
+      '<table id="provision_vms_table">'+
+        '<thead class="hidden">'+
+          '<tr>'+
+            '<th>'+tr("ID")+'</th>'+
+            '<th>'+tr("Name")+'</th>'+
+          '</tr>'+
+        '</thead>'+
+        '<tbody class="hidden">'+
+        '</tbody>'+
+      '</table>'+
+      '<br>'+
+    '</div>'+
+  '</div>'+
+'</div>';
+
+var provision_info_vm =  '<div id="provision_info_vm" class="section_content hidden">'+
+  '<div class="row">'+
+    '<div class="large-11 large-centered columns">'+
+      '<h2 class="subheader">'+
+        '<span id="provision_info_vm_name">'+
+        '</span>'+
+      '</h2>'+
+    '</div>'+
+  '</div>'+
+  '<div class="row">'+
+    '<div id="provision_info_vm_resume" class="large-10 large-centered columns">'+
+    '</div>'+
+  '</div>'+
+  '<br>'+
+  '<div class="row">'+
+    '<div  id="provision_info_vm_state" class="large-10 large-centered columns">'+
+    '</div>'+
+  '</div>'+
+  '<div class="row">'+
+    '<div  id="provision_info_vm_state_hr" class="large-10 large-centered columns">'+
+    '</div>'+
+  '</div>'+
+  '<br>'+
+  '<br>'+
+  '<div class="row">'+
+    '<div class="large-10 large-centered columns">'+
+        '<span class="left">'+
+          '<a href"#" id="" class="secondary button medium radius" style="font-size:12px"><i style="color: #555" class="fa fa-fw fa-power-off fa-2x"/><br>'+tr("Power off")+'</a>'+
+          '<a href"#" id="" class="secondary button medium radius" style="font-size:12px"><i style="color: #555" class="fa fa-fw fa-repeat fa-2x"/><br>'+tr("Reboot")+'</a>'+
+          '<a href"#" id="" class="secondary button medium radius" style="font-size:12px"><i style="color: #555" class="fa fa-fw fa-trash-o fa-2x"/><br>'+tr("Destroy")+'</a>'+
+        '</span>'+
+        '<span class="right">'+
+          '<a href"#" id="" class="secondary button medium radius" style="font-size:12px"><i style="color: #555" class="fa fa-fw fa-camera-retro fa-2x"/><br>'+tr("Snapshot")+'</a>'+
+          '<a href"#" id="" class="secondary button medium radius" style="font-size:12px"><i style="color: #555" class="fa fa-fw fa-desktop fa-2x"/><br>'+tr("VNC")+'</a>'+
+        '</span>'+
+    '</div>'+
+  '</div>'+
+  '<br>'+
+  '<div class="row">'+
+      '<div class="large-6 columns">'+
+        '<div class="row text-center">'+
+          '<div class="large-12 columns">'+
+            '<h3 class="subheader"><small>'+tr("REAL CPU")+'</small></h3>'+
+          '</div>'+
+        '</div>'+
+        '<div class="row">'+
+          '<div class="large-12 columns">'+
+            '<div class="large-10 columns centered graph vm_cpu_graph" style="height: 100px;">'+
+            '</div>'+
+          '</div>'+
+        '</div>'+
+        '<div class="row graph_legend">'+
+          '<div class="large-10 columns centered" id="vm_cpu_legend">'+
+          '</div>'+
+        '</div>'+
+      '</div>'+
+      '<div class="large-6 columns">'+
+        '<div class="row text-center">'+
+          '<h3 class="subheader"><small>'+tr("REAL MEMORY")+'</small></h3>'+
+        '</div>'+
+        '<div class="row">'+
+          '<div class="large-10 columns centered graph vm_memory_graph" style="height: 100px;">'+
+          '</div>'+
+        '</div>'+
+        '<div class="row graph_legend">'+
+          '<div class="large-10 columns centered" id="vm_memory_legend">'+
+          '</div>'+
+        '</div>'+
+      '</div>'+
+  '</div>'+
+'</div>';
+
+
+var provision_content = provision_create_vm +
+  provision_info_vm +
+  provision_list_vms ;
+
+var provision_tab = {
+  title: '<img src="images/one_small_logo.png" style="height:40px">',
+  list_header: '<img src="images/one_small_logo.png" style="height:40px">'+
+    '<span class="right" style="font-size: 70%">'+
+      '<a href"#" class="medium" id="provision_vms_list_button" style="margin-left: 20px;">'+tr("Virtual Machines")+'&emsp;</a>'+
+      '<a href"#" class="medium" style="margin-left: 20px;">'+tr("Images")+'</a>&emsp;'+
+      '<a href"#" class="medium" style="margin-left: 20px;"><i class="fa fa-fw fa-user" style="color: #777"/>'+tr("oneadmin")+'</a>&emsp;'+
+      '<a href"#" class="medium" style="margin-left: 20px;"><i class="fa fa-fw fa-sign-out" style="color: #777"/></a>'+
+    '</span>'+
+    '<br>',
+  content: provision_content
+};
+
+Sunstone.addMainTab('provision-tab',provision_tab);
+
+var update_provision_images_datatable = function(datatable) {
+  OpenNebula.Image.list({
+    timeout: true,
+    success: function (request, item_list){
+      datatable.fnClearTable(false);
+      datatable.fnAddData(item_list);
+    }
+  });
+}
+
+var update_provision_templates_datatable = function(datatable) {
+  OpenNebula.Template.list({
+    timeout: true,
+    success: function (request, item_list){
+      datatable.fnClearTable(false);
+      datatable.fnAddData(item_list);
+    }
+  });
+}
+
+var update_provision_vms_datatable = function(datatable) {
+  OpenNebula.VM.list({
+    timeout: true,
+    success: function (request, item_list){
+      datatable.fnClearTable(false);
+      datatable.fnAddData(item_list);
+    }
+  });
+}
+
+$(document).ready(function(){
+  var tab_name = 'provision-tab';
+  var tab = $("#"+tab_name);
+
+  if (Config.isTabEnabled(tab_name)) {
+    $(".left-content").remove();
+    $(".right-content").addClass("large-centered");
+
+    $(".user-zone-info").remove();
+
+    showTab('provision-tab');
+
+    //
+    // Create VM
+    //
+
+    var provision_templates_datatable = $('#provision_templates_table').dataTable({
+      "iDisplayLength": 6,
+      "sDom" : '<"H">t<"F"p>',
+      "aoColumnDefs": [
+          { "bVisible": false, "aTargets": ["all"]}
+      ],
+      "aoColumns": [
+          { "mDataProp": "VMTEMPLATE.ID" },
+          { "mDataProp": "VMTEMPLATE.NAME" }
+      ],
+      "fnPreDrawCallback": function (oSettings) {
+        // create a thumbs container if it doesn't exist. put it in the dataTables_scrollbody div
+        $("#provision_templates_table").html('<ul id="provision_templates_ul" class="small-block-grid-3 text-center"></ul>');
+
+        return true;
+      },
+      "fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
+        var data = aData.VMTEMPLATE;
+        $("#provision_templates_ul").append('<li>'+
+            '<ul class="provision-pricing-table hoverable" opennebula_id="'+data.ID+'">'+
+              '<li class="provision-title" title="'+data.NAME+'">'+
+                data.NAME+
+              '</li>'+
+              '<li class="provision-bullet-item">'+
+                '<i class="fa fa-fw fa-laptop"/>&emsp;'+
+                'x'+data.TEMPLATE.CPU+' - '+
+                ((data.TEMPLATE.MEMORY > 1000) ?
+                  (Math.floor(data.TEMPLATE.MEMORY/1024)+'GB') :
+                  (data.TEMPLATE.MEMORY+'MB'))+
+              '</li>'+
+              '<li class="provision-bullet-item">'+
+                '<i class="fa fa-fw fa-hdd-o"/>&emsp;'+
+                "500GB DISK"+
+              '</li>'+
+              '<li class="provision-description">'+
+                (data.TEMPLATE.DESCRIPTION || '...')+
+              '</li>'+
+            '</ul>'+
+          '</li>');
+
+        return nRow;
+      }
+    });
+
+    update_provision_templates_datatable(provision_templates_datatable);
+
+    var provision_images_datatable = $('#provision_images_table').dataTable({
+      "iDisplayLength": 6,
+      "sDom" : '<"H">t<"F"p>',
+      "aoColumnDefs": [
+          { "bVisible": false, "aTargets": ["all"]}
+      ],
+      "aoColumns": [
+          { "mDataProp": "IMAGE.ID" },
+          { "mDataProp": "IMAGE.NAME" }
+      ],
+      "fnPreDrawCallback": function (oSettings) {
+        // create a thumbs container if it doesn't exist. put it in the dataTables_scrollbody div
+        $("#provision_images_table").html('<ul id="provision_images_ul" class="small-block-grid-3 text-center"></ul>');
+
+        return true;
+      },
+      "fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
+        var data = aData.IMAGE;
+        $("#provision_images_ul").append('<li>'+
+            '<ul class="provision-pricing-table hoverable" opennebula_id="'+data.ID+'">'+
+              '<li class="provision-title">'+
+                data.NAME +
+              '</li>'+
+              '<li class="provision-bullet-item">'+'<i class="fa fa-fw fa-download" style="font-size:40px;"/>'+'</li>'+
+              '<li class="provision-description">'+
+                (data.TEMPLATE.DESCRIPTION || '...')+
+              '</li>'+
+            '</ul>'+
+          '</li>');
+
+        return nRow;
+      }
+    });
+
+    update_provision_images_datatable(provision_images_datatable);
+
+    tab.on("click", "#provision_create_vm .provision-pricing-table" , function(){
+      $(".provision-pricing-table", $(this).parents(".small-block-grid-3")).removeClass("selected")
+      $(this).addClass("selected");
+    })
+
+    $("#provision_create_vm").submit(function(){
+      var context = $(this);
+
+      var vm_name = $("#vm_name", context).val();
+      var image_id = $("#provision_images_ul .selected", context).attr("opennebula_id");
+      var template_id = $("#provision_templates_ul .selected", context).attr("opennebula_id");
+
+      if (!template_id) {
+        $(".alert-box-error", context).fadeIn().html(tr("You must select at least a capacity configuration"));
+        return false;
+      }
+
+      if (!image_id) {
+        $(".alert-box-error", context).fadeIn().html(tr("You must select at least an image"));
+        return false;
+      }
+
+      var extra_info = {
+        'vm_name' : vm_name,
+        'template': {
+          'disk': {
+            'image_id': image_id
+          }
+        }
+      }
+
+      Sunstone.runAction("Template.instantiate_quiet", template_id, extra_info);
+      $(".alert-box-error", context).hide();
+      return false;
+    })
+
+    $("#provision_create_vm_button").on("click", function(){
+      $(".section_content").hide();
+      $("#provision_create_vm").fadeIn();
+    });
+
+    //
+    // List VMs
+    //
+    var provision_vms_datatable = $('#provision_vms_table').dataTable({
+      "iDisplayLength": 6,
+      "sDom" : '<"H">t<"F"lp>',
+      "aoColumnDefs": [
+          { "bVisible": false, "aTargets": ["all"]}
+      ],
+      "aoColumns": [
+          { "mDataProp": "VM.ID" },
+          { "mDataProp": "VM.NAME" }
+      ],
+      "fnPreDrawCallback": function (oSettings) {
+        // create a thumbs container if it doesn't exist. put it in the dataTables_scrollbody div
+        $("#provision_vms_table").html('<ul id="provision_vms_ul" class="small-block-grid-3 text-center"></ul>');
+
+        return true;
+      },
+      "fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
+        var data = aData.VM;
+        var state = OpenNebula.Helper.resource_state("vm",data.STATE);
+        var state_color;
+        switch (state) {
+          case tr("INIT"):
+          case tr("PENDING"):
+          case tr("HOLD"):
+            state_color = 'warning';
+            break;
+          case tr("FAILED"):
+            state_color = 'error';
+            break;
+          case tr("ACTIVE"):
+            state_color = 'success';
+            break;
+          case tr("STOPPED"):
+          case tr("SUSPENDED"):
+          case tr("POWEROFF"):
+            state_color = 'secondary';
+            break;
+          default:
+            state_color = 'secondary';
+            break;
+        }
+
+      state_color= "success"
+        $("#provision_vms_ul").append('<li>'+
+            '<ul class="provision-pricing-table" opennebula_id="'+data.ID+'" datatable_index="'+iDisplayIndexFull+'">'+
+              '<li class="provision-title text-left">'+
+                '<a class="provision_info_vm_button" href="#"><i class="fa fa-fw fa-plus-square-o right"/>'+ data.NAME + '</a>'+
+              '</li>'+
+              '<li class="provision-bullet-item">'+
+                '<i class="fa fa-fw fa-laptop"/>&emsp;'+
+                'x'+data.TEMPLATE.CPU+' - '+
+                ((data.TEMPLATE.MEMORY > 1000) ?
+                  (Math.floor(data.TEMPLATE.MEMORY/1024)+'GB') :
+                  (data.TEMPLATE.MEMORY+'MB'))+
+              '</li>'+
+              '<li class="provision-bullet-item">'+
+                '<i class="fa fa-fw fa-download"></i>'+
+                'Ubuntu 12.04'+
+              '</li>'+
+              '<li class="provision-bullet-item">'+
+                '<i class="fa fa-fw fa-globe"/>'+
+                '192.168.1.1'+
+              '</li>'+
+              '<li class="provision-bullet-item text-left" style="font-size:12px; color: #999; margin-top:10px">'+
+                '<i class="fa fa-fw fa-clock-o"/>'+
+                pretty_time_runtime(data.STIME)+
+                '<span class="'+ state_color +'-color right">RUNNING</span>'+
+              '</li>'+
+              '<li class="provision-bullet-item '+ state_color +'-bg"></li>'+
+            '</ul>'+
+          '</li>');
+
+        return nRow;
+      }
+    });
+
+    update_provision_vms_datatable(provision_vms_datatable);
+
+    $("#provision_vms_list_button").on("click", function(){
+      $(".section_content").hide();
+      $("#provision_list_vms").fadeIn();
+    });
+
+    $(document).on("click", "#provision_vms_ul .provision_info_vm_button", function(){
+      $(".section_content").hide();
+      $("#provision_info_vm").fadeIn();
+
+      var datatable_index = $(this).parents(".provision-pricing-table").attr("datatable_index");
+      var aData = provision_vms_datatable.fnGetData(datatable_index);
+      var data = aData.VM;
+      var state = OpenNebula.Helper.resource_state("vm",data.STATE);
+      var state_color;
+      switch (state) {
+        case tr("INIT"):
+        case tr("PENDING"):
+        case tr("HOLD"):
+          state_color = 'warning';
+          break;
+        case tr("FAILED"):
+          state_color = 'error';
+          break;
+        case tr("ACTIVE"):
+          state_color = 'success';
+          break;
+        case tr("STOPPED"):
+        case tr("SUSPENDED"):
+        case tr("POWEROFF"):
+          state_color = 'secondary';
+          break;
+        default:
+          state_color = 'secondary';
+          break;
+      }
+
+      state_color= "success"
+      var context = $("#provision_info_vm");
+      $("#provision_info_vm_name", context).text(data.NAME);
+
+      $("#provision_info_vm_resume").html('<span class="secondary-color">'+
+              '<i class="fa fa-fw fa-laptop"/>&emsp;'+
+              'x'+data.TEMPLATE.CPU+' - '+
+              ((data.TEMPLATE.MEMORY > 1000) ?
+                (Math.floor(data.TEMPLATE.MEMORY/1024)+'GB') :
+                (data.TEMPLATE.MEMORY+'MB'))+
+              '&emsp;&emsp;<i class="fa fa-fw fa-download"></i>'+
+              'Ubuntu 12.04'+
+              '&emsp;&emsp;<i class="fa fa-fw fa-globe"/>'+
+              '192.168.1.1'+
+              '&emsp;&emsp;<i class="fa fa-fw fa-clock-o"/>'+
+              pretty_time_runtime(data.STIME)+
+        '</span>');
+
+      $("#provision_info_vm_state").html('<span class="'+ state_color +'-color right">'+state+'</span>');
+
+      $("#provision_info_vm_state_hr").html('<div style="height:3px" class="'+state_color+'-bg">'+
+        "</div>");
+
+      Sunstone.runAction("VM.monitor",data.ID, { monitor_resources : "CPU,MEMORY"});
+      return false;
+    })
+  }
+});

src/sunstone/public/js/plugins/vms-tab.js

@@ -765,13 +765,13 @@ var vm_actions = {
                     monitor_resources : "CPU",
                     labels : "Real CPU",
                     humanize_figures : false,
-                    div_graph : $("#vm_cpu_graph")
+                    div_graph : $(".vm_cpu_graph")
                 },
                 {
                     monitor_resources : "MEMORY",
                     labels : "Real MEM",
                     humanize_figures : true,
-                    div_graph : $("#vm_memory_graph")
+                    div_graph : $(".vm_memory_graph")
                 },
                 { labels : "Network reception",
                   monitor_resources : "NET_RX",
@@ -2558,7 +2558,7 @@ function printCapacity(vm_info){
               </div>\
               <div class="row">\
                 <div class="large-12 columns">\
-                  <div class="large-10 columns centered graph" id="vm_cpu_graph" style="height: 100px;">\
+                  <div class="large-10 columns centered graph vm_cpu_graph" style="height: 100px;">\
                   </div>\
                 </div>\
               </div>\
@@ -2572,7 +2572,7 @@ function printCapacity(vm_info){
                 <h3 class="subheader"><small>'+tr("REAL MEMORY")+'</small></h3>\
               </div>\
               <div class="row">\
-                <div class="large-10 columns centered graph" id="vm_memory_graph" style="height: 100px;">\
+                <div class="large-10 columns centered graph vm_memory_graph" style="height: 100px;">\
                 </div>\
               </div>\
               <div class="row graph_legend">\

src/sunstone/public/js/sunstone.js

@@ -1029,7 +1029,7 @@ function pretty_time_runtime(time){
     var month = pad(d.getUTCMonth()+1,2); //getMonths returns 0-11
     var year = d.getUTCFullYear();
 
-    return day + "d " + hour + ":" + mins;
+    return day + "d " + hour + "h " + mins + "m ";
 }
 
 //returns a human readable size in Kilo, Mega, Giga or Tera bytes
@@ -3740,4 +3740,3 @@ $(document).ready(function(){
       }
     })
 });
-

src/sunstone/public/scss/_settings.scss

@@ -37,7 +37,7 @@ $row-width: rem-calc(1200);
 
 // We use these to control various global styles
 // $body-bg: #fff;
-// $body-font-color: #222;
+$body-font-color: #333;
 $body-font-family: "Open Sans", sans-serif;
 // $body-font-weight: normal;
 // $body-font-style: normal;
@@ -124,7 +124,7 @@ $secondary-color: #F5F5F5;
 
 // We use these to control header font sizes
 // $h1-font-size: rem-calc(44);
-// $h2-font-size: rem-calc(37);
+$h2-font-size: rem-calc(30);
 $h3-font-size: rem-calc(24);
 // $h4-font-size: rem-calc(23);
 // $h5-font-size: rem-calc(18);
@@ -786,18 +786,18 @@ $fieldset-padding: rem-calc(20);
 // $include-html-pricing-classes: $include-html-classes;
 
 // We use this to control the border color
-// $price-table-border: solid 1px #ddd;
+$price-table-border: 1px solid #efefef;
 
 // We use this to control the bottom margin of the pricing table
-// $price-table-margin-bottom: rem-calc(20);
+$price-table-margin-bottom: rem-calc(0);
 
 // We use these to control the title styles
-// $price-title-bg: #333;
-// $price-title-padding: rem-calc(15 20);
+$price-title-bg: #f6f6f6;
+$price-title-padding: rem-calc(10);
 // $price-title-align: center;
-// $price-title-color: #eee;
-// $price-title-weight: normal;
-// $price-title-size: rem-calc(16);
+$price-title-color: #555;
+$price-title-weight: bold;
+$price-title-size: rem-calc(16);
 // $price-title-font-family: $body-font-family;
 
 // We use these to control the price styles
@@ -811,22 +811,22 @@ $fieldset-padding: rem-calc(20);
 
 
 // We use these to control the description styles
-// $price-bg: #fff;
-// $price-desc-color: #777;
-// $price-desc-padding: rem-calc(15);
+$price-desc-color: #999;
+$price-desc-padding: rem-calc(10);
 // $price-desc-align: center;
 // $price-desc-font-size: rem-calc(12);
 // $price-desc-weight: normal;
 // $price-desc-line-height: 1.4;
-// $price-desc-bottom-border: dotted 1px #ddd;
+$price-desc-bottom-border: none;
 
 // We use these to control the list item styles
-// $price-item-color: #333;
-// $price-item-padding: rem-calc(15);
+$price-bg: #f6f6f6;
+$price-item-color: #777;
+$price-item-padding: rem-calc(5);
 // $price-item-align: center;
-// $price-item-font-size: rem-calc(14);
+$price-item-font-size: rem-calc(14);
 // $price-item-weight: normal;
-// $price-item-bottom-border: dotted 1px #ddd;
+$price-item-bottom-border: none;
 
 // We use these to control the CTA area styles
 // $price-cta-bg: #fff;

src/sunstone/public/scss/app.scss

@@ -63,6 +63,7 @@
 
 .left-content {
   padding-top: 31px;
+  padding-left: 20px;
 }
 
 .left-header {
@@ -76,7 +77,8 @@
 
 .right-content {
   padding-top: 20px;
-  padding-left: 40px;
+  padding-left: 20px;
+  padding-right: 20px;
 }
 
 .right-info {
@@ -107,6 +109,10 @@ table {
     td {
         color: #555 !important;
     }
+
+    tfoot {
+        background-color: #fff !important;
+    }
 }
 
 table.dataTable {
@@ -625,3 +631,113 @@ div.dataTables_scrollFoot table {
     background-color: #F39999!important;
     color: #660000;
 }
+
+
+.custom-panel {
+  @include panel();
+
+  border-color: #efefef;
+  margin-bottom: 0px;
+}
+
+.provision-pricing-table  {
+  @include pricing-table-container;
+
+  .provision-title  {
+    @include pricing-table-title;
+
+    font-weight: normal;
+    color: #0099c3;
+  }
+  .provision-price  {
+    @include pricing-table-price;
+  }
+  .provision-description   {
+    @include pricing-table-description;
+  }
+  .provision-bullet-item {
+    @include pricing-table-bullet;
+  }
+  .provision-cta    {
+    @include pricing-table-cta;
+  }
+
+  -webkit-border-radius: 4px;
+  -moz-border-radius: 4px;
+  border-radius: 4px;
+
+  background: #f6f6f6;
+
+  li {
+    background: none;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+
+  &.hoverable:not(.selected):hover {
+
+    li:not(.provision-title) {
+      background: scale-color(#fff, $lightness: -10%) !important;
+      color: #333;
+    }
+
+    li {
+      color: #333;
+    }
+
+    cursor: pointer;
+  }
+
+  &.selected {
+    //border: 1px solid #0099c3;
+
+    li {
+      color: #fff;
+      background: #0099c3 !important;
+      //color: #333;
+      //font-weight: bold;
+    }
+
+    .provision-title  {
+      font-weight: bold;
+    }
+
+    .provision-description   {
+      //color: #cfcfcf;
+    }
+  }
+
+}
+
+.warning-bg {
+  background-color: scale-color($warning-color, $lightness:50%) !important;
+}
+
+.error-bg {
+  background-color: scale-color($alert-color, $lightness:50%) !important;
+}
+
+.secondary-bg {
+  background-color: scale-color($secondary-color, $lightness:50%) !important;
+}
+
+.success-bg {
+  background-color: scale-color($success-color, $lightness:50%) !important;
+}
+
+
+.warning-color {
+  color: $warning-color;
+}
+
+.error-color {
+  color: $alert-color;
+}
+
+.secondary-color {
+  color: #777;
+}
+
+.success-color {
+  color: $success-color;
+}

src/sunstone/views/index.erb

@@ -70,7 +70,6 @@
     <!-- end tabs -->
   </head>
   <body class="antialiased row">
-    <div class="row collapse" style="height:100%;">
       <div class="small-2 large-2 columns left-content">
         <div class="row left-header">
           <div class="large-12 columns">
@@ -87,7 +86,6 @@
         <div class="row right-header">
         </div>
       </div>
-    </div>
     <div id="dialogs"></div>
     <div class="left-footer text-center">
       <a href="http://opennebula.org" target="_blank">OpenNebula 4.5.80</a> by <a href="http://c12g.com" target="_blank">C12G Labs</a>.