From c09dc082b7ea3b203d67fe82d2b05d51ce159a0e Mon Sep 17 00:00:00 2001 From: Jessica Wang Date: Sun, 10 Oct 2010 22:43:25 -0700 Subject: [PATCH] new UI - resources page - draw a zone tree in middle menu. --- ui/new/css/main.css | 215 +++++++++++++++++++++++++ ui/new/images/ajax-loader.gif | Bin 0 -> 1849 bytes ui/new/images/tree_minusopen_icon.png | Bin 0 -> 728 bytes ui/new/images/zone_addicon.png | Bin 0 -> 880 bytes ui/new/images/zone_podicon.png | Bin 0 -> 1055 bytes ui/new/jsp/resource.jsp | 54 ++++++- ui/new/scripts/cloud.core2.resource.js | 60 ++++++- 7 files changed, 326 insertions(+), 3 deletions(-) create mode 100644 ui/new/images/ajax-loader.gif create mode 100644 ui/new/images/tree_minusopen_icon.png create mode 100644 ui/new/images/zone_addicon.png create mode 100644 ui/new/images/zone_podicon.png diff --git a/ui/new/css/main.css b/ui/new/css/main.css index b3b9ce4ffb6..2b2bd52aeba 100644 --- a/ui/new/css/main.css +++ b/ui/new/css/main.css @@ -3222,3 +3222,218 @@ a:hover.search_button { padding:0; } + + + +/* 2010-10-10 */ + +.adding_loading { + width:100%; + float:left; + margin:0; + padding:0; + background: #e7f7fc repeat-x top left; + border-bottom:1px solid #e8e8e8; +} + +.adding_animation { + width:16px; + height:16px; + margin:3px 0 0 10px; + float:left; + display:inline; + background:url(../images/ajax-loader.gif) no-repeat top left; +} + +.adding_text { + width:auto; + height:auto; + float:left; + margin:8px 0 0 10px; + display:inline; + color:#333; + font-size:11px; + font-weight:bold; +} + + +/* zonetree (begin) */ + +.zonetree_contentbox { + width:530px; + height:590px; + float:left; + margin:15px 0 0 0; + overflow-x:hidden; + overflow-y:scroll; + overflow-y:auto; +} + +.zonetree_contentbox p { + width:auto; + height:auto; + float:left; + text-align:left; + margin:5px 0 0 10px; + padding:0; + font-size:12px; + font-weight:bold; +} + +.zonetree_addbox { + width:510px; + height:25px; + float:left; + margin:0 0 5px 0; + padding:0; +} + + + +.zonetree_addicon { + width:16px; + height:16px; + float:left; + background:url(../images/zone_addicon.png) no-repeat top left; + margin:5px 0 0 5px; + padding:0; +} + +.tree_minusicon { + width:18px; + height:16px; + float:left; + background:url(../images/tree_minusopen_icon.png) no-repeat top left; + margin:5px 5px 0 0; + padding:0; +} + + + +.zonetree_firstlevel { + width:510px; + height:25px; + float:left; + margin:0 0 5px 0; + padding:0; +} + +.zonetree_firstlevel_selected { + width:510px; + height:25px; + float:left; + margin:0 0 5px 0; + background:#eaf3f5 repeat top left; + padding:0; +} + +.zonetree_secondlevel { + width:455px; + height:25px; + float:left; + margin:0 0 5px 55px; + display:inline; + padding:0; +} + +.zonetree_secondlevel_selected { + width:475px; + height:25px; + float:left; + margin:0 0 5px 55px; + background:#eaf3f5 repeat top left; + padding:0; +} + +.zonetree_thirdlevel { + width:400px; + height:25px; + float:left; + margin:0 0 5px 110px; + display:inline; + padding:0; +} + +.zonetree_thirdlevel_selected { + width:400px; + height:25px; + float:left; + margin:0 0 5px 110px; + background:#eaf3f5 repeat top left; + padding:0; +} + +.zonetree_closedarrows { + width:12px; + height:14px; + background:url(../images/zone_sidearrow.png) no-repeat top left; + float:left; + margin:5px 5px 0 8px; + display:inline; + padding:0; + cursor:pointer; + cursor:hand; +} + +.zonetree_openarrows { + width:12px; + height:14px; + background:url(../images/zone_openarrow.png) no-repeat top left; + float:left; + margin:10px 5px 0 8px; + display:inline; + padding:0; + cursor:pointer; + cursor:hand; +} + +.zonetree_zoneicon { + width:18px; + height:18px; + float:left; + background:url(../images/zone_zoneicon.png) no-repeat top left; + font-weight:bold; + margin:3px 0 0 5px; + padding:0; +} + +.zonetree_podicon { + width:22px; + height:18px; + float:left; + background:url(../images/zone_podicon.png) no-repeat top left; + font-weight:bold; + margin:3px 0 0 5px; + padding:0; +} + + +.zonetree_links { + width:auto; + height:auto; + float:left; + color:#2c8bbc; + text-decoration:none; + font-size:12px; + text-align:left; + margin:5px 0 0 10px; + display:inline; + padding:0; + cursor:pointer; + cursor:hand; +} +.zonetree_links:hover { + width:auto; + height:auto; + float:left; + color:#333; + text-decoration:underline; + font-size:12px; + text-align:left; + margin:5px 0 0 10px; + padding:0; + cursor:pointer; + cursor:hand; +} +/* zonetree (begin) */ + diff --git a/ui/new/images/ajax-loader.gif b/ui/new/images/ajax-loader.gif new file mode 100644 index 0000000000000000000000000000000000000000..5b33f7e54f4e55b6b8774d86d96895db9af044b4 GIT binary patch literal 1849 zcma*odr(tX9tZI2z31lM+(&YVk%mZ}5P~KlG2s=WSbGzm0!x7^P##Mnh7t-jP!X0Q zk_SQ}Po-L1tlDK;6l?(>v)e5ZBQx4|Y-Q?nr@Px3?9h(3ZWr3^tj=`TP57gKr87N$ zp2wWee1GRRCwo_xahnw)5cxNPJbCg2L6DV|6`#+yw6v6!mDS$f9-JvFD^n;GQ&UrZ zzh5jCkByB101O60U0q#p_1BM>Cv-vP?&s4@g_((4_1L=L$(a91)0=J91Gas#R{McE znYG^9*0A5YZ>#;~+Wkn(W5B0^yELIYLP!K}mB~<)AM@1&nqekynuaEGqPrzoH|KodRXJy)%+w_fu3nE5>@Bd_b zqC$EQ;{c`T&?EsNO|igL9gC7Ygxv?aQUEXMq?~>wg{EyW;VcJ37CUF#HjrT=KQO_* zS>M9yydXk18D(+QDJ1>r);Lav_uYKp$T?4vr{Q$lTo&pKv^?(>L-)G2*lwH!Ah7k? z7oH<8h-(KTKt5V6$8gF)C7Io&P5=SjTh)=zV=E2EUhQZP##L8S{d%UK>>+y82>+FV+#^BzW7u3F)Bb>=lYQ%%j`F>ASe zo*cw@V#u6T`A2He;70mR(V&iV&-7{qP~=SRf&jm9-T{*ZeZ}$rd0#6c&fLG^xJcf5 z+p<`wJYgW+_s*V{uI$nMB;%8`S_3>PfGOj3Rq}@Cx^+j?rk92fANSFDBYnOqQ>Vdj z)(|$AhP4t&Lb=Gvo2#3Gl%9<=Gv`Mz?Po@P4iLF!x}GUWJICDlFk-hS^Whyh7x~VH z@0vD1>HYD4&e+~yzS*-sFR{9`{QEEZO1zg7>R&7cHts-6j!xHVdA8eI+ZlVzd%`es zJT@$#GX(gvCJ1oJN%yLBK}{V=V;seo;!w|Yte!W1%5qLNFWqvZW>h&IiH+oPT=b@E zPhGzv5=(Un*X>v`>%8h_nj^NdYcE6NHS_ifkCV$*D)Tqrbu`s;<=t<4 zAHNqNV?6(g<1PY-w@#I-WYFViz?9TrkMr)u0g`O`u|>T;k|2sV*YF^punvT;$SuTy{j3Gv)yqD!R_CF>yR)MzmmYS5v+~R zXAdD%ng9?df;wd8GxR#%3O+gz};Vo;)sK%Bj-q>Oq%R7JU-KD?vYu>#2UjaDo z&8$>5xW~?KPD_#XFToU1hIb*VOMidUr6iYiO0N|i-7s`T8!cFT`rN!^1Pt78J93i6 z5HI1wIM$94m{3SLDvISDe6$ZG1;eq_D9RTaaC>=cO{@Bs>$IlPCPJJ$h$)-3vzNUQ6OsN#_zWxey!_9%hxwH2_dEJi=yY|1c7nDm2_Lm!Cof8-R_+9UkS zcBE(o47yE)oMR(Q=dp1a2wTX5KvvGyLqlWTa7V&!A*|w|)ax~1_~aJ0=_Lilg*0iQk7#ZD EAHN$8j{pDw literal 0 HcmV?d00001 diff --git a/ui/new/images/tree_minusopen_icon.png b/ui/new/images/tree_minusopen_icon.png new file mode 100644 index 0000000000000000000000000000000000000000..e5103e46f592764438f56728924929cc9121da52 GIT binary patch literal 728 zcmV;}0w?{6P)R z00G4C_|;)B4d!k>!SEj-fEYo%rF$9w1646FGBPl*FaUw9Bm*1(1Q19m!^Xqb|Bqj( z2kT{AvInFX2tdk#m|@FFi18q>31sNOt56j{Ak5Xk01!Z6TMk{w{D0^946rT#p|*kO zB+vhhjJwZR{{QgpI0IN8$V?aw#6ZU}u!sw~G5ljX&cFl}gg6bV4y@=u#LDA08UHgf zLDc*M3h}eoGib>-FaiV+*dHK#>~h`z`P&%&gZ%XPB_uq+{sIy6cQF1(cpPH1vSbE> zo&I!2#^rk%{{Q`t6f{tWf~Y9x|BNiGYzz#n|KV;!0ej9`{%7G}Wnd5!2xl-=UjdhR z`|&)`(MAlv|D9l9+nSxbf_-uQ zVZ;AVzZxOBp&@9l_8%N<009OMC=fVxz48CGM-2>r{xV>=8pLD;CI>Cq1_m>&dPcaX zK?a-#YP|lq0TB{NZbb$l@qhmq7?^-Dq9NPJV5(8a$m|=*@c-V6Mh0ePV8lW(6O?9! zvOzYp05LOABMZ=PAhqv4A7J?To3Vj$({YCX|DcgC%wx`=DK``7&Ht#0hY{l94_~e_ zTz(i0k1tRHViDvvXZZZ@MSAd0~1i=KcFJ0QU4(!_xtyK22i}gQXLPQ zIV24BUxuU=nBQUP1;hXU5h)e~G^GwBlIz8L>Hoj{o`tIUKLe@`s8@N}(irrWW@1Jo z2)ulE^(5#mvkMF$`$n=Pw3D79jzK<3I%#AOTt700w=f zGKMW@tRO1>Gu&qZN*)v7XRrYJhk=LZ9|H>uBZCk>0|U@i42(cArdMwmiXT2o&e+58-wQqO%V-a!2r~)=V!1()D{qS(2x=Z={SfO3YdF|SPqu0>A%kk^n}ZF zI$nWS`np~*Ksh^w!(hZk#u(0Y8EU1L3ox7;S}X5#L0?>N@HGRM=IbhKYV*f*IHE0f zdvwkhh6s1Pk95$KxUDuwsiltq1IH)W3ZQp^j>-XsM>^0B9%xWAAbB4IzWn>gFcXNU z0NwR~0cHRz8$%D!)Z+ip;AepP8qS96M~MFdri5R=7)n^UxEOjl*%^x9mO)j^i3BkC zn6GDe`t}6F#uJusN5Iqp{aE~i1!&fsT?`+9PUi;+it<@77%TUKm9ew(GYIi&0d4xk z@b2?9u%l{KT*mm?m~1#|i-XM-ztm3nl*m0000^001Q-Bsn%Z2nGWG|NjBJzrfPa(Ea`W zHa9vA3km`Nd;o+00qg7Q^7HbgrKbf11pxv8^6>IwZdCd92Mq-d_xbk$|NsA3T3akD zD-8(?2MY)Q008jo>h$#Y;o{??rlSGf+}`c+^5Wp)0RI2|0R8^`{Tv(~009991_Sc* z@&pD51tSt4$-=?@0s;R1{`~p)Ej}^<{0ATt5!%|^0#HCED-AoN#>Gxu0j2Dpbi7k^;hnRA7ow z3jAa6)VY~9>$U0(RE#K`#*n z27ty|2-UD{z=#5^nkGD4U!7c>Gm9-cPHncHa_$GCag^+B@05c)&$AelMIp6nxraSI z$Vch=#v0w++Kr;PY@!AbkWyunU!k+txBj01os&&VLQxQg&)j=GCZxA3(WZrcY?AhU zu0(NRv-p^)jp=ujM&3W07P Ze*i>dGTY>Pc*y_&002ovPDHLkV1msj0sQ~~ literal 0 HcmV?d00001 diff --git a/ui/new/jsp/resource.jsp b/ui/new/jsp/resource.jsp index 256fdddc9d3..21474aa19b1 100644 --- a/ui/new/jsp/resource.jsp +++ b/ui/new/jsp/resource.jsp @@ -266,4 +266,56 @@ - \ No newline at end of file + + + + + + + + + + + + + diff --git a/ui/new/scripts/cloud.core2.resource.js b/ui/new/scripts/cloud.core2.resource.js index 40ae9b0e5d4..1d12b08600b 100644 --- a/ui/new/scripts/cloud.core2.resource.js +++ b/ui/new/scripts/cloud.core2.resource.js @@ -4,5 +4,61 @@ function afterLoadResourceJSP() { var tabContentArray = ["tab_content_details", "tab_content_network", "tab_content_secondary_storage"]; switchBetweenDifferentTabs(tabArray, tabContentArray); //***** switch between different tabs (end) ********************************************************************** - -} \ No newline at end of file + + var forceLogout = true; // We force a logout only if the user has first added a POD for the very first time + $("#midmenu_container").append($("#zonetree").clone().attr("id", "zonetree1").show()); + + $.ajax({ + data: createURL("command=listZones&available=true&response=json"+maxPageSize), + dataType: "json", + success: function(json) { + var zones = json.listzonesresponse.zone; + var grid = $("#zonetree1 #zones_container").empty(); + if (zones != null && zones.length > 0) { + for (var i = 0; i < zones.length; i++) { + var template = $("#zone_template").clone(true).attr("id", "zone_"+zones[i].id); + zoneJSONToTemplate(zones[i], template); + grid.append(template.show()); + } + } + } + }); + + function zoneJSONToTemplate(json, template) { + var zoneid = json.id; + template.data("id", zoneid).data("name", fromdb(json.name)); + template.find("#zone_name") + .text(fromdb(json.name)) + .data("id", zoneid) + .data("name", fromdb(json.name)) + .data("dns1", json.dns1) + .data("internaldns1", json.internaldns1) + .data("guestcidraddress", json.guestcidraddress); + if (json.dns2 != null) + template.find("#zone_name").data("dns2", json.dns2); + if (json.internaldns2 != null) + template.find("#zone_name").data("internaldns2", json.internaldns2); + if (json.vlan != null) + template.find("#zone_name").data("vlan", json.vlan); + + $.ajax({ + data: createURL("command=listPods&zoneid="+zoneid+"&response=json"), + dataType: "json", + success: function(json) { + var pods = json.listpodsresponse.pod; + var grid = template.find("#pods_container").empty(); + if (pods != null && pods.length > 0) { + for (var i = 0; i < pods.length; i++) { + var podTemplate = $("#pod_template").clone(true).attr("id", "pod_"+pods[i].id); + podJSONToTemplate(pods[i], podTemplate); + grid.append(podTemplate.show()); + forceLogout = false; + } + } + } + }); + } + + function podJSONToTemplate(json, template) {} +} +