From 91cf911fcec45122c621a3837b6eb1ba6cb2e5e6 Mon Sep 17 00:00:00 2001 From: Artem Motchanyi Date: Mon, 11 Sep 2017 17:20:54 +0300 Subject: [PATCH] [SECIOTSRK-512] Enhanced firewall UI for Mobile Dashboard --- control_app/iot-manager-dashboard/css/styles.css | 39 ++++++- .../js/controllers/policies_controller.js | 115 +++++++++++++-------- control_app/iot-manager-dashboard/js/controls.js | 28 ++++- control_app/iot-manager-dashboard/js/main.js | 2 + 4 files changed, 140 insertions(+), 44 deletions(-) diff --git a/control_app/iot-manager-dashboard/css/styles.css b/control_app/iot-manager-dashboard/css/styles.css index 99c70cb..ab4c55a 100644 --- a/control_app/iot-manager-dashboard/css/styles.css +++ b/control_app/iot-manager-dashboard/css/styles.css @@ -174,7 +174,7 @@ img { .device { width: 100%; - height: 4em; + height: 4.4em; float:left; border-bottom: 1px solid #ebebeb; } @@ -248,6 +248,11 @@ img { } .device .info { + width: 64%; + float:left; +} + +.device.simple .info { width: 44%; float:left; } @@ -482,4 +487,36 @@ img { .device .status.warning { background-image: url("/resources/ui/device/status/warning.png"); } + +.policy .blacklist-header span { + font-weight: bold; +} + +.policy .blacklist-add { + box-shadow: inset 0px 0px 10px 0px rgba(0,0,0,0.2); + border-radius: 8px; + padding: 6pt; + display: none; +} + +.policy .blacklist-add.active { + display: block !important; +} + +.policy .blacklist .item { + border-bottom: 1px solid #eee; + padding: 2pt; + float: left; + width: 100%; +} + +.policy .blacklist .item .rule { + float: left; + font-size: 13pt; + padding-top: 1.2em; +} + +.policy .blacklist .item .delete { + float: right; +} /* Policies styles *//*END*/ \ No newline at end of file diff --git a/control_app/iot-manager-dashboard/js/controllers/policies_controller.js b/control_app/iot-manager-dashboard/js/controllers/policies_controller.js index 2263bcc..76f406b 100644 --- a/control_app/iot-manager-dashboard/js/controllers/policies_controller.js +++ b/control_app/iot-manager-dashboard/js/controllers/policies_controller.js @@ -14,16 +14,21 @@ function PoliciesController() { this.key_setDevicePolicies = "device.policies.set"; var htmlBuilder = new HtmlBuilder(); + //append blacklist item + this.appendBlacklistItem = function(protocol, address, port) { + htmlBuilder.appendBlacklistItem(protocol, address, port); + } + //toggle togglable policies - this.togglePolicy = function(policyContainer) { - var enabled = $(policyContainer).find(".state").hasClass("on"); + this.togglePolicy = function(stateContainer) { + var enabled = $(stateContainer).hasClass("on"); if (enabled) { //switch off - $(policyContainer).attr("data-state", 0).find(".state").removeClass("on").addClass("off"); + $(stateContainer).parent(".policy.toggle").attr("data-state", 0).find(".state").removeClass("on").addClass("off"); } else { //switch on - $(policyContainer).attr("data-state", 1).find(".state").removeClass("off").addClass("on"); + $(stateContainer).parent(".policy.toggle").attr("data-state", 1).find(".state").removeClass("off").addClass("on"); } } @@ -76,12 +81,14 @@ function PoliciesController() { if ($(this).hasClass("toggle")) { policyInstance.state = parseInt($(this).attr("data-state")); - } else { - switch(policyName) { - case "iptables": - policyInstance.items = $(this).find("textarea").val().split('\n'); - break; - } + } + + switch(policyName) { + case "iptables": + $(this).find(".blacklist .item").each(function() { + policyInstance.items.push($(this).find(".rule").text()); + }); + break; } groupInstance.policies.push(policyInstance); @@ -128,6 +135,19 @@ function PoliciesController() { var m_devicePolicies = "#policies-content"; var m_devicePoliciesList = "#policies-content .policies-list"; + this.appendBlacklistItem = function(protocol, address, port) { + var rule = protocol + ":" + address + ":" + port; + + $(m_devicePoliciesList).find(".blacklist").append( + "
" + + "
" + rule + "
" + + "
" + + "
" + ); + + $(m_devicePoliciesList).trigger("create"); + } + this.getDevicePolicyListContainer = function() { return m_devicePoliciesList; } @@ -180,72 +200,83 @@ PoliciesController.getPolicyGroupHtml = function(groupName, policyList, readonly PoliciesController.getPolicyHtml = function(policy, readonly) { var formatedPolicy = {}; var disabled = ""; - var readonlyTextarea = ""; var toggleClass = "toggle"; if (readonly) { disabled = "disabled"; - readonlyTextarea = "readonly='readonly'"; toggleClass = ""; } + formatedPolicy.uname = policy.name; + formatedPolicy.isToggle = true; + formatedPolicy.state = policy.state; + formatedPolicy.stateClass = ((policy.state == 1) ? "on" : "off"); + formatedPolicy.policyBody = "
"; + switch(policy.name) { case "usb": - formatedPolicy.uname = policy.name; formatedPolicy.name = "USB"; formatedPolicy.description = "Disable or enable USB"; - formatedPolicy.isToggle = true; - formatedPolicy.state = policy.state; - formatedPolicy.stateClass = ((policy.state == 1) ? "on" : "off"); - formatedPolicy.policyBody = "
"; break; case "sound": - formatedPolicy.uname = policy.name; formatedPolicy.name = "Sound"; formatedPolicy.description = "Disable or enable Sound"; - formatedPolicy.isToggle = true; - formatedPolicy.state = policy.state; - formatedPolicy.stateClass = ((policy.state == 1) ? "on" : "off"); - formatedPolicy.policyBody = "
"; break; case "wifi": - formatedPolicy.uname = policy.name; formatedPolicy.name = "Wi-Fi"; formatedPolicy.description = "Disable or enable Wi-Fi"; - formatedPolicy.isToggle = true; - formatedPolicy.state = policy.state; - formatedPolicy.stateClass = ((policy.state == 1) ? "on" : "off"); - formatedPolicy.policyBody = "
"; break; case "bluetooth": - formatedPolicy.uname = policy.name; formatedPolicy.name = "Bluetooth"; formatedPolicy.description = "Disable or enable Bluetooth"; - formatedPolicy.isToggle = true; - formatedPolicy.state = policy.state; - formatedPolicy.stateClass = ((policy.state == 1) ? "on" : "off"); - formatedPolicy.policyBody = "
"; break; case "dtv-tunner": - formatedPolicy.uname = policy.name; formatedPolicy.name = "DTV Tunner"; formatedPolicy.description = "Disable or enable DTV Tunner"; - formatedPolicy.isToggle = true; - formatedPolicy.state = policy.state; - formatedPolicy.stateClass = ((policy.state == 1) ? "on" : "off"); - formatedPolicy.policyBody = "
"; break; case "iptables": - formatedPolicy.uname = policy.name; formatedPolicy.name = "IP tables"; formatedPolicy.description = "Add or remove IP restrictions"; - formatedPolicy.isToggle = false; - formatedPolicy.state = policy.state; + var policies = ""; + var addButton = ""; + var formButtons = ""; + + if (!readonly) { + addButton = ""; + formButtons = "" + + ""; + } + policy.items.forEach(function(item) { - policies += item + "\n"; + policies += "
" + + "
" + item + "
" + + "
" + + "
"; }); - formatedPolicy.policyBody = "
"; + + formatedPolicy.policyBody += + "
" + + "
" + + "Blacklist" + + addButton + + "
" + + "
" + + "
" + + "
" + + "" + + "" + + "" + + "" + + "" + + "" + + formButtons + + "
" + + "
" + + "
" + + "
" + + policies + + "
"; break; default: console.log("Error, add case for policy: " + policy.name); diff --git a/control_app/iot-manager-dashboard/js/controls.js b/control_app/iot-manager-dashboard/js/controls.js index f666a56..23b6483 100644 --- a/control_app/iot-manager-dashboard/js/controls.js +++ b/control_app/iot-manager-dashboard/js/controls.js @@ -19,7 +19,11 @@ $(document).ready(function() { bindEvent("click", "#dashboard .controls .btn-reports", deviceReportsControllHandler); bindEvent("click", "#dashboard .controls .btn-policies", devicePoliciesControllHandler); bindEvent("click", "#dashboard .agent-list .agent", agentPoliciesControllHandler); - bindEvent("click", "#policies-content .policies-list li .policy.toggle", policyToggleControllHandler); + bindEvent("click", "#policies-content .policies-list li .policy.toggle div.state", policyToggleControllHandler); + bindEvent("click", "#policies-content .policies-list li .policy[data-policy='iptables'] .blacklist .item .delete button", deleteBlacklistItemClick); + bindEvent("submit", "#policies-content .policies-list li .policy[data-policy='iptables'] form", saveBlacklistItemClick); + bindEvent("click", "#policies-content .policies-list li .policy[data-policy='iptables'] .blacklist-header button", toggleAddBlacklistItem); + bindEvent("click", "#policies-content .policies-list li .policy[data-policy='iptables'] .blacklist-add button.cancel", toggleAddBlacklistItem); }); function leftHeaderControllHandler() { @@ -91,4 +95,26 @@ function agentPoliciesControllHandler() { function policyToggleControllHandler() { policiesController.togglePolicy($(this)); +} + +function deleteBlacklistItemClick() { + $(this).closest(".item").slideUp(500 , function(){ $(this).remove(); }); +} + +function saveBlacklistItemClick() { + event.preventDefault(); + + var form = $(this).serializeArray().reduce(function(obj, item) { + obj[item.name] = item.value; + + return obj; + }, {}); + + policiesController.appendBlacklistItem(form.protocol, form.address, form.port); + $(this)[0].reset(); +} + +function toggleAddBlacklistItem() { + $("#policies-content .policies-list li .policy[data-policy='iptables'] .blacklist-add form")[0].reset(); + $("#policies-content .policies-list li .policy[data-policy='iptables'] .blacklist-add").toggleClass("active"); } \ No newline at end of file diff --git a/control_app/iot-manager-dashboard/js/main.js b/control_app/iot-manager-dashboard/js/main.js index 8f2ea6e..edbe408 100644 --- a/control_app/iot-manager-dashboard/js/main.js +++ b/control_app/iot-manager-dashboard/js/main.js @@ -203,6 +203,8 @@ var init = function() { $.mobile.defaultPageTransition = "none"; pageHistory.push(currentPage); initAllPages(); + //TODO: remove in the production + $("#login-submit input[name='login']").val('admin@samsung.com'); authorizationController = new AuthorizationController(); devicesController = new DevicesController(); -- 2.7.4