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 environment</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="quotes">Limit</div>
<!--              <div class="action">Actions</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="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')">Per-user
                    quotes cannot be greater than total budget</span>
                </div>
<!--                <div class="action">-->
<!--                  <span-->
<!--                    *ngIf="manageUsersForm?.controls['projects']['controls'][i].controls['canBeStopped'].value; else not_allowed_stop"-->
<!--                    matTooltip="Stop" matTooltipPosition="above" (click)="applyAction('stop', item)">-->
<!--                    <i class="material-icons">pause_circle_outline</i>-->
<!--                  </span>-->
<!--                  <ng-template #not_allowed_stop>-->
<!--                    <span matTooltip="Unable to stop project because all resources are already stopped'"-->
<!--                      matTooltipPosition="above" class="not-active">-->
<!--                      <i class="material-icons">pause_circle_outline</i>-->
<!--                    </span>-->
<!--                  </ng-template>-->

<!--                  <span-->
<!--                    *ngIf="manageUsersForm?.controls['projects']['controls'][i].controls['canBeTerminated'].value; else not_allowed_terminate"-->
<!--                    matTooltip="Terminate" matTooltipPosition="above" (click)="applyAction('terminate', item)">-->
<!--                    <i class="material-icons">phonelink_off</i>-->
<!--                  </span>-->
<!--                  <ng-template #not_allowed_terminate>-->
<!--                    <span matTooltip="Unable to terminate project because all resources are already terminated"-->
<!--                      matTooltipPosition="above" class="not-active">-->
<!--                      <i class="material-icons">phonelink_off</i>-->
<!--                    </span>-->
<!--                  </ng-template>-->

<!--                </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="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')">Total budget cannot be lower than a sum of users quotes</span>
                </div>
<!--              <label class="username">Total budget</label>-->
<!--              <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')">Total budget cannot be lower than a sum of users quotes</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" 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>