-%>
-<%-
-local nx = require "nixio"
-local target = nx.uname().machine
--%>
-
<fieldset class="cbi-section">
<legend><%:Available Containers%></legend>
<div class="cbi-section-node">
- <div class="table cbi-section-table" id="t_lxc_list">
- <div class="tr cbi-section-table-titles">
- <div class="th cbi-section-table-cell"><%:Name%></div>
- <div class="th cbi-section-table-cell"><%:Status%></div>
- <div class="th cbi-section-table-cell"><%:Actions%></div>
- </div>
- </div>
+ <table id="t_lxc_list" class="cbi-section-table">
+ <tr class="cbi-section-table-titles">
+ <th class="cbi-section-table-cell"><%:Name%></th>
+ <th class="cbi-section-table-cell"><%:Status%></th>
+ <th class="cbi-section-table-cell"><%:Actions%></th>
+ </tr>
+ </table>
</div>
</fieldset>
<span id="lxc-list-output"></span>
</fieldset>
-<hr />
+<hr/>
<fieldset class="cbi-section">
<legend><%:Create New Container%></legend>
<div class="cbi-section-node">
- <div class="table cbi-section-table" id="t_lxc_create">
- <div class="tr cbi-section-table-titles">
- <div class="th cbi-section-table-cell"><%:Name%></div>
- <div class="th cbi-section-table-cell"><%:Template%></div>
- <div class="th cbi-section-table-cell"><%:Actions%></div>
- </div>
- <div class="tr cbi-section-table-row" id="div_create">
- <div class="td"><input class="cbi-input-text" type="text" id="tx_name" placeholder="<%:Enter new name%>" value='' /></div>
- <div class="td"><select id="s_template" class="cbi-input-select cbi-button"></select></div>
- <div class="td">
- <input type="button" id="bt_create" value="<%:Create%>" onclick="lxc_create()" class="cbi-button cbi-button-add" />
+ <table id="t_lxc_create" class="cbi-section-table">
+ <tr class="cbi-section-table-titles">
+ <th class="cbi-section-table-cell"><%:Name%></th>
+ <th class="cbi-section-table-cell"><%:Template%></th>
+ <th class="cbi-section-table-cell"><%:Actions%></th>
+ </tr>
+ <tr id="tr_holder">
+ <td>
+ <input type="text" id="tx_name" placeholder="<%:Enter new name%>" value='' />
+ </td>
+ <td>
+ <select id="s_template" class="cbi-input-select cbi-button">
+ </select>
+ </td>
+ <td>
+ <input type="button" id="bt_create" value="<%:Create%>" onclick="lxc_create(tr_holder)" class="cbi-button cbi-button-add" />
<span id="lxc-add-loader" style="display:inline-block; width:16px; height:16px; margin:0 5px"></span>
- </div>
- </div>
- </div>
+ </td>
+ </tr>
+ </table>
</div>
</fieldset>
<span id="lxc-add-output"></span>
</fieldset>
-<hr />
+<hr/>
<script type="text/javascript" src="<%=resource%>/cbi.js"></script>
-<script type="text/javascript">
-//<![CDATA[
- window.img = { "red" : "<%=resource%>/cbi/red.gif", "green" : "<%=resource%>/cbi/green.gif", "purple" : "<%=resource%>/cbi/purple.gif" };
- window.states = { "STOPPED" : "red", "RUNNING" : "green", "FROZEN" : "purple" };
-
- var t_lxc_list = document.getElementById('t_lxc_list');
- var loader_html = '<img src="<%=resource%>/icons/loading.gif" alt="<%:Loading%>" width="16" height="16" style="vertical-align:middle" />';
- var output_list = document.getElementById("lxc-list-output");
- var output_add = document.getElementById("lxc-add-output");
- var loader_add = document.getElementById("lxc-add-loader");
- var div_create = document.getElementById("div_create");
- var bt_create = div_create.querySelector("#bt_create");
-
- bt_create.disabled = true;
- info_message(output_add, "Template download in progress, please be patient!");
-
- function lxc_create()
+<script type="text/javascript">//<![CDATA[
+
+ window.img = { "red" : "<%=resource%>/cbi/red.gif", "green" : "<%=resource%>/cbi/green.gif", "purple" : "<%=resource%>/cbi/purple.gif" }
+ window.states = { "STOPPED" : "red", "RUNNING" : "green", "FROZEN" : "purple"}
+
+ var t_lxc_list = document.getElementById('t_lxc_list');
+ var loader_html = '<img src="<%=resource%>/icons/loading.gif" alt="<%:Loading%>" width="16" height="16" style="vertical-align:middle" /> ';
+ var timeout_msg = 0
+ var output_list = document.getElementById("lxc-list-output")
+ var output_add = document.getElementById("lxc-add-output")
+ var loader_add = document.getElementById("lxc-add-loader")
+
+ function lxc_create(tr)
{
- var lxc_name = div_create.querySelector("#tx_name").value.replace(/[\s!@#$%^&*()+=\[\]{};':"\\|,<>\/?]/g,'');
- var lxc_template = div_create.querySelector("#s_template").value;
+ var lxc_name = tr.querySelector("#tx_name").value.trim()
+ var lxc_template = tr.querySelector("#s_template").value
+ var bt_create = tr.querySelector("#bt_create")
if (t_lxc_list.querySelector("[data-id='" + lxc_name + "']") != null)
- {
- return info_message(output_add, "Container with that name already exists!", 2000);
- }
+ return info_message(output_add, "Container with that name already exists!", 4000)
- bt_create.disabled = true;
- output_add.innerHTML = '';
-
- if (!lxc_template)
- {
- return set_no_template();
- }
+ bt_create.disabled = true
+ output_add.innerHTML = ''
if (!lxc_name || !lxc_name.length)
{
- bt_create.disabled = false;
- return info_message(output_add, "The 'Name' field must not be empty!", 2000);
+ bt_create.disabled = false
+ return info_message(output_add, "Name cannot be empty!", 4000)
}
- loading(loader_add);
+ loading(loader_add)
new XHR().get('<%=luci.dispatcher.build_url("admin", "services")%>/lxc_create/' + '%h/%h'.format(lxc_name, lxc_template) , null,
function(x)
{
- bt_create.disabled = false;
- loading(loader_add, 0);
+ bt_create.disabled = false
+ loading(loader_add, 0)
if (!x)
- {
- info_message(output_add, "Container creation failed!", 2000);
- }
+ info_message(output_add, "Container creation failed!")
})
}
function lxc_create_template(lxc_name, lxc_state)
{
- if (document.getElementById(lxc_name))
- {
- return;
- }
-
- info_message(output_list, "");
- var actions = '';
- actions += '<input type="button" onclick="action_handler(this)" data-action="start" value="<%:Start%>" class="cbi-button cbi-button-apply" />';
- actions += ' <input type="button" onclick="action_handler(this)" data-action="stop" value="<%:Stop%>" class="cbi-button cbi-button-reset" />';
- actions += ' <input type="button" onclick="action_handler(this)" data-action="destroy" value="<%:Delete%>" class="cbi-button cbi-button-remove" />';
- actions += ' <select class="cbi-input-select cbi-button" style="width:10em" onchange="action_more_handler(this)">\
- <option selected="selected" disabled="disabled">more</option>\
+ var info_row = t_lxc_list.querySelector("#empty")
+ if (info_row)
+ t_lxc_list.deleteRow(1)
+
+ var actions = ''
+ actions += '<input type="button" onclick="action_handler(this)" data-action="start" value="<%:Start%>" class="cbi-button cbi-button-apply" />'
+ actions+= '<input type="button" onclick="action_handler(this)" data-action="stop" value="<%:Stop%>" class="cbi-button cbi-button-reset" />'
+ actions+= '<input type="button" onclick="action_handler(this)" data-action="destroy" value="<%:Delete%>" class="cbi-button cbi-button-remove" />'
+ actions+= ' <select class="cbi-input-select cbi-button" onchange="action_more_handler(this)">\
+ <option selected disabled>more</option>\
<option>configure</option>\
<option>freeze</option>\
<option>unfreeze</option>\
<option>reboot</option>\
- </select>';
- actions += '<span data-loader="" style="display:inline-block; width:16px; height:16px; margin:0 5px"></span>';
-
- var div0 = document.createElement("div");
- div0.className = "tr cbi-section-table-row";
- div0.id = lxc_name;
- div0.setAttribute("data-id", lxc_name);
-
- var div1 = document.createElement("div");
- div1.className = "td";
- div1.style.width = "30%";
- div1.innerHTML = '%q%h%q'.format("<strong>", lxc_name, "</strong>");
-
- var div2 = document.createElement("div");
- div2.className = "td";
- div2.style.width = "20%";
- div2.innerHTML = "<img src='"+window.img[lxc_state]+"'/>";
-
- var div3 = document.createElement("div");
- div3.className = "td";
- div3.style.width = "50%";
- div3.innerHTML = actions;
-
- document.getElementById("t_lxc_list").appendChild(div0);
- div0.appendChild(div1);
- div0.appendChild(div2);
- div0.appendChild(div3);
+ </select>'
+ actions+= '<span data-loader style="display:inline-block; width:16px; height:16px; margin:0 5px"></span>'
+
+ var row = t_lxc_list.insertRow(-1)
+ var cell = row.insertCell(-1)
+ cell.innerHTML = '%q%h%q'.format("<strong>", lxc_name, "</strong>")
+ cell.width = "30%"
+ cell.setAttribute("data-id", lxc_name)
+
+ cell = row.insertCell(-1)
+ cell.width = "20%"
+ cell.innerHTML = "<img src='"+window.img[lxc_state]+"'/>"
+
+ cell = row.insertCell(-1)
+ cell.width = "50%"
+ cell.innerHTML = actions
}
function action_handler(self)
{
- var bt_action = self;
- var action = self.dataset['action'];
- var lxc_name = self.parentNode.parentNode.dataset['id'];
- var status_img = self.parentNode.parentNode.querySelector('img');
- var loader = self.parentNode.querySelector('[data-loader]');
+ var action = self.getAttribute("data-action");
- bt_action.disabled = true;
+ var bt_action = self
+ var lxc_name = self.parentNode.parentNode.children[0].getAttribute('data-id')
+ var status_img = self.parentNode.parentNode.querySelector('img')
+ var loader = self.parentNode.querySelector('[data-loader]')
+
+ bt_action.disabled = true
if (action == "stop")
{
- loading(loader);
+ loading(loader)
new XHR().get('<%=luci.dispatcher.build_url("admin", "services")%>/lxc_action/' + '%h/%h'.format(action, lxc_name), null,
function(x, ec)
{
- loading(loader, 0);
- bt_action.disabled = false;
+ loading(loader, 0)
+ bt_action.disabled = false
if (!x || ec)
- {
- return info_message(output_list,"Action failed!", 2000);
- }
- set_status(status_img, "red");
+ return info_message(output_list,"Action failed!")
+
+ set_status(status_img, "red")
+
});
}
+
else if (action == "start")
{
- loading(loader);
+ loading(loader)
new XHR().get('<%=luci.dispatcher.build_url("admin", "services")%>/lxc_action/' + '%h/%h'.format(action, lxc_name), null,
function(x, data)
{
- loading(loader, 0);
- bt_action.disabled = false;
+ loading(loader, 0)
+ bt_action.disabled = false
- if (!x || data)
- {
- return info_message(output_list,"Action failed!", 2000);
- }
- set_status(status_img, "green");
+ //FIXME: uncomment after fixing 'lxc-start'
+ if (!x /*|| ec */)
+ return info_message(output_list,"Action failed!")
+
+ //FIXME: uncomment after fixing 'lxc-start'
+ //set_status(status_img, "green")
});
}
+
else if (action == "destroy")
{
- var div = self.parentNode.parentNode;
- var img = div.querySelector('img');
-
- if (img.getAttribute('src') != window.img["red"])
- {
- bt_action.disabled = false;
- return info_message(output_list,"Container is still running!", 2000);
- }
+ if (!confirm("This will completely remove LXC container from the disk. Are you sure? (container will be stopped if running)"))
+ return
- if (!confirm("This will completely remove a stopped LXC container from disk. Are you sure?"))
- {
- bt_action.disabled = false;
- return;
- }
- loading(loader);
+ loading(loader)
new XHR().get('<%=luci.dispatcher.build_url("admin", "services")%>/lxc_action/' + '%h/%h'.format(action, lxc_name), null,
function(x, ec)
{
- loading(loader, 0);
- bt_action.disabled = false;
+ loading(loader, 0)
+ bt_action.disabled = false
if (!x || ec)
- {
- return info_message(output_list,"Action failed!", 2000);
- }
- var div = self.parentNode.parentNode;
- div.parentNode.removeChild(div);
+ return info_message(output_list,"Action failed!")
+
+ var row = self.parentNode.parentNode
+ row.parentNode.removeChild(row)
+
});
}
}
function lxc_configure_handler(self)
{
- var div = self.parentNode;
- var textarea = div.querySelector('[data-id]');
- var lxc_name = textarea.dataset['id'];
- var lxc_conf = textarea.value;
+ var td = self.parentNode
+ var textarea = td.querySelector('[data-id]')
+ var lxc_name = textarea.getAttribute('data-id')
+ var lxc_configuration = textarea.value
- new XHR().post('<%=luci.dispatcher.build_url("admin", "services")%>/lxc_configuration_set/' + lxc_name, "lxc_conf=" + encodeURIComponent(lxc_conf),
+ new XHR().post('<%=luci.dispatcher.build_url("admin", "services")%>/lxc_configuration_set/' + lxc_name, "lxc_configuration=" + encodeURIComponent(lxc_configuration) ,
function(x)
{
if (!x || x.responseText != "0")
- {
- return info_message(output_list,"Action failed!", 2000);
- }
- info_message(output_list,"LXC configuration updated", 2000);
- var rmdiv = div.parentNode;
- rmdiv.parentNode.removeChild(rmdiv);
+ return info_message(output_list,"Action failed!")
+
+ info_message(output_list,"LXC configuration updated")
+ var row = td.parentNode
+ row.parentNode.removeChild(row)
})
}
- function lxc_configure_template(lxc_name, lxc_conf)
+ function lxc_rename_template(lxc_name)
+ {
+ var h = '\
+ <input data-id="'+ lxc_name + '" type="text" placeholder="Enter new name" /> \
+ <input data-id="bt_confirm" onclick="lxc_rename_handler(this)" type="button" class="cbi-button" value="Confirm" />'
+
+ return h
+ }
+
+ function lxc_configure_template(lxc_name, lxc_configuration)
{
var h = '\
- <textarea data-id="' + lxc_name + '" rows="20" style="width:600px;font-family:monospace;white-space:pre;overflow-wrap:normal;overflow-x:scroll;">'+ lxc_conf +'</textarea> \
- <input data-id="bt_confirm" onclick="lxc_configure_handler(this)" type="button" class="cbi-button" value="Confirm" />';
- return h;
+ <textarea data-id="'+ lxc_name + '" rows="20" style="width:100%">'+ lxc_configuration +'</textarea> \
+ <input data-id="bt_confirm" onclick="lxc_configure_handler(this)" type="button" class="cbi-button" value="Confirm" />'
+
+ return h
}
function action_more_handler(self)
{
- var lxc_name = self.parentNode.parentNode.dataset['id'];
- var loader = self.parentNode.querySelector('[data-loader]');
- var option = self.options[self.selectedIndex].text;
- self.value = "more";
+ var lxc_name = self.parentNode.parentNode.querySelector('[data-id]').getAttribute('data-id')
+ var loader = self.parentNode.parentNode.querySelector('[data-loader]')
- switch(option)
+ var option = self.options[self.selectedIndex].text
+
+ self.value = "more"
+
+ switch (option)
{
case "configure":
- var div0 = document.createElement('div');
- var div1 = self.parentNode.parentNode;
- var next_div = div1.nextSibling;
-
- if (next_div && next_div.dataset['action'] !== null)
- {
- div1.parentNode.removeChild(next_div);
- }
+ var tr = document.createElement('tr')
+ var row = self.parentNode.parentNode
+ var next_row = row.nextSibling
+ if (next_row && next_row.getAttribute('data-action') !== null)
+ row.parentNode.removeChild(next_row)
new XHR().get('<%=luci.dispatcher.build_url("admin", "services")%>/lxc_configuration_get/' + lxc_name, null,
function(x)
{
- div0.innerHTML="<div>" + lxc_configure_template(lxc_name, x.responseText) + "</div>";
- div0.setAttribute('data-action','');
- div1.parentNode.insertBefore(div0, div1.nextSibling);
+ tr.innerHTML="<td colspan='" + row.cells.length + "'>" + lxc_configure_template(lxc_name, x.responseText) + "</td>"
+ tr.setAttribute('data-action','')
+ row.parentNode.insertBefore(tr, row.nextSibling)
})
- break;
+
+ break
case "freeze":
- var img = self.parentNode.parentNode.querySelector('img');
+ var tr = self.parentNode.parentNode
+ var img = tr.querySelector('img')
if(img.getAttribute('src') != window.img["green"])
- {
- return info_message(output_list,"Container is not running!", 2000);
- }
-
- loading(loader);
+ return info_message(output_list,"Container is not running!")
+ loading(loader)
new XHR().get('<%=luci.dispatcher.build_url("admin", "services")%>/lxc_action/' + '%h/%h'.format(option, lxc_name), null,
function(x, ec)
{
loading(loader, 0)
if (!x || ec)
- {
- return info_message(output_list,"Action failed!", 2000);
- }
- set_status(img, "purple");
+ return info_message(output_list,"Action failed!")
+
+ set_status(img, "purple")
})
- break;
+
+ break
case "unfreeze":
- var img = self.parentNode.parentNode.querySelector('img');
- if(img.getAttribute('src') != window.img["purple"])
- {
- return info_message(output_list,"Container is not frozen!", 2000);
- }
+ var tr = self.parentNode.parentNode
+ var img = tr.querySelector('img')
- loading(loader);
+ if(img.getAttribute('src') != window.img["purple"])
+ return info_message(output_list,"Container is not frozen!")
+ loading(loader)
new XHR().get('<%=luci.dispatcher.build_url("admin", "services")%>/lxc_action/' + '%h/%h'.format(option, lxc_name), null,
function(x, ec)
{
- loading(loader, 0);
+ loading(loader, 0)
if (!x || ec)
- {
- return info_message(output_list,"Action failed!", 2000);
- }
- set_status(img, "green");
+ return info_message(output_list,"Action failed!")
+
+ set_status(img, "green")
})
- break;
+
+ break
case "reboot":
- var img = self.parentNode.parentNode.querySelector('img');
+ var tr = self.parentNode.parentNode
+ var img = tr.querySelector('img')
if(img.getAttribute('src') != window.img["green"])
- {
- return info_message(output_list,"Container is not running!", 2000);
- }
+ return info_message(output_list,"Container is not running!")
if (!confirm("Are you sure?"))
- {
- return;
- }
-
- loading(loader);
+ return
+ loading(loader)
new XHR().get('<%=luci.dispatcher.build_url("admin", "services")%>/lxc_action/' + '%h/%h'.format(option, lxc_name), null,
function(x, ec)
{
loading(loader, 0)
if (!x || ec)
- {
- return info_message(output_list,"Action failed!", 2000);
- }
- info_message(output_list,"LXC container rebooted", 2000);
+ return info_message(output_list,"Action failed!")
+
+ info_message(output_list,"LXC rebooted")
})
- break;
+ break
}
- }
- function set_no_container()
- {
- info_message(output_list, "There are no containers available yet.");
}
- function set_no_template()
+ function set_empty(t_lxc_list)
{
- bt_create.disabled = true;
- info_message(output_add, "There are no templates for your architecture (<%=target%>) available, please select another containers URL.");
+ if (document.getElementById('empty') !== null)
+ return
+
+ var row_count = t_lxc_list.rows.length;
+ while(--row_count) t_lxc_list.deleteRow(row_count);
+
+ var row = t_lxc_list.insertRow(-1);
+ row.id = 'empty'
+ var cell = row.insertCell(0);
+ cell.colSpan = 4;
+ cell.innerHTML = '<em><br />There are no containers available yet.</em>';
}
function lxc_list_update()
XHR.poll(4, '<%=luci.dispatcher.build_url("admin", "services")%>/lxc_action/list', null,
function(x, data)
{
- if (!x || !data)
- {
- return;
- }
+ if (!x) return;
- var lxc_count = Object.keys(data).length;
- if (!lxc_count)
- {
- return set_no_container();
- }
+ var lxc_count = Object.keys(data).length
+ if (!data || !lxc_count)
+ return set_empty(t_lxc_list)
- var lxcs = t_lxc_list.querySelectorAll('td[data-id]');
- var lxc_name_div = {};
+ if (document.getElementById('empty') !== null)
+ t_lxc_list.deleteRow(1);
+
+ var lxcs = t_lxc_list.querySelectorAll('td[data-id]')
+ var lxc_name_table = {}
for (var i = 0, len = lxcs.length; i < len; i++)
{
- var lxc_name = lxcs[i].dataset['id'];
+ var lxc_name = lxcs[i].getAttribute('data-id')
if (!(lxc_name in data))
{
- var div = t_lxc_list.querySelector("[data-id='" + lxc_name + "']").parentNode;
- div.parentNode.removeChild(div);
- continue;
+ var row = t_lxc_list.querySelector("[data-id='" + lxc_name + "']").parentNode
+ row.parentNode.removeChild(row)
+ continue
}
- lxc_name_div[lxc_name] = lxcs[i].parentNode.querySelector('img');
+
+ lxc_name_table[lxc_name] = lxcs[i].parentNode.querySelector('img')
}
for(var key in data)
{
- var lxc_name = key;
- var state = window.states[data[key]];
+ var lxc_name = key
+ var state = window.states[data[key]]
- if (!(lxc_name in lxc_name_div))
- {
- lxc_create_template(lxc_name, state);
- }
- else if (state != get_status(lxc_name_div[lxc_name]))
- {
- set_status(lxc_name_div[lxc_name], state);
- }
+ if (!(lxc_name in lxc_name_table))
+ lxc_create_template(lxc_name, state)
+
+ else if (state != get_status(lxc_name_table[lxc_name]))
+ set_status(lxc_name_table[lxc_name], state)
}
+
})
}
function loading(elem, state)
{
- state = (typeof state === 'undefined') ? 1 : state;
+ state = (typeof state === 'undefined') ? 1 : state
+
if (state === 1)
- {
- elem.innerHTML = loader_html;
- }
+ elem.innerHTML = loader_html
else
- {
- setTimeout(function() { elem.innerHTML = ''}, 2000);
- }
+ setTimeout(function() { elem.innerHTML = ''}, 1000)
}
function set_status(elem, state)
{
- state = (typeof state === 'undefined') ? 1 : state;
- setTimeout(function() { elem.setAttribute('src', window.img[state])}, 300);
+ state = (typeof state === 'undefined') ? 1 : state
+
+ setTimeout(function() { elem.setAttribute('src', window.img[state])}, 300)
}
function get_status(elem)
{
- var src = elem.getAttribute('src');
+ var src = elem.getAttribute('src')
+
for (var i in img)
{
if (img[i] == src)
- {
- return i;
- }
+ return i
}
}
function info_message(output, msg, timeout)
{
- timeout = timeout || 0;
- output.innerHTML = '<em>' + msg + '</em>';
- if (timeout > 0)
- {
- setTimeout(function(){ output.innerHTML=""}, timeout);
- }
+ timeout = timeout || 3000
+ output.innerHTML = msg
+ clearTimeout(timeout_msg)
+ timeout_msg = setTimeout(function(){ output.innerHTML=""}, timeout);
}
+ lxc_list_update()
+
new XHR().get('<%=luci.dispatcher.build_url("admin", "services")%>/lxc_get_downloadable', null,
function(x, data)
{
- if (!x)
- {
- return;
- }
-
- if (!data)
- {
- return set_no_template();
- }
-
- var lxc_count = Object.keys(data).length;
- if (!lxc_count)
- {
- return set_no_template();
- }
+ if (!x) return;
+ var lxc_count = Object.keys(data).length
+ if (!data || !lxc_count) return;
var select = document.getElementById("s_template");
for(var key in data)
{
option.text = data[key].replace(/[_:]/g, ' ');
select.add(option, -1);
}
-
- info_message(output_add, "");
- bt_create.disabled = false;
})
- lxc_list_update();
-//]]>
-</script>
+//]]></script>
projects / librecmc / librecmc.git / blobdiff