[pve-devel] [PATCH v2 manager 05/20] use separate view for each content type

[Fabian Ebner]

Organized as separate "if"s to allow changing properties easily later.

The StorageContentView now serves as a parent class, so the stateId
cannot be fixed there. Instead make each individual view stateful with a
unique stateId.

statusStore is not needed anymore, now there is a single fixed content type,
and the template and upload button are disabled depending on that type.

Signed-off-by: Fabian Ebner <f.ebner at proxmox.com>
---

Changes from v1:
    * make each individual view stateful
    * better text and icons

 www/manager6/storage/Browser.js     | 83 ++++++++++++++++++++++++++---
 www/manager6/storage/ContentView.js | 62 ++++++---------------
 2 files changed, 93 insertions(+), 52 deletions(-)

diff --git a/www/manager6/storage/Browser.js b/www/manager6/storage/Browser.js
index 7537bdf1..1e1be6bc 100644
--- a/www/manager6/storage/Browser.js
+++ b/www/manager6/storage/Browser.js
@@ -41,14 +41,83 @@ Ext.define('PVE.storage.Browser', {
 	if (caps.storage['Datastore.Allocate'] ||
 	    caps.storage['Datastore.AllocateSpace'] ||
 	    caps.storage['Datastore.Audit']) {
-	    me.insertNodes([
-		{
-		    xtype: 'pveStorageContentView',
-		    title: gettext('Content'),
-		    iconCls: 'fa fa-th',
-		    itemId: 'content'
+
+	    Proxmox.Utils.API2Request({
+		url: "/nodes/" + nodename + "/storage/" + storeid + "/status",
+		method: 'GET',
+		success: function(response, opts) {
+		    var contents = response.result.data.content.split(',');
+		    var items = [];
+
+		    if (contents.includes('backup')) {
+			items.push({
+			    xtype: 'pveStorageContentView',
+			    title: gettext('Backups'),
+			    iconCls: 'fa fa-floppy-o',
+			    itemId: 'contentBackup',
+			    content: 'backup',
+			    stateful: true,
+			    stateId: 'grid-storage-content-backup',
+			});
+		    }
+		    if (contents.includes('images')) {
+			items.push({
+			    xtype: 'pveStorageContentView',
+			    title: gettext('Disk Images'),
+			    iconCls: 'fa fa-hdd-o',
+			    itemId: 'contentImages',
+			    content: 'images',
+			    stateful: true,
+			    stateId: 'grid-storage-content-images',
+			});
+		    }
+		    if (contents.includes('iso')) {
+			items.push({
+			    xtype: 'pveStorageContentView',
+			    title: gettext('ISO Images'),
+			    iconCls: 'pve-itype-treelist-item-icon-cdrom',
+			    itemId: 'contentIso',
+			    content: 'iso',
+			    stateful: true,
+			    stateId: 'grid-storage-content-iso',
+			});
+		    }
+		    if (contents.includes('rootdir')) {
+			items.push({
+			    xtype: 'pveStorageContentView',
+			    title: gettext('Container Data'),
+			    iconCls: 'fa fa-hdd-o',
+			    itemId: 'contentRootdir',
+			    content: 'rootdir',
+			    stateful: true,
+			    stateId: 'grid-storage-content-rootdir',
+			});
+		    }
+		    if (contents.includes('snippets')) {
+			items.push({
+			    xtype: 'pveStorageContentView',
+			    title: gettext('Snippets'),
+			    iconCls: 'fa fa-file-code-o',
+			    itemId: 'contentSnippets',
+			    content: 'snippets',
+			    stateful: true,
+			    stateId: 'grid-storage-content-snippets',
+			});
+		    }
+		    if (contents.includes('vztmpl')) {
+			items.push({
+			    xtype: 'pveStorageContentView',
+			    title: gettext('Container Templates'),
+			    iconCls: 'fa fa-file-o lxc',
+			    itemId: 'contentVztmpl',
+			    content: 'vztmpl',
+			    stateful: true,
+			    stateId: 'grid-storage-content-vztmpl',
+			});
+		    }
+		    me.insertNodes(items);
 		},
-	    ]);
+	    });
 	}
 
 	if (caps.storage['Permissions.Modify']) {
diff --git a/www/manager6/storage/ContentView.js b/www/manager6/storage/ContentView.js
index 9e710d3a..eb101635 100644
--- a/www/manager6/storage/ContentView.js
+++ b/www/manager6/storage/ContentView.js
@@ -368,8 +368,6 @@ Ext.define('PVE.storage.ContentView', {
 
     alias: 'widget.pveStorageContentView',
 
-    stateful: true,
-    stateId: 'grid-storage-content',
     viewConfig: {
 	trackOver: false,
 	loadMask: false
@@ -393,13 +391,21 @@ Ext.define('PVE.storage.ContentView', {
 	    throw "no storage ID specified";
 	}
 
+	var content = me.content;
+	if (!content) {
+	    throw "no content type specified";
+	}
+
 	var baseurl = "/nodes/" + nodename + "/storage/" + storage + "/content";
 	var store = Ext.create('Ext.data.Store',{
 	    model: 'pve-storage-content',
 	    groupField: 'content',
 	    proxy: {
                 type: 'proxmox',
-		url: '/api2/json' + baseurl
+		url: '/api2/json' + baseurl,
+		extraParams: {
+		    content: content,
+		},
 	    },
 	    sorters: {
 		property: 'volid',
@@ -411,7 +417,6 @@ Ext.define('PVE.storage.ContentView', {
 
 	var reload = function() {
 	    store.load();
-	    me.statusStore.load();
 	};
 
 	Proxmox.Utils.monStoreErrors(me, store);
@@ -428,6 +433,9 @@ Ext.define('PVE.storage.ContentView', {
 		win.show();
 	    }
 	});
+	if (content !== 'vztmpl') {
+	    templateButton.setDisabled(true);
+	}
 
 	var uploadButton = Ext.create('Proxmox.button.Button', {
 	    contents : ['iso','vztmpl'],
@@ -443,6 +451,11 @@ Ext.define('PVE.storage.ContentView', {
 		win.on('destroy', reload);
 	    }
 	});
+	if (content === 'iso' || content === 'vztmpl') {
+	    uploadButton.contents = [content];
+	} else {
+	    uploadButton.setDisabled(true);
+	}
 
 	var imageRemoveButton;
 	var removeButton = Ext.create('Proxmox.button.StdRemoveButton',{
@@ -477,8 +490,6 @@ Ext.define('PVE.storage.ContentView', {
 		return false;
 	    },
 	    handler: function(btn, event, rec) {
-		me = this;
-
 		var url = baseurl + '/' + rec.data.volid;
 		var vmid = rec.data.vmid;
 
@@ -509,19 +520,11 @@ Ext.define('PVE.storage.ContentView', {
 		    item: { type: 'Image', id: vmid }
 		}).show();
 		win.on('destroy', function() {
-		    me.statusStore = Ext.create('Proxmox.data.ObjectStore', {
-			url: '/api2/json/nodes/' + nodename + '/storage/' + storage + '/status'
-		    });
 		    reload();
-
 		});
 	    }
 	});
 
-	me.statusStore = Ext.create('Proxmox.data.ObjectStore', {
-	    url: '/api2/json/nodes/' + nodename + '/storage/' + storage + '/status'
-	});
-
 	Ext.apply(me, {
 	    store: store,
 	    selModel: sm,
@@ -634,37 +637,6 @@ Ext.define('PVE.storage.ContentView', {
 	});
 
 	me.callParent();
-
-	// disable the buttons/restrict the upload window
-	// if templates or uploads are not allowed
-	me.mon(me.statusStore, 'load', function(s, records, success) {
-	    var availcontent = [];
-	    Ext.Array.each(records, function(item){
-		if (item.id === 'content') {
-		    availcontent = item.data.value.split(',');
-		}
-	    });
-	    var templ = false;
-	    var upload = false;
-	    var cts = [];
-
-	    Ext.Array.each(availcontent, function(content) {
-		if (content === 'vztmpl') {
-		    templ = true;
-		    cts.push('vztmpl');
-		} else if (content === 'iso') {
-		    upload = true;
-		    cts.push('iso');
-		}
-	    });
-
-	    if (templ !== upload) {
-		uploadButton.contents = cts;
-	    }
-
-	    templateButton.setDisabled(!templ);
-	    uploadButton.setDisabled(!upload && !templ);
-	});
     }
 }, function() {
 
-- 
2.20.1