incubator-cloudstack-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From wid...@apache.org
Subject [31/58] [abbrv] git commit: refs/heads/qemu-img - Quick view UI: Fix to support multiple quick links
Date Fri, 22 Feb 2013 14:01:11 GMT
Quick view UI: Fix to support multiple quick links

There was previously a limitation in the detail view/quickview where
only 1 'view all' link was visible per page. Change this to show n
number of view all links, if an array is passed to 'viewAll.' This also
lowers the # of clicks necessary to navigate to some items.

This also adds more view all buttons to instances, storage, and system
resources.


Project: http://git-wip-us.apache.org/repos/asf/incubator-cloudstack/repo
Commit: http://git-wip-us.apache.org/repos/asf/incubator-cloudstack/commit/1ac86e96
Tree: http://git-wip-us.apache.org/repos/asf/incubator-cloudstack/tree/1ac86e96
Diff: http://git-wip-us.apache.org/repos/asf/incubator-cloudstack/diff/1ac86e96

Branch: refs/heads/qemu-img
Commit: 1ac86e96cbc944ce094f894d06147c6944381382
Parents: fe6fc0a
Author: Brian Federle <brian.federle@citrix.com>
Authored: Thu Feb 21 15:09:03 2013 -0800
Committer: Brian Federle <brian.federle@citrix.com>
Committed: Thu Feb 21 15:09:03 2013 -0800

----------------------------------------------------------------------
 ui/css/cloudstack3.css              |   34 +++++++--
 ui/scripts/instances.js             |  109 ++++++++++++++++++-----------
 ui/scripts/storage.js               |   16 +++++
 ui/scripts/system.js                |   16 +++--
 ui/scripts/ui/widgets/detailView.js |  103 ++++++++++++++++++----------
 5 files changed, 187 insertions(+), 91 deletions(-)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/incubator-cloudstack/blob/1ac86e96/ui/css/cloudstack3.css
