file-service-modal.component.html

<div class="glass-fileservice-modal">
  <glass-alert-panel *ngIf="showWarning"
                     type="warning">
    <div fxLayout="column">
      <span *ngFor="let warning of showWarningText">
        {{ warning }}
      </span>
    </div>
  </glass-alert-panel>
  <h1 mat-dialog-title
      translate>
    {{ title }}
  </h1>
  <mat-dialog-content fxLayout="column"
                      fxLayoutAlign="none">
    <form [formGroup]="formGroup"
          class="mat-typography"
          novalidate
          fxLayout="column"
          fxLayoutAlign="none">
      <div fxLayout="row"
           fxLayoutAlign="space-between none"
           fxLayoutGap="16px">
        <mat-form-field fxFlex>
          <mat-label translate>Available Capacity</mat-label>
          <input matInput
                 type="text"
                 [value]="formGroup.value.availableSpace | bytesToSize"
                 readonly>
        </mat-form-field>
        <mat-form-field fxFlex>
          <mat-label translate>Allocated Capacity</mat-label>
          <input matInput
                 type="text"
                 [value]="formGroup.value.allocatedSpace | bytesToSize"
                 readonly>
        </mat-form-field>
        <mat-form-field [ngClass]="{'mat-form-field-invalid': formGroup.hasError('overBudget', 'requiredSpace')}"
                        fxFlex>
          <mat-label translate>Raw Required Capacity</mat-label>
          <input matInput
                 type="text"
                 [value]="formGroup.value.rawRequiredSpace | bytesToSize"
                 readonly>
        </mat-form-field>
      </div>
      <mat-form-field fxFlex>
        <mat-label translate>Service Name</mat-label>
        <input matInput
               type="text"
               formControlName="name"
               required>
        <mat-error *ngIf="formGroup.invalid">
          <span *ngIf="formGroup.hasError('required', 'name')"
                translate>
            This field is required.
          </span>
          <span *ngIf="formGroup.hasError('notUnique', 'name')"
                translate>
            The service name already exists.
          </span>
        </mat-error>
      </mat-form-field>
      <mat-form-field fxFlex>
        <mat-label translate>Service Type</mat-label>
        <mat-select formControlName="type"
                    required>
          <mat-option *ngFor="let type of types"
                      [value]="type.id">
            {{ type.text }}
          </mat-option>
        </mat-select>
        <mat-error *ngIf="formGroup.invalid">
          <span *ngIf="formGroup.hasError('required', 'serviceType')"
                translate>
            This field is required.
          </span>
        </mat-error>
      </mat-form-field>
      <mat-form-field class="glass-form-field-no-underline glass-form-field-hint"
                      [ngClass]="{'mat-form-field-invalid': formGroup.hasError('overBudget', 'replicas')}"
                      fxFlex>
        <mat-label translate>Number Of Replicas</mat-label>
        <input #replicasInput
               matInput
               type="number"
               formControlName="replicas"
               hidden>
        <mat-slider color="primary"
                    [value]="replicasInput.value"
                    (input)="onReplicasChange($event)"
                    min="1"
                    max="3"
                    step="1"
                    thumbLabel="true"
                    fxFlex>
        </mat-slider>
        <mat-hint>
          <span>{{ formGroup.get('replicas')?.value | redundancyLevel:'long' }}</span>
        </mat-hint>
      </mat-form-field>
      <div fxLayout="row"
           fxLayoutAlign="space-between center"
           fxLayoutGap="16px">
        <mat-form-field class="glass-form-field-no-underline"
                        [ngClass]="{'mat-form-field-invalid': formGroup.hasError('overBudget', 'requiredSpace')}"
                        fxFlex="80">
          <mat-label translate>Estimated Required Capacity</mat-label>
          <input #requiredSpaceInput
                 matInput
                 type="number"
                 formControlName="requiredSpace"
                 hidden>
          <mat-slider color="primary"
                      [value]="requiredSpaceInput.value"
                      (input)="onInputRequiredSpace($event)"
                      min="0"
                      [max]="formGroup.value.availableSpace"
                      step="1"
                      fxFlex>
          </mat-slider>
        </mat-form-field>
        <mat-form-field [ngClass]="{'mat-form-field-invalid': formGroup.hasError('overBudget', 'requiredSpace')}"
                        fxFlex="20">
          <input matInput
                 type="text"
                 [value]="formGroup.value.requiredSpace | bytesToSize"
                 (change)="onChangeRequiredSpace($event)">
        </mat-form-field>
      </div>
    </form>
  </mat-dialog-content>
  <mat-dialog-actions align="end"
                      fxLayout="row"
                      fxLayoutGap="10px">
    <button mat-flat-button
            [mat-dialog-close]="false">
      <span translate>Cancel</span>
    </button>
    <glass-submit-button [form]="formGroup"
                         (buttonClick)="onSubmit()"
                         cdkFocusInitial>
      <span translate>Create</span>
    </glass-submit-button>
  </mat-dialog-actions>
</div>