new UI - Volumes page - add Snapshot tab that list all snapshots under this volume.

ui/new/jsp/volume.jsp

@@ -22,8 +22,10 @@
         </p>
     </div>
     <div class="tabbox" style="margin-top: 15px;">
-        <div class="content_tabs on">
+        <div class="content_tabs on" id="tab_details">
             <%=t.t("Details")%></div>
+        <div class="content_tabs off" id="tab_snapshot">
+            <%=t.t("Snapshot")%></div>
     </div>
     <!--Details tab (start)-->
     <div id="tab_content_details">
@@ -161,6 +163,10 @@
             </div>
         </div>
     </div>
+    <!--Details tab (end)-->
+    <!--Snapshot tab (start)-->
+    <div style="display: none;" id="tab_content_snapshot">
+    </div> 
 </div>
 <!-- volume detail panel (end) -->
 <!-- Create Template Dialog -->
@@ -583,4 +589,104 @@
         </form>
     </div>
 </div>
-<!-- Attach Volume Dialog (end) -->
+<!-- Attach Volume Dialog (end) -->
+
+<!--  Snapshot tab template (begin) -->
+<div class="grid_container" id="snapshot_tab_template" style="display: none">
+    <div class="grid_header">
+        <div class="grid_header_title" id="name">
+        </div>
+        <div class="grid_actionbox" id="snapshot_action_link">
+            <div class="grid_actionsdropdown_box" id="snapshot_action_menu" style="display: none;">
+                <ul class="actionsdropdown_boxlist" id="action_list">
+                </ul>
+            </div>
+        </div>
+        <div class="gridheader_loaderbox" id="spinning_wheel" style="display: none; height: 18px;">
+            <div class="gridheader_loader" id="icon">
+            </div>
+            <p id="description">
+                Waiting &hellip;
+            </p>
+        </div>       
+    </div>
+    
+    <div class="grid_rows" id="after_action_info_container" style="display:none">
+        <div class="grid_row_cell" style="width: 90%; border: none;">
+            <div class="row_celltitles">
+                <strong id="after_action_info">Message will appear here</strong></div>
+        </div>
+    </div>
+        
+    <div class="grid_rows even">
+        <div class="grid_row_cell" style="width: 20%;">
+            <div class="row_celltitles">
+                ID:</div>
+        </div>
+        <div class="grid_row_cell" style="width: 79%;">
+            <div class="row_celltitles" id="id">
+            </div>
+        </div>
+    </div>
+    <div class="grid_rows odd">
+        <div class="grid_row_cell" style="width: 20%;">
+            <div class="row_celltitles">
+                Snapshot Name:</div>
+        </div>
+        <div class="grid_row_cell" style="width: 79%;">
+            <div class="row_celltitles" id="name">
+            </div>
+        </div>
+    </div>
+    <div class="grid_rows even">
+        <div class="grid_row_cell" style="width: 20%;">
+            <div class="row_celltitles">
+                Volume Name:</div>
+        </div>
+        <div class="grid_row_cell" style="width: 79%;">
+            <div class="row_celltitles" id="volumename">
+            </div>
+        </div>
+    </div>
+    <div class="grid_rows odd">
+        <div class="grid_row_cell" style="width: 20%;">
+            <div class="row_celltitles">
+                Interval Type:</div>
+        </div>
+        <div class="grid_row_cell" style="width: 79%;">
+            <div class="row_celltitles" id="intervaltype">
+            </div>
+        </div>
+    </div>
+    <div class="grid_rows even">
+        <div class="grid_row_cell" style="width: 20%;">
+            <div class="row_celltitles">
+                Created:</div>
+        </div>
+        <div class="grid_row_cell" style="width: 79%;">
+            <div class="row_celltitles" id="created">
+            </div>
+        </div>
+    </div>
+    <div class="grid_rows odd">
+        <div class="grid_row_cell" style="width: 20%;">
+            <div class="row_celltitles">
+                Account:</div>
+        </div>
+        <div class="grid_row_cell" style="width: 79%;">
+            <div class="row_celltitles" id="account">
+            </div>
+        </div>
+    </div>
+    <div class="grid_rows even">
+        <div class="grid_row_cell" style="width: 20%;">
+            <div class="row_celltitles">
+                Domain:</div>
+        </div>
+        <div class="grid_row_cell" style="width: 79%;">
+            <div class="row_celltitles" id="domain">
+            </div>
+        </div>
+    </div>    
+</div>
+<!--  Snapshot tab template (end) -->

