From mboxrd@z Thu Jan 1 00:00:00 1970 Return-Path: <pve-devel-bounces@lists.proxmox.com> Received: from firstgate.proxmox.com (firstgate.proxmox.com [212.224.123.68]) by lore.proxmox.com (Postfix) with ESMTPS id 6D7F51FF15C for <inbox@lore.proxmox.com>; Fri, 4 Apr 2025 16:54:42 +0200 (CEST) Received: from firstgate.proxmox.com (localhost [127.0.0.1]) by firstgate.proxmox.com (Proxmox) with ESMTP id A0928350C4; Fri, 4 Apr 2025 16:54:15 +0200 (CEST) From: Aaron Lauterer <a.lauterer@proxmox.com> To: pve-devel@lists.proxmox.com Date: Fri, 4 Apr 2025 16:53:36 +0200 Message-Id: <20250404145339.1067261-4-a.lauterer@proxmox.com> X-Mailer: git-send-email 2.39.5 In-Reply-To: <20250404145339.1067261-1-a.lauterer@proxmox.com> References: <20250404145339.1067261-1-a.lauterer@proxmox.com> MIME-Version: 1.0 X-SPAM-LEVEL: Spam detection results: 0 AWL -0.032 Adjusted score from AWL reputation of From: address BAYES_00 -1.9 Bayes spam probability is 0 to 1% DMARC_MISSING 0.1 Missing DMARC policy KAM_DMARC_STATUS 0.01 Test Rule for DKIM or SPF Failure with Strict Alignment SPF_HELO_NONE 0.001 SPF: HELO does not publish an SPF Record SPF_PASS -0.001 SPF: sender matches SPF record Subject: [pve-devel] [PATCH manager v3 3/6] ui: ceph pool: add rbd namespace panel X-BeenThere: pve-devel@lists.proxmox.com X-Mailman-Version: 2.1.29 Precedence: list List-Id: Proxmox VE development discussion <pve-devel.lists.proxmox.com> List-Unsubscribe: <https://lists.proxmox.com/cgi-bin/mailman/options/pve-devel>, <mailto:pve-devel-request@lists.proxmox.com?subject=unsubscribe> List-Archive: <http://lists.proxmox.com/pipermail/pve-devel/> List-Post: <mailto:pve-devel@lists.proxmox.com> List-Help: <mailto:pve-devel-request@lists.proxmox.com?subject=help> List-Subscribe: <https://lists.proxmox.com/cgi-bin/mailman/listinfo/pve-devel>, <mailto:pve-devel-request@lists.proxmox.com?subject=subscribe> Reply-To: Proxmox VE development discussion <pve-devel@lists.proxmox.com> Content-Type: text/plain; charset="us-ascii" Content-Transfer-Encoding: 7bit Errors-To: pve-devel-bounces@lists.proxmox.com Sender: "pve-devel" <pve-devel-bounces@lists.proxmox.com> This needs a bit of a rework of the Ceph Pool panel because we want to have it right next/below to the pool grid. Additionally we want to en-/disable it if the select pool has RBD as application enabled. Therefore we introduce a new small panel (Ceph.PoolView) that holds the pool and namespace grid. This also means that we need to redirect the submenu in Config.js to use the new intermediate Ceph.PoolView panel instead of the pool grid directly. Signed-off-by: Aaron Lauterer <a.lauterer@proxmox.com> --- changes since v2: * make new PoolView declarative * add interface to pveNodeCephRbdNamespacelist that handles changes to the pool name instead of doing that in detail from the pveNodeCephPoolList grid. * switch to basic extjs.data.Store * some smaller bug and style fixes that were reported v1: none www/manager6/ceph/Pool.js | 237 +++++++++++++++++++++++++++++++++++- www/manager6/node/Config.js | 3 +- 2 files changed, 238 insertions(+), 2 deletions(-) diff --git a/www/manager6/ceph/Pool.js b/www/manager6/ceph/Pool.js index c7e5e480..f4ca05d7 100644 --- a/www/manager6/ceph/Pool.js +++ b/www/manager6/ceph/Pool.js @@ -1,3 +1,56 @@ +Ext.define('PVE.node.Ceph.PoolView', { + extend: 'Ext.panel.Panel', + alias: 'widget.pveNodeCephPoolView', + mixins: ['Proxmox.Mixin.CBind'], + + onlineHelp: 'pve_ceph_pools', + scrollable: 'y', + + referenceHolder: true, + + cbindData: function() { + let me = this; + return { + nodename: me.nodename, + }; + }, + + layout: 'border', + + items: [ + { + xtype: 'pveNodeCephPoolList', + region: 'center', + border: 'false', + cbind: { + nodename: '{nodename}', + }, + listeners: { + select: function(_record, item, _index) { + let me = this; + if ('rbd' in item.data.application_metadata) { + me.up().lookup('pveNodeCephRbdNamespacelist').setPoolname(item.id); + } else { + me.up().lookup('pveNodeCephRbdNamespacelist').setPoolname(undefined); + } + }, + }, + }, + { + xtype: 'pveNodeCephRbdNamespacelist', + region: 'south', + height: '50%', + border: false, + disabled: true, + reference: 'pveNodeCephRbdNamespacelist', + cbind: { + nodename: '{nodename}', + }, + }, + ], + +}); + Ext.define('PVE.CephPoolInputPanel', { extend: 'Proxmox.panel.InputPanel', xtype: 'pveCephPoolInputPanel', @@ -280,6 +333,8 @@ Ext.define('PVE.node.Ceph.PoolList', { onlineHelp: 'chapter_pveceph', + title: gettext('Ceph Pools'), + stateful: true, stateId: 'grid-ceph-pools', bufferedRenderer: false, @@ -413,11 +468,12 @@ Ext.define('PVE.node.Ceph.PoolList', { initComponent: function() { var me = this; - var nodename = me.pveSelNode.data.node; + var nodename = me.nodename; if (!nodename) { throw "no node name specified"; } + var sm = Ext.create('Ext.selection.RowModel', {}); var rstore = Ext.create('Proxmox.data.UpdateStore', { @@ -538,6 +594,7 @@ Ext.define('PVE.node.Ceph.PoolList', { }); me.callParent(); + me.store.rstore.load(); }, }, function() { Ext.define('ceph-pool-list', { @@ -608,3 +665,181 @@ Ext.define('PVE.form.CephRuleSelector', { }, }); + + +Ext.define('PVE.node.Ceph.RbdNamespaceList', { + extend: 'Ext.grid.GridPanel', + alias: 'widget.pveNodeCephRbdNamespacelist', + + onlineHelp: 'chapter_pveceph', + + title: gettext('RBD Namespaces'), + + emptyText: gettext('No RBD namespace configured'), + + stateful: true, + stateId: 'grid-ceph-rbd-namespaces', + bufferedRenderer: false, + + poolname: undefined, + + viewConfig: { + enableTextSelection: true, + }, + + columns: [ + { + text: gettext('Namespace'), + minWidth: 120, + flex: 2, + sortable: true, + dataIndex: 'name', + renderer: Ext.htmlEncode, + }, + ], + + setPoolname: function(poolname) { + let me = this; + if (poolname) { + me.poolname = poolname; + let ns_store = me.getStore(); + ns_store.setProxy({ + type: 'proxmox', + url: `/api2/json/nodes/${me.nodename}/ceph/pool/${me.poolname}/namespace`, + }); + ns_store.load(); + me.setDisabled(false); + } else { + me.poolname = undefined; + me.getStore().setData([]); + me.setDisabled(true); + } + }, + + initComponent: function() { + let me = this; + + let nodename = me.nodename; + if (!nodename) { + throw "no node name specified"; + } + + let sm = Ext.create('Ext.selection.RowModel', {}); + + let store = Ext.create('Ext.data.Store', { + storeid: 'ceph-rbd-namespace-list' + nodename, + model: 'ceph-rbd-namespace-list', + proxy: { + type: 'proxmox', + url: undefined, + }, + }); + + // manages the "install ceph?" overlay + PVE.Utils.monitor_ceph_installed(me, store, nodename); + + let run_editor = function() { + let rec = sm.getSelection()[0]; + if (!rec || !rec.data.pool_name) { + return; + } + Ext.create('PVE.Ceph.PoolEdit', { + title: gettext('Edit') + ': Ceph Pool', + nodename: nodename, + pool_name: rec.data.pool_name, + isErasure: rec.data.type === 'erasure', + autoShow: true, + listeners: { + destroy: () => store.load(), + }, + }); + }; + + Ext.apply(me, { + store: store, + selModel: sm, + tbar: [ + { + text: gettext('Create'), + handler: function() { + Ext.create('Proxmox.window.Edit', { + title: gettext('Create') + ': Ceph RBD Namespace', + isCreate: true, + nodename: nodename, + url: `/nodes/${nodename}/ceph/pool/${me.poolname}/namespace`, + method: 'POST', + autoShow: true, + listeners: { + destroy: () => store.load(), + }, + items: [ + { + xtype: 'textfield', + fieldLabel: gettext('Namespace'), + name: 'namespace', + emptyText: gettext('Namespace'), + }, + { + xtype: 'proxmoxcheckbox', + fieldLabel: gettext('Add as Storage'), + value: true, + name: 'add-storage', + autoEl: { + tag: 'div', + 'data-qtip': gettext('Add the new RBD namespace to the cluster storage configuration.'), + }, + }, + ], + }); + }, + }, + { + xtype: 'proxmoxButton', + text: gettext('Destroy'), + selModel: sm, + disabled: true, + handler: function() { + let rec = sm.getSelection()[0]; + if (!rec || !rec.data.name) { + return; + } + let poolname = me.poolname; + let namespace = rec.data.name; + Ext.create('Proxmox.window.SafeDestroy', { + showProgress: true, + url: `/nodes/${nodename}/ceph/pool/${poolname}/namespace`, + params: { + namespace: Ext.htmlEncode(namespace), + }, + item: { + type: 'RbdNamespace', + id: namespace, + }, + taskName: 'cephdestroyrbdnamespace', + autoShow: true, + listeners: { + destroy: () => store.load(), + }, + }); + }, + }, + ], + listeners: { + activate: () => store.startUpdate(), + destroy: () => store.stopUpdate(), + itemdblclick: run_editor, + }, + }); + + me.callParent(); + }, +}, function() { + Ext.define('ceph-rbd-namespace-list', { + extend: 'Ext.data.Model', + fields: ['name', + { name: 'name', type: 'string' }, + ], + idProperty: 'name', + }); +}); + diff --git a/www/manager6/node/Config.js b/www/manager6/node/Config.js index f4d3ff8a..db9368ad 100644 --- a/www/manager6/node/Config.js +++ b/www/manager6/node/Config.js @@ -391,10 +391,11 @@ Ext.define('PVE.node.Config', { itemId: 'ceph-cephfspanel', }, { - xtype: 'pveNodeCephPoolList', + xtype: 'pveNodeCephPoolView', title: gettext('Pools'), iconCls: 'fa fa-sitemap', groups: ['ceph'], + nodename: nodename, itemId: 'ceph-pools', }, { -- 2.39.5 _______________________________________________ pve-devel mailing list pve-devel@lists.proxmox.com https://lists.proxmox.com/cgi-bin/mailman/listinfo/pve-devel