| <!-- |
| ~ Licensed to the Apache Software Foundation (ASF) under one |
| ~ or more contributor license agreements. See the NOTICE file |
| ~ distributed with this work for additional information |
| ~ regarding copyright ownership. The ASF licenses this file |
| ~ to you under the Apache License, Version 2.0 (the |
| ~ "License"); you may not use this file except in compliance |
| ~ with the License. You may obtain a copy of the License at |
| ~ |
| ~ http://www.apache.org/licenses/LICENSE-2.0 |
| ~ |
| ~ Unless required by applicable law or agreed to in writing, |
| ~ software distributed under the License is distributed on an |
| ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY |
| ~ KIND, either express or implied. See the License for the |
| ~ specific language governing permissions and limitations |
| ~ under the License. |
| --> |
| |
| <div id="dialog-box" class="manage-env-dialog"> |
| <header class="dialog-header"> |
| <h4 class="modal-title">Manage DataLab quotas</h4> |
| <button type="button" class="close" (click)="dialogRef.close()">×</button> |
| </header> |
| <div class="dialog-content"> |
| <div class="content-box"> |
| <div *ngIf="data.projectsList?.length"> |
| <form [formGroup]="manageUsersForm" (submit)="setBudgetLimits(manageUsersForm.value)" novalidate> |
| <mat-list> |
| <mat-list-item class="list-header"> |
| <div class="username">Project</div> |
| <div class="period">Set per month</div> |
| <div class="quotes">Limit</div> |
| </mat-list-item> |
| <div class="scrolling-content" id="scrolling" formArrayName="projects"> |
| <mat-list-item *ngFor="let item of usersEnvironments.controls; let i=index" [formGroupName]="i" |
| class="list-item"> |
| <div class="username ellipsis"> |
| <span class="ellipsis" |
| matTooltip="{{ manageUsersForm.controls['projects']['controls'][i].value['project'] }}" |
| matTooltipPosition="above">{{ manageUsersForm.controls['projects']['controls'][i].value['project'] }} |
| </span> |
| </div> |
| <div class="period"> |
| <mat-slide-toggle formControlName="monthlyBudget"> |
| </mat-slide-toggle> |
| </div> |
| <div class="quotes"> |
| <input type="number" (keypress)="CheckUtils.numberOnly($event)" min="0" |
| placeholder="Enter limit, in USD" formControlName="budget"> |
| <span class="error" |
| *ngIf="manageUsersForm?.controls['projects']['controls'][i].controls['budget'].hasError('overrun') && |
| !manageUsersForm?.controls['projects']['controls'][i].controls['budget'].hasError('max')" |
| > |
| Projects budget cannot be higher than total budget. |
| </span> |
| <span class="error" |
| *ngIf="manageUsersForm?.controls['projects']['controls'][i].controls['budget'].hasError('max')">Project budget cannot be higher than 1000000000.</span> |
| </div> |
| </mat-list-item> |
| </div> |
| <div class="control-group total-budget"> |
| |
| <mat-list-item class="list-item"> |
| <div class="username ellipsis"> |
| <span class="ellipsis">Total budget</span> |
| </div> |
| <div class="period"> |
| </div> |
| <div class="quotes"> |
| <input type="number" (keypress)="CheckUtils.numberOnly($event)" formControlName="total" |
| placeholder="Enter total budget, in USD"> |
| <span class="error" *ngIf="manageUsersForm?.controls['total'].hasError('overrun') |
| && !manageUsersForm?.controls['total'].hasError('max')">Total budget cannot be lower than a sum of project quotes.</span> |
| <span class="error" |
| *ngIf="manageUsersForm?.controls['total'].hasError('max')">Total budget cannot be higher than 1000000000.</span> |
| </div> |
| </mat-list-item> |
| </div> |
| <div class="text-center m-top-30"> |
| <button mat-raised-button type="button" (click)="dialogRef.close()" class="butt action">Cancel</button> |
| <button mat-raised-button type="submit" [disabled]="!manageUsersForm.valid || isFormChanged" class="butt butt-success" |
| [ngClass]="{'not-allowed': !manageUsersForm.valid}">Apply</button> |
| </div> |
| </mat-list> |
| </form> |
| </div> |
| <div class="info message" *ngIf="!data?.projectsList.length">No active projects</div> |
| </div> |
| </div> |
| </div> |