From 85ea3d600ad365a5e0a0ee99617335b8bf749826 Mon Sep 17 00:00:00 2001 From: Jessica Wang Date: Tue, 14 Sep 2010 14:37:18 -0700 Subject: [PATCH] new UI - implement close button in action message box. --- ui/new/jsp/volume.jsp | 454 ++++++++++++++------------- ui/new/scripts/cloud.core2.js | 77 ++--- ui/new/scripts/cloud.core2.volume.js | 39 ++- 3 files changed, 282 insertions(+), 288 deletions(-) diff --git a/ui/new/jsp/volume.jsp b/ui/new/jsp/volume.jsp index c8d11d0cef1..eddace55988 100644 --- a/ui/new/jsp/volume.jsp +++ b/ui/new/jsp/volume.jsp @@ -1,224 +1,230 @@ - - - -<%@ page import="java.util.*" %> -<%@ page import="com.cloud.utils.*" %> - -<% - - Locale browserLocale = request.getLocale(); - CloudResourceBundle t = CloudResourceBundle.getBundle("resources/resource", browserLocale); -%> - - -
- -

Volume -

-
-
- -
-
- <%=t.t("Details")%>
- -
- -
- - - - - -
- -
-
-
-
-
- <%=t.t("ID")%>:
-
-
-
-
-
-
-
-
-
- <%=t.t("Name")%>:
-
-
-
-
-
-
-
-
-
- <%=t.t("Type")%>:
-
-
-
-
-
-
-
-
-
- <%=t.t("Zone")%>:
-
-
-
-
-
-
-
-
-
- <%=t.t("Instance.Name")%>:
-
-
-
-
-
-
-
-
-
- <%=t.t("Device.ID")%>:
-
-
-
-
-
-
-
-
-
- <%=t.t("Size")%>:
-
-
-
-
-
-
-
-
-
- <%=t.t("State")%>:
-
-
-
-
-
-
-
-
-
- <%=t.t("Created")%>:
-
-
-
-
-
-
-
-
-
- <%=t.t("Storage")%>:
-
-
-
-
-
-
-
-
-
- <%=t.t("Account")%>:
-
-
-
-
-
-
-
-
- - - - \ No newline at end of file + + +<%@ page import="java.util.*" %> + +<%@ page import="com.cloud.utils.*" %> + +<% + + Locale browserLocale = request.getLocale(); + CloudResourceBundle t = CloudResourceBundle.getBundle("resources/resource", browserLocale); +%> + +
+ +

+ Volume +

+
+
+ +
+
+ <%=t.t("Details")%>
+
+ +
+
+ +
+
+
+
+
+

+ Detaching Disk …

