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

Add the warning color in quota when used/hard >0.7

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

@@ -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"
+          <div class="progress success" [class.warning]="isWarningColor(+quotaHardLimitValue.countLimit, quotaHardLimitValue.countUsed)"
-          [class.danger]="getDangerStyle(+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)">
+          <div class="progress success" [class.danger]="isDangerColor(+quotaHardLimitValue.storageLimit,quotaHardLimitValue.storageUsed, quotaHardLimitValue.storageUnit)"
-            <progress value="{{storageInput.invalid?0:quotaHardLimitValue.storageUsed}}"
+          [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>

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

@@ -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;

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

@@ -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(
+  quotaDangerCoefficient: number = QUOTA_DANGER_COEFFICIENT;
-    private translateService: TranslateService,
+  quotaWarningCoefficient: number = QUOTA_WARNING_COEFFICIENT;
-    private route: ActivatedRoute) { }
+  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;
   }
 }

src/portal/lib/src/config/project-quotas/project-quotas.component.html

@@ -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>

src/portal/lib/src/config/project-quotas/project-quotas.component.ts

@@ -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;

src/portal/lib/src/shared/shared.const.ts

@@ -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",

src/portal/src/app/project/summary/summary.component.html

@@ -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>

src/portal/src/app/project/summary/summary.component.ts

@@ -1,9 +1,9 @@
-import { Component, OnInit, Input } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
-import { ProjectService, clone, QuotaUnits, getSuitableUnit, ErrorHandler, GetIntegerAndUnit } from '@harbor/ui';
+import { ProjectService, clone, QuotaUnits, getSuitableUnit, ErrorHandler, GetIntegerAndUnit
-import { Router, ActivatedRoute } from '@angular/router';
+  , QUOTA_DANGER_COEFFICIENT, QUOTA_WARNING_COEFFICIENT } from '@harbor/ui';
-import { forkJoin } from 'rxjs';
+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,