[pve-devel] [PATCH manager v3 3/6 follow up] ui: ceph pool: add rbd namespace panel
Aaron Lauterer
a.lauterer at proxmox.com
Fri Apr 4 17:18:18 CEST 2025
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 at proxmox.com>
---
Please use this follow up instead of the original!
I forgot to remove two listeners at the end of the
pveNodeCephRbdNamespacelist component that caused problems when
navigating away from the ceph pool panel!
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 | 235 +++++++++++++++++++++++++++++++++++-
www/manager6/node/Config.js | 3 +-
2 files changed, 236 insertions(+), 2 deletions(-)
diff --git a/www/manager6/ceph/Pool.js b/www/manager6/ceph/Pool.js
index 2b41d220..8bdf041f 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,
@@ -414,11 +469,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', {
@@ -539,6 +595,7 @@ Ext.define('PVE.node.Ceph.PoolList', {
});
me.callParent();
+ me.store.rstore.load();
},
}, function() {
Ext.define('ceph-pool-list', {
@@ -609,3 +666,179 @@ 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: {
+ 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
More information about the pve-devel
mailing list