441 lines
12 KiB

  1. <%#
  2. LuCI LXC module
  3. Copyright (C) 2014, Cisco Systems, Inc.
  4. Licensed under the Apache License, Version 2.0 (the "License");
  5. you may not use this file except in compliance with the License.
  6. You may obtain a copy of the License at
  7. http://www.apache.org/licenses/LICENSE-2.0
  8. Author: Petar Koretic <petar.koretic@sartura.hr>
  9. -%>
  10. <fieldset class="cbi-section">
  11. <legend><%:Available Containers%></legend>
  12. <div class="cbi-section-node">
  13. <table id="t_lxc_list" class="cbi-section-table">
  14. <tr class="cbi-section-table-titles">
  15. <th class="cbi-section-table-cell"><%:Name%></th>
  16. <th class="cbi-section-table-cell"><%:Status%></th>
  17. <th class="cbi-section-table-cell"><%:Actions%></th>
  18. </tr>
  19. </table>
  20. </div>
  21. </fieldset>
  22. <fieldset class="cbi-section">
  23. <span id="lxc-list-output"></span>
  24. </fieldset>
  25. <hr/>
  26. <fieldset class="cbi-section">
  27. <legend><%:Create New Container%></legend>
  28. <div class="cbi-section-node">
  29. <table id="t_lxc_create" class="cbi-section-table">
  30. <tr class="cbi-section-table-titles">
  31. <th class="cbi-section-table-cell"><%:Name%></th>
  32. <th class="cbi-section-table-cell"><%:Template%></th>
  33. <th class="cbi-section-table-cell"><%:Actions%></th>
  34. </tr>
  35. <tr id="tr_holder">
  36. <td>
  37. <input type="text" id="tx_name" placeholder="<%:Enter new name%>" value='' />
  38. </td>
  39. <td>
  40. <select id="s_template" class="cbi-input-select cbi-button">
  41. <option value="openwrt">OpenWrt</option>
  42. </select>
  43. </td>
  44. <td>
  45. <input type="button" id="bt_create" value="<%:Create%>" onclick="lxc_create(tr_holder)" class="cbi-button cbi-button-add" />
  46. <span id="lxc-add-loader" style="display:inline-block; width:16px; height:16px; margin:0 5px"></span>
  47. </td>
  48. </tr>
  49. </table>
  50. </div>
  51. </fieldset>
  52. <fieldset class="cbi-section">
  53. <span id="lxc-add-output"></span>
  54. </fieldset>
  55. <hr/>
  56. <script type="text/javascript" src="<%=resource%>/cbi.js"></script>
  57. <script type="text/javascript">//<![CDATA[
  58. window.img = { "red" : "<%=resource%>/cbi/red.gif", "green" : "<%=resource%>/cbi/green.gif", "purple" : "<%=resource%>/cbi/purple.gif" }
  59. window.states = { "STOPPED" : "red", "RUNNING" : "green", "FROZEN" : "purple"}
  60. var t_lxc_list = document.getElementById('t_lxc_list');
  61. var loader_html = '<img src="<%=resource%>/icons/loading.gif" alt="<%:Loading%>" width="16" height="16" style="vertical-align:middle" /> ';
  62. var timeout_msg = 0
  63. var output_list = document.getElementById("lxc-list-output")
  64. var output_add = document.getElementById("lxc-add-output")
  65. var loader_add = document.getElementById("lxc-add-loader")
  66. function lxc_create(tr)
  67. {
  68. var lxc_name = tr.querySelector("#tx_name").value.trim()
  69. var lxc_template = tr.querySelector("#s_template").value
  70. var bt_create = tr.querySelector("#bt_create")
  71. if (t_lxc_list.querySelector("[data-id='" + lxc_name + "']") != null)
  72. return info_message(output_add, "Container with that name already exists!", 4000)
  73. bt_create.disabled = true
  74. output_add.innerHTML = ''
  75. if (!lxc_name || !lxc_name.length)
  76. {
  77. bt_create.disabled = false
  78. return info_message(output_add, "Name cannot be empty!", 4000)
  79. }
  80. loading(loader_add)
  81. new XHR().get('<%=luci.dispatcher.build_url("admin", "services")%>/lxc_create/' + '%h/%h'.format(lxc_name, lxc_template) , null,
  82. function(x)
  83. {
  84. bt_create.disabled = false
  85. loading(loader_add, 0)
  86. if (!x)
  87. info_message(output_add, "Container creation failed!")
  88. })
  89. }
  90. function lxc_create_template(lxc_name, lxc_state)
  91. {
  92. var info_row = t_lxc_list.querySelector("#empty")
  93. if (info_row)
  94. t_lxc_list.deleteRow(1)
  95. var actions = ''
  96. actions += '<input type="button" onclick="action_handler(this)" data-action="start" value="<%:Start%>" class="cbi-button cbi-button-apply" />'
  97. actions+= '<input type="button" onclick="action_handler(this)" data-action="stop" value="<%:Stop%>" class="cbi-button cbi-button-reset" />'
  98. actions+= '<input type="button" onclick="action_handler(this)" data-action="destroy" value="<%:Delete%>" class="cbi-button cbi-button-remove" />'
  99. actions+= ' <select class="cbi-input-select cbi-button" onchange="action_more_handler(this)">\
  100. <option selected disabled>more</option>\
  101. <option>configure</option>\
  102. <option>freeze</option>\
  103. <option>unfreeze</option>\
  104. <option>reboot</option>\
  105. </select>'
  106. actions+= '<span data-loader style="display:inline-block; width:16px; height:16px; margin:0 5px"></span>'
  107. var row = t_lxc_list.insertRow(-1)
  108. var cell = row.insertCell(-1)
  109. cell.innerHTML = '%q%h%q'.format("<strong>", lxc_name, "</strong>")
  110. cell.width = "30%"
  111. cell.setAttribute("data-id", lxc_name)
  112. cell = row.insertCell(-1)
  113. cell.width = "20%"
  114. cell.innerHTML = "<img src='"+window.img[lxc_state]+"'/>"
  115. cell = row.insertCell(-1)
  116. cell.width = "50%"
  117. cell.innerHTML = actions
  118. }
  119. function action_handler(self)
  120. {
  121. var action = self.getAttribute("data-action");
  122. var bt_action = self
  123. var lxc_name = self.parentNode.parentNode.children[0].getAttribute('data-id')
  124. var status_img = self.parentNode.parentNode.querySelector('img')
  125. var loader = self.parentNode.querySelector('[data-loader]')
  126. bt_action.disabled = true
  127. if (action == "stop")
  128. {
  129. loading(loader)
  130. new XHR().get('<%=luci.dispatcher.build_url("admin", "services")%>/lxc_action/' + '%h/%h'.format(action, lxc_name), null,
  131. function(x, ec)
  132. {
  133. loading(loader, 0)
  134. bt_action.disabled = false
  135. if (!x || ec)
  136. return info_message(output_list,"Action failed!")
  137. set_status(status_img, "red")
  138. });
  139. }
  140. else if (action == "start")
  141. {
  142. loading(loader)
  143. new XHR().get('<%=luci.dispatcher.build_url("admin", "services")%>/lxc_action/' + '%h/%h'.format(action, lxc_name), null,
  144. function(x, data)
  145. {
  146. loading(loader, 0)
  147. bt_action.disabled = false
  148. //FIXME: uncomment after fixing 'lxc-start'
  149. if (!x /*|| ec */)
  150. return info_message(output_list,"Action failed!")
  151. //FIXME: uncomment after fixing 'lxc-start'
  152. //set_status(status_img, "green")
  153. });
  154. }
  155. else if (action == "destroy")
  156. {
  157. if (!confirm("This will completely remove LXC container from the disk. Are you sure? (container will be stopped if running)"))
  158. return
  159. loading(loader)
  160. new XHR().get('<%=luci.dispatcher.build_url("admin", "services")%>/lxc_action/' + '%h/%h'.format(action, lxc_name), null,
  161. function(x, ec)
  162. {
  163. loading(loader, 0)
  164. bt_action.disabled = false
  165. if (!x || ec)
  166. return info_message(output_list,"Action failed!")
  167. var row = self.parentNode.parentNode
  168. row.parentNode.removeChild(row)
  169. });
  170. }
  171. }
  172. function lxc_configure_handler(self)
  173. {
  174. var td = self.parentNode
  175. var textarea = td.querySelector('[data-id]')
  176. var lxc_name = textarea.getAttribute('data-id')
  177. var lxc_configuration = textarea.value
  178. new XHR().post('<%=luci.dispatcher.build_url("admin", "services")%>/lxc_configuration_set/' + lxc_name, "lxc_configuration=" + encodeURIComponent(lxc_configuration) ,
  179. function(x)
  180. {
  181. if (!x || x.responseText != "0")
  182. return info_message(output_list,"Action failed!")
  183. info_message(output_list,"LXC configuration updated")
  184. var row = td.parentNode
  185. row.parentNode.removeChild(row)
  186. })
  187. }
  188. function lxc_rename_template(lxc_name)
  189. {
  190. var h = '\
  191. <input data-id="'+ lxc_name + '" type="text" placeholder="Enter new name" /> \
  192. <input data-id="bt_confirm" onclick="lxc_rename_handler(this)" type="button" class="cbi-button" value="Confirm" />'
  193. return h
  194. }
  195. function lxc_configure_template(lxc_name, lxc_configuration)
  196. {
  197. var h = '\
  198. <textarea data-id="'+ lxc_name + '" rows="20" style="width:100%">'+ lxc_configuration +'</textarea> \
  199. <input data-id="bt_confirm" onclick="lxc_configure_handler(this)" type="button" class="cbi-button" value="Confirm" />'
  200. return h
  201. }
  202. function action_more_handler(self)
  203. {
  204. var lxc_name = self.parentNode.parentNode.querySelector('[data-id]').getAttribute('data-id')
  205. var loader = self.parentNode.parentNode.querySelector('[data-loader]')
  206. var option = self.options[self.selectedIndex].text
  207. self.value = "more"
  208. switch (option)
  209. {
  210. case "configure":
  211. var tr = document.createElement('tr')
  212. var row = self.parentNode.parentNode
  213. var next_row = row.nextSibling
  214. if (next_row && next_row.getAttribute('data-action') !== null)
  215. row.parentNode.removeChild(next_row)
  216. new XHR().get('<%=luci.dispatcher.build_url("admin", "services")%>/lxc_configuration_get/' + lxc_name, null,
  217. function(x)
  218. {
  219. tr.innerHTML="<td colspan='" + row.cells.length + "'>" + lxc_configure_template(lxc_name, x.responseText) + "</td>"
  220. tr.setAttribute('data-action','')
  221. row.parentNode.insertBefore(tr, row.nextSibling)
  222. })
  223. break
  224. case "freeze":
  225. var tr = self.parentNode.parentNode
  226. var img = tr.querySelector('img')
  227. if(img.getAttribute('src') != window.img["green"])
  228. return info_message(output_list,"Container is not running!")
  229. loading(loader)
  230. new XHR().get('<%=luci.dispatcher.build_url("admin", "services")%>/lxc_action/' + '%h/%h'.format(option, lxc_name), null,
  231. function(x, ec)
  232. {
  233. loading(loader, 0)
  234. if (!x || ec)
  235. return info_message(output_list,"Action failed!")
  236. set_status(img, "purple")
  237. })
  238. break
  239. case "unfreeze":
  240. var tr = self.parentNode.parentNode
  241. var img = tr.querySelector('img')
  242. if(img.getAttribute('src') != window.img["purple"])
  243. return info_message(output_list,"Container is not frozen!")
  244. loading(loader)
  245. new XHR().get('<%=luci.dispatcher.build_url("admin", "services")%>/lxc_action/' + '%h/%h'.format(option, lxc_name), null,
  246. function(x, ec)
  247. {
  248. loading(loader, 0)
  249. if (!x || ec)
  250. return info_message(output_list,"Action failed!")
  251. set_status(img, "green")
  252. })
  253. break
  254. case "reboot":
  255. var tr = self.parentNode.parentNode
  256. var img = tr.querySelector('img')
  257. if(img.getAttribute('src') != window.img["green"])
  258. return info_message(output_list,"Container is not running!")
  259. if (!confirm("Are you sure?"))
  260. return
  261. loading(loader)
  262. new XHR().get('<%=luci.dispatcher.build_url("admin", "services")%>/lxc_action/' + '%h/%h'.format(option, lxc_name), null,
  263. function(x, ec)
  264. {
  265. loading(loader, 0)
  266. if (!x || ec)
  267. return info_message(output_list,"Action failed!")
  268. info_message(output_list,"LXC rebooted")
  269. })
  270. break
  271. }
  272. }
  273. function set_empty(t_lxc_list)
  274. {
  275. if (document.getElementById('empty') !== null)
  276. return
  277. var row_count = t_lxc_list.rows.length;
  278. while(--row_count) t_lxc_list.deleteRow(row_count);
  279. var row = t_lxc_list.insertRow(-1);
  280. row.id = 'empty'
  281. var cell = row.insertCell(0);
  282. cell.colSpan = 4;
  283. cell.innerHTML = '<em><br />There are no containers available yet.</em>';
  284. }
  285. function lxc_list_update()
  286. {
  287. XHR.poll(4, '<%=luci.dispatcher.build_url("admin", "services")%>/lxc_action/list', null,
  288. function(x, data)
  289. {
  290. if (!x) return;
  291. var lxc_count = Object.keys(data).length
  292. if (!data || !lxc_count)
  293. return set_empty(t_lxc_list)
  294. if (document.getElementById('empty') !== null)
  295. t_lxc_list.deleteRow(1);
  296. var lxcs = t_lxc_list.querySelectorAll('td[data-id]')
  297. var lxc_name_table = {}
  298. for (var i = 0, len = lxcs.length; i < len; i++)
  299. {
  300. var lxc_name = lxcs[i].getAttribute('data-id')
  301. if (!(lxc_name in data))
  302. {
  303. var row = t_lxc_list.querySelector("[data-id='" + lxc_name + "']").parentNode
  304. row.parentNode.removeChild(row)
  305. continue
  306. }
  307. lxc_name_table[lxc_name] = lxcs[i].parentNode.querySelector('img')
  308. }
  309. for(var key in data)
  310. {
  311. var lxc_name = key
  312. var state = window.states[data[key]]
  313. if (!(lxc_name in lxc_name_table))
  314. lxc_create_template(lxc_name, state)
  315. else if (state != get_status(lxc_name_table[lxc_name]))
  316. set_status(lxc_name_table[lxc_name], state)
  317. }
  318. })
  319. }
  320. function loading(elem, state)
  321. {
  322. state = (typeof state === 'undefined') ? 1 : state
  323. if (state === 1)
  324. elem.innerHTML = loader_html
  325. else
  326. setTimeout(function() { elem.innerHTML = ''}, 1000)
  327. }
  328. function set_status(elem, state)
  329. {
  330. state = (typeof state === 'undefined') ? 1 : state
  331. setTimeout(function() { elem.setAttribute('src', window.img[state])}, 300)
  332. }
  333. function get_status(elem)
  334. {
  335. var src = elem.getAttribute('src')
  336. for (var i in img)
  337. {
  338. if (img[i] == src)
  339. return i
  340. }
  341. }
  342. function info_message(output, msg, timeout)
  343. {
  344. timeout = timeout || 3000
  345. output.innerHTML = msg
  346. clearTimeout(timeout_msg)
  347. timeout_msg = setTimeout(function(){ output.innerHTML=""}, timeout);
  348. }
  349. lxc_list_update()
  350. //]]></script>