[Kimchi-devel] [PATCH] [Kimchi] [RFC] Storave Volume management UI
sguimaraes943 at gmail.com
sguimaraes943 at gmail.com
Fri May 13 21:39:28 UTC 2016
From: Samuel Guimarães <sguimaraes943 at gmail.com>
This commit adds the UI for Storage Volume management action button, filter input, gallery view and gallery / list view toggleswitch button with multi-selection enabled.
Signed-off-by: Samuel Guimarães <sguimaraes943 at gmail.com>
---
ui/css/kimchi.css | 266 +++++++++++++++++++++++++++++-------
ui/css/src/modules/_storage.scss | 287 +++++++++++++++++++++++++++++++++------
ui/js/src/kimchi.storage_main.js | 82 +++++------
ui/pages/tabs/storage.html.tmpl | 121 +++++++++++------
4 files changed, 576 insertions(+), 180 deletions(-)
diff --git a/ui/css/kimchi.css b/ui/css/kimchi.css
index 49ea39a..728f816 100644
--- a/ui/css/kimchi.css
+++ b/ui/css/kimchi.css
@@ -2183,6 +2183,8 @@ body.wok-gallery {
}
#storage-root-container .wok-datagrid-body .handle {
+ -webkit-user-select: none;
+ -moz-user-select: none;
user-select: none;
position: relative;
}
@@ -2226,69 +2228,38 @@ body.wok-gallery {
}
#storage-root-container .volumes .volumeslist {
- padding: 11px;
+ padding: 22px;
max-height: 285px;
min-height: 136px;
+ max-height: 505px;
overflow: auto;
}
-#storage-root-container .volumes .volume-box {
- background: #fff;
- padding: 4px 20px;
- margin: 11px;
- display: inline-block;
- width: 409px;
- height: 110px;
+#storage-root-container .volumes .volumeslist .row {
+ font-size: 0;
+ margin-bottom: 22px;
}
-#storage-root-container .volumes .volume-title {
- height: 46px;
- width: 100%;
- border-bottom: 1px solid #ccc;
- position: relative;
+#storage-root-container .volumes .volumeslist .filter {
+ width: 514px;
}
-#storage-root-container .volumes .volume-name {
- font-size: 15pt;
- font-weight: 300;
- width: 274px;
- line-height: 46px;
+#storage-root-container .volumes .pool-action {
display: inline-block;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
-}
-
-#storage-root-container .volumes .volume-utilization {
- vertical-align: top;
- text-align: right;
- display: inline-block;
- width: 90px;
- height: 46px;
- line-height: 46px;
+ margin-right: 20px;
}
#storage-root-container .volumes .volume-icon {
display: inline-block;
+ vertical-align: middle;
width: 27px;
- height: 46px;
- line-height: 46px;
+ height: 27px;
+ line-height: 27px;
background-repeat: no-repeat;
background-position: 50%;
background-color: transparent;
}
-#storage-root-container .volumes .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;
-}
-
#storage-root-container .volumes .volume-icon.icon-high {
background-image: url("/images/theme-default/high.png");
}
@@ -2304,13 +2275,13 @@ body.wok-gallery {
#storage-root-container .volumes .volume-progress {
position: absolute;
margin: 0;
- width: 409px;
- top: -4px;
- left: -20px;
+ width: 407px;
+ top: 4px;
+ left: 4px;
}
#storage-root-container .volumes .volume-progress .progress-bar-outer {
- background: transparent;
+ background: #ddd;
height: 6px;
overflow: hidden;
width: 100%;
@@ -2351,6 +2322,207 @@ body.wok-gallery {
line-height: 136px;
}
+#storage-root-container .volumes .wok-gallery .volume-inline-progress {
+ display: none;
+}
+
+#storage-root-container .volumes .wok-gallery.wok-datagrid {
+ background: transparent;
+ margin-top: -12px;
+}
+
+#storage-root-container .volumes .wok-gallery.wok-datagrid > .wok-datagrid-header {
+ display: none;
+}
+
+#storage-root-container .volumes .wok-gallery.wok-datagrid > .wok-datagrid-body {
+ margin-left: -3px;
+}
+
+#storage-root-container .volumes .wok-gallery.wok-datagrid .wok-datagrid-body > .wok-datagrid-row {
+ position: relative;
+ cursor: pointer;
+ background: #fff !important;
+ border: 0 !important;
+ display: inline-block !important;
+ width: 415px !important;
+ margin: 12px 4px 0;
+}
+
+#storage-root-container .volumes .wok-gallery.wok-datagrid .wok-datagrid-body > .wok-datagrid-row, #storage-root-container .volumes .wok-gallery.wok-datagrid .wok-datagrid-body > .wok-datagrid-row * {
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ user-select: none;
+}
+
+#storage-root-container .volumes .wok-gallery.wok-datagrid .wok-datagrid-body > .wok-datagrid-row.selected .volume-box-border {
+ border-color: #8cc63f;
+}
+
+#storage-root-container .volumes .wok-gallery.wok-datagrid .wok-datagrid-body > .wok-datagrid-row.selected .volume-box-inner {
+ border-color: #000;
+}
+
+#storage-root-container .volumes .wok-gallery .volume-box-outer {
+ border-radius: 3px;
+ overflow: hidden;
+}
+
+#storage-root-container .volumes .wok-gallery .volume-box-border {
+ display: block;
+ border: 3px solid transparent;
+ transition: border-color .1s ease-in-out;
+}
+
+#storage-root-container .volumes .wok-gallery .volume-box-inner {
+ padding: 0 16px;
+ width: 409px;
+ height: 110px;
+ display: flex;
+ flex-flow: row wrap;
+ justify-content: space-around;
+ border: 1px solid #fff;
+ background: #fff;
+ transition: border-color .1s ease-in-out;
+}
+
+#storage-root-container .volumes .wok-gallery span.column-name,
+#storage-root-container .volumes .wok-gallery span.column-used {
+ height: 52px;
+ line-height: 52px;
+ border-bottom: 1px solid #ccc;
+}
+
+#storage-root-container .volumes .wok-gallery span.column-name {
+ width: 303px;
+ order: 1;
+}
+
+#storage-root-container .volumes .wok-gallery span.column-used {
+ width: 72px;
+ order: 2;
+}
+
+#storage-root-container .volumes .wok-gallery span.column-name label.volume-name {
+ width: 100%;
+ height: 52px;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ display: block;
+ margin: 0;
+ padding-right: 6px;
+}
+
+#storage-root-container .volumes .wok-gallery span.column-allocated,
+#storage-root-container .volumes .wok-gallery span.column-capacity,
+#storage-root-container .volumes .wok-gallery span.column-format,
+#storage-root-container .volumes .wok-gallery span.column-type {
+ order: 3;
+ width: 72px;
+ margin-top: -5px;
+}
+
+#storage-root-container .volumes .wok-gallery span.gallery-header {
+ font-weight: 600;
+ display: block;
+}
+
+#storage-root-container .volumes .wok-list span.gallery-header {
+ display: none;
+}
+
+#storage-root-container .volumes .wok-list .volume-inline-progress {
+ vertical-align: middle;
+ display: inline-block;
+}
+
+#storage-root-container .volumes .wok-list .volume-inline-progress > span.wok-loading-icon {
+ margin-right: 0;
+}
+
+#storage-root-container .volumes .wok-list .volume-progress {
+ width: 100%;
+ top: 0px;
+ left: 0px;
+}
+
+#storage-root-container .volumes .wok-list .volume-progress .progress-bar-outer {
+ height: 3px;
+}
+
+#storage-root-container .volumes .wok-list .volume-box-inner {
+ font-size: 0;
+}
+
+#storage-root-container .volumes .wok-list.wok-datagrid > .wok-datagrid-header > span.column-name {
+ padding-left: 41px;
+}
+
+#storage-root-container .volumes .wok-list.wok-datagrid > .wok-datagrid-body > .wok-datagrid-row {
+ position: relative;
+ cursor: pointer;
+}
+
+#storage-root-container .volumes .wok-list.wok-datagrid > .wok-datagrid-body > .wok-datagrid-row.selected {
+ background: #ddd !important;
+}
+
+#storage-root-container .volumes .wok-list.wok-datagrid > .wok-datagrid-body > .wok-datagrid-row > div > div > div > span {
+ font-family: "Open Sans", Helvetica, Arial, "Lucida Grande", sans-serif;
+ line-height: 2.42857;
+ vertical-align: top;
+ font-size: 12.5pt;
+ font-weight: 400;
+}
+
+#storage-root-container .volumes .wok-list.wok-datagrid > .wok-datagrid-body > .wok-datagrid-row > div > div > div > span.column-name {
+ padding-left: 15px;
+}
+
+#storage-root-container .volumes .wok-list.wok-datagrid > .wok-datagrid-header > span,
+#storage-root-container .volumes .wok-list.wok-datagrid > .wok-datagrid-body > .wok-datagrid-row > div > div > div > span {
+ display: inline-block;
+ vertical-align: middle;
+}
+
+#storage-root-container .volumes .wok-list.wok-datagrid > .wok-datagrid-header span.column-format,
+#storage-root-container .volumes .wok-list.wok-datagrid > .wok-datagrid-body > .wok-datagrid-row > div > div > div span.column-format {
+ width: 173px;
+}
+
+#storage-root-container .volumes .wok-list.wok-datagrid > .wok-datagrid-header span.column-used,
+#storage-root-container .volumes .wok-list.wok-datagrid > .wok-datagrid-header span.column-type,
+#storage-root-container .volumes .wok-list.wok-datagrid > .wok-datagrid-header span.column-capacity,
+#storage-root-container .volumes .wok-list.wok-datagrid > .wok-datagrid-header span.column-allocated,
+#storage-root-container .volumes .wok-list.wok-datagrid > .wok-datagrid-body > .wok-datagrid-row > div > div > div span.column-used,
+#storage-root-container .volumes .wok-list.wok-datagrid > .wok-datagrid-body > .wok-datagrid-row > div > div > div span.column-type,
+#storage-root-container .volumes .wok-list.wok-datagrid > .wok-datagrid-body > .wok-datagrid-row > div > div > div span.column-capacity,
+#storage-root-container .volumes .wok-list.wok-datagrid > .wok-datagrid-body > .wok-datagrid-row > div > div > div span.column-allocated {
+ width: 165px;
+ text-transform: capitalize;
+}
+
+#storage-root-container .volumes .wok-list.wok-datagrid > .wok-datagrid-header > span.column-name,
+#storage-root-container .volumes .wok-list.wok-datagrid > .wok-datagrid-body > .wok-datagrid-row > div > div > div > span.column-name {
+ width: 444px;
+}
+
+#storage-root-container .volumes .wok-list.wok-datagrid > .wok-datagrid-header > span.column-name label,
+#storage-root-container .volumes .wok-list.wok-datagrid > .wok-datagrid-body > .wok-datagrid-row > div > div > div > span.column-name label {
+ padding: 0 5px 0 0;
+ margin-right: 0;
+ margin-bottom: 0;
+ font-size: inherit;
+ font-weight: inherit;
+ width: 100%;
+ display: block;
+ height: auto;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
#storage-root-container .wok-datagrid > .wok-datagrid-body > .wok-datagrid-row[data-stat="inactive"] {
color: #999 !important;
}
diff --git a/ui/css/src/modules/_storage.scss b/ui/css/src/modules/_storage.scss
index 4a9f9e1..23fbb3c 100644
--- a/ui/css/src/modules/_storage.scss
+++ b/ui/css/src/modules/_storage.scss
@@ -25,6 +25,8 @@
position: relative;
}
.handle {
+ -webkit-user-select: none;
+ -moz-user-select: none;
user-select: none;
position: relative;
}
@@ -58,66 +60,44 @@
width: 100%;
background: $navbar-default-toggle-hover-bg;
display: none;
+
> .footer {
z-index: 100;
}
+
.volumeslist {
- padding: 11px;
+ padding: 22px;
max-height: 285px;
min-height: 136px;
+ max-height: 505px;
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;
+
+ .volumeslist .row {
+ font-size: 0;
+ margin-bottom: 22px;
}
- .volume-name {
- font-size: 15pt;
- font-weight: 300;
- width: 274px;
- line-height: 46px;
- display: inline-block;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
+
+ .volumeslist .filter {
+ width: 514px;
}
- .volume-utilization {
- vertical-align: top;
- text-align: right;
+
+ .pool-action {
display: inline-block;
- width: 90px;
- height: 46px;
- line-height: 46px;
+ margin-right: 20px;
}
+
.volume-icon {
display: inline-block;
+ vertical-align: middle;
width: 27px;
- height: 46px;
- line-height: 46px;
+ height: 27px;
+ line-height: 27px;
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');
}
@@ -127,14 +107,16 @@
.volume-icon.icon-low {
background-image: url('#{$wok-icon-path}/low.png');
}
+
.volume-progress {
position: absolute;
margin: 0;
- width: 409px;
- top: -4px;
- left: -20px;
+ width: 407px;
+ top: 4px;
+ left: 4px;
+
.progress-bar-outer {
- background: transparent;
+ background: $table-bg-hover;
height: 6px;
overflow: hidden;
width: 100%;
@@ -145,6 +127,7 @@
width: 100%;
}
}
+
.volume-data {
margin: 0;
padding: 0;
@@ -168,6 +151,220 @@
text-align: center;
line-height: 136px;
}
+
+ .wok-gallery {
+
+ .volume-inline-progress {
+ display: none;
+ }
+
+ &.wok-datagrid {
+ background: transparent;
+ margin-top: -12px;
+ }
+
+ &.wok-datagrid > .wok-datagrid-header {
+ display: none;
+ }
+
+ &.wok-datagrid > .wok-datagrid-body {
+ margin-left: -3px;
+ }
+
+ &.wok-datagrid .wok-datagrid-body > .wok-datagrid-row {
+ position: relative;
+ cursor: pointer;
+ background: $body-bg !important;
+ border: 0 !important;
+ display: inline-block !important;
+ width: 415px !important;
+ margin: 12px 4px 0;
+ &, * {
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ user-select: none;
+ }
+ }
+
+ &.wok-datagrid .wok-datagrid-body > .wok-datagrid-row.selected .volume-box-border {
+ border-color: $guests-color;
+ }
+
+ &.wok-datagrid .wok-datagrid-body > .wok-datagrid-row.selected .volume-box-inner {
+ border-color: $gray-base;
+ }
+
+ .volume-box-outer {
+ border-radius: 3px;
+ overflow: hidden;
+ }
+
+ .volume-box-border {
+ display: block;
+ border: 3px solid transparent;
+ transition: border-color .1s ease-in-out
+ }
+
+ .volume-box-inner {
+ padding: 0 16px;
+ width: 409px;
+ height: 110px;
+ display: flex;
+ flex-flow: row wrap;
+ justify-content: space-around;
+ border: 1px solid #fff;
+ background: #fff;
+ transition: border-color .1s ease-in-out;
+ }
+
+ span.column-name,
+ span.column-used {
+ height: 52px;
+ line-height: 52px;
+ border-bottom: 1px solid $input-border;
+ }
+
+ span.column-name {
+ width: 303px;
+ order: 1;
+ }
+
+ span.column-used {
+ width: 72px;
+ order: 2;
+ }
+
+ span.column-name label.volume-name {
+ width: 100%;
+ height: 52px;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ display: block;
+ margin: 0;
+ padding-right: 6px;
+ }
+
+ span.column-allocated,
+ span.column-capacity,
+ span.column-format,
+ span.column-type {
+ order: 3;
+ width: 72px;
+ margin-top: -5px;
+ }
+
+ span.gallery-header {
+ font-weight: 600;
+ display: block;
+ }
+
+ }
+
+ .wok-list {
+
+ span.gallery-header {
+ display: none;
+ }
+
+ .volume-inline-progress {
+ vertical-align: middle;
+ display: inline-block;
+ }
+
+ .volume-inline-progress > span.wok-loading-icon {
+ margin-right: 0;
+ }
+
+ .volume-progress {
+ width: 100%;
+ top: 0px;
+ left: 0px;
+
+ .progress-bar-outer {
+ height: 3px;
+ }
+ }
+
+ .volume-box-inner {
+ font-size: 0;
+ }
+
+ &.wok-datagrid > .wok-datagrid-header {
+
+ > span.column-name {
+ padding-left: 41px;
+ }
+
+ }
+
+ &.wok-datagrid > .wok-datagrid-body > .wok-datagrid-row {
+ position: relative;
+ cursor: pointer;
+ }
+
+ &.wok-datagrid > .wok-datagrid-body > .wok-datagrid-row.selected {
+ background: $table-bg-hover !important;
+ }
+
+ &.wok-datagrid > .wok-datagrid-body > .wok-datagrid-row > div > div > div {
+
+ > span {
+ font-family: $font-family-sans-serif;
+ line-height: (1 + $line-height-base);
+ vertical-align: top;
+ font-size: 12.5pt;
+ font-weight: 400;
+ }
+
+ > span.column-name {
+ padding-left: 15px;
+ }
+
+ }
+
+ &.wok-datagrid > .wok-datagrid-header,
+ &.wok-datagrid > .wok-datagrid-body > .wok-datagrid-row > div > div > div {
+
+ >span {
+ display: inline-block;
+ vertical-align: middle;
+ }
+
+ span.column-format {
+ width: 173px;
+ }
+
+ span.column-used,
+ span.column-type,
+ span.column-capacity,
+ span.column-allocated {
+ width: 165px;
+ text-transform: capitalize;
+ }
+
+ > span.column-name {
+ width: 444px;
+
+ label {
+ padding: 0 5px 0 0;
+ margin-right: 0;
+ margin-bottom: 0;
+ font-size: inherit;
+ font-weight: inherit;
+ width: 100%;
+ display: block;
+ height: auto;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+ }
+ }
+
+ }
+
+
}
.wok-datagrid > .wok-datagrid-body > .wok-datagrid-row[data-stat="inactive"] {
color: $gray-light !important;
diff --git a/ui/js/src/kimchi.storage_main.js b/ui/js/src/kimchi.storage_main.js
index 5312388..1d1781f 100644
--- a/ui/js/src/kimchi.storage_main.js
+++ b/ui/js/src/kimchi.storage_main.js
@@ -65,6 +65,34 @@ kimchi.doListStoragePools = function() {
kimchi.storageBindClick = function() {
+ $('.volumes').on('click','.toggle-gallery',function(e){
+ e.preventDefault();
+ e.stopPropagation();
+ var button = $(this);
+ var volumeBlock = $(this).parent().parent().parent();
+ var text = $('span.text', button).text();
+ $(".wok-list, .wok-gallery",volumeBlock).toggleClass("wok-list wok-gallery");
+ $('span.text', button).text(text == i18n['KCHTMPL6005M'] ? i18n['KCHTMPL6004M'] : i18n['KCHTMPL6005M']);
+ });
+
+ $('.volumes').on('click','.wok-datagrid-row',function(e){
+ if (!$(e.target).is("input[type='checkbox']") && !$(e.target).is("label")) {
+ var volumeBlock = $(this);
+ var checkbox = volumeBlock.find('[name="selected-volume[]"]');
+ checkbox.trigger('click');
+ }
+ });
+
+ $('.volumes').on('change','[name="selected-volume[]"]',function(e){
+ var checkbox = $(this);
+ var volumeBlock = $(this).parent().parent().parent().parent().parent();
+ if(checkbox.is(":checked")){
+ volumeBlock.addClass('selected');
+ }else {
+ volumeBlock.removeClass('selected');
+ }
+ });
+
$('.inactive').each(function(index) {
if ('active' === $(this).data('state')) {
$(this).hide();
@@ -229,7 +257,8 @@ kimchi._generateVolumeHTML = function(volume) {
if(volume['type'] === 'kimchi-iso') {
return '';
}
- var volumeHtml = $('#volumeTmpl').html();
+ var volumeHtml = $('#volumeTmpl2').html();
+ volume.checkbox = volume.name.replace(/[`~!@#$%^&*()_|+\-=?;:'",.<>\{\}\[\]\\\/]/gi,'-'),
volume.capacityLevel = Math.round(volume.allocation / volume.capacity * 100) || 0;
if (volume.capacityLevel > 100) {
volume.capacityIcon = 'icon-high';
@@ -273,7 +302,7 @@ kimchi.doListVolumes = function(poolObj) {
return result;
};
- var volumeDiv = $('#volume' + poolName);
+ var volumeDiv = $('#volume' + poolName + ' > .wok-datagrid > .wok-datagrid-body');
$(volumeDiv).empty();
var slide = $('.volumes', poolObj);
var handleArrow = $('.arrow-down', poolObj);
@@ -312,7 +341,7 @@ kimchi.doListVolumes = function(poolObj) {
if (listHtml.length > 0) {
volumeDiv.html(listHtml);
} else {
- volumeDiv.html("<div class='pool-empty'>" + i18n['KCHPOOL6002M'] + "</div>");
+ volumeDiv.parent().parent().parent().html("<div class='pool-empty'>" + i18n['KCHPOOL6002M'] + "</div>");
}
$.each(ongoingVolumesMap, function(volumeName, task) {
@@ -329,53 +358,6 @@ kimchi.doListVolumes = function(poolObj) {
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();
});
diff --git a/ui/pages/tabs/storage.html.tmpl b/ui/pages/tabs/storage.html.tmpl
index fa51e48..8302730 100644
--- a/ui/pages/tabs/storage.html.tmpl
+++ b/ui/pages/tabs/storage.html.tmpl
@@ -102,50 +102,67 @@
</div>
</div>
<script id="storageTmpl" type="html/text">
- <div id="{name}" class="storage-li in" data-name="{name}" data-stat="{state}">
- <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 id="{name}" class="storage-li in" data-name="{name}" data-stat="{state}">
+ <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-inuse="{in_use}" 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-inuse="{in_use}" data-stat="{state}" data-name="{name}"><i class="fa fa-ban"></i>$_("Undefine")</a>
- </li>
+ <li><a href="#" class="pool-deactivate" data-inuse="{in_use}" data-stat="{state}" data-name="{name}" data-persistent="{persistent}"><i class="fa fa-minus-circle"></i>$_("Deactivate")</a></li>
+ <li><a href="#" class="pool-activate" data-stat="{state}" data-name="{name}"><i class="fa fa-power-off"></i>$_("Activate")</a></li>
+ <li><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 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 class="critical"><a href="#" class="pool-delete" data-inuse="{in_use}" data-stat="{state}" data-name="{name}"><i class="fa fa-ban"></i>$_("Undefine")</a></li>
</ul>
</div>
- </span>
</span>
- <div class="volumes">
- <div id="volume{name}" class="volumeslist" data-name="{name}" ></div>
- <div class="clear"></div>
- </div>
- </div>
+ </span>
+ <div class="volumes">
+ <div id="volume{name}" class="volumeslist" data-name="{name}">
+ <div class="row">
+ <div class="pull-left">
+ <div class="dropdown menu-flat pool-action">
+ <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><a href="#" class="volume-create"><i class="fa fa-plus-circle"></i> $_("Create")</a></li>
+ <li><a href="#" class="volume-resize"><i class="fa fa-external-link-square"></i> $_("Resize")</a></li>
+ <li><a href="#" class="volume-clone"><i class="fa fa-copy"></i> $_("Clone")</a></li>
+ <li><a href="#" class="volume-wipe"><i class="fa fa-eraser"></i> $_("Wipe")</a></li>
+ <li class="critical"><a href="#" class="volume-delete"><i class="fa fa-minus-circle"></i> $_("Delete")</a></li>
+ </ul>
+ </div>
+ <button type="button" class="btn btn-default toggle-gallery"><span class="text">$_('View Gallery')</span> <i class="fa fa-angle-right"></i><i class="fa fa-angle-right"></i><i class="fa fa-angle-right"></i></button>
+ </div>
+ <div class="pull-right">
+ <label><span class="sr-only">$_('Filter:')</span>
+ <input type="text" class="filter form-control" placeholder="$_('Filter')">
+ </label>
+ </div>
+ </div>
+ <div class="wok-datagrid wok-list">
+ <div class="wok-datagrid-header">
+ <span class="column-name">$_('Name')</span><!--
+ --><span class="column-format">$_('Format')</span><!--
+ --><span class="column-type">$_('Type')</span><!--
+ --><span class="column-used">$_('Used')</span><!--
+ --><span class="column-allocated">$_('Allocated')</span><!--
+ --><span class="column-capacity">$_('Capacity')</span>
+ </div>
+ <ul class="wok-datagrid-body">
+ </ul>
+ </div>
+ </div>
+ <div class="clear"></div>
+ </div>
+</div>
</script>
<script id="volumeTmpl" type="html/text">
<div class="volume-box" data-volume-name="{name}">
@@ -187,6 +204,34 @@
</ul>
</div>
</script>
+<script id="volumeTmpl2" type="html/text">
+<li class="wok-datagrid-row">
+ <div class="volume-progress hidden">
+ <div class="progress-bar-outer">
+ <div class="progress-bar-inner"></div>
+ </div>
+ <div class="progress-label">
+ <span class="progress-status"></span>
+ <span class="progress-transferred"></span>
+ </div>
+ </div>
+ <div class="volume-box-outer">
+ <div class="volume-box-border">
+ <div class="volume-box-inner" data-volume-name="{name}">
+ <span class="column-name" title="{name}">
+ <input type="checkbox" class="wok-checkbox" name="selected-volume[]" id="{checkbox}" value="{volume-id}">
+ <label class="volume-name" for="{checkbox}"><span class="volume-inline-progress hidden"><span class="wok-loading-icon"></span></span> {name}</label><!--
+ --></span><!--
+ --><span class="column-format"><span class="gallery-header">$_('Format')</span>{format}</span><!--
+ --><span class="column-type"><span class="gallery-header">$_('Type')</span>{type}</span><!--
+ --><span class="column-used"><span role="presentation" class="volume-icon {capacityIcon}"></span> {capacityLevel}%</span><!--
+ --><span class="column-allocated"><span class="gallery-header">$_('Allocation')</span>{allocation}</span><!--
+ --><span class="column-capacity"><span class="gallery-header">$_('Capacity')</span>{capacity}</span>
+ </div>
+ </div>
+ </div>
+</li>
+</script>
<script id="logicalPoolExtendTmpl" type="html/text">
<div>
<input type="checkbox" class="wok-checkbox" id="{name}" value="{path}" name="devices">
--
1.9.3
More information about the Kimchi-devel
mailing list