Skip to content

Commit

Permalink
Merge pull request #31381 from nextcloud/external-config-ui-performance
Browse files Browse the repository at this point in the history 
Improve performance of external storage config UI
  • Loading branch information
@icewind1991
icewind1991 authored Mar 17, 2022
2 parents eff0fa0 + 7933de0 commit 6b4ab04
Show file tree
Hide file tree
Showing 2 changed files with 34 additions and 14 deletions.
38 changes: 29 additions & 9 deletions apps/files_external/js/settings.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -789,9 +789,10 @@ MountConfigListView.prototype = _.extend({
*
* @param {StorageConfig} storageConfig storage config to pull values from
* @param {jQuery.Deferred} onCompletion
* @param {boolean} deferAppend
* @return {jQuery} created row
*/
newStorage: function(storageConfig, onCompletion) {
newStorage: function(storageConfig, onCompletion, deferAppend) {
var mountPoint = storageConfig.mountPoint;
var backend = this._allBackends[storageConfig.backend];

Expand All @@ -803,16 +804,21 @@ MountConfigListView.prototype = _.extend({
}

// FIXME: Replace with a proper Handlebar template
var $tr = this.$el.find('tr#addMountPoint');
this.$el.find('tbody').append($tr.clone());
var $template = this.$el.find('tr#addMountPoint');
var $tr = $template.clone();
if (!deferAppend) {
$tr.insertBefore($template);
}

$tr.data('storageConfig', storageConfig);
$tr.show();
$tr.find('td.mountOptionsToggle, td.save, td.remove').removeClass('hidden');
$tr.find('td').last().removeAttr('style');
$tr.removeAttr('id');
$tr.find('select#selectBackend');
addSelect2($tr.find('.applicableUsers'), this._userListLimit);
if (!deferAppend) {
addSelect2($tr.find('.applicableUsers'), this._userListLimit);
}

if (storageConfig.id) {
$tr.data('id', storageConfig.id);
Expand Down Expand Up @@ -928,7 +934,8 @@ MountConfigListView.prototype = _.extend({
contentType: 'application/json',
success: function(result) {
var onCompletion = jQuery.Deferred();
$.each(result, function(i, storageParams) {
var $rows = $();
Object.values(result).forEach(function(storageParams) {
var storageConfig;
var isUserGlobal = storageParams.type === 'system' && self._isPersonal;
storageParams.mountPoint = storageParams.mountPoint.substr(1); // trim leading slash
Expand All @@ -938,7 +945,7 @@ MountConfigListView.prototype = _.extend({
storageConfig = new self._storageConfigClass();
}
_.extend(storageConfig, storageParams);
var $tr = self.newStorage(storageConfig, onCompletion);
var $tr = self.newStorage(storageConfig, onCompletion,true);

// userglobal storages must be at the top of the list
$tr.detach();
Expand All @@ -957,7 +964,10 @@ MountConfigListView.prototype = _.extend({
// userglobal storages do not expose configuration data
$tr.find('.configuration').text(t('files_external', 'Admin defined'));
}
$rows = $rows.add($tr);
});
addSelect2(self.$el.find('.applicableUsers'), this._userListLimit);
self.$el.find('tr#addMountPoint').before($rows);
var mainForm = $('#files_external');
if (result.length === 0 && mainForm.attr('data-can-create') === 'false') {
mainForm.hide();
Expand All @@ -979,15 +989,25 @@ MountConfigListView.prototype = _.extend({
url: OC.generateUrl(url),
contentType: 'application/json',
success: function(result) {
result = Object.values(result);
var onCompletion = jQuery.Deferred();
$.each(result, function(i, storageParams) {
var $rows = $();
result.forEach(function(storageParams) {
storageParams.mountPoint = (storageParams.mountPoint === '/')? '/' : storageParams.mountPoint.substr(1); // trim leading slash
var storageConfig = new self._storageConfigClass();
_.extend(storageConfig, storageParams);
var $tr = self.newStorage(storageConfig, onCompletion);
var $tr = self.newStorage(storageConfig, onCompletion, true);

self.recheckStorageConfig($tr);
// don't recheck config automatically when there are a large number of storages
if (result.length < 20) {
self.recheckStorageConfig($tr);
} else {
self.updateStatus($tr, StorageConfig.Status.INDETERMINATE, t('files_external', 'Automatic status checking is disabled due to the large number of configured storages, click to check status'));
}
$rows = $rows.add($tr);
});
addSelect2($rows.find('.applicableUsers'), this._userListLimit);
self.$el.find('tr#addMountPoint').before($rows);
onCompletion.resolve();
onLoaded2.resolve();
}
Expand Down
10 changes: 5 additions & 5 deletions apps/files_external/tests/js/settingsSpec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -183,8 +183,8 @@ describe('OCA.Files_External.Settings tests', function() {
});
describe('selecting backend', function() {
it('populates the row and creates a new empty one', function() {
var $firstRow = view.$el.find('tr:first');
selectBackend('\\OC\\TestBackend');
var $firstRow = view.$el.find('tr:first');
expect($firstRow.find('.backend').text()).toEqual('Test Backend');
expect($firstRow.find('.selectBackend').length).toEqual(0);

Expand All @@ -205,8 +205,8 @@ describe('OCA.Files_External.Settings tests', function() {
// TODO: check "remove" button visibility
});
it('shows row even if selection row is hidden', function() {
view.$el.find('tr#addMountPoint').hide();
selectBackend('\\OC\\TestBackend');
view.$el.find('tr#addMountPoint').hide();
expect(view.$el.find('tr:first').is(':visible')).toBe(true);
expect(view.$el.find('tr#addMountPoint').is(':visible')).toBe(false);
});
Expand All @@ -217,8 +217,8 @@ describe('OCA.Files_External.Settings tests', function() {
var $tr;

beforeEach(function() {
$tr = view.$el.find('tr:first');
selectBackend('\\OC\\TestBackend');
$tr = view.$el.find('tr:first');
});
it('saves storage after clicking the save button', function() {
var $field1 = $tr.find('input[data-parameter=field1]');
Expand Down Expand Up @@ -274,8 +274,8 @@ describe('OCA.Files_External.Settings tests', function() {
var $tr;

beforeEach(function() {
$tr = view.$el.find('tr:first');
selectBackend('\\OC\\InputsTestBackend');
$tr = view.$el.find('tr:first');
});

it('lists missing fields in storage errors', function() {
Expand Down Expand Up @@ -342,9 +342,9 @@ describe('OCA.Files_External.Settings tests', function() {
var $td;

beforeEach(function() {
selectBackend('\\OC\\TestBackend');
$tr = view.$el.find('tr:first');
$td = $tr.find('.mountOptionsToggle');
selectBackend('\\OC\\TestBackend');
});

it('shows popovermenu when clicking on toggle button, hides when clicking outside', function() {
Expand Down

0 comments on commit 6b4ab04

Please sign in to comment.