+
+ + +
+
+
+
+
+ <%=t.t("ID")%>:
+
+
+
+
+
+
+
+
+
+ <%=t.t("Name")%>:
+
+
+
+
+
+
+
+
+
+ <%=t.t("Type")%>:
+
+
+
+
+
+
+
+
+
+ <%=t.t("Zone")%>:
+
+
+
+
+
+
+
+
+
+ <%=t.t("Instance.Name")%>:
+
+
+
+
+
+
+
+
+
+ <%=t.t("Device.ID")%>:
+
+
+
+
+
+
+
+
+
+ <%=t.t("Size")%>:
+
+
+
+
+
+
+
+
+
+ <%=t.t("State")%>:
+
+
+
+
+
+
+
+
+
+ <%=t.t("Created")%>:
+
+
+
+
+
+
+
+
+
+ <%=t.t("Storage")%>:
+
+
+
+
+
+
+
+
+
+ <%=t.t("Account")%>:
+
+
+
+
+
+
+
+
+
+ + + diff --git a/ui/new/scripts/cloud.core2.js b/ui/new/scripts/cloud.core2.js index 5c7aaa5cce8..846422c23de 100644 --- a/ui/new/scripts/cloud.core2.js +++ b/ui/new/scripts/cloud.core2.js @@ -181,8 +181,7 @@ function handleErrorInMidMenu(XMLHttpResponse, $midmenuItem) { //***** actions for middle menu (end) ************************************************************************** //***** actions for details tab in right panel (begin) ************************************************************************ -function buildActionLinkForDetailsTab(label, actionMap, $actionMenu, listAPIMap, $detailsTab) { - //debugger; +function buildActionLinkForDetailsTab(label, actionMap, $actionMenu, listAPIMap, $detailsTab) { var apiInfo = actionMap[label]; var $listItem = $("#action_list_item").clone(); $actionMenu.find("#action_list").append($listItem.show()); @@ -197,8 +196,7 @@ function buildActionLinkForDetailsTab(label, actionMap, $actionMenu, listAPIMap, var id = $detailsTab.data("jsonObj").id; - $link.bind("click", function(event) { - //debugger; + $link.bind("click", function(event) { $actionMenu.hide(); var $actionLink = $(this); var dialogBeforeActionFn = $actionLink.data("dialogBeforeActionFn"); @@ -222,8 +220,7 @@ function doActionToDetailsTab(id, $actionLink, apiCommand, listAPIMap, $detailsT var listAPI = listAPIMap["listAPI"]; var listAPIResponse = listAPIMap["listAPIResponse"]; var listAPIResponseObj = listAPIMap["listAPIResponseObj"]; - - //debugger; + var $spinningWheel = $detailsTab.find("#spinning_wheel"); $spinningWheel.find("#description").text(inProcessText); $spinningWheel.show(); @@ -233,8 +230,7 @@ function doActionToDetailsTab(id, $actionLink, apiCommand, listAPIMap, $detailsT $.ajax({ data: createURL(apiCommand), dataType: "json", - success: function(json) { - //debugger; + success: function(json) { var jobId = json[asyncJobResponse].jobid; var timerKey = "asyncJob_" + jobId; $("body").everyTime( @@ -244,16 +240,16 @@ function doActionToDetailsTab(id, $actionLink, apiCommand, listAPIMap, $detailsT $.ajax({ data: createURL("command=queryAsyncJobResult&jobId="+jobId), dataType: "json", - success: function(json) { - //debugger; + success: function(json) { var result = json.queryasyncjobresultresponse; if (result.jobstatus == 0) { return; //Job has not completed } else { $("body").stopTime(timerKey); $spinningWheel.hide(); - if (result.jobstatus == 1) { // Succeeded - $detailsTab.data("afterActionInfo", (label + " action succeeded.")); + if (result.jobstatus == 1) { // Succeeded + $detailsTab.find("#action_message_box #description").text(label + " action succeeded."); + $detailsTab.find("#action_message_box").show(); //DestroyVirtualMachine API doesn't return an embedded object on success (Bug 6041) //Before Bug 6041 get fixed, use the temporary solution below. @@ -268,13 +264,13 @@ function doActionToDetailsTab(id, $actionLink, apiCommand, listAPIMap, $detailsT //After Bug 6037 is fixed, remove temporary solution above and uncomment the line below //afterActionSeccessFn(json[listAPIResponse][listAPIResponseObj][0]); - } else if (result.jobstatus == 2) { // Failed - $detailsTab.data("afterActionInfo", (label + " action failed. Reason: " + sanitizeXSS(result.jobresult))); + } else if (result.jobstatus == 2) { // Failed + $detailsTab.find("#action_message_box #description").text(label + " action failed. Reason: " + sanitizeXSS(result.jobresult)); + $detailsTab.find("#action_message_box").show(); } } }, - error: function(XMLHttpResponse) { - //debugger; + error: function(XMLHttpResponse) { $("body").stopTime(timerKey); handleErrorInDetailsTab(XMLHttpResponse, $detailsTab, label); } @@ -283,8 +279,7 @@ function doActionToDetailsTab(id, $actionLink, apiCommand, listAPIMap, $detailsT 0 ); }, - error: function(XMLHttpResponse) { - //debugger; + error: function(XMLHttpResponse) { handleErrorInDetailsTab(XMLHttpResponse, $detailsTab, label); } }); @@ -292,14 +287,12 @@ function doActionToDetailsTab(id, $actionLink, apiCommand, listAPIMap, $detailsT //Async job (end) ***** //Sync job (begin) ***** - else { - //debugger; + else { $.ajax({ data: createURL(apiCommand), dataType: "json", async: false, - success: function(json) { - //debugger; + success: function(json) { $spinningWheel.hide(); //RecoverVirtualMachine API doesn't return an embedded object on success (Bug 6037) @@ -310,15 +303,16 @@ function doActionToDetailsTab(id, $actionLink, apiCommand, listAPIMap, $detailsT dataType: "json", async: false, success: function(json) { - $detailsTab.data("afterActionInfo", (label + " action succeeded.")); + $detailsTab.find("#action_message_box #description").text(label + " action succeeded."); + $detailsTab.find("#action_message_box").show(); + afterActionSeccessFn(json[listAPIResponse][listAPIResponseObj][0]); } }); //After Bug 6037 is fixed, remove temporary solution above and uncomment the line below //afterActionSeccessFn(json[listAPIResponse][listAPIResponseObj][0]); }, - error: function(XMLHttpResponse) { - //debugger; + error: function(XMLHttpResponse) { handleErrorInDetailsTab(XMLHttpResponse, $detailsTab, label); } }); @@ -327,7 +321,6 @@ function doActionToDetailsTab(id, $actionLink, apiCommand, listAPIMap, $detailsT } function handleErrorInDetailsTab(XMLHttpResponse, $detailsTab, label) { - //debugger; $detailsTab.find("#spinning_wheel").hide(); var errorMsg = ""; @@ -337,15 +330,15 @@ function handleErrorInDetailsTab(XMLHttpResponse, $detailsTab, label) { errorMsg = XMLHttpResponse.responseText.substring(start, end); } if(errorMsg.length > 0) - $detailsTab.data("afterActionInfo", ((label + " action failed. Reason: " + sanitizeXSS(unescape(errorMsg))))); + $detailsTab.find("#action_message_box #description").text(label + " action failed. Reason: " + sanitizeXSS(unescape(errorMsg))); else - $detailsTab.data("afterActionInfo", (label + " action failed.")); + $detailsTab.find("#action_message_box #description").text(label + " action failed."); + $detailsTab.find("#action_message_box").show(); } //***** actions for details tab in right panel (end) ************************************************************************** //***** actions for a subgrid item in right panel (begin) ************************************************************************ function buildActionLinkForSubgridItem(label, actionMap, $actionMenu, listAPIMap, $subgridItem) { - //debugger; var apiInfo = actionMap[label]; var $listItem = $("#action_list_item").clone(); $actionMenu.find("#action_list").append($listItem.show()); @@ -360,8 +353,7 @@ function buildActionLinkForSubgridItem(label, actionMap, $actionMenu, listAPIMap var id = $subgridItem.data("jsonObj").id; - $link.bind("click", function(event) { - //debugger; + $link.bind("click", function(event) { $actionMenu.hide(); var $actionLink = $(this); var dialogBeforeActionFn = $actionLink.data("dialogBeforeActionFn"); @@ -385,8 +377,7 @@ function doActionToSubgridItem(id, $actionLink, apiCommand, listAPIMap, $subgrid var listAPI = listAPIMap["listAPI"]; var listAPIResponse = listAPIMap["listAPIResponse"]; var listAPIResponseObj = listAPIMap["listAPIResponseObj"]; - - //debugger; + var $spinningWheel = $subgridItem.find("#spinning_wheel"); $spinningWheel.find("#description").text(inProcessText); $spinningWheel.show(); @@ -396,8 +387,7 @@ function doActionToSubgridItem(id, $actionLink, apiCommand, listAPIMap, $subgrid $.ajax({ data: createURL(apiCommand), dataType: "json", - success: function(json) { - //debugger; + success: function(json) { var jobId = json[asyncJobResponse].jobid; var timerKey = "asyncJob_" + jobId; $("body").everyTime( @@ -407,8 +397,7 @@ function doActionToSubgridItem(id, $actionLink, apiCommand, listAPIMap, $subgrid $.ajax({ data: createURL("command=queryAsyncJobResult&jobId="+jobId), dataType: "json", - success: function(json) { - //debugger; + success: function(json) { var result = json.queryasyncjobresultresponse; if (result.jobstatus == 0) { return; //Job has not completed @@ -436,8 +425,7 @@ function doActionToSubgridItem(id, $actionLink, apiCommand, listAPIMap, $subgrid } } }, - error: function(XMLHttpResponse) { - //debugger; + error: function(XMLHttpResponse) { $("body").stopTime(timerKey); handleErrorInSubgridItem(XMLHttpResponse, $subgridItem, label); } @@ -447,7 +435,6 @@ function doActionToSubgridItem(id, $actionLink, apiCommand, listAPIMap, $subgrid ); }, error: function(XMLHttpResponse) { - //debugger; handleErrorInSubgridItem(XMLHttpResponse, $subgridItem, label); } }); @@ -455,14 +442,12 @@ function doActionToSubgridItem(id, $actionLink, apiCommand, listAPIMap, $subgrid //Async job (end) ***** //Sync job (begin) ***** - else { - //debugger; + else { $.ajax({ data: createURL(apiCommand), dataType: "json", async: false, - success: function(json) { - //debugger; + success: function(json) { $spinningWheel.hide(); //RecoverVirtualMachine API doesn't return an embedded object on success (Bug 6037) @@ -480,8 +465,7 @@ function doActionToSubgridItem(id, $actionLink, apiCommand, listAPIMap, $subgrid //After Bug 6037 is fixed, remove temporary solution above and uncomment the line below //afterActionSeccessFn(json[listAPIResponse][listAPIResponseObj][0], $subgridItem); }, - error: function(XMLHttpResponse) { - //debugger; + error: function(XMLHttpResponse) { handleErrorInSubgridItem(XMLHttpResponse, $subgridItem, label); } }); @@ -490,7 +474,6 @@ function doActionToSubgridItem(id, $actionLink, apiCommand, listAPIMap, $subgrid } function handleErrorInSubgridItem(XMLHttpResponse, $subgridItem, label) { - //debugger; $subgridItem.find("#spinning_wheel").hide(); var errorMsg = ""; diff --git a/ui/new/scripts/cloud.core2.volume.js b/ui/new/scripts/cloud.core2.volume.js index 1edbc5bd0fd..19bb3856b0b 100644 --- a/ui/new/scripts/cloud.core2.volume.js +++ b/ui/new/scripts/cloud.core2.volume.js @@ -19,6 +19,11 @@ function afterLoadVolumeJSP() { } } } + }); + + $("#right_panel_content #tab_content_details #action_message_box #close_button").bind("click", function(event){ + $(this).parent().hide(); + return false; }); } @@ -40,27 +45,27 @@ function volumeToRigntPanel($midmenuItem) { } function volumeJsonToDetailsTab(json){ - var $rightPanelContent = $("#right_panel_content"); - $rightPanelContent.data("jsonObj", json); - $rightPanelContent.find("#id").text(json.id); - $rightPanelContent.find("#name").text(fromdb(json.name)); - $rightPanelContent.find("#zonename").text(fromdb(json.zonename)); - $rightPanelContent.find("#device_id").text(json.deviceid); - $rightPanelContent.find("#state").text(json.state); - $rightPanelContent.find("#storage").text(fromdb(json.storage)); - $rightPanelContent.find("#account").text(fromdb(json.account)); + var $detailsTab = $("#right_panel_content #tab_content_details"); + $detailsTab.data("jsonObj", json); + $detailsTab.find("#id").text(json.id); + $detailsTab.find("#name").text(fromdb(json.name)); + $detailsTab.find("#zonename").text(fromdb(json.zonename)); + $detailsTab.find("#device_id").text(json.deviceid); + $detailsTab.find("#state").text(json.state); + $detailsTab.find("#storage").text(fromdb(json.storage)); + $detailsTab.find("#account").text(fromdb(json.account)); - $rightPanelContent.find("#type").text(json.type + " (" + json.storagetype + " storage)"); - $rightPanelContent.find("#size").text((json.size == "0") ? "" : convertBytes(json.size)); + $detailsTab.find("#type").text(json.type + " (" + json.storagetype + " storage)"); + $detailsTab.find("#size").text((json.size == "0") ? "" : convertBytes(json.size)); if (json.virtualmachineid == null) - $rightPanelContent.find("#vm_name").text("detached"); + $detailsTab.find("#vm_name").text("detached"); else - $rightPanelContent.find("#vm_name").text(getVmName(json.vmname, json.vmdisplayname) + " (" + json.vmstate + ")"); + $detailsTab.find("#vm_name").text(getVmName(json.vmname, json.vmdisplayname) + " (" + json.vmstate + ")"); - setDateField(json.created, $rightPanelContent.find("#created")); + setDateField(json.created, $detailsTab.find("#created")); - var $actionLink = $rightPanelContent.find("#volume_action_link"); + var $actionLink = $detailsTab.find("#volume_action_link"); $actionLink.bind("mouseover", function(event) { $(this).find("#volume_action_menu").show(); return false; @@ -74,10 +79,10 @@ function volumeJsonToDetailsTab(json){ $actionMenu.find("#action_list").empty(); if(json.type=="ROOT") { //"create template" is allowed(when stopped), "detach disk" is disallowed. if (json.vmstate == "Stopped") - buildActionLinkForDetailsTab("Create Template", volumeActionMap, $actionMenu, volumeListAPIMap, $rightPanelContent); + buildActionLinkForDetailsTab("Create Template", volumeActionMap, $actionMenu, volumeListAPIMap, $detailsTab); } else { //json.type=="DATADISK": "detach disk" is allowed, "create template" is disallowed. - buildActionLinkForDetailsTab("Detach Disk", volumeActionMap, $actionMenu, volumeListAPIMap, $rightPanelContent); + buildActionLinkForDetailsTab("Detach Disk", volumeActionMap, $actionMenu, volumeListAPIMap, $detailsTab); } }