[Kimchi-devel] [PATCH 3/8] Applying new ui at Administration tab

27 Nov 2015

From: Andre Teodoro <andreteodoro.work@gmail.com>

Signed-off-by: Andre Teodoro <andreteodoro.work@gmail.com>
Signed-off-by: samhenri <samuel.guimaraes@eldorado.org.br>
---
 ui/css/src/host-admin.scss    |  16 ++-
 ui/js/host-admin.js           | 190 +++++++++++++-------------
 ui/pages/host-admin.html.tmpl | 304 +++++++++++++++++++++++-------------------
 3 files changed, 275 insertions(+), 235 deletions(-)

diff --git a/ui/css/src/host-admin.scss b/ui/css/src/host-admin.scss
index f718917..b46b275 100644
--- a/ui/css/src/host-admin.scss
+++ b/ui/css/src/host-admin.scss
@@ -433,13 +433,14 @@
 }
 
 .ginger .host-admin .pw-opt .header #progressIndicator {
-    float: right;
-    margin-top: 2px;
+    /*    float: right;*/
+    margin-top: 5px;
 }
 
-.ginger .host-admin .pw-opt .header .actBtn {
+
+/*.ginger .host-admin .pw-opt .header .actBtn {
     float: right;
-}
+}*/
 
 .ginger .host-admin .pw-opt .body .item {
     display: inline-block;
@@ -478,7 +479,8 @@
     max-height: 170px;
 }
 
-.ginger .host-admin .sensor-inline {
+
+/*.ginger .host-admin .sensor-inline {
     display: inline-block;
     margin-left: 20px;
     vertical-align: top;
@@ -493,7 +495,7 @@
 .ginger .host-admin .sensor-inline .sensor-body {
     font-weight: normal;
     font-size: 12px;
-}
+}*/
 
 .ginger .host-admin .subsc-manage .content-body .subsc-item {
     height: 25px;
@@ -624,4 +626,4 @@
 }
 
 // Admin - To do: move to Ginger
-@import "modules/administration";
\ No newline at end of file
+@import "modules/administration";
diff --git a/ui/js/host-admin.js b/ui/js/host-admin.js
index 5ac882e..521add1 100644
--- a/ui/js/host-admin.js
+++ b/ui/js/host-admin.js
@@ -195,7 +195,8 @@ ginger.setupBakGrid = function() {
             var tooltipContent = wok.substitute($("#backupTooltip").html(), data[i]);
             tooltipContent = tooltipContent.replace("includePlaceHodler", data[i].include);
             tooltipContent = tooltipContent.replace("excludePlaceHodler", data[i].exclude);
-            $(".file-col,.time-col", tempNode).tooltip({
+
+            $(".column-file,.column-timestamp", tempNode).tooltip({
                 items: $(tempNode),
                 content: tooltipContent,
                 tooltipClass: "ginger-dialog",
@@ -206,21 +207,13 @@ ginger.setupBakGrid = function() {
                 },
                 hide: 100
             });
-            $(".download", $(tempNode)).button({
-                icons: {
-                    primary: "ui-icon ui-icon-arrowthickstop-1-s"
-                },
-                text: false
-            }).click(function() {
+            $(".btn-download").on("click", function(event) {
+                event.stopImmediatePropagation();
                 var bakItem = $(this).parent();
                 window.open('plugins/ginger/backup/archives/' + encodeURIComponent(bakItem.prop("id")) + '/file');
             });
-            $(".delete", $(tempNode)).button({
-                icons: {
-                    primary: "ui-icon ui-icon-close"
-                },
-                text: false
-            }).click(function() {
+            $(".btn-delete").on("click", function(event) {
+                event.stopImmediatePropagation();
                 var bakItem = $(this).parent();
                 ginger.deleteBackupArchive(bakItem.prop("id"), function() {
                     bakItem.remove();
@@ -231,18 +224,22 @@ ginger.setupBakGrid = function() {
 };
 
 ginger.initConfigBak = function() {
-    $("#newDefaultBakBtn").button().click(function() {
+    $("#newDefaultBakBtn").on("click", function(event) {
+        event.preventDefault();
         ginger.createBackupArchive({}, function() {
             $("#bakGridBody").empty();
             ginger.setupBakGrid();
         })
     });
-    $("#newCustomBakBtn").button().click(function() {
+    $("#newCustomBakBtn").on("click", function(event) {
+        event.preventDefault();
         $("#newBakDialog").dialog("open");
     });
-    $("#batDelBtn").button().click(function() {
+    $("#batDelBtn").on("click", function(event) {
+        event.preventDefault();
         $("#batDelDialog").dialog("open");
     });
+
     ginger.setupBakGrid();
     ginger.initBakDialog();
     ginger.initBatDelDialog();
@@ -254,6 +251,15 @@ ginger.initNetworkConfig = function() {
         $(".cancel", item).toggleClass("hide", !on);
     };
     var attachBtnEvt = function(node, editFunc, saveFunc, cancelFunc) {
+        // disable the inputs for edit if they are already filled
+        var ip = $("#ip-address", node);
+        var mask = $("#ip-mask", node);
+        if (!(ip === undefined || ip === null) && !(mask === undefined || mask === null)) {
+            if (!(ip.val() === "") && !(mask.val() === "")) {
+                ip.prop("disabled", true);
+                mask.prop("disabled", true);
+            }
+        }
         $("input", node).each(function() {
             $(this).on("keyup", function() {
                 var isValid = ginger.validateIp($(this).val());
@@ -265,29 +271,23 @@ ginger.initNetworkConfig = function() {
                 $(".save", node).prop("disabled", !isValid);
             });
         });
-        $(".edit", node).button({
-            icons: {
-                primary: "ui-icon-pencil"
-            },
-            text: false
-        }).click(editFunc);
-        $(".save", node).button({
-            icons: {
-                primary: "ui-icon-disk"
-            },
-            text: false
-        }).click(saveFunc);
-        $(".cancel", node).button({
-            icons: {
-                primary: "ui-icon-arrowreturnthick-1-w"
-            },
-            text: false
-        }).click(cancelFunc);
+        $(".edit", node).on("click", function(event) {
+            event.preventDefault();
+            editFunc(node);
+        });
+        $(".save", node).on("click", function(event) {
+            event.preventDefault();
+            saveFunc(node);
+        });
+        $(".cancel", node).on("click", function(event) {
+            event.preventDefault();
+            cancelFunc(node);
+        });
     };
     ginger.getInterfaces(function(data) {
         var toggleInterfaceEdit = function(item, on) {
-            $("label", item).toggleClass("hide", on);
-            $("input", item).toggleClass("hide", !on)
+            $("#ip-address", item).prop("disabled", !on);
+            $("#ip-mask", item).prop("disabled", !on);
             toggleBtnEdit(item, on);
         };
         for (var i = 0; i < data.length; i++) {
@@ -296,14 +296,14 @@ ginger.initNetworkConfig = function() {
             data[i].editMode = isEdit ? "" : "hide";
             var tempNode = $.parseHTML(wok.substitute($("#nicItem").html(), data[i]));
             $("#gingerInterface").append(tempNode);
-            attachBtnEvt(tempNode, function() {
-                var item = $(this).parent().parent();
-                toggleInterfaceEdit(item, true);
-            }, function() {
-                var item = $(this).parent().parent();
-                var name = $("span", item).first().html();
-                var ip = $(".ip", item);
-                var mask = $(".mask", item);
+            attachBtnEvt(tempNode, function(node) {
+                toggleInterfaceEdit(node, true);
+            }, function(node) {
+                // nicItem Save
+                var item = node;
+                var name = $("label", item).first().html();
+                var ip = $("#ip-address", item);
+                var mask = $("#ip-mask", item);
                 var interface = {
                     ipaddr: $("input", ip).val(),
                         netmask: $("input", mask).val()
@@ -315,12 +315,13 @@ ginger.initNetworkConfig = function() {
                         toggleInterfaceEdit(item, false);
                     });
                 });
-            }, function() {
-                var item = $(this).parent().parent();
+            }, function(node) {
+                // nicItem Cancel
+                var item = node;
                 $("input", item).removeClass("invalid-field");
                 $("button", item).prop("disabled", false);
-                var ip = $(".ip", item);
-                var mask = $(".mask", item);
+                var ip = $("#ip-address", item);
+                var mask = $("#ip-mask", item);
                 $("input", ip).val($("label", ip).text());
                 $("input", mask).val($("label", mask).text());
                 toggleInterfaceEdit(item, false);
@@ -329,16 +330,16 @@ ginger.initNetworkConfig = function() {
     });
     ginger.getNetworkGlobals(function(data) {
         var toggleNWGlobalsEdit = function(item, on) {
-            $("input", item).prop("disabled", !on);
+            $("#dns-ip-address", item).prop("disabled", !on);
             toggleBtnEdit(item, on);
         };
         var attachNWGlobalBtnEvt = function(node, saveFunc) {
             attachBtnEvt(node, function() {
-                toggleNWGlobalsEdit($(this).parent(), true);
+                toggleNWGlobalsEdit(node, true);
             }, function() {
                 saveFunc();
             }, function() {
-                toggleNWGlobalsEdit($(this).parent(), false);
+                toggleNWGlobalsEdit(node, false);
             });
         };
         if (!data.nameservers || data.nameservers.length == 0) {
@@ -354,10 +355,10 @@ ginger.initNetworkConfig = function() {
             $("input", tempNode).prop("disabled", ip != "");
             $("#" + container).append(tempNode);
             $("input", tempNode).prop("oriVal", ip);
-            attachBtnEvt(tempNode, function() {
-                toggleNWGlobalsEdit($(this).parent(), true);
-            }, function() {
-                saveFunc($(this).parent(), function(item) {
+            attachBtnEvt(tempNode, function(node) {
+                toggleNWGlobalsEdit(node, true);
+            }, function(node) {
+                saveFunc(node, function(item) {
                     var input = $("input", item);
                     if (input.val() == "" && $(".sec-content", "#" + container).length != 1) {
                         item.remove();
@@ -366,15 +367,15 @@ ginger.initNetworkConfig = function() {
                         toggleNWGlobalsEdit(item, false);
                     }
                 });
-            }, function() {
-                var input = $("input", $(this).parent());
-                input.removeClass("invalid-field");
-                $("button", $(this).parent()).prop("disabled", false);
+            }, function(node) {
+                // DNS IP Address Cancel
+                var input = $("input", node);
+                $("button", node).prop("disabled", false);
                 input.val(input.prop("oriVal"));
                 if (input.prop("oriVal") == "") {
-                    $(this).parent().remove();
+                    node[1].remove();
                 } else {
-                    toggleNWGlobalsEdit($(this).parent(), false);
+                    toggleNWGlobalsEdit(node, false);
                 }
             });
             return tempNode;
@@ -385,7 +386,7 @@ ginger.initNetworkConfig = function() {
                     var nwGol = {
                         nameservers: []
                     };
-                    $("input", item.parent()).each(function() {
+                    $("input", item).each(function() {
                         if ($(this).val().trim() != "") {
                             nwGol.nameservers.push($(this).val());
                         }
@@ -400,9 +401,6 @@ ginger.initNetworkConfig = function() {
             });
         };
         $("#gingerDnsAdd").button({
-            icons: {
-                primary: "ui-icon-plusthick"
-            },
             text: false
         }).click(function() {
             var item = addDnsItem("");
@@ -412,7 +410,7 @@ ginger.initNetworkConfig = function() {
             addDnsItem(data.nameservers[i]);
         }
         addGlobalItem("gingerGateway", data.gateway ? data.gateway : "", function(item, postSave) {
-            var gateway = $("input", item.parent()).val();
+            var gateway = $("input", item).val();
             if (gateway.trim() != "") {
                 ginger.updateNetworkGlobals({
                     gateway: gateway
@@ -427,23 +425,24 @@ ginger.initNetworkConfig = function() {
 };
 
 ginger.initPowerMgmt = function() {
-    var selectedClass = "ui-icon-check";
-    var toSelectClass = "ui-icon-radio-off";
-    var onSelectClass = "ui-icon-radio-on";
-    $(".actBtn", "#gingerPowerMgmt").button({
-        disabled: true
-    }).click(function() {
+    var selectedClass = "pwr-activated";
+    var toSelectClass = "pwr-unselected";
+    var onSelectClass = "pwr-selected";
+
+    $(".actBtn", "#gingerPowerMgmt").on("click", function(event) {
+        $(".actBtn", "#gingerPowerMgmt").prop('disabled', true);
         var currentSelected = $('.' + selectedClass, $(".body", "#gingerPowerMgmt"));
         var toBeSelected = $('.' + onSelectClass, $(".body", "#gingerPowerMgmt"));
         var optName = $(":last-child", toBeSelected.parent()).html();
         $("#progressIndicator", ".ginger .host-admin").addClass("progress-icon");
-        $(".actBtn", "#gingerPowerMgmt").button("option", "disabled", true);
+        $(".actBtn", "#gingerPowerMgmt").prop('disabled', true);
+
         ginger.activatePowerProfile(optName, function() {
             currentSelected.removeClass(selectedClass).addClass(toSelectClass);
             currentSelected.next().addClass("to-select");
             toBeSelected.removeClass(onSelectClass).addClass(selectedClass);
             toBeSelected.next().removeClass("to-select");
-            $(".actBtn", "#gingerPowerMgmt").button("option", "disabled", false);
+            $(".actBtn", "#gingerPowerMgmt").prop('disabled', true);
             $("#progressIndicator", ".ginger .host-admin").removeClass("progress-icon");
         });
     });
@@ -454,7 +453,7 @@ ginger.initPowerMgmt = function() {
             var tempNode = $.parseHTML(wok.substitute($("#pwMgmtItem").html(), data[i]));
             $(".body", "#gingerPowerMgmt").append(tempNode);
             $(tempNode).on("click", function() {
-                $(".item :first-child", $(this).parent()).each(function() {
+                $(".pwr-item :first-child", $(this).parent()).each(function() {
                     if ($(this).hasClass(onSelectClass)) {
                         $(this).removeClass(onSelectClass).addClass(toSelectClass);
                     }
@@ -462,7 +461,9 @@ ginger.initPowerMgmt = function() {
                 var iconNode = $(":first-child", $(this));
                 if (iconNode.hasClass(toSelectClass)) {
                     iconNode.removeClass(toSelectClass).addClass(onSelectClass);
-                    $(".actBtn", "#gingerPowerMgmt").button("option", "disabled", false);
+                    $(".actBtn", "#gingerPowerMgmt").prop('disabled', false);
+                } else {
+                    $(".actBtn", "#gingerPowerMgmt").prop('disabled', true);
                 }
             });
         }
@@ -472,7 +473,6 @@ ginger.initPowerMgmt = function() {
 ginger.initSANAdapter = function() {
     ginger.getSANAdapters(function(data) {
         var temStr = "<span class='item'>{value}</span>";
-        console.log('data.length:', data.length);
         for (var i = 0; i < data.length; i++) {
             $(".body", $(".name", ".san-adapter")).append(wok.substitute(temStr, {
                 value: data[i].name
@@ -509,7 +509,7 @@ ginger.listSensors = function() {
         $.each(result, function(i1, d1) {
             if (d1 && d1 != null && i1 != "hdds") {
                 $.each(d1, function(i2, d2) {
-                    var pathNode = $.parseHTML(wok.substitute($("#sensorBody").html(), {
+                    var pathNode = $.parseHTML(wok.substitute($("#sensorItem").html(), {
                         labelHead: i2
                     }));
                     $(".sensor-panel").append(pathNode);
@@ -518,7 +518,7 @@ ginger.listSensors = function() {
                             if (i3 && d3 != null && i3 != "unit") {
                                 $.each(d3, function(i4, d4) {
                                     if (i4.match("input")) {
-                                        var pathNodeU = $.parseHTML(wok.substitute($("#sensorUnit").html(), {
+                                        var pathNodeU = $.parseHTML(wok.substitute($("#sensorItem").html(), {
                                             labelBody: i3,
                                             labelNumber: d4,
                                             labelUnit: d2["unit"]
@@ -532,13 +532,13 @@ ginger.listSensors = function() {
                 });
             } else {
                 if (d1 != null) {
-                    var pathNode = $.parseHTML(wok.substitute($("#sensorBody").html(), {
+                    var pathNode = $.parseHTML(wok.substitute($("#sensorItem").html(), {
                         labelHead: i1
                     }));
                     $(".sensor-panel").append(pathNode);
                     $.each(d1, function(i5, d5) {
                         if (i5 != "unit") {
-                            var pathNodeU = $.parseHTML(wok.substitute($("#sensorUnit").html(), {
+                            var pathNodeU = $.parseHTML(wok.substitute($("#sensorItem").html(), {
                                 labelBody: i5,
                                 labelNumber: d5,
                                 labelUnit: d1["unit"]
@@ -578,13 +578,20 @@ ginger.initSEPConfig = function() {
         sepStatus();
         $(".content-body", ".ginger .host-admin .subsc-manage").empty();
         ginger.getSEPSubscriptions(function(result) {
-            for (var i = 0; i < result.length; i++) {
+            //for (var i = 0; i < result.length; i++) {
+            for (var i = 0; i < 2; i++) {
+                /* var subscItem = $.parseHTML(wok.substitute($("#subscItem").html(), {
+                     hostname: result[i]["hostname"],
+                     port: result[i]["port"],
+                     community: result[i]["community"]
+                 }));*/
                 var subscItem = $.parseHTML(wok.substitute($("#subscItem").html(), {
-                    hostname: result[i]["hostname"],
-                    port: result[i]["port"],
-                    community: result[i]["community"]
+                    hostname: "blah",
+                    port: 3155,
+                    community: "comunity"
                 }));
-                $(".ginger .host-admin .subsc-manage .content-body").append(subscItem);
+                console.log('subscItem', subscItem);
+                $(".ginger .host-admin .subsc-manage").append(subscItem);
             }
             $(".detach", ".ginger .host-admin .subsc-manage").button({
                 icons: {
@@ -820,11 +827,10 @@ ginger.initFirmware = function() {
         var packPath = $("#gingerPackPath").prop("value");
         var isValid = /(^\/.*)$/.test(packPath);
         $("#gingerPackPath").toggleClass("invalid-field", !isValid && packPath !== "");
-        $("#gingerPackPathSub").button(isValid ? "enable" : "disable");
+        $("#gingerPackPathSub").prop('disabled', !isValid);
     });
-    $("#gingerPackPathSub").button({
-        disabled: true
-    }).click(function() {
+    $("#gingerPackPathSub").on("click", function(event) {
+        event.preventDefault();
         wok.confirm({
             title: i18n['KCHAPI6006M'],
             content: "The system will be immediately reset to flash the firmware. It may take longer than normal for it to reboot.",
@@ -835,7 +841,7 @@ ginger.initFirmware = function() {
                 path: $("#gingerPackPath").prop("value")
             }, function() {
                 $("#gingerFWUpdateMess").css("display", "inline-block");
-                $("#gingerPackPathSub").button("disable");
+                $("#gingerPackPathSub").prop('disabled', true);
                 $("#gingerPackPath").prop("disabled", true);
             });
         }, null);
@@ -844,7 +850,6 @@ ginger.initFirmware = function() {
 
 ginger.initAdmin = function() {
     $(".content-area", "#gingerHostAdmin").css("height", "100%");
-
     ginger.getCapabilities(function(result) {
         $.each(result, function(enableItem, capability) {
             var itemLowCase = enableItem.toLowerCase();
@@ -862,6 +867,7 @@ ginger.initAdmin = function() {
                         break;
                     case "powerprofiles":
                         ginger.initPowerMgmt();
+                        ginger.initSEPConfig();
                         break;
                     case "sanadapters":
                         ginger.initSANAdapter();
diff --git a/ui/pages/host-admin.html.tmpl b/ui/pages/host-admin.html.tmpl
index 7d7f7e9..6f56f61 100644
--- a/ui/pages/host-admin.html.tmpl
+++ b/ui/pages/host-admin.html.tmpl
@@ -50,52 +50,78 @@ Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301  USA
             <div class="panel-group firmware-ppc-enabled" id="accordion" role="tablist" aria-multiselectable="true">
                 <h3>
                     <a role="button" data-toggle="collapse" data-parent="#accordion" href="#firmware-update-content-area" aria-expanded="false" aria-controls="firmware-update-content-area" class="">
-                        <span class="accordion-icon"></span><span class="accordion-text">$_("Firmware Update")</span>
+                        <span class="accordion-icon"></span><span class="accordion-text">$_("Firmware Update")</span><span class="accordion-text" style="margin-left:320px">$_("SEP Configuration")</span><span class="accordion-text" style="margin-left:305px">$_("Power Options")</span>
                     </a>
                 </h3>
                 <div id="firmware-update-content-area" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
-                    <div id="gingerFWUpdateMess" class="message-area" style="display: none;">
-                        <span class="progress-icon"></span>
-                        <span>$_("Firmware update is initializing. System will reboot in order to flash the firmware.")</span>
-                    </div>
-                    <div class="section">
-                        <span>$_("Firmware Version: ")</span>
-                        <span id="gingerFWVer" class="firmware-ver"></span>
+                    <div class='fmw-content col-md-4'>
+                        <div class="message-area" id="gingerFWUpdateMess" style="display: none;">
+                            <span class="progress-icon"></span>
+                            <span>$_("Firmware update is initializing. System will reboot in order to flash the firmware.")</span>
+                        </div>
+                        <div class='fmw-label'>$_("Version")</div>
+                        <div class="firmware-ver fmw-item" id="gingerFWVer">fmw-version</div>
+                        <div class="form-group fmw-form">
+                            <label for="gingerPackPath" class="pack-path-label fmw-label">$_("Packaging Path ")</label>
+                            <input type="text" class="form-control" id="gingerPackPath" placeholder="$_('Absolute path to firmware RPM')">
+                        </div>
+                        <button class="btn btn-default" type="submit" id="gingerPackPathSub" disabled="true" style="width:20%">$_("Update")</button>
                     </div>
-                    <div class="section">
-                        <div class="pack-path-label">$_("Package Path: ")</div>
-                        <div class="pack-path-content">
-                            <input type="text" id="gingerPackPath" class="pack-path-input">
-                            <div class="input-hint">
-                                <span class="ui-icon ui-icon-info input-hint-icon"></span>
-                                <span class="input-hint-text">$_("The absolute path to the firmware rpm/hpm.")</span>
+
+                    <!-- Power Options Panel -->
+                    <div class="col-md-4" id="gingerPowerMgmt" >
+                        <div class="pw-opt">
+                            <div class="header">
+                                <button class="btn btn-default actBtn" type="submit" disabled="true">$_("Activate")</button>
+                                <span id="progressIndicator"></span>
                             </div>
+                            <div class="body"></div>
                         </div>
-                        <button id="gingerPackPathSub">$_("Update")</button>
                     </div>
                 </div>
                 <hr>
             </div>
-            <!-- Configuration Backup Panel -->
-            <div class="panel-group backup-ppc-enabled" id="accordion" role="tablist" aria-multiselectable="true">
-               <h3>
-                <a role="button" data-toggle="collapse" data-parent="#accordion" href="#backup-ppc-content-area" aria-expanded="false" aria-controls="backup-ppc-content-area" class="">
-                    <span class="accordion-icon"></span><span class="accordion-text">$_("Configuration Backup")</span>
-                </a>
-            </h3>
-            <div id="backup-ppc-content-area" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
-                <div class="action-bar">
-                    <span id="batDelBtn" class="item">$_("Batch Delete")</span>
-                    <span id="newCustomBakBtn" class="item">$_("New Custom Backup")</span>
-                    <span id="newDefaultBakBtn" class="item">$_("Generate Default Backup")</span>
-                </div>
-                <div class="bak-grid-header">
-                    <div class="cell file-col">$_("File")</div>
-                    <div class="cell time-col">$_("Timestamp")</div>
-                </div>
-                <div id="bakGridBody" class="bak-grid-body"></div>
-            </div>
-            <hr>
+        <!-- Configuration Backup Panel -->
+        <div class="panel-group backup-ppc-enabled" id="accordion" role="tablist" aria-multiselectable="true">
+         <h3>
+            <a role="button" data-toggle="collapse" data-parent="#accordion" href="#backup-ppc-content-area" aria-expanded="false" aria-controls="backup-ppc-content-area" class="">
+                <span class="accordion-icon"></span><span class="accordion-text">$_("Configuration Backup")</span>
+            </a>
+        </h3>
+        <ul id="backup-ppc-content-area" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
+            <li class="backup-pcc-actions" id="backup-pcc-action-area">
+                <span>
+                    <div class="dropdown menu-flat ">
+                        <button class="btn btn-primary dropdown-toggle backup-pcc-button" type="button" data-toggle="dropdown" aria-expanded="false" aria-haspopup="true"><span class="edit-alt"></span>$_("Actions")<span class="caret"></span></button>
+                        <ul class="dropdown-menu actionsheet">
+                            <li role="presentation">
+                                <a href="#" id="newDefaultBakBtn"><i class="fa fa-file"></i>$_("Generate Default Backup")</a>
+                            </li>
+                            <li role="presentation">
+                                <a href="#" id="newCustomBakBtn"><i class="fa fa-file"></i>$_("New Custom Backup")</a>
+                            </li>
+                            <li role="presentation">
+                                <a href="#" id="batDelBtn"><i class="fa fa-minus-circle"></i>$_("Batch Delete")</a>
+                            </li>
+                        </ul>
+                    </div>
+                </span>
+            </li>
+            <li class="header">
+                    <span class="column-file">$_("File")</span><!--
+                    --><span class="column-timestamp">$_("Timestamp")</span><!--
+                --><span class="column-download" style="display:none">
+                        <span class="sr-only">Download</span><!--
+                    --></span><!--
+                --><span class="column-delete" style="display:none">
+                        <span class="sr-only">Delete</span><!--
+                    --></span>
+                </li>
+                <li>
+                 <ul class="ul-body" id="bakGridBody"></ul>
+             </li>
+         </ul>
+         <hr>
         </div>
         <!-- Network Configuration Panel -->
         <div class="panel-group network-ppc-enabled" id="accordion" role="tablist" aria-multiselectable="true">
@@ -104,48 +130,37 @@ Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301  USA
                     <span class="accordion-icon"></span><span class="accordion-text">$_("Network Configuration")</span>
                 </a>
             </h3>
-            <div id="network-ppc-content-area" class="panel-collapse collapse nw-config" role="tabpanel" aria-labelledby="headingOne">
-                <div class="pane interface">
-                    <div class="sec-label"><span>$_("Interface")</span></div>
-                    <div class="sec-content">
-                        <div class="grid-head"><span class="cell name">$_("Name")</span><span class="cell ip">$_("IP")</span><span class="cell mask">$_("Mask")</span></div>
-                        <div class="grid-body" id="gingerInterface"></div>
+            <div id="network-ppc-content-area" class="panel-collapse collapse col-md-12" role="tabpanel" aria-labelledby="headingOne">
+                <div class="col-md-8" style="padding-left: 40px;">
+                    <div class="header">
+                        <span class="column-name">$_("Interface Name")</span><!--
+                        --><span class="column-ip-address">$_("IP Address")</span><!--
+                        --><span class="column-ip-mask">$_("Mask IP Address")</span><!--
+                        --><span class="column-actions" style="display:none">
+                            <span class="sr-only">Actions</span><!--
+                        --></span>
                     </div>
+                    <div class="body" id="gingerInterface"></div>
                 </div>
-                <div class="pane global">
-                    <div class="vertical-separator">
-                        <div class="sec-label"><span>$_("DNS")</span><button id="gingerDnsAdd" class="addBtn"></button></div>
-                        <div id="gingerDNS"></div>
-                    </div>
-                    <div>
-                        <div class="sec-label"><span>$_("Gateway")</span></div>
-                        <div id="gingerGateway"></div>
+                <div class="col-md-4">
+                    <div class="col-md-6">
+                        <div class="header">
+                            <span>$_("DNS IP Address")</span>
+                        </div>
+                        <button class="btn btn-default addBtn" id="gingerDnsAdd" type="submit"><i class="fa fa-plus-circle"></i> $_("Add")</button>
+                        <div class="body" id="gingerDNS"></div>
                     </div>
-                </div>
-            </div>
-            <hr>
-        </div>
-        <!-- Power Options Panel -->
-        <div class="panel-group powerprofiles-ppc-enabled" id="accordion" role="tablist" aria-multiselectable="true">
-            <h3>
-                <a role="button" data-toggle="collapse" data-parent="#accordion" href="#gingerPowerMgmt" aria-expanded="false" aria-controls="gingerPowerMgmt" class="">
-                    <span class="accordion-icon"></span><span class="accordion-text">$_("Power Options")</span>
-                </a>
-            </h3>
-            <div id="gingerPowerMgmt" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
-                <div class="pw-opt">
-                    <div class="header">
-                        <span class="ui-icon ui-icon-check legend"></span><span class="legend separator">$_("Activated Option")</span>
-                        <span class="ui-icon ui-icon-radio-on legend"></span><span class="legend separator">$_("Selected Option")</span>
-                        <span class="ui-icon ui-icon-radio-off legend"></span><span class="legend">$_("Unselected Option")</span>
-                        <span class="actBtn">$_("Activate")</span>
-                        <span id="progressIndicator"></span>
+                    <div class="col-md-6">
+                        <div class="header">
+                            <span>$_("Gateway IP Address")</span>
+                        </div>
+                        <div class="body" id="gingerGateway"></div>
                     </div>
-                    <div class="body"></div>
                 </div>
             </div>
             <hr>
         </div>
+
         <!-- SAN Adapters Panel -->
         <div class="panel-group sanadapters-ppc-enabled" id="accordion" role="tablist" aria-multiselectable="true">
             <h3>
@@ -194,23 +209,28 @@ Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301  USA
                     <span class="accordion-icon"></span><span class="accordion-text">$_("SEP Configuration")</span>
                 </a>
             </h3>
-            <div id="sep-ppc-content-area" class="panel-collapse collapse subsc-manage" role="tabpanel" aria-labelledby="headingOne">
-                <div class="status-header">
+            <ul id="sep-ppc-content-area" class="panel-collapse collapse subsc-manage" role="tabpanel" aria-labelledby="headingOne">
+               <!--  <div class="status-header">
                     <div class="sep-label">$_("Status:")</div>
                     <div id="sepStatusLog" class="sep-dot-active down"></div>
                     <div class="sep-field sep-buttons">
                         <span id="sepStart" class="actBtn">$_("Start")</span>
                         <span id="sepStop" class="actBtn" style="display:none">$_("Stop")</span>
                     </div>
-                </div>
-                <div class="content-header">
+                </div> -->
+                <li class='header'>
+                    <span class="name">$_("Hostname")</span><!--
+                    --><span class="wwpn">$_("Port")</span><!--
+                    --><span class="symbolic">$_("Community")</span>
+                </li>
+<!--                 <div class="content-header">
                     <span>$_("Hostname")</span>
                     <span>$_("Port")</span>
                     <span>$_("Community")</span>
                     <button class="add-subscription"></button>
                 </div>
-                <div class="content-body"></div>
-            </div>
+                <div class="content-body"></div>-->
+            </ul>
             <hr>
         </div>
         <!-- User Management Panel -->
@@ -220,15 +240,20 @@ Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301  USA
                     <span class="accordion-icon"></span><span class="accordion-text">$_("User Management")</span>
                 </a>
             </h3>
-            <div id="users-ppc-content-area" class="panel-collapse collapse user-manage" role="tabpanel" aria-labelledby="headingOne">
-                <div class="content-header">
-                    <span>$_("Name")</span>
-                    <span>$_("Group")</span>
-                    <span>$_("Profile")</span>
-                    <button class="add-user"></button>
-                </div>
-                <div class="content-body"></div>
-            </div>
+            <ul id="users-ppc-content-area" class="panel-collapse collapse user-manage" role="tabpanel" aria-labelledby="headingOne">
+                <li class="header">
+                    <button class="btn btn-default actBtn add-user" type="submit"><i class="fa fa-plus-circle"></i> $_("Add User")</button>
+                </li>
+                <li class="header">
+                    <span class="column-username">$_("Name")</span><!--
+                    --><span class="column-usergroup">$_("Group")</span><!--
+                    --><span class="column-userprofile">$_("Profile")</span><!--
+                    --><span class="column-detach" style="display:none">
+                        <span class="sr-only">Detach</span><!--
+                    --></span>
+                </li>
+                <li class="content-body body"></li>
+            </ul>
             <hr>
         </div>
     </div>
@@ -249,7 +274,7 @@ Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301  USA
     </div>
 </div>
 
-<div id="batDelDialog" title='$_("Delete backups in batch")' class="ginger-dialog">
+<div id="batDelDialog" class="window modal-content">
     <div class="del-option">
         <input type="radio" name="batDelType" value="counts_ago" checked>$_("Preserve the latest") <input type="text" class=""> $_("backups")
     </div>
@@ -306,71 +331,78 @@ Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301  USA
 
 </div>
 <script id="backupItem" type="text/html">
-<div class="bak-grid-item" id="{identity}">
-<div class="cell file-col">{file}</div>
-<div class="cell time-col">{timestamp}</div>
-<span class="cell act-button download"></span>
-<span class="cell act-button delete"></span>
-</div>
+    <li class="body" name="backupBodyItem" id="{identity}">
+        <span class="column-file">{file}</span><!--
+        --><span class="column-timestamp">{timestamp}</span><!--
+        --><span class="column-download btn btn-link btn-download"><i class="fa fa-download"></i>$_("Download")</span><!--
+        --><span class="column-delete btn btn-link btn-delete"><i class="fa fa-minus-circle"></i>$_("Remove")</span>
+    </li>
 </script>
 <script id="backupTooltip" type="text/html">
-<div class="header">$_("Description")</div>
-<div class="sub-content">{description}</div>
-<div class="crt-bak-section">
-<div class="path-pick"><div class="header">$_("Path Included")</div><div class="sub-content">includePlaceHodler</div></div>
-<div class="path-pick"><div class="header">$_("Path Excluded")</div><div class="sub-content">excludePlaceHodler</div></div>
-</div>
+    <div class="header">$_("Description")</div>
+    <div class="sub-content">{description}</div>
+    <div class="crt-bak-section">
+    <div class="path-pick"><div class="header">$_("Path Included")</div><div class="sub-content">includePlaceHodler</div></div>
+    <div class="path-pick"><div class="header">$_("Path Excluded")</div><div class="sub-content">excludePlaceHodler</div></div>
+    </div>
 </script>
 <script id="pathItem" type="text/html">
-<div class="path-item"><input type="text"><button class="add"></button><button class="delete"></button></div>
+    <div class="path-item"><input type="text"><button class="add"></button><button class="delete"></button></div>
 </script>
 <script id="nicItem" type="text/html">
-<div class="item">
-<span class="cell name">{name}</span><!--
---><span class="cell ip"><label class="{viewMode}">{ipaddr}</label><input type="text" class="{editMode}" value="{ipaddr}"></span><!--
---><span class="cell mask"><label class="{viewMode}">{netmask}</label><input type="text" class="{editMode}" value="{netmask}"></span>
-<span class="action-area">
-<button class="edit {viewMode}"></button>
-<button class="save {editMode}"></button>
-<button class="cancel hide"></button>
-</span>
-</div>
+    <form class="form-inline">
+        <div class="form-group column-name">
+            <label class="network-item">{name}</label>
+        </div>
+        <div class="form-group column-ip-address">
+            <input type="text" class="form-control" id="ip-address" placeholder="$_("Enter IP Address")" value="{ipaddr}">
+        </div>
+        <div class="form-group column-ip-mask">
+            <input type="text" class="form-control" id="ip-mask" placeholder="$_("Enter IP Address")" value="{netmask}"> </input>
+        </div>
+        <div class="form-group column-actions">
+            <button class="btn btn-link edit {viewMode}" type="submit"><i class="fa fa-pencil"></i></button>
+            <button class="btn btn-link save {editMode}" type="submit"><i class="fa fa-floppy-o"></i></button>
+            <button class="btn btn-link cancel hide" type="submit"><i class="fa fa-ban"></i></button>
+        </div>
+    </form>
 </script>
 <script id="nwGlobalItem" type="text/html">
-<div class="sec-content">
-<input type="text" value="{ip}">
-<button class="edit {viewMode}"></button>
-<button class="save {editMode}"></button>
-<button class="cancel hide"></button>
-</div>
+    <form class="form-inline sec-content">
+        <div class="form-group column-dns-ip-address">
+            <input type="text" class="form-control" id="dns-ip-address" placeholder="$_("Enter IP Address")" value="{ip}">
+        </div>
+        <div class="form-group column-actions">
+            <button class="btn btn-link edit {viewMode}" type="submit"><i class="fa fa-pencil"></i></button>
+            <button class="btn btn-link save {editMode}" type="submit"><i class="fa fa-floppy-o"></i></button>
+            <button class="btn btn-link cancel hide" type="submit"><i class="fa fa-ban"></i></button>
+        </div>
+    </form>
 </script>
 <script id="pwMgmtItem" type="text/html">
-<div class="item"><span class="ui-icon {selected}"></span><span class="{toSelect}">{name}</span></div>
-</script>
-<script id="sensorBody" type="text/html">
-<div class="sensor-inline">
-<div class="sensor-head">{labelHead}</div>
-<div class="sensor-body" id={labelHead}></div>
-</div>
+    <div class="pwr-item"><span class="{selected}"></span><span class="pwr-item-label {toSelect}">{name}</span></div>
 </script>
-<script id="sensorUnit" type="text/html">
-<div class="sensor-body-label">{labelBody}:  {labelNumber}   {labelUnit}</div>
+<script id="sensorItem" type="text/html">
+    <li class="header sensor-inline">
+        <span class='default_column'>{labelHead}</span>
+    </li>
+    <li class="body">
+        <span id={labelHead} class='default_column'>{labelBody}: {labelNumber} {labelUnit}</span>
+    </li>
 </script>
 <script id="userItem" type="text/html">
-<div class="user-item">
-<div class="user-manage-column" data-type="name">{userName}</div>
-<div class="user-manage-column" data-type="group">{userGroup}</div>
-<div class="user-manage-column" data-type="profile">{userProfile}</div>
-<button class="detach"></button>
-</div>
+        <span class="column-username" data-type="name">{userName}</span><!--
+        --><span class="column-usergroup" data-type="group">{userGroup}</span><!--
+        --><span class="column-userprofile" data-type="profile">{userProfile}</span><!--
+        --><span class="column-detach btn btn-link detach"><i class="fa fa-trash-o"></i></span>
 </script>
 <script id="subscItem" type="text/html">
-<div class="subsc-item">
-<div class="subsc-manage-column" data-type="hostname">{hostname}</div>
-<div class="subsc-manage-column" data-type="port">{port}</div>
-<div class="subsc-manage-column" data-type="community">{community}</div>
-<button class="detach"></button>
-</div>
+    <li class="body">
+        <span class="column-username" data-type="hostname">{hostname}</span><!--
+        --><span class="column-usergroup" data-type="port">{port}</span><!--
+        --><span class="column-userprofile" data-type="community">{community}</span><!--
+        --><span class="column-detach btn btn-link detach"><i class="fa fa-trash-o"></i></span>
+    </li>
 </script>
 <script>
 ginger.initAdmin();
-- 
1.9.3

    

[Kimchi-devel] [PATCH 3/8] Applying new ui at Administration tab

sguimaraes943＠gmail.com