new UI - add jsp file for template page.

This commit is contained in:
Jessica Wang 2010-09-13 15:49:39 -07:00
parent 272c1e8f1d
commit f66eff8ec5
11 changed files with 225 additions and 27 deletions

View File

@ -50,7 +50,7 @@ long milliseconds = new Date().getTime();
<script type="text/javascript" src="scripts/cloud.core2.ipaddress.js?t=<%=milliseconds%>"></script>
<script type="text/javascript" src="scripts/cloud.core2.template.js?t=<%=milliseconds%>"></script>
<title>Cloud.com CloudStack</title>
</head>
@ -471,7 +471,7 @@ long milliseconds = new Date().getTime();
</div>
</div>
<div id="leftmenu_template_filter_container">
<div class="leftmenu_content" id="leftmenu_submenu_myTemplates">
<div class="leftmenu_content" id="leftmenu_submenu_myTemplate">
<div class="leftmenu_thirdindent">
<div class="leftmenu_list_icons">
<img src="images/templates_leftmenuicon.png" /></div>
@ -506,7 +506,7 @@ long milliseconds = new Date().getTime();
</div>
</div>
<div id="leftmenu_iso_filter_container">
<div class="leftmenu_content" id="leftmenu_submenu_myISOs">
<div class="leftmenu_content" id="leftmenu_submenu_myISO">
<div class="leftmenu_thirdindent">
<div class="leftmenu_list_icons">
<img src="images/templates_leftmenuicon.png" /></div>

164
ui/new/jsp/template.jsp Normal file
View File

@ -0,0 +1,164 @@
<!--
<script type="text/javascript" src="scripts/cloud.core.event.js"></script>
-->
<%@ page import="java.util.*" %>
<%@ page import="com.cloud.utils.*" %>
<%
Locale browserLocale = request.getLocale();
CloudResourceBundle t = CloudResourceBundle.getBundle("resources/resource", browserLocale);
%>
<!-- template detail panel (begin) -->
<div class="main_title" id="right_panel_header">
<!--
<div class="main_titleicon">
<img src="images/instancetitle_icons.gif" alt="Instance" /></div>
-->
<h1>Template
</h1>
</div>
<div class="contentbox" id="right_panel_content">
<div class="info_detailbox errorbox" id="after_action_info_container" style="display:none">
<p id="after_action_info"></p>
</div>
<div class="tabbox" style="margin-top:15px;">
<div class="content_tabs on">
<%=t.t("Details")%></div>
</div>
<div class="grid_container">
<div class="grid_rows odd">
<div class="grid_row_cell" style="width: 20%;">
<div class="row_celltitles">
<%=t.t("ID")%>:</div>
</div>
<div class="grid_row_cell" style="width: 79%;">
<div class="row_celltitles" id="username">
</div>
</div>
</div>
<div class="grid_rows odd">
<div class="grid_row_cell" style="width: 20%;">
<div class="row_celltitles">
<%=t.t("Zone")%>:</div>
</div>
<div class="grid_row_cell" style="width: 79%;">
<div class="row_celltitles" id="username">
</div>
</div>
</div>
<div class="grid_rows odd">
<div class="grid_row_cell" style="width: 20%;">
<div class="row_celltitles">
<%=t.t("Name")%>:</div>
</div>
<div class="grid_row_cell" style="width: 79%;">
<div class="row_celltitles" id="username">
</div>
</div>
</div>
<div class="grid_rows odd">
<div class="grid_row_cell" style="width: 20%;">
<div class="row_celltitles">
<%=t.t("Display.Text")%>:</div>
</div>
<div class="grid_row_cell" style="width: 79%;">
<div class="row_celltitles" id="username">
</div>
</div>
</div>
<div class="grid_rows odd">
<div class="grid_row_cell" style="width: 20%;">
<div class="row_celltitles">
<%=t.t("Status")%>:</div>
</div>
<div class="grid_row_cell" style="width: 79%;">
<div class="row_celltitles" id="username">
</div>
</div>
</div>
<div class="grid_rows odd">
<div class="grid_row_cell" style="width: 20%;">
<div class="row_celltitles">
<%=t.t("Password.Enabled")%>:</div>
</div>
<div class="grid_row_cell" style="width: 79%;">
<div class="row_celltitles" id="username">
</div>
</div>
</div>
<div class="grid_rows odd">
<div class="grid_row_cell" style="width: 20%;">
<div class="row_celltitles">
<%=t.t("Public")%>:</div>
</div>
<div class="grid_row_cell" style="width: 79%;">
<div class="row_celltitles" id="username">
</div>
</div>
</div>
<div class="grid_rows odd">
<div class="grid_row_cell" style="width: 20%;">
<div class="row_celltitles">
<%=t.t("Featured")%>:</div>
</div>
<div class="grid_row_cell" style="width: 79%;">
<div class="row_celltitles" id="username">
</div>
</div>
</div>
<div class="grid_rows odd">
<div class="grid_row_cell" style="width: 20%;">
<div class="row_celltitles">
<%=t.t("Cross.Zones")%>:</div>
</div>
<div class="grid_row_cell" style="width: 79%;">
<div class="row_celltitles" id="username">
</div>
</div>
</div>
<div class="grid_rows odd">
<div class="grid_row_cell" style="width: 20%;">
<div class="row_celltitles">
<%=t.t("OS.Type")%>:</div>
</div>
<div class="grid_row_cell" style="width: 79%;">
<div class="row_celltitles" id="username">
</div>
</div>
</div>
<div class="grid_rows odd">
<div class="grid_row_cell" style="width: 20%;">
<div class="row_celltitles">
<%=t.t("Account")%>:</div>
</div>
<div class="grid_row_cell" style="width: 79%;">
<div class="row_celltitles" id="username">
</div>
</div>
</div>
<div class="grid_rows odd">
<div class="grid_row_cell" style="width: 20%;">
<div class="row_celltitles">
<%=t.t("Created")%>:</div>
</div>
<div class="grid_row_cell" style="width: 79%;">
<div class="row_celltitles" id="username">
</div>
</div>
</div>
<div class="grid_rows odd">
<div class="grid_row_cell" style="width: 20%;">
<div class="row_celltitles">
<%=t.t("Size")%>:</div>
</div>
<div class="grid_row_cell" style="width: 79%;">
<div class="row_celltitles" id="username">
</div>
</div>
</div>
</div>
</div>
<!-- template detail panel (end) -->

