This patch proper shows the extend logical pool dialog to collect user information and do the request. Signed-off-by: Aline Manera <alinefm(a)linux.vnet.ibm.com&gt; ---  ui/css/kimchi.css                        |  3 +-  ui/css/src/modules/_guests.scss          |  3 +-  ui/js/src/kimchi.storage_main.js         | 81 ++++++++++++++++++++ ------------  ui/js/src/kimchi.storagepool_add_main.js |  2 +-  ui/pages/i18n.json.tmpl                  |  9 ++--  ui/pages/tabs/storage.html.tmpl          | 45 +++++++++---------  6 files changed, 83 insertions(+), 60 deletions(-) diff --git a/ui/css/kimchi.css b/ui/css/kimchi.css index 959508f..9a9ff25 100644 --- a/ui/css/kimchi.css +++ b/ui/css/kimchi.css @@ -294,7 +294,8 @@    font-size: 32px;  } -#wok-confirm-modal .modal-body strong { +#wok-confirm-modal .modal-body strong, +.modal-dialog .modal-body strong {    border-bottom: 1px dotted;  } diff --git a/ui/css/src/modules/_guests.scss b/ui/css/src/modules/_guests.scss index 237b395..4947123 100644 --- a/ui/css/src/modules/_guests.scss +++ b/ui/css/src/modules/_guests.scss @@ -46,7 +46,8 @@      }  } -#wok-confirm-modal .modal-body strong { +#wok-confirm-modal .modal-body strong, +.modal-dialog .modal-body strong {      border-bottom: 1px dotted;  } diff --git a/ui/js/src/kimchi.storage_main.js b/ui/js/src/kimchi.storage_main.js index 0d7a6d7..741fd59 100644 --- a/ui/js/src/kimchi.storage_main.js +++ b/ui/js/src/kimchi.storage_main.js @@ -410,10 +410,8 @@ kimchi.storageBindClick = function() {          $('.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')); +            var poolName = $(this).data('name'); +            kimchi.selectedSP = poolName;          });      } @@ -478,17 +476,23 @@ kimchi._generateVolumeHTML = function(volume) {      return volumeHtml[0].outerHTML;  }; + +kimchi.getPoolUsageIcon = function(usage) { +    if (usage <= 100 && usage >= 85) +        return 'icon-high'; + +    if (usage <= 85 && usage >= 75) +        return 'icon-med'; + +    return 'icon-low'; +}; + +  kimchi.doUpdateStoragePool = function(poolObj){      var poolName = poolObj.data('name');      kimchi.getStoragePool(poolName, function(result) {          result.usage = Math.round(result.allocated / result.capacity * 100) || 0; -        if (result.usage <= 100 && result.usage >= 85) { -            result.icon = 'icon-high'; -        }else if (result.usage <= 85 && result.usage >= 75 ) { -            result.icon = 'icon-med'; -        } else { -            result.icon = 'icon-low'; -        } +        result.icon = kimchi.getPoolUsageIcon(result.usage);          result.allocated = wok.changetoProperUnit(result.allocated,1);          $('> .column-usage > .usage-icon',poolObj).attr('class', 'usage-icon').addClass(result.icon).text(result.usage);          $('> .column- allocated',poolObj).attr('val',result.allocated).text(result.allocate d); @@ -649,30 +653,45 @@ kimchi.doListVolumes = function(poolObj) {      }, false);  }; -    kimchi.initLogicalPoolExtend = function() { - +kimchi.initLogicalPoolExtend = function() {      $('#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'); -            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); +        // Make any change in the form fields enables the +        // 'savePartitions' button if all the visible form +        // fields are filled, disables it otherwise. +        $('#logicalPoolExtend').on('input change propertychange', function() { +            if ($("input[name=devices]:checked").length === 0) { +                $("#savePartitions").attr("disabled", true); +            } +            else { +                $("#savePartitions").attr("disabled", false); +            } +        }); + +        kimchi.listHostPartitions(function(data) { +            if (data.length > 0) { +                var deviceHtml = $('#partitionTmpl').html(); +                var listHtml = '<table class="table table- hover"><thead><tr><th></th><th>Device</th><th>Path</th><th>Size (GiB)</th></tr></thead><tbody>'; +                valid_types = ['part', 'disk', 'mpath']; +                $.each(data, function(index, value) { +                    if (valid_types.indexOf(value.type) !== -1) { +                        value.size = (value.size / 1000000000).toFixed(2); +                        listHtml += wok.substitute(deviceHtml, value);                      } -                } +                }); +                listHtml += '</tbody></table>'; +                var infoHtml = '<h3>' + i18n['KCHPOOL6019M'].replace('%1', '<strong>' + kimchi.selectedSP + '</strong>') + '</h3>'; +                $('.host-partition', '#logicalPoolExtend').html(infoHtml + listHtml);              } else { -                $('#loading-info', '#logicalPoolExtend').addClass('hidden');                  $('.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');          });          $('#savePartitions', '#logicalPoolExtend').on('click', function(event) { @@ -681,14 +700,16 @@ kimchi.doListVolumes = function(poolObj) {              $("input[type='checkbox']:checked", "#logicalPoolExtend").each(function() {                  devicePaths.push($(this).prop('value'));              }); -            kimchi.updateStoragePool($("#logicalPoolExtend"), { +            kimchi.updateStoragePool(kimchi.selectedSP, {                  disks: devicePaths -            }, function(partitions) { -                var item = $("#" + $("#logicalPoolExtend").dialog("option", "poolName")); +            }, function(pool) {                  $('#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)); +                var item = '#' + pool.name; +                var usage = Math.round(pool.allocated / pool.capacity * 100) || 0; +                var usageIcon = kimchi.getPoolUsageIcon(usage); +                $(".usage-icon", $(".column-usage", item)).attr('class', 'usage-icon').addClass(usageIcon).text(usage); +                $(".column-capacity", item).text(wok.changetoProperUnit(pool.capacity, 1)); +                $(".column-allocated", item).text(wok.changetoProperUnit(pool.allocated, 1));              }, function(err) {                  $('#savePartitions', '#logicalPoolExtend').prop('disabled', true);                  $('#logicalPoolExtend').modal('hide'); diff --git a/ui/js/src/kimchi.storagepool_add_main.js b/ui/js/src/kimchi.storagepool_add_main.js index 3fe2548..5a020ee 100644 --- a/ui/js/src/kimchi.storagepool_add_main.js +++ b/ui/js/src/kimchi.storagepool_add_main.js @@ -127,7 +127,7 @@ kimchi.initStorageAddPage = function() {      kimchi.listHostPartitions(function(data) {          if (data.length > 0) {              var deviceHtml = $('#partitionTmpl').html(); -            var listHtml = '<table class="table table- hover"><thead><tr><th></th><th>device</th><th>path</th><th>size (GiB)</th></tr></thead><tbody>'; +            var listHtml = '<table class="table table- hover"><thead><tr><th></th><th>Device</th><th>Path</th><th>Size (GiB)</th></tr></thead><tbody>';              valid_types = ['part', 'disk', 'mpath'];              $.each(data, function(index, value) {                  if (valid_types.indexOf(value.type) !== -1) { diff --git a/ui/pages/i18n.json.tmpl b/ui/pages/i18n.json.tmpl index 7beee19..c67e9e8 100644 --- a/ui/pages/i18n.json.tmpl +++ b/ui/pages/i18n.json.tmpl @@ -103,10 +103,6 @@      "KCHPOOL6008M": "$_("Failed to load iSCSI targets.")",      "KCHPOOL6009M": "$_("Would you like to continue?")",      "KCHPOOL6010M": "$_("This will permanently delete the following storage volumes: %1")", - -    "KCHPOOL6005E": "$_("Invalid NFS mount path.")", -    "KCHPOOL6006E": "$_("No logical device selected.")", -    "KCHPOOL6009E": "$_("This is not a valid Server Name or IP. Please, modify it.")",      "KCHPOOL6011M": "$_("No available partitions found.")",      "KCHPOOL6012M": "$_("The %1 storage pool is not persistent. Instead of deactivate, this action will permanently delete it. Would you like to continue?")",      "KCHPOOL6013M": "$_("Unable to retrieve partitions information.")", @@ -115,6 +111,11 @@      "KCHPOOL6016M": "$_("No LVM found in the system.")",      "KCHPOOL6017M": "$_("This will permanently wipe the following storage volumes: %1")",      "KCHPOOL6018M": "$_("Wipe Confirmation")", +    "KCHPOOL6019M": "$_("Select one or more partitions to be added to the logical pool %1:")", + +    "KCHPOOL6005E": "$_("Invalid NFS mount path.")", +    "KCHPOOL6006E": "$_("No logical device selected.")", +    "KCHPOOL6009E": "$_("This is not a valid Server Name or IP. Please, modify it.")",      "KCHVMSTOR0001E": "$_("CDROM path needs to be a valid local/remote path and cannot be blank.")",      "KCHVMSTOR0002E": "$_("Disk pool or volume cannot be blank.")", diff --git a/ui/pages/tabs/storage.html.tmpl b/ui/pages/tabs/storage.html.tmpl index 92d9b75..4215d55 100644 --- a/ui/pages/tabs/storage.html.tmpl +++ b/ui/pages/tabs/storage.html.tmpl @@ -74,21 +74,21 @@              <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"> +                        <div class="modal-header">                              <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria- hidden="true">&times;</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> +                            <h4 class="modal-title" id="logicalPoolExtendLabel">$_("Extending logical pool")</h4> +                        </div> +                        <div class="modal-body"> +                            <div class="host-partition"> +                                <span class="wok-loading- icon"></span><span>$_("Looking for available partitions ...")</span> +                            </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 class="wok-mask"> @@ -200,17 +200,16 @@      </div>  </li>  </script> -<script id="logicalPoolExtendTmpl" type="html/text"> -    <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 id="partitionTmpl" type="html/text"> +    <tr> +        <td><input type="checkbox" class="wok-checkbox" id="{name}" value="{path}" name="devices"><label for="{name}"></label></td> +        <td>{name}</td> +        <td>{path}</td> +        <td>{size}</td> +    </tr>  </script> +  <script>      kimchi.storage_main();  </script>