From dbde0cd39bd5a2142940521e01e243239b3e9237 Mon Sep 17 00:00:00 2001 From: Jessica Wang Date: Thu, 16 Sep 2010 14:50:01 -0700 Subject: [PATCH 1/4] new UI - display boolean field as text instead of icon. make Edit button always show. --- ui/new/jsp/instance.jsp | 12 +++---- ui/new/jsp/iso.jsp | 4 +-- ui/new/jsp/template.jsp | 16 +++------ ui/new/scripts/cloud.core2.instance.js | 46 +++++++++++++++----------- ui/new/scripts/cloud.core2.js | 10 +++--- ui/new/scripts/cloud.core2.template.js | 9 ++--- 6 files changed, 44 insertions(+), 53 deletions(-) diff --git a/ui/new/jsp/instance.jsp b/ui/new/jsp/instance.jsp index d464b3860a6..e8944b43877 100644 --- a/ui/new/jsp/instance.jsp +++ b/ui/new/jsp/instance.jsp @@ -75,12 +75,10 @@
- <%=t.t("HA")%>:
+ <%=t.t("HA.Enabled")%>:
-
-
-
+
@@ -127,12 +125,10 @@
- <%=t.t("ISO")%>:
+ <%=t.t("ISO.attached")%>:
-
-
-
+
diff --git a/ui/new/jsp/iso.jsp b/ui/new/jsp/iso.jsp index 6d24907e893..9b4ae7ece61 100644 --- a/ui/new/jsp/iso.jsp +++ b/ui/new/jsp/iso.jsp @@ -107,9 +107,7 @@ <%=t.t("Bootable")%>:
-
-
-
+
diff --git a/ui/new/jsp/template.jsp b/ui/new/jsp/template.jsp index a6d4a200da3..c62233ec905 100644 --- a/ui/new/jsp/template.jsp +++ b/ui/new/jsp/template.jsp @@ -112,9 +112,7 @@ <%=t.t("Password.Enabled")%>:
-
-
-
+
@@ -144,9 +140,7 @@ <%=t.t("Featured")%>:
-
-
-
+
+
@@ -89,6 +91,8 @@
+ +
@@ -140,8 +144,12 @@
- - + + +
+ + +
diff --git a/ui/new/scripts/cloud.core2.iso.js b/ui/new/scripts/cloud.core2.iso.js index 3a7402a33b1..29d8aa643d9 100644 --- a/ui/new/scripts/cloud.core2.iso.js +++ b/ui/new/scripts/cloud.core2.iso.js @@ -4,6 +4,28 @@ var g_zoneNames = []; function afterLoadIsoJSP() { var $detailsTab = $("#right_panel_content #tab_content_details"); + //edit button *** + var $readonlyFields = $detailsTab.find("#name, #displaytext"); + var $editFields = $detailsTab.find("#name_edit, #displaytext_edit"); + $("#edit_button").bind("click", function(event){ + $readonlyFields.hide(); + $editFields.show(); + $("#cancel_button, #save_button").show() + return false; + }); + $("#cancel_button").bind("click", function(event){ + $editFields.hide(); + $readonlyFields.show(); + $("#save_button, #cancel_button").hide(); + return false; + }); + $("#save_button").bind("click", function(event){ + doUpdateIso(); + $editFields.hide(); + $readonlyFields.show(); + $("#save_button, #cancel_button").hide(); + return false; + }); //populate dropdown *** $.ajax({ @@ -107,8 +129,13 @@ function isoJsonToDetailsTab(jsonObj) { $detailsTab.data("jsonObj", jsonObj); $detailsTab.find("#id").text(fromdb(jsonObj.id)); $detailsTab.find("#zonename").text(fromdb(jsonObj.zonename)); + $detailsTab.find("#name").text(fromdb(jsonObj.name)); + $detailsTab.find("#name_edit").val(fromdb(jsonObj.name)); + $detailsTab.find("#displaytext").text(fromdb(jsonObj.displaytext)); + $detailsTab.find("#displaytext_edit").val(fromdb(jsonObj.displaytext)); + $detailsTab.find("#account").text(fromdb(jsonObj.account)); if(jsonObj.size != null) @@ -197,6 +224,33 @@ var isoListAPIMap = { listAPIResponseObj: "iso" }; +function doUpdateIso() { + var $detailsTab = $("#right_panel_content #tab_content_details"); + + // validate values + var isValid = true; + isValid &= validateString("Name", $detailsTab.find("#name_edit"), $detailsTab.find("#name_edit_errormsg")); + isValid &= validateString("Display Text", $detailsTab.find("#displaytext_edit"), $detailsTab.find("#displaytext_edit_errormsg")); + if (!isValid) + return; + + var jsonObj = $detailsTab.data("jsonObj"); + var id = jsonObj.id; + + var name = trim($detailsTab.find("#name_edit").val()); + var displaytext = trim($detailsTab.find("#displaytext_edit").val()); + + $.ajax({ + data: createURL("command=updateIso&id="+id+"&name="+todb(name)+"&displayText="+todb(displaytext)), + dataType: "json", + success: function(json) { + var jsonObj = json.updateisoresponse; + isoToMidmenu(jsonObj, $("#midmenuItem_"+jsonObj.id)); + isoJsonToDetailsTab(jsonObj); + } + }); +} + function populateZoneFieldExcludeSourceZone(zoneField, excludeZoneId) { zoneField.empty(); if (g_zoneIds != null && g_zoneIds.length > 0) { From 7aa2053df29503bf77f84543fc309b72434c33b4 Mon Sep 17 00:00:00 2001 From: Jessica Wang Date: Thu, 16 Sep 2010 16:06:05 -0700 Subject: [PATCH 4/4] new UI - ISO page - implement deleteISO action. --- ui/new/scripts/cloud.core2.iso.js | 21 +- ui/new/scripts/cloud.core2.js | 318 +++++++++++++------------ ui/new/scripts/cloud.core2.template.js | 8 +- 3 files changed, 182 insertions(+), 165 deletions(-) diff --git a/ui/new/scripts/cloud.core2.iso.js b/ui/new/scripts/cloud.core2.iso.js index 29d8aa643d9..58686de9e63 100644 --- a/ui/new/scripts/cloud.core2.iso.js +++ b/ui/new/scripts/cloud.core2.iso.js @@ -185,7 +185,22 @@ function isoJsonToDetailsTab(jsonObj) { } function isoClearRightPanel() { - + var $detailsTab = $("#right_panel_content #tab_content_details"); + + $detailsTab.find("#id").text(""); + $detailsTab.find("#zonename").text(""); + + $detailsTab.find("#name").text(""); + $detailsTab.find("#name_edit").val(""); + + $detailsTab.find("#displaytext").text(""); + $detailsTab.find("#displaytext_edit").val(""); + + $detailsTab.find("#account").text(""); + $detailsTab.find("#size").text(""); + $detailsTab.find("#status").text(""); + $detailsTab.find("#bootable").text(""); + $detailsTab.find("#created").text(""); } var isoActionMap = { @@ -194,7 +209,7 @@ var isoActionMap = { isAsyncJob: true, asyncJobResponse: "deleteisosresponse", inProcessText: "Deleting ISO....", - afterActionSeccessFn: function(jsonObj) { + afterActionSeccessFn: function(jsonObj) { var $midmenuItem1 = $("#midmenuItem_"+jsonObj.id); $midmenuItem1.remove(); clearRightPanel(); @@ -219,7 +234,7 @@ var isoActionMap = { } var isoListAPIMap = { - listAPI: "listisos&isofilter=self", + listAPI: "listIsos&isofilter=self", listAPIResponse: "listisosresponse", listAPIResponseObj: "iso" }; diff --git a/ui/new/scripts/cloud.core2.js b/ui/new/scripts/cloud.core2.js index f591494b98a..c5484890d10 100644 --- a/ui/new/scripts/cloud.core2.js +++ b/ui/new/scripts/cloud.core2.js @@ -20,6 +20,166 @@ // Version: @VERSION@ + +//***** actions for details tab in right panel (begin) ************************************************************************ +function buildActionLinkForDetailsTab(label, actionMap, $actionMenu, listAPIMap) { + var apiInfo = actionMap[label]; + var $listItem = $("#action_list_item").clone(); + $actionMenu.find("#action_list").append($listItem.show()); + var $link = $listItem.find("#link").text(label); + $link.data("label", label); + $link.data("inProcessText", apiInfo.inProcessText); + $link.data("api", apiInfo.api); + $link.data("isAsyncJob", apiInfo.isAsyncJob); + $link.data("asyncJobResponse", apiInfo.asyncJobResponse); + $link.data("afterActionSeccessFn", apiInfo.afterActionSeccessFn); + $link.data("dialogBeforeActionFn", apiInfo.dialogBeforeActionFn); + + var $detailsTab = $("#right_panel_content #tab_content_details"); + var id = $detailsTab.data("jsonObj").id; + + $link.bind("click", function(event) { + $actionMenu.hide(); + var $actionLink = $(this); + var dialogBeforeActionFn = $actionLink.data("dialogBeforeActionFn"); + if(dialogBeforeActionFn == null) { + var apiCommand = "command="+$actionLink.data("api")+"&id="+id; + doActionToDetailsTab(id, $actionLink, apiCommand, listAPIMap); + } + else { + dialogBeforeActionFn($actionLink, listAPIMap, $detailsTab); + } + return false; + }); +} + +function doActionToDetailsTab(id, $actionLink, apiCommand, listAPIMap) { + var label = $actionLink.data("label"); + var inProcessText = $actionLink.data("inProcessText"); + var isAsyncJob = $actionLink.data("isAsyncJob"); + var asyncJobResponse = $actionLink.data("asyncJobResponse"); + var afterActionSeccessFn = $actionLink.data("afterActionSeccessFn"); + var listAPI = listAPIMap["listAPI"]; + var listAPIResponse = listAPIMap["listAPIResponse"]; + var listAPIResponseObj = listAPIMap["listAPIResponseObj"]; + + var $detailsTab = $("#right_panel_content #tab_content_details"); + var $spinningWheel = $detailsTab.find("#spinning_wheel"); + $spinningWheel.find("#description").text(inProcessText); + $spinningWheel.show(); + + //Async job (begin) ***** + if(isAsyncJob == true) { + $.ajax({ + data: createURL(apiCommand), + dataType: "json", + success: function(json) { + var jobId = json[asyncJobResponse].jobid; + var timerKey = "asyncJob_" + jobId; + $("body").everyTime( + 10000, + timerKey, + function() { + $.ajax({ + data: createURL("command=queryAsyncJobResult&jobId="+jobId), + dataType: "json", + 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.find("#action_message_box #description").text(label + " action succeeded."); + $detailsTab.find("#action_message_box").removeClass("error").show(); + + //DestroyVirtualMachine API doesn't return an embedded object on success (Bug 6041) + //Before Bug 6041 get fixed, use the temporary solution below. + $.ajax({ + cache: false, + data: createURL("command="+listAPI+"&id="+id), + dataType: "json", + success: function(json) { + afterActionSeccessFn(json[listAPIResponse][listAPIResponseObj][0]); + } + }); + //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.find("#action_message_box #description").text(label + " action failed. Reason: " + sanitizeXSS(result.jobresult)); + $detailsTab.find("#action_message_box").addClass("error").show(); + } + } + }, + error: function(XMLHttpResponse) { + $("body").stopTime(timerKey); + handleErrorInDetailsTab(XMLHttpResponse, $detailsTab, label); + } + }); + }, + 0 + ); + }, + error: function(XMLHttpResponse) { + handleErrorInDetailsTab(XMLHttpResponse, $detailsTab, label); + } + }); + } + //Async job (end) ***** + + //Sync job (begin) ***** + else { + $.ajax({ + data: createURL(apiCommand), + dataType: "json", + async: false, + success: function(json) { + $spinningWheel.hide(); + + //RecoverVirtualMachine API doesn't return an embedded object on success (Bug 6037) + //Before Bug 6037 get fixed, use the temporary solution below. + $.ajax({ + cache: false, + data: createURL("command="+listAPI+"&id="+id), + dataType: "json", + async: false, + success: function(json) { + $detailsTab.find("#action_message_box #description").text(label + " action succeeded."); + $detailsTab.find("#action_message_box").removeClass("error").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) { + handleErrorInDetailsTab(XMLHttpResponse, $detailsTab, label); + } + }); + } + //Sync job (end) ***** +} + +function handleErrorInDetailsTab(XMLHttpResponse, $detailsTab, label) { + $detailsTab.find("#spinning_wheel").hide(); + + var errorMsg = ""; + if(XMLHttpResponse.responseText != null & XMLHttpResponse.responseText.length > 0) { + var start = XMLHttpResponse.responseText.indexOf("h1") + 3; + var end = XMLHttpResponse.responseText.indexOf(" 0) + $detailsTab.find("#action_message_box #description").text(label + " action failed. Reason: " + sanitizeXSS(unescape(errorMsg))); + else + $detailsTab.find("#action_message_box #description").text(label + " action failed."); + $detailsTab.find("#action_message_box").addClass("error").show(); +} +//***** actions for details tab in right panel (end) ************************************************************************** + //***** actions for middle menu (begin) ************************************************************************ var selectedItemsInMidMenu = {}; @@ -180,164 +340,6 @@ function handleErrorInMidMenu(XMLHttpResponse, $midmenuItem) { } //***** actions for middle menu (end) ************************************************************************** -//***** actions for details tab in right panel (begin) ************************************************************************ -function buildActionLinkForDetailsTab(label, actionMap, $actionMenu, listAPIMap) { - var apiInfo = actionMap[label]; - var $listItem = $("#action_list_item").clone(); - $actionMenu.find("#action_list").append($listItem.show()); - var $link = $listItem.find("#link").text(label); - $link.data("label", label); - $link.data("inProcessText", apiInfo.inProcessText); - $link.data("api", apiInfo.api); - $link.data("isAsyncJob", apiInfo.isAsyncJob); - $link.data("asyncJobResponse", apiInfo.asyncJobResponse); - $link.data("afterActionSeccessFn", apiInfo.afterActionSeccessFn); - $link.data("dialogBeforeActionFn", apiInfo.dialogBeforeActionFn); - - var $detailsTab = $("#right_panel_content #tab_content_details"); - var id = $detailsTab.data("jsonObj").id; - - $link.bind("click", function(event) { - $actionMenu.hide(); - var $actionLink = $(this); - var dialogBeforeActionFn = $actionLink.data("dialogBeforeActionFn"); - if(dialogBeforeActionFn == null) { - var apiCommand = "command="+$actionLink.data("api")+"&id="+id; - doActionToDetailsTab(id, $actionLink, apiCommand, listAPIMap); - } - else { - dialogBeforeActionFn($actionLink, listAPIMap, $detailsTab); - } - return false; - }); -} - -function doActionToDetailsTab(id, $actionLink, apiCommand, listAPIMap) { - var label = $actionLink.data("label"); - var inProcessText = $actionLink.data("inProcessText"); - var isAsyncJob = $actionLink.data("isAsyncJob"); - var asyncJobResponse = $actionLink.data("asyncJobResponse"); - var afterActionSeccessFn = $actionLink.data("afterActionSeccessFn"); - var listAPI = listAPIMap["listAPI"]; - var listAPIResponse = listAPIMap["listAPIResponse"]; - var listAPIResponseObj = listAPIMap["listAPIResponseObj"]; - - var $detailsTab = $("#right_panel_content #tab_content_details"); - var $spinningWheel = $detailsTab.find("#spinning_wheel"); - $spinningWheel.find("#description").text(inProcessText); - $spinningWheel.show(); - - //Async job (begin) ***** - if(isAsyncJob == true) { - $.ajax({ - data: createURL(apiCommand), - dataType: "json", - success: function(json) { - var jobId = json[asyncJobResponse].jobid; - var timerKey = "asyncJob_" + jobId; - $("body").everyTime( - 10000, - timerKey, - function() { - $.ajax({ - data: createURL("command=queryAsyncJobResult&jobId="+jobId), - dataType: "json", - 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.find("#action_message_box #description").text(label + " action succeeded."); - $detailsTab.find("#action_message_box").removeClass("error").show(); - - //DestroyVirtualMachine API doesn't return an embedded object on success (Bug 6041) - //Before Bug 6041 get fixed, use the temporary solution below. - $.ajax({ - cache: false, - data: createURL("command="+listAPI+"&id="+id), - dataType: "json", - success: function(json) { - afterActionSeccessFn(json[listAPIResponse][listAPIResponseObj][0]); - } - }); - //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.find("#action_message_box #description").text(label + " action failed. Reason: " + sanitizeXSS(result.jobresult)); - $detailsTab.find("#action_message_box").addClass("error").show(); - } - } - }, - error: function(XMLHttpResponse) { - $("body").stopTime(timerKey); - handleErrorInDetailsTab(XMLHttpResponse, $detailsTab, label); - } - }); - }, - 0 - ); - }, - error: function(XMLHttpResponse) { - handleErrorInDetailsTab(XMLHttpResponse, $detailsTab, label); - } - }); - } - //Async job (end) ***** - - //Sync job (begin) ***** - else { - $.ajax({ - data: createURL(apiCommand), - dataType: "json", - async: false, - success: function(json) { - $spinningWheel.hide(); - - //RecoverVirtualMachine API doesn't return an embedded object on success (Bug 6037) - //Before Bug 6037 get fixed, use the temporary solution below. - $.ajax({ - cache: false, - data: createURL("command="+listAPI+"&id="+id), - dataType: "json", - async: false, - success: function(json) { - $detailsTab.find("#action_message_box #description").text(label + " action succeeded."); - $detailsTab.find("#action_message_box").removeClass("error").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) { - handleErrorInDetailsTab(XMLHttpResponse, $detailsTab, label); - } - }); - } - //Sync job (end) ***** -} - -function handleErrorInDetailsTab(XMLHttpResponse, $detailsTab, label) { - $detailsTab.find("#spinning_wheel").hide(); - - var errorMsg = ""; - if(XMLHttpResponse.responseText != null & XMLHttpResponse.responseText.length > 0) { - var start = XMLHttpResponse.responseText.indexOf("h1") + 3; - var end = XMLHttpResponse.responseText.indexOf(" 0) - $detailsTab.find("#action_message_box #description").text(label + " action failed. Reason: " + sanitizeXSS(unescape(errorMsg))); - else - $detailsTab.find("#action_message_box #description").text(label + " action failed."); - $detailsTab.find("#action_message_box").addClass("error").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) { diff --git a/ui/new/scripts/cloud.core2.template.js b/ui/new/scripts/cloud.core2.template.js index f8f36b89fbb..819d4cd918d 100644 --- a/ui/new/scripts/cloud.core2.template.js +++ b/ui/new/scripts/cloud.core2.template.js @@ -220,16 +220,16 @@ function templateClearRightPanel() { $detailsTab.find("#status").text(""); - setBooleanField(null, $detailsTab.find("#passwordenabled")); + $detailsTab.find("#passwordenabled").text(""); $detailsTab.find("#passwordenabled_edit").val(null); - setBooleanField(null, $detailsTab.find("#ispublic")); + $detailsTab.find("#ispublic").text(""); $detailsTab.find("#ispublic_edit").val(null); - setBooleanField(null, $detailsTab.find("#isfeatured")); + $detailsTab.find("#isfeatured").text(""); $detailsTab.find("#isfeatured_edit").val(null); - setBooleanField(null, $detailsTab.find("#crossZones")); + $detailsTab.find("#crossZones").text(""); $detailsTab.find("#ostypename").text(""); $detailsTab.find("#ostypename_edit").val(null);