----------------------------------------------------------------------
diff --git a/ui/css/cloudstack3.css b/ui/css/cloudstack3.css
index efdae35..cf18ab2 100644
--- a/ui/css/cloudstack3.css
+++ b/ui/css/cloudstack3.css
@@ -1276,14 +1276,14 @@ div.list-view td.state.off span {
 
 /** Quick view tooltip*/
 .quick-view-tooltip {
-  width: 400px;
+  width: 470px;
   display: inline-block;
-  margin-left: -359px;
+  margin-left: -462px;
   padding-top: 50px;
 }
 
 .quick-view-tooltip > div.title {
-  width: 376px;
+  width: 444px;
   position: absolute;
   top: 71px;
   left: 10px;
@@ -1320,7 +1320,7 @@ div.list-view td.state.off span {
 .quick-view-tooltip .container {
   border: 1px solid #9EA2A5;
   background: #CCCFD6;
-  width: 400px;
+  width: 470px;
   min-height: 100px;
   height: auto;
   overflow: hidden;
@@ -1337,7 +1337,7 @@ div.list-view td.state.off span {
 }
 
 .quick-view-tooltip .detail-view .main-groups {
-  width: 394px;
+  width: 456px;
   height: 132px;
   position: absolute;
   top: 55px;
@@ -1484,7 +1484,7 @@ div.list-view td.state.off span {
 }
 
 .quick-view-tooltip .detail-view .detail-group.actions .detail-actions {
-  width: 400px;
+  width: 460px;
   height: auto;
   background: none;
   vertical-align: top;
@@ -1495,7 +1495,7 @@ div.list-view td.state.off span {
   position: relative;
   left: 0px;
   float: left;
-  width: 394px;
+  width: 460px;
   height: 22px;
   border-top: 1px solid #808080;
   /*+box-shadow:inset 0px 1px #FFFFFF;*/
@@ -1911,6 +1911,20 @@ div.details .main-groups label.error {
   top: 6px;
 }
 
+.detail-view td.view-all.multiple {
+  width: 123px !important;
+  height: 22px;
+  float: left;
+  display: block;
+  margin: 8px 2px 8px 8px;
+  border: none !important;
+  /*+box-shadow:none;*/
+  -moz-box-shadow: none !important;
+  -webkit-box-shadow: none !important;
+  -o-box-shadow: none !important;
+  box-shadow: none !important;
+}
+
 /*** Actions*/
 div.detail-group.actions {
   padding: 0;
@@ -1935,6 +1949,12 @@ div.detail-group.actions td {
   height: 26px;
 }
 
+.detail-group table td.detail-actions.full-length {
+  display: block;
+  width: 99%;
+  border-bottom: 1px solid #AAAAAA;
+}
+
 .detail-group table td.detail-actions .action.text {
   padding: 0px 6px 0px 0px;
   cursor: pointer;

http://git-wip-us.apache.org/repos/asf/incubator-cloudstack/blob/1ac86e96/ui/scripts/instances.js
----------------------------------------------------------------------
diff --git a/ui/scripts/instances.js b/ui/scripts/instances.js
index 264b5a1..76ca693 100644
--- a/ui/scripts/instances.js
+++ b/ui/scripts/instances.js
@@ -34,15 +34,15 @@
           },
           label: 'state.Destroyed'
         }
-      },			
+      },
 			preFilter: function(args) {
 				var hiddenFields = [];
-				if(!isAdmin()) {				
+				if(!isAdmin()) {
 					hiddenFields.push('instancename');
-				}			
+				}
 				return hiddenFields;
-			},			
-      fields: {      
+			},
+      fields: {
 				name: { label: 'label.name' },
 				instancename: { label: 'label.internal.name' },
 				displayname: { label: 'label.display.name' },
@@ -57,18 +57,18 @@
           }
         }
       },
-			
+
 			advSearchFields: {
 				name: { label: 'Name' },
-				zoneid: { 
-					label: 'Zone',							
-					select: function(args) {							  					
+				zoneid: {
+					label: 'Zone',
+					select: function(args) {
 						$.ajax({
 							url: createURL('listZones'),
 							data: {
 								listAll: true
 							},
-							success: function(json) {									  
+							success: function(json) {
 								var zones = json.listzonesresponse.zone;
 
 								args.response.success({
@@ -81,16 +81,16 @@
 								});
 							}
 						});
-					}						
-				},	
-				
-				domainid: {					
-				  label: 'Domain',					
+					}
+				},
+
+				domainid: {
+				  label: 'Domain',
 					select: function(args) {
 					  if(isAdmin() || isDomainAdmin()) {
 							$.ajax({
 								url: createURL('listDomains'),
-								data: { 
+								data: {
 									listAll: true,
 									details: 'min'
 								},
@@ -120,21 +120,21 @@
 						else
 						  return true;
 					}
-				},		
-        account: { 
+				},
+        account: {
 				  label: 'Account',
           isHidden: function(args) {
 					  if(isAdmin() || isDomainAdmin())
 						  return false;
 						else
 						  return true;
-					}			
+					}
 				},
-				
+
 				tagKey: { label: 'Tag Key' },
-				tagValue: { label: 'Tag Value' }						
-			},						
-			
+				tagValue: { label: 'Tag Value' }
+			},
+
       // List view actions
       actions: {
         // Add instance wizard
@@ -145,9 +145,9 @@
             custom: cloudStack.uiCustom.instanceWizard(cloudStack.instanceWizard)
           },
 
-          messages: {            
-            notification: function(args) {              
-              return 'label.vm.add'; 
+          messages: {
+            notification: function(args) {
+              return 'label.vm.add';
             }
           },
           notification: {
@@ -346,49 +346,49 @@
 
       dataProvider: function(args) {
 			  var data = {};
-				listViewDataProvider(args, data);		
-				        				
+				listViewDataProvider(args, data);
+
 				if(args.filterBy != null) {	//filter dropdown
 					if(args.filterBy.kind != null) {
 						switch(args.filterBy.kind) {
-						case "all":						  						
+						case "all":
 							break;
 						case "mine":
 							if (!args.context.projects) {
 							  $.extend(data, {
-								  domainid: g_domainid, 
+								  domainid: g_domainid,
 									account: g_account
-								});		
-              }								
+								});
+              }
 							break;
 						case "running":
 						  $.extend(data, {
 							  state: 'Running'
-							});						
+							});
 							break;
 						case "stopped":
 						  $.extend(data, {
 							  state: 'Stopped'
-							});	
+							});
 							break;
 						case "destroyed":
 						  $.extend(data, {
 							  state: 'Destroyed'
-							});									
+							});
 							break;
 						}
-					}					
+					}
 				}
-								
-        if("hosts" in args.context) {          
+
+        if("hosts" in args.context) {
 					$.extend(data, {
 					  hostid: args.context.hosts[0].id
 					});
 				}
-					 							
+
         $.ajax({
           url: createURL('listVirtualMachines'),
-          data: data,          
+          data: data,
           success: function(json) {
             var items = json.listvirtualmachinesresponse.virtualmachine;
            // Code for hiding "Expunged VMs"
@@ -419,7 +419,34 @@
 
       detailView: {
         name: 'Instance details',
-        viewAll: [{ path: 'storage.volumes', label: 'label.volumes' }, { path: 'vmsnapshots',
label: 'Snapshots' } ],
+        viewAll: [
+          { path: 'storage.volumes', label: 'label.volumes' },
+          { path: 'vmsnapshots', label: 'label.snapshots' },
+          {
+            path: '_zone.hosts',
+            label: 'label.hosts',
+            preFilter: function(args) {
+              return isAdmin();
+            },
+            updateContext: function(args) {
+              var instance = args.context.instances[0];
+              var zone;
+
+              $.ajax({
+                url: createURL('listZones'),
+                data: {
+                  id: instance.zoneid
+                },
+                async: false,
+                success: function(json) {
+                  zone = json.listzonesresponse.zone[0]
+                }
+              });
+
+              return { zones: [zone] };
+            }
+          }
+        ],
         tabFilter: function(args) {
           var hiddenTabs = [];
 					

http://git-wip-us.apache.org/repos/asf/incubator-cloudstack/blob/1ac86e96/ui/scripts/storage.js
----------------------------------------------------------------------
diff --git a/ui/scripts/storage.js b/ui/scripts/storage.js
index 73a496e..5c19bd0 100644
--- a/ui/scripts/storage.js
+++ b/ui/scripts/storage.js
@@ -1282,6 +1282,7 @@
 					
           dataProvider: function(args) {					  
 						var data = {};
+            var instanceVolumeIds = [];
 						listViewDataProvider(args, data);		
             
             if(args.context != null) {
@@ -1289,6 +1290,21 @@
 							  $.extend(data, {
 								  volumeid: args.context.volumes[0].id
 								});                
+              } else if (args.context.instances) {
+                $.ajax({
+                  url: createURL('listVolumes'),
+                  data: {
+                    virtualmachineid: args.context.instances[0].id,
+                    listAll: true
+                  },
+                  async: false,
+                  success: function(json) {
+                    instanceVolumeIds = $.map(json.listvolumesresponse.volume, function(volume)
{
+                      return volume.id;
+                    })
+                  }
+                });
+                data.volumeid = instanceVolumeIds.join(',');
               }
             }
 

http://git-wip-us.apache.org/repos/asf/incubator-cloudstack/blob/1ac86e96/ui/scripts/system.js
----------------------------------------------------------------------
diff --git a/ui/scripts/system.js b/ui/scripts/system.js
index e51bf90..8e54d02 100644
--- a/ui/scripts/system.js
+++ b/ui/scripts/system.js
@@ -7965,11 +7965,17 @@
 								}
 							}
 						}
-            array1.push("&zoneid=" + args.context.zones[0].id);
-            if("pods" in args.context)
-              array1.push("&podid=" + args.context.pods[0].id);
-            if("clusters" in args.context)
-              array1.push("&clusterid=" + args.context.clusters[0].id);
+
+            if (!args.context.instances) {
+              array1.push("&zoneid=" + args.context.zones[0].id);
+              if("pods" in args.context)
+                array1.push("&podid=" + args.context.pods[0].id);
+              if("clusters" in args.context)
+                array1.push("&clusterid=" + args.context.clusters[0].id);
+            } else {
+              array1.push("&hostid=" + args.context.instances[0].hostid);
+            }
+
             $.ajax({
               url: createURL("listHosts&type=Routing" + array1.join("") + "&page="
+ args.page + "&pagesize=" + pageSize),
               dataType: "json",

http://git-wip-us.apache.org/repos/asf/incubator-cloudstack/blob/1ac86e96/ui/scripts/ui/widgets/detailView.js
----------------------------------------------------------------------
diff --git a/ui/scripts/ui/widgets/detailView.js b/ui/scripts/ui/widgets/detailView.js
index 97933a9..f0cc8fd 100644
--- a/ui/scripts/ui/widgets/detailView.js
+++ b/ui/scripts/ui/widgets/detailView.js
@@ -578,7 +578,7 @@
     }
   };
 
-  var viewAll = function(viewAllID) {
+  var viewAll = function(viewAllID, options) {
     var $detailView = $('div.detail-view:last');
     var args = $detailView.data('view-args');
     var cloudStackArgs = $('[cloudstack-container]').data('cloudStack-args');
@@ -586,6 +586,7 @@
     var listViewArgs, viewAllPath;
     var $listView;
     var isCustom = $.isFunction(viewAllID.custom);
+    var updateContext = options.updateContext;
 
     if (isCustom) {
       $browser.cloudBrowser('addPanel', {
@@ -637,6 +638,10 @@
     // Load context data
     var context = $.extend(true, {}, $detailView.data('view-args').context);
 
+    if (updateContext) {
+      $.extend(context, updateContext({ context: context }));
+    }
+
     // Make panel
     var $panel = $browser.cloudBrowser('addPanel', {
       title: _l(listViewArgs.title),
@@ -823,16 +828,7 @@
 				 */
 				
         $name.html(_l(value.label));
-
-        if (!value.isExternalLink) {
-          $value.html(_s(content));
-        } else {
-          $value.html('').append(
-            $('<a>').attr({
-              href: _s(content)
-            }).html(_s(content))
-          );
-        }
+        $value.html(_s(content));
 
         // Set up validation metadata
         $value.data('validation-rules', value.validation);
@@ -901,32 +897,58 @@
         $actions.prependTo($firstRow.closest('div.detail-group').closest('.details'));
       }
       if (detailViewArgs.viewAll && showViewAll) {
-       
-      if( !(detailViewArgs.viewAll instanceof Array)){
-       	detailViewArgs.viewAll = [detailViewArgs.viewAll];
-      }
-      $.each(detailViewArgs.viewAll, function(n, view){
-        $('<div>')
-          .addClass('view-all')
-          .append(
-            $('<a>')
-              .attr({ href: '#' })
-              .css('padding','0 1px')
-              .data('detail-view-link-view-all', view)
+        if (!$.isArray(detailViewArgs.viewAll)) {
+          $('<div>')
+            .addClass('view-all')
+            .append(
+              $('<a>')
+                .attr({ href: '#' })
+                .data('detail-view-link-view-all', detailViewArgs.viewAll)
+                .append(
+                  $('<span>').html(_l('label.view') + ' ' + _l(detailViewArgs.viewAll.label))
+                )
+            )
+            .append(
+              $('<div>').addClass('end')
+            )
+            .appendTo(
+              $('<td>')
+                .addClass('view-all')
+                .appendTo($actions.find('tr'))
+            );
+        } else {
+          $(detailViewArgs.viewAll).each(function() {
+            var viewAllItem = this;
+
+            if (viewAllItem.preFilter &&
+                !viewAllItem.preFilter({ context: context })) {
+              return true;
+            }
+
+            $('<div>')
+              .addClass('view-all')
               .append(
-                $('<span>').html(_l('label.view') + ' ' + _l(view.label))
+                $('<a>')
+                  .attr({ href: '#' })
+                  .data('detail-view-link-view-all', viewAllItem)
+                  .append(
+                    $('<span>').html(_l('label.view') + ' ' + _l(viewAllItem.label))
+                  )
               )
-          )
-          .append(
-            $('<div>').addClass('end')
-          )
-          .appendTo(
-            $('<td>')
-              .addClass('view-all')
-              .css('padding','9px 3px 8px 0')
-              .appendTo($actions.find('tr'))
-          );
-        });
+              .append(
+                $('<div>').addClass('end')
+              )
+              .appendTo(
+                $('<td>')
+                  .addClass('view-all multiple')
+                  .appendTo($actions.find('tr'))
+              );
+
+            $actions.find('td.view-all:first').addClass('first');
+            $actions.find('td.view-all:last').addClass('last');
+            $actions.find('td.detail-actions').addClass('full-length');
+          });
+        }
       }
     }
 
@@ -1187,12 +1209,17 @@
   $('a').live('click', function(event) {
     var $target = $(event.target);
     var $viewAll = $target.closest('td.view-all a');
+    var viewAllArgs;
 
     if ($target.closest('div.detail-view').size() && $target.closest('td.view-all
a').size()) {
+      viewAllArgs = $viewAll.data('detail-view-link-view-all');
       viewAll(
-        $viewAll.data('detail-view-link-view-all').custom ?
-          $viewAll.data('detail-view-link-view-all') :
-          $viewAll.data('detail-view-link-view-all').path
+        viewAllArgs.custom ?
+          viewAllArgs :
+          viewAllArgs.path,
+        {
+          updateContext: viewAllArgs.updateContext
+        }
       );
       return false;
     }


Mime
View raw message