View File

@ -3,8 +3,7 @@ function afterLoadAccountJSP() {
}
function accountToMidmenu(jsonObj, $midmenuItem1, toRightPanelFn) {
$midmenuItem1.attr("id", ("midmenuItem_"+jsonObj.id));
$midmenuItem1.data("id", jsonObj.id);
$midmenuItem1.attr("id", ("midmenuItem_"+jsonObj.id));
$midmenuItem1.data("jsonObj", jsonObj);
var iconContainer = $midmenuItem1.find("#icon_container").show();

View File

@ -3,8 +3,7 @@ function afterLoadAlertJSP() {
}
function alertToMidmenu(jsonObj, $midmenuItem1, toRightPanelFn) {
$midmenuItem1.attr("id", ("midmenuItem_"+jsonObj.id));
$midmenuItem1.data("id", jsonObj.id);
$midmenuItem1.attr("id", ("midmenuItem_"+jsonObj.id));
$midmenuItem1.data("jsonObj", jsonObj);
$midmenuItem1.find("#first_row").text(jsonObj.description.substring(0,25));
$midmenuItem1.find("#second_row").text(jsonObj.type.substring(0,25));

View File

@ -3,8 +3,7 @@ function afterLoadEventJSP() {
}
function eventToMidmenu(jsonObj, $midmenuItem1, toRightPanelFn) {
$midmenuItem1.attr("id", ("midmenuItem_"+jsonObj.id));
$midmenuItem1.data("id", jsonObj.id);
$midmenuItem1.attr("id", ("midmenuItem_"+jsonObj.id));
$midmenuItem1.data("jsonObj", jsonObj);
var iconContainer = $midmenuItem1.find("#icon_container").show();

View File

@ -21,7 +21,7 @@ $(document).ready(function() {
if(ui.selecting.id.indexOf("midmenuItem") != -1) {
var $midmenuItem1 = $("#"+ui.selecting.id);
if($midmenuItem1.find("#content").hasClass("inaction") == false) { //only items not in action are allowed to be selected
var id =$midmenuItem1.data("id");
var id =$midmenuItem1.data("jsonObj").id;
selectedItemsInMidMenu[id] = $midmenuItem1;
$midmenuItem1.find("#content").addClass("selected");
}
@ -32,7 +32,7 @@ $(document).ready(function() {
unselecting: function(event, ui) {
if(ui.unselecting.id.indexOf("midmenuItem") != -1) {
var $midmenuItem1 = $("#"+ui.unselecting.id);
var id = $midmenuItem1.data("id");
var id = $midmenuItem1.data("jsonObj").id;
if(id in selectedItemsInMidMenu) {
delete selectedItemsInMidMenu[id];
$midmenuItem1.find("#content").removeClass("selected");
@ -51,24 +51,23 @@ $(document).ready(function() {
}
function clearMidMenu() {
$("#midmenu_container").empty();
$("#midmenu_action_link").hide();
$("#midmenu_add_link").hide();
$("#midmenu_add_link").hide();
}
var $midmenuItem = $("#midmenu_item");
function listMidMenuItems(leftmenuId, apiName, jsonResponse1, jsonResponse2, rightPanelJSP, afterLoadRightPanelJSP, toMidmenu, toRightPanel) {
function listMidMenuItems(leftmenuId, commandString, jsonResponse1, jsonResponse2, rightPanelJSP, afterLoadRightPanelJSP, toMidmenu, toRightPanel) {
$("#"+leftmenuId).bind("click", function(event) {
clearMidMenu();
$("#right_panel").load(rightPanelJSP, function(){
afterLoadRightPanelJSP();
afterLoadRightPanelJSP();
$.ajax({
cache: false,
data: createURL("command="+apiName+"&pagesize="+midmenuItemCount),
data: createURL("command="+commandString+"&pagesize="+midmenuItemCount),
dataType: "json",
success: function(json) {
$("#midmenu_container").empty();
selectedItemsInMidMenu = {};
success: function(json) {
selectedItemsInMidMenu = {};
var items = json[jsonResponse1][jsonResponse2];
if(items != null && items.length > 0) {
for(var i=0; i<items.length;i++) {
@ -89,6 +88,11 @@ $(document).ready(function() {
listMidMenuItems("leftmenu_volume", "listVolumes", "listvolumesresponse", "volume", "jsp/volume.jsp", afterLoadVolumeJSP, volumeToMidmenu, volumeToRigntPanel);
listMidMenuItems("leftmenu_snapshot", "listSnapshots", "listsnapshotsresponse", "snapshot", "jsp/snapshot.jsp", afterLoadSnapshotJSP, snapshotToMidmenu, snapshotToRigntPanel);
listMidMenuItems("leftmenu_ip", "listPublicIpAddresses", "listpublicipaddressesresponse", "publicipaddress", "jsp/ip_address.jsp", afterLoadIpJSP, ipToMidmenu, ipToRigntPanel);
listMidMenuItems("leftmenu_submenu_myTemplate", "listTemplates&templatefilter=self", "listtemplatesresponse", "template", "jsp/template.jsp", afterLoadTemplateJSP, templateToMidmenu, templateToRigntPanel);
listMidMenuItems("leftmenu_submenu_featuredTemplate", "listTemplates&templatefilter=featured", "listtemplatesresponse", "template", "jsp/template.jsp", afterLoadTemplateJSP, templateToMidmenu, templateToRigntPanel);
listMidMenuItems("leftmenu_submenu_communityTemplate", "listTemplates&templatefilter=community", "listtemplatesresponse", "template", "jsp/template.jsp", afterLoadTemplateJSP, templateToMidmenu, templateToRigntPanel);
$("#leftmenu_instance_group_header").bind("click", function(event) {
clearMidMenu();

View File

@ -332,8 +332,7 @@ function clickInstanceGroupHeader($arrowIcon) {
function vmToMidmenu(json, $midmenuItem, toRightPanelFn) {
$midmenuItem.data("jsonObj", json);
$midmenuItem.data("toRightPanelFn", toRightPanelFn);
$midmenuItem.attr("id", ("midmenuItem_"+json.id));
$midmenuItem.data("id", json.id);
$midmenuItem.attr("id", ("midmenuItem_"+json.id));
$midmenuItem.find("#icon").attr("src", "images/status_gray.png");
$midmenuItem.find("#icon_container").show();

View File

@ -3,8 +3,7 @@ function afterLoadIpJSP() {
}
function ipToMidmenu(jsonObj, $midmenuItem1, toRightPanelFn) {
$midmenuItem1.attr("id", ("midmenuItem_"+jsonObj.id));
$midmenuItem1.data("id", jsonObj.id);
$midmenuItem1.attr("id", ("midmenuItem_"+jsonObj.id));
$midmenuItem1.data("jsonObj", jsonObj);
var iconContainer = $midmenuItem1.find("#icon_container").show();

View File

@ -3,8 +3,7 @@ function afterLoadSnapshotJSP() {
}
function snapshotToMidmenu(jsonObj, $midmenuItem1, toRightPanelFn) {
$midmenuItem1.attr("id", ("midmenuItem_"+jsonObj.id));
$midmenuItem1.data("id", jsonObj.id);
$midmenuItem1.attr("id", ("midmenuItem_"+jsonObj.id));
$midmenuItem1.data("jsonObj", jsonObj);
var iconContainer = $midmenuItem1.find("#icon_container").show();

View File

@ -0,0 +1,37 @@
function afterLoadTemplateJSP() {
}
function templateToMidmenu(jsonObj, $midmenuItem1, toRightPanelFn) {
$midmenuItem1.attr("id", ("midmenuItem_"+jsonObj.id));
$midmenuItem1.data("jsonObj", jsonObj);
/*
var iconContainer = $midmenuItem1.find("#icon_container").show();
if(jsonObj.level == "INFO")
iconContainer.find("#icon").attr("src", "images/midmenuicon_events_info.png");
else if(jsonObj.level == "ERROR")
iconContainer.find("#icon").attr("src", "images/midmenuicon_events_error.png");
else if(jsonObj.level == "WARN")
iconContainer.find("#icon").attr("src", "images/midmenuicon_events_warning.png");
$midmenuItem1.find("#first_row").text(jsonObj.description.substring(0,25));
$midmenuItem1.find("#second_row").text(jsonObj.type.substring(0,25));
$midmenuItem1.data("toRightPanelFn", toRightPanelFn);
*/
}
function templateToRigntPanel($midmenuItem) {
/*
var jsonObj = $midmenuItem.data("jsonObj");
var $rightPanelContent = $("#right_panel_content");
$rightPanelContent.find("#username").text(fromdb(jsonObj.username));
$rightPanelContent.find("#account").text(fromdb(jsonObj.account));
$rightPanelContent.find("#type").text(jsonObj.type);
$rightPanelContent.find("#level").text(jsonObj.level);
$rightPanelContent.find("#description").text(fromdb(jsonObj.description));
$rightPanelContent.find("#state").text(jsonObj.state);
setDateField(jsonObj.created, $rightPanelContent.find("#created"));
*/
}

View File

@ -23,8 +23,7 @@ function afterLoadVolumeJSP() {
}
function volumeToMidmenu(jsonObj, $midmenuItem1, toRightPanelFn) {
$midmenuItem1.attr("id", ("midmenuItem_"+jsonObj.id));
$midmenuItem1.data("id", jsonObj.id);
$midmenuItem1.attr("id", ("midmenuItem_"+jsonObj.id));
$midmenuItem1.data("jsonObj", jsonObj);
var iconContainer = $midmenuItem1.find("#icon_container").show();