|
|
|
@ -16,7 +16,7 @@ |
|
|
|
|
|
|
|
--> |
|
|
|
<div class="connector-container tb-form-panel no-border"> |
|
|
|
<section class="table-container tb-form-panel stroked no-padding flex"> |
|
|
|
<section class="table-section tb-form-panel no-padding flex section-container"> |
|
|
|
<mat-toolbar class="mat-mdc-table-toolbar"> |
|
|
|
<h2>{{ 'gateway.connectors' | translate }}</h2> |
|
|
|
<span fxFlex></span> |
|
|
|
@ -28,89 +28,64 @@ |
|
|
|
<mat-icon>add</mat-icon> |
|
|
|
</button> |
|
|
|
</mat-toolbar> |
|
|
|
<table mat-table [dataSource]="dataSource" |
|
|
|
matSort [matSortActive]="pageLink.sortOrder.property" [matSortDirection]="pageLink.sortDirection()" |
|
|
|
matSortDisableClear> |
|
|
|
<ng-container matColumnDef="enabled" sticky> |
|
|
|
<mat-header-cell *matHeaderCellDef style="width: 60px;min-width: 60px;"> |
|
|
|
{{ 'gateway.connectors-table-enabled' | translate }} |
|
|
|
</mat-header-cell> |
|
|
|
<mat-cell *matCellDef="let attribute"> |
|
|
|
<mat-slide-toggle [checked]="activeConnectors.includes(attribute.key)" |
|
|
|
(click)="$event.stopPropagation(); enableConnector(attribute)"></mat-slide-toggle> |
|
|
|
</mat-cell> |
|
|
|
</ng-container> |
|
|
|
<ng-container matColumnDef="key"> |
|
|
|
<mat-header-cell *matHeaderCellDef mat-sort-header style="width: 40%"> |
|
|
|
{{ 'gateway.connectors-table-name' | translate }}</mat-header-cell> |
|
|
|
<mat-cell *matCellDef="let attribute"> |
|
|
|
{{ attribute.key }} |
|
|
|
</mat-cell> |
|
|
|
</ng-container> |
|
|
|
<ng-container matColumnDef="type"> |
|
|
|
<mat-header-cell *matHeaderCellDef mat-sort-header style="width: 30%"> |
|
|
|
{{ 'gateway.connectors-table-type' | translate }} |
|
|
|
</mat-header-cell> |
|
|
|
<mat-cell *matCellDef="let attribute" style="text-transform: uppercase"> |
|
|
|
{{ returnType(attribute) }} |
|
|
|
</mat-cell> |
|
|
|
</ng-container> |
|
|
|
<ng-container matColumnDef="syncStatus"> |
|
|
|
<mat-header-cell *matHeaderCellDef mat-sort-header style="width: 30%"> |
|
|
|
{{ 'gateway.configuration' | translate }} |
|
|
|
</mat-header-cell> |
|
|
|
<mat-cell *matCellDef="let attribute" style="text-transform: uppercase"> |
|
|
|
<div class="status" [class]="isConnectorSynced(attribute) ? 'status-sync' : 'status-unsync'"> |
|
|
|
{{ isConnectorSynced(attribute) ? 'sync' : 'out of sync' }} |
|
|
|
</div> |
|
|
|
</mat-cell> |
|
|
|
</ng-container> |
|
|
|
<ng-container matColumnDef="errors"> |
|
|
|
<mat-header-cell *matHeaderCellDef mat-sort-header style="width: 30%"> |
|
|
|
{{ 'gateway.connectors-table-status' | translate }} |
|
|
|
</mat-header-cell> |
|
|
|
<mat-cell *matCellDef="let attribute" style="text-transform: uppercase"> |
|
|
|
<span class="dot" |
|
|
|
matTooltip="{{ 'Errors: '+ getErrorsCount(attribute)}}" |
|
|
|
matTooltipPosition="above" |
|
|
|
[class]="{'hasErrors': +getErrorsCount(attribute) > 0, |
|
|
|
'noErrors': +getErrorsCount(attribute) === 0 || getErrorsCount(attribute) === ''}"></span> |
|
|
|
</mat-cell> |
|
|
|
</ng-container> |
|
|
|
<ng-container matColumnDef="actions" stickyEnd> |
|
|
|
<mat-header-cell *matHeaderCellDef |
|
|
|
[ngStyle.gt-md]="{ minWidth: '144px', maxWidth: '144px', width: '144px'}"> |
|
|
|
{{ 'gateway.connectors-table-actions' | translate }} |
|
|
|
</mat-header-cell> |
|
|
|
<mat-cell *matCellDef="let attribute" |
|
|
|
[ngStyle.gt-md]="{ minWidth: '144px', maxWidth: '144px', width: '144px'}"> |
|
|
|
<div fxHide fxShow.gt-md fxFlex fxLayout="row" fxLayoutAlign="end"> |
|
|
|
<button mat-icon-button |
|
|
|
matTooltip="RPC" |
|
|
|
matTooltipPosition="above" |
|
|
|
(click)="connectorRpc(attribute, $event)"> |
|
|
|
<mat-icon>private_connectivity</mat-icon> |
|
|
|
</button> |
|
|
|
<button mat-icon-button |
|
|
|
matTooltip="Logs" |
|
|
|
matTooltipPosition="above" |
|
|
|
(click)="connectorLogs(attribute, $event)"> |
|
|
|
<mat-icon>list</mat-icon> |
|
|
|
</button> |
|
|
|
<button mat-icon-button |
|
|
|
matTooltip="Delete connector" |
|
|
|
matTooltipPosition="above" |
|
|
|
(click)="deleteConnector(attribute, $event)"> |
|
|
|
<mat-icon>delete</mat-icon> |
|
|
|
</button> |
|
|
|
</div> |
|
|
|
<div fxHide fxShow.lt-lg> |
|
|
|
<button mat-icon-button |
|
|
|
(click)="$event.stopPropagation()" |
|
|
|
[matMenuTriggerFor]="cellActionsMenu"> |
|
|
|
<mat-icon class="material-icons">more_vert</mat-icon> |
|
|
|
</button> |
|
|
|
<mat-menu #cellActionsMenu="matMenu" xPosition="before"> |
|
|
|
<div class="table-container"> |
|
|
|
<table mat-table [dataSource]="dataSource" |
|
|
|
matSort [matSortActive]="pageLink.sortOrder.property" [matSortDirection]="pageLink.sortDirection()" |
|
|
|
matSortDisableClear> |
|
|
|
<ng-container matColumnDef="enabled" sticky> |
|
|
|
<mat-header-cell *matHeaderCellDef style="width: 60px;min-width: 60px;"> |
|
|
|
{{ 'gateway.connectors-table-enabled' | translate }} |
|
|
|
</mat-header-cell> |
|
|
|
<mat-cell *matCellDef="let attribute"> |
|
|
|
<mat-slide-toggle [checked]="activeConnectors.includes(attribute.key)" |
|
|
|
(click)="$event.stopPropagation(); enableConnector(attribute)"></mat-slide-toggle> |
|
|
|
</mat-cell> |
|
|
|
</ng-container> |
|
|
|
<ng-container matColumnDef="key"> |
|
|
|
<mat-header-cell *matHeaderCellDef mat-sort-header style="width: 40%"> |
|
|
|
{{ 'gateway.connectors-table-name' | translate }}</mat-header-cell> |
|
|
|
<mat-cell *matCellDef="let attribute"> |
|
|
|
{{ attribute.key }} |
|
|
|
</mat-cell> |
|
|
|
</ng-container> |
|
|
|
<ng-container matColumnDef="type"> |
|
|
|
<mat-header-cell *matHeaderCellDef mat-sort-header style="width: 30%"> |
|
|
|
{{ 'gateway.connectors-table-type' | translate }} |
|
|
|
</mat-header-cell> |
|
|
|
<mat-cell *matCellDef="let attribute" style="text-transform: uppercase"> |
|
|
|
{{ returnType(attribute) }} |
|
|
|
</mat-cell> |
|
|
|
</ng-container> |
|
|
|
<ng-container matColumnDef="syncStatus"> |
|
|
|
<mat-header-cell *matHeaderCellDef mat-sort-header style="width: 30%"> |
|
|
|
{{ 'gateway.configuration' | translate }} |
|
|
|
</mat-header-cell> |
|
|
|
<mat-cell *matCellDef="let attribute" style="text-transform: uppercase"> |
|
|
|
<div class="status" [class]="isConnectorSynced(attribute) ? 'status-sync' : 'status-unsync'"> |
|
|
|
{{ isConnectorSynced(attribute) ? 'sync' : 'out of sync' }} |
|
|
|
</div> |
|
|
|
</mat-cell> |
|
|
|
</ng-container> |
|
|
|
<ng-container matColumnDef="errors"> |
|
|
|
<mat-header-cell *matHeaderCellDef mat-sort-header style="width: 30%"> |
|
|
|
{{ 'gateway.connectors-table-status' | translate }} |
|
|
|
</mat-header-cell> |
|
|
|
<mat-cell *matCellDef="let attribute" style="text-transform: uppercase"> |
|
|
|
<span class="dot" |
|
|
|
matTooltip="{{ 'Errors: '+ getErrorsCount(attribute)}}" |
|
|
|
matTooltipPosition="above" |
|
|
|
[class]="{'hasErrors': +getErrorsCount(attribute) > 0, |
|
|
|
'noErrors': +getErrorsCount(attribute) === 0 || getErrorsCount(attribute) === ''}"></span> |
|
|
|
</mat-cell> |
|
|
|
</ng-container> |
|
|
|
<ng-container matColumnDef="actions" stickyEnd> |
|
|
|
<mat-header-cell *matHeaderCellDef |
|
|
|
[ngStyle.gt-md]="{ minWidth: '144px', maxWidth: '144px', width: '144px'}"> |
|
|
|
{{ 'gateway.connectors-table-actions' | translate }} |
|
|
|
</mat-header-cell> |
|
|
|
<mat-cell *matCellDef="let attribute" |
|
|
|
[ngStyle.gt-md]="{ minWidth: '144px', maxWidth: '144px', width: '144px'}"> |
|
|
|
<div fxHide fxShow.gt-md fxFlex fxLayout="row" fxLayoutAlign="end"> |
|
|
|
<button mat-icon-button |
|
|
|
matTooltip="RPC" |
|
|
|
matTooltipPosition="above" |
|
|
|
@ -118,7 +93,7 @@ |
|
|
|
<mat-icon>private_connectivity</mat-icon> |
|
|
|
</button> |
|
|
|
<button mat-icon-button |
|
|
|
matTooltip="Delete connector" |
|
|
|
matTooltip="Logs" |
|
|
|
matTooltipPosition="above" |
|
|
|
(click)="connectorLogs(attribute, $event)"> |
|
|
|
<mat-icon>list</mat-icon> |
|
|
|
@ -129,55 +104,84 @@ |
|
|
|
(click)="deleteConnector(attribute, $event)"> |
|
|
|
<mat-icon>delete</mat-icon> |
|
|
|
</button> |
|
|
|
</mat-menu> |
|
|
|
</div> |
|
|
|
</mat-cell> |
|
|
|
</ng-container> |
|
|
|
<mat-header-row class="mat-row-select" |
|
|
|
*matHeaderRowDef="displayedColumns; sticky: true"></mat-header-row> |
|
|
|
<mat-row class="mat-row-select" [class]="{'tb-current-entity': isSameConnector(attribute)}" |
|
|
|
*matRowDef="let attribute; columns: displayedColumns;" (click)="selectConnector(attribute)"></mat-row> |
|
|
|
</table> |
|
|
|
</div> |
|
|
|
<div fxHide fxShow.lt-lg> |
|
|
|
<button mat-icon-button |
|
|
|
(click)="$event.stopPropagation()" |
|
|
|
[matMenuTriggerFor]="cellActionsMenu"> |
|
|
|
<mat-icon class="material-icons">more_vert</mat-icon> |
|
|
|
</button> |
|
|
|
<mat-menu #cellActionsMenu="matMenu" xPosition="before"> |
|
|
|
<button mat-icon-button |
|
|
|
matTooltip="RPC" |
|
|
|
matTooltipPosition="above" |
|
|
|
(click)="connectorRpc(attribute, $event)"> |
|
|
|
<mat-icon>private_connectivity</mat-icon> |
|
|
|
</button> |
|
|
|
<button mat-icon-button |
|
|
|
matTooltip="Delete connector" |
|
|
|
matTooltipPosition="above" |
|
|
|
(click)="connectorLogs(attribute, $event)"> |
|
|
|
<mat-icon>list</mat-icon> |
|
|
|
</button> |
|
|
|
<button mat-icon-button |
|
|
|
matTooltip="Delete connector" |
|
|
|
matTooltipPosition="above" |
|
|
|
(click)="deleteConnector(attribute, $event)"> |
|
|
|
<mat-icon>delete</mat-icon> |
|
|
|
</button> |
|
|
|
</mat-menu> |
|
|
|
</div> |
|
|
|
</mat-cell> |
|
|
|
</ng-container> |
|
|
|
<mat-header-row class="mat-row-select" |
|
|
|
*matHeaderRowDef="displayedColumns; sticky: true"></mat-header-row> |
|
|
|
<mat-row class="mat-row-select" [class]="{'tb-current-entity': isSameConnector(attribute)}" |
|
|
|
*matRowDef="let attribute; columns: displayedColumns;" (click)="selectConnector(attribute)"></mat-row> |
|
|
|
</table> |
|
|
|
</div> |
|
|
|
</section> |
|
|
|
<section [formGroup]="connectorForm" class="tb-form-panel no-border no-padding flex"> |
|
|
|
<section class="tb-form-row tb-not-inline-field same-padding input-container"> |
|
|
|
<mat-form-field class="flex" subscriptSizing="dynamic"> |
|
|
|
<mat-label>{{ 'gateway.connectors-table-name' | translate }}</mat-label> |
|
|
|
<input matInput formControlName="name" #nameInput/> |
|
|
|
</mat-form-field> |
|
|
|
<mat-form-field class="flex" subscriptSizing="dynamic" hideRequiredMarker> |
|
|
|
<mat-label>{{ 'gateway.connectors-table-type' | translate }}</mat-label> |
|
|
|
<mat-select formControlName="type"> |
|
|
|
<mat-option style="text-transform: uppercase" |
|
|
|
*ngFor="let type of gatewayConnectorDefaultTypes | keyvalue" [value]="type.key">{{ type.value }}</mat-option> |
|
|
|
</mat-select> |
|
|
|
</mat-form-field> |
|
|
|
<mat-form-field class="flex" *ngIf="connectorForm.get('type').value === 'grpc'" subscriptSizing="dynamic"> |
|
|
|
<mat-label>{{ 'gateway.connectors-table-key' | translate }}</mat-label> |
|
|
|
<input matInput formControlName="key"/> |
|
|
|
</mat-form-field> |
|
|
|
<mat-form-field class="flex" *ngIf="connectorForm.get('type').value === 'custom'" subscriptSizing="dynamic"> |
|
|
|
<mat-label>{{ 'gateway.connectors-table-class' | translate }}</mat-label> |
|
|
|
<input matInput formControlName="class"/> |
|
|
|
</mat-form-field> |
|
|
|
<mat-form-field class="flex" subscriptSizing="dynamic" hideRequiredMarker> |
|
|
|
<mat-label translate>gateway.remote-logging-level</mat-label> |
|
|
|
<mat-select formControlName="logLevel"> |
|
|
|
<mat-option *ngFor="let logLevel of gatewayLogLevel" [value]="logLevel">{{ logLevel }}</mat-option> |
|
|
|
</mat-select> |
|
|
|
</mat-form-field> |
|
|
|
<section class="tb-form-panel input-container section-container"> |
|
|
|
<section class="tb-form-row tb-not-inline-field no-padding no-border column-lt-md input-container"> |
|
|
|
<mat-form-field class="flex" subscriptSizing="dynamic"> |
|
|
|
<mat-label>{{ 'gateway.connectors-table-name' | translate }}</mat-label> |
|
|
|
<input matInput formControlName="name" #nameInput/> |
|
|
|
</mat-form-field> |
|
|
|
<mat-form-field class="flex" subscriptSizing="dynamic" hideRequiredMarker> |
|
|
|
<mat-label>{{ 'gateway.connectors-table-type' | translate }}</mat-label> |
|
|
|
<mat-select formControlName="type"> |
|
|
|
<mat-option style="text-transform: uppercase" |
|
|
|
*ngFor="let type of gatewayConnectorDefaultTypes | keyvalue" [value]="type.key">{{ type.value }}</mat-option> |
|
|
|
</mat-select> |
|
|
|
</mat-form-field> |
|
|
|
<mat-form-field class="flex" *ngIf="connectorForm.get('type').value === 'grpc'" subscriptSizing="dynamic"> |
|
|
|
<mat-label>{{ 'gateway.connectors-table-key' | translate }}</mat-label> |
|
|
|
<input matInput formControlName="key"/> |
|
|
|
</mat-form-field> |
|
|
|
<mat-form-field class="flex" *ngIf="connectorForm.get('type').value === 'custom'" subscriptSizing="dynamic"> |
|
|
|
<mat-label>{{ 'gateway.connectors-table-class' | translate }}</mat-label> |
|
|
|
<input matInput formControlName="class"/> |
|
|
|
</mat-form-field> |
|
|
|
<mat-form-field class="flex" subscriptSizing="dynamic" hideRequiredMarker> |
|
|
|
<mat-label translate>gateway.remote-logging-level</mat-label> |
|
|
|
<mat-select formControlName="logLevel"> |
|
|
|
<mat-option *ngFor="let logLevel of gatewayLogLevel" [value]="logLevel">{{ logLevel }}</mat-option> |
|
|
|
</mat-select> |
|
|
|
</mat-form-field> |
|
|
|
</section> |
|
|
|
</section> |
|
|
|
<section class="tb-form-panel stroked flex"> |
|
|
|
<section class="tb-form-panel flex section-container"> |
|
|
|
<tb-json-object-edit |
|
|
|
fillHeight="true" |
|
|
|
class="flex" |
|
|
|
fxLayout="column" |
|
|
|
required |
|
|
|
label="{{ 'gateway.configuration' | translate }}" |
|
|
|
formControlName="configurationJson"> |
|
|
|
</tb-json-object-edit> |
|
|
|
<div fxLayoutAlign="start center"> |
|
|
|
<div fxLayoutAlign="end center"> |
|
|
|
<button mat-raised-button color="primary" |
|
|
|
class="action-button" |
|
|
|
type="button" |
|
|
|
[disabled]="!connectorForm.dirty || connectorForm.invalid" |
|
|
|
(click)="saveConnector()"> |
|
|
|
|
Vladyslav_Prykhodko
3 years ago