From 67cfa3582e52fbbece6e3f84f6bc1765c505088c Mon Sep 17 00:00:00 2001 From: Jessica Wang Date: Tue, 21 Sep 2010 16:18:04 -0700 Subject: [PATCH] new UI - volume page - implement Recurring Snapshot action. --- ui/new/jsp/volume.jsp | 309 +++++++++++++++++++++ ui/new/scripts/cloud.core2.js | 12 +- ui/new/scripts/cloud.core2.volume.js | 398 ++++++++++++++++++++++++++- ui/scripts/cloud.core.storage.js | 4 +- 4 files changed, 714 insertions(+), 9 deletions(-) diff --git a/ui/new/jsp/volume.jsp b/ui/new/jsp/volume.jsp index 0b0cd193cda..b032a1e5641 100644 --- a/ui/new/jsp/volume.jsp +++ b/ui/new/jsp/volume.jsp @@ -224,3 +224,312 @@ Please confirm you want to create snapshot for this volume.

+ + + + \ No newline at end of file diff --git a/ui/new/scripts/cloud.core2.js b/ui/new/scripts/cloud.core2.js index eb6c619bb16..6ccae33cbb8 100644 --- a/ui/new/scripts/cloud.core2.js +++ b/ui/new/scripts/cloud.core2.js @@ -33,7 +33,8 @@ function buildActionLinkForDetailsTab(label, actionMap, $actionMenu, listAPIMap) $link.data("isAsyncJob", apiInfo.isAsyncJob); $link.data("asyncJobResponse", apiInfo.asyncJobResponse); $link.data("afterActionSeccessFn", apiInfo.afterActionSeccessFn); - $link.data("dialogBeforeActionFn", apiInfo.dialogBeforeActionFn); + $link.data("dialogBeforeActionFn", apiInfo.dialogBeforeActionFn); + $link.data("customActionFn", apiInfo.customActionFn); var $detailsTab = $("#right_panel_content #tab_content_details"); var id = $detailsTab.data("jsonObj").id; @@ -41,6 +42,13 @@ function buildActionLinkForDetailsTab(label, actionMap, $actionMenu, listAPIMap) $link.bind("click", function(event) { $actionMenu.hide(); var $actionLink = $(this); + + var customActionFn = $actionLink.data("customActionFn"); + if(customActionFn != null) { + customActionFn(); + return false; + } + var dialogBeforeActionFn = $actionLink.data("dialogBeforeActionFn"); if(dialogBeforeActionFn == null) { var apiCommand = "command="+$actionLink.data("api")+"&id="+id; @@ -48,7 +56,7 @@ function buildActionLinkForDetailsTab(label, actionMap, $actionMenu, listAPIMap) } else { dialogBeforeActionFn($actionLink, listAPIMap, $detailsTab); - } + } return false; }); } diff --git a/ui/new/scripts/cloud.core2.volume.js b/ui/new/scripts/cloud.core2.volume.js index bba2752634f..19f171d1f2c 100644 --- a/ui/new/scripts/cloud.core2.volume.js +++ b/ui/new/scripts/cloud.core2.volume.js @@ -10,9 +10,15 @@ function afterLoadVolumeJSP() { modal: true, zIndex: 2000 })); - + activateDialog($("#dialog_recurring_snapshot").dialog({ + width: 735, + autoOpen: false, + modal: true, + zIndex: 2000 + })); + $.ajax({ - data: createURL("command=listOsTypes&response=json"), + data: createURL("command=listOsTypes"), dataType: "json", success: function(json) { types = json.listostypesresponse.ostype; @@ -23,7 +29,220 @@ function afterLoadVolumeJSP() { } } } - }); + }); + + // *** recurring snapshot dialog - event binding (begin) ****************************** + $("#dialog_recurring_snapshot").bind("click", function(event) { + event.preventDefault(); + event.stopPropagation(); + + var target = event.target; + var targetId = target.id; + var thisDialog = $(this); + var volumeId = thisDialog.data("volumeId"); + var topPanel = thisDialog.find("#dialog_snapshotleft"); + var bottomPanel = thisDialog.find("#dialog_snapshotright"); + + if(targetId.indexOf("_edit_link")!=-1) { + clearBottomPanel(); + bottomPanel.animate({ + height: 200 + }, 1000, function() {} + ); + } + else if(targetId.indexOf("_delete_link")!=-1) { + clearBottomPanel(); + var snapshotPolicyId = $("#"+targetId).data("snapshotPolicyId"); + if(snapshotPolicyId == null || snapshotPolicyId.length==0) + return; + $.ajax({ + data: createURL("command=deleteSnapshotPolicies&id="+snapshotPolicyId), + dataType: "json", + success: function(json) { + clearTopPanel($("#"+targetId).data("intervalType")); + }, + error: function(XMLHttpResponse) { + handleError(XMLHttpResponse); + } + }); + } + + var thisLink; + switch(targetId) { + case "hourly_edit_link": + $("#edit_interval_type").text("Hourly"); + $("#edit_time_colon, #edit_hour_container, #edit_meridiem_container, #edit_day_of_week_container, #edit_day_of_month_container").hide(); + $("#edit_past_the_hour, #edit_minute_container").show(); + thisLink = thisDialog.find("#hourly_edit_link"); + thisDialog.find("#edit_minute").val(thisLink.data("minute")); + thisDialog.find("#edit_max").val(thisLink.data("max")); + thisDialog.find("#edit_timezone").val(thisLink.data("timezone")); + break; + case "daily_edit_link": + $("#edit_interval_type").text("Daily"); + $("#edit_past_the_hour, #edit_day_of_week_container, #edit_day_of_month_container").hide(); + $("#edit_minute_container, #edit_hour_container, #edit_meridiem_container").show(); + thisLink = thisDialog.find("#daily_edit_link"); + thisDialog.find("#edit_minute").val(thisLink.data("minute")); + thisDialog.find("#edit_hour").val(thisLink.data("hour12")); + thisDialog.find("#edit_meridiem").val(thisLink.data("meridiem")); + thisDialog.find("#edit_max").val(thisLink.data("max")); + thisDialog.find("#edit_timezone").val(thisLink.data("timezone")); + break; + case "weekly_edit_link": + $("#edit_interval_type").text("Weekly"); + $("#edit_past_the_hour, #edit_day_of_month_container").hide(); + $("#edit_minute_container, #edit_hour_container, #edit_meridiem_container, #edit_day_of_week_container").show(); + thisLink = thisDialog.find("#weekly_edit_link"); + thisDialog.find("#edit_minute").val(thisLink.data("minute")); + thisDialog.find("#edit_hour").val(thisLink.data("hour12")); + thisDialog.find("#edit_meridiem").val(thisLink.data("meridiem")); + thisDialog.find("#edit_day_of_week").val(thisLink.data("dayOfWeek")); + thisDialog.find("#edit_max").val(thisLink.data("max")); + thisDialog.find("#edit_timezone").val(thisLink.data("timezone")); + break; + case "monthly_edit_link": + $("#edit_interval_type").text("Monthly"); + $("#edit_past_the_hour, #edit_day_of_week_container").hide(); + $("#edit_minute_container, #edit_hour_container, #edit_meridiem_container, #edit_day_of_month_container").show(); + thisLink = thisDialog.find("#monthly_edit_link"); + thisDialog.find("#edit_minute").val(thisLink.data("minute")); + thisDialog.find("#edit_hour").val(thisLink.data("hour12")); + thisDialog.find("#edit_meridiem").val(thisLink.data("meridiem")); + thisDialog.find("#edit_day_of_month").val(thisLink.data("dayOfMonth")); + thisDialog.find("#edit_max").val(thisLink.data("max")); + thisDialog.find("#edit_timezone").val(thisLink.data("timezone")); + break; + case "apply_button": + var intervalType = bottomPanel.find("#edit_interval_type").text().toLowerCase(); + var minute, hour12, hour24, meridiem, dayOfWeek, dayOfWeekString, dayOfMonth, schedule, max, timezone; + switch(intervalType) { + case "hourly": + var isValid = true; + isValid &= validateNumber("Keep # of snapshots", bottomPanel.find("#edit_max"), bottomPanel.find("#edit_max_errormsg")); + if (!isValid) return; + + minute = bottomPanel.find("#edit_minute").val(); + schedule = minute; + max = bottomPanel.find("#edit_max").val(); + timezone = bottomPanel.find("#edit_timezone").val(); + break; + + case "daily": + var isValid = true; + isValid &= validateNumber("Keep # of snapshots", bottomPanel.find("#edit_max"), bottomPanel.find("#edit_max_errormsg")); + if (!isValid) return; + + minute = bottomPanel.find("#edit_minute").val(); + hour12 = bottomPanel.find("#edit_hour").val(); + meridiem = bottomPanel.find("#edit_meridiem").val(); + if(meridiem=="AM") + hour24 = hour12; + else //meridiem=="PM" + hour24 = (parseInt(hour12)+12).toString(); + schedule = minute + ":" + hour24; + max = bottomPanel.find("#edit_max").val(); + timezone = bottomPanel.find("#edit_timezone").val(); + break; + + case "weekly": + var isValid = true; + isValid &= validateNumber("Keep # of snapshots", bottomPanel.find("#edit_max"), bottomPanel.find("#edit_max_errormsg")); + if (!isValid) return; + + minute = bottomPanel.find("#edit_minute").val(); + hour12 = bottomPanel.find("#edit_hour").val(); + meridiem = bottomPanel.find("#edit_meridiem").val(); + if(meridiem=="AM") + hour24 = hour12; + else //meridiem=="PM" + hour24 = (parseInt(hour12)+12).toString(); + dayOfWeek = bottomPanel.find("#edit_day_of_week").val(); + dayOfWeekString = bottomPanel.find("#edit_day_of_week option:selected").text(); + schedule = minute + ":" + hour24 + ":" + dayOfWeek; + max = bottomPanel.find("#edit_max").val(); + timezone = bottomPanel.find("#edit_timezone").val(); + break; + + case "monthly": + var isValid = true; + isValid &= validateNumber("Keep # of snapshots", bottomPanel.find("#edit_max"), bottomPanel.find("#edit_max_errormsg")); + if (!isValid) return; + + minute = bottomPanel.find("#edit_minute").val(); + hour12 = bottomPanel.find("#edit_hour").val(); + meridiem = bottomPanel.find("#edit_meridiem").val(); + if(meridiem=="AM") + hour24 = hour12; + else //meridiem=="PM" + hour24 = (parseInt(hour12)+12).toString(); + dayOfMonth = bottomPanel.find("#edit_day_of_month").val(); + schedule = minute + ":" + hour24 + ":" + dayOfMonth; + max = bottomPanel.find("#edit_max").val(); + timezone = bottomPanel.find("#edit_timezone").val(); + break; + } + + var thisLink; + $.ajax({ + data: createURL("command=createSnapshotPolicy&intervaltype="+intervalType+"&schedule="+schedule+"&volumeid="+volumeId+"&maxsnaps="+max+"&timezone="+encodeURIComponent(timezone)), + dataType: "json", + success: function(json) { + switch(intervalType) { + case "hourly": + topPanel.find("#dialog_snapshot_hourly_info_unset").hide(); + topPanel.find("#dialog_snapshot_hourly_info_set").show(); + topPanel.find("#read_hourly_minute").text(minute); + topPanel.find("#read_hourly_timezone").text("("+timezones[timezone]+")"); + topPanel.find("#read_hourly_max").text(max); + topPanel.find("#hourly_edit_link, #hourly_delete_link").data("intervalType", "hourly").data("snapshotPolicyId", json.createsnapshotpolicyresponse.id).data("max",max).data("timezone",timezone).data("minute", minute); + break; + case "daily": + topPanel.find("#dialog_snapshot_daily_info_unset").hide(); + topPanel.find("#dialog_snapshot_daily_info_set").show(); + topPanel.find("#read_daily_minute").text(minute); + topPanel.find("#read_daily_hour").text(hour12); + topPanel.find("#read_daily_meridiem").text(meridiem); + topPanel.find("#read_daily_timezone").text("("+timezones[timezone]+")"); + topPanel.find("#read_daily_max").text(max); + topPanel.find("#daily_edit_link, #daily_delete_link").data("intervalType", "daily").data("snapshotPolicyId", json.createsnapshotpolicyresponse.id).data("max",max).data("timezone",timezone).data("minute", minute).data("hour12", hour12).data("meridiem", meridiem); + break; + case "weekly": + topPanel.find("#dialog_snapshot_weekly_info_unset").hide(); + topPanel.find("#dialog_snapshot_weekly_info_set").show(); + topPanel.find("#read_weekly_minute").text(minute); + topPanel.find("#read_weekly_hour").text(hour12); + topPanel.find("#read_weekly_meridiem").text(meridiem); + topPanel.find("#read_weekly_timezone").text("("+timezones[timezone]+")"); + topPanel.find("#read_weekly_day_of_week").text(dayOfWeekString); + topPanel.find("#read_weekly_max").text(max); + topPanel.find("#weekly_edit_link, #weekly_delete_link").data("intervalType", "weekly").data("snapshotPolicyId", json.createsnapshotpolicyresponse.id).data("max",max).data("timezone",timezone).data("minute", minute).data("hour12", hour12).data("meridiem", meridiem).data("dayOfWeek",dayOfWeek); + break; + case "monthly": + topPanel.find("#dialog_snapshot_monthly_info_unset").hide(); + topPanel.find("#dialog_snapshot_monthly_info_set").show(); + topPanel.find("#read_monthly_minute").text(minute); + topPanel.find("#read_monthly_hour").text(hour12); + topPanel.find("#read_monthly_meridiem").text(meridiem); + topPanel.find("#read_monthly_timezone").text("("+timezones[timezone]+")"); + topPanel.find("#read_monthly_day_of_month").text(toDayOfMonthDesp(dayOfMonth)); + topPanel.find("#read_monthly_max").text(max); + topPanel.find("#monthly_edit_link, #monthly_delete_link").data("intervalType", "monthly").data("snapshotPolicyId", json.createsnapshotpolicyresponse.id).data("max",max).data("timezone",timezone).data("minute", minute).data("hour12", hour12).data("meridiem", meridiem).data("dayOfMonth",dayOfMonth); + break; + } + + }, + error: function(XMLHttpResponse) { + handleError(XMLHttpResponse); + } + }); + + break; + + } + }); + // *** recurring snapshot dialog - event binding (end) ****************************** + } function volumeAfterDetailsTabAction(jsonObj) { @@ -73,7 +292,7 @@ function volumeJsonToDetailsTab(jsonObj){ $actionMenu.find("#action_list").empty(); buildActionLinkForDetailsTab("Take Snapshot", volumeActionMap, $actionMenu, volumeListAPIMap); //show take snapshot - //buildActionLinkForDetailsTab("Recurring Snapshot", volumeActionMap, $actionMenu, volumeListAPIMap); //show Recurring Snapshot + buildActionLinkForDetailsTab("Recurring Snapshot", volumeActionMap, $actionMenu, volumeListAPIMap); //show Recurring Snapshot if(jsonObj.state != "Creating" && jsonObj.state != "Corrupted" && jsonObj.name != "attaching") { if(jsonObj.type=="ROOT") { @@ -145,7 +364,10 @@ var volumeActionMap = { dialogBeforeActionFn : doTakeSnapshot, inProcessText: "Taking Snapshot....", afterActionSeccessFn: function(){} - } + }, + "Recurring Snapshot": { + customActionFn : doRecurringSnapshot + } } var volumeListAPIMap = { @@ -201,3 +423,169 @@ function doTakeSnapshot($actionLink, listAPIMap, $detailsTab) { } }).dialog("open"); } + +function clearTopPanel(target) { // "target == null" means target at all (hourly + daily + weekly + monthly) + var dialogBox = $("#dialog_recurring_snapshot"); + if(target == "hourly" || target == null) { + dialogBox.find("#dialog_snapshot_hourly_info_unset").show(); + dialogBox.find("#dialog_snapshot_hourly_info_set").hide(); + dialogBox.find("#read_hourly_max, #read_hourly_minute").text("N/A"); + dialogBox.find("#hourly_edit_link, #hourly_delete_link").data("intervalType", "hourly").data("max", "").data("timezone", (g_timezone==null)?"Etc/GMT+12":g_timezone).data("minute", "00"); + } + if(target == "daily" || target == null) { + dialogBox.find("#dialog_snapshot_daily_info_unset").show(); + dialogBox.find("#dialog_snapshot_daily_info_set").hide(); + dialogBox.find("#read_daily_max, #read_daily_minute, #read_daily_hour, #read_daily_meridiem").text("N/A"); + dialogBox.find("#daily_edit_link, #daily_delete_link").data("intervalType", "daily").data("max", "").data("timezone", (g_timezone==null)?"Etc/GMT+12":g_timezone).data("minute", "00").data("hour12", "00").data("meridiem", "AM"); + } + if(target == "weekly" || target == null) { + dialogBox.find("#dialog_snapshot_weekly_info_unset").show(); + dialogBox.find("#dialog_snapshot_weekly_info_set").hide(); + dialogBox.find("#read_weekly_max, #read_weekly_minute, #read_weekly_hour, #read_weekly_meridiem, #read_weekly_day_of_week").text("N/A"); + dialogBox.find("#weekly_edit_link, #weekly_delete_link").data("intervalType", "weekly").data("max", "").data("timezone", (g_timezone==null)?"Etc/GMT+12":g_timezone).data("minute", "00").data("hour12", "00").data("meridiem", "AM").data("dayOfWeek", "1"); + } + if(target == "monthly" || target == null) { + dialogBox.find("#dialog_snapshot_monthly_info_unset").show(); + dialogBox.find("#dialog_snapshot_monthly_info_set").hide(); + dialogBox.find("#read_monthly_max, #read_monthly_minute, #read_monthly_hour, #read_monthly_meridiem, #read_monthly_day_of_month").text("N/A"); + dialogBox.find("#monthly_edit_link, #monthly_delete_link").data("intervalType", "monthly").data("max", "").data("timezone", (g_timezone==null)?"Etc/GMT+12":g_timezone).data("minute", "00").data("hour12", "00").data("meridiem", "AM").data("dayOfMonth", "1"); + } +} + +function clearBottomPanel() { + var dialogBox = $("#dialog_recurring_snapshot"); + + dialogBox.find("#edit_hour").val("00"); + cleanErrMsg(dialogBox.find("#edit_hour"), dialogBox.find("#edit_time_errormsg")); + + dialogBox.find("#edit_minute").val("00"); + cleanErrMsg(dialogBox.find("#edit_minute"), dialogBox.find("#edit_time_errormsg")); + + dialogBox.find("#edit_meridiem").val("AM"); + + dialogBox.find("#edit_max").val(""); + cleanErrMsg(dialogBox.find("#edit_max"), dialogBox.find("#edit_max_errormsg")); + + dialogBox.find("#edit_timezone").val((g_timezone==null)?"Etc/GMT+12":g_timezone); + cleanErrMsg(dialogBox.find("#edit_timezone"), dialogBox.find("#edit_timezone_errormsg")); + + dialogBox.find("#edit_day_of_week").val("1"); + cleanErrMsg(dialogBox.find("#edit_day_of_week"), dialogBox.find("#edit_day_of_week_errormsg")); + + dialogBox.find("#edit_day_of_month").val("1"); + cleanErrMsg(dialogBox.find("#edit_day_of_month"), dialogBox.find("#edit_day_of_month_errormsg")); +} + +function doRecurringSnapshot() { + var $detailsTab = $("#right_panel_content #tab_content_details"); + var volumeId = $detailsTab.data("jsonObj").id; + + var dialogBox = $("#dialog_recurring_snapshot"); + clearTopPanel(); + + $.ajax({ + data: createURL("command=listSnapshotPolicies&volumeid="+volumeId), + dataType: "json", + async: false, + success: function(json) { + var items = json.listsnapshotpoliciesresponse.snapshotpolicy; + if(items!=null && items.length>0) { + for(var i=0; i