Skip to content

Commit

Permalink
Gdb 9971 fixses loader functionality (#1363)
Browse files Browse the repository at this point in the history 
* GDB-9970: Added 'view' variable to the import context service.

What:
The 'viewType' parameter was renamed to 'activeTabId' and moved to the import context service.

Why:
The 'viewType' parameter represents the selected tab and is used across all controllers. However, there were synchronization issues causing problems with the initial call to the backend. This occurred because 'viewType' was sometimes undefined at the time of the call, leading to improper setting of the 'resources' variable. Renaming it to 'activeTabId' clarifies its purpose.

How:
The 'viewType' parameter has been renamed and moved to the import context service.

* GDB-9970: Added resources variable to the import context service.

What:
The 'resources' parameter was moved to the import context service.

Why:
The 'resources' parameter holds the import resources and is used across all controllers. However, there were synchronization issues causing problems with the initial call to the backend.

How:
The 'resources' parameter has been moved to the import context service.

* GDB-9970: Added loader when initializing the import view.

What:
Implemented a loader to display during the initialization of the import view.

Why:
After integration of the new resource list, the loader had to be changed to work again as expected.

How:
Introduced a 'loader' flag to control the display of the loader. Upon page initialization, the loader is set to true, causing it to be displayed while hiding the import-resource-tree.directive. Once resources are loaded for the first time, the loader is set to false, triggering the display of resources and hiding the loader.

* Fixes MR

* Add retry to a test

---------

Co-authored-by: svilen.velikov <[email protected]>
  • Loading branch information
@boyan-tonchev @svilenvelikov
boyan-tonchev and svilenvelikov authored Apr 12, 2024
1 parent a549c81 commit edd57e9
Show file tree
Hide file tree
Showing 6 changed files with 163 additions and 85 deletions.
109 changes: 54 additions & 55 deletions src/js/angular/import/controllers.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ import {decodeHTML} from "../../../app";
import {FilePrefixRegistry} from "./file-prefix-registry";
import {SortingType} from "../models/import/sorting-type";
import {ImportResourceStatus} from "../models/import/import-resource-status";
import {TABS} from "./import-context.service";

const modules = [
'ui.bootstrap',
Expand All @@ -31,16 +32,6 @@ const modules = [

const importViewModule = angular.module('graphdb.framework.impex.import.controllers', modules);

const OPERATION = {
UPLOAD: 'upload',
SERVER: 'server'
};

const TABS = {
USER: 'user',
SERVER:'server'
};

const USER_DATA_TYPE = {
FILE: 'file',
TEXT: 'text',
Expand All @@ -64,6 +55,7 @@ importViewModule.controller('ImportViewCtrl', ['$scope', 'toastr', '$interval',

$scope.files = []; // should be private
$scope.fileChecked = {};
$scope.activeTabId = ImportContextService.getActiveTabId();
/**
* Contains a mapping of file names to flags indicating whether the file is selected or not.
* The selected files from this mapping are synchronized in the resources model each time it is refreshed from
Expand All @@ -78,7 +70,6 @@ importViewModule.controller('ImportViewCtrl', ['$scope', 'toastr', '$interval',
$scope.fileFormatsHuman = FileFormats.getFileFormatsHuman() + $translate.instant('import.gz.zip');
$scope.textFileFormatsHuman = FileFormats.getTextFileFormatsHuman();
$scope.maxUploadFileSizeMB = 0;
$scope.resources = new ImportResourceTreeElement();
$scope.SORTING_TYPES = SortingType;

// =========================
Expand All @@ -101,7 +92,7 @@ importViewModule.controller('ImportViewCtrl', ['$scope', 'toastr', '$interval',
};

$scope.getTypeFilter = () => {
if ($scope.viewType === 'server' && ($scope.showItems === 'file' || $scope.showItems === 'directory')) {
if (TABS.SERVER === $scope.activeTabId && ($scope.showItems === 'file' || $scope.showItems === 'directory')) {
return $scope.showItems;
} else {
return '';
Expand Down Expand Up @@ -212,7 +203,7 @@ importViewModule.controller('ImportViewCtrl', ['$scope', 'toastr', '$interval',
};

$scope.showTable = () => {
const showTable = $scope.files.length > 0 && ('user' === $scope.viewType || 'server' === $scope.viewType);
const showTable = $scope.files.length > 0 && (TABS.USER === $scope.activeTabId || TABS.SERVER === $scope.activeTabId);
if ($scope.checkAll) {
$scope.switchBatch(true);
}
Expand Down Expand Up @@ -250,7 +241,7 @@ importViewModule.controller('ImportViewCtrl', ['$scope', 'toastr', '$interval',
* @return {string[]}
*/
$scope.getSelectedFiles = () => {
return $scope.resources.getAllSelectedFilesNames();
return ImportContextService.getResources().getAllSelectedFilesNames();
};

$scope.importSelected = (overrideSettings) => {
Expand Down Expand Up @@ -414,13 +405,13 @@ importViewModule.controller('ImportViewCtrl', ['$scope', 'toastr', '$interval',
* @param {boolean} force - Force the files list to be replaced with the new data
*/
$scope.updateListHttp = (force) => {
const filesLoader = $scope.viewUrl === OPERATION.UPLOAD ? ImportRestService.getUploadedFiles : ImportRestService.getServerFiles;
const filesLoader = $scope.activeTabId === TABS.USER ? ImportRestService.getUploadedFiles : ImportRestService.getServerFiles;
filesLoader($repositories.getActiveRepository()).success(function (data) {

if (TABS.SERVER === $scope.viewType) {
$scope.resources = toImportServerResource(toImportResource(data));
} else if (TABS.USER === $scope.viewType) {
$scope.resources = toImportUserDataResource(toImportResource(data));
if (TABS.SERVER === $scope.activeTabId) {
ImportContextService.updateResources(toImportServerResource(toImportResource(data)));
} else if (TABS.USER === $scope.activeTabId) {
ImportContextService.updateResources(toImportUserDataResource(toImportResource(data)));
}

// reload all files
Expand All @@ -446,7 +437,7 @@ importViewModule.controller('ImportViewCtrl', ['$scope', 'toastr', '$interval',
});
}
// Need new status here
if (force && 'user' === $scope.viewType) {
if (force && TABS.USER === $scope.activeTabId) {
$scope.files = _.filter($scope.files, function (f) {
return f.status !== undefined;
});
Expand All @@ -459,16 +450,14 @@ importViewModule.controller('ImportViewCtrl', ['$scope', 'toastr', '$interval',
$scope.savedSettings = _.mapKeys(_.filter($scope.files, 'parserSettings'), 'name');
}).error(function (data) {
toastr.warning($translate.instant('import.error.could.not.get.files', {data: getError(data)}));
}).finally(() => {
$scope.loader = false;
});
};

const resetStatusOrRemoveEntry = (names, remove) => {
if (!names || names.length < 1) {
return;
}
const resetService = $scope.viewUrl === OPERATION.UPLOAD ? ImportRestService.resetUserDataStatus : ImportRestService.resetServerFileStatus;
const resetService = $scope.activeTabId === TABS.USER ? ImportRestService.resetUserDataStatus : ImportRestService.resetServerFileStatus;
resetService($repositories.getActiveRepository(), names, remove).success(function () {
$scope.updateList(true);
}).error(function (data) {
Expand Down Expand Up @@ -501,9 +490,14 @@ importViewModule.controller('ImportViewCtrl', ['$scope', 'toastr', '$interval',
ImportViewStorageService.initImportViewSettings();
};

const initSubscribtions = () => {
const initSubscriptions = () => {
subscriptions.push($scope.$on('repositoryIsSet', $scope.onRepositoryChange));
subscriptions.push($scope.$on('$destroy', () => $interval.cancel(listPollingHandler)));
subscriptions.push(ImportContextService.onActiveTabIdUpdated((newActiveTabId) => {
$scope.activeTabId = newActiveTabId;
ImportContextService.updateResources(new ImportResourceTreeElement());
$scope.updateListHttp(true);
}));
$scope.$on('$destroy', removeAllListeners);
};

Expand All @@ -513,14 +507,14 @@ importViewModule.controller('ImportViewCtrl', ['$scope', 'toastr', '$interval',

// TODO: Beware that this init is called tree times due to the child controllers which extends this one. We should refactor this.
const init = () => {
initSubscribtions();
initSubscriptions();
getAppData();
initPersistence();
};
init();
}]);

importViewModule.controller('ImportCtrl', ['$scope', 'toastr', '$controller', '$translate', '$repositories', 'ImportRestService', function ($scope, toastr, $controller, $translate, $repositories, ImportRestService) {
importViewModule.controller('ImportCtrl', ['$scope', 'toastr', '$controller', '$translate', '$repositories', 'ImportRestService', 'ImportContextService', function ($scope, toastr, $controller, $translate, $repositories, ImportRestService, ImportContextService) {

// =========================
// Private variables
Expand All @@ -532,7 +526,6 @@ importViewModule.controller('ImportCtrl', ['$scope', 'toastr', '$controller', '$

$scope.loader = true;
angular.extend(this, $controller('ImportViewCtrl', {$scope: $scope}));
$scope.viewUrl = OPERATION.SERVER;
$scope.defaultType = 'server';
$scope.tabId = '#import-server';
$scope.showItems = 'all';
Expand Down Expand Up @@ -582,6 +575,10 @@ importViewModule.controller('ImportCtrl', ['$scope', 'toastr', '$controller', '$
const init = function () {
$scope.pollList();
$scope.onRepositoryChange();
const onFirstResourceUpdatesHandler = ImportContextService.onResourcesUpdated(() => {
$scope.loader = false;
onFirstResourceUpdatesHandler();
});
};
init();
}]);
Expand All @@ -598,7 +595,6 @@ importViewModule.controller('UploadCtrl', ['$scope', 'toastr', '$controller', '$

$scope.loader = true;
angular.extend(this, $controller('ImportViewCtrl', {$scope: $scope}));
$scope.viewUrl = OPERATION.UPLOAD;
$scope.defaultType = USER_DATA_TYPE.FILE;
$scope.tabId = '#import-user';
// A list with all files that were uploaded or currently selected for uploading by the user.
Expand Down Expand Up @@ -904,8 +900,12 @@ importViewModule.controller('UploadCtrl', ['$scope', 'toastr', '$controller', '$
const init = function () {
$scope.pollList();
$scope.onRepositoryChange();
ImportContextService.onFilesUpdated((files) => {
subscriptions.push(ImportContextService.onFilesUpdated((files) => {
filesPrefixRegistry.buildPrefixesRegistry(files);
}));
const onFirstResourceUpdatesHandler = ImportContextService.onResourcesUpdated(() => {
$scope.loader = false;
onFirstResourceUpdatesHandler();
});
};
init();
Expand Down Expand Up @@ -994,8 +994,6 @@ importViewModule.controller('TabCtrl', ['$scope', '$location', 'ImportViewStorag
// =========================
// Public variables
// =========================

$scope.viewType = $location.hash();
$scope.isHelpVisible = true;
$scope.fileSizeLimitInfoTemplateUrl = 'js/angular/import/templates/fileSizeLimitInfo.html';

Expand All @@ -1004,20 +1002,17 @@ importViewModule.controller('TabCtrl', ['$scope', '$location', 'ImportViewStorag
// =========================

$scope.openTab = (tab) => {
$scope.viewType = tab;
$scope.$parent.viewUrl = tab === 'server' ? OPERATION.SERVER : OPERATION.UPLOAD;
$location.hash($scope.viewType);
$scope.updateListHttp(true);
ImportContextService.updateActiveTabId(tab);
};

$scope.changeHelpTemplate = function (templateFile) {
$scope.templateUrl = 'js/angular/import/templates/' + templateFile;
};

$scope.toggleHelp = () => {
const viewPersistance = ImportViewStorageService.getImportViewSettings();
const viewPersistence = ImportViewStorageService.getImportViewSettings();
ImportViewStorageService.toggleHelpVisibility();
$scope.isHelpVisible = !viewPersistance.isHelpVisible;
$scope.isHelpVisible = !viewPersistence.isHelpVisible;
};

// =========================
Expand All @@ -1030,41 +1025,45 @@ importViewModule.controller('TabCtrl', ['$scope', '$location', 'ImportViewStorag
ImportViewStorageService.setHelpVisibility(true);
shouldResetHelpVisibility = false;
}
const viewPersistance = ImportViewStorageService.getImportViewSettings();
let isVisible = viewPersistance.isHelpVisible;
if (files.length === 0 && viewPersistance.isHelpVisible) {
const viewPersistence = ImportViewStorageService.getImportViewSettings();
let isVisible = viewPersistence.isHelpVisible;
if (files.length === 0 && viewPersistence.isHelpVisible) {
isVisible = true;
} else if (files.length === 0 && !viewPersistance.isHelpVisible) {
} else if (files.length === 0 && !viewPersistence.isHelpVisible) {
isVisible = false;
} else if (viewPersistance.isHelpVisible) {
} else if (viewPersistence.isHelpVisible) {
isVisible = true;
} else if (!viewPersistance.isHelpVisible) {
} else if (!viewPersistence.isHelpVisible) {
isVisible = false;
}
ImportViewStorageService.setHelpVisibility(isVisible);
$scope.isHelpVisible = isVisible;
};

// =========================
// Initialization
// Watchers and event handlers
// =========================

const init = function () {
ImportContextService.onFilesUpdated(onFilesUpdated);

if ($scope.viewType !== 'user' && $scope.viewType !== 'server') {
$scope.viewType = 'user';
}

if ($scope.viewType === 'user') {
const subscriptions = [];
subscriptions.push(ImportContextService.onActiveTabIdUpdated((newActiveTabId) => {
$scope.activeTabId = newActiveTabId;
$location.hash($scope.activeTabId);
if (TABS.USER === $scope.activeTabId) {
$scope.templateUrl = 'js/angular/import/templates/uploadInfo.html';
} else {
$scope.templateUrl = 'js/angular/import/templates/importInfo.html';
}
}));

$scope.openTab($scope.viewType || 'user');
};
init();
subscriptions.push(ImportContextService.onFilesUpdated(onFilesUpdated));

const removeAllListeners = () => subscriptions.forEach((subscription) => subscription());

$scope.$on('$destroy', removeAllListeners);

// Updates the active tab id from tha url.
const activeTabId = $location.hash() || TABS.USER;
$scope.openTab(activeTabId);
}]);

importViewModule.controller('SettingsModalCtrl', ['$scope', '$uibModalInstance', 'toastr', 'UriUtils', 'settings', 'hasParserSettings', 'defaultSettings', 'isMultiple', '$translate',
Expand Down
23 changes: 12 additions & 11 deletions src/js/angular/import/directives/import-resource-tree.directive.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,18 +25,14 @@ angular
.module('graphdb.framework.import.import-resource-tree', modules)
.directive('importResourceTree', importResourceTreeDirective);

importResourceTreeDirective.$inject = ['$timeout'];
importResourceTreeDirective.$inject = ['$timeout', 'ImportContextService'];

function importResourceTreeDirective($timeout) {
function importResourceTreeDirective($timeout, ImportContextService) {
return {
restrict: 'E',
templateUrl: 'js/angular/import/templates/import-resource-tree.html',
scope: {

/**
* @type {ImportResourceTreeElement}
*/
resources: '=',
/**
* If the type filter buttons should be visible.
*/
Expand Down Expand Up @@ -181,10 +177,6 @@ function importResourceTreeDirective($timeout) {
// Private functions
// =========================

const init = () => {
updateListedImportResources();
};

/**
* Sets the flag showing if any of the selected resources is already imported
* and can have their states reset.
Expand Down Expand Up @@ -290,12 +282,21 @@ function importResourceTreeDirective($timeout) {
debounceTimeout = $timeout(func, delay);
};

// =========================
// Subscription handlers
// =========================

const onResourcesUpdatedHandler = (resources) => {
$scope.resources = resources;
updateListedImportResources();
};

// =========================
// Subscriptions
// =========================
const subscriptions = [];

subscriptions.push($scope.$watch('resources', init));
subscriptions.push(ImportContextService.onResourcesUpdated(onResourcesUpdatedHandler));

const removeAllSubscribers = () => {
subscriptions.forEach((subscription) => subscription());
Expand Down
Loading

0 comments on commit edd57e9

Please sign in to comment.