[Kimchi-devel] [PATCH 09/10] [new-ui] Storage tab

10 Nov 2015

From: samhenri <samuel.guimaraes@eldorado.org.br>

Signed-off-by: samhenri <samuel.guimaraes@eldorado.org.br>
---
 .../kimchi/ui/css/theme-default/storage.css        | 502 +--------------------
 .../kimchi/ui/js/src/kimchi.storage_main.js        | 191 +++++---
 .../ui/js/src/kimchi.storagepool_add_main.js       |  36 +-
 .../js/src/kimchi.storagepool_add_volume_main.js   |   1 +
 src/wok/plugins/kimchi/ui/pages/storage.html.tmpl  | 210 +++++----
 .../ui/pages/storagepool-add-volume.html.tmpl      |  73 +--
 .../kimchi/ui/pages/storagepool-add.html.tmpl      | 245 +++++-----
 ui/css/src/modules/_storage.scss                   | 393 ++++++++++++++++
 8 files changed, 826 insertions(+), 825 deletions(-)
 create mode 100644 ui/css/src/modules/_storage.scss

diff --git a/src/wok/plugins/kimchi/ui/css/theme-default/storage.css b/src/wok/plugins/kimchi/ui/css/theme-default/storage.css
index 88447b5..99aff91 100644
--- a/src/wok/plugins/kimchi/ui/css/theme-default/storage.css
+++ b/src/wok/plugins/kimchi/ui/css/theme-default/storage.css
@@ -15,27 +15,9 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-/*   STORAGE   */
-.storage {
-    margin: 5px;
-}
-
 
-.storage .grid-control {
-    height: 40px;
-    padding: 5px 0;
-}
-
-.storage .grid-control .filter {
-    width: 300px;
-    padding: 5px;
-    float: right;
-}
-
-.storage-allocate-padding-user {
-    padding-right: 108px;
-}
 
