[pve-devel] [PATCH manager] add lvmthin to gui
Dominik Csapak
d.csapak at proxmox.com
Fri Feb 19 14:51:43 CET 2016
this patch adds the ability to add existing lvm thinpools to the
storage configuration via the gui
Signed-off-by: Dominik Csapak <d.csapak at proxmox.com>
---
www/manager/Makefile | 1 +
www/manager/dc/StorageView.js | 11 ++
www/manager/storage/LvmThinEdit.js | 269 +++++++++++++++++++++++++++++++++++++
3 files changed, 281 insertions(+)
create mode 100644 www/manager/storage/LvmThinEdit.js
diff --git a/www/manager/Makefile b/www/manager/Makefile
index deeb9cb..2e193bb 100644
--- a/www/manager/Makefile
+++ b/www/manager/Makefile
@@ -165,6 +165,7 @@ JSSRC= \
storage/GlusterFsEdit.js \
storage/IScsiEdit.js \
storage/LVMEdit.js \
+ storage/LvmThinEdit.js \
storage/RBDEdit.js \
storage/SheepdogEdit.js \
storage/ZFSEdit.js \
diff --git a/www/manager/dc/StorageView.js b/www/manager/dc/StorageView.js
index 4bcf3b7..636cc58 100644
--- a/www/manager/dc/StorageView.js
+++ b/www/manager/dc/StorageView.js
@@ -41,6 +41,8 @@ Ext.define('PVE.dc.StorageView', {
editor = 'PVE.storage.GlusterFsEdit';
} else if (type === 'lvm') {
editor = 'PVE.storage.LVMEdit';
+ } else if (type === 'lvmthin') {
+ editor = 'PVE.storage.LvmThinEdit';
} else if (type === 'iscsi') {
editor = 'PVE.storage.IScsiEdit';
} else if (type === 'rbd') {
@@ -124,6 +126,15 @@ Ext.define('PVE.dc.StorageView', {
}
},
{
+ text: PVE.Utils.format_storage_type('lvmthin'),
+ iconCls: 'pve-itype-icon-storage',
+ handler: function() {
+ var win = Ext.create('PVE.storage.LvmThinEdit', {});
+ win.on('destroy', reload);
+ win.show();
+ }
+ },
+ {
text: PVE.Utils.format_storage_type('nfs'),
iconCls: 'pve-itype-icon-network-server',
handler: function() {
diff --git a/www/manager/storage/LvmThinEdit.js b/www/manager/storage/LvmThinEdit.js
new file mode 100644
index 0000000..6cd6a6d
--- /dev/null
+++ b/www/manager/storage/LvmThinEdit.js
@@ -0,0 +1,269 @@
+Ext.define('PVE.storage.TPoolSelector', {
+ extend: 'Ext.form.field.ComboBox',
+ alias: 'widget.pveTPSelector',
+
+ queryParam: 'vg',
+
+ doRawQuery: function() {
+ },
+
+ onTriggerClick: function() {
+ var me = this;
+
+ if (!me.queryCaching || me.lastQuery !== me.vg) {
+ me.store.removeAll();
+ }
+
+ me.allQuery = me.vg;
+
+ me.callParent();
+ },
+
+ setVG: function(myvg) {
+ var me = this;
+
+ me.vg = myvg;
+ },
+
+ initComponent : function() {
+ var me = this;
+
+ if (!me.nodename) {
+ me.nodename = 'localhost';
+ }
+
+ var store = Ext.create('Ext.data.Store', {
+ fields: [ 'lv' ],
+ proxy: {
+ type: 'pve',
+ url: '/api2/json/nodes/' + me.nodename + '/scan/lvmthin'
+ }
+ });
+
+ Ext.apply(me, {
+ store: store,
+ valueField: 'lv',
+ displayField: 'lv',
+ editable: false,
+ listConfig: {
+ loadingText: gettext('Scanning...'),
+ listeners: {
+ // hack: call setHeight to show scroll bars correctly
+ refresh: function(list) {
+ var lh = PVE.Utils.gridLineHeigh();
+ var count = store.getCount();
+ list.setHeight(lh * ((count > 10) ? 10 : count));
+ }
+ }
+ }
+ });
+
+ me.callParent();
+ }
+});
+
+Ext.define('PVE.storage.BaseVGSelector', {
+ extend: 'Ext.form.field.ComboBox',
+ alias: 'widget.pveBaseVGSelector',
+
+ initComponent : function() {
+ var me = this;
+
+ if (!me.nodename) {
+ me.nodename = 'localhost';
+ }
+
+ var store = Ext.create('Ext.data.Store', {
+ autoLoad: {},
+ fields: [ 'vg', 'size', 'free'],
+ proxy: {
+ type: 'pve',
+ url: '/api2/json/nodes/' + me.nodename + '/scan/lvm'
+ }
+ });
+
+ Ext.apply(me, {
+ store: store,
+ valueField: 'vg',
+ displayField: 'vg',
+ queryMode: 'local',
+ editable: false,
+ listConfig: {
+ loadingText: gettext('Scanning...'),
+ listeners: {
+ // hack: call setHeight to show scroll bars correctly
+ refresh: function(list) {
+ var lh = PVE.Utils.gridLineHeigh();
+ var count = store.getCount();
+ list.setHeight(lh * ((count > 10) ? 10 : count));
+ }
+ }
+ }
+ });
+
+ me.callParent();
+ }
+});
+
+Ext.define('PVE.storage.LvmThinInputPanel', {
+ extend: 'PVE.panel.InputPanel',
+
+ onGetValues: function(values) {
+ var me = this;
+
+ if (me.create) {
+ values.type = 'lvmthin';
+ } else {
+ delete values.storage;
+ }
+
+ values.disable = values.enable ? 0 : 1;
+ delete values.enable;
+
+ return values;
+ },
+
+ initComponent : function() {
+ var me = this;
+
+ me.column1 = [
+ {
+ xtype: me.create ? 'textfield' : 'displayfield',
+ name: 'storage',
+ height: 22, // hack: set same height as text fields
+ value: me.storageId || '',
+ fieldLabel: 'ID',
+ vtype: 'StorageId',
+ submitValue: !!me.create,
+ allowBlank: false
+ }
+ ];
+
+ var vgnameField = Ext.createWidget(me.create ? 'textfield' : 'displayfield', {
+ height: 22, // hack: set same height as text fields
+ name: 'vgname',
+ hidden: !!me.create,
+ disabled: !!me.create,
+ value: '',
+ fieldLabel: gettext('Volume group'),
+ allowBlank: false
+ });
+
+ var thinpoolField = Ext.createWidget(me.create ? 'textfield' : 'displayfield', {
+ height: 22, // hack: set same height as text fields
+ name: 'thinpool',
+ hidden: !!me.create,
+ disabled: !!me.create,
+ value: '',
+ fieldLabel: gettext('Thin Pool'),
+ allowBlank: false
+ });
+
+ if (me.create) {
+ var vgField = Ext.create('PVE.storage.TPoolSelector', {
+ name: 'thinpool',
+ fieldLabel: gettext('Thin Pool'),
+ allowBlank: false
+ });
+
+ me.column1.push({
+ xtype: 'pveBaseVGSelector',
+ name: 'vgname',
+ fieldLabel: gettext('Volume Group'),
+ listeners: {
+ change: function(f, value) {
+ if (me.create) {
+ vgField.setVG(value);
+ vgField.setValue('');
+ }
+ }
+ }
+ });
+
+ me.column1.push(vgField);
+ }
+
+ me.column1.push(vgnameField);
+
+ me.column1.push(thinpoolField);
+
+ me.column1.push({
+ xtype: 'pveContentTypeSelector',
+ cts: ['images', 'rootdir'],
+ fieldLabel: gettext('Content'),
+ name: 'content',
+ value: ['images', 'rootdir'],
+ multiSelect: true,
+ allowBlank: false
+ });
+
+ me.column2 = [
+ {
+ xtype: 'PVE.form.NodeSelector',
+ name: 'nodes',
+ fieldLabel: gettext('Nodes'),
+ emptyText: gettext('All') + ' (' +
+ gettext('No restrictions') +')',
+ multiSelect: true,
+ autoSelect: false
+ },
+ {
+ xtype: 'pvecheckbox',
+ name: 'enable',
+ checked: true,
+ uncheckedValue: 0,
+ fieldLabel: gettext('Enable')
+ }
+ ];
+
+ me.callParent();
+ }
+});
+
+Ext.define('PVE.storage.LvmThinEdit', {
+ extend: 'PVE.window.Edit',
+
+ initComponent : function() {
+ var me = this;
+
+ me.create = !me.storageId;
+
+ if (me.create) {
+ me.url = '/api2/extjs/storage';
+ me.method = 'POST';
+ } else {
+ me.url = '/api2/extjs/storage/' + me.storageId;
+ me.method = 'PUT';
+ }
+
+ var ipanel = Ext.create('PVE.storage.LvmThinInputPanel', {
+ create: me.create,
+ storageId: me.storageId
+ });
+
+ Ext.apply(me, {
+ subject: PVE.Utils.format_storage_type('lvmthin'),
+ isAdd: true,
+ items: [ ipanel ]
+ });
+
+ me.callParent();
+
+ if (!me.create) {
+ me.load({
+ success: function(response, options) {
+ var values = response.result.data;
+ var ctypes = values.content || '';
+
+ values.content = ctypes.split(',');
+
+ if (values.nodes) {
+ values.nodes = values.nodes.split(',');
+ }
+ values.enable = values.disable ? 0 : 1;
+ ipanel.setValues(values);
+ }
+ });
+ }
+ }
+});
--
2.1.4
More information about the pve-devel
mailing list