diff --git a/www/tape/TapeInventory.js b/www/tape/TapeInventory.js index c369a393..7f9a2aa5 100644 --- a/www/tape/TapeInventory.js +++ b/www/tape/TapeInventory.js @@ -112,6 +112,7 @@ Ext.define('PBS.TapeManagement.TapeInventory', { storeid: 'proxmox-tape-tapes', model: 'pbs-model-tapes', sorters: 'label-text', + groupField: 'pool', }, tbar: [ @@ -139,18 +140,30 @@ Ext.define('PBS.TapeManagement.TapeInventory', { }, ], + features: [ + { + ftype: 'grouping', + groupHeaderTpl: [ + '{name:this.formatName} ({rows.length} Item{[values.rows.length > 1 ? "s" : ""]})', + { + formatName: function(pool) { + if (pool === "") { + return "Free (no pool assignment)"; + } else { + return pool; + } + } + } + ] + } + ], + columns: [ { text: gettext('Label'), dataIndex: 'label-text', flex: 1, }, - { - text: gettext('Pool'), - dataIndex: 'pool', - sorter: (a, b) => (a.data.pool || "").localeCompare(b.data.pool || ""), - flex: 1, - }, { text: gettext('Media Set'), dataIndex: 'media-set-name', @@ -158,6 +171,13 @@ Ext.define('PBS.TapeManagement.TapeInventory', { sorter: function(a, b) { return (a.data['media-set-ctime'] || 0) - (b.data['media-set-ctime'] || 0); }, + renderer: function(value) { + if (value === undefined) { + return "-- empty --"; + } else { + return value; + } + } }, { text: gettext('Location'),