ui/new/scripts/cloud.core2.instance.js

@@ -397,6 +397,7 @@ function clickInstanceGroupHeader($arrowIcon) {
         }
         
         vmJsonToDetailsTab(jsonObj, $midmenuItem);   
+        vmJsonToVolumeTab(jsonObj);
     }
      
     function vmJsonToDetailsTab(jsonObj, $midmenuItem){
@@ -416,11 +417,14 @@ function clickInstanceGroupHeader($arrowIcon) {
         $detailsTab.find("#group").text(fromdb(jsonObj.group));	
         
         setBooleanField(jsonObj.haenable, $detailsTab.find("#haenable"));	
-        setBooleanField((jsonObj.isoid != null && jsonObj.isoid.length > 0), $detailsTab.find("#iso"));	
-            
+        setBooleanField((jsonObj.isoid != null && jsonObj.isoid.length > 0), $detailsTab.find("#iso"));	   
+    }
+    
+    function vmJsonToVolumeTab(jsonObj) {
         //volume tab
         //if (getHypervisorType() == "kvm") 
-			//detail.find("#volume_action_create_template").show();		        
+			//detail.find("#volume_action_create_template").show();		
+    
         $.ajax({
 			cache: false,
 			data: createURL("command=listVolumes&virtualMachineId="+jsonObj.id+maxPageSize),
@@ -437,7 +441,7 @@ function clickInstanceGroupHeader($arrowIcon) {
 					}
 				}						
 			}
-		});           
+		});          
     }
         
     function vmClearRightPanel(jsonObj) {       
@@ -510,12 +514,7 @@ function clickInstanceGroupHeader($arrowIcon) {
 		} 
 		else { //json.type=="DATADISK": "detach disk" is allowed, "create template" is disallowed.			
 			buildActionLinkForSubgridItem("Detach Disk", vmVolumeActionMap, $actionMenu, volumeListAPIMap, template);				
-		}	
-		
-		template.find("#action_message_box #close_button").bind("click", function(event){
-		    $(this).parent().hide();
-		    return false;
-		});
+		}			
 	}
     //***** declaration for volume tab (end) *********************************************************
     
@@ -1255,18 +1254,7 @@ function clickInstanceGroupHeader($arrowIcon) {
 	    });
         //***** VM Wizard (end) ********************************************************************************
         
-        //***** Volume tab (begin) *****************************************************************************
-        /*
-        $("#volume_action_link").live("mouseover", function(event) {
-            $(this).find("#volume_action_menu").show();    
-            return false;
-        });
-        $("#volume_action_link").live("mouseout", function(event) {
-            $(this).find("#volume_action_menu").hide();    
-            return false;
-        });
-        */
-                
+        //***** Volume tab (begin) *****************************************************************************         
         $.ajax({
 	        data: createURL("command=listOsTypes&response=json"),
 		    dataType: "json",
@@ -1279,10 +1267,8 @@ function clickInstanceGroupHeader($arrowIcon) {
 				    }
 			    }	
 		    }
-	    });
-        
-        //***** Volume tab (end) *******************************************************************************
-    
+	    });        
+        //***** Volume tab (end) *******************************************************************************    
     
     });	
 }  

ui/new/scripts/cloud.core2.volume.js

@@ -351,6 +351,23 @@ function afterLoadVolumeJSP() {
 	});	
 	// *** recurring snapshot dialog - event binding (end) ******************************	    
      
