mirror of
https://github.com/apache/cloudstack.git
synced 2025-10-26 08:42:29 +01:00
new UI - add jsp file for template page.
This commit is contained in:
parent
272c1e8f1d
commit
f66eff8ec5
@ -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
164
ui/new/jsp/template.jsp
Normal 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) -->
|
||||
@ -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();
|
||||
|
||||
@ -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));
|
||||
|
||||
@ -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();
|
||||
|
||||
@ -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();
|
||||
|
||||
@ -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();
|
||||
|
||||
@ -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();
|
||||
|
||||
@ -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();
|
||||
|
||||
37
ui/new/scripts/cloud.core2.template.js
Normal file
37
ui/new/scripts/cloud.core2.template.js
Normal 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"));
|
||||
*/
|
||||
}
|
||||
@ -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();
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user