proxmox-backup/www/NavigationTree.js

Ext.define('PBS.store.NavigationStore', {
    extend: 'Ext.data.TreeStore',

    storeId: 'NavigationStore',

    root: {
	expanded: true,
	children: [
	    {
		text: gettext('Dashboard'),
		iconCls: 'fa fa-tachometer',
		path: 'pbsDashboard',
		leaf: true
	    },
	    {
		text: gettext('Configuration'),
		iconCls: 'fa fa-gears',
		path: 'pbsSystemConfiguration',
		expanded: true,
		children: [
		    {
			text: gettext('User Management'),
			iconCls: 'fa fa-user',
			path: 'pbsUserView',
			leaf: true
		    },
		    {
			text: gettext('Permissions'),
			iconCls: 'fa fa-unlock',
			path: 'pbsACLView',
			leaf: true
		    },
		    {
			text: gettext('Remotes'),
			iconCls: 'fa fa-server',
			path: 'pbsRemoteView',
			leaf: true,
		    },
		    {
			text: gettext('Sync Jobs'),
			iconCls: 'fa fa-refresh',
			path: 'pbsSyncJobView',
			leaf: true,
		    },
		    {
			text: gettext('Subscription'),
			iconCls: 'fa fa-support',
			path: 'pbsSubscription',
			leaf: true
		    }
		]
	    },
	    {
		text: gettext('Administration'),
		iconCls: 'fa fa-wrench',
		path: 'pbsServerAdministration',
		expanded: true,
		leaf: false,
		children: [
		    {
			text: gettext('Disks'),
			iconCls: 'fa fa-hdd-o',
			path: 'pmxDiskList',
			leaf: false,
			children: [
			    {
				text: Proxmox.Utils.directoryText,
				iconCls: 'fa fa-folder',
				path: 'pbsDirectoryList',
				leaf: true,
			    },
			]
		    }
		]
	    },
	    {
		text: gettext('Data Store'),
		iconCls: 'fa fa-archive',
		path: 'pbsDataStoreConfig',
		expanded: true,
		leaf: false
	    },
	]
    }
});

Ext.define('PBS.view.main.NavigationTree', {
    extend: 'Ext.list.Tree',
    xtype: 'navigationtree',

    controller: {
	xclass: 'Ext.app.ViewController',

	init: function(view) {

	    view.rstore = Ext.create('Proxmox.data.UpdateStore', {
		autoStart: true,
		interval: 15 * 1000,
		storeid: 'pbs-datastore-list',
		model: 'pbs-datastore-list'
	    });

	    view.rstore.on('load', this.onLoad, this);
	    view.on('destroy', view.rstore.stopUpdate);
	},

	onLoad: function(store, records, success) {
	    if (!success) return;
	    var view = this.getView();

	    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;
	    });

	    var list = root.findChild('path', 'pbsDataStoreConfig', false);
	    var length = records.length;
	    var lookup_hash = {};
	    for (var i = 0; i < length; i++) {
		var name = records[i].id;
		lookup_hash[name] = true;
		if (!list.findChild('text', name, false)) {
		    list.appendChild({
			text: name,
			path: `DataStore-${name}`,
			iconCls: 'fa fa-database',
			leaf: true
		    });
		}
	    }

	    var erase_list = [];
	    list.eachChild(function(node) {
		var name = node.data.text;
		if (!lookup_hash[name]) {
		    erase_list.push(node);
		}
	    });

	    Ext.Array.forEach(erase_list, function(node) { node.erase(); });

	}
    },

    select: function(path) {
	var me = this;
	var item = me.getStore().findRecord('path', path, 0, false, true, true);
	me.setSelection(item);
    },

    animation: false,
    expanderOnly: true,
    expanderFirst: false,
    store: 'NavigationStore',
    ui: 'nav'
});