lxc.htm 13 KB

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