[SECIOTSRK-512] Enhanced firewall UI for Mobile Dashboard

diff --git a/control_app/iot-manager-dashboard/css/styles.css b/control_app/iot-manager-dashboard/css/styles.css
index 99c70cb..ab4c55a 100644 (file)
--- 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 (file)
--- 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(
+                "<div class='item'>" +
+                    "<div class='rule'>" + rule + "</div>" +
+                    "<div class='delete'><button type='button'>X</button></div>" +
+                "</div>"
+            );
+
+            $(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 = "<div class='state " + formatedPolicy.stateClass + " " + disabled + "'></div>";
+
     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 = "<div class='state " + formatedPolicy.stateClass + " " + disabled + "'></div>";
         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 = "<div class='state " + formatedPolicy.stateClass + " " + disabled + "'></div>";
         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 = "<div class='state " + formatedPolicy.stateClass + " " + disabled + "'></div>";
         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 = "<div class='state " + formatedPolicy.stateClass + " " + disabled + "'></div>";
         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 = "<div class='state " + formatedPolicy.stateClass + " " + disabled + "'></div>";
         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 = "<button type='button'>Add</button>";
+            formButtons = "<button type='submit'>Save</button>" +
+                          "<button type='button' class='cancel'>Cancel</button>";
+        }
+
         policy.items.forEach(function(item) {
-            policies += item + "\n";
+            policies += "<div class='item'>" +
+                            "<div class='rule'>" + item + "</div>" +
+                            "<div class='delete'><button type='button' " + disabled + " class='btn btn-sm btn-default'>X</button></div>" +
+                        "</div>";
         });
-        formatedPolicy.policyBody = "<div class='body'><textarea " + readonlyTextarea + ">" + policies + "</textarea></div>";
+
+        formatedPolicy.policyBody +=
+            "<div style='clear:both;'></div>" +
+            "<div class='blacklist-header'>" +
+                "<span>Blacklist</span>" +
+                addButton +
+            "</div>" +
+            "<div style='clear:both;'></div>" +
+            "<div class='collapse blacklist-add'>" +
+                "<form class='form-horizontal'>" +
+                    "<label for='protocol'>Protocol</label>" +
+                    "<input type='text' name='protocol' required='required' id='protocol' placeholder='TCP or UDP or *'>" +
+                    "<label for='address'>Address</label>" +
+                    "<input type='text' name='address' required='required' id='address' placeholder='Domain name or IP address'>" +
+                    "<label for='port'>Port</label>" +
+                    "<input type='text' name='port' required='required' id='port' placeholder='P or P1,P2 or P1-P10 or *'>" +
+                    formButtons +
+                "</form>" +
+            "</div>" +
+            "<div style='clear:both;'></div>" +
+            "<div class='blacklist'>" +
+                policies +
+            "</div>";
         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 (file)
--- 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 (file)
--- 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();