5 Copyright (C) 2014, Cisco Systems, Inc.
7 Licensed under the Apache License, Version 2.0 (the "License");
8 you may not use this file except in compliance with the License.
9 You may obtain a copy of the License at
11 http://www.apache.org/licenses/LICENSE-2.0
13 Author: Petar Koretic <petar.koretic@sartura.hr>
17 <fieldset class="cbi-section">
18 <legend><%:Available Containers%></legend>
19 <div class="cbi-section-node">
20 <table id="t_lxc_list" class="cbi-section-table">
21 <tr class="cbi-section-table-titles">
22 <th class="cbi-section-table-cell"><%:Name%></th>
23 <th class="cbi-section-table-cell"><%:Status%></th>
24 <th class="cbi-section-table-cell"><%:Actions%></th>
30 <fieldset class="cbi-section">
31 <span id="lxc-list-output"></span>
35 <fieldset class="cbi-section">
36 <legend><%:Create New Container%></legend>
37 <div class="cbi-section-node">
38 <table id="t_lxc_create" class="cbi-section-table">
39 <tr class="cbi-section-table-titles">
40 <th class="cbi-section-table-cell"><%:Name%></th>
41 <th class="cbi-section-table-cell"><%:Template%></th>
42 <th class="cbi-section-table-cell"><%:Actions%></th>
46 <input type="text" id="tx_name" placeholder="<%:Enter new name%>" value='' />
49 <select id="s_template" class="cbi-input-select cbi-button">
53 <input type="button" id="bt_create" value="<%:Create%>" onclick="lxc_create(tr_holder)" class="cbi-button cbi-button-add" />
54 <span id="lxc-add-loader" style="display:inline-block; width:16px; height:16px; margin:0 5px"></span>
61 <fieldset class="cbi-section">
62 <span id="lxc-add-output"></span>
67 <script type="text/javascript" src="<%=resource%>/cbi.js"></script>
68 <script type="text/javascript">//<![CDATA[
70 window.img = { "red" : "<%=resource%>/cbi/red.gif", "green" : "<%=resource%>/cbi/green.gif", "purple" : "<%=resource%>/cbi/purple.gif" }
71 window.states = { "STOPPED" : "red", "RUNNING" : "green", "FROZEN" : "purple"}
73 var t_lxc_list = document.getElementById('t_lxc_list');
74 var loader_html = '<img src="<%=resource%>/icons/loading.gif" alt="<%:Loading%>" width="16" height="16" style="vertical-align:middle" /> ';
76 var output_list = document.getElementById("lxc-list-output")
77 var output_add = document.getElementById("lxc-add-output")
78 var loader_add = document.getElementById("lxc-add-loader")
80 function lxc_create(tr)
82 var lxc_name = tr.querySelector("#tx_name").value.trim()
83 var lxc_template = tr.querySelector("#s_template").value
84 var bt_create = tr.querySelector("#bt_create")
86 if (t_lxc_list.querySelector("[data-id='" + lxc_name + "']") != null)
87 return info_message(output_add, "Container with that name already exists!", 4000)
89 bt_create.disabled = true
90 output_add.innerHTML = ''
92 if (!lxc_name || !lxc_name.length)
94 bt_create.disabled = false
95 return info_message(output_add, "Name cannot be empty!", 4000)
100 new XHR().get('<%=luci.dispatcher.build_url("admin", "services")%>/lxc_create/' + '%h/%h'.format(lxc_name, lxc_template) , null,
103 bt_create.disabled = false
104 loading(loader_add, 0)
107 info_message(output_add, "Container creation failed!")
111 function lxc_create_template(lxc_name, lxc_state)
113 var info_row = t_lxc_list.querySelector("#empty")
115 t_lxc_list.deleteRow(1)
118 actions += '<input type="button" onclick="action_handler(this)" data-action="start" value="<%:Start%>" class="cbi-button cbi-button-apply" />'
119 actions+= '<input type="button" onclick="action_handler(this)" data-action="stop" value="<%:Stop%>" class="cbi-button cbi-button-reset" />'
120 actions+= '<input type="button" onclick="action_handler(this)" data-action="destroy" value="<%:Delete%>" class="cbi-button cbi-button-remove" />'
121 actions+= ' <select class="cbi-input-select cbi-button" onchange="action_more_handler(this)">\
122 <option selected disabled>more</option>\
123 <option>configure</option>\
124 <option>freeze</option>\
125 <option>unfreeze</option>\
126 <option>reboot</option>\
128 actions+= '<span data-loader style="display:inline-block; width:16px; height:16px; margin:0 5px"></span>'
130 var row = t_lxc_list.insertRow(-1)
131 var cell = row.insertCell(-1)
132 cell.innerHTML = '%q%h%q'.format("<strong>", lxc_name, "</strong>")
134 cell.setAttribute("data-id", lxc_name)
136 cell = row.insertCell(-1)
138 cell.innerHTML = "<img src='"+window.img[lxc_state]+"'/>"
140 cell = row.insertCell(-1)
142 cell.innerHTML = actions
145 function action_handler(self)
147 var action = self.getAttribute("data-action");
150 var lxc_name = self.parentNode.parentNode.children[0].getAttribute('data-id')
151 var status_img = self.parentNode.parentNode.querySelector('img')
152 var loader = self.parentNode.querySelector('[data-loader]')
154 bt_action.disabled = true
156 if (action == "stop")
160 new XHR().get('<%=luci.dispatcher.build_url("admin", "services")%>/lxc_action/' + '%h/%h'.format(action, lxc_name), null,
164 bt_action.disabled = false
167 return info_message(output_list,"Action failed!")
169 set_status(status_img, "red")
174 else if (action == "start")
178 new XHR().get('<%=luci.dispatcher.build_url("admin", "services")%>/lxc_action/' + '%h/%h'.format(action, lxc_name), null,
182 bt_action.disabled = false
184 //FIXME: uncomment after fixing 'lxc-start'
186 return info_message(output_list,"Action failed!")
188 //FIXME: uncomment after fixing 'lxc-start'
189 //set_status(status_img, "green")
193 else if (action == "destroy")
195 if (!confirm("This will completely remove LXC container from the disk. Are you sure? (container will be stopped if running)"))
200 new XHR().get('<%=luci.dispatcher.build_url("admin", "services")%>/lxc_action/' + '%h/%h'.format(action, lxc_name), null,
204 bt_action.disabled = false
207 return info_message(output_list,"Action failed!")
209 var row = self.parentNode.parentNode
210 row.parentNode.removeChild(row)
216 function lxc_configure_handler(self)
218 var td = self.parentNode
219 var textarea = td.querySelector('[data-id]')
220 var lxc_name = textarea.getAttribute('data-id')
221 var lxc_configuration = textarea.value
223 new XHR().post('<%=luci.dispatcher.build_url("admin", "services")%>/lxc_configuration_set/' + lxc_name, "lxc_configuration=" + encodeURIComponent(lxc_configuration) ,
226 if (!x || x.responseText != "0")
227 return info_message(output_list,"Action failed!")
229 info_message(output_list,"LXC configuration updated")
230 var row = td.parentNode
231 row.parentNode.removeChild(row)
235 function lxc_rename_template(lxc_name)
238 <input data-id="'+ lxc_name + '" type="text" placeholder="Enter new name" /> \
239 <input data-id="bt_confirm" onclick="lxc_rename_handler(this)" type="button" class="cbi-button" value="Confirm" />'
244 function lxc_configure_template(lxc_name, lxc_configuration)
247 <textarea data-id="'+ lxc_name + '" rows="20" style="width:100%">'+ lxc_configuration +'</textarea> \
248 <input data-id="bt_confirm" onclick="lxc_configure_handler(this)" type="button" class="cbi-button" value="Confirm" />'
253 function action_more_handler(self)
255 var lxc_name = self.parentNode.parentNode.querySelector('[data-id]').getAttribute('data-id')
256 var loader = self.parentNode.parentNode.querySelector('[data-loader]')
258 var option = self.options[self.selectedIndex].text
265 var tr = document.createElement('tr')
266 var row = self.parentNode.parentNode
267 var next_row = row.nextSibling
268 if (next_row && next_row.getAttribute('data-action') !== null)
269 row.parentNode.removeChild(next_row)
271 new XHR().get('<%=luci.dispatcher.build_url("admin", "services")%>/lxc_configuration_get/' + lxc_name, null,
274 tr.innerHTML="<td colspan='" + row.cells.length + "'>" + lxc_configure_template(lxc_name, x.responseText) + "</td>"
275 tr.setAttribute('data-action','')
276 row.parentNode.insertBefore(tr, row.nextSibling)
282 var tr = self.parentNode.parentNode
283 var img = tr.querySelector('img')
284 if(img.getAttribute('src') != window.img["green"])
285 return info_message(output_list,"Container is not running!")
288 new XHR().get('<%=luci.dispatcher.build_url("admin", "services")%>/lxc_action/' + '%h/%h'.format(option, lxc_name), null,
293 return info_message(output_list,"Action failed!")
295 set_status(img, "purple")
301 var tr = self.parentNode.parentNode
302 var img = tr.querySelector('img')
304 if(img.getAttribute('src') != window.img["purple"])
305 return info_message(output_list,"Container is not frozen!")
308 new XHR().get('<%=luci.dispatcher.build_url("admin", "services")%>/lxc_action/' + '%h/%h'.format(option, lxc_name), null,
313 return info_message(output_list,"Action failed!")
315 set_status(img, "green")
321 var tr = self.parentNode.parentNode
322 var img = tr.querySelector('img')
323 if(img.getAttribute('src') != window.img["green"])
324 return info_message(output_list,"Container is not running!")
326 if (!confirm("Are you sure?"))
330 new XHR().get('<%=luci.dispatcher.build_url("admin", "services")%>/lxc_action/' + '%h/%h'.format(option, lxc_name), null,
335 return info_message(output_list,"Action failed!")
337 info_message(output_list,"LXC rebooted")
344 function set_empty(t_lxc_list)
346 if (document.getElementById('empty') !== null)
349 var row_count = t_lxc_list.rows.length;
350 while(--row_count) t_lxc_list.deleteRow(row_count);
352 var row = t_lxc_list.insertRow(-1);
354 var cell = row.insertCell(0);
356 cell.innerHTML = '<em><br />There are no containers available yet.</em>';
359 function lxc_list_update()
361 XHR.poll(4, '<%=luci.dispatcher.build_url("admin", "services")%>/lxc_action/list', null,
366 var lxc_count = Object.keys(data).length
367 if (!data || !lxc_count)
368 return set_empty(t_lxc_list)
370 if (document.getElementById('empty') !== null)
371 t_lxc_list.deleteRow(1);
373 var lxcs = t_lxc_list.querySelectorAll('td[data-id]')
374 var lxc_name_table = {}
375 for (var i = 0, len = lxcs.length; i < len; i++)
377 var lxc_name = lxcs[i].getAttribute('data-id')
378 if (!(lxc_name in data))
380 var row = t_lxc_list.querySelector("[data-id='" + lxc_name + "']").parentNode
381 row.parentNode.removeChild(row)
385 lxc_name_table[lxc_name] = lxcs[i].parentNode.querySelector('img')
391 var state = window.states[data[key]]
393 if (!(lxc_name in lxc_name_table))
394 lxc_create_template(lxc_name, state)
396 else if (state != get_status(lxc_name_table[lxc_name]))
397 set_status(lxc_name_table[lxc_name], state)
403 function loading(elem, state)
405 state = (typeof state === 'undefined') ? 1 : state
408 elem.innerHTML = loader_html
410 setTimeout(function() { elem.innerHTML = ''}, 1000)
413 function set_status(elem, state)
415 state = (typeof state === 'undefined') ? 1 : state
417 setTimeout(function() { elem.setAttribute('src', window.img[state])}, 300)
420 function get_status(elem)
422 var src = elem.getAttribute('src')
431 function info_message(output, msg, timeout)
433 timeout = timeout || 3000
434 output.innerHTML = msg
435 clearTimeout(timeout_msg)
436 timeout_msg = setTimeout(function(){ output.innerHTML=""}, timeout);
441 new XHR().get('<%=luci.dispatcher.build_url("admin", "services")%>/lxc_get_downloadable', null,
446 var lxc_count = Object.keys(data).length
447 if (!data || !lxc_count) return;
448 var select = document.getElementById("s_template");
451 var option = document.createElement('option');
452 option.value = data[key];
453 option.text = data[key].replace(/[_:]/g, ' ');
454 select.add(option, -1);