feat: measure and display user quota (#72)

This commit is contained in:
Thomas Durieux
2021-09-06 14:53:42 +02:00
committed by GitHub
parent 91014fbae2
commit 20e8d533f4
9 changed files with 199 additions and 33 deletions
+1
View File
@@ -9,6 +9,7 @@
"repoId_already_used": "The repository id is already used.",
"invalid_repoId": "The format of the repository id is invalid.",
"branch_not_specified": "The branch is not specified.",
"branch_not_found": "The branch of the repository cannot be found.",
"options_not_provided": "Anonymization options are mandatory.",
"invalid_terms_format": "Terms are in an invalid format.",
"unable_to_anonymize": "An error happened during the anonymization process. Please try later or report the issue.",
+62 -1
View File
@@ -152,6 +152,67 @@
</div>
</div>
</div>
<div class="mt-1 mr-1" style="margin-top: -0.25rem !important">
<strong>Repository</strong>
<div class="progress" style="min-width: 150px">
<div
class="progress-bar"
ng-class="{'progress-bar-striped progress-bar-animated w-100 bg-dark': !quota, 'bg-success': quota.repository.percent < 25 || quota.repository.total == 0, 'bg-danger': quota.repository.percent > 95 && quota.repository.total > 0, 'bg-warning': quota.repository.percent > 75 && quota.repository.total > 0 }"
role="progressbar"
style="width: {{quota.repository.percent}}%;"
aria-valuenow="{{quota.repository.used}}"
aria-valuemin="0"
aria-valuemax="{{quota.repository.total}}"
>
<span ng-show="quota"
>{{quota.repository.used |
number}}/{{quota.repository.total}}</span
>
</div>
</div>
</div>
<div class="mt-1 mr-1" style="margin-top: -0.25rem !important">
<strong>Storage</strong>
<div class="progress" style="min-width: 150px">
<div
class="progress-bar"
ng-class="{'progress-bar-striped progress-bar-animated w-100 bg-dark': !quota, 'bg-success': quota.storage.percent < 25 || quota.storage.total == 0, 'bg-danger': quota.storage.percent > 95 && quota.storage.total > 0, 'bg-warning': quota.storage.percent > 75 && quota.storage.total > 0 }"
role="progressbar"
style="width: {{quota.storage.percent}}%;"
aria-valuenow="{{quota.storage.used}}"
aria-valuemin="0"
aria-valuemax="{{quota.storage.total}}"
>
<span ng-show="quota"
>{{quota.storage.used |
humanFileSize}}/{{quota.storage.total|
humanFileSize}}</span
>
</div>
</div>
</div>
<div class="mt-1 mr-1" style="margin-top: -0.25rem !important">
<strong>File</strong>
<div class="progress" style="min-width: 150px">
<div
class="progress-bar"
ng-class="{'progress-bar-striped progress-bar-animated w-100 bg-dark': !quota, 'bg-success': quota.file.percent < 25 || quota.file.total == 0, 'bg-danger': quota.file.percent > 95 && quota.file.total > 0, 'bg-warning': quota.file.percent > 75 && quota.file.total > 0 }"
role="progressbar"
style="width: {{quota.file.percent}}%;"
aria-valuenow="{{quota.file.used}}"
aria-valuemin="0"
aria-valuemax="{{quota.file.total}}"
>
<span ng-show="quota"
>{{quota.file.used | number}}/{{quota.file.total ||
"∞"}}</span
>
</div>
</div>
</div>
</div>
</div>
</form>
@@ -235,7 +296,7 @@
data-toggle="tooltip"
data-placement="bottom"
>
<i class="fas fa-database"></i> {{::repo.size |
<i class="fas fa-database"></i> {{::repo.size.storage |
humanFileSize}}</span
>
<span
+52
View File
@@ -1,4 +1,56 @@
<div class="container py-4">
<h2>Quota</h2>
<h3>Quota</h3>
<h5>Repository</h5>
<div class="progress">
<div
class="progress-bar"
ng-class="{'progress-bar-striped progress-bar-animated w-100 bg-dark': !quota, 'bg-success': quota.repository.percent < 25 || quota.repository.total == 0, 'bg-danger': quota.repository.percent > 95 && quota.repository.total > 0, 'bg-warning': quota.repository.percent > 75 && quota.repository.total > 0 }"
role="progressbar"
style="width: {{quota.repository.percent}}%;"
aria-valuenow="{{quota.repository.used}}"
aria-valuemin="0"
aria-valuemax="{{quota.repository.total}}"
>
<span ng-show="quota"
>{{quota.repository.used | number}}/{{quota.repository.total}}</span
>
</div>
</div>
<h5>Storage</h5>
<div class="progress">
<div
class="progress-bar"
ng-class="{'progress-bar-striped progress-bar-animated w-100 bg-dark': !quota, 'bg-success': quota.storage.percent < 25 || quota.storage.total == 0, 'bg-danger': quota.storage.percent > 95 && quota.storage.total > 0, 'bg-warning': quota.storage.percent > 75 && quota.storage.total > 0 }"
role="progressbar"
style="width: {{quota.storage.percent}}%;"
aria-valuenow="{{quota.storage.used}}"
aria-valuemin="0"
aria-valuemax="{{quota.storage.total}}"
>
<span ng-show="quota"
>{{quota.storage.used | humanFileSize}}/{{quota.storage.total|
humanFileSize}}</span
>
</div>
</div>
<h5>File</h5>
<div class="progress">
<div
class="progress-bar"
ng-class="{'progress-bar-striped progress-bar-animated w-100 bg-dark': !quota, 'bg-success': quota.file.percent < 25 || quota.file.total == 0, 'bg-danger': quota.file.percent > 95 && quota.file.total > 0, 'bg-warning': quota.file.percent > 75 && quota.file.total > 0 }"
role="progressbar"
style="width: {{quota.file.percent}}%;"
aria-valuenow="{{quota.file.used}}"
aria-valuemin="0"
aria-valuemax="{{quota.file.total}}"
>
<span ng-show="quota"
>{{quota.file.used | number}}/{{quota.file.total || "∞"}}</span
>
</div>
</div>
<h2>Default anonymization options</h2>
<form class="form needs-validation" name="default" novalidate>
<!-- Terms -->
+17 -7
View File
@@ -406,6 +406,7 @@ angular
$http.get("/api/user").then(
(res) => {
if (res) $scope.user = res.data;
getQuota();
},
() => {
$scope.user = null;
@@ -425,6 +426,22 @@ angular
);
}
getOptions();
function getQuota() {
$http.get("/api/user/quota").then((res) => {
$scope.quota = res.data;
$scope.quota.storage.percent = $scope.quota.storage.total
? ($scope.quota.storage.used * 100) / $scope.quota.storage.total
: 100;
$scope.quota.file.percent = $scope.quota.file.total
? ($scope.quota.file.used * 100) / $scope.quota.file.total
: 100;
$scope.quota.repository.percent = $scope.quota.repository.total
? ($scope.quota.repository.used * 100) /
$scope.quota.repository.total
: 100;
}, console.error);
}
getQuota();
function getMessage() {
$http.get("/api/message").then(
@@ -605,13 +622,6 @@ angular
}
getRepositories();
function getQuota() {
$http.get("/api/user/quota").then((res) => {
$scope.quota = res.data;
}, console.error);
}
// getQuota();
$scope.removeRepository = (repo) => {
if (
confirm(