+    //***** switch to different tab (begin) ********************************************************************
+    $("#tab_details").bind("click", function(event){
+        $(this).removeClass("off").addClass("on");
+        $("#tab_snapshot").removeClass("on").addClass("off");  
+        $("#tab_content_details").show();     
+        $("#tab_content_snapshot").hide();   
+        return false;
+    });
+    
+    $("#tab_snapshot").bind("click", function(event){
+        $(this).removeClass("off").addClass("on");
+        $("#tab_details").removeClass("on").addClass("off");   
+        $("#tab_content_snapshot").show();    
+        $("#tab_content_details").hide();    
+        return false;
+    });
+    //***** switch to different tab (end) ********************************************************************** 
 }
 
 function volumeAfterDetailsTabAction(jsonObj) {
@@ -370,8 +387,9 @@ function volumeToMidmenu(jsonObj, $midmenuItem1) {
 }
 
 function volumeToRigntPanel($midmenuItem) {       
-    var json = $midmenuItem.data("jsonObj");     
-    volumeJsonToDetailsTab(json);   
+    var jsonObj = $midmenuItem.data("jsonObj");     
+    volumeJsonToDetailsTab(jsonObj);   
+    volumeJsonToVolumeTab(jsonObj);
 }
  
 function volumeJsonToDetailsTab(jsonObj){
@@ -424,6 +442,53 @@ function volumeJsonToDetailsTab(jsonObj){
         }
     }
 } 
+
+function  volumeJsonToVolumeTab(jsonObj) {
+    $.ajax({
+		cache: false,
+		data: createURL("command=listSnapshots&volumeid="+jsonObj.id+maxPageSize),
+		dataType: "json",
+		success: function(json) {							    
+			var items = json.listsnapshotsresponse.snapshot;																						
+			if (items != null && items.length > 0) {
+			    var container = $("#right_panel_content #tab_content_snapshot").empty();
+				var template = $("#snapshot_tab_template");				
+				for (var i = 0; i < items.length; i++) {
+					var newTemplate = template.clone(true);	               
+	                volumeSnapshotJSONToTemplate(items[i], newTemplate); 
+	                container.append(newTemplate.show());	
+				}			
+			}			
+		}
+	});
+} 
+ 
+function volumeSnapshotJSONToTemplate(jsonObj, template) {
+    template.data("jsonObj", jsonObj);       
+    
+    template.attr("id", "volume_snapshot_"+jsonObj.id).data("volumeSnapshotId", jsonObj.id);	   
+    template.find("#id").text(jsonObj.id);
+    template.find("#name").text(jsonObj.name);			      
+    template.find("#volumename").text(jsonObj.volumename);	
+    template.find("#intervaltype").text(jsonObj.intervaltype);	    		   
+    template.find("#account").text(jsonObj.account);
+    template.find("#domain").text(jsonObj.domain);    
+    setDateField(jsonObj.created, template.find("#created"));	 
+	
+	var $actionLink = template.find("#snapshot_action_link");		
+	$actionLink.bind("mouseover", function(event) {
+        $(this).find("#snapshot_action_menu").show();    
+        return false;
+    });
+    $actionLink.bind("mouseout", function(event) {
+        $(this).find("#snapshot_action_menu").hide();    
+        return false;
+    });		
+	
+	var $actionMenu = $actionLink.find("#snapshot_action_menu");
+    $actionMenu.find("#action_list").empty();	
+	//buildActionLinkForSubgridItem("Create Template", vmSnapshotActionMap, $actionMenu, snapshotListAPIMap, template);		
+} 
  
 function volumeClearRightPanel() {       
     var $detailsTab = $("#right_panel_content #tab_content_details");  
@@ -708,7 +773,7 @@ function doRecurringSnapshot() {
 function populateVirtualMachineField(domainId, account, zoneId) {        
     $.ajax({
 	    cache: false,
-	    data: createURL("command=listVirtualMachines&state=Running&zoneid="+zoneId+"&domainid="+domainId+"&account="+account+"&response=json"+maxPageSize),
+	    data: createURL("command=listVirtualMachines&state=Running&zoneid="+zoneId+"&domainid="+domainId+"&account="+account+maxPageSize),
 	    dataType: "json",
 	    success: function(json) {			    
 		    var instances = json.listvirtualmachinesresponse.virtualmachine;				
@@ -720,7 +785,7 @@ function populateVirtualMachineField(domainId, account, zoneId) {
 		    }
 			$.ajax({
 				cache: false,
-				data: createURL("command=listVirtualMachines&state=Stopped&zoneid="+zoneId+"&domainid="+domainId+"&account="+account+"&response=json"+maxPageSize),
+				data: createURL("command=listVirtualMachines&state=Stopped&zoneid="+zoneId+"&domainid="+domainId+"&account="+account+maxPageSize),
 				dataType: "json",
 				success: function(json) {			    
 					var instances = json.listvirtualmachinesresponse.virtualmachine;