+/*   STORAGE   */
 .usage {
     float: right;
     margin-right: 30px;
@@ -67,484 +49,4 @@
     max-width: 170px;
     height: auto;
     width: auto;
-}
-
-.storage-volum {
-    height: 40px;
-    width: 186px;
-    display: table-cell;
-    vertical-align: top;
-    position: relative;
-    border-left: 1px solid #ccc;
-    border-right: 1px solid #fff;
-}
-
-.storage-name {
-    width: 15%;
-}
-
-.storage-state {
-    width: 10%;
-}
-
-.storage-type {
-    width: 10%;
-}
-
-.storage-capacity {
-    width: 10%;
-}
-
-.storage-allocate {
-    width: 10%;
-}
-
-.storage-location {
-    width: 30%;
-}
-
-.storage-button {
-    width: 9%;
-}
-
-.handle {
-    width: 2%;
-}
-
-.status-dot {
-    background: #72AA00;
-    background: linear-gradient(to bottom, #BFD255 0%, #8EB92A 50%,
-                #72AA00 51%, #9ECB2D 100%) repeat scroll 0 0 transparent;
-    border: 1px solid #72AA00;
-    border-radius: 13px;
-    box-shadow: 3px 3px 3px #FFFFFF, -3px -3px 3px #DDDDDD;
-    height: 13px;
-    width: 13px;
-    margin-left: 10px;
-}
-
-.toolable {
-    position: relative;
-}
-
-.toolable .tooltip {
-    display: none;
-    border: 2px solid #0B6BAD;
-    background: #fff;
-    padding: 6px;
-    position: absolute;
-    color: #666666;
-    font-weight: bold;
-    font-size: 11px;
-    -webkit-border-radius: 5px;
-    -moz-border-radius: 5px;
-    border-radius: 5px;
-    z-index: 100;
-    top: -300%;
-    left: -140%;
-    white-space: nowrap;
-}
-
-.toolable:hover .tooltip {
-    display: block;
-}
-
-.toolable .tooltip:after {
-    -moz-border-bottom-colors: none;
-    -moz-border-left-colors: none;
-    -moz-border-right-colors: none;
-    -moz-border-top-colors: none;
-    border-color: #fff transparent transparent;
-    border-image: none;
-    border-style: solid;
-    border-width: 7px;
-    content: "";
-    display: block;
-    left: 15px;
-    position: absolute;
-    bottom: -14px;
-}
-
-.toolable .tooltip:before {
-    -moz-border-bottom-colors: none;
-    -moz-border-left-colors: none;
-    -moz-border-right-colors: none;
-    -moz-border-top-colors: none;
-    border-color: #0B6BAD transparent transparent;
-    border-image: none;
-    border-style: solid;
-    border-width: 8px;
-    content: "";
-    display: block;
-    left: 14px;
-    position: absolute;
-    bottom: -18px;
-}
-
-.inactive {
-    background: #E80501;
-    background: linear-gradient(to bottom, #E88692 0%, #E84845 50%,
-                #E80501 51%, #E84845 100%) repeat scroll 0 0 transparent;
-    border: 1px solid #FF340C;
-}
-
-.storage-volumes {
-    width: 90px;
-}
-
-.storage-actions {
-    width: 125px;
-}
-
-.storage-action {
-    width: 70px;
-}
-
-.detail-view-icon {
-    background: url(../images/large_details_icon.png) no-repeat center
-        center;
-    height: 30px;
-    width: 42px;
-}
-
-.volumes {
-    background: #73716F;
-    width: 1004px;
-    display: none;
-    margin-top: 10px;
-    border: 1px solid rgb(204, 204, 204);
-}
-
-.volumeslist {
-    padding: 7px;
-    max-height: 272px;
-    min-height: 136px;
-    overflow: auto;
-    color: #ffffff;
-}
-
-.volumes>.footer {
-    height: 48px;
-    z-index: 100;
-    box-shadow: 0 -1px 1px rgba(0, 0, 0, 0.15);
-}
-
-.volume-title {
-    float: left;
-    padding: 4px;
-    margin-bottom: 5px;
-    width: 130px;
-}
-
-.pool-empty {
-    text-align:center;
-    line-height:136px;
-}
-.volume-title>.volume-name {
-    font-size: 14px;
-    font-weight: normal;
-    padding-bottom: 5px;
-    max-width: 120px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-}
-
-.volume-box {
-    border-radius: 8px;
-    background: white;
-    color: #666666;
-    float: left;
-    height: 100px;
-    margin: 7px;
-    padding: 10px;
-    width: 205px;
-    border: 1px solid rgb(204, 204, 204);
-}
-
-.volume-box .volume-state {
-    font-size: 75%;
-}
-
-.volume-box .label {
-    color: white;
-    font-weight: bold;
-    padding: 1px 5px;
-    text-shadow: none;
-}
-
-.volume-box .used {
-    background-color: #FF7121;
-    border-radius: 5px 5px 5px 5px;
-}
-
-.volume-box .free {
-    background: none repeat scroll 0 0 #72AA00;
-    border-radius: 5px 5px 5px 5px;
-}
-
-.volume-setting {
-    float: right;
-    padding: 5px;
-}
-
-.volume-setting>* {
-    height: 16px;
-    width: 16px;
-    border: none;
-    float: left;
-    padding: 2px;
-    cursor: pointer;
-}
-
-.field>select {
-    height: 30px;
-    width: 160px;
-    font-size: 14px;
-    padding-left: 8px;
-}
-
-.clear {
-    clear: both;
-}
-
-.volume-text {
-    color: #999999;
-    float: left;
-    font-size: 10px;
-    font-weight: bold;
-    height: 18px;
-    line-height: 18px;
-    width: 142px;
-    max-width: 85px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
-
-.volume-textquota {
-    color: #999999;
-    float: left;
-    font-size: 10px;
-    font-weight: bold;
-    height: 18px;
-    line-height: 18px;
-    width: 142px;
-    max-width: 95px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
-
-.volume-type-position {
-    display: inline;
-    padding-right: 5px;
-    clear: both;
-    width: 90px;
-    border-right: 1px solid #999;
-    float: left;
-    white-space: nowrap;
-}
-
-.volume-quota-position {
-    display: inline;
-    width: 90px;
-    padding-left: 5px;
-    float: left;
-    border-left: 1px solid #eee;
-    white-space: nowrap;
-}
-
-.list-storage .storage-li[data-stat="active"]>.handle>.arrow-down {
-    background: url(../images/theme-default/arrow-down.png) no-repeat center
-        center;
-    height: 18px;
-    width: 18px;
-}
-
-.list-storage .storage-li[data-stat="inactive"]>.handle>.arrow-down {
-    background: url(../images/theme-default/arrow-down-disable.png) no-repeat
-                center center;
-    height: 18px;
-    width: 18px;
-}
-
-.arrow-up {
-    background: url(../images/theme-default/arrow-up.png) no-repeat center
-        center;
-    height: 18px;
-    width: 18px;
-}
-
-.storage-icon {
-    border: 1px solid #CCCCCC;
-    border-radius: 8px 8px 8px 8px;
-    height: 40px;
-    width: 40px;
-    margin: 0 10px 10px 0;
-    float: left;
-    display: inline;
-}
-
-.volume-default {
-    background: url(../images/theme-default/icon-volume-default.png)
-        no-repeat center center;
-}
-
-.icon-raw {
-    background: url(../images/theme-default/icon-raw.png) no-repeat center
-        center;
-}
-
-.icon-qcow2 {
-    background: url(../images/theme-default/icon-qcow2.png) no-repeat center
-        center;
-}
-
-.icon-iso {
-    background: url(../images/theme-default/icon-iso.png) no-repeat center
-        center;
-}
-
-.host-partition {
-    padding-left:13px;
-}
-
-.host-partition>div {
-    font-size: 13px;
-    height: 18px;
-    padding: 10px;
-    color: #666;
-    float: left;
-    max-width: 200px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    font-weight: bold;
-    line-height: 18px;
-    white-space: nowrap;
-}
-
-.storage-type-wrapper-controls {
-    width: 300px;
-    display: inline-block;
-    vertical-align: top;
-    padding: 5px 5px 5px 22px;
-}
-
-.storage-type-wrapper-controls input[type="text"] {
-    height: 38px;
-    line-height: 38px;
-    background: #fff;
-    -webkit-border-radius: 5px;
-    border-radius: 5px;
-    box-shadow: 2px 2px 2px #eee inset;
-    border-top: 1px solid #bbb;
-    border-left: 1px solid #bbb;
-    padding: 0 10px;
-    margin-top: 5px;
-    width: 250px;
-}
-
-.storage-type-wrapper-controls > .dropdown {
-    margin: 5px 0 0 1px;
-    width: 200px;
-}
-
-.storage-type-wrapper-controls input[type="text"][disabled] {
-    color: #bbb;
-    background-color: #fafafa;
-    cursor: not-allowed;
-}
-
-.storage-add-input-width {
-    width: 285px;
-}
-
-.form-section .storage-field {
-    overflow: visible;
-}
-
-.storage-base-input-width {
-    width: 300px;
-}
-
-.storage-window {
-    width: 600px;
-    height: 700px;
-}
-
-.storage-port-width {
-    width:40px;
-}
-
-.storage-auth-width {
-    width: 150px;
-}
-
-.storage-window .form-section .field {
-    overflow: visible;
-}
-
-#pool-loading {
-    margin: 10px 15px;
-    background: #C0C0C0 url(../images/theme-default/loading.gif) 7px
-                center no-repeat;
-    padding: 0 20px 0 26px;
-}
-
-.storage-admin .filter-select {
-    display: inline-block;
-    position: relative;
-}
-
-#iscsiportId, .storage-admin .filter-select input {
-    border: 1px solid #CCCCCC;
-    border-radius: 1px;
-    font-size: 14px;
-    padding: 3px 3px 3px 10px;
-    height: 30px;
-}
-
-.storage-admin .filter-select input::-ms-clear {
-    display: none;
-}
-
-#iSCSIServer input {
-    width: 410px;
-}
-
-#iscsiportId {
-    width: 60px;
-}
-
-#iSCSITarget input {
-    width: 493px;
-}
-
-/* Progress bar */
-.volume-progress {
-    clear: both;
-    width: 140px;
-}
-
-.volume-progress .progress-bar-outer {
-    background: #ccc;
-    height: 4px;
-    overflow: hidden;
-    width: 100%;
-}
-
-.volume-progress .progress-bar-inner {
-    background: #090;
-    height: 100%;
-    width: 0%;
-}
-
-.volume-progress .progress-label {
-    color: #999;
-    font-size: 10px;
-    line-height: 16px;
-}
-
-.volume-progress .progress-transferred {
-    float: right;
-}
-/* End of Progress bar */
+}
\ No newline at end of file
diff --git a/src/wok/plugins/kimchi/ui/js/src/kimchi.storage_main.js b/src/wok/plugins/kimchi/ui/js/src/kimchi.storage_main.js
index 40a43f6..567aba3 100644
--- a/src/wok/plugins/kimchi/ui/js/src/kimchi.storage_main.js
+++ b/src/wok/plugins/kimchi/ui/js/src/kimchi.storage_main.js
@@ -22,6 +22,13 @@ kimchi.doListStoragePools = function() {
             var listHtml = '';
             $.each(result, function(index, value) {
                 value.usage = Math.round(value.allocated / value.capacity * 100) || 0;
+                if (value.usage <= 100 && value.usage >= 85) {
+                    value.icon = 'icon-high';
+                }else if (value.usage <= 85 && value.usage >= 75 ) {
+                    value.icon = 'icon-med';
+                } else {
+                    value.icon = 'icon-low';
+                }                
                 value.capacity = wok.changetoProperUnit(value.capacity,1);
                 value.allocated = wok.changetoProperUnit(value.allocated,1);
                 value.enableExt = value.type==="logical" ? "" : "hide-content";
@@ -29,17 +36,17 @@ kimchi.doListStoragePools = function() {
                     listHtml += wok.substitute(storageHtml, value);
                 }
             });
-            if($('#storageGrid').hasClass('grid'))
-                $('#storageGrid').grid('destroy');
+            if($('#storageGrid').hasClass('wok-datagrid'))
+                $('#storageGrid').dataGrid('destroy');
             $('#storagepoolsList').html(listHtml);
             if(wok.tabMode['storage'] === 'admin') {
                 $('.storage-button').attr('style','display');
             } else {
                 $('.storage-allocate').addClass('storage-allocate-padding-user');
             }
-            $('#storageGrid').grid({enableSorting: false});
+            $('#storageGrid').dataGrid({enableSorting: false});
             $('input', $('.grid-control', '.storage')).on('keyup', function(){
-                $('#storageGrid').grid('filter', $(this).val());
+                $('#storageGrid').dataGrid('filter', $(this).val());
             });
             kimchi.storageBindClick();
         } else {
@@ -99,6 +106,7 @@ kimchi.storageBindClick = function() {
 
     if(wok.tabMode['storage'] === 'admin') {
         $('.pool-delete').on('click', function(event) {
+            event.preventDefault();
             var $pool = $(this);
             var settings = {
                 title : i18n['KCHAPI6001M'],
@@ -117,6 +125,7 @@ kimchi.storageBindClick = function() {
         });
 
         $('.pool-activate').on('click', function(event) {
+            event.preventDefault();
             var poolName = $(this).data('name');
             kimchi.changePoolState(poolName, 'activate', function() {
                 kimchi.doListStoragePools();
@@ -126,6 +135,7 @@ kimchi.storageBindClick = function() {
         });
 
         $('.pool-deactivate').on('click', function(event) {
+            event.preventDefault();
             var poolName = $(this).data('name');
             var settings = {
                 title : i18n['KCHAPI6001M'],
@@ -154,12 +164,14 @@ kimchi.storageBindClick = function() {
         });
 
         $('.pool-add-volume').on('click', function(event) {
+            event.preventDefault();
             var poolName = $(this).data('name');
             kimchi.selectedSP = poolName;
             wok.window.open('plugins/kimchi/storagepool-add-volume.html');
         });
 
-        $('.storage-action').on('click', function() {
+        $('.storage-action').on('click', function(event) {
+            event.preventDefault();
             var storage_action = $(this);
             var deleteButton = storage_action.find('.pool-delete');
             if ('active' === deleteButton.data('stat')) {
@@ -169,18 +181,24 @@ kimchi.storageBindClick = function() {
             }
         });
 
-        $('.pool-extend').on('click', function() {
-            $("#logicalPoolExtend").dialog("option", "poolName", $(this).data('name'));
-            $("#logicalPoolExtend").dialog("open");
+        $('.pool-extend').on('click', function(event) {
+            event.preventDefault();
+            //$("#logicalPoolExtend").dialog("option", "poolName", $(this).data('name'));
+            //$("#logicalPoolExtend").dialog("open");
+            partitions = $(this).data('name');
+            //$("#logicalPoolExtend").dialog("option", "poolName", $(this).data('name'));
         });
+
+
+
     }
 
-    $('.row').on('click', function(event) {
+    $('.wok-datagrid-row .handle ').on('click', function(event) {
         if (!$(event.target).parents().hasClass('bottom')) {
-            if ($(this).data('stat') === 'active') {
-                var that = $(this);
+            if ($(this).parent().parent().data('stat') === 'active') {
+                var that = $(this).parent().parent();
                 var volumeDiv = $('#volume' + that.data('name'));
-                var slide = $('.volumes', this);
+                var slide = $('.volumes', $(this).parent().parent());
                 if (that.hasClass('in')) {
                     that.css('height','auto');
                     kimchi.doListVolumes(that);
@@ -189,7 +207,7 @@ kimchi.storageBindClick = function() {
                         that.css('height','');
                     });
                     that.addClass('in');
-                    kimchi.changeArrow($('.arrow-up', this));
+                    kimchi.changeArrow($('.arrow-up', $(this).parent().parent()));
                 }
             }
         }
@@ -201,6 +219,17 @@ kimchi._generateVolumeHTML = function(volume) {
         return '';
     }
     var volumeHtml = $('#volumeTmpl').html();
+    volume.capacityLevel = Math.round(volume.allocation / volume.capacity * 100) || 0;
+    if (volume.capacityLevel > 100) {
+        volume.capacityIcon = 'icon-high';
+        volume.capacityLevel = 100;
+    } else if (volume.capacityLevel <= 100 && volume.capacityLevel >= 85) {
+        volume.capacityIcon = 'icon-high';
+    }else if (volume.capacityLevel <= 85 && volume.capacityLevel >= 75 ) {
+        volume.capacityIcon = 'icon-med';
+    } else {
+        volume.capacityIcon = 'icon-low';
+    }
     volume.capacity = wok.changetoProperUnit(volume.capacity,1);
     volume.allocation = wok.changetoProperUnit(volume.allocation,1);
     return wok.substitute(volumeHtml, volume);
@@ -255,7 +284,9 @@ kimchi.doListVolumes = function(poolObj) {
                 allocation: 0,
                 os_version: '',
                 path: '',
-                type: 'file'
+                type: 'file',
+                capacityLevel: 0,
+                capacityIcon: ''
             };
             listHtml += kimchi._generateVolumeHTML(volume);
         });
@@ -285,53 +316,101 @@ kimchi.doListVolumes = function(poolObj) {
     });
 }
 
-kimchi.initLogicalPoolExtend = function() {
-    $("#logicalPoolExtend").dialog({
-        autoOpen : false,
-        modal : true,
-        width : 600,
-        resizable : false,
-        closeText: "X",
-        open : function(){
+    kimchi.initLogicalPoolExtend = function() {
+
+    // $("#logicalPoolExtend").dialog({
+    //     autoOpen : false,
+    //     modal : true,
+    //     width : 600,
+    //     resizable : false,
+    //     closeText: "X",
+    //     open : function(){
+    //         $('#loading-info', '#logicalPoolExtend').removeClass('hidden');
+    //         $(".ui-dialog-titlebar-close", $("#logicalPoolExtend").parent()).removeAttr("title");
+    //         kimchi.listHostPartitions(function(data) {
+    //             $('#loading-info', '#logicalPoolExtend').addClass('hidden');
+    //             if (data.length > 0) {
+    //                 for(var i=0;i<data.length;i++){
+    //                     if (data[i].type === 'part' || data[i].type === 'disk') {
+    //                         $('.host-partition', '#logicalPoolExtend').append(wok.substitute($('#logicalPoolExtendTmpl').html(), data[i]));
+    //                     }
+    //                 }
+    //             } else {
+    //                 $('.host-partition').html(i18n['KCHPOOL6011M']);
+    //                 $('.host-partition').addClass('text-help');
+    //             }
+    //         }, function(err) {
+    //             $('#loading-info', '#logicalPoolExtend').addClass('hidden');
+    //             $('.host-partition').html(i18n['KCHPOOL6013M'] + '<br/>(' + err.responseJSON.reason + ')');
+    //             $('.host-partition').addClass('text-help');
+    //         });
+    //     },
+    //     beforeClose : function() { $('.host-partition', '#logicalPoolExtend').empty(); },
+    //     buttons : [{
+    //         class: "ui-button-primary",
+    //         text: i18n.KCHAPI6007M,
+    //         click: function(){
+    //             var devicePaths = [];
+    //             $("input[type='checkbox']:checked", "#logicalPoolExtend").each(function(){
+    //                 devicePaths.push($(this).prop('value'));
+    //             })
+    //             kimchi.updateStoragePool($("#logicalPoolExtend").dialog("option", "poolName"),{disks: devicePaths},function(data){
+    //                 var item = $("#"+$("#logicalPoolExtend").dialog("option", "poolName"));
+    //                 $(".usage", $(".storage-name", item)).text((Math.round(data.allocated/data.capacity*100)||0)+"%");
+    //                 $(".storage-text", $(".storage-capacity", item)).text(wok.changetoProperUnit(data.capacity,1));
+    //                 $(".storage-text", $(".storage-allocate", item)).text(wok.changetoProperUnit(data.allocated,1));
+    //             });
+    //             $(this).dialog("close");
+    //         }
+    //     }]
+    // });
+
+    $('#logicalPoolExtend').on('hidden.bs.modal', function () {
+        $('.host-partition', '#logicalPoolExtend').empty();
+    })
+
+    $('#logicalPoolExtend').on('show.bs.modal', function() {
+        //$('#logicalPoolExtend2').find('.modal-content').html();
+        kimchi.listHostPartitions(function(partitions) {
             $('#loading-info', '#logicalPoolExtend').removeClass('hidden');
-            $(".ui-dialog-titlebar-close", $("#logicalPoolExtend").parent()).removeAttr("title");
-            kimchi.listHostPartitions(function(data) {
-                $('#loading-info', '#logicalPoolExtend').addClass('hidden');
-                if (data.length > 0) {
-                    for(var i=0;i<data.length;i++){
-                        if (data[i].type === 'part' || data[i].type === 'disk') {
-                            $('.host-partition', '#logicalPoolExtend').append(wok.substitute($('#logicalPoolExtendTmpl').html(), data[i]));
-                        }
+            if (partitions.length > 0) {
+                for (var i = 0; i < partitions.length; i++) {
+                    if (partitions[i].type === 'part' || partitions[i].type === 'disk') {
+                        $('.host-partition', '#logicalPoolExtend').append(wok.substitute($('#logicalPoolExtendTmpl').html(), partitions[i]));
+                        $('#savePartitions', '#logicalPoolExtend').prop('disabled', false);
                     }
-                } else {
-                    $('.host-partition').html(i18n['KCHPOOL6011M']);
-                    $('.host-partition').addClass('text-help');
                 }
-            }, function(err) {
+            } else {
                 $('#loading-info', '#logicalPoolExtend').addClass('hidden');
-                $('.host-partition').html(i18n['KCHPOOL6013M'] + '<br/>(' + err.responseJSON.reason + ')');
-                $('.host-partition').addClass('text-help');
-            });
-        },
-        beforeClose : function() { $('.host-partition', '#logicalPoolExtend').empty(); },
-        buttons : [{
-            class: "ui-button-primary",
-            text: i18n.KCHAPI6007M,
-            click: function(){
-                var devicePaths = [];
-                $("input[type='checkbox']:checked", "#logicalPoolExtend").each(function(){
-                    devicePaths.push($(this).prop('value'));
-                })
-                kimchi.updateStoragePool($("#logicalPoolExtend").dialog("option", "poolName"),{disks: devicePaths},function(data){
-                    var item = $("#"+$("#logicalPoolExtend").dialog("option", "poolName"));
-                    $(".usage", $(".storage-name", item)).text((Math.round(data.allocated/data.capacity*100)||0)+"%");
-                    $(".storage-text", $(".storage-capacity", item)).text(wok.changetoProperUnit(data.capacity,1));
-                    $(".storage-text", $(".storage-allocate", item)).text(wok.changetoProperUnit(data.allocated,1));
-                });
-                $(this).dialog("close");
+                $('.host-partition').html(i18n['KCHPOOL6011M']);
             }
-        }]
+        }, function(err) {
+            $('#loading-info', '#logicalPoolExtend').addClass('hidden');
+            $('.host-partition').html(i18n['KCHPOOL6013M'] + '<br/>(' + err.responseJSON.reason + ')');
+        });
+
+        $('#savePartitions', '#logicalPoolExtend').on('click', function(event) {
+            event.preventDefault();
+            var devicePaths = [];
+            $("input[type='checkbox']:checked", "#logicalPoolExtend").each(function() {
+                devicePaths.push($(this).prop('value'));
+            })
+            kimchi.updateStoragePool($("#logicalPoolExtend"), {
+                disks: devicePaths
+            }, function(partitions) {
+                var item = $("#" + $("#logicalPoolExtend").dialog("option", "poolName"));
+                $('#logicalPoolExtend').modal('hide');
+                $(".usage", $(".storage-name", item)).text((Math.round(partitions.allocated / partitions.capacity * 100) || 0) + "%");
+                $(".storage-text", $(".storage-capacity", item)).text(wok.changetoProperUnit(partitions.capacity, 1));
+                $(".storage-text", $(".storage-allocate", item)).text(wok.changetoProperUnit(partitions.allocated, 1));
+            }, function(err) {
+                $('#savePartitions', '#logicalPoolExtend').prop('disabled', true);
+                $('#logicalPoolExtend').modal('hide');
+            });
+        });
+
     });
+
 }
 
 kimchi.storage_main = function() {
@@ -425,4 +504,4 @@ kimchi.changeArrow = function(obj) {
     } else {
         $(obj).removeClass('arrow-up').addClass('arrow-down');
     }
-}
+}
\ No newline at end of file
diff --git a/src/wok/plugins/kimchi/ui/js/src/kimchi.storagepool_add_main.js b/src/wok/plugins/kimchi/ui/js/src/kimchi.storagepool_add_main.js
index 8c27539..39c0ac7 100644
--- a/src/wok/plugins/kimchi/ui/js/src/kimchi.storagepool_add_main.js
+++ b/src/wok/plugins/kimchi/ui/js/src/kimchi.storagepool_add_main.js
@@ -142,21 +142,27 @@ kimchi.initStorageAddPage = function() {
     });
 
     kimchi.getHostFCDevices(function(data){
+        $scsiSelect = $('#scsiAdapter');
         if(data.length>0){
             for(var i=0;i<data.length;i++){
                 data[i].label = data[i].name;
                 data[i].value = data[i].name;
             }
-            $('#scsiAdapter').selectMenu();
-            $("input", "#scsiAdapter").val(data[0].name);
-            $('#scsiAdapter').selectMenu("setData", data);
+            //$('#scsiAdapter').selectMenu();
+            var scsiOptionHtml = '';
+            for (var i=0;i<data.length;i++){
+              scsiOptionHtml += '<option value="'+ data[i].value + '">' + data[i].label + '</option>';
+            }
+            $scsiSelect.append(scsiOptionHtml);
+            $scsiSelect.selectpicker();
         } else {
-            $('#scsiAdapter').html(i18n['KCHPOOL6005M']);
-            $('#scsiAdapter').addClass('text-help');
+            $scsiSelect.remove();
+            $('.scsi-adapters-list').html(i18n['KCHPOOL6005M']);
+            $('.scsi-adapters-list').addClass('text-help');
         }
     });
 
-    $('#poolTypeId').selectMenu();
+    //$('#poolTypeId').selectMenu();
     $('#serverComboboxId').combobox();
     $('#targetFilterSelectId').filterselect();
     var options = [ {
@@ -175,7 +181,13 @@ kimchi.initStorageAddPage = function() {
         label : i18n.KCHPOOL6004M,
         value : "scsi"
     } ];
-    $('#poolTypeId').selectMenu("setData", options);
+    var $select = $('#poolTypeInputId');
+    var optionHtml = '';
+    for (var i=0;i<options.length;i++){
+      optionHtml += '<option value="'+ options[i].value + '">' + options[i].label + '</option>';
+    }
+    $select.append(optionHtml);
+    $select.selectpicker();
 
     kimchi.getStorageServers('netfs', function(data) {
         var serverContent = [];
@@ -230,17 +242,17 @@ kimchi.initStorageAddPage = function() {
         var selectType = $(this).val();
         $.each(poolObject, function(type, value) {
             if(selectType == type){
-                $(value).removeClass('tmpl-html');
+                $(value).removeClass('hidden');
             } else {
-                $(value).addClass('tmpl-html');
+                $(value).addClass('hidden');
             }
         });
     });
     $('#authId').click(function() {
         if ($(this).prop("checked")) {
-            $('.authenticationfield').removeClass('tmpl-html');
+            $('.authenticationfield').removeClass('hidden');
         } else {
-            $('.authenticationfield').addClass('tmpl-html');
+            $('.authenticationfield').addClass('hidden');
         }
     });
     $('#iscsiportId').keyup(function(event) {
@@ -411,4 +423,4 @@ kimchi.addPool = function(event) {
             storagePoolAddingFunc();
         }
     }
-};
+};
\ No newline at end of file
diff --git a/src/wok/plugins/kimchi/ui/js/src/kimchi.storagepool_add_volume_main.js b/src/wok/plugins/kimchi/ui/js/src/kimchi.storagepool_add_volume_main.js
index 8479ab2..d13977d 100644
--- a/src/wok/plugins/kimchi/ui/js/src/kimchi.storagepool_add_volume_main.js
+++ b/src/wok/plugins/kimchi/ui/js/src/kimchi.storagepool_add_volume_main.js
@@ -175,5 +175,6 @@ kimchi.sp_add_volume_main = function() {
             uploadFile();
         }
         event.preventDefault();
+        $('#modalWindow').modal("hide");
     });
 };
diff --git a/src/wok/plugins/kimchi/ui/pages/storage.html.tmpl b/src/wok/plugins/kimchi/ui/pages/storage.html.tmpl
index dfc006e..9f2a978 100644
--- a/src/wok/plugins/kimchi/ui/pages/storage.html.tmpl
+++ b/src/wok/plugins/kimchi/ui/pages/storage.html.tmpl
@@ -28,76 +28,110 @@
 <script src="plugins/kimchi/js/kimchi.min.js"></script>
 </head>
 <body>
-<div class="toolbar">
-    <div class="tools" style="display:none">
-        <a id="storage-pool-add" class="btn-tool" href="javascript:void(0);"><span class="icon add">+</span></a>
-    </div>
-</div>
-<div class='storage'>
-<div class="grid-control"><input type="text" class="filter" placeholder="$_("Filter")"></div>
-<div id='storageGrid'>
-    <div>
-        <span class="storage-name">
-            <span>$_("Name")</span>
-            <span class="usage">$_("%Used")</span>
-        </span>
-        <span class="storage-state" >$_("State")</span>
-        <span class="storage-type">$_("Type")</span>
-        <span class="storage-capacity">$_("Capacity")</span>
-        <span class="storage-allocate">$_("Allocated")</span>
-        <span class="storage-location">$_("Location")</span>
+<div id="storage-root-container">
+    <nav class="navbar navbar-default toolbar">
+        <div class="container">
+            <!-- Brand and toggle get grouped for better mobile display -->
+            <div class="navbar-header">
+              <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#toolbar" aria-expanded="false">
+                <span class="sr-only">Toggle navigation</span>
+                <span class="icon-bar"></span>
+                <span class="icon-bar"></span>
+                <span class="icon-bar"></span>
+              </button>
+            </div>
+            <!-- Collect the nav links, forms, and other content for toggling -->
+            <div class="collapse navbar-collapse" id="toolbar">
+                <ul class="nav navbar-nav navbar-right tools" display="none">
+                    <li><a id="storage-pool-add" class="btn-tool" href="javascript:void(0);"><i class="fa fa-plus-circle"></i><span>Add a Storage</span></a></li>
+                </ul>
+            </div>
+        </div>
+    </nav>
+    <div class='storage'>
+        <div class="container">
+            <div class="row grid-control">
+                <div class="pull-right">
+                    <label for="storage-filter" class="sr-only">$_("Filter"):</label>
+                    <input type="text" class="filter form-control" placeholder="$_("Filter")">
+                </div>
+            </div>
+            <div id="alert-container"></div>
+            <div id='storageGrid'>
+                <div>
+                    <span class="column-state"><span class="sr-only">$_("State")</span></span><!--
+                    --><span class="column-name">$_("Name")</span><!--
+                    --><span class="column-type">$_("Type")</span><!--
+                    --><span class="column-location">$_("Location")</span><!--
+                    --><span class="column-usage">$_("%Used")</span><!--
+                    --><span class="column-allocated">$_("Allocated")</span><!--
+                    --><span class="column-capacity">$_("Capacity")</span><!--
+                    --><span class="column-disks">$_("Disks")</span><!--
+                    --><span class="column-action" display="none"><span class="sr-only">$_("Actions")</span></span>
+                </div>
+                <div id="storagepoolsList" class="list-storage empty-when-logged-off"></div>
+            </div>
+            <div id="logicalPoolExtend" class="modal fade logicalpool-modal" tabindex="-2" role="dialog" aria-labelledby="logicalPoolExtendLabel" aria-hidden="true">
+                <div class="modal-dialog modal-sm">
+                    <div class="modal-content">
+                      <div class="modal-header">
+                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
+                            <h4 class="modal-title" id="logicalPoolExtendLabel">$_("Device path")</h4>
+                          </div>
+                          <div class="modal-body">
+                                <p  id="loading-info" class="hidden"><span class="wok-loading-icon"></span><span>$_("Looking for available partitions ...")</span></p>
+                                <div class="host-partition">
+                                </div>
+                          </div>
+                          <div class="modal-footer">
+                              <button type="button" id="savePartitions" class="btn btn-default" disabled="disabled">$_("Save")</button>
+                              <button type="button" class="btn btn-default" data-dismiss="modal">$_("Cancel")</button>
+                          </div>
+                    </div>
+                  </div>
+            </div>
+        </div>
     </div>
-    <div id="storagepoolsList" class="list-storage empty-when-logged-off"></div>
-</div>
-</div>
-<div id="logicalPoolExtend" title="$_("Device path")">
-     <p id="loading-info" class="text-help">
-         <img src = "plugins/kimchi/images/theme-default/loading.gif" />
-         $_("Looking for available partitions ...")
-     </p>
-     <div class="host-partition">
-     </div>
 </div>
 <script id="storageTmpl" type="html/text">
         <div id="{name}" class="storage-li in" data-name="{name}" data-stat="{state}">
-            <span class="storage-name" val="{name}{usage}%">
-                <span title="{name}">{name}</span>
-                <span class="usage">{usage}%</span>
-            </span>
-            <span class="storage-state">
-                <div class="status-dot toolable active" data-state="{state}">
-                    <label class="tooltip">$_("active")</label>
-                </div>
-                <div class="status-dot toolable inactive" data-state="{state}">
-                    <label class="tooltip">$_("inactive")</label>
+               <span class='column-state' val="{state}">
+                    <span class='storage-state {state}'>
+                        <i class="fa fa-power-off"></i>
+                    </span>
+                </span><!--
+            --><span class='column-name' title="{name}" val="{name}">{name}</span><!--
+            --><span class='column-type' val="{type}">{type}</span><!--
+            --><span class='column-location' val="{path}">{path}</span><!--
+            --><span class='column-usage {state}' val="{usage}" ><span class='usage-icon {icon}'>{usage}</span>%</span><!--
+            --><span class='column-allocated' val="{allocated}">{allocated}</span><!--
+            --><span class='column-capacity' val="{capacity}">{capacity}</span><!--
+            --><span class="column-disks {state}">
+                    <div class="handle arrow-down"></div>
+                </span><!--
+            --><span class="column-action storage-button" style="display:none">
+                <span class="pull-right">
+                <div class="dropdown menu-flat storage-action" data-state="{state}" data-type="{type}" data-name="{name}">
+                    <button class="btn btn-primary dropdown-toggle" 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="#" class="pool-deactivate" data-stat="{state}" data-name="{name}" data-persistent="{persistent}" href="#"><i class="fa fa-minus-circle"></i>$_("Deactivate")</a>
+                        </li>
+                        <li role="presentation">
+                            <a href="#" class="pool-activate" data-stat="{state}" data-name="{name}"><i class="fa fa-power-off"></i>$_("Activate")</a>
+                        </li>
+                        <li role="presentation">
+                            <a href="#" class="pool-add-volume" data-stat="{state}" data-name="{name}" data-type="{type}"><i class="fa fa-plus-circle"></i>$_("Add Volume")</a>
+                        </li>
+                        <li role="presentation" class="{enableExt}">
+                            <a href="#" class="pool-extend" data-stat="{state}" data-name="{name}" data-toggle="modal" data-target="#logicalPoolExtend"><i class="fa fa-external-link-square"></i>$_("Extend")</a>
+                        </li>
+                        <li role="presentation" class="critical">
+                            <a href="#" class="pool-delete" data-stat="{state}" data-name="{name}"><i class="fa fa-ban"></i>$_("Undefine")</a>
+                        </li>
+                    </ul>
                 </div>
-            </span>
-            <span class="storage-type" val="{type}">
-                <div>{type}</div>
-            </span>
-            <span class="storage-capacity" val="{capacity}">
-                <div data-type="{type}">{capacity}</div>
-            </span>
-            <span class="storage-allocate" val="{allocated}">
-                <div data-type="{type}">{allocated}</div>
-            </span>
-            <span class="storage-location" val="{path}">
-                <div>{path}</div>
-            </span>
-            <span class="bottom storage-button" style="display:none">
-                <div class="btn dropdown popable storage-action" data-state="{state}" data-type="{type}" data-name="{name}">
-                    <span class="text">$_("Actions")</span><span class="arrow"></span>
-                    <div class="popover actionsheet right-side" style="width: 250px">
-                        <button class="button-big pool-deactivate" data-stat="{state}" data-name="{name}" data-persistent="{persistent}"><span class="text">$_("Deactivate")</span></button>
-                        <button class="button-big pool-activate" data-stat="{state}" data-name="{name}"><span class="text">$_("Activate")</span></button>
-                        <button class="button-big pool-add-volume" data-stat="{state}" data-name="{name}" data-type="{type}"><span class="text">$_("Add Volume")</span></button>
-                        <button class="button-big pool-extend {enableExt}" data-stat="{state}" data-name="{name}"><span class="text">$_("Extend")</span></button>
-                        <button class="button-big red pool-delete" data-stat="{state}" data-name="{name}"><span class="text">$_("Undefine")</span></button>
-                    </div>
-                </div>
-            </span>
-            <span class="handle">
-                <div class="arrow-down"></div>
+                </span>
             </span>
         <div class="volumes">
            <div id="volume{name}" class="volumeslist" data-name="{name}" ></div>
@@ -106,11 +140,13 @@
         </div>
 </script>
 <script id="volumeTmpl" type="html/text">
-        <div class="volume-box white-box" data-volume-name="{name}">
-            <div class="storage-icon volume-default icon-{format} ">
-            </div>
+        <div class="volume-box" data-volume-name="{name}">
             <div class="volume-title">
                 <div class="volume-name" title="{name}">{name}</div>
+                <div class="volume-utilization">
+                    <span class="volume-icon {capacityIcon}"></span>
+                    <span class="volume-usage">{capacityLevel}%</span>
+                </div>
                 <div class="volume-progress hidden">
                     <div class="progress-bar-outer">
                         <div class="progress-bar-inner"></div>
@@ -123,24 +159,40 @@
             </div>
             <div class="volume-setting">
             </div>
-            <div class="volume-type-position">
-                <div title="{type}" class="volume-text">$_("Type"): {type}</div>
-                <div title="{format}" class="volume-text">$_("Format"): {format}</div>
-            </div>
-            <div class="volume-quota-position">
-                <div title="{capacity}" class="volume-textquota">$_("Capacity"): {capacity}</div>
-                <div title="{allocation}"class="volume-textquota">$_("Allocation"): {allocation}</div>
-            </div>
+            <ul class="volume-data">
+                <li>
+                    <span class="value"  title="{format}">{format}</span>
+                    <span class="key">$_("Format")</span>
+                </li>
+                <li>
+                    <span class="value"  title="{type}">{type}</span>
+                    <span class="key">$_("Type")</span>
+                </li>
+                <li>
+                    <span class="value"  title="{allocation}">{allocation}</span>
+                    <span class="key">$_("Allocation")</span>
+                </li>
+                <li>
+                    <span class="value"  title="{capacity}">{capacity}</span>
+                    <span class="key">$_("Capacity")</span>
+                </li>
+            </ul>
       </div>
 </script>
 <script id="logicalPoolExtendTmpl" type="html/text">
     <div>
-        <input type="checkbox" value="{path}" name="devices">
-        <label for="{name}">{path}</label>
+        <input type="checkbox" class="wok-checkbox" id="{name}" value="{path}" name="devices">
+        <label for="{name}">
+            <div>
+                <span class="device-name">{name}</span>
+                <span class="device-path">{path}</span>
+            </div>
+        </label>
     </div>
 </script>
 <script>
     kimchi.storage_main();
 </script>
+<div id="modalWindow" class="modal fade storage-modal" tabindex="-1" role="dialog" aria-labelledby="storageModalLabel" aria-hidden="true"> </div>
 </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/src/wok/plugins/kimchi/ui/pages/storagepool-add-volume.html.tmpl b/src/wok/plugins/kimchi/ui/pages/storagepool-add-volume.html.tmpl
index ab10939..735b0c8 100644
--- a/src/wok/plugins/kimchi/ui/pages/storagepool-add-volume.html.tmpl
+++ b/src/wok/plugins/kimchi/ui/pages/storagepool-add-volume.html.tmpl
@@ -21,59 +21,36 @@
 #silent t = gettext.translation($lang.domain, $lang.localedir, languages=$lang.lang, fallback=True)
 #silent _ = t.gettext
 #silent _t = t.gettext
-<div id="sp-add-volume-window" class="window">
+<div id="sp-add-volume-window" class="window modal-content">
     <form id="form-sp-add-volume">
-        <header class="window-header">
-            <h1 class="title h1 grey">$_("Add a Volume to Storage Pool")</h1>
-        </header>
-        <section>
-            <div class="content">
-                <div class="form-section">
-                    <h2>
-                        <input type="radio" id="volume-type-download" class="volume-type" name="volumeType" value="download" checked="checked" />
-                        <label for="volume-type-download">
-                            $_("Fetch from remote URL")
-                        </label>
-                    </h2>
-                    <div class="field">
-                        <div class="textbox-wrapper">
-                            <input type="text" id="volume-remote-url" class="text volume-input download" name="volumeRemoteURL" />
-                        </div><br>
-                        <div class="icon-info-circled light-grey c1 help-inline"></div>
-                        <p class="text-help help-inline">
-                            $_("Enter the remote URL here.")
-                        </p>
-                    </div>
-                </div>
-                <div class="form-section">
-                    <h2>
-                        <input type="radio" id="volume-type-upload" class="volume-type" name="volumeType" value="upload"/>
-                        <label for="volume-type-upload">
-                        $_("Upload a file")
-                        </label>
-                    </h2>
-                    <div class="field">
-                        <div class="icon-info-circled light-grey c1 help-inline"></div>
-                        <p class="text-help help-inline">
-                            $_("Choose the file you want to upload.")
-                        </p>
-                        <div class="textbox-wrapper">
-                            <input type="file" class="volume-input upload" id="volume-input-file" name="volumeLocalFile" disabled="disabled" />
-                        </div>
-                    </div>
-                </div>
+        <div class="modal-header">
+            <h4 class="modal-title">$_("Add a Volume to Storage Pool")</h4>
+        </div>
+        <div class="modal-body">
+            <div class="form-group">
+                <input type="radio" id="volume-type-download" class="volume-type wok-radio" name="volumeType" value="download" checked="checked" />
+                <label for="volume-type-download"> $_("Fetch from remote URL")</label>
+                <input type="text" id="volume-remote-url" class="form-control volume-input download" name="volumeRemoteURL" />
+                <p class="help-block">
+                    <i class="fa fa-info-circle"></i> $_("Enter the remote URL here.")
+                </p>
             </div>
-        </section>
-        <footer>
-            <div class="btn-group">
-                <button type="submit" id="sp-add-volume-button" class="btn-normal" disabled="disabled">
-                    <span class="text">$_("Add")</span>
-                </button>
-                <button type="button" class="btn-normal close"><span class="text">$_("Cancel")</span></button>
+            <div class="form-group">
+                <input type="radio" id="volume-type-upload" class="volume-type wok-radio" name="volumeType" value="upload" />
+                <label for="volume-type-upload"> $_("Upload a file")</label>
+                <input type="file" class="volume-input upload" id="volume-input-file" name="volumeLocalFile" disabled="disabled" />
+                <p class="help-block">
+                    <i class="fa fa-info-circle"></i> $_("Choose the file you want to upload.")
+                </p>
             </div>
-        </footer>
+        </div>
+        <div class="modal-footer">
+            <button type="submit" id="sp-add-volume-button" class="btn btn-default" disabled="disabled">$_("Add")</button>
+            <button type="button" class="btn btn-default" data-dismiss="modal">$_("Cancel")</button>
+        </div>
     </form>
 </div>
+
 <script type="text/javascript">
     kimchi.sp_add_volume_main();
 </script>
diff --git a/src/wok/plugins/kimchi/ui/pages/storagepool-add.html.tmpl b/src/wok/plugins/kimchi/ui/pages/storagepool-add.html.tmpl
index a697af5..1771e4a 100644
--- a/src/wok/plugins/kimchi/ui/pages/storagepool-add.html.tmpl
+++ b/src/wok/plugins/kimchi/ui/pages/storagepool-add.html.tmpl
@@ -23,164 +23,149 @@
 <!DOCTYPE html>
 <html>
 <body>
-    <div class="window storage-window storage-admin">
-        <header>
-            <h1 class="title h1 grey">$_("Define a New Storage Pool")</h1>
-        </header>
-        <div class="content">
+    <div id="storage-add-window" class="window modal-content">
+        <div class="modal-header">
+                <h4 class="modal-title">$_("Define a New Storage Pool")</h4>
+        </div>
+        <div class="modal-body">
             <form id="form-pool-add">
-                <section class="form-section">
-                    <h2>1. $_("Storage Pool Name")</h2>
-                    <div class="field">
-                        <input id="poolId" required="required" type="text" class="text storage-base-input-width" name="name"><br>
-                        <div class="icon-info-circled light-grey c1 help-inline"></div>
-                        <p class="text-help help-inline">
-                            $_("The name used to identify the storage pools, and it should not be empty.")
+                    <div class="form-group">
+                        <label for="poolId">$_("Storage Pool Name")</label>
+                        <input id="poolId" required="required" type="text" class="form-control" name="name">
+                        <p class="help-block">
+                            <i class="fa fa-info-circle"></i> $_("The name used to identify the storage pools, and it should not be empty.")
                         </p>
                     </div>
-                </section>
-                <section class="form-section">
-                    <h2>2. $_("Storage Pool Type")</h2>
-                    <div class="storage-type-wrapper-controls">
-                        <div id="poolTypeId">
-                            <input id="poolTypeInputId" name="type" type="hidden" value="dir"/>
-                            <span id="pool-type-label" class="text"></span><span class="arrow"></span>
-                            <div>
-                                <ul id="storagePool-list">
-                                </ul>
-                            </div>
-                        </div>
+                    <div class="form-group">
+                        <label for="poolId">$_("Storage Pool Type")</label>
+                        <select id="poolTypeInputId" class="selectpicker col-md-12 col-lg-12"></select>    
                     </div>
-                </section>
-                <div class="path-section">
-                    <section class="form-section">
-                        <h2>3. $_("Storage Path")</h2>
-                        <div class="field">
-                            <input id="pathId" type="text" class="text storage-base-input-width"><br>
-                            <div class="icon-info-circled light-grey c1 help-inline"></div>
-                            <p class="text-help help-inline">
-                                $_("The path of the Storage Pool. Each Storage Pool must have a unique path.")</p><br>
-                            <div class="icon-info-circled light-grey c1 help-inline"></div>
-                            <p class="text-help help-inline">
-                                $_("Kimchi will try to create the directory when it does not already exist in your system.")</p>
+                    <div class="path-section row">
+                        <div class="form-group">
+                            <label for="pathId">$_("Storage Path")</label>
+                            <input id="pathId" type="text" class="form-control">
+                            <p class="help-block">
+                                <i class="fa fa-info-circle"></i> $_("The path of the Storage Pool. Each Storage Pool must have a unique path.") $_("Kimchi will try to create the directory when it does not already exist in your system.")
+                            </p>
                         </div>
-                        <div class="clear"></div>
-                    </section>
-                </div>
-                <div class="nfs-section tmpl-html">
-                    <section class="form-section">
-                        <h2>3. $_("NFS Server IP")</h2>
-                        <div class="field storage-field">
-                            <div id="serverComboboxId" class="storage-add-input-width">
-                                <input id="nfsserverId"/>
-                                <div>
-                                    <ul id="nfs-server-used">
-                                    </ul>
+                    </div>
+                    <div class="nfs-section hidden row">
+                        <div class="form-group">
+                            <label for="nfsserverId">$_("NFS Server IP")</label>
+                            <div class="field storage-field">
+                                <div id="serverComboboxId" class="storage-add-input">
+                                    <input id="nfsserverId" class="form-control" />
+                                    <div>
+                                        <ul id="nfs-server-used">
+                                        </ul>
+                                    </div>
                                 </div>
-                            </div><br>
-                            <div class="icon-info-circled light-grey c1 help-inline"></div>
-                            <p class="text-help help-inline">
-                                $_("NFS server IP or hostname. It can be input or chosen from history.")</p>
+                                <p class="help-block">
+                                    <i class="fa fa-info-circle"></i> $_("NFS server IP or hostname. It can be input or chosen from history.")
+                                </p>
+                            </div>
                         </div>
-                    </section>
-                    <section class="form-section">
-                        <h2>4. $_("NFS Path")</h2>
-                        <div class="field storage-field">
-                            <div id="targetFilterSelectId" class="storage-add-input-width">
-                                <input id="nfspathId" class="input" disabled/>
-                                <div>
-                                    <ul id="nfs-server-target">
-                                    </ul>
+                        <div class="form-group">
+                            <label for="nfspathId">$_("NFS Path")</label>
+                            <div class="field storage-field">
+                                <div id="targetFilterSelectId" class="storage-target-input">
+                                    <input id="nfspathId" class="form-control" disabled/>
+                                    <div>
+                                        <ul id="nfs-server-target">
+                                        </ul>
+                                    </div>
                                 </div>
-                            </div><br>
-                            <div class="icon-info-circled light-grey c1 help-inline"></div>
-                            <p class="text-help help-inline">$_("The NFS exported path on NFS server.")</p>
+                                <p class="help-block">
+                                        <i class="fa fa-info-circle"></i> $_("The NFS exported path on NFS server.")
+                                </p>
+                            </div>
                         </div>
-                    </section>
                 </div>
-                <div class="logical-section tmpl-html">
-                    <section class="form-section storageType">
-                        <h2>3. $_("Device path")</h2>
+                <div class="logical-section hidden row">
+                    <div class="form-group storageType">
+                        <label>$_("Device path")</label>
                         <div class="host-partition">
-                            <div class="icon-info-circled light-grey c1 help-inline"></div>
-                            <p class="text-help help-inline">
-                                $_("Looking for available partitions ...")
-                                <img src = "plugins/kimchi/images/theme-default/loading.gif" />
-                            </p>
+                            <span class="wok-loading-icon"></span><span>$_("Looking for available partitions ...")</span>
                         </div>
-                    </section>
+                    </div>
                 </div>
-                <div class="iscsi-section tmpl-html">
-                    <section class="form-section">
-                        <h2>3. $_("iSCSI Server")</h2>
-                        <div class="field">
-                            <span class="filter-select popable" id="iSCSIServer">
-                                <input id="iscsiserverId" type="text" placeholder="$_("Server")">
-                                <div class="popover"><ul class="option select-list"></ul></div>
-                            </span>
-                            <input id="iscsiportId" placeholder="$_("Port")" type="text" class="text storage-port-width" maxlength="4"><br>
-                            <div class="icon-info-circled light-grey c1 help-inline"></div>
-                            <p class="text-help help-inline">
-                                $_("iSCSI server IP or hostname. It should not be empty.")</p>
+                <div class="iscsi-section hidden row">
+                    <div class="form-group">
+                        <label for="iscsiserverId">$_("iSCSI Server")</label>
+                        <div class="col-md-12">
+                            <div class="col-md-10">
+                                <span class="filter-select popable" id="iSCSIServer">
+                                    <input id="iscsiserverId" type="text" class="form-control" placeholder="$_("Server")">
+                                    <div class="popover"><ul class="option select-list"></ul></div>
+                                </span>
+                            </div>
+                            <div class="col-md-2">
+                                <label for="iscsiportId" class="sr-only">$_("Port")</label>
+                                <input id="iscsiportId" placeholder="$_("Port")" type="text" class="form-control" maxlength="4">
+                            </div>
                         </div>
-                    </section>
-                    <section class="form-section">
-                        <h2>4. $_("Target")</h2>
-                        <div class="field">
+                        <p class="help-block">
+                                <i class="fa fa-info-circle"></i> $_("iSCSI server IP or hostname. It should not be empty.")
+                        </p>
+                    </div>
+                    <div class="form-group">
+                        <label for="iscsiTargetId">$_("Target")</label>
+                        <div class="col-md-12">
                             <span class="filter-select popable" id="iSCSITarget">
-                                <input id="iscsiTargetId" type="text">
+                                <input id="iscsiTargetId" class="form-control" type="text">
                                 <div class="popover"><ul class="option select-list"></ul></div>
-                            </span><br>
-                            <div class="icon-info-circled light-grey c1 help-inline"></div>
-                            <p class="text-help help-inline">$_("The iSCSI target on iSCSI server")</p>
-                        </div>
-                    </section>
-                    <section class="form-section">
-                        <div class="field">
-                            <input type="checkbox" id="authId" name="authname">
-                            <label for="authId">$_("Add iSCSI Authentication")</label>
+                            </span>
+                            <p class="help-block">
+                                    <i class="fa fa-info-circle"></i> $_("The iSCSI target on iSCSI server")
+                            </p>
                         </div>
-                    </section>
-                    <section class="authenticationfield form-section tmpl-html">
-                        <h2>5. $_("iSCSI Authentication")</h2>
-                        <div class="field">
-                            <input id="usernameId" placeholder="$_("User Name")" type="text" class="text storage-auth-width">
-                            <input id="passwordId" placeholder="$_("Password")" type="password" class="text storage-auth-width">
+                    </div>
+                    <div class="form-group">
+                        <input type="checkbox" class="wok-checkbox" id="authId" name="authname">
+                        <label for="authId">$_("Add iSCSI Authentication")</label>
+                    </div>
+                    <div class="authenticationfield form-section hidden">
+                        <div class="form-group">
+                            <div class="col-md-6">
+                                <input id="usernameId" placeholder="$_("User Name")" type="text" class="form-control">
+                            </div>
+                            <div class="col-md-6">
+                                <input id="passwordId" placeholder="$_("Password")" type="password" class="form-control">
+                            </div>
                         </div>
-                    </section>
+                    </div>
                 </div>
-                <div class="scsi-section tmpl-html">
-                    <section class="form-section">
-                        <h2>3. $_("SCSI Adapter")</h2>
-                        <div class="storage-type-wrapper-controls">
-                        <div id="scsiAdapter">
-                            <input type="hidden"/>
-                            <span class="text"></span><span class="arrow"></span>
-                            <div><ul></ul></div>
+                <div class="scsi-section row hidden">
+                    <div class="form-group">
+                        <label for="scsiAdapter">$_("SCSI Adapter")</label>
+                        <div class="scsi-adapters-list">
+                            <select id="scsiAdapter" class="selectpicker col-md-12 col-lg-12">
+                            </select>
                         </div>
-                        </div>
-                    </section>
+                    </div>
                 </div>
             </form>
         </div>
-        <footer>
-            <div class="btn-group">
-                <button id="pool-doAdd" class="btn-normal">
-                    <span class="text">$_("Create")</span>
-                </button>
-                <button class="btn-normal" id="pool-loading" style="display: none"><span class="text">$_("Please, wait...")</span></button>
-                <button class="btn-normal close" type="button"><span class="text">$_("Cancel")</span></button>
-            </div>
-        </footer>
+        <div class="modal-footer">
+                <button id="pool-doAdd" class="btn btn-default">$_("Create")</button>
+                <button class="btn btn-default" id="pool-loading" style="display: none"><span class="wok-loading-icon"></span>$_("Please, wait...")</button>
+                <button class="btn btn-default" type="button" data-dismiss="modal">$_("Cancel")</button>
+        </div>
+        </div>
     </div>
     <script>
         kimchi.storagepool_add_main();
     </script>
     <script id="partitionTmpl" type="html/text">
-        <div>
-            <input type="checkbox" id="{name}" value="{path}" name="devices">
-            <label for="{name}">{path}</label>
-        </div>
+    <div>
+        <input type="checkbox" class="wok-checkbox" id="{name}" value="{path}" name="devices">
+        <label for="{name}">
+            <div>
+                <span class="device-name">{name}</span>
+                <span class="device-path">{path}</span>
+            </div>
+        </label>
+    </div>        
     </script>
 </body>
 </html>
diff --git a/ui/css/src/modules/_storage.scss b/ui/css/src/modules/_storage.scss
new file mode 100644
index 0000000..fdacd12
--- /dev/null
+++ b/ui/css/src/modules/_storage.scss
@@ -0,0 +1,393 @@
+//
+// Project Wok
+//
+// Copyright IBM, Corp. 2015
+//
+// Code derived from Project Kimchi
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+// .handle {
+//     display: inline-block;
+//     font: normal normal normal 14px/1 FontAwesome;
+//     font-size: inherit;
+//     text-rendering: auto;
+//     -webkit-font-smoothing: antialiased;
+// }
+// .arrow-down:before {
+//     content: "\f078"
+// }
+// .arrow-up:before {
+//     content: "\f077"
+// }
+// .icon {
+//     padding-left: 30px;
+//     display: inline-block;
+// }
+#storage-root-container {
+    .wok-datagrid-body {
+        span > .fa {
+            font-size: 22px;
+            width: 20px;
+            height: 20px;
+            position: relative;
+            top: 10px;
+        }
+        .handle {
+            user-select: none;
+            position: relative;
+            top: 11px;
+        }
+        .active {
+            .handle {
+                cursor: pointer;
+            }
+            .fa-power-off {
+                color: #a8d46f;
+            }
+        }
+        .inactive {
+            .handle {
+                cursor: default;
+            }
+            .fa-power-off {
+                display: none;
+            }
+            .usage-icon.icon-high {
+                background-image: url('#{$wok-icon-path}/high_disabled.png') !important;
+            }
+            .usage-icon.icon-med {
+                background-image: url('#{$wok-icon-path}/med_disabled.png') !important;
+            }
+            .usage-icon.icon-low {
+                background-image: url('#{$wok-icon-path}/low_disabled.png') !important;
+            }
+        }
+    }
+    .volumes {
+        width: 100%;
+        background: $navbar-default-toggle-hover-bg;
+        display: none;
+        > .footer {
+            z-index: 100;
+        }
+        .volumeslist {
+            padding: 11px;
+            max-height: 285px;
+            min-height: 136px;
+            overflow: auto;
+        }
+        .volume-box {
+            background: $navbar-inverse-toggle-icon-bar-bg;
+            padding: 4px 20px;
+            margin: 11px;
+            display: inline-block;
+            width: 409px;
+            height: 110px;
+        }
+        .volume-title {
+            height: 46px;
+            width: 100%;
+            border-bottom: 1px solid $input-border;
+            position: relative;
+        }
+        .volume-name {
+            font-size: 15pt;
+            font-weight: 300;
+            width: 274px;
+            line-height: 46px;
+            display: inline-block;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+        .volume-utilization {
+            vertical-align: top;
+            text-align: right;
+            display: inline-block;
+            width: 90px;
+            height: 46px;
+            line-height: 46px;
+        }
+        .volume-icon {
+            display: inline-block;
+            width: 27px;
+            height: 46px;
+            line-height: 46px;
+            background-repeat: no-repeat;
+            background-position: 50%;
+            background-color: transparent;
+        }
+        .volume-usage {
+            vertical-align: top;
+            font-size: 15pt;
+            font-weight: 400;
+            display: inline-block;
+            text-align: right;
+            line-height: 46px;
+            padding-left: 0;
+            margin-left: 5px;
+        }
+        .volume-icon.icon-high {
+            background-image: url('#{$wok-icon-path}/high.png');
+        }
+        .volume-icon.icon-med {
+            background-image: url('#{$wok-icon-path}/med.png');
+        }
+        .volume-icon.icon-low {
+            background-image: url('#{$wok-icon-path}/low.png');
+        }
+        .volume-progress {
+            position: absolute;
+            margin: 0;
+            width: 409px;
+            top: -4px;
+            left: -20px;
+            .progress-bar-outer {
+                background: transparent;
+                height: 6px;
+                overflow: hidden;
+                width: 100%;
+            }
+            .progress-bar-inner {
+                background: $storages-low;
+                height: 100%;
+                width: 100%;
+            }
+        }
+        .volume-data {
+            margin: 0;
+            padding: 0;
+            list-style: none;
+            > li {
+                display: inline-block;
+                width: 89px;
+                span {
+                    display: block;
+                    font-size: 12pt;
+                }
+                span.value {
+                    font-weight: 600;
+                }
+                span.key {
+                    font-weight: 300;
+                }
+            }
+        }
+        .pool-empty {
+            text-align: center;
+            line-height: 136px;
+        }
+    }
+    .wok-datagrid > .wok-datagrid-body > .wok-datagrid-row[data-stat="inactive"] {
+        color: $gray-light !important;
+    }
+    .wok-datagrid > .wok-datagrid-header,
+    .wok-datagrid > .wok-datagrid-body > .wok-datagrid-row {
+        > span.column-state {
+            width: 3.0519%;
+            text-align: center;
+        }
+        > span.column-name {
+            width: 12.7272%;
+            text-overflow: ellipsis;
+        }
+        > span.column-type {
+            width: 11.6883%;
+        }
+        > span.column-location {
+            width: 21.4285%;
+        }
+        > span.column-usage {
+            width: 9.41558%;
+            .usage-icon {
+                padding-left: 35px;
+                display: inline-block;
+                background-repeat: no-repeat;
+                background-position: 0 50%;
+                background-color: transparent;
+                &.icon-high {
+                    background-image: url('#{$wok-icon-path}/high.png');
+                }
+                &.icon-med {
+                    background-image: url('#{$wok-icon-path}/med.png');
+                }
+                &.icon-low {
+                    background-image: url('#{$wok-icon-path}/low.png');
+                }
+            }
+        }
+        > span.column-capacity {
+            width: 8.701298%;
+        }
+        > span.column-allocated {
+            width: 9.35064%;
+        }
+        > span.column-disks {
+            text-align: center;
+            width: 2.9870%;
+        }
+        > span.column-action {
+            width: 20.64%;
+            text-align: right;
+        }
+    }
+    .wok-datagrid > .wok-datagrid-body > .wok-datagrid-row > span {
+        &.column-state {
+            height: 53px;
+            vertical-align: middle;
+        }
+        &.column-disks {
+            height: 53px;
+            vertical-align: middle;
+            .arrow-down,
+            .arrow-up {
+                display: inline-block;
+                font: normal normal normal 14px/1 FontAwesome;
+                font-size: inherit;
+                text-rendering: auto;
+                -webkit-font-smoothing: antialiased;
+                -moz-osx-font-smoothing: grayscale;
+            }
+            .arrow-down:before {
+                content: "\f078";
+            }
+            .arrow-up:before {
+                content: "\f077";
+            }
+        }
+    }
+}
+
+#storage-root-container #logicalPoolExtend {
+    .modal-body {
+        max-height: 438px;
+        p span {
+            vertical-align: middle !important;
+        }
+    }
+}
+
+#storage-root-container #logicalPoolExtend,
+.storage-modal {
+    form {
+        margin: 0 !important;
+    }
+    .host-partition {
+        overflow-y: auto;
+        overflow-x: hidden;
+        max-height: 430px;
+        label {
+            display: block;
+            > div {
+                vertical-align: top;
+                display: inline-block;
+            }
+            span.device-name,
+            span.device-path {
+                display: block;
+            }
+            span.device-name {
+                font-weight: 600;
+                overflow: hidden;
+                text-overflow: ellipsis;
+            }
+            span.device-path {
+                font-weight: 400;
+                word-wrap: break-word;
+            }
+        }
+    }
+}
+
+#storage-root-container #logicalPoolExtend {
+    .host-partition label > div {
+        width: 388px;
+        span.device-path {
+            width: 388px;
+        }
+    }
+}
+
+.storage-modal {
+    // Wok Popable
+    .filter-select.popable,
+    .storage-target-input,
+    .storage-add-input {
+        .popover {
+            max-width: 100% !important;
+            width: 100%;
+            top: 34px;
+            left: -2px;
+            border: 0 !important;
+            background: 0 !important;
+            box-shadow: none !important;
+            ul {
+                z-index: $zindex-dropdown;
+                padding: 5px 0;
+                margin: 2px 2px 0;
+                list-style: none;
+                font-size: $font-size-base;
+                text-align: left;
+                background-color: $dropdown-bg;
+                border: 1px solid $dropdown-fallback-border;
+                border: 1px solid $dropdown-border;
+                border-radius: $border-radius-base;
+                @include box-shadow(0 6px 12px rgba(0,
+                0,
+                0,
+                .175));
+                background-clip: padding-box;
+                li {
+                    cursor: pointer;
+                    display: block;
+                    padding: 3px 20px;
+                    clear: both;
+                    font-weight: normal;
+                    line-height: $line-height-base;
+                    color: $dropdown-link-color;
+                    white-space: nowrap;
+                    &:hover,
+                    &:focus {
+                        text-decoration: none;
+                        color: $dropdown-link-hover-color;
+                        background-color: $dropdown-link-hover-bg;
+                    }
+                }
+            }
+        }
+    }
+    #nfspathId[style],
+    #nfsserverId[style] {
+        // overriding style definition
+        width: 100% !important;
+    }
+    .iscsi-section .form-group > .col-md-12 > .col-md-10 + .col-md-2 {
+        padding-left: 5px;
+    }
+    .iscsi-section .form-group > .col-md-12 > .col-md-10 {
+        padding-right: 5px;
+    }
+    .authenticationfield > div > .col-md-6 + .col-md-6 {
+        padding-left: 5px;
+    }
+    .authenticationfield > div > .col-md-6 {
+        padding-right: 5px;
+    }
+    .host-partition label > div {
+        width: 688px;
+        span.device-path {
+            width: 688px;
+        }
+    }
+}
-- 
1.9.3

    

[Kimchi-devel] [PATCH 09/10] [new-ui] Storage tab

sguimaraes943＠gmail.com