]> git.proxmox.com Git - pve-manager.git/blobdiff - www/manager6/storage/RBDEdit.js
ui: eslint: fix various spacing related issues
[pve-manager.git] / www / manager6 / storage / RBDEdit.js
index aff23ddefc506449f639d8e5f7311c8257a4ee25..be29dc8a57952b05e2110f1f426fbd3c4d716c7a 100644 (file)
-Ext.define('PVE.storage.RBDInputPanel', {
-    extend: 'PVE.panel.InputPanel',
+Ext.define('PVE.storage.Ceph.Model', {
+    extend: 'Ext.app.ViewModel',
+    alias: 'viewmodel.cephstorage',
 
-    onGetValues: function(values) {
-       var me = this;
+    data: {
+       pveceph: true,
+       pvecephPossible: true,
+    },
+});
 
-       if (me.isCreate) {
-           values.type = 'rbd';
-       } else {
-           delete values.storage;
+Ext.define('PVE.storage.Ceph.Controller', {
+    extend: 'PVE.controller.StorageEdit',
+    alias: 'controller.cephstorage',
+
+    control: {
+       '#': {
+           afterrender: 'queryMonitors',
+       },
+       'textfield[name=username]': {
+           disable: 'resetField',
+       },
+       'displayfield[name=monhost]': {
+           enable: 'queryMonitors',
+       },
+       'textfield[name=monhost]': {
+           disable: 'resetField',
+           enable: 'resetField',
+       },
+    },
+    resetField: function(field) {
+       field.reset();
+    },
+    queryMonitors: function(field, newVal, oldVal) {
+       // we get called with two signatures, the above one for a field
+       // change event and the afterrender from the view, this check only
+       // can be true for the field change one and omit the API request if
+       // pveceph got unchecked - as it's not needed there.
+       if (field && !newVal && oldVal) {
+           return;
+       }
+       var view = this.getView();
+       var vm = this.getViewModel();
+       if (!(view.isCreate || vm.get('pveceph'))) {
+           return; // only query on create or if editing a pveceph store
        }
 
-       values.disable = values.enable ? 0 : 1;
-       delete values.enable;
+       var monhostField = this.lookupReference('monhost');
+
+       Proxmox.Utils.API2Request({
+           url: '/api2/json/nodes/localhost/ceph/mon',
+           method: 'GET',
+           scope: this,
+           callback: function(options, success, response) {
+               var data = response.result.data;
+               if (response.status === 200) {
+                   if (data.length > 0) {
+                       var monhost = Ext.Array.pluck(data, 'name').sort().join(',');
+                       monhostField.setValue(monhost);
+                       monhostField.resetOriginalValue();
+                       if (view.isCreate) {
+                           vm.set('pvecephPossible', true);
+                       }
+                   } else {
+                       vm.set('pveceph', false);
+                   }
+               } else {
+                   vm.set('pveceph', false);
+                   vm.set('pvecephPossible', false);
+               }
+           },
+       });
+    },
+});
+
+Ext.define('PVE.storage.RBDInputPanel', {
+    extend: 'PVE.panel.StorageBase',
+    controller: 'cephstorage',
+
+    onlineHelp: 'ceph_rados_block_devices',
 
-       return values;
+    viewModel: {
+       type: 'cephstorage',
     },
 
-    initComponent : function() {
+    setValues: function(values) {
+       if (values.monhost) {
+           this.viewModel.set('pveceph', false);
+           this.lookupReference('pvecephRef').setValue(false);
+           this.lookupReference('pvecephRef').resetOriginalValue();
+       }
+       this.callParent([values]);
+    },
+
+    initComponent: function() {
        var me = this;
 
        if (!me.nodename) {
            me.nodename = 'localhost';
        }
+       me.type = 'rbd';
 
-       me.column1 = [
-           {
-               xtype: me.isCreate ? 'textfield' : 'displayfield',
-               name: 'storage',
-               value: me.storageId || '',
-               fieldLabel: 'ID',
-               vtype: 'StorageId',
-               allowBlank: false
-           }
-       ];
+       me.column1 = [];
 
-       if (me.pveceph) {
-           me.column1.push(
-               {
-                   xtype: me.isCreate ? 'pveCephPoolSelector' : 'displayfield',
-                   nodename: me.nodename,
-                   name: 'pool',
-                   fieldLabel: gettext('Pool'),
-                   allowBlank: false
-               }
-           );
-       } else {
-           me.column1.push(
-               {
-                   xtype: me.isCreate ? 'textfield' : 'displayfield',
-                   name: 'pool',
-                   value: 'rbd',
-                   fieldLabel: gettext('Pool'),
-                   allowBlank: false
+       if (me.isCreate) {
+           me.column1.push({
+               xtype: 'pveCephPoolSelector',
+               nodename: me.nodename,
+               name: 'pool',
+               bind: {
+                   disabled: '{!pveceph}',
+                   submitValue: '{pveceph}',
+                   hidden: '{!pveceph}',
                },
-               {
-                   xtype: me.isCreate ? 'textfield' : 'displayfield',
-                   name: 'monhost',
-                   vtype: 'HostList',
-                   value: '',
-                   fieldLabel: 'Monitor(s)',
-                   allowBlank: false
+               fieldLabel: gettext('Pool'),
+               allowBlank: false,
+           }, {
+               xtype: 'textfield',
+               name: 'pool',
+               value: 'rbd',
+               bind: {
+                   disabled: '{pveceph}',
+                   submitValue: '{!pveceph}',
+                   hidden: '{pveceph}',
                },
-               {
-                   xtype: me.isCreate ? 'textfield' : 'displayfield',
-                   name: 'username',
-                   value: me.isCreate ? 'admin': '',
-                   fieldLabel: gettext('User name'),
-                   allowBlank: true
-               }
-           );
+               fieldLabel: gettext('Pool'),
+               allowBlank: false,
+           });
+       } else {
+           me.column1.push({
+               xtype: 'displayfield',
+               nodename: me.nodename,
+               name: 'pool',
+               fieldLabel: gettext('Pool'),
+               allowBlank: false,
+           });
        }
 
-       // here value is an array,
-       // while before it was a string
-       /*jslint confusion: true*/
-       me.column2 = [
+       me.column1.push(
            {
-               xtype: 'proxmoxcheckbox',
-               name: 'enable',
-               checked: true,
-               uncheckedValue: 0,
-               fieldLabel: gettext('Enable')
+               xtype: 'textfield',
+               name: 'monhost',
+               vtype: 'HostList',
+               bind: {
+                   disabled: '{pveceph}',
+                   submitValue: '{!pveceph}',
+                   hidden: '{pveceph}',
+               },
+               value: '',
+               fieldLabel: 'Monitor(s)',
+               allowBlank: false,
            },
+           {
+               xtype: 'displayfield',
+               reference: 'monhost',
+               bind: {
+                   disabled: '{!pveceph}',
+                   hidden: '{!pveceph}',
+               },
+               value: '',
+               fieldLabel: 'Monitor(s)',
+           },
+           {
+               xtype: me.isCreate ? 'textfield' : 'displayfield',
+               name: 'username',
+               bind: {
+                   disabled: '{pveceph}',
+                   submitValue: '{!pveceph}',
+               },
+               value: 'admin',
+               fieldLabel: gettext('User name'),
+               allowBlank: true,
+           },
+       );
+
+       me.column2 = [
            {
                xtype: 'pveContentTypeSelector',
                cts: ['images', 'rootdir'],
@@ -89,80 +180,31 @@ Ext.define('PVE.storage.RBDInputPanel', {
                name: 'content',
                value: ['images'],
                multiSelect: true,
-               allowBlank: false
+               allowBlank: false,
            },
            {
                xtype: 'proxmoxcheckbox',
                name: 'krbd',
                uncheckedValue: 0,
-               fieldLabel: 'KRBD'
-           }
+               fieldLabel: 'KRBD',
+           },
        ];
-       /*jslint confusion: false*/
-
-       if (me.isCreate) {
-           me.column2.unshift({
-               xtype: 'pveNodeSelector',
-               name: 'nodes',
-               fieldLabel: gettext('Nodes'),
-               emptyText: gettext('All') + ' (' +
-                   gettext('No restrictions') +')',
-               multiSelect: true,
-               autoSelect: false
-           });
-       }
 
-       me.callParent();
-    }
-});
-
-Ext.define('PVE.storage.RBDEdit', {
-    extend: 'Proxmox.window.Edit',
-
-    initComponent : function() {
-       var me = this;
-
-       me.isCreate = !me.storageId;
-
-       if (me.isCreate) {
-            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.RBDInputPanel', {
-           isCreate: me.isCreate,
-           storageId: me.storageId,
-           nodename: me.nodename,
-           pveceph: me.pveceph
-       });
-
-       Ext.apply(me, {
-           subject: PVE.Utils.format_storage_type(me.pveceph?'pveceph':'rbd'),
-           isAdd: true,
-           items: [ ipanel ]
-       });
+       me.columnB = [{
+           xtype: 'proxmoxcheckbox',
+           name: 'pveceph',
+           reference: 'pvecephRef',
+           bind: {
+               disabled: '{!pvecephPossible}',
+               value: '{pveceph}',
+           },
+           checked: true,
+           uncheckedValue: 0,
+           submitValue: false,
+           hidden: !me.isCreate,
+           boxLabel: gettext('Use Proxmox VE managed hyper-converged ceph pool'),
+       }];
 
        me.callParent();
-
-        if (!me.isCreate) {
-            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);
-                }
-            });
-        }
-    }
+    },
 });