Upstream/harbor
1
0
Fork 0
mirror of https://github.com/goharbor/harbor.git synced 2024-11-23 10:45:45 +01:00
Code Issues Projects Releases Wiki Activity

Merge pull request #8638 from jwangyangls/quota-color-yellow

Browse Source 
Add the warning color in quota when used/hard >0.7
This commit is contained in:
jwangyangls 2019-08-14 12:28:38 +08:00 committed by GitHub
commit 679bab9f80
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 63 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/portal/lib/src/config/project-quotas/edit-project-quotas/edit-project-quotas.component.html
View File

@ -25,8 +25,8 @@
<span class="tooltip-content">{{'PROJECT.QUOTA_UNLIMIT_TIP' | translate }}</span>
</a>
<div class="progress-block progress-min-width progress-div" *ngIf="!defaultTextsObj.isSystemDefaultQuota">
<div class="progress success"
[class.danger]="getDangerStyle(+quotaHardLimitValue.countLimit, quotaHardLimitValue.countUsed)">
<div class="progress success" [class.warning]="isWarningColor(+quotaHardLimitValue.countLimit, quotaHardLimitValue.countUsed)"
[class.danger]="isDangerColor(+quotaHardLimitValue.countLimit, quotaHardLimitValue.countUsed)">
<progress value="{{countInput.invalid || +quotaHardLimitValue.countLimit===-1?0:quotaHardLimitValue.countUsed}}"
max="{{countInput.invalid?100:quotaHardLimitValue.countLimit}}" data-displayval="100%"></progress>
</div>
@ -60,8 +60,9 @@
<span class="tooltip-content">{{'PROJECT.QUOTA_UNLIMIT_TIP' | translate }}</span>
</a>
<div class="progress-block progress-min-width progress-div" *ngIf="!defaultTextsObj.isSystemDefaultQuota">
<div class="progress success" [class.danger]="getDangerStyle(+quotaHardLimitValue.storageLimit,quotaHardLimitValue.storageUsed, quotaHardLimitValue.storageUnit)">
<progress value="{{storageInput.invalid?0:quotaHardLimitValue.storageUsed}}"
<div class="progress success" [class.danger]="isDangerColor(+quotaHardLimitValue.storageLimit,quotaHardLimitValue.storageUsed, quotaHardLimitValue.storageUnit)"
[class.warning]="isWarningColor(+quotaHardLimitValue.storageLimit,quotaHardLimitValue.storageUsed, quotaHardLimitValue.storageUnit)">
<progress value="{{storageInput.invalid || +quotaHardLimitValue.storageLimit === -1 ?0:quotaHardLimitValue.storageUsed}}"
max="{{storageInput.invalid?0:getByte(+quotaHardLimitValue.storageLimit, quotaHardLimitValue.storageUnit)}}"
data-displayval="100%"></progress>
</div>

22
src/portal/lib/src/config/project-quotas/edit-project-quotas/edit-project-quotas.component.scss
View File

