harbor/src/portal/src/app/base/left-side-nav/project-quotas/project-quotas/project-quotas.component.html
Will Sun 2d84b62fe2
Refactor UI routing and remove redundant code (#14166)
Signed-off-by: AllForNothing <sshijun@vmware.com>
2021-02-18 09:12:23 +08:00

74 lines
5.0 KiB
HTML

<div class="color-0 pt-19px font-size-13">
<div class="row label-config">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 quota-top">
<div class="default-quota">
<div>
<div class="default-quota-text">
<span class="width-10rem">{{'QUOTA.PROJECT_QUOTA_DEFAULT_DISK' | translate}}</span>
<span class="num-count">{{ quotaHardLimitValue?.storageLimit === -1?('QUOTA.UNLIMITED' | translate): getIntegerAndUnit(quotaHardLimitValue?.storageLimit, 0).partNumberHard}}
{{ quotaHardLimitValue?.storageLimit === -1?'':quotaHardLimitValue?.storageUnit }}</span>
<button id="open-edit" class="btn btn-link btn-sm default-quota-edit-button"
(click)="editDefaultQuota(quotaHardLimitValue)">{{'QUOTA.EDIT' | translate}}</button>
</div>
</div>
</div>
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<clr-datagrid [(clrDgSelected)]="selectedRow" [clrDgLoading]="loading" (clrDgRefresh)="getQuotaList($event)">
<clr-dg-action-bar>
<div class="clr-row">
<div class="clr-col">
<button type="button" class="btn btn-secondary" [disabled]="!(selectedRow && selectedRow.length === 1)" (click)="editQuota()">
{{'QUOTA.EDIT' | translate}}
</button>
</div>
<div class="clr-col-1">
<div class="action-head-pos">
<span class="refresh-btn" (click)="refresh()">
<clr-icon shape="refresh"></clr-icon>
</span>
</div>
</div>
</div>
</clr-dg-action-bar>
<clr-dg-column>{{'QUOTA.PROJECT' | translate}}</clr-dg-column>
<clr-dg-column>{{'QUOTA.OWNER' | translate}}</clr-dg-column>
<clr-dg-column [clrDgSortBy]="storageComparator">{{'QUOTA.STORAGE' | translate }}</clr-dg-column>
<clr-dg-placeholder>{{'QUOTA.PLACEHOLDER' | translate }}</clr-dg-placeholder>
<clr-dg-row *ngFor="let quota of quotaList" [clrDgItem]='quota'>
<clr-dg-cell>
<a href="javascript:void(0)" (click)="goToLink(quota?.ref?.id)">{{quota?.ref?.name}}</a></clr-dg-cell>
<clr-dg-cell>{{quota?.ref?.owner_name}}</clr-dg-cell>
<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>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>
<label class="min-label-width">{{ quota?.hard?.storage ===-1 ? getSuitableUnit(quota?.used?.storage) :
(getIntegerAndUnit(quota?.hard?.storage, quota?.used?.storage).partNumberUsed + getIntegerAndUnit(quota?.hard?.storage, quota?.used?.storage).partCharacterUsed)}}
{{ 'QUOTA.OF' | translate }}
{{ (quota?.hard?.storage ===-1 ? 'QUOTA.UNLIMITED':
(getIntegerAndUnit(quota?.hard?.storage, quota?.used?.storage).partNumberHard + getIntegerAndUnit(quota?.hard?.storage, quota?.used?.storage).partCharacterHard)) | translate }}
</label>
</div>
</clr-dg-cell>
</clr-dg-row>
<clr-dg-footer>
<clr-dg-pagination #pagination [clrDgPageSize]="pageSize" [(clrDgPage)]="currentPage"
[clrDgTotalItems]="totalCount">
<clr-dg-page-size [clrPageSizeOptions]="[15,25,50]">{{"PAGINATION.PAGE_SIZE" | translate}}</clr-dg-page-size>
<span *ngIf="totalCount">{{pagination.firstItem + 1}} - {{pagination.lastItem + 1}}
{{'DESTINATION.OF' | translate}}</span>
{{totalCount}} {{'SUMMARY.QUOTAS' | translate}}
</clr-dg-pagination>
</clr-dg-footer>
</clr-datagrid>
</div>
</div>
<edit-project-quotas #editProjectQuotas (confirmAction)="confirmEdit($event)"></edit-project-quotas>
</div>