GDB-10392 show a progress bar while file is uploading in import view (#…

…1449)

* GDB-10392 show a progress bar while file is uploading in import view

## What
Show a progress bar while file is uploading in import view.

## Why
If a big file is being uploaded, then it happens that the UI doesn't show any signs of what's happening during the file is uploaded to the server which then returns it's status in  the list with the files. This leads to a bad user experience.

## How
Added a progress bar in the user data tab which is displayed while the file is being uploaded.

* Decreased the font size of the text inside the progress bar as the default one is 1.2rem and it looks quite big inside the bar

src/css/import.css

@@ -1,3 +1,7 @@
+#wb-import .tab-content .progress {
+ font-size: 1rem;
+}
+
 .upload-buttons {
  align-items: stretch;
  display: flex;
@@ -73,8 +77,9 @@
  outline: none;
 }
 
-.import-resource-message-dialog .message{
+.import-resource-message-dialog .message {
  color: #000000;
  font-size: 15px;
  resize: none;
 }
+

src/js/angular/import/controllers/import-view.controller.js

@@ -777,9 +777,18 @@ importViewModule.controller('UploadCtrl', ['$scope', 'toastr', '$controller', '$
  $scope.settings.name = file.name;
  const data = UploadRestService.createUploadPayload(file, $scope.settings);
  const uploader = startImport ? UploadRestService.uploadUserDataFile : UploadRestService.updateUserDataFile;
- uploader($repositories.getActiveRepository(), file, data).then(() => {
- $scope.updateList();
- }).catch((data) => {
+ uploader($repositories.getActiveRepository(), file, data).then(
+ (resp) => {
+ $scope.progressPercentage = null;
+ $scope.uploadProgressMessage = '';
+ $scope.updateList();
+ },
+ () => {},
+ (evt) => {
+ $scope.progressPercentage = parseInt(100.0 * evt.loaded / evt.total);
+ $scope.uploadProgressMessage = $translate.instant('import.file.upload.progress', {progress: $scope.progressPercentage});
+ }
+ ).catch((data) => {
  toastr.error($translate.instant('import.could.not.upload.file', {data: getError(data)}));
  file.status = ImportResourceStatus.ERROR;
  file.message = getError(data);

src/js/angular/rest/upload.rest.service.js

@@ -1,5 +1,3 @@
-import {ImportResourceStatus} from "../models/import/import-resource-status";
-
 angular
  .module('graphdb.framework.rest.upload.service', [])
  .factory('UploadRestService', UploadRestService);
@@ -42,7 +40,7 @@ function UploadRestService($http, Upload, $translate) {
  return Upload.upload({
  url: `${BASE_ENDPOINT}/${repositoryId}/import/upload/file`,
  data: data
- }).progress((evt) => reportProgress(evt, file));
+ });
  }
 
  /**
@@ -56,20 +54,6 @@ function UploadRestService($http, Upload, $translate) {
  return Upload.upload({
  url: `${BASE_ENDPOINT}/${repositoryId}/import/upload/update/file`,
  data: data
- }).progress((evt) => reportProgress(evt, file));
- }
-
- function reportProgress(evt, file) {
- if (file.file) {
- file.file = null;
- file.status = ImportResourceStatus.UPLOADING;
- } else if (file.status !== ImportResourceStatus.UPLOADING) {
- file.status = ImportResourceStatus.PENDING;
- }
-
- if (file.status === ImportResourceStatus.UPLOADING) {
- const progressPercentage = parseInt(100.0 * evt.loaded / evt.total);
- file.message = $translate.instant('import.file.upload.progress', {progress: progressPercentage});
- }
+ });
  }
 }

src/pages/import.html

@@ -36,6 +36,13 @@ <h1>
  <div class="tab-content">
  <div id="import-user" ng-if="TAB_IDS.USER === activeTabId" class="tab-pane" ng-controller="UploadCtrl"
  ng-class="activeTabId == 'user' ? 'active' : ''">
+
+ <div class="progress" ng-if="uploadProgressMessage">
+ <div class="progress-bar progress-bar-success" role="progressbar" style="width:{{progressPercentage}}%">
+ {{uploadProgressMessage}}
+ </div>
+ </div>
+
  <div class="row upload-buttons">
  <div class="col-xs-12 col-md-6 col-lg-4 mb-2 fat-btn">
  <div class="btn btn-outline-primary btn-lg text-xs-left upload-rdf-files-btn"