From d8f2f24a5bc0f5d9098149c4e2579fd1cd070f61 Mon Sep 17 00:00:00 2001 From: Dirk Brenken Date: Wed, 30 May 2018 21:56:50 +0200 Subject: [PATCH] luci-app-lxc: fix "plain-vanilla" integration, part 3 * migrate JS generated HTML tables to divs * remove (most of) the inline styles * various markup cleanups That's the final part ... hopefully it's now in a more usable & maintainable state. Signed-off-by: Dirk Brenken --- .../luci-app-lxc/luasrc/controller/lxc.lua | 2 +- applications/luci-app-lxc/luasrc/view/lxc.htm | 517 +++++++++--------- 2 files changed, 254 insertions(+), 265 deletions(-) diff --git a/applications/luci-app-lxc/luasrc/controller/lxc.lua b/applications/luci-app-lxc/luasrc/controller/lxc.lua index f14606ee8..c7fe63f87 100644 --- a/applications/luci-app-lxc/luasrc/controller/lxc.lua +++ b/applications/luci-app-lxc/luasrc/controller/lxc.lua @@ -131,7 +131,7 @@ end function lxc_configuration_set(lxc_name) luci.http.prepare_content("text/plain") - local lxc_configuration = luci.http.formvalue("lxc_configuration") + local lxc_configuration = luci.http.formvalue("lxc_conf") if lxc_configuration == nil then util.perror("lxc error: config formvalue is empty") return diff --git a/applications/luci-app-lxc/luasrc/view/lxc.htm b/applications/luci-app-lxc/luasrc/view/lxc.htm index e02c3a788..a68143b79 100644 --- a/applications/luci-app-lxc/luasrc/view/lxc.htm +++ b/applications/luci-app-lxc/luasrc/view/lxc.htm @@ -14,42 +14,21 @@ Author: Petar Koretic -%> -<% +<%- local fs = require "nixio" local target = fs.uname().machine -%> - - +-%>
<%:Available Containers%>
- - - - - - -
<%:Name%><%:Status%><%:Actions%>
+
+
+
<%:Name%>
+
<%:Status%>
+
<%:Actions%>
+
+
@@ -61,26 +40,21 @@ table.cbi-section-table td,
<%:Create New Container%>
- - - - - - - - - - - -
<%:Name%><%:Template%><%:Actions%>
- - - - - +
+
+
<%:Name%>
+
<%:Template%>
+
<%:Actions%>
+
+
+
+
+
+ -
+
+ +
@@ -98,313 +72,310 @@ table.cbi-section-table td, var t_lxc_list = document.getElementById('t_lxc_list'); var loader_html = '<%:Loading%>'; - 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") - info_message(output_add, "Template download in progress, please be patient!", 10000) - - function lxc_create(tr) + function lxc_create(div) { - var lxc_name = tr.querySelector("#tx_name").value.replace(/[\s!@#$%^&*()+=\[\]{};':"\\|,<>\/?]/g,'') - var lxc_template = tr.querySelector("#s_template").value - var bt_create = tr.querySelector("#bt_create") + var lxc_name = div.querySelector("#tx_name").value.replace(/[\s!@#$%^&*()+=\[\]{};':"\\|,<>\/?]/g,''); + var lxc_template = div.querySelector("#s_template").value; + var bt_create = div.querySelector("#bt_create"); if (t_lxc_list.querySelector("[data-id='" + lxc_name + "']") != null) - return info_message(output_add, "Container with that name already exists!", 4000) + { + return info_message(output_add, "Container with that name already exists!", 2000); + } - bt_create.disabled = true - output_add.innerHTML = '' + bt_create.disabled = true; + output_add.innerHTML = ''; - if (!lxc_name || !lxc_name.length) + if (!lxc_template) { - bt_create.disabled = false - return info_message(output_add, "The 'Name' field must not be empty!", 4000) + return set_no_template(); } - if (!lxc_template) + if (!lxc_name || !lxc_name.length) { - bt_create.disabled = false - return info_message(output_add, "The 'Template' field must not be empty!", 4000) + bt_create.disabled = false; + return info_message(output_add, "The 'Name' field must not be empty!", 2000); } - 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!") + { + info_message(output_add, "Container creation failed!", 2000); + } }) } function lxc_create_template(lxc_name, lxc_state) { - var info_row = t_lxc_list.querySelector("#empty") - if (info_row) - t_lxc_list.deleteRow(1) - - var actions = '' - actions += '' - actions += ' ' - actions += ' ' - actions += ' '; + actions += ' '; + actions += ' '; + actions += ' ' - actions += '' - - var row = t_lxc_list.insertRow(-1) - var cell = row.insertCell(-1) - cell.innerHTML = '%q%h%q'.format("", lxc_name, "") - cell.width = "30%" - cell.setAttribute("data-id", lxc_name) - - cell = row.insertCell(-1) - cell.width = "20%" - cell.innerHTML = "" - - cell = row.insertCell(-1) - cell.width = "50%" - cell.innerHTML = actions + '; + actions += ''; + + 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("", lxc_name, ""); + + var div2 = document.createElement("div"); + div2.className = "td"; + div2.style.width = "20%"; + div2.innerHTML = ""; + + 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); } function action_handler(self) { - var action = self.getAttribute("data-action"); - 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]') + 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]'); - bt_action.disabled = true + 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!") - - set_status(status_img, "red") - + { + return info_message(output_list,"Action failed!", 2000); + } + 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 /*|| ec */) - return info_message(output_list,"Action failed!") - - set_status(status_img, "green") + if (!x || data) + { + return info_message(output_list,"Action failed!", 2000); + } + set_status(status_img, "green"); }); } - else if (action == "destroy") { - var tr = self.parentNode.parentNode - var img = tr.querySelector('img') + 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!") + bt_action.disabled = false; + return info_message(output_list,"Container is still running!", 2000); } if (!confirm("This will completely remove a stopped LXC container from disk. Are you sure?")) - return - - loading(loader) + { + bt_action.disabled = false; + return; + } + 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!") - - var row = self.parentNode.parentNode - row.parentNode.removeChild(row) - + { + return info_message(output_list,"Action failed!", 2000); + } + var div = self.parentNode.parentNode; + div.parentNode.removeChild(div); }); } } function lxc_configure_handler(self) { - var td = self.parentNode - var textarea = td.querySelector('[data-id]') - var lxc_name = textarea.getAttribute('data-id') - var lxc_configuration = textarea.value + var div = self.parentNode; + var textarea = div.querySelector('[data-id]'); + var lxc_name = textarea.dataset['id']; + var lxc_conf = textarea.value; - new XHR().post('<%=luci.dispatcher.build_url("admin", "services")%>/lxc_configuration_set/' + lxc_name, "lxc_configuration=" + encodeURIComponent(lxc_configuration) , + new XHR().post('<%=luci.dispatcher.build_url("admin", "services")%>/lxc_configuration_set/' + lxc_name, "lxc_conf=" + encodeURIComponent(lxc_conf), function(x) { if (!x || x.responseText != "0") - return info_message(output_list,"Action failed!") - - info_message(output_list,"LXC configuration updated") - var row = td.parentNode - row.parentNode.removeChild(row) + { + return info_message(output_list,"Action failed!", 2000); + } + info_message(output_list,"LXC configuration updated", 2000); + var rmdiv = div.parentNode; + rmdiv.parentNode.removeChild(rmdiv); }) } - function lxc_rename_template(lxc_name) - { - var h = '\ - \ - ' - - return h - } - - function lxc_configure_template(lxc_name, lxc_configuration) + function lxc_configure_template(lxc_name, lxc_conf) { var h = '\ - \ - ' - - return h + \ + '; + return h; } function action_more_handler(self) { - var lxc_name = self.parentNode.parentNode.querySelector('[data-id]').getAttribute('data-id') - var loader = self.parentNode.parentNode.querySelector('[data-loader]') - var option = self.options[self.selectedIndex].text - - self.value = "more" + 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"; switch(option) { case "configure": - 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) + 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); + } new XHR().get('<%=luci.dispatcher.build_url("admin", "services")%>/lxc_configuration_get/' + lxc_name, null, function(x) { - tr.innerHTML="" + lxc_configure_template(lxc_name, x.responseText) + "" - tr.setAttribute('data-action','') - row.parentNode.insertBefore(tr, row.nextSibling) + div0.innerHTML="
" + lxc_configure_template(lxc_name, x.responseText) + "
"; + div0.setAttribute('data-action',''); + div1.parentNode.insertBefore(div0, div1.nextSibling); }) - - break + break; case "freeze": - var tr = self.parentNode.parentNode - var img = tr.querySelector('img') + var img = self.parentNode.parentNode.querySelector('img'); if(img.getAttribute('src') != window.img["green"]) - return info_message(output_list,"Container is not running!") + { + return info_message(output_list,"Container is not running!", 2000); + } + + loading(loader); - 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!") - - set_status(img, "purple") + { + return info_message(output_list,"Action failed!", 2000); + } + set_status(img, "purple"); }) - - break + break; case "unfreeze": - var tr = self.parentNode.parentNode - var img = tr.querySelector('img') - + var img = self.parentNode.parentNode.querySelector('img'); if(img.getAttribute('src') != window.img["purple"]) - return info_message(output_list,"Container is not frozen!") + { + return info_message(output_list,"Container is not frozen!", 2000); + } + + loading(loader); - 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!") - - set_status(img, "green") + { + return info_message(output_list,"Action failed!", 2000); + } + set_status(img, "green"); }) - - break + break; case "reboot": - var tr = self.parentNode.parentNode - var img = tr.querySelector('img') + var img = self.parentNode.parentNode.querySelector('img'); if(img.getAttribute('src') != window.img["green"]) - return info_message(output_list,"Container is not running!") + { + return info_message(output_list,"Container is not running!", 2000); + } if (!confirm("Are you sure?")) - return + { + return; + } + + loading(loader); - 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!") - - info_message(output_list,"LXC rebooted") + { + return info_message(output_list,"Action failed!", 2000); + } + info_message(output_list,"LXC container rebooted", 2000); }) - break + break; } - } - function set_empty(t_lxc_list) + function set_no_container() { - 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 = 3; - cell.innerHTML = '
There are no containers available yet.'; + info_message(output_list, "There are no containers available yet."); } - function set_empty_template() + function set_no_template() { - var row_count = t_lxc_create.rows.length; - while(--row_count) t_lxc_create.deleteRow(row_count); - - var row = t_lxc_create.insertRow(-1); - row.id = 'tr_holder' - var cell = row.insertCell(0); - cell.colSpan = 3; - cell.innerHTML = '
There are no templates for your architecture (<%=target%>) available, please select another containers URL.'; + bt_create.disabled = true; + info_message(output_add, "There are no templates for your architecture (<%=target%>) available, please select another containers URL."); } function lxc_list_update() @@ -412,96 +383,113 @@ table.cbi-section-table td, XHR.poll(4, '<%=luci.dispatcher.build_url("admin", "services")%>/lxc_action/list', null, function(x, data) { - if (!x) return; - - if (!data) - return set_empty(t_lxc_list) + if (!x || !data) + { + return; + } - var lxc_count = Object.keys(data).length + var lxc_count = Object.keys(data).length; if (!lxc_count) - return set_empty(t_lxc_list) - - if (document.getElementById('empty') !== null) - t_lxc_list.deleteRow(1); + { + return set_no_container(); + } - var lxcs = t_lxc_list.querySelectorAll('td[data-id]') - var lxc_name_table = {} + var lxcs = t_lxc_list.querySelectorAll('td[data-id]'); + var lxc_name_div = {}; for (var i = 0, len = lxcs.length; i < len; i++) { - var lxc_name = lxcs[i].getAttribute('data-id') + var lxc_name = lxcs[i].dataset['id']; if (!(lxc_name in data)) { - var row = t_lxc_list.querySelector("[data-id='" + lxc_name + "']").parentNode - row.parentNode.removeChild(row) - continue + var div = t_lxc_list.querySelector("[data-id='" + lxc_name + "']").parentNode; + div.parentNode.removeChild(div); + continue; } - - lxc_name_table[lxc_name] = lxcs[i].parentNode.querySelector('img') + lxc_name_div[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_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) + 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); + } } - }) } 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 = ''}, 1000) + { + 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 || 3000 - output.innerHTML = msg - clearTimeout(timeout_msg) - timeout_msg = setTimeout(function(){ output.innerHTML=""}, timeout); + timeout = timeout || 0; + output.innerHTML = '' + msg + ''; + if (timeout > 0) + { + setTimeout(function(){ output.innerHTML=""}, timeout); + } } - lxc_list_update() + lxc_list_update(); + + info_message(output_add, "Template download in progress, please be patient!"); new XHR().get('<%=luci.dispatcher.build_url("admin", "services")%>/lxc_get_downloadable', null, function(x, data) { - if (!x) return; + if (!x) + { + return; + } - if (!data) return set_empty_template(); + if (!data) + { + return set_no_template(); + } var lxc_count = Object.keys(data).length; - if (!lxc_count) return set_empty_template(); + if (!lxc_count) + { + return set_no_template(); + } + bt_create.disabled = false; var select = document.getElementById("s_template"); for(var key in data) { @@ -510,6 +498,7 @@ table.cbi-section-table td, option.text = data[key].replace(/[_:]/g, ' '); select.add(option, -1); } + info_message(output_add, ""); }) //]]> -- 2.25.1