@ -1,21 +1,25 @@
::ng-deep .modal-dialog {
width: 25rem;
}
.modal-body {
padding-top: 0.8rem;
overflow-y: visible;
overflow-x: visible;
.clr-form-compact {
div.form-group {
padding-left: 8.5rem;
.mr-3px {
margin-right: 3px;
}
.quota-input {
width: 2rem;
padding-right: 0.8rem;
}
.select-div {
width: 2.5rem;
@ -51,6 +55,22 @@
width: 9rem;
}
::ng-deep {
.progress {
&.warning>progress {
color: orange;
&::-webkit-progress-value {
background-color: orange;
}
&::-moz-progress-bar {
background-color: orange;
}
}
}
}
.progress-label {
position: absolute;
right: -2.3rem;

25
src/portal/lib/src/config/project-quotas/edit-project-quotas/edit-project-quotas.component.ts
View File

@ -6,13 +6,10 @@ import {
OnInit,
} from '@angular/core';
import { NgForm, Validators } from '@angular/forms';
import { ActivatedRoute } from "@angular/router";
import { TranslateService } from '@ngx-translate/core';
import { InlineAlertComponent } from '../../../inline-alert/inline-alert.component';
import { QuotaUnits, QuotaUnlimited } from "../../../shared/shared.const";
import { QuotaUnits, QuotaUnlimited, QUOTA_DANGER_COEFFICIENT, QUOTA_WARNING_COEFFICIENT } from "../../../shared/shared.const";
import { clone, getSuitableUnit, getByte, GetIntegerAndUnit, validateLimit } from '../../../utils';
import { EditQuotaQuotaInterface, QuotaHardLimitInterface } from '../../../service';
@ -47,9 +44,9 @@ export class EditProjectQuotasComponent implements OnInit {
@ViewChild('quotaForm')
currentForm: NgForm;
@Output() confirmAction = new EventEmitter();
constructor(
private translateService: TranslateService,
private route: ActivatedRoute) { }
quotaDangerCoefficient: number = QUOTA_DANGER_COEFFICIENT;
quotaWarningCoefficient: number = QUOTA_WARNING_COEFFICIENT;
constructor() { }
ngOnInit() {
}
@ -134,10 +131,18 @@ export class EditProjectQuotasComponent implements OnInit {
}
return 0;
}
getDangerStyle(limit: number | string, used: number | string, unit?: string) {
isDangerColor(limit: number | string, used: number | string, unit?: string) {
if (unit) {
return limit !== QuotaUnlimited ? +used / getByte(+limit, unit) > 0.9 : false;
return limit !== QuotaUnlimited ? +used / getByte(+limit, unit) >= this.quotaDangerCoefficient : false;
}
return limit !== QuotaUnlimited ? +used / +limit > 0.9 : false;
return limit !== QuotaUnlimited ? +used / +limit >= this.quotaDangerCoefficient : false;
}
isWarningColor(limit: number | string, used: number | string, unit?: string) {
if (unit) {
return limit !== QuotaUnlimited ?
+used / getByte(+limit, unit) >= this.quotaWarningCoefficient && +used / getByte(+limit, unit) <= this.quotaDangerCoefficient : false;
}
return limit !== QuotaUnlimited ?
+used / +limit >= this.quotaWarningCoefficient && +used / +limit <= this.quotaDangerCoefficient : false;
}
}

8
src/portal/lib/src/config/project-quotas/project-quotas.component.html
View File

@ -37,7 +37,9 @@
<clr-dg-cell>
<div class="progress-block progress-min-width">
<div class="progress success"
[class.danger]="quota.hard.count!==-1?quota.used.count/quota.hard.count>0.9:false">
[class.danger]="quota.hard.count!==-1?quota.used.count/quota.hard.count>quotaDangerCoefficient:false"
[class.warning]="quota.hard.count!==-1?quota.used.count/quota.hard.count<=quotaDangerCoefficient &&quota.used.count/quota.hard.count>=quotaWarningCoefficient:false"
>
<progress value="{{quota.hard.count===-1? 0 : quota.used.count}}"
max="{{quota.hard.count}}" data-displayval="100%"></progress>
</div>
@ -48,7 +50,9 @@
<clr-dg-cell>
<div class="progress-block progress-min-width">
<div class="progress success"
[class.danger]="quota.hard.storage!==-1?quota.used.storage/quota.hard.storage>0.9:false">
[class.danger]="quota.hard.storage!==-1?quota.used.storage/quota.hard.storage>quotaDangerCoefficient:false"
[class.warning]="quota.hard.storage!==-1?quota.used.storage/quota.hard.storage>=quotaWarningCoefficient&&quota.used.storage/quota.hard.storage<=quotaDangerCoefficient:false"
>
<progress value="{{quota.hard.storage===-1? 0 : quota.used.storage}}"
max="{{quota.hard.storage}}" data-displayval="100%"></progress>
</div>

4
src/portal/lib/src/config/project-quotas/project-quotas.component.ts
View File

@ -8,7 +8,7 @@ import {
, getByte, GetIntegerAndUnit
} from '../../utils';
import { ErrorHandler } from '../../error-handler/index';
import { QuotaUnits, QuotaUnlimited } from '../../shared/shared.const';
import { QuotaUnits, QuotaUnlimited, QUOTA_DANGER_COEFFICIENT, QUOTA_WARNING_COEFFICIENT } from '../../shared/shared.const';
import { EditProjectQuotasComponent } from './edit-project-quotas/edit-project-quotas.component';
import {
ConfigurationService
@ -46,6 +46,8 @@ export class ProjectQuotasComponent implements OnChanges {
currentPage = 1;
totalCount = 0;
pageSize = 15;
quotaDangerCoefficient: number = QUOTA_DANGER_COEFFICIENT;
quotaWarningCoefficient: number = QUOTA_WARNING_COEFFICIENT;
@Input()
get allConfig(): Configuration {
return this.config;

2
src/portal/lib/src/shared/shared.const.ts
View File

@ -122,6 +122,8 @@ export const CONFIG_AUTH_MODE = {
OIDC_AUTH: "oidc_auth",
UAA_AUTH: "uaa_auth"
};
export const QUOTA_DANGER_COEFFICIENT = 0.9;
export const QUOTA_WARNING_COEFFICIENT = 0.7;
export const PROJECT_ROOTS = [
{
NAME: "admin",

6
src/portal/src/app/project/summary/summary.component.html
View File

@ -35,7 +35,8 @@
<div>
<div class="progress-block progress-min-width progress-div">
<div class="progress success" [class.danger]="summaryInformation?.quota?.hard?.count!==-1?summaryInformation?.quota?.used?.count/summaryInformation?.quota?.hard?.count>0.9:false">
<div class="progress success" [class.danger]="summaryInformation?.quota?.hard?.count!==-1?summaryInformation?.quota?.used?.count/summaryInformation?.quota?.hard?.count>quotaDangerCoefficient:false"
[class.warning]="summaryInformation?.quota?.hard?.count!==-1?summaryInformation?.quota?.used?.count/summaryInformation?.quota?.hard?.count<=quotaDangerCoefficient&&summaryInformation?.quota?.used?.count/summaryInformation?.quota?.hard?.count>=quotaWarningCoefficient:false">
<progress
value="{{summaryInformation?.quota?.hard?.count===-1? 0 : summaryInformation?.quota?.used?.count}}"
max="{{summaryInformation?.quota?.hard?.count}}" data-displayval="100%"></progress>
@ -58,7 +59,8 @@
<div>
<div class="progress-block progress-min-width progress-div">
<div class="progress success"
[class.danger]="summaryInformation?.quota?.hard?.storage!==-1?summaryInformation?.quota?.used?.storage/summaryInformation?.quota?.hard?.storage>0.9:false">
[class.danger]="summaryInformation?.quota?.hard?.storage!==-1?summaryInformation?.quota?.used?.storage/summaryInformation?.quota?.hard?.storage>quotaDangerCoefficient:false"
[class.warning]="summaryInformation?.quota?.hard?.storage!==-1?summaryInformation?.quota?.used?.storage/summaryInformation?.quota?.hard?.storage<=quotaDangerCoefficient&&summaryInformation?.quota?.used?.storage/summaryInformation?.quota?.hard?.storage>=quotaWarningCoefficient:false">
<progress
value="{{summaryInformation?.quota?.hard?.storage===-1? 0 : summaryInformation?.quota?.used?.storage}}"
max="{{summaryInformation?.quota?.hard?.storage}}" data-displayval="100%"></progress>

12
src/portal/src/app/project/summary/summary.component.ts
View File

@ -1,9 +1,9 @@
import { Component, OnInit, Input } from '@angular/core';
import { ProjectService, clone, QuotaUnits, getSuitableUnit, ErrorHandler, GetIntegerAndUnit } from '@harbor/ui';
import { Router, ActivatedRoute } from '@angular/router';
import { forkJoin } from 'rxjs';
import { Component, OnInit } from '@angular/core';
import { ProjectService, clone, QuotaUnits, getSuitableUnit, ErrorHandler, GetIntegerAndUnit
, QUOTA_DANGER_COEFFICIENT, QUOTA_WARNING_COEFFICIENT } from '@harbor/ui';
import { ActivatedRoute } from '@angular/router';
import { AppConfigService } from "../../app-config.service";
export const riskRatio = 0.9;
@Component({
selector: 'summary',
templateUrl: './summary.component.html',
@ -12,6 +12,8 @@ export const riskRatio = 0.9;
export class SummaryComponent implements OnInit {
projectId: number;
summaryInformation: any;
quotaDangerCoefficient: number = QUOTA_DANGER_COEFFICIENT;
quotaWarningCoefficient: number = QUOTA_WARNING_COEFFICIENT;
constructor(
private projectService: ProjectService,
private errorHandler: ErrorHandler,