[Kimchi-devel] [PATCH 09/10] [new-ui] Storage tab
sguimaraes943 at gmail.com
sguimaraes943 at gmail.com
Tue Nov 10 21:17:38 UTC 2015
From: samhenri <samuel.guimaraes at eldorado.org.br>
Signed-off-by: samhenri <samuel.guimaraes at 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
More information about the Kimchi-devel
mailing list