Browse Source
* Create gateway widget * Refacoring and add styled * Update bundle * Add model and refactoringpull/2562/head
Vladyslav
7 years ago
committed by
GitHub
GitHub
19 changed files with 1465 additions and 61 deletions
@ -0,0 +1,262 @@ |
|||||
|
<!-- |
||||
|
|
||||
|
Copyright © 2016-2020 The Thingsboard Authors |
||||
|
|
||||
|
Licensed 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. |
||||
|
|
||||
|
--> |
||||
|
<form #formContainer class="gateway-form" |
||||
|
[formGroup]="gatewayConfigurationGroup" |
||||
|
tb-toast toastTarget="{{ toastTargetId }}" |
||||
|
(ngSubmit)="save()"> |
||||
|
<mat-accordion multi="true" class="mat-body-1"> |
||||
|
<mat-expansion-panel> |
||||
|
<mat-expansion-panel-header> |
||||
|
<mat-panel-title> |
||||
|
<div class="tb-panel-title">{{ 'gateway.thingsboard' | translate | uppercase }}</div> |
||||
|
</mat-panel-title> |
||||
|
</mat-expansion-panel-header> |
||||
|
<tb-entity-gateway-select |
||||
|
formControlName="gateway" |
||||
|
[newGatewayType]="gatewayType" |
||||
|
(gatewayNameExist)="gatewayExist()" |
||||
|
required |
||||
|
> |
||||
|
</tb-entity-gateway-select> |
||||
|
<div fxLayout="column"> |
||||
|
<mat-form-field fxFlex> |
||||
|
<mat-label>{{'gateway.security-type' | translate }}</mat-label> |
||||
|
<mat-select formControlName="securityType" > |
||||
|
<mat-option *ngFor="let securityType of securityTypes | keyvalue" [value]="securityType.key"> |
||||
|
{{ securityType.value.toString() | translate }} |
||||
|
</mat-option> |
||||
|
</mat-select> |
||||
|
</mat-form-field> |
||||
|
</div> |
||||
|
<div [fxLayout]="alignment" [fxLayoutGap]="layoutGap"> |
||||
|
<mat-form-field fxFlex> |
||||
|
<mat-label>{{ 'gateway.thingsboard-host' | translate }}</mat-label> |
||||
|
<input matInput type="text" formControlName="host"> |
||||
|
<mat-error *ngIf="gatewayConfigurationGroup.get('host').hasError('required')" translate> |
||||
|
gateway.thingsboard-host-required |
||||
|
</mat-error> |
||||
|
</mat-form-field> |
||||
|
<mat-form-field fxFlex> |
||||
|
<mat-label>{{ 'gateway.thingsboard-port' | translate }}</mat-label> |
||||
|
<input matInput type="number" formControlName="port"> |
||||
|
<mat-error *ngIf="gatewayConfigurationGroup.get('port').hasError('required')" translate> |
||||
|
gateway.thingsboard-port-required |
||||
|
</mat-error> |
||||
|
<mat-error *ngIf="gatewayConfigurationGroup.get('port').hasError('min')" translate> |
||||
|
gateway.thingsboard-port-min |
||||
|
</mat-error> |
||||
|
<mat-error *ngIf="gatewayConfigurationGroup.get('port').hasError('max')" translate> |
||||
|
gateway.thingsboard-port-max |
||||
|
</mat-error> |
||||
|
<mat-error *ngIf="gatewayConfigurationGroup.get('port').hasError('pattern')" translate> |
||||
|
gateway.thingsboard-port-pattern |
||||
|
</mat-error> |
||||
|
</mat-form-field> |
||||
|
</div> |
||||
|
|
||||
|
<div *ngIf="gatewayConfigurationGroup.get('securityType').value == 'tls'" fxLayout="column"> |
||||
|
<mat-form-field fxFlex> |
||||
|
<mat-label>{{ 'gateway.tls-path-ca-certificate' | translate }}</mat-label> |
||||
|
<input matInput type="text" formControlName="caCertPath"> |
||||
|
</mat-form-field> |
||||
|
<mat-form-field fxFlex> |
||||
|
<mat-label>{{ 'gateway.tls-path-private-key' | translate }}</mat-label> |
||||
|
<input matInput type="text" formControlName="privateKeyPath"> |
||||
|
</mat-form-field> |
||||
|
<mat-form-field fxFlex> |
||||
|
<mat-label>{{ 'gateway.tls-path-client-certificate' | translate }}</mat-label> |
||||
|
<input matInput type="text" formControlName="certPath"> |
||||
|
</mat-form-field> |
||||
|
</div> |
||||
|
|
||||
|
<mat-checkbox formControlName="remoteConfiguration">{{ 'gateway.remote' | translate }}</mat-checkbox> |
||||
|
|
||||
|
<div [fxLayout]="alignment" [fxLayoutGap]="layoutGap"> |
||||
|
<mat-form-field fxFlex> |
||||
|
<mat-label>{{'gateway.remote-logging-level' | translate }}</mat-label> |
||||
|
<mat-select formControlName="remoteLoggingLevel"> |
||||
|
<mat-option *ngFor="let logLevel of gatewayLogLevels" [value]="logLevel"> |
||||
|
{{ logLevel }} |
||||
|
</mat-option> |
||||
|
</mat-select> |
||||
|
</mat-form-field> |
||||
|
|
||||
|
<mat-form-field fxFlex> |
||||
|
<mat-label>{{ 'gateway.path-logs' | translate }}</mat-label> |
||||
|
<input matInput type="text" formControlName="remoteLoggingPathToLogs"> |
||||
|
<mat-error *ngIf="gatewayConfigurationGroup.get('remoteLoggingPathToLogs').hasError('required')" translate> |
||||
|
gateway.path-logs-required |
||||
|
</mat-error> |
||||
|
</mat-form-field> |
||||
|
</div> |
||||
|
|
||||
|
</mat-expansion-panel> |
||||
|
|
||||
|
<mat-expansion-panel> |
||||
|
<mat-expansion-panel-header> |
||||
|
<mat-panel-title> |
||||
|
<div class="tb-panel-title">{{ 'gateway.storage' | translate | uppercase }}</div> |
||||
|
</mat-panel-title> |
||||
|
</mat-expansion-panel-header> |
||||
|
|
||||
|
<div fxLayout="column"> |
||||
|
<mat-form-field fxFlex> |
||||
|
<mat-label>{{'gateway.storage-type' | translate }}</mat-label> |
||||
|
<mat-select formControlName="storageType"> |
||||
|
<mat-option *ngFor="let storageType of storageTypes | keyvalue" [value]="storageType.key"> |
||||
|
{{ storageType.value.toString() | translate}} |
||||
|
</mat-option> |
||||
|
</mat-select> |
||||
|
</mat-form-field> |
||||
|
|
||||
|
<div [fxLayout]="alignment" [fxLayoutGap]="layoutGap"> |
||||
|
<mat-form-field fxFlex> |
||||
|
<mat-label>{{ 'gateway.storage-pack-size' | translate }}</mat-label> |
||||
|
<input matInput type="number" formControlName="readRecordsCount"> |
||||
|
<mat-error *ngIf="gatewayConfigurationGroup.get('readRecordsCount').hasError('required')" translate> |
||||
|
gateway.storage-pack-size-required |
||||
|
</mat-error> |
||||
|
<mat-error *ngIf="gatewayConfigurationGroup.get('readRecordsCount').hasError('min')" translate> |
||||
|
gateway.storage-pack-size-min |
||||
|
</mat-error> |
||||
|
<mat-error *ngIf="gatewayConfigurationGroup.get('readRecordsCount').hasError('pattern')" translate> |
||||
|
gateway.storage-pack-size-pattern |
||||
|
</mat-error> |
||||
|
</mat-form-field> |
||||
|
|
||||
|
<mat-form-field fxFlex> |
||||
|
<mat-label > |
||||
|
{{ (gatewayConfigurationGroup.get('storageType').value !== 'file' ? 'gateway.storage-max-records' : 'gateway.storage-max-file-records') | translate}} |
||||
|
</mat-label> |
||||
|
<input matInput type="number" formControlName="maxRecordsCount"> |
||||
|
<mat-error *ngIf="gatewayConfigurationGroup.get('maxRecordsCount').hasError('required')" translate> |
||||
|
gateway.storage-max-records-required |
||||
|
</mat-error> |
||||
|
<mat-error *ngIf="gatewayConfigurationGroup.get('maxRecordsCount').hasError('min')" translate> |
||||
|
gateway.storage-max-records-min |
||||
|
</mat-error> |
||||
|
<mat-error *ngIf="gatewayConfigurationGroup.get('maxRecordsCount').hasError('pattern')" translate> |
||||
|
gateway.storage-max-records-pattern |
||||
|
</mat-error> |
||||
|
</mat-form-field> |
||||
|
</div> |
||||
|
|
||||
|
<div [fxLayout]="alignment" [fxLayoutGap]="layoutGap" *ngIf="gatewayConfigurationGroup.get('storageType').value == 'file'"> |
||||
|
<mat-form-field fxFlex> |
||||
|
<mat-label>{{ 'gateway.storage-max-files' | translate }}</mat-label> |
||||
|
<input matInput type="number" formControlName="maxFilesCount"> |
||||
|
<mat-error *ngIf="gatewayConfigurationGroup.get('maxFilesCount').hasError('required')" translate> |
||||
|
gateway.storage-max-files-required |
||||
|
</mat-error> |
||||
|
<mat-error *ngIf="gatewayConfigurationGroup.get('maxFilesCount').hasError('min')" translate> |
||||
|
gateway.storage-max-files-min |
||||
|
</mat-error> |
||||
|
<mat-error *ngIf="gatewayConfigurationGroup.get('maxFilesCount').hasError('pattern')" translate> |
||||
|
gateway.storage-max-files-pattern |
||||
|
</mat-error> |
||||
|
</mat-form-field> |
||||
|
|
||||
|
<mat-form-field fxFlex> |
||||
|
<mat-label>{{ 'gateway.storage-path' | translate }}</mat-label> |
||||
|
<input matInput type="text" formControlName="dataFolderPath"> |
||||
|
<mat-error *ngIf="gatewayConfigurationGroup.get('dataFolderPath').hasError('required')" translate> |
||||
|
gateway.storage-path-required |
||||
|
</mat-error> |
||||
|
</mat-form-field> |
||||
|
</div> |
||||
|
</div> |
||||
|
</mat-expansion-panel> |
||||
|
|
||||
|
<mat-expansion-panel> |
||||
|
<mat-expansion-panel-header> |
||||
|
<mat-panel-title> |
||||
|
<div class="tb-panel-title">{{ 'gateway.connectors' | translate | uppercase }}</div> |
||||
|
</mat-panel-title> |
||||
|
</mat-expansion-panel-header> |
||||
|
|
||||
|
<div fxLayout="column" class="gateway-config"> |
||||
|
<section formArrayName="connectors" *ngFor="let connector of connectors.controls; let i = index;"> |
||||
|
<div [formGroupName]="i" fxLayout="row" fxLayoutAlign="space-between stretch" fxLayoutGap="8px"> |
||||
|
<div fxLayout="column" fxLayoutAlign="center start"> |
||||
|
<mat-slide-toggle formControlName="enabled"></mat-slide-toggle> |
||||
|
</div> |
||||
|
<div [fxLayout]="alignment" [fxLayoutGap]="layoutGap" fxFlex> |
||||
|
<mat-form-field fxFlex> |
||||
|
<mat-label>{{'gateway.connector-type' | translate }}</mat-label> |
||||
|
<mat-select formControlName="configType" (selectionChange)="changeConnectorType(connector)"> |
||||
|
<mat-option *ngFor="let connectorType of connectorTypes" [value]="connectorType"> |
||||
|
{{ connectorType }} |
||||
|
</mat-option> |
||||
|
</mat-select> |
||||
|
<mat-error *ngIf="connector.get('configType').hasError('required')" translate> |
||||
|
gateway.connector-type-required |
||||
|
</mat-error> |
||||
|
</mat-form-field> |
||||
|
|
||||
|
<mat-form-field fxFlex> |
||||
|
<mat-label>{{ 'gateway.connector-name' | translate }}</mat-label> |
||||
|
<input matInput type="text" formControlName="name" (blur)="changeConnectorName(connector, i)"> |
||||
|
<mat-error *ngIf="connector.get('name').hasError('required')" translate> |
||||
|
gateway.connector-name-required |
||||
|
</mat-error> |
||||
|
</mat-form-field> |
||||
|
</div> |
||||
|
<div [fxLayout]="alignment" [fxLayoutGap]="layoutGap" |
||||
|
fxLayoutAlign="{{alignment == 'row' ? 'end center' : 'space-evenly center'}}" class="action-buttons"> |
||||
|
<button mat-icon-button (click)="openConfigDialog($event, i, connector.get('config').value, connector.get('name').value)" |
||||
|
matTooltip="{{ 'gateway.update-config' | translate }}" |
||||
|
matTooltipPosition="above" |
||||
|
[ngClass]="{'mat-warn': connector.get('config').invalid}"> |
||||
|
<mat-icon>more_horiz</mat-icon> |
||||
|
</button> |
||||
|
<button mat-icon-button (click)="removeConnector(i)" |
||||
|
matTooltip="{{ 'gateway.delete' | translate }}" |
||||
|
matTooltipPosition="above"> |
||||
|
<mat-icon>close</mat-icon> |
||||
|
</button> |
||||
|
</div> |
||||
|
</div> |
||||
|
</section> |
||||
|
<span [fxShow]="!connectors.length" fxLayoutAlign="center center" class="no-data-found">{{'gateway.no-connectors' | translate}}</span> |
||||
|
<div> |
||||
|
<button mat-raised-button type="button" (click)="addNewConnector()" |
||||
|
matTooltip="{{ 'gateway.connector-add' | translate }}" |
||||
|
matTooltipPosition="above"> |
||||
|
{{ 'action.add' | translate }} |
||||
|
</button> |
||||
|
</div> |
||||
|
</div > |
||||
|
</mat-expansion-panel> |
||||
|
</mat-accordion> |
||||
|
<section fxLayout="row" fxLayoutAlign="end center" class="form-action-buttons"> |
||||
|
<button mat-raised-button color="primary" type="button" |
||||
|
(click)="exportConfig()" |
||||
|
*ngIf="!gatewayConfigurationGroup.get('remoteConfiguration').value" |
||||
|
[disabled]="!gatewayConfigurationGroup.dirty || gatewayConfigurationGroup.invalid" |
||||
|
matTooltip="{{'gateway.download-tip' | translate }}"> |
||||
|
{{'action.download' | translate }} |
||||
|
</button> |
||||
|
|
||||
|
<button mat-raised-button color="primary" type="submit" |
||||
|
*ngIf="gatewayConfigurationGroup.get('remoteConfiguration').value" |
||||
|
[disabled]="!gatewayConfigurationGroup.dirty || gatewayConfigurationGroup.invalid" |
||||
|
matTooltip="{{'gateway.save-tip' | translate }}"> |
||||
|
{{'action.save' | translate }} |
||||
|
</button> |
||||
|
</section> |
||||
|
</form> |
||||
@ -0,0 +1,41 @@ |
|||||
|
/** |
||||
|
* Copyright © 2016-2020 The Thingsboard Authors |
||||
|
* |
||||
|
* Licensed 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. |
||||
|
*/ |
||||
|
:host{ |
||||
|
.gateway-form { |
||||
|
height: 100%; |
||||
|
padding: 5px; |
||||
|
background-color: transparent; |
||||
|
overflow-y: auto; |
||||
|
overflow-x: hidden; |
||||
|
|
||||
|
.form-action-buttons{ |
||||
|
padding-top: 8px; |
||||
|
} |
||||
|
|
||||
|
.gateway-config { |
||||
|
.no-data-found { |
||||
|
position: relative; |
||||
|
display: flex; |
||||
|
height: 40px; |
||||
|
text-transform: uppercase; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
::ng-deep .mat-form-field-infix { |
||||
|
width: auto !important; |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,407 @@ |
|||||
|
///
|
||||
|
/// Copyright © 2016-2020 The Thingsboard Authors
|
||||
|
///
|
||||
|
/// Licensed 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.
|
||||
|
///
|
||||
|
|
||||
|
import { Component, ElementRef, Inject, Input, NgZone, OnDestroy, OnInit, ViewChild } from '@angular/core'; |
||||
|
import { PageComponent } from '@shared/components/page.component'; |
||||
|
import { Store } from '@ngrx/store'; |
||||
|
import { AppState } from '@core/core.state'; |
||||
|
import { AbstractControl, FormArray, FormBuilder, FormGroup, NgForm, Validators } from '@angular/forms'; |
||||
|
import { WidgetContext } from '@home/models/widget-component.models'; |
||||
|
import { UtilsService } from '@core/services/utils.service'; |
||||
|
import { |
||||
|
CONFIGURATION_ATTRIBUTE, |
||||
|
CONFIGURATION_DRAFT_ATTRIBUTE, |
||||
|
ConnectorType, |
||||
|
createFormConfig, |
||||
|
CURRENT_CONFIGURATION_ATTRIBUTE, |
||||
|
DEFAULT_CONNECTOR, |
||||
|
gatewayConfigJSON, |
||||
|
GatewayFormConnectorModel, |
||||
|
GatewayFormModels, |
||||
|
GatewayLogLevel, |
||||
|
generateConnectorConfigFiles, |
||||
|
generateLogConfigFile, |
||||
|
generateYAMLConfigFile, |
||||
|
getDraftConnectorsJSON, |
||||
|
getEntityId, |
||||
|
REMOTE_LOGGING_LEVEL_ATTRIBUTE, |
||||
|
SecurityType, |
||||
|
SecurityTypeTranslationMap, |
||||
|
StorageType, |
||||
|
StorageTypeTranslationMap, |
||||
|
ValidateJSON, |
||||
|
WidgetSetting |
||||
|
} from './gateway-form.models'; |
||||
|
import { WINDOW } from '@core/services/window.service'; |
||||
|
import { MatDialog } from '@angular/material/dialog'; |
||||
|
import { |
||||
|
JsonObjectEditDialogComponent, |
||||
|
JsonObjectEditDialogData |
||||
|
} from '@shared/components/dialog/json-object-edit-dialog.component'; |
||||
|
import { TranslateService } from '@ngx-translate/core'; |
||||
|
import { DeviceService } from '@core/http/device.service'; |
||||
|
import { AttributeService } from '@core/http/attribute.service'; |
||||
|
import { AttributeData, AttributeScope } from '@shared/models/telemetry/telemetry.models'; |
||||
|
import { forkJoin, Observable } from 'rxjs'; |
||||
|
import { tap } from 'rxjs/operators'; |
||||
|
import { ImportExportService } from '@home/components/import-export/import-export.service'; |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'tb-gateway-form', |
||||
|
templateUrl: './gateway-form.component.html', |
||||
|
styleUrls: ['./gateway-form.component.scss'] |
||||
|
}) |
||||
|
|
||||
|
export class GatewayFormComponent extends PageComponent implements OnInit, OnDestroy { |
||||
|
constructor( |
||||
|
protected store: Store<AppState>, |
||||
|
private elementRef: ElementRef, |
||||
|
private utils: UtilsService, |
||||
|
private ngZone: NgZone, |
||||
|
private fb: FormBuilder, |
||||
|
@Inject(WINDOW) private window: Window, |
||||
|
private dialog: MatDialog, |
||||
|
private translate: TranslateService, |
||||
|
private deviceService: DeviceService, |
||||
|
private attributeService: AttributeService, |
||||
|
private importExport: ImportExportService |
||||
|
) { |
||||
|
super(store); |
||||
|
} |
||||
|
|
||||
|
get connectors(): FormArray { |
||||
|
return this.gatewayConfigurationGroup.get('connectors') as FormArray; |
||||
|
} |
||||
|
|
||||
|
@ViewChild('formContainer', {static: true}) formContainerRef: ElementRef<HTMLElement>; |
||||
|
@ViewChild('gatewayConfigurationForm', {static: true}) multipleInputForm: NgForm; |
||||
|
|
||||
|
private successfulSaved: string; |
||||
|
private gatewayNameExists: string; |
||||
|
private archiveFileName: string; |
||||
|
private formResizeListener: any; |
||||
|
private subscribeStorageType$: any; |
||||
|
private subscribeGateway$: any; |
||||
|
|
||||
|
alignment = 'row'; |
||||
|
layoutGap = '5px'; |
||||
|
gatewayType: string; |
||||
|
gatewayConfigurationGroup: FormGroup; |
||||
|
securityTypes = SecurityTypeTranslationMap; |
||||
|
gatewayLogLevels = Object.values(GatewayLogLevel); |
||||
|
connectorTypes = Object.keys(ConnectorType); |
||||
|
storageTypes = StorageTypeTranslationMap; |
||||
|
|
||||
|
toastTargetId = 'gateway-configuration-widget' + this.utils.guid(); |
||||
|
|
||||
|
@Input() |
||||
|
ctx: WidgetContext; |
||||
|
|
||||
|
ngOnInit(): void { |
||||
|
this.initWidgetSettings(this.ctx.settings); |
||||
|
|
||||
|
this.buildForm(); |
||||
|
this.ctx.updateWidgetParams(); |
||||
|
this.formResizeListener = this.resize.bind(this); |
||||
|
// @ts-ignore
|
||||
|
addResizeListener(this.formContainerRef.nativeElement, this.formResizeListener); |
||||
|
} |
||||
|
|
||||
|
ngOnDestroy(): void { |
||||
|
if (this.formResizeListener) { |
||||
|
// @ts-ignore
|
||||
|
removeResizeListener(this.formContainerRef.nativeElement, this.formResizeListener); |
||||
|
} |
||||
|
this.subscribeGateway$.unsubscribe(); |
||||
|
this.subscribeStorageType$.unsubscribe(); |
||||
|
} |
||||
|
|
||||
|
private initWidgetSettings(settings: WidgetSetting): void { |
||||
|
let widgetTitle; |
||||
|
if (settings.widgetTitle && settings.widgetTitle.length) { |
||||
|
widgetTitle = this.utils.customTranslation(settings.widgetTitle, settings.widgetTitle); |
||||
|
} else { |
||||
|
widgetTitle = this.translate.instant('gateway.gateway'); |
||||
|
} |
||||
|
this.ctx.widgetTitle = widgetTitle; |
||||
|
|
||||
|
this.archiveFileName = settings.archiveFileName?.length ? settings.archiveFileName : 'gatewayConfiguration'; |
||||
|
this.gatewayType = settings.gatewayType?.length ? settings.gatewayType : 'Gateway'; |
||||
|
this.gatewayNameExists = this.utils.customTranslation(settings.gatewayNameExists, settings.gatewayNameExists) || this.translate.instant('gateway.gateway-exists'); |
||||
|
this.successfulSaved = this.utils.customTranslation(settings.successfulSave, settings.successfulSave) || this.translate.instant('gateway.gateway-saved'); |
||||
|
|
||||
|
this.updateWidgetDisplaying(); |
||||
|
} |
||||
|
|
||||
|
private resize(): void { |
||||
|
this.ngZone.run(() => { |
||||
|
this.updateWidgetDisplaying(); |
||||
|
this.ctx.detectChanges(); |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
private updateWidgetDisplaying(): void { |
||||
|
if(this.ctx.$container && this.ctx.$container[0].offsetWidth <= 425){ |
||||
|
this.layoutGap = '0'; |
||||
|
this.alignment = 'column'; |
||||
|
} else { |
||||
|
this.layoutGap = '5px'; |
||||
|
this.alignment = 'row'; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
private saveAttribute(attributeName: string, attributeValue: string, attributeScope: AttributeScope): Observable<any> { |
||||
|
const gatewayId = this.gatewayConfigurationGroup.get('gateway').value; |
||||
|
const attributes: AttributeData = { |
||||
|
key: attributeName, |
||||
|
value: attributeValue |
||||
|
}; |
||||
|
return this.attributeService.saveEntityAttributes(getEntityId(gatewayId), attributeScope, [attributes]); |
||||
|
} |
||||
|
|
||||
|
private createConnector(setting: GatewayFormConnectorModel = DEFAULT_CONNECTOR): void { |
||||
|
this.connectors.push(this.fb.group({ |
||||
|
enabled: [setting.enabled], |
||||
|
configType: [setting.configType, [Validators.required]], |
||||
|
name: [setting.name, [Validators.required]], |
||||
|
config: [setting.config, [Validators.nullValidator, ValidateJSON]] |
||||
|
})); |
||||
|
} |
||||
|
|
||||
|
private getFormField(name: string): AbstractControl { |
||||
|
return this.gatewayConfigurationGroup.get(name); |
||||
|
} |
||||
|
|
||||
|
private buildForm(): void { |
||||
|
this.gatewayConfigurationGroup = this.fb.group({ |
||||
|
gateway: [null], |
||||
|
accessToken: [null, [Validators.required]], |
||||
|
securityType: [SecurityType.accessToken], |
||||
|
host: [this.window.location.hostname, [Validators.required]], |
||||
|
port: [1883, [Validators.required, Validators.min(1), Validators.max(65535), Validators.pattern(/^-?[0-9]+$/)]], |
||||
|
remoteConfiguration: [true], |
||||
|
caCertPath: ['/etc/thingsboard-gateway/ca.pem'], |
||||
|
privateKeyPath: ['/etc/thingsboard-gateway/privateKey.pem'], |
||||
|
certPath: ['/etc/thingsboard-gateway/certificate.pem'], |
||||
|
remoteLoggingLevel: [GatewayLogLevel.debug], |
||||
|
remoteLoggingPathToLogs: ['./logs/', [Validators.required]], |
||||
|
storageType: [StorageType.memory], |
||||
|
readRecordsCount: [100, [Validators.required, Validators.min(1), Validators.pattern(/^-?[0-9]+$/)]], |
||||
|
maxRecordsCount: [10000, [Validators.required, Validators.min(1), Validators.pattern(/^-?[0-9]+$/)]], |
||||
|
maxFilesCount: [5, [Validators.required, Validators.min(1), Validators.pattern(/^-?[0-9]+$/)]], |
||||
|
dataFolderPath: ['./data/', [Validators.required]], |
||||
|
connectors: this.fb.array([]) |
||||
|
}); |
||||
|
|
||||
|
this.subscribeStorageType$ = this.getFormField('storageType').valueChanges.subscribe((value: StorageType) => { |
||||
|
if (value === StorageType.memory) { |
||||
|
this.getFormField('maxFilesCount').disable(); |
||||
|
this.getFormField('dataFolderPath').disable(); |
||||
|
} else { |
||||
|
this.getFormField('maxFilesCount').enable(); |
||||
|
this.getFormField('dataFolderPath').enable(); |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
this.subscribeGateway$ = this.getFormField('gateway').valueChanges.subscribe((gatewayId: string) => { |
||||
|
if (gatewayId !== null) { |
||||
|
forkJoin([ |
||||
|
this.deviceService.getDeviceCredentials(gatewayId).pipe(tap(deviceCredential => { |
||||
|
this.getFormField('accessToken').patchValue(deviceCredential.credentialsId); |
||||
|
})), |
||||
|
...this.getAttributes(gatewayId)]).subscribe(() => { |
||||
|
this.gatewayConfigurationGroup.markAsPristine(); |
||||
|
this.ctx.detectChanges(); |
||||
|
}); |
||||
|
} else { |
||||
|
this.getFormField('accessToken').patchValue(''); |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
gatewayExist(): void { |
||||
|
this.ctx.showErrorToast(this.gatewayNameExists, 'top', 'left', this.toastTargetId); |
||||
|
} |
||||
|
|
||||
|
exportConfig(): void { |
||||
|
const gatewayConfiguration: GatewayFormModels = this.gatewayConfigurationGroup.value; |
||||
|
const filesZip: any = {}; |
||||
|
filesZip['tb_gateway.yaml'] = generateYAMLConfigFile(gatewayConfiguration); |
||||
|
generateConnectorConfigFiles(filesZip, gatewayConfiguration.connectors); |
||||
|
generateLogConfigFile(filesZip, gatewayConfiguration.remoteLoggingLevel, gatewayConfiguration.remoteLoggingPathToLogs); |
||||
|
this.importExport.exportJSZip(filesZip, this.archiveFileName); |
||||
|
this.saveAttribute( |
||||
|
REMOTE_LOGGING_LEVEL_ATTRIBUTE, |
||||
|
this.gatewayConfigurationGroup.value.remoteLoggingLevel.toUpperCase(), |
||||
|
AttributeScope.SHARED_SCOPE); |
||||
|
} |
||||
|
|
||||
|
addNewConnector(): void { |
||||
|
this.createConnector(); |
||||
|
} |
||||
|
|
||||
|
removeConnector(index: number): void { |
||||
|
if (index > -1) { |
||||
|
this.connectors.removeAt(index); |
||||
|
this.connectors.markAsDirty(); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
openConfigDialog($event: Event, index: number, config: object, type: string): void { |
||||
|
if ($event) { |
||||
|
$event.stopPropagation(); |
||||
|
$event.preventDefault(); |
||||
|
} |
||||
|
this.dialog.open<JsonObjectEditDialogComponent, JsonObjectEditDialogData, object>(JsonObjectEditDialogComponent, { |
||||
|
disableClose: true, |
||||
|
panelClass: ['tb-dialog', 'tb-fullscreen-dialog'], |
||||
|
data: { |
||||
|
jsonValue: config, |
||||
|
title: this.translate.instant('gateway.title-connectors-json', {typeName: type}) |
||||
|
} |
||||
|
}).afterClosed().subscribe( |
||||
|
(res) => { |
||||
|
if (res) { |
||||
|
this.connectors.at(index).get('config').patchValue(res); |
||||
|
this.ctx.detectChanges(); |
||||
|
} |
||||
|
} |
||||
|
); |
||||
|
} |
||||
|
|
||||
|
private createConnectorName(connectors: GatewayFormConnectorModel[], name: string, index: number = 0): string { |
||||
|
const newKeyName = index ? name + index : name; |
||||
|
const indexRes = connectors.findIndex((element) => element.name === newKeyName); |
||||
|
return indexRes === -1 ? newKeyName : this.createConnectorName(connectors, name, ++index); |
||||
|
} |
||||
|
|
||||
|
private validateConnectorName(connectors: GatewayFormConnectorModel[], name: string, connectorIndex: number, index = 0): string { |
||||
|
for (let i = 0; i < connectors.length; i++) { |
||||
|
const nameEq = (index === 0) ? name : name + index; |
||||
|
if (i !== connectorIndex && connectors[i].name === nameEq) { |
||||
|
this.validateConnectorName(connectors, name, connectorIndex, ++index); |
||||
|
} |
||||
|
} |
||||
|
return (index === 0) ? name : name + index; |
||||
|
} |
||||
|
|
||||
|
changeConnectorType(connector: AbstractControl): void { |
||||
|
if (!connector.get('name').value) { |
||||
|
const typeConnector = connector.get('configType').value; |
||||
|
const connectors = this.gatewayConfigurationGroup.value.connectors; |
||||
|
connector.get('name').patchValue(this.createConnectorName(connectors, ConnectorType[typeConnector])); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
changeConnectorName(connector: AbstractControl, index: number): void { |
||||
|
const connectors = this.gatewayConfigurationGroup.value.connectors; |
||||
|
connector.get('name').patchValue(this.validateConnectorName(connectors, connector.get('name').value, index)); |
||||
|
} |
||||
|
|
||||
|
save(): void { |
||||
|
const gatewayConfiguration: GatewayFormModels = this.gatewayConfigurationGroup.value; |
||||
|
forkJoin([ |
||||
|
this.saveAttribute( |
||||
|
CONFIGURATION_ATTRIBUTE, |
||||
|
window.btoa(JSON.stringify(gatewayConfigJSON(gatewayConfiguration))), |
||||
|
AttributeScope.SHARED_SCOPE), |
||||
|
this.saveAttribute( |
||||
|
CONFIGURATION_DRAFT_ATTRIBUTE, |
||||
|
window.btoa(JSON.stringify(getDraftConnectorsJSON(gatewayConfiguration.connectors))), |
||||
|
AttributeScope.SERVER_SCOPE), |
||||
|
this.saveAttribute( |
||||
|
REMOTE_LOGGING_LEVEL_ATTRIBUTE, |
||||
|
this.gatewayConfigurationGroup.value.remoteLoggingLevel.toUpperCase(), |
||||
|
AttributeScope.SHARED_SCOPE) |
||||
|
]).subscribe(() =>{ |
||||
|
this.ctx.showSuccessToast(this.successfulSaved, |
||||
|
2000, 'top', 'left', this.toastTargetId); |
||||
|
this.gatewayConfigurationGroup.markAsPristine(); |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
private getAttributes(gatewayId: string): Array<Observable<Array<AttributeData>>> { |
||||
|
const tasks = []; |
||||
|
tasks.push(forkJoin([this.getAttribute(CURRENT_CONFIGURATION_ATTRIBUTE, AttributeScope.CLIENT_SCOPE, gatewayId), |
||||
|
this.getAttribute(CONFIGURATION_DRAFT_ATTRIBUTE, AttributeScope.SERVER_SCOPE, gatewayId)]).pipe( |
||||
|
tap(([currentConfig, draftConfig]) => { |
||||
|
this.setFormGatewaySettings(currentConfig); |
||||
|
this.setFormConnectorsDraft(draftConfig); |
||||
|
}) |
||||
|
) |
||||
|
); |
||||
|
tasks.push(this.getAttribute(REMOTE_LOGGING_LEVEL_ATTRIBUTE, AttributeScope.SHARED_SCOPE, gatewayId).pipe( |
||||
|
tap(logsLevel => this.processLoggingLevel(logsLevel)) |
||||
|
)); |
||||
|
return tasks; |
||||
|
} |
||||
|
|
||||
|
private getAttribute(attributeName: string, attributeScope: AttributeScope, gatewayId: string): Observable<Array<AttributeData>> { |
||||
|
return this.attributeService.getEntityAttributes(getEntityId(gatewayId), attributeScope, [attributeName]); |
||||
|
} |
||||
|
|
||||
|
private setFormGatewaySettings(response: Array<AttributeData>): void { |
||||
|
this.connectors.clear(); |
||||
|
if (response.length > 0) { |
||||
|
const attribute = JSON.parse(window.atob(response[0].value)); |
||||
|
for (const attributeKey of Object.keys(attribute)) { |
||||
|
const keyValue = attribute[attributeKey]; |
||||
|
if (attributeKey === 'thingsboard') { |
||||
|
if (keyValue !== null && Object.keys(keyValue).length > 0) { |
||||
|
this.gatewayConfigurationGroup.patchValue(createFormConfig(keyValue)); |
||||
|
} |
||||
|
} else { |
||||
|
for (const connector of Object.keys(keyValue)) { |
||||
|
let name = 'No name'; |
||||
|
if (Object.prototype.hasOwnProperty.call(keyValue[connector], 'name')) { |
||||
|
name = keyValue[connector].name; |
||||
|
} |
||||
|
const newConnector: GatewayFormConnectorModel = { |
||||
|
enabled: true, |
||||
|
configType: (attributeKey as ConnectorType), |
||||
|
config: keyValue[connector].config, |
||||
|
name |
||||
|
}; |
||||
|
this.createConnector(newConnector); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
private setFormConnectorsDraft(response: Array<AttributeData>): void { |
||||
|
if (response.length > 0) { |
||||
|
const attribute = JSON.parse(window.atob(response[0].value)); |
||||
|
for (const connectorName of Object.keys(attribute)) { |
||||
|
const newConnector: GatewayFormConnectorModel = { |
||||
|
enabled: false, |
||||
|
configType: (attribute[connectorName].connector as ConnectorType), |
||||
|
config: attribute[connectorName].config, |
||||
|
name: connectorName |
||||
|
}; |
||||
|
this.createConnector(newConnector); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
private processLoggingLevel(value: Array<AttributeData>): void { |
||||
|
let logsLevel = GatewayLogLevel.debug; |
||||
|
if (value.length > 0 && GatewayLogLevel[value[0].value.toLowerCase()]) { |
||||
|
logsLevel = GatewayLogLevel[value[0].value.toLowerCase()]; |
||||
|
} |
||||
|
this.getFormField('remoteLoggingLevel').patchValue(logsLevel); |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,374 @@ |
|||||
|
///
|
||||
|
/// Copyright © 2016-2020 The Thingsboard Authors
|
||||
|
///
|
||||
|
/// Licensed 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.
|
||||
|
///
|
||||
|
|
||||
|
import { AbstractControl, ValidationErrors } from '@angular/forms'; |
||||
|
import { EntityId } from '@shared/models/id/entity-id'; |
||||
|
import { EntityType } from '@shared/models/entity-type.models'; |
||||
|
|
||||
|
export enum SecurityType { |
||||
|
tls = 'tls', |
||||
|
accessToken = 'accessToken' |
||||
|
} |
||||
|
|
||||
|
export interface WidgetSetting { |
||||
|
widgetTitle: string; |
||||
|
archiveFileName: string; |
||||
|
gatewayType: string; |
||||
|
successfulSave: string; |
||||
|
gatewayNameExists: string; |
||||
|
} |
||||
|
|
||||
|
export const CURRENT_CONFIGURATION_ATTRIBUTE = 'current_configuration'; |
||||
|
export const CONFIGURATION_DRAFT_ATTRIBUTE = 'configuration_drafts'; |
||||
|
export const CONFIGURATION_ATTRIBUTE = 'configuration'; |
||||
|
export const REMOTE_LOGGING_LEVEL_ATTRIBUTE = 'RemoteLoggingLevel'; |
||||
|
|
||||
|
export const SecurityTypeTranslationMap = new Map<SecurityType, string>( |
||||
|
[ |
||||
|
[SecurityType.tls, 'gateway.security-types.tls'], |
||||
|
[SecurityType.accessToken, 'gateway.security-types.access-token'] |
||||
|
] |
||||
|
); |
||||
|
|
||||
|
export enum GatewayLogLevel { |
||||
|
none = 'NONE', |
||||
|
critical = 'CRITICAL', |
||||
|
error = 'ERROR', |
||||
|
warning = 'WARNING', |
||||
|
info = 'INFO', |
||||
|
debug = 'DEBUG' |
||||
|
} |
||||
|
|
||||
|
export enum StorageType { |
||||
|
memory = 'memory', |
||||
|
file = 'file' |
||||
|
} |
||||
|
|
||||
|
export const StorageTypeTranslationMap = new Map<StorageType, string>( |
||||
|
[ |
||||
|
[StorageType.memory, 'gateway.storage-types.memory-storage'], |
||||
|
[StorageType.file, 'gateway.storage-types.file-storage'] |
||||
|
] |
||||
|
); |
||||
|
|
||||
|
export enum ConnectorType { |
||||
|
mqtt= 'MQTT', |
||||
|
modbus = 'Modbus', |
||||
|
opc_ua = 'OPC-UA', |
||||
|
ble = 'BLE' |
||||
|
} |
||||
|
|
||||
|
export interface GatewayFormModels { |
||||
|
gateway?: string; |
||||
|
accessToken?: string; |
||||
|
securityType?: SecurityType; |
||||
|
host?: string; |
||||
|
port?: number; |
||||
|
remoteConfiguration?: boolean; |
||||
|
caCertPath?: string; |
||||
|
privateKeyPath?: string; |
||||
|
certPath?: string; |
||||
|
remoteLoggingLevel?: GatewayLogLevel; |
||||
|
remoteLoggingPathToLogs?:string; |
||||
|
storageType?: StorageType; |
||||
|
readRecordsCount?: number; |
||||
|
maxRecordsCount?: number; |
||||
|
maxFilesCount?: number; |
||||
|
dataFolderPath?: number; |
||||
|
connectors?: Array<GatewayFormConnectorModel>; |
||||
|
} |
||||
|
|
||||
|
export interface GatewayFormConnectorModel { |
||||
|
config: object; |
||||
|
name: string; |
||||
|
configType: ConnectorType; |
||||
|
enabled: boolean; |
||||
|
} |
||||
|
|
||||
|
export const DEFAULT_CONNECTOR: GatewayFormConnectorModel = { |
||||
|
config: {}, |
||||
|
name: '', |
||||
|
configType: null, |
||||
|
enabled: false |
||||
|
}; |
||||
|
|
||||
|
type Connector = { |
||||
|
[key in ConnectorType]?: Array<ConnectorConfig>; |
||||
|
} |
||||
|
|
||||
|
interface GatewaySetting extends Connector{ |
||||
|
thingsboard: GatewayMainSetting; |
||||
|
} |
||||
|
|
||||
|
interface ConnectorConfig { |
||||
|
name: string; |
||||
|
config: object; |
||||
|
} |
||||
|
|
||||
|
interface GatewayMainSetting { |
||||
|
thingsboard: GatewayMainThingsboardSetting; |
||||
|
connectors: Array<GatewayMainConnector>, |
||||
|
logs: string, |
||||
|
storage: GatewayStorage |
||||
|
} |
||||
|
|
||||
|
interface GatewayMainThingsboardSetting { |
||||
|
host: string, |
||||
|
remoteConfiguration: boolean, |
||||
|
port: number, |
||||
|
security: GatewaySecurity |
||||
|
} |
||||
|
|
||||
|
type GatewaySecurity = SecurityToken | SecurityCertificate; |
||||
|
|
||||
|
interface SecurityToken { |
||||
|
accessToken: string; |
||||
|
} |
||||
|
|
||||
|
interface SecurityCertificate { |
||||
|
caCert: string; |
||||
|
privateKey: string; |
||||
|
cert: string; |
||||
|
} |
||||
|
|
||||
|
type GatewayStorage = GatewayStorageMemory | GatewayStorageFile; |
||||
|
|
||||
|
interface GatewayStorageMemory { |
||||
|
type: string; |
||||
|
max_records_count: number; |
||||
|
read_records_count: number; |
||||
|
} |
||||
|
|
||||
|
interface GatewayStorageFile { |
||||
|
type: string; |
||||
|
data_folder_path: number; |
||||
|
max_file_count: number; |
||||
|
max_read_records_count: number; |
||||
|
max_records_per_file: number; |
||||
|
} |
||||
|
|
||||
|
interface GatewayMainConnector { |
||||
|
configuration: string; |
||||
|
name: string; |
||||
|
type: ConnectorType; |
||||
|
} |
||||
|
|
||||
|
export function ValidateJSON(control: AbstractControl): ValidationErrors | null { |
||||
|
if (JSON.stringify(control.value) === JSON.stringify({})) { |
||||
|
return { validJSON: true }; |
||||
|
} |
||||
|
return null; |
||||
|
} |
||||
|
|
||||
|
const TEMPLATE_LOGS_CONFIG = '[loggers]}}keys=root, service, connector, converter, tb_connection, storage, extension}}[handlers]}}keys=consoleHandler, serviceHandler, connectorHandler, converterHandler, tb_connectionHandler, storageHandler, extensionHandler}}[formatters]}}keys=LogFormatter}}[logger_root]}}level=ERROR}}handlers=consoleHandler}}[logger_connector]}}level={ERROR}}}handlers=connectorHandler}}formatter=LogFormatter}}qualname=connector}}[logger_storage]}}level={ERROR}}}handlers=storageHandler}}formatter=LogFormatter}}qualname=storage}}[logger_tb_connection]}}level={ERROR}}}handlers=tb_connectionHandler}}formatter=LogFormatter}}qualname=tb_connection}}[logger_service]}}level={ERROR}}}handlers=serviceHandler}}formatter=LogFormatter}}qualname=service}}[logger_converter]}}level={ERROR}}}handlers=connectorHandler}}formatter=LogFormatter}}qualname=converter}}[logger_extension]}}level={ERROR}}}handlers=connectorHandler}}formatter=LogFormatter}}qualname=extension}}[handler_consoleHandler]}}class=StreamHandler}}level={ERROR}}}formatter=LogFormatter}}args=(sys.stdout,)}}[handler_connectorHandler]}}level={ERROR}}}class=logging.handlers.TimedRotatingFileHandler}}formatter=LogFormatter}}args=("{./logs/}connector.log", "d", 1, 7,)}}[handler_storageHandler]}}level={ERROR}}}class=logging.handlers.TimedRotatingFileHandler}}formatter=LogFormatter}}args=("{./logs/}storage.log", "d", 1, 7,)}}[handler_serviceHandler]}}level={ERROR}}}class=logging.handlers.TimedRotatingFileHandler}}formatter=LogFormatter}}args=("{./logs/}service.log", "d", 1, 7,)}}[handler_converterHandler]}}level={ERROR}}}class=logging.handlers.TimedRotatingFileHandler}}formatter=LogFormatter}}args=("{./logs/}converter.log", "d", 1, 3,)}}[handler_extensionHandler]}}level={ERROR}}}class=logging.handlers.TimedRotatingFileHandler}}formatter=LogFormatter}}args=("{./logs/}extension.log", "d", 1, 3,)}}[handler_tb_connectionHandler]}}level={ERROR}}}class=logging.handlers.TimedRotatingFileHandler}}formatter=LogFormatter}}args=("{./logs/}tb_connection.log", "d", 1, 3,)}}[formatter_LogFormatter]}}format="%(asctime)s - %(levelname)s - [%(filename)s] - %(module)s - %(lineno)d - %(message)s" }}datefmt="%Y-%m-%d %H:%M:%S"'; |
||||
|
|
||||
|
export function generateYAMLConfigFile(gatewaySetting: GatewayFormModels): string { |
||||
|
let config; |
||||
|
config = 'thingsboard:\n'; |
||||
|
config += ' host: ' + gatewaySetting.host + '\n'; |
||||
|
config += ' remoteConfiguration: ' + gatewaySetting.remoteConfiguration + '\n'; |
||||
|
config += ' port: ' + gatewaySetting.port + '\n'; |
||||
|
config += ' security:\n'; |
||||
|
if (gatewaySetting.securityType === SecurityType.accessToken) { |
||||
|
config += ' access-token: ' + gatewaySetting.accessToken + '\n'; |
||||
|
} else { |
||||
|
config += ' ca_cert: ' + gatewaySetting.caCertPath + '\n'; |
||||
|
config += ' privateKey: ' + gatewaySetting.privateKeyPath + '\n'; |
||||
|
config += ' cert: ' + gatewaySetting.certPath + '\n'; |
||||
|
} |
||||
|
config += 'storage:\n'; |
||||
|
if (gatewaySetting.storageType === StorageType.memory) { |
||||
|
config += ' type: memory\n'; |
||||
|
config += ' read_records_count: ' + gatewaySetting.readRecordsCount + '\n'; |
||||
|
config += ' max_records_count: ' + gatewaySetting.maxRecordsCount + '\n'; |
||||
|
} else { |
||||
|
config += ' type: file\n'; |
||||
|
config += ' data_folder_path: ' + gatewaySetting.dataFolderPath + '\n'; |
||||
|
config += ' max_file_count: ' + gatewaySetting.maxFilesCount + '\n'; |
||||
|
config += ' max_read_records_count: ' + gatewaySetting.readRecordsCount + '\n'; |
||||
|
config += ' max_records_per_file: ' + gatewaySetting.maxRecordsCount + '\n'; |
||||
|
} |
||||
|
config += 'connectors:\n'; |
||||
|
for(const connector of gatewaySetting.connectors){ |
||||
|
if (connector.enabled) { |
||||
|
config += ' -\n'; |
||||
|
config += ' name: ' + connector.name + '\n'; |
||||
|
config += ' type: ' + connector.configType + '\n'; |
||||
|
config += ' configuration: ' + generateFileName(connector.name) + '\n'; |
||||
|
} |
||||
|
} |
||||
|
return config; |
||||
|
} |
||||
|
|
||||
|
export function generateConnectorConfigFiles(fileZipAdd: object, connectors: Array<GatewayFormConnectorModel>): void { |
||||
|
for(const connector of connectors) { |
||||
|
if (connector.enabled) { |
||||
|
fileZipAdd[generateFileName(connector.name)] = JSON.stringify(connector.config); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
function generateFileName(fileName): string { |
||||
|
return fileName.replace('_', '') |
||||
|
.replace('-', '') |
||||
|
.replace(/^\s+|\s+/g, '') |
||||
|
.toLowerCase() + '.json'; |
||||
|
} |
||||
|
|
||||
|
export function generateLogConfigFile(fileZipAdd: object, logsLevel: string, logsPath: string): void { |
||||
|
fileZipAdd['logs.conf'] = getLogsConfig(logsLevel, logsPath); |
||||
|
} |
||||
|
|
||||
|
function getLogsConfig(logsLevel: string, logsPath: string): string { |
||||
|
return TEMPLATE_LOGS_CONFIG |
||||
|
.replace(/{ERROR}/g, logsLevel) |
||||
|
.replace(/{.\/logs\/}/g, logsPath); |
||||
|
} |
||||
|
|
||||
|
export function getEntityId(gatewayId: string): EntityId { |
||||
|
return { |
||||
|
id: gatewayId, |
||||
|
entityType: EntityType.DEVICE |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
export function createFormConfig(keyValue: GatewayMainSetting): GatewayFormModels { |
||||
|
const formSetting: GatewayFormModels = {}; |
||||
|
if (Object.prototype.hasOwnProperty.call(keyValue, 'thingsboard')) { |
||||
|
formSetting.host = keyValue.thingsboard.host; |
||||
|
formSetting.port = keyValue.thingsboard.port; |
||||
|
formSetting.remoteConfiguration = keyValue.thingsboard.remoteConfiguration; |
||||
|
if (Object.prototype.hasOwnProperty.call(keyValue.thingsboard.security, SecurityType.accessToken)) { |
||||
|
formSetting.securityType = SecurityType.accessToken; |
||||
|
formSetting.accessToken = (keyValue.thingsboard.security as SecurityToken).accessToken; |
||||
|
} else { |
||||
|
formSetting.securityType = SecurityType.tls; |
||||
|
formSetting.caCertPath = (keyValue.thingsboard.security as SecurityCertificate).caCert; |
||||
|
formSetting.privateKeyPath = (keyValue.thingsboard.security as SecurityCertificate).privateKey; |
||||
|
formSetting.certPath = (keyValue.thingsboard.security as SecurityCertificate).cert; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
if (Object.prototype.hasOwnProperty.call(keyValue, 'storage') && Object.prototype.hasOwnProperty.call(keyValue.storage, 'type')) { |
||||
|
if (keyValue.storage.type === StorageType.memory) { |
||||
|
formSetting.storageType = StorageType.memory; |
||||
|
formSetting.readRecordsCount = (keyValue.storage as GatewayStorageMemory).read_records_count; |
||||
|
formSetting.maxRecordsCount = (keyValue.storage as GatewayStorageMemory).max_records_count; |
||||
|
} else if (keyValue.storage.type === StorageType.file) { |
||||
|
formSetting.storageType = StorageType.file; |
||||
|
formSetting.dataFolderPath = (keyValue.storage as GatewayStorageFile).data_folder_path; |
||||
|
formSetting.maxFilesCount = (keyValue.storage as GatewayStorageFile).max_file_count; |
||||
|
formSetting.readRecordsCount = (keyValue.storage as GatewayStorageMemory).read_records_count; |
||||
|
formSetting.maxRecordsCount = (keyValue.storage as GatewayStorageMemory).max_records_count; |
||||
|
} |
||||
|
} |
||||
|
return formSetting; |
||||
|
} |
||||
|
|
||||
|
export function getDraftConnectorsJSON(currentConnectors: Array<GatewayFormConnectorModel>) { |
||||
|
const draftConnectors = {}; |
||||
|
for(const connector of currentConnectors){ |
||||
|
if (!connector.enabled) { |
||||
|
draftConnectors[connector.name] = { |
||||
|
connector: connector.configType, |
||||
|
config: connector.config |
||||
|
}; |
||||
|
} |
||||
|
} |
||||
|
return draftConnectors; |
||||
|
} |
||||
|
|
||||
|
export function gatewayConfigJSON(gatewayConfiguration: GatewayFormModels): GatewaySetting { |
||||
|
const gatewayConfig = { |
||||
|
thingsboard: gatewayMainConfigJSON(gatewayConfiguration) |
||||
|
}; |
||||
|
gatewayConnectorJSON(gatewayConfig, gatewayConfiguration.connectors); |
||||
|
return gatewayConfig; |
||||
|
} |
||||
|
|
||||
|
function gatewayMainConfigJSON(gatewayConfiguration: GatewayFormModels): GatewayMainSetting { |
||||
|
let security: GatewaySecurity; |
||||
|
if (gatewayConfiguration.securityType === SecurityType.accessToken) { |
||||
|
security = { |
||||
|
accessToken: gatewayConfiguration.accessToken |
||||
|
} |
||||
|
} else { |
||||
|
security = { |
||||
|
caCert: gatewayConfiguration.caCertPath, |
||||
|
privateKey: gatewayConfiguration.privateKeyPath, |
||||
|
cert: gatewayConfiguration.certPath |
||||
|
} |
||||
|
} |
||||
|
const thingsboard: GatewayMainThingsboardSetting = { |
||||
|
host: gatewayConfiguration.host, |
||||
|
remoteConfiguration: gatewayConfiguration.remoteConfiguration, |
||||
|
port: gatewayConfiguration.port, |
||||
|
security |
||||
|
}; |
||||
|
|
||||
|
let storage: GatewayStorage; |
||||
|
if (gatewayConfiguration.storageType === StorageType.memory) { |
||||
|
storage = { |
||||
|
type: StorageType.memory, |
||||
|
read_records_count: gatewayConfiguration.readRecordsCount, |
||||
|
max_records_count: gatewayConfiguration.maxRecordsCount |
||||
|
}; |
||||
|
} else { |
||||
|
storage = { |
||||
|
type: StorageType.file, |
||||
|
data_folder_path: gatewayConfiguration.dataFolderPath, |
||||
|
max_file_count: gatewayConfiguration.maxFilesCount, |
||||
|
max_read_records_count: gatewayConfiguration.readRecordsCount, |
||||
|
max_records_per_file: gatewayConfiguration.maxRecordsCount |
||||
|
}; |
||||
|
} |
||||
|
|
||||
|
const connectors: Array<GatewayMainConnector> = []; |
||||
|
for (const connector of gatewayConfiguration.connectors) { |
||||
|
if (connector.enabled) { |
||||
|
const connectorConfig: GatewayMainConnector = { |
||||
|
configuration: generateFileName(connector.name), |
||||
|
name: connector.name, |
||||
|
type: connector.configType |
||||
|
}; |
||||
|
connectors.push(connectorConfig); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
return { |
||||
|
thingsboard, |
||||
|
connectors, |
||||
|
storage, |
||||
|
logs: window.btoa(getLogsConfig(gatewayConfiguration.remoteLoggingLevel, gatewayConfiguration.remoteLoggingPathToLogs)) |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
function gatewayConnectorJSON(gatewayConfiguration, currentConnectors: Array<GatewayFormConnectorModel>): void { |
||||
|
for (const connector of currentConnectors) { |
||||
|
if (connector.enabled) { |
||||
|
const typeConnector = connector.configType; |
||||
|
if (!Array.isArray(gatewayConfiguration[typeConnector])) { |
||||
|
gatewayConfiguration[typeConnector] = []; |
||||
|
} |
||||
|
|
||||
|
const connectorConfig: ConnectorConfig = { |
||||
|
name: connector.name, |
||||
|
config: connector.config |
||||
|
}; |
||||
|
gatewayConfiguration[typeConnector].push(connectorConfig); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,56 @@ |
|||||
|
<!-- |
||||
|
|
||||
|
Copyright © 2016-2020 The Thingsboard Authors |
||||
|
|
||||
|
Licensed 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. |
||||
|
|
||||
|
--> |
||||
|
<mat-form-field [formGroup]="selectDeviceGatewayFormGroup" class="mat-block"> |
||||
|
<input matInput type="text" #deviceGatewayInput placeholder="{{ 'gateway.gateway-name' | translate }}" |
||||
|
formControlName="gateway" |
||||
|
(focusin)="onFocus()" |
||||
|
[required]="required" |
||||
|
(keydown)="gatewayNameEnter($event)" |
||||
|
(keypress)="gatewayNameEnter($event)" |
||||
|
[matAutocomplete]="gatewayAutocomplete" |
||||
|
> |
||||
|
<button *ngIf="selectDeviceGatewayFormGroup.get('gateway').value" (click)="clear()" |
||||
|
type="button" matSuffix mat-icon-button aria-label="Clear"> |
||||
|
<mat-icon class="material-icons">close</mat-icon> |
||||
|
</button> |
||||
|
<mat-autocomplete class="tb-autocomplete" |
||||
|
#gatewayAutocomplete="matAutocomplete" |
||||
|
[displayWith]="displayGatewayFn"> |
||||
|
<mat-option *ngFor="let gateway of filteredGateways | async" [value]="gateway"> |
||||
|
<span [innerHTML]="gateway.name | highlight:searchText"></span> |
||||
|
</mat-option> |
||||
|
<mat-option *ngIf="!(filteredGateways | async)?.length" [value]="null" class="tb-not-found"> |
||||
|
<div class="tb-not-found-content" (click)="$event.stopPropagation()"> |
||||
|
<div *ngIf="!textIsNotEmpty(searchText); else searchNotEmpty"> |
||||
|
<span translate>gateway.no-gateway-found</span> |
||||
|
</div> |
||||
|
<ng-template #searchNotEmpty> |
||||
|
<span translate [translateParams]="{item: searchText | truncate:true:6:'...'}"> |
||||
|
gateway.no-gateway-matching |
||||
|
</span> |
||||
|
</ng-template> |
||||
|
<span> |
||||
|
<a translate (click)="createGateway($event, searchText)">gateway.create-new-gateway</a> |
||||
|
</span> |
||||
|
</div> |
||||
|
</mat-option> |
||||
|
</mat-autocomplete> |
||||
|
<mat-error *ngIf="selectDeviceGatewayFormGroup.get('gateway').hasError('required')"> |
||||
|
{{ 'gateway.gateway-name-required' | translate }} |
||||
|
</mat-error> |
||||
|
</mat-form-field> |
||||
@ -0,0 +1,223 @@ |
|||||
|
///
|
||||
|
/// Copyright © 2016-2020 The Thingsboard Authors
|
||||
|
///
|
||||
|
/// Licensed 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.
|
||||
|
///
|
||||
|
|
||||
|
import { Component, ElementRef, EventEmitter, forwardRef, Input, OnInit, Output, ViewChild } from '@angular/core'; |
||||
|
import { ControlValueAccessor, FormBuilder, FormGroup, NG_VALUE_ACCESSOR } from '@angular/forms'; |
||||
|
import { Store } from '@ngrx/store'; |
||||
|
import { AppState } from '@core/core.state'; |
||||
|
import { coerceBooleanProperty } from '@angular/cdk/coercion'; |
||||
|
import { ENTER } from '@angular/cdk/keycodes'; |
||||
|
import { Observable, of } from 'rxjs'; |
||||
|
import { filter, map, mergeMap, reduce, share, switchMap, tap } from 'rxjs/operators'; |
||||
|
import { EntityService } from '@core/http/entity.service'; |
||||
|
import { EntityType } from '@shared/models/entity-type.models'; |
||||
|
import { Device } from '@shared/models/device.models'; |
||||
|
import { DialogService } from '@core/services/dialog.service'; |
||||
|
import { TranslateService } from '@ngx-translate/core'; |
||||
|
import { DeviceService } from '@core/http/device.service'; |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'tb-entity-gateway-select', |
||||
|
templateUrl: './entity-gateway-select.component.html', |
||||
|
styleUrls: [], |
||||
|
providers: [{ |
||||
|
provide: NG_VALUE_ACCESSOR, |
||||
|
useExisting: forwardRef(() => EntityGatewaySelectComponent), |
||||
|
multi: true |
||||
|
}] |
||||
|
}) |
||||
|
|
||||
|
export class EntityGatewaySelectComponent implements ControlValueAccessor, OnInit { |
||||
|
get required(): boolean { |
||||
|
return this.requiredValue; |
||||
|
} |
||||
|
|
||||
|
@Input() |
||||
|
set required(value: boolean) { |
||||
|
this.requiredValue = coerceBooleanProperty(value); |
||||
|
} |
||||
|
|
||||
|
@Input() |
||||
|
set newGatewayType(value: string){ |
||||
|
this.gatewayType = value; |
||||
|
} |
||||
|
|
||||
|
@Output() |
||||
|
private gatewayNameExist = new EventEmitter(); |
||||
|
|
||||
|
constructor(private store: Store<AppState>, |
||||
|
private entityService: EntityService, |
||||
|
private dialogService: DialogService, |
||||
|
private deviceService: DeviceService, |
||||
|
private translate: TranslateService, |
||||
|
private fb: FormBuilder) { |
||||
|
this.loadGatewayList(); |
||||
|
this.selectDeviceGatewayFormGroup = this.fb.group({ |
||||
|
gateway: [null] |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
private gatewayType = 'Gateway'; |
||||
|
private dirty: boolean; |
||||
|
private requiredValue: boolean; |
||||
|
private gatewayList: Array<Device>; |
||||
|
|
||||
|
searchText = ''; |
||||
|
filteredGateways: Observable<Array<Device>>; |
||||
|
selectDeviceGatewayFormGroup: FormGroup; |
||||
|
modelValue: string | null; |
||||
|
|
||||
|
@ViewChild('deviceGatewayInput', {static: true}) deviceGatewayInput: ElementRef<HTMLInputElement>; |
||||
|
private propagateChange = (v: any) => { }; |
||||
|
|
||||
|
registerOnChange(fn: any): void { |
||||
|
this.propagateChange = fn; |
||||
|
} |
||||
|
|
||||
|
registerOnTouched(fn: any): void { |
||||
|
} |
||||
|
|
||||
|
ngOnInit() { |
||||
|
this.filteredGateways = this.selectDeviceGatewayFormGroup.get('gateway').valueChanges |
||||
|
.pipe( |
||||
|
tap(value => { |
||||
|
let modelValue; |
||||
|
if (typeof value === 'string' || !value) { |
||||
|
modelValue = null; |
||||
|
} else { |
||||
|
modelValue = value.id.id; |
||||
|
} |
||||
|
this.updateView(modelValue); |
||||
|
if (value === null) { |
||||
|
this.clear(); |
||||
|
} |
||||
|
}), |
||||
|
map(value => value ? (typeof value === 'string' ? value : value.name) : ''), |
||||
|
mergeMap(name => this.fetchGateway(name) ), |
||||
|
share() |
||||
|
); |
||||
|
} |
||||
|
|
||||
|
fetchGateway(searchText?: string): Observable<Array<Device>> { |
||||
|
this.searchText = searchText; |
||||
|
let result = []; |
||||
|
if (searchText && searchText.length) { |
||||
|
result = this.gatewayList.filter((gateway) => gateway.name.toLowerCase().includes(searchText.toLowerCase())); |
||||
|
} else { |
||||
|
result = this.gatewayList; |
||||
|
} |
||||
|
return of(result); |
||||
|
} |
||||
|
|
||||
|
onFocus() { |
||||
|
if (this.dirty) { |
||||
|
this.selectDeviceGatewayFormGroup.get('gateway').updateValueAndValidity({onlySelf: true, emitEvent: true}); |
||||
|
this.dirty = false; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
displayGatewayFn(gateway?: Device): string | undefined { |
||||
|
return gateway ? gateway.name : undefined; |
||||
|
} |
||||
|
|
||||
|
setDisabledState(isDisabled: boolean): void { |
||||
|
} |
||||
|
|
||||
|
writeValue(value: string | null): void { |
||||
|
if(value === null){ |
||||
|
this.searchText = ''; |
||||
|
this.selectDeviceGatewayFormGroup.get('gateway').patchValue('', {emitEvent: false}); |
||||
|
this.dirty = true; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
clear(value: string = '', hideList?: boolean) { |
||||
|
this.searchText = value; |
||||
|
this.selectDeviceGatewayFormGroup.get('gateway').patchValue(value, {emitEvent: true}); |
||||
|
if(!hideList) { |
||||
|
setTimeout(() => { |
||||
|
this.deviceGatewayInput.nativeElement.blur(); |
||||
|
this.deviceGatewayInput.nativeElement.focus(); |
||||
|
}, 0); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
textIsNotEmpty(text: string): boolean { |
||||
|
return !!text && text.length > 0; |
||||
|
} |
||||
|
|
||||
|
gatewayNameEnter($event: KeyboardEvent) { |
||||
|
if ($event.keyCode === ENTER) { |
||||
|
if (!this.modelValue) { |
||||
|
this.createGateway($event, this.searchText); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
createGateway($event: Event, gatewayName: string) { |
||||
|
$event.preventDefault(); |
||||
|
$event.stopPropagation(); |
||||
|
const title = this.translate.instant('gateway.create-new-gateway'); |
||||
|
const content = this.translate.instant('gateway.create-new-gateway-text', {gatewayName}); |
||||
|
this.dialogService.confirm(title, content, null, null, true).subscribe(value => { |
||||
|
if(value){ |
||||
|
this.createDeviceGateway(gatewayName); |
||||
|
} else { |
||||
|
this.clear('', true); |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
private createDeviceGateway(gatewayName: string){ |
||||
|
this.deviceService.findByName(gatewayName, {ignoreErrors: true}).subscribe(value => { |
||||
|
this.gatewayNameExist.emit(gatewayName) |
||||
|
}, () => { |
||||
|
const newGateway: Device = { |
||||
|
name: gatewayName, |
||||
|
label: null, |
||||
|
type: this.gatewayType, |
||||
|
additionalInfo: { |
||||
|
gateway: true |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
this.deviceService.saveDevice(newGateway).subscribe( |
||||
|
(device) => { |
||||
|
this.searchText = ''; |
||||
|
this.gatewayList.push(device); |
||||
|
this.selectDeviceGatewayFormGroup.get('gateway').patchValue(device, {emitEvent: true}); |
||||
|
} |
||||
|
); |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
private loadGatewayList(): void{ |
||||
|
this.entityService.getEntitiesByNameFilter(EntityType.DEVICE, '', -1).pipe( |
||||
|
switchMap(results => results), |
||||
|
filter((device) => (device as Device)?.additionalInfo?.gateway), |
||||
|
reduce((acc, val) => acc.concat(val), []) |
||||
|
).subscribe((devices) => { |
||||
|
this.gatewayList = devices; |
||||
|
if(!this.searchText && this.gatewayList.length){ |
||||
|
this.selectDeviceGatewayFormGroup.get('gateway').patchValue(this.gatewayList[0], {emitEvent: true}); |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
private updateView(modelValue: any) { |
||||
|
this.propagateChange(modelValue); |
||||
|
} |
||||
|
} |
||||
Loading…
Reference in new issue