| <!-- |
| ~ 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">Connect endpoint</h4> |
| <button |
| type="button" |
| class="close" |
| (click)="dialogRef.close()" |
| >×</button> |
| </header> |
| <div class="dialog-content tabs"> |
| <div class="content-box"> |
| <mat-tab-group #tabGroup> |
| <mat-tab label="CONNECT 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" |
| (blur)="generateEndpointTag($event)" |
| /> |
| <span |
| class="error" |
| *ngIf="!createEndpointForm?.controls.name.valid |
| && createEndpointForm?.controls.name.touched |
| && !createEndpointForm?.controls['name'].hasError('isDuplicate') |
| && !createEndpointForm?.controls['name'].hasError('limit')" |
| > |
| Endpoint name can only contain letters, numbers, hyphens and '_' but can not end with special |
| characters. |
| </span> |
| <span |
| class="error" |
| *ngIf="createEndpointForm?.controls['name'].hasError('isDuplicate')" |
| > |
| This endpoint name already exists. |
| </span> |
| <span |
| class="error" |
| *ngIf="createEndpointForm?.controls['name'].hasError('limit')" |
| > |
| Endpoint name cannot be longer than {{ maxEndpointNameLength }} 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'].hasError('isDuplicate')">This endpoint url already exists.</span> |
| <span |
| class="error" |
| *ngIf="!createEndpointForm?.controls.url.valid |
| && createEndpointForm.controls.url.touched |
| && !createEndpointForm?.controls['url'].hasError('isDuplicate')" |
| > |
| Please provide a valid endpoint url with slash in the end. |
| </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 |
| readonly |
| type="text" |
| formControlName="endpoint_tag" |
| placeholder="< equal to endpoint name >" |
| class="not-allowed" |
| /> |
| <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" |
| [disabled]="!this.createEndpointForm.value.url || !createEndpointForm.valid" |
| class="butt action" |
| (click)="getEndpoinConnectionStatus(createEndpointForm.value.url)" |
| > |
| Test |
| </button> |
| <div class="action-butt"> |
| <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" |
| > |
| Connect |
| </button> |
| </div> |
| </div> |
| </div> |
| </mat-tab> |
| <mat-tab label="ENDPOINTS LIST"> |
| <div class="endpoints scrolling"> |
| <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"> |
| <span matTooltip="{{element.url}}" matTooltipPosition="above">{{element.url}}</span> |
| </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 |
| matTooltip="Test" |
| matTooltipPosition="above" |
| (click)="getEndpoinConnectionStatus(element.url)" |
| > |
| <mat-icon>compare_arrows</mat-icon> |
| </span> |
| <span |
| matTooltip="Disconnect" |
| matTooltipPosition="above" |
| (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"> |
| <i class="material-icons">settings_system_daydream</i>New endpoint |
| </button> |
| </div> |
| </div> |
| </ng-template> |
| </div> |
| </mat-tab> |
| </mat-tab-group> |
| </div> |
| </div> |
| </div> |