services/self-service/src/main/resources/webapp/src/app/administration/management/manage-environment/manage-environment-dilog.component.html

<!--
  ~ 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()">&times;</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>