ui: NavigationTree: add 'Add Datastore' button below datastore list

and make 'Datastore' unclickable

since we have all options and information on the relevant datastore panels,
we do not need a datastore config anymore (besides the creation,
which we add here)

this also fixes the sorted insertion and removal of new/old datastores

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
This commit is contained in:
Dominik Csapak 2020-10-27 16:20:09 +01:00 committed by Thomas Lamprecht
parent 028d0a1352
commit 7ece65a01e
3 changed files with 54 additions and 241 deletions

View File

@ -17,7 +17,6 @@ JSSRC= \
config/ACLView.js \
config/SyncView.js \
config/VerifyView.js \
config/DataStoreConfig.js \
window/UserEdit.js \
window/UserPassword.js \
window/VerifyJobEdit.js \

View File

@ -1,3 +1,13 @@
Ext.define('pbs-datastore-list', {
extend: 'Ext.data.Model',
fields: ['name', 'comment'],
proxy: {
type: 'proxmox',
url: "/api2/json/admin/datastore",
},
idProperty: 'store',
});
Ext.define('PBS.store.NavigationStore', {
extend: 'Ext.data.TreeStore',
@ -76,9 +86,18 @@ Ext.define('PBS.store.NavigationStore', {
{
text: gettext('Datastore'),
iconCls: 'fa fa-archive',
path: 'pbsDataStoreConfig',
id: 'datastores',
expanded: true,
expandable: false,
leaf: false,
children: [
{
text: gettext('Add Datastore'),
iconCls: 'fa fa-plus-circle',
leaf: true,
id: 'addbutton',
},
],
},
],
},
@ -110,21 +129,23 @@ Ext.define('PBS.view.main.NavigationTree', {
let root = view.getStore().getRoot();
// FIXME: newly added always get appended to the end..
records.sort((a, b) => {
if (a.id > b.id) return 1;
if (a.id < b.id) return -1;
return 0;
});
records.sort((a, b) => a.id.localeCompare(b.id));
var list = root.findChild('path', 'pbsDataStoreConfig', false);
var list = root.findChild('id', 'datastores', false);
var length = records.length;
var lookup_hash = {};
for (var i = 0; i < length; i++) {
let j = 0;
for (let i = 0; i < length; i++) {
let name = records[i].id;
lookup_hash[name] = true;
if (!list.findChild('text', name, false)) {
list.appendChild({
while (name.localeCompare(list.getChildAt(j).data.text) > 0 &&
(j + 1) < list.childNodes.length) {
j++;
}
if (list.getChildAt(j).data.text.localeCompare(name) !== 0) {
list.insertChild(j, {
text: name,
path: `DataStore-${name}`,
iconCls: 'fa fa-database',
@ -136,12 +157,32 @@ Ext.define('PBS.view.main.NavigationTree', {
var erase_list = [];
list.eachChild(function(node) {
let name = node.data.text;
if (!lookup_hash[name]) {
if (!lookup_hash[name] && node.data.id !== 'addbutton') {
erase_list.push(node);
}
});
Ext.Array.forEach(erase_list, function(node) { node.erase(); });
Ext.Array.forEach(erase_list, function(node) { list.removeChild(node, true); });
},
},
listeners: {
itemclick: function(tl, info) {
if (info.node.data.id === 'datastores') {
return false;
}
if (info.node.data.id === 'addbutton') {
let me = this;
Ext.create('PBS.DataStoreEdit', {
listeners: {
destroy: function() {
me.rstore.reload();
},
},
}).show();
return false;
}
return true;
},
},

View File

@ -1,227 +0,0 @@
Ext.define('pbs-datastore-list', {
extend: 'Ext.data.Model',
fields: ['name', 'comment'],
proxy: {
type: 'proxmox',
url: "/api2/json/admin/datastore",
},
idProperty: 'store',
});
Ext.define('pbs-data-store-config', {
extend: 'Ext.data.Model',
fields: [
'name', 'path', 'comment', 'gc-schedule', 'prune-schedule',
'keep-last', 'keep-hourly', 'keep-daily',
'keep-weekly', 'keep-monthly', 'keep-yearly',
],
proxy: {
type: 'proxmox',
url: "/api2/json/config/datastore",
},
idProperty: 'name',
});
Ext.define('PBS.DataStoreConfig', {
extend: 'Ext.grid.GridPanel',
alias: 'widget.pbsDataStoreConfig',
title: gettext('Datastore Configuration'),
controller: {
xclass: 'Ext.app.ViewController',
createDataStore: function() {
let me = this;
Ext.create('PBS.DataStoreEdit', {
listeners: {
destroy: function() {
me.reload();
},
},
}).show();
},
editDataStore: function() {
let me = this;
let view = me.getView();
let selection = view.getSelection();
if (selection.length < 1) return;
let name = encodeURIComponent(selection[0].data.name);
Ext.create('PBS.DataStoreEdit', {
name: name,
listeners: {
destroy: function() {
me.reload();
},
},
}).show();
},
onVerify: function() {
var view = this.getView();
let rec = view.selModel.getSelection()[0];
if (!(rec && rec.data)) return;
let data = rec.data;
Proxmox.Utils.API2Request({
url: `/admin/datastore/${data.name}/verify`,
method: 'POST',
failure: function(response) {
Ext.Msg.alert(gettext('Error'), response.htmlStatus);
},
success: function(response, options) {
Ext.create('Proxmox.window.TaskViewer', {
upid: response.result.data,
}).show();
},
});
},
garbageCollect: function() {
let me = this;
let view = me.getView();
let selection = view.getSelection();
if (selection.length < 1) return;
let name = encodeURIComponent(selection[0].data.name);
Proxmox.Utils.API2Request({
url: `/admin/datastore/${name}/gc`,
method: 'POST',
failure: function(response) {
Ext.Msg.alert(gettext('Error'), response.htmlStatus);
},
success: function(response, options) {
Ext.create('Proxmox.window.TaskViewer', {
upid: response.result.data,
}).show();
},
});
},
reload: function() { this.getView().getStore().rstore.load(); },
init: function(view) {
Proxmox.Utils.monStoreErrors(view, view.getStore().rstore);
},
},
store: {
type: 'diff',
autoDestroy: true,
autoDestroyRstore: true,
sorters: 'name',
rstore: {
type: 'update',
storeid: 'pbs-data-store-config',
model: 'pbs-data-store-config',
autoStart: true,
interval: 10000,
},
},
tbar: [
{
xtype: 'proxmoxButton',
selModel: false,
text: gettext('Create'),
handler: 'createDataStore',
},
{
xtype: 'proxmoxButton',
text: gettext('Edit'),
disabled: true,
handler: 'editDataStore',
},
// remove_btn
'-',
{
xtype: 'proxmoxButton',
text: gettext('Verify'),
disabled: true,
handler: 'onVerify',
},
{
xtype: 'proxmoxButton',
text: gettext('Start GC'),
disabled: true,
handler: 'garbageCollect',
},
],
columns: [
{
header: gettext('Name'),
sortable: true,
dataIndex: 'name',
flex: 1,
},
{
header: gettext('Path'),
sortable: true,
dataIndex: 'path',
flex: 1,
},
{
header: gettext('GC Schedule'),
sortable: false,
width: 120,
dataIndex: 'gc-schedule',
},
{
header: gettext('Prune Schedule'),
sortable: false,
width: 120,
dataIndex: 'prune-schedule',
},
{
header: gettext('Keep'),
columns: [
{
text: gettext('Last'),
dataIndex: 'keep-last',
width: 70,
},
{
text: gettext('Hourly'),
dataIndex: 'keep-hourly',
width: 70,
},
{
text: gettext('Daily'),
dataIndex: 'keep-daily',
width: 70,
},
{
text: gettext('Weekly'),
dataIndex: 'keep-weekly',
width: 70,
},
{
text: gettext('Monthly'),
dataIndex: 'keep-monthly',
width: 70,
},
{
text: gettext('Yearly'),
dataIndex: 'keep-yearly',
width: 70,
},
],
},
{
header: gettext('Comment'),
sortable: false,
dataIndex: 'comment',
renderer: Ext.String.htmlEncode,
flex: 2,
},
],
listeners: {
activate: 'reload',
itemdblclick: 'editDataStore',
},
});