wakame-vdc-webui 10.12.0 → 11.06.0

data/app/views/keypairs/index.html.erb

@@ -14,12 +14,12 @@ jQuery(function($){
 </style>
 <% end %>
 <div id="mainarea_wide">
-	<h3><img src="images/icon_resource.gif" />Key Pairs<a href="#" class="showhide"></a></h3>
+	<h3><img src="images/icon_resource.gif" /><%= t('keypairs.header') %><a href="#" class="showhide"></a></h3>
 	<div id="list_load_mask" class="maincontent">
 		<div class="controller clearfix">
-		  <a href="javascript:void(0);" class="create_ssh_keypair">Create Key Pair</a>
-		  <a href="javascript:void(0);" class="delete_ssh_keypair">Delete</a>
-		  <a href="javascript:void(0);" class="refresh">Refresh</a>
+		  <a href="javascript:void(0);" class="create_ssh_keypair"><%= t('keypairs.button.create_keypair') %></a>
+		  <a href="javascript:void(0);" class="delete_ssh_keypair"><%= t('keypairs.button.delete_keypair') %></a>
+		  <a href="javascript:void(0);" class="refresh" style="margin-left:-9px"><%= t('button.refresh') %></a>
 		</div>
 		<div class="controller clearfix">
 			<!-- <div class="l_float">
@@ -31,7 +31,7 @@ jQuery(function($){
 						</div> -->
       <div id="pagenate" class="r_float">
 			  <a href="javascript:void(0);" class="prev"></a>
-			  <p id="viewPagenate">Items</p>
+			  <p id="viewPagenate"></p>
 			  <a href="javascript:void(0);" class="next"></a>
       </div>
 		</div>
@@ -41,8 +41,8 @@ jQuery(function($){
 			<table class="ptn04" frame="void" cellpadding="0" cellspacing="0" border="0">
 				<tr>
 					<th class="icon"></th>
-					<th>Access Key ID</th>
-					<th class="show_key">Secret Access Key</th>
+					<th><%= t('keypairs.list.access_key_id') %></th>
+					<th class="header_show_key"><%= t('keypairs.list.secret_access_key') %></th>
 				</tr>
 				{{each(index,item) rows}}
 				<tr>
@@ -55,9 +55,9 @@ jQuery(function($){
 					<td>
 					{{if item.uuid }}
 						{{if item.private_key}}
-							<a id="button_${item.uuid}" href="javascript:void(0);" class="show_key">Show Secret Access Key</a>
+							<a id="button_${item.uuid}" href="javascript:void(0);" class="show_key"><%= t('keypairs.button.show_secret_accesskey') %></a>
 						{{else}}
-							<a href="javascript:void(0);" class="show_key">Show Secret Access Key</a>
+							<a href="javascript:void(0);" class="show_key"><%= t('keypairs.button.show_secret_accesskey') %></a>
 						{{/if}}
 					{{/if}}
 					</td>
@@ -69,7 +69,7 @@ jQuery(function($){
 		</div>
 	</div>
 	<div id="btm_maincontent_wide"></div>
-	<h3><img src="images/icon_ttl_detail.gif" />Detail<a href="javascript:void(0);" class="showhide"></a></h3>
+	<h3><img src="images/icon_ttl_detail.gif" /><%= t('keypairs.details.header') %><a href="javascript:void(0);" class="showhide"></a></h3>
  		<div id="detail" class="maincontent">
  			<% content_for :javascript_template do %>
 			<script id="sshKeypairsDetailTemplate" type="text/x-jquery-tmpl">
@@ -77,22 +77,22 @@ jQuery(function($){
 				<table class="ptn08" frame="void" cellpadding="0" cellspacing="0" border="0">
 					<tr>
 						<td class="padcell"></td>
-						<td class="title">Name:</td>
+						<td class="title"><%= t('keypairs.details.name') %>:</td>
 						<td colspan="7">${item.name}</td>
 					</tr>
 					<tr>
 						<td class="padcell"></td>
-						<td class="title">Fingerprint:</td>
-						<td colspan="7"></td>
+						<td class="title"><%= t('keypairs.details.fingerprint') %>:</td>
+            <td colspan="7">${item.finger_print}</td>
 					</tr>
 					<tr>
 						<td class="padcell"></td>
-						<td class="title">Created:</td>
+						<td class="title"><%= t('keypairs.details.created_at') %>:</td>
 						<td colspan="7">${item.created_at}</td>
 					</tr>
 					<tr>
 						<td class="padcell"></td>
-						<td class="title">Updated:</td>
+						<td class="title"><%= t('keypairs.details.updated_at') %>:</td>
 						<td colspan="7">${item.updated_at}</td>
 					</tr>
 				</table>
@@ -101,4 +101,4 @@ jQuery(function($){
 			<% end %>
  		</div><!-- maincontent -->
 	<div id="btm_maincontent_wide_last"></div>
-</div>
+</div>

data/app/views/layouts/_header.html.erb

@@ -1,14 +1,14 @@
 <div id="header">
-	<h1><a href="/">Wakame Inexhaustible Supply of Cloud Fuel.</a></h1>
+	<h1><a href="/"><%= @site[:logo] %></a></h1>
 	<ul id="tab">
 		<li class="infra-act"><h2><a href="#">Infrastructure</a></h2></li>
 		<li class="plat-pas"><h2>Platform</h2></li>
 		<li class="app-pas"><h2>Application</h2></li>
 	</ul>
-	<p><span class="greeting">Welcome,
-	<%= @current_user.login_id %></span>|
-		<!-- <a href="#">Help</a><span class="spacer">|</span> -->
-		<!-- <a href="#">Settings</a><span class="spacer">|</span> -->
-		<%= link_to 'Sign Out','/logout'%></p>
+	<p>
+    <span class="greeting"><%= t("header.welcome_message") %>
+	  <%= @current_user.login_id %><%= t("header.login_name_suffix") %>&nbsp;|&nbsp;<%= link_to(t("header.settings"), '/accounts') %>&nbsp;|&nbsp;<%= link_to t("header.sign_out"),'/logout'%>
+    </span>
+  </p>
 </div>
 <div id="content_header"></div>

data/app/views/layouts/_informationarea.html.erb

@@ -1,6 +1,6 @@
 <div id="informationarea">
 	<div class="title clearfix">
-		<h3>Information</h3>
+		<h3><%= t("information.header") %></h3>
 		<%= link_to image_tag('icon_rss.gif',:width=> 20, :height => 20),:action => 'rss',:controller => 'information' %>
 	</div>
 	<ul>
@@ -8,11 +8,11 @@
 		<li>
 			<h4 class="date"><%= info.created_at.strftime("%Y-%m-%d")
 			 %></h4>
-			<h2><%= info.title %></h2>
-			<p>
-			<%= nl2br(info.description) %>
+     <h2><%= link_to info.title, info.link, {'target' => '_blank'} %></h2>
+      <p style="margin-top:3px">
+      <%= nl2br(info.description) %>
 			</p>
 		</li>
 		<% end %>
 	</ul>
-</div>
+</div>

data/app/views/layouts/_login_header.erb

@@ -1,4 +1,4 @@
 <div id="header">
-	<h1><a href="#">Wakame Inexhaustible Supply of Cloud Fuel.</a></h1>
+	<h1><a href="#"><%= @site[:logo] %></a></h1>
 </div>
 <div id="content_header"></div>

data/app/views/layouts/_sidemenu.html.erb

@@ -1,58 +1,60 @@
 <div id="sidemenu">
 	<div id="account" style="padding:5px">
 			<%= form_for :accounts,:url => accounts_switch_path,:remote => true do |f| %>
-				Change Account：&nbsp;<%= f.select "account_uuid",show_accounts,{:selected => primary_account_id} %>
+				<%= t('sidemenu.change_account') %>：&nbsp;<%= f.select "account_uuid",show_accounts,{:selected => primary_account_id} %>
 			<% end %>
+			<div style="margin-top:10px">
+			<%= t('sidemenu.change_language') %>:&nbsp;
+     	<%= form_for :select_language, :remote => false, :url => request.url, :html => {:id => :select_language, :method => :get,:style => "display: inline"} do |f| %>
+      <%= f.select(:locale, @locales, :selected => @locale) %>
+      <% end %>&nbsp;
+      </div>
+    	
 	</div>
-
-	<!-- <div id="regionselect"><img src="images/listicon_useast.gif" />US East</div>
-	<ul id="regionmenu">
-		<li><a href="#" id="list-useast"><img src="images/listicon_useast.gif" />US East</a></li>
-	  <li><a href="#" id="list-japan"><img src="images/listicon_useast.gif" />Japan</a></li>
-	</ul> -->
+  <fieldset>
+  <select name="regionmenu" id="regionmenu">
+    <option value=""><%= t("selectmenu.select_region") %><%= t("selectmenu.select_region_first") %></option>
+ </select>
+</fieldset>
 	<div class="sidemenu_top"></div><ul class="classify_parent">
-		<li class="parent"><h3><img src="images/icon_summary.gif" width="20" height="20" />SUMMARY</h3>
+		<li class="parent"><h3><img src="/images/icon_summary.gif" width="20" height="20" /><%= t("sidemenu.summary.header") %></h3>
 			<ul>
-				<%= li_link_to_current('Dashboard','home')%>
+				<%= li_link_to_current(t("sidemenu.summary.dashboard"), 'home', 'index')%>
 			</ul>
 		</li>
-		<li class="parent"><h3><img src="images/icon_instances.gif" width="20" height="20" />INSTANCES</h3>
+		<li class="parent"><h3><img src="/images/icon_instances.gif" width="20" height="20" /><%= t("sidemenu.instances.header") %></h3>
 			<ul>
-				<%= li_link_to_current('Instances','instances')%>
+				<%= li_link_to_current(t("sidemenu.instances.instances"), 'instances', 'index')%>
 			</ul>
 			<ul>
-				<%= li_link_to_current('Host Pools','host_pools')%>
+				<%= li_link_to_current(t("sidemenu.instances.host_pools"), 'host_pools', 'index')%>
 			</ul>
 		</li>
-		<li class="parent"><h3><img src="images/icon_images.gif" width="20" height="20" />IMAGES</h3>
+		<li class="parent"><h3><img src="/images/icon_images.gif" width="20" height="20" /><%= t("sidemenu.images.header") %></h3>
 			<ul>
-				<%= li_link_to_current('Machine Images','images')%>
+				<%= li_link_to_current(t("sidemenu.images.machine_images"), 'machine_images', 'index')%>
 			</ul>
 		</li>
-		<li class="parent"><h3><img src="images/icon_blockstore.gif" width="20" height="20" />BLOCK STORE</h3>
+		<li class="parent"><h3><img src="/images/icon_blockstore.gif" width="20" height="20" /><%= t("sidemenu.block_store.header") %></h3>
 			<ul>
-				<%= li_link_to_current('Volumes','volumes')%>
+				<%= li_link_to_current(t("sidemenu.block_store.volumes"), 'volumes', 'index')%>
 			</ul>
 			<ul>
-				<%= li_link_to_current('Snapshots','snapshots')%>
+				<%= li_link_to_current(t("sidemenu.block_store.snapshots"), 'snapshots', 'index')%>
 			</ul>
 			<ul>
-				<%= li_link_to_current('Storage Pools','storage_pools')%>
+				<%= li_link_to_current(t("sidemenu.block_store.storage_pools"), 'storage_pools', 'index')%>
 			</ul>
 		</li>
-		<li class="parent"><h3><img src="images/icon_security.gif" width="20" height="20" />NETWORK & SECURITY</h3>
+		<li class="parent"><h3><img src="/images/icon_security.gif" width="20" height="20" /><%= t("sidemenu.network_security.header") %></h3>
 			<ul>
-				<%= li_link_to_current('Security Groups','security_groups')%>
+				<%= li_link_to_current(t("sidemenu.network_security.security_groups"), 'security_groups', 'index')%>
 			</ul>
 			<ul>
-				<%= li_link_to_current('Key Pairs','keypairs')%>
+				<%= li_link_to_current(t("sidemenu.network_security.key_pairs"), 'keypairs', 'index')%>
 			</ul>
 		</li>
-		<!-- <li class="parent"><h3><img src="images/icon_information.gif" width="20" height="20" />INFORMATION</h3>
-			<ul>
-				<%= li_link_to_current('Service Status','information')%>
-			</ul>
-		</li> -->
 	</ul>
-	<div class="sidemenu_bottom"></div>
-</div>
+	<div class="sidemenu_bottom">
+	</div>
+</div>

data/app/views/layouts/application.html.erb

@@ -4,17 +4,33 @@
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <meta http-equiv="Content-Style-Type" content="text/css" />
 <meta name="keywords" content="あくしゅ,axsh,wakame" />
-<meta name="description" content="Wakame UI">
-<title>Wakame UI</title>
+<meta name="description" content="<%= @site[:meta][:description] %>">
+<title><%= @site[:title] %></title>
 <%= stylesheet_link_tag :all %>
 <%= yield :stylesheet %>
 <%= javascript_include_tag 'jquery-1.4.2.min.js' %>
+<%= javascript_include_tag 'jquery.i18n.properties-min.js' %>
 <%= javascript_include_tag 'jsdeferred.jquery.js' %>
 <%= javascript_include_tag 'jquery.tmpl.js' %>
 <%= javascript_include_tag 'jquery.loadmask.min.js' %>
 <%= javascript_include_tag 'jquery-ui-1.8.4.custom.min.js' %>
+<%= javascript_include_tag 'jquery.easing.1.3.js' %>
+<%= javascript_include_tag 'sexyalertbox.v1.2.jquery.js' %>
+<%= javascript_include_tag 'ui.selectmenu.js' %>
 <%= javascript_include_tag 'dcmgr_gui/core.js' %>
 <%= javascript_include_tag 'dcmgr_gui/application.js' %>
+<script type="text/javascript">
+  jQuery(function($){
+    $.i18n.properties({
+        name:'Messages',
+        path:'/i18n/',
+        mode:'both',
+        language: '<%= I18n.locale %>'
+    });
+    dcmgrGUI.setConfig('time_zone', '<%= @current_user.time_zone %>');
+    dcmgrGUI.setConfig('time_zone_utc_offset', <%= ActiveSupport::TimeZone[@current_user.time_zone].utc_offset %>); 
+  });
+</script>
 <%= yield :javascript %>
 <%= csrf_meta_tag %>
 <link rel="shortcut icon" href="favicon.ico" />
@@ -31,4 +47,4 @@
 	</div>
 <%= yield :javascript_template %>
 </body>
-</html>
+</html>

data/app/views/layouts/login.html.erb

@@ -3,9 +3,9 @@
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <meta http-equiv="Content-Style-Type" content="text/css" />
-<meta name="keywords" content="あくしゅ,axsh,wakame" />
-<meta name="description" content="Wakame UI">
-<title>Wakame UI</title>
+<meta name="keywords" content="<%= @site[:meta][:keywords] %>" />
+<meta name="description" content="<%= @site[:meta][:description] %>">
+<title><%= @site[:title] %></title>
 <%= stylesheet_link_tag :all %>
 <%= csrf_meta_tag %>
 <%= yield :javascript %>
@@ -22,4 +22,4 @@
 		<%= render :partial => 'layouts/footer'%>
 	</div>
 </body>
-</html>
+</html>

data/app/views/{images → machine_images}/index.html.erb

@@ -15,28 +15,16 @@ jQuery(function($){
 <% end %>
 
 <div id="mainarea_wide">
-	<h3><img src="images/icon_resource.gif" />Machine Images<a href="javascript:void(0);" class="showhide"></a></h3>
+	<h3><img src="images/icon_resource.gif" /><%= t("machine_images.header") %><a href="javascript:void(0);" class="showhide"></a></h3>
  <div id="list_load_mask" class="maincontent">
 		<div class="controller clearfix">
-		  <a href="javascript:void(0);" class="launch_instance">Launch Instance</a>
-			<!-- <a href="javascript:void(0);" class="register_new_ami">Register New AMI</a> -->
-			<!-- <a href="javascript:void(0);" class="de_register">De-register</a> -->
-			<a href="javascript:void(0);" class="refresh" style="margin-left:470px">Refresh</a>
+		  <a href="javascript:void(0);" class="launch_instance"><%= t("machine_images.button.launch_instance") %></a>
+			<a href="javascript:void(0);" class="refresh" style="margin-left:463px"><%= t("button.refresh") %></a>
 		</div>
 		<div class="controller clearfix">
-			<!-- <div class="l_float">
-							<span class="text">Viewing:</span>
-							<select class="select">
-								<option>Owned By Me</option>
-							</select>
-							<select class="type">
-								<option>All Platforms</option>
-							</select>
-							<input type="text" class="search" />
-						</div> -->
      <div id="pagenate" class="r_float">
 			  <a href="javascript:void(0);" class="prev"></a>
-			  <p id="viewPagenate">WMIs</p>
+			  <p id="viewPagenate"></p>
 			  <a href="javascript:void(0);" class="next"></a>
      </div>
 		</div>
@@ -46,10 +34,10 @@ jQuery(function($){
 			<table class="ptn01" frame="void" cellpadding="0" cellspacing="0" border="0">
 				<tr>
 					<th></th>
-					<th>WMI ID</th>
-					<th>Source</th>
-					<th>Owner</th>
-					<th>State</th>
+					<th><%= t("machine_images.list.wmi_id") %></th>
+					<th><%= t("machine_images.list.description") %></th>
+					<th><%= t("machine_images.list.owner") %></th>
+					<th><%= t("machine_images.list.state") %></th>
 				</tr>
 			   {{each(index,item) rows}}
 			   <tr>
@@ -59,10 +47,8 @@ jQuery(function($){
 						<td class="listradiobutton"></td>
 					{{/if}}
 					<td class="vtip" title="title">${item.uuid}</td>
-					<td class="vtip" title="source" style="width:300px">
-					{{each(index,source) item.source}}
-						${source.uri}
-					{{/each}}
+					<td class="vtip" title="description" style="width:300px">
+					${item.description}
 					</td>
 					<td class="vtip" title="owner">${item.account_id}</td>
 					<td class="vtip center" title="state">${item.state}</td>
@@ -74,47 +60,42 @@ jQuery(function($){
 		</div>
 	</div>
 	<div id="btm_maincontent_wide"></div>
-	<h3><img src="images/icon_ttl_detail.gif" />Details<a href="javascript:void(0);" class="showhide"></a></h3>
+	<h3><img src="images/icon_ttl_detail.gif" /><%= t("machine_images.details.header") %><a href="javascript:void(0);" class="showhide"></a></h3>
  		<div id="detail" class="maincontent">
 			<% content_for :javascript_template do %>
 			<script id="imagesDetailTemplate" type="text/x-jquery-tmpl">
 			<div id="${item.wmi_id}" class="display_area">
-				<h4 class="ptn01">WMI ID:<span class="instansid">${item.uuid}</span></h4>
+				<h4 class="ptn01"><%= t("machine_images.details.wmi_id") %>:<span class="instansid">${item.uuid}</span></h4>
 				<table class="ptn06" frame="void" cellpadding="0" cellspacing="0" border="0">
 					<tr>
 						<td class="padcell"></td>
-						<td class="title">WMI ID:</td>
+						<td class="title"><%= t("machine_images.details.wmi_id") %>:</td>
 						<td colspan="7">${item.uuid}</td>
 					</tr>
 					<tr>
 						<td class="padcell"></td>
-						<td class="title">Description:</td>
+						<td class="title"><%= t("machine_images.details.description") %>:</td>
 						<td colspan="7">${item.description}</td>
 					</tr>
 					<tr>
 						<td class="padcell"></td>
-						<td class="title">Source:</td>
-						<td colspan="7">${item.source.uri}</td>
-					</tr>
-					<tr>
-						<td class="padcell"></td>
-						<td class="title">Owner:</td>
+						<td class="title"><%= t("machine_images.details.owner") %>:</td>
 						<td>${item.account_id}</td>
 						<td class="padcell"></td>
-						<td class="title">Arch:</td>
+						<td class="title"><%= t("machine_images.details.arch") %>:</td>
 						<td>${item.arch}</td>
 						<td class="padcell"></td>
-						<td class="title">Status:</td>
+						<td class="title"><%= t("machine_images.details.status") %>:</td>
 						<td>${item.state}</td>
 					</tr>
 					<tr>
 						<td class="padcell"></td>
-						<td class="title">Created At:</td>
+						<td class="title"><%= t("machine_images.details.created_at") %>:</td>
 						<td colspan="7">${item.created_at}</td>
 					</tr>
 					<tr>
 						<td class="padcell"></td>
-						<td class="title">Updated At:</td>
+						<td class="title"><%= t("machine_images.details.updated_at") %>:</td>
 						<td colspan="7">${item.updated_at}</td>
 					</tr>
 				</table>
@@ -123,4 +104,4 @@ jQuery(function($){
 			<% end %>
 	</div><!-- maincontent -->
 	<div id="btm_maincontent_wide_last"></div>
-</div><!-- mainarea_wide -->
+</div><!-- mainarea_wide -->

data/app/views/security_groups/index.html.erb

@@ -1,5 +1,8 @@
 <% content_for :javascript do %>
 <%= javascript_include_tag 'dcmgr_gui/security_group_panel.js' %>
+<%= javascript_include_tag 'jquery.cluetip.min.js' %>
+<%= javascript_include_tag 'jquery.hoverIntent.js' %>
+
 <script type="text/javascript">
 jQuery(function($){
 	dcmgrGUI.securityGroupPanel();
@@ -9,6 +12,7 @@ jQuery(function($){
 <% end %>
 
 <% content_for :stylesheet do %>
+<%= stylesheet_link_tag 'jquery.cluetip.css' %>
 <style type="text/css">
 	.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset { text-align:center; float: none;}
 	.ui-dialog .ui-dialog-content {margin:5px;}
@@ -16,24 +20,17 @@ jQuery(function($){
 <% end %>
 
 <div id="mainarea_wide">
-	<h3><img src="images/icon_resource.gif" />Security Groups<a href="javascript:void(0);" class="showhide"></a></h3>
+	<h3><img src="images/icon_resource.gif" /><%= t("security_groups.header") %><a href="javascript:void(0);" class="showhide"></a></h3>
  <div id="list_load_mask" class="maincontent">
 		<div class="controller clearfix">
-		  <a href="javascript:void(0);" class="create_security_group">Create Security Group</a>
-			<a href="javascript:void(0);" class="delete_security_group" >Delete</a>
-			<a href="javascript:void(0);" class="refresh" style="margin-left:302px">Refresh</a>
+		  <a href="javascript:void(0);" class="create_security_group"><%= t("security_groups.button.create_security_group") %></a>
+			<a href="javascript:void(0);" class="delete_security_group" ><%= t("security_groups.button.delete_security_group") %></a>
+			<a href="javascript:void(0);" class="refresh" style="margin-left:585px"><%=  t("button.refresh") %></a>
 		</div>
 		<div class="controller clearfix">
-			<!-- <div class="l_float">
-							<span class="text">Viewing:</span>
-							<select class="select" style="width:130px">
-								<option>All Security Groups</option>
-							</select>
-							<input type="text" class="search" />
-						</div> -->
      <div id="pagenate" class="r_float">
 			  <a href="javascript:void(0);" class="prev"></a>
-				<p id="viewPagenate">Items</p>
+				<p id="viewPagenate"></p>
 			  <a href="javascript:void(0);" class="next"></a>
      </div>
 		</div>
@@ -43,9 +40,9 @@ jQuery(function($){
 			<table class="ptn01" frame="void" cellpadding="0" cellspacing="0" border="0">
 				<tr>
 					<th></th>
-					<th>Name</th>
-					<th>Description</th>
-					<th>Action</th>
+					<th><%= t("security_groups.list.name") %></th>
+					<th><%= t("security_groups.list.descriptions") %></th>
+					<th><%= t("security_groups.list.action") %></th>
 				</tr>
 				{{each(index,item) rows}}
 			   <tr>
@@ -54,11 +51,11 @@ jQuery(function($){
 					{{else}}
 						<td class="listradiobutton"></td>
 					{{/if}}
-					<td class="vtip" title="name" style="width:100px">${item.name}</td>
+					<td class="vtip" title="name" style="width:130px">${item.name}</td>
 					<td class="vtip" title="description" style="width:500px">${item.description}</td>
 					{{if item.name }}
 					<td class="vtip center" title="action">
-						<a href="javascript:void(0);" class="edit_security_group" id="edit_${item.uuid}">Edit</a>
+						<a href="javascript:void(0);" class="edit_security_group" id="edit_${item.uuid}"><%= t("security_groups.button.edit_security_group") %></a>
 					</td>
 					{{else}}
 						<td class="vtip center" title="action"></td>
@@ -72,7 +69,7 @@ jQuery(function($){
 		</div>
 	</div>
 	<div id="btm_maincontent_wide"></div>
-	<h3><img src="images/icon_ttl_detail.gif" />Detail<a href="javascript:void(0);" class="showhide"></a></h3>
+	<h3><img src="images/icon_ttl_detail.gif" /><%= t("security_groups.details.header") %><a href="javascript:void(0);" class="showhide"></a></h3>
  		<div id="detail" class="maincontent">
  			<% content_for :javascript_template do %>
 			<script id="securityGroupsDetailTemplate" type="text/x-jquery-tmpl">
@@ -80,12 +77,12 @@ jQuery(function($){
 				<table class="ptn07" frame="void" cellpadding="0" cellspacing="0" border="0">
 					<tr>
 						<td class="padcell"></td>
-						<td class="title">Name:</td>
+						<td class="title"><%= t("security_groups.details.name") %>:</td>
 						<td>${item.name}</td>
 					</tr>
 					<tr>
 						<td class="padcell"></td>
-						<td class="title">Description:</td>
+						<td class="title"><%= t("security_groups.details.description") %>:</td>
 						<td>${item.description}</td>
 					</tr>
 					<tr>
@@ -96,12 +93,12 @@ jQuery(function($){
 					</tr>
 					<tr>
 						<td class="padcell"></td>
-	         	<td class="title">Created:</td>
+	         	<td class="title"><%= t("security_groups.details.created_at") %>:</td>
 	         	<td colspan="7">${item.created_at}</td>
 					</tr>
 	        <tr>
 	          <td class="padcell"></td>
-	          <td class="title">Updated:</td>
+	          <td class="title"><%= t("security_groups.details.updated_at") %>:</td>
 	          <td colspan="7">${item.updated_at}</td>
 					</tr>
 				</table>
@@ -111,4 +108,4 @@ jQuery(function($){
 			<% end %>
  		</div><!-- maincontent -->
 	<div id="btm_maincontent_wide_last"></div>
-</div><!-- mainarea_wide -->
+</div><!-- mainarea_wide -->