services/self-service/src/main/resources/webapp/src/app/administration/management/endpoints/endpoints.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 class="endpoints-dialog" id="dialog-box">
  <header class="dialog-header">
    <h4 class="modal-title">Create endpoint</h4>
    <button type="button" class="close" (click)="dialogRef.close()">&times;</button>
  </header>
  <div class="dialog-content tabs">
    <div class="content-box">
      <mat-tab-group #tabGroup>
        <mat-tab label="CREATE ENDPOINT">
          <div class="split">
            <form [formGroup]="createEndpointForm" novalidate>
              <div class="control-group">
                <label class="label">Name</label>
                <div class="control">
                  <input type="text" formControlName="name" placeholder="Enter endpoint name">
                  <span class="error"
                    *ngIf="!createEndpointForm?.controls.name.valid && createEndpointForm?.controls.name.touched">
                    Endpoint name can only contain letters, numbers, hyphens and '_' but can not end with special
                    characters
                  </span>
                </div>
              </div>
              <div class="control-group">
                <label class="label">Endpoint url</label>
                <div class="control">
                  <input type="text" formControlName="url" placeholder="Enter endpoint url">
                  <span class="error"
                    *ngIf="!createEndpointForm?.controls.url.valid && createEndpointForm.controls.url.touched">
                    Endpoint url can only contain letters, numbers, hyphens and '_' but can not end with special
                    characters
                  </span>
                </div>
              </div>
              <div class="control-group">
                <label class="label">Account</label>
                <div class="control">
                  <input type="text" formControlName="account" placeholder="Enter account">
                  <span class="error"
                    *ngIf="!createEndpointForm?.controls.account.valid && createEndpointForm.controls.account.touched">
                    Endpoint account can only contain letters, numbers, hyphens and '_' but can not end with special
                    characters
                  </span>
                </div>
              </div>
              <div class="control-group">
                <label class="label">Endpoint tag</label>
                <div class="control">
                  <input type="text" formControlName="endpoint_tag" placeholder="Enter endpoint tag">
                  <span class="error"
                    *ngIf="!createEndpointForm?.controls.endpoint_tag.valid && createEndpointForm.controls.endpoint_tag.touched">
                    Endpoint tag can only contain letters, numbers, hyphens and '_' but can not end with special
                    characters
                  </span>
                </div>
              </div>
            </form>
            <div class="action-group m-bott-10">
              <button mat-raised-button type="button" class="butt action" (click)="dialogRef.close()">Cancel</button>
              <button mat-raised-button type="button" [disabled]="!createEndpointForm.valid"
                (click)="assignChanges(createEndpointForm.value)" class="butt butt-success action">Create</button>
            </div>
          </div>
        </mat-tab>
        <mat-tab label="ENDPOINTS LIST">
          <div class="endpoints">
            <table mat-table [dataSource]="endpoints" class="endpoints-table"
              *ngIf="endpoints?.length; else empty">
              <ng-container matColumnDef="name">
                <th mat-header-cell *matHeaderCellDef class="name"> Endpoint name </th>
                <td mat-cell *matCellDef="let element"> {{element.name}} </td>
              </ng-container>

              <ng-container matColumnDef="url">
                <th mat-header-cell *matHeaderCellDef class="url"> Url </th>
                <td mat-cell *matCellDef="let element"> {{element.url}} </td>
              </ng-container>

              <ng-container matColumnDef="account">
                <th mat-header-cell *matHeaderCellDef class="account"> Account </th>
                <td mat-cell *matCellDef="let element"> {{element.account}} </td>
              </ng-container>

              <ng-container matColumnDef="endpoint_tag">
                <th mat-header-cell *matHeaderCellDef class="account"> Endpoint tag </th>
                <td mat-cell *matCellDef="let element"> {{element.endpoint_tag}} </td>
              </ng-container>

              <ng-container matColumnDef="actions">
                <th mat-header-cell *matHeaderCellDef class="actions"></th>
                <td mat-cell *matCellDef="let element" class="actions">
                  <span (click)="deleteEndpoint(element)">
                    <mat-icon>delete_forever</mat-icon>
                  </span>
                </td>
              </ng-container>

              <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
              <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
            </table>

            <ng-template #empty>
              <div class="info empty-box">
                <div class="content">
                  <p>Looks like you don't have any endpoints</p>

                  <button mat-raised-button class="butt" (click)="tabGroup.selectedIndex = 0" [disabled]="creatingBackup">
                    <i class="material-icons">settings_system_daydream</i>New endpoint
                  </button>
                </div>
              </div>
            </ng-template>
          </div>
        </mat-tab>
      </mat-tab-group>
    </div>
  </div>
</div>