Igor Kulikov
5 years ago
committed by
GitHub
GitHub
34 changed files with 1874 additions and 25 deletions
File diff suppressed because one or more lines are too long
@ -0,0 +1,92 @@ |
|||
<!-- |
|||
|
|||
Copyright © 2016-2021 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 [formGroup]="persistentFormGroup" (ngSubmit)="save()" style="min-width: 480px; max-width: 600px;"> |
|||
<mat-toolbar color="primary"> |
|||
<h2>{{ 'widgets.persistent-table.add-title' | translate }}</h2> |
|||
<span fxFlex></span> |
|||
<button mat-icon-button |
|||
(click)="close()" |
|||
type="button"> |
|||
<mat-icon class="material-icons">close</mat-icon> |
|||
</button> |
|||
</mat-toolbar> |
|||
<mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async"> |
|||
</mat-progress-bar> |
|||
<div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div> |
|||
<div mat-dialog-content class="add-dialog"> |
|||
<fieldset [disabled]="isLoading$ | async"> |
|||
<div fxLayout="row" fxLayoutGap="6px"> |
|||
<mat-slide-toggle fxFlex class="mat-block" formControlName="oneWayElseTwoWay"> |
|||
{{ rpcMessageTypeText }} |
|||
</mat-slide-toggle> |
|||
</div> |
|||
<div fxLayout="row wrap" fxLayout.xs="column" fxLayoutGap="6px"> |
|||
<mat-form-field fxFlex class="mat-block"> |
|||
<mat-label translate>widgets.persistent-table.method</mat-label> |
|||
<input matInput formControlName="method" required> |
|||
<mat-error *ngIf="this.persistentFormGroup.get('method').hasError('required')"> |
|||
{{'widgets.persistent-table.method-error' | translate}} |
|||
</mat-error> |
|||
<mat-error *ngIf="this.persistentFormGroup.get('method').hasError('pattern')"> |
|||
{{'widgets.persistent-table.white-space-error' | translate}} |
|||
</mat-error> |
|||
</mat-form-field> |
|||
<mat-form-field fxFlex class="mat-block"> |
|||
<mat-label translate>widgets.persistent-table.retries</mat-label> |
|||
<input matInput type="number" formControlName="retries"> |
|||
</mat-form-field> |
|||
</div> |
|||
<div class="params-json-editor"> |
|||
<tb-json-object-edit formControlName="params" |
|||
[editorStyle]="{minHeight: '130px'}" |
|||
label="{{ 'widgets.persistent-table.params' | translate }}"> |
|||
</tb-json-object-edit> |
|||
</div> |
|||
<mat-expansion-panel class="additional-json-editor"> |
|||
<mat-expansion-panel-header> |
|||
<mat-panel-title translate> |
|||
widgets.persistent-table.additional-info |
|||
</mat-panel-title> |
|||
</mat-expansion-panel-header> |
|||
<ng-template matExpansionPanelContent> |
|||
<tb-json-object-edit formControlName="additionalInfo" |
|||
[editorStyle]="{minHeight: '130px'}"> |
|||
</tb-json-object-edit> |
|||
</ng-template> |
|||
</mat-expansion-panel> |
|||
</fieldset> |
|||
</div> |
|||
<div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div> |
|||
<div mat-dialog-actions fxLayout="row"> |
|||
<button mat-button color="primary" |
|||
type="button" |
|||
[disabled]="(isLoading$ | async)" |
|||
(click)="close()"> |
|||
{{ 'action.close' | translate }} |
|||
</button> |
|||
<span fxFlex></span> |
|||
<div fxLayout="row" fxLayoutGap="8px"> |
|||
<button mat-raised-button |
|||
color="primary" |
|||
type="submit" |
|||
[disabled]="(isLoading$ | async) || persistentFormGroup.invalid || !persistentFormGroup.dirty"> |
|||
{{ 'widgets.persistent-table.send-request' | translate }} |
|||
</button> |
|||
</div> |
|||
</div> |
|||
</form> |
|||
@ -0,0 +1,31 @@ |
|||
/** |
|||
* Copyright © 2016-2021 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 ::ng-deep { |
|||
.add-dialog { |
|||
|
|||
.params-json-editor, |
|||
.additional-json-editor { |
|||
.tb-json-object-panel { |
|||
margin: 0 0 16px; |
|||
} |
|||
|
|||
.mat-expansion-panel-body { |
|||
padding-bottom: 0 !important; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,75 @@ |
|||
///
|
|||
/// Copyright © 2016-2021 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, OnInit } from '@angular/core'; |
|||
import { DialogComponent } from '@shared/components/dialog.component'; |
|||
import { Store } from '@ngrx/store'; |
|||
import { AppState } from '@core/core.state'; |
|||
import { Router } from '@angular/router'; |
|||
import { MatDialogRef } from '@angular/material/dialog'; |
|||
import { FormBuilder, FormGroup, Validators } from '@angular/forms'; |
|||
import { RequestData } from '@shared/models/rpc.models'; |
|||
import { TranslateService } from '@ngx-translate/core'; |
|||
|
|||
@Component({ |
|||
selector: 'tb-persistent-add-dialog', |
|||
templateUrl: './persistent-add-dialog.component.html', |
|||
styleUrls: ['./persistent-add-dialog.component.scss'] |
|||
}) |
|||
|
|||
export class PersistentAddDialogComponent extends DialogComponent<PersistentAddDialogComponent, RequestData> implements OnInit { |
|||
|
|||
public persistentFormGroup: FormGroup; |
|||
public rpcMessageTypeText: string; |
|||
|
|||
private requestData: RequestData = null; |
|||
|
|||
constructor(protected store: Store<AppState>, |
|||
protected router: Router, |
|||
public dialogRef: MatDialogRef<PersistentAddDialogComponent, RequestData>, |
|||
private fb: FormBuilder, |
|||
private translate: TranslateService) { |
|||
super(store, router, dialogRef); |
|||
|
|||
this.persistentFormGroup = this.fb.group( |
|||
{ |
|||
method: ['', [Validators.required, Validators.pattern(/^\S+$/)]], |
|||
oneWayElseTwoWay: [false], |
|||
retries: [null, [Validators.pattern(/^-?[0-9]+$/), Validators.min(0)]], |
|||
params: [null], |
|||
additionalInfo: [null] |
|||
} |
|||
); |
|||
} |
|||
|
|||
save() { |
|||
this.requestData = this.persistentFormGroup.value; |
|||
this.close(); |
|||
} |
|||
|
|||
ngOnInit(): void { |
|||
this.rpcMessageTypeText = this.translate.instant('widgets.persistent-table.message-types.false'); |
|||
this.persistentFormGroup.get('oneWayElseTwoWay').valueChanges.subscribe( |
|||
() => { |
|||
this.rpcMessageTypeText = this.translate.instant(`widgets.persistent-table.message-types.${this.persistentFormGroup.get('oneWayElseTwoWay').value}`); |
|||
} |
|||
); |
|||
} |
|||
|
|||
close(): void { |
|||
this.dialogRef.close(this.requestData); |
|||
} |
|||
} |
|||
@ -0,0 +1,118 @@ |
|||
<!-- |
|||
|
|||
Copyright © 2016-2021 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 [formGroup]="persistentFormGroup" style="min-width: 480px;"> |
|||
<mat-toolbar color="primary"> |
|||
<h2>{{ persistentFormGroup.get('rpcId').value }}</h2> |
|||
<span fxFlex></span> |
|||
<button mat-icon-button |
|||
(click)="close()" |
|||
type="button"> |
|||
<mat-icon class="material-icons">close</mat-icon> |
|||
</button> |
|||
</mat-toolbar> |
|||
<mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async"> |
|||
</mat-progress-bar> |
|||
<div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div> |
|||
<div mat-dialog-content> |
|||
<fieldset [disabled]="isLoading$ | async"> |
|||
<div fxLayout="row" fxLayout.xs="column" fxLayoutGap="6px"> |
|||
<mat-form-field fxFlex class="mat-block"> |
|||
<mat-label translate>widgets.persistent-table.created-time</mat-label> |
|||
<input matInput formControlName="createdTime" readonly> |
|||
</mat-form-field> |
|||
<mat-form-field fxFlex class="mat-block"> |
|||
<mat-label translate>widgets.persistent-table.expiration-time</mat-label> |
|||
<input matInput formControlName="expirationTime" readonly> |
|||
</mat-form-field> |
|||
</div> |
|||
<div fxLayout="row wrap" fxLayout.xs="column" fxLayoutGap="6px"> |
|||
<mat-form-field fxFlex class="mat-block"> |
|||
<mat-label translate>widgets.persistent-table.message-type</mat-label> |
|||
<input matInput formControlName="messageType" readonly> |
|||
</mat-form-field> |
|||
<mat-form-field fxFlex class="mat-block"> |
|||
<mat-label translate>widgets.persistent-table.status</mat-label> |
|||
<input matInput formControlName="status" readonly |
|||
[ngStyle]="{ fontWeight: 'bold', color: rpcStatusColorsMap.get(data.persistentRequest.status) }"> |
|||
</mat-form-field> |
|||
<mat-form-field fxFlex class="mat-block"> |
|||
<mat-label translate>widgets.persistent-table.method</mat-label> |
|||
<input matInput formControlName="method" readonly> |
|||
</mat-form-field> |
|||
<mat-form-field fxFlex class="mat-block" |
|||
*ngIf="persistentFormGroup.get('retries').value"> |
|||
<mat-label translate>widgets.persistent-table.retries</mat-label> |
|||
<input matInput formControlName="retries" readonly> |
|||
</mat-form-field> |
|||
</div> |
|||
|
|||
<mat-accordion class="rpc-dialog" multi> |
|||
<mat-expansion-panel expanded> |
|||
<mat-expansion-panel-header> |
|||
<mat-panel-title> |
|||
{{ 'widgets.persistent-table.response' | translate }} |
|||
</mat-panel-title> |
|||
</mat-expansion-panel-header> |
|||
<tb-json-object-view formControlName="response" autoHeight></tb-json-object-view> |
|||
</mat-expansion-panel> |
|||
<mat-expansion-panel> |
|||
<mat-expansion-panel-header> |
|||
<mat-panel-title> |
|||
{{ 'widgets.persistent-table.params' | translate }} |
|||
</mat-panel-title> |
|||
</mat-expansion-panel-header> |
|||
<ng-template matExpansionPanelContent> |
|||
<tb-json-object-view formControlName="params" autoHeight></tb-json-object-view> |
|||
</ng-template> |
|||
</mat-expansion-panel> |
|||
<mat-expansion-panel> |
|||
<mat-expansion-panel-header> |
|||
<mat-panel-title> |
|||
{{ 'widgets.persistent-table.additional-info' | translate }} |
|||
</mat-panel-title> |
|||
</mat-expansion-panel-header> |
|||
<ng-template matExpansionPanelContent> |
|||
<tb-json-object-view |
|||
formControlName="additionalInfo" |
|||
autoHeight> |
|||
</tb-json-object-view> |
|||
</ng-template> |
|||
</mat-expansion-panel> |
|||
</mat-accordion> |
|||
</fieldset> |
|||
</div> |
|||
<div mat-dialog-actions fxLayout="row"> |
|||
<button mat-raised-button |
|||
*ngIf="allowDelete" |
|||
color="primary" |
|||
type="button" |
|||
(click)="deleteRpcRequest()" |
|||
[disabled]="(isLoading$ | async)"> |
|||
{{ 'widgets.persistent-table.delete' | translate }} |
|||
</button> |
|||
<span fxFlex></span> |
|||
<div fxLayout="row" fxLayoutGap="8px"> |
|||
<button mat-button color="primary" |
|||
type="button" |
|||
[disabled]="(isLoading$ | async)" |
|||
(click)="close()" cdkFocusInitial> |
|||
{{ 'action.close' | translate }} |
|||
</button> |
|||
</div> |
|||
</div> |
|||
</form> |
|||
@ -0,0 +1,34 @@ |
|||
/** |
|||
* Copyright © 2016-2021 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 ::ng-deep { |
|||
.rpc-dialog { |
|||
.mat-expansion-panel-body { |
|||
padding-bottom: 0 !important; |
|||
} |
|||
|
|||
.tb-json-object-panel { |
|||
margin: 0 0 16px 0; |
|||
} |
|||
} |
|||
|
|||
.tb-audit-log-response-data { |
|||
width: 100%; |
|||
min-width: 400px; |
|||
height: 100%; |
|||
min-height: 100px; |
|||
border: 1px solid #c0c0c0; |
|||
} |
|||
} |
|||
@ -0,0 +1,126 @@ |
|||
///
|
|||
/// Copyright © 2016-2021 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, OnInit, ViewChild } from '@angular/core'; |
|||
import { DialogComponent } from '@shared/components/dialog.component'; |
|||
import { Store } from '@ngrx/store'; |
|||
import { AppState } from '@core/core.state'; |
|||
import { Router } from '@angular/router'; |
|||
import { DatePipe } from '@angular/common'; |
|||
import { TranslateService } from '@ngx-translate/core'; |
|||
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog'; |
|||
import { FormBuilder, FormGroup } from '@angular/forms'; |
|||
import { DeviceService } from '@core/http/device.service'; |
|||
import { PersistentRpc, RpcStatus, rpcStatusColors, rpcStatusTranslation } from '@shared/models/rpc.models'; |
|||
import { NULL_UUID } from '@shared/models/id/has-uuid'; |
|||
import { DialogService } from '@core/services/dialog.service'; |
|||
|
|||
export interface PersistentDetailsDialogData { |
|||
persistentRequest: PersistentRpc; |
|||
allowDelete: boolean; |
|||
} |
|||
|
|||
@Component({ |
|||
selector: 'tb-persistent-details-dialog', |
|||
templateUrl: './persistent-details-dialog.component.html', |
|||
styleUrls: ['./persistent-details-dialog.component.scss'] |
|||
}) |
|||
|
|||
export class PersistentDetailsDialogComponent extends DialogComponent<PersistentDetailsDialogComponent, boolean> implements OnInit { |
|||
|
|||
@ViewChild('responseDataEditor', {static: true}) |
|||
responseDataEditorElmRef: ElementRef; |
|||
|
|||
public persistentFormGroup: FormGroup; |
|||
public rpcStatusColorsMap = rpcStatusColors; |
|||
public rpcStatus = RpcStatus; |
|||
public allowDelete: boolean; |
|||
|
|||
private persistentUpdated = false; |
|||
private responseData: string; |
|||
|
|||
constructor(protected store: Store<AppState>, |
|||
protected router: Router, |
|||
private datePipe: DatePipe, |
|||
private translate: TranslateService, |
|||
@Inject(MAT_DIALOG_DATA) public data: PersistentDetailsDialogData, |
|||
public dialogRef: MatDialogRef<PersistentDetailsDialogComponent, boolean>, |
|||
private dialogService: DialogService, |
|||
private deviceService: DeviceService, |
|||
private fb: FormBuilder) { |
|||
super(store, router, dialogRef); |
|||
|
|||
this.allowDelete = data.allowDelete; |
|||
|
|||
this.persistentFormGroup = this.fb.group( |
|||
{ |
|||
rpcId: [''], |
|||
createdTime: [''], |
|||
expirationTime: [''], |
|||
messageType: [''], |
|||
status: [''], |
|||
method: [''], |
|||
params: [''], |
|||
retries: [''], |
|||
response: [''], |
|||
additionalInfo: [''] |
|||
} |
|||
); |
|||
this.loadPersistentFields(data.persistentRequest); |
|||
this.responseData = JSON.stringify(data.persistentRequest.response, null, 2); |
|||
} |
|||
|
|||
loadPersistentFields(request: PersistentRpc) { |
|||
this.persistentFormGroup.patchValue({ |
|||
rpcId: this.translate.instant('widgets.persistent-table.details-title') + request.id.id, |
|||
createdTime: this.datePipe.transform(request.createdTime, 'yyyy-MM-dd HH:mm:ss'), |
|||
expirationTime: this.datePipe.transform(request.expirationTime, 'yyyy-MM-dd HH:mm:ss'), |
|||
messageType: this.translate.instant('widgets.persistent-table.message-types.' + request.request.oneway), |
|||
status: this.translate.instant(rpcStatusTranslation.get(request.status)), |
|||
method: request.request.body.method, |
|||
retries: request.request.retries || null, |
|||
response: request.response || null, |
|||
params: JSON.parse(request.request.body.params) || null, |
|||
additionalInfo: request.additionalInfo || null |
|||
}, {emitEvent: false}); |
|||
} |
|||
|
|||
ngOnInit(): void { |
|||
} |
|||
|
|||
close(): void { |
|||
this.dialogRef.close(this.persistentUpdated); |
|||
} |
|||
|
|||
deleteRpcRequest() { |
|||
const persistentRpc = this.data.persistentRequest; |
|||
if (persistentRpc && persistentRpc.id && persistentRpc.id.id !== NULL_UUID) { |
|||
this.dialogService.confirm( |
|||
this.translate.instant('widgets.persistent-table.delete-request-title'), |
|||
this.translate.instant('widgets.persistent-table.delete-request-text'), |
|||
this.translate.instant('action.no'), |
|||
this.translate.instant('action.yes') |
|||
).subscribe((res) => { |
|||
if (res) { |
|||
this.deviceService.deletePersistedRpc(persistentRpc.id.id).subscribe(() => { |
|||
this.persistentUpdated = true; |
|||
this.close(); |
|||
}); |
|||
} |
|||
}); |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,44 @@ |
|||
<!-- |
|||
|
|||
Copyright © 2016-2021 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 fxLayout="column" class="mat-content mat-padding" [formGroup]="persistentFilterFormGroup" (ngSubmit)="update()"> |
|||
<mat-form-field fxFlex class="mat-block" floatLabel="always"> |
|||
<mat-label translate>widgets.persistent-table.rpc-status-list</mat-label> |
|||
<mat-select formControlName="rpcStatus" |
|||
placeholder="{{ rpcSearchPlaceholder }}"> |
|||
<mat-option [value]="null"> |
|||
{{ 'widgets.persistent-table.rpc-search-status-all' | translate }} |
|||
</mat-option> |
|||
<mat-option *ngFor="let searchStatus of persistentSearchStatuses" [value]="searchStatus"> |
|||
{{ rpcSearchStatusTranslationMap.get(searchStatus) | translate }} |
|||
</mat-option> |
|||
</mat-select> |
|||
</mat-form-field> |
|||
<div fxLayout="row" class="tb-panel-actions" fxLayoutAlign="end center"> |
|||
<button type="button" |
|||
mat-button |
|||
(click)="cancel()"> |
|||
{{ 'action.cancel' | translate }} |
|||
</button> |
|||
<button type="submit" |
|||
mat-raised-button |
|||
color="primary" |
|||
[disabled]="persistentFilterFormGroup.invalid || !persistentFilterFormGroup.dirty"> |
|||
{{ 'action.update' | translate }} |
|||
</button> |
|||
</div> |
|||
</form> |
|||
@ -0,0 +1,37 @@ |
|||
/** |
|||
* Copyright © 2016-2021 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 { |
|||
width: 100%; |
|||
height: 100%; |
|||
min-width: 300px; |
|||
overflow: hidden; |
|||
background: #fff; |
|||
border-radius: 4px; |
|||
box-shadow: |
|||
0 7px 8px -4px rgba(0, 0, 0, .2), |
|||
0 13px 19px 2px rgba(0, 0, 0, .14), |
|||
0 5px 24px 4px rgba(0, 0, 0, .12); |
|||
|
|||
.mat-content { |
|||
overflow: hidden; |
|||
background-color: #fff; |
|||
} |
|||
|
|||
.mat-padding { |
|||
padding: 16px; |
|||
} |
|||
} |
|||
@ -0,0 +1,67 @@ |
|||
///
|
|||
/// Copyright © 2016-2021 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, Inject, InjectionToken } from '@angular/core'; |
|||
import { FormBuilder, FormGroup } from '@angular/forms'; |
|||
import { OverlayRef } from '@angular/cdk/overlay'; |
|||
import { RpcStatus, rpcStatusTranslation } from '@shared/models/rpc.models'; |
|||
import { TranslateService } from '@ngx-translate/core'; |
|||
|
|||
export const PERSISTENT_FILTER_PANEL_DATA = new InjectionToken<any>('AlarmFilterPanelData'); |
|||
|
|||
export interface PersistentFilterPanelData { |
|||
rpcStatus: RpcStatus; |
|||
} |
|||
|
|||
@Component({ |
|||
selector: 'tb-persistent-filter-panel', |
|||
templateUrl: './persistent-filter-panel.component.html', |
|||
styleUrls: ['./persistent-filter-panel.component.scss'] |
|||
}) |
|||
export class PersistentFilterPanelComponent { |
|||
|
|||
public persistentFilterFormGroup: FormGroup; |
|||
public result: PersistentFilterPanelData; |
|||
public rpcSearchStatusTranslationMap = rpcStatusTranslation; |
|||
public rpcSearchPlaceholder: string; |
|||
|
|||
public persistentSearchStatuses = Object.keys(RpcStatus); |
|||
|
|||
constructor(@Inject(PERSISTENT_FILTER_PANEL_DATA) |
|||
public data: PersistentFilterPanelData, |
|||
public overlayRef: OverlayRef, |
|||
private fb: FormBuilder, |
|||
private translate: TranslateService) { |
|||
this.persistentFilterFormGroup = this.fb.group( |
|||
{ |
|||
rpcStatus: this.data.rpcStatus |
|||
} |
|||
); |
|||
this.rpcSearchPlaceholder = this.translate.instant('widgets.persistent-table.any-status'); |
|||
} |
|||
|
|||
update() { |
|||
this.result = { |
|||
rpcStatus: this.persistentFilterFormGroup.get('rpcStatus').value |
|||
}; |
|||
this.overlayRef.dispose(); |
|||
} |
|||
|
|||
cancel() { |
|||
this.overlayRef.dispose(); |
|||
} |
|||
} |
|||
|
|||
@ -0,0 +1,126 @@ |
|||
<!-- |
|||
|
|||
Copyright © 2016-2021 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. |
|||
|
|||
--> |
|||
<div class="tb-table-widget tb-absolute-fill"> |
|||
<div fxFlex fxLayout="column" class="tb-absolute-fill"> |
|||
<div fxFlex class="table-container"> |
|||
<table mat-table [dataSource]="persistentDatasource" |
|||
matSort [matSortActive]="pageLink.sortOrder.property" |
|||
[matSortDirection]="pageLink.sortDirection()" matSortDisableClear> |
|||
<ng-container matColumnDef="rpcId"> |
|||
<mat-header-cell *matHeaderCellDef class="column-id"> |
|||
{{ 'widgets.persistent-table.rpc-id' | translate }} |
|||
</mat-header-cell> |
|||
<mat-cell *matCellDef="let column"> |
|||
{{ column.id.id }} |
|||
</mat-cell> |
|||
</ng-container> |
|||
<ng-container matColumnDef="createdTime"> |
|||
<mat-header-cell *matHeaderCellDef class="column-time" mat-sort-header> |
|||
{{ 'widgets.persistent-table.created-time' | translate }} |
|||
</mat-header-cell> |
|||
<mat-cell *matCellDef="let column"> |
|||
{{ column.createdTime | date:'yyyy-MM-dd HH:mm:ss' }} |
|||
</mat-cell> |
|||
</ng-container> |
|||
<ng-container matColumnDef="expirationTime"> |
|||
<mat-header-cell *matHeaderCellDef class="column-time" mat-sort-header> |
|||
{{ 'widgets.persistent-table.expiration-time' | translate }} |
|||
</mat-header-cell> |
|||
<mat-cell *matCellDef="let column"> |
|||
{{ column.expirationTime | date:'yyyy-MM-dd HH:mm:ss' }} |
|||
</mat-cell> |
|||
</ng-container> |
|||
<ng-container matColumnDef="status"> |
|||
<mat-header-cell *matHeaderCellDef mat-sort-header> |
|||
{{ 'widgets.persistent-table.status' | translate }} |
|||
</mat-header-cell> |
|||
<mat-cell *matCellDef="let column" |
|||
[ngStyle]="{fontWeight: 'bold', color: rpcStatusColor.get((column.status))}"> |
|||
{{ rpcStatusTranslation.get(column.status) | translate }} |
|||
</mat-cell> |
|||
</ng-container> |
|||
<ng-container matColumnDef="messageType"> |
|||
<mat-header-cell *matHeaderCellDef> |
|||
{{ 'widgets.persistent-table.message-type' | translate }} |
|||
</mat-header-cell> |
|||
<mat-cell *matCellDef="let column"> |
|||
{{ 'widgets.persistent-table.message-types.' + column.request.oneway | translate }} |
|||
</mat-cell> |
|||
</ng-container> |
|||
<ng-container matColumnDef="method"> |
|||
<mat-header-cell *matHeaderCellDef> |
|||
{{ 'widgets.persistent-table.method' | translate }} |
|||
</mat-header-cell> |
|||
<mat-cell *matCellDef="let column"> |
|||
{{ column.request.body.method }} |
|||
</mat-cell> |
|||
</ng-container> |
|||
<ng-container matColumnDef="actions" [stickyEnd]="enableStickyAction"> |
|||
<mat-header-cell *matHeaderCellDef> |
|||
</mat-header-cell> |
|||
<mat-cell *matCellDef="let column"> |
|||
<div fxHide fxShow.gt-md fxLayout="row" fxLayoutAlign="end"> |
|||
<ng-container *ngFor="let actionDescriptor of actionCellButtonAction"> |
|||
<button mat-button mat-icon-button [disabled]="isLoading$ | async" |
|||
matTooltip="{{ actionDescriptor.displayName }}" |
|||
matTooltipPosition="above" |
|||
(click)="onActionButtonClick($event, column, actionDescriptor)"> |
|||
<mat-icon>{{ actionDescriptor.icon }}</mat-icon> |
|||
</button> |
|||
</ng-container> |
|||
</div> |
|||
<div fxHide fxShow.lt-lg *ngIf="actionCellButtonAction.length"> |
|||
<button mat-button mat-icon-button |
|||
(click)="$event.stopPropagation(); ctx.detectChanges();" |
|||
[matMenuTriggerFor]="cellActionsMenu"> |
|||
<mat-icon class="material-icons">more_vert</mat-icon> |
|||
</button> |
|||
<mat-menu #cellActionsMenu="matMenu" xPosition="before"> |
|||
<ng-container *ngFor="let actionDescriptor of actionCellButtonAction"> |
|||
<button mat-menu-item *ngIf="actionDescriptor.icon" |
|||
[disabled]="(isLoading$ | async)" |
|||
(click)="onActionButtonClick($event, column, actionDescriptor)"> |
|||
<mat-icon>{{actionDescriptor.icon}}</mat-icon> |
|||
<span>{{ actionDescriptor.displayName }}</span> |
|||
</button> |
|||
</ng-container> |
|||
</mat-menu> |
|||
</div> |
|||
</mat-cell> |
|||
</ng-container> |
|||
<mat-header-row *matHeaderRowDef="displayedColumns; sticky: enableStickyHeader"></mat-header-row> |
|||
<mat-row *matRowDef="let column; columns: displayedColumns" |
|||
[fxShow]="!persistentDatasource.dataLoading"></mat-row> |
|||
</table> |
|||
<span [fxShow]="(persistentDatasource.isEmpty() | async) && !persistentDatasource.dataLoading" |
|||
fxLayoutAlign="center center" |
|||
class="no-data-found">{{ noDataDisplayMessageText }}</span> |
|||
<span [fxShow]="persistentDatasource.dataLoading" |
|||
fxLayoutAlign="center center" |
|||
class="no-data-found">{{ 'common.loading' | translate }}</span> |
|||
</div> |
|||
<mat-divider *ngIf="displayPagination"></mat-divider> |
|||
<mat-paginator *ngIf="displayPagination" |
|||
[length]="persistentDatasource.total() | async" |
|||
[pageIndex]="pageLink.page" |
|||
[pageSize]="pageLink.pageSize" |
|||
[pageSizeOptions]="pageSizeOptions" |
|||
[hidePageSize]="hidePageSize" |
|||
showFirstLastButtons></mat-paginator> |
|||
</div> |
|||
</div> |
|||
@ -0,0 +1,53 @@ |
|||
/** |
|||
* Copyright © 2016-2021 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 { |
|||
width: 100%; |
|||
height: 100%; |
|||
display: block; |
|||
.tb-table-widget { |
|||
.table-container { |
|||
position: relative; |
|||
} |
|||
|
|||
.mat-table { |
|||
.mat-row { |
|||
&.invisible { |
|||
visibility: hidden; |
|||
} |
|||
} |
|||
} |
|||
|
|||
span.no-data-found { |
|||
position: absolute; |
|||
top: 60px; |
|||
bottom: 0; |
|||
left: 0; |
|||
right: 0; |
|||
} |
|||
|
|||
.column-id { |
|||
min-width: 250px; |
|||
max-width: 250px; |
|||
width: 250px; |
|||
} |
|||
|
|||
.column-time { |
|||
min-width: 120px; |
|||
max-width: 120px; |
|||
width: 120px; |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,580 @@ |
|||
///
|
|||
/// Copyright © 2016-2021 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 { |
|||
ChangeDetectorRef, |
|||
Component, |
|||
ElementRef, |
|||
Injector, |
|||
Input, |
|||
OnInit, |
|||
StaticProvider, |
|||
ViewChild, |
|||
ViewContainerRef |
|||
} from '@angular/core'; |
|||
import { PageComponent } from '@shared/components/page.component'; |
|||
import { Store } from '@ngrx/store'; |
|||
import { AppState } from '@core/core.state'; |
|||
import { WidgetContext } from '@home/models/widget-component.models'; |
|||
import { WidgetConfig } from '@shared/models/widget.models'; |
|||
import { IWidgetSubscription } from '@core/api/widget-api.models'; |
|||
import { BehaviorSubject, merge, Observable, of, ReplaySubject, Subject, throwError } from 'rxjs'; |
|||
import { catchError, map, tap } from 'rxjs/operators'; |
|||
import { |
|||
constructTableCssString, |
|||
noDataMessage, |
|||
TableCellButtonActionDescriptor, |
|||
TableWidgetSettings |
|||
} from '@home/components/widget/lib/table-widget.models'; |
|||
import cssjs from '@core/css/css'; |
|||
import { UtilsService } from '@core/services/utils.service'; |
|||
import { TranslateService } from '@ngx-translate/core'; |
|||
import { hashCode, isDefined, isNumber } from '@core/utils'; |
|||
import { CollectionViewer, DataSource } from '@angular/cdk/collections'; |
|||
import { emptyPageData, PageData } from '@shared/models/page/page-data'; |
|||
import { |
|||
PersistentRpc, |
|||
PersistentRpcData, |
|||
RequestData, |
|||
RpcStatus, |
|||
rpcStatusColors, |
|||
rpcStatusTranslation |
|||
} from '@shared/models/rpc.models'; |
|||
import { PageLink } from '@shared/models/page/page-link'; |
|||
import { Direction, SortOrder, sortOrderFromString } from '@shared/models/page/sort-order'; |
|||
import { MatPaginator } from '@angular/material/paginator'; |
|||
import { MatSort } from '@angular/material/sort'; |
|||
import { NULL_UUID } from '@shared/models/id/has-uuid'; |
|||
import { DialogService } from '@core/services/dialog.service'; |
|||
import { DeviceService } from '@core/http/device.service'; |
|||
import { MatDialog } from '@angular/material/dialog'; |
|||
import { |
|||
PersistentDetailsDialogComponent, |
|||
PersistentDetailsDialogData |
|||
} from '@home/components/widget/lib/rpc/persistent-details-dialog.component'; |
|||
import { ConnectedPosition, Overlay, OverlayConfig, OverlayRef } from '@angular/cdk/overlay'; |
|||
import { ComponentPortal } from '@angular/cdk/portal'; |
|||
import { |
|||
PERSISTENT_FILTER_PANEL_DATA, |
|||
PersistentFilterPanelComponent, |
|||
PersistentFilterPanelData |
|||
} from '@home/components/widget/lib/rpc/persistent-filter-panel.component'; |
|||
import { PersistentAddDialogComponent } from '@home/components/widget/lib/rpc/persistent-add-dialog.component'; |
|||
import { ResizeObserver } from '@juggle/resize-observer'; |
|||
import { hidePageSizePixelValue } from '@shared/models/constants'; |
|||
import { HttpErrorResponse } from '@angular/common/http'; |
|||
|
|||
interface PersistentTableWidgetSettings extends TableWidgetSettings { |
|||
defaultSortOrder: string; |
|||
defaultPageSize: number; |
|||
displayPagination: boolean; |
|||
enableStickyAction: boolean; |
|||
enableStickyHeader: boolean; |
|||
enableFilter: boolean; |
|||
displayColumns: string[]; |
|||
displayDetails: boolean; |
|||
allowDelete: boolean; |
|||
allowSendRequest: boolean; |
|||
} |
|||
|
|||
interface PersistentTableWidgetActionDescriptor extends TableCellButtonActionDescriptor { |
|||
details?: boolean; |
|||
delete?: boolean; |
|||
} |
|||
|
|||
@Component({ |
|||
selector: 'tb-persistent-table-widget', |
|||
templateUrl: './persistent-table.component.html', |
|||
styleUrls: ['./persistent-table.component.scss' , '../table-widget.scss'] |
|||
}) |
|||
|
|||
export class PersistentTableComponent extends PageComponent implements OnInit { |
|||
|
|||
@Input() |
|||
ctx: WidgetContext; |
|||
|
|||
@ViewChild(MatPaginator) paginator: MatPaginator; |
|||
@ViewChild(MatSort) sort: MatSort; |
|||
|
|||
private settings: PersistentTableWidgetSettings; |
|||
private widgetConfig: WidgetConfig; |
|||
private subscription: IWidgetSubscription; |
|||
private enableFilterAction = true; |
|||
private allowSendRequest = true; |
|||
private defaultPageSize = 10; |
|||
private defaultSortOrder = '-createdTime'; |
|||
private rpcStatusFilter: RpcStatus; |
|||
private displayDetails = true; |
|||
private allowDelete = true; |
|||
private displayTableColumns: string[]; |
|||
private widgetResize$: ResizeObserver; |
|||
|
|||
public persistentDatasource: PersistentDatasource; |
|||
public noDataDisplayMessageText: string; |
|||
public rpcStatusColor = rpcStatusColors; |
|||
public rpcStatusTranslation = rpcStatusTranslation; |
|||
public displayPagination = true; |
|||
public enableStickyHeader = true; |
|||
public enableStickyAction = true; |
|||
public pageLink: PageLink; |
|||
public pageSizeOptions; |
|||
public actionCellButtonAction: PersistentTableWidgetActionDescriptor[] = []; |
|||
public displayedColumns: string[]; |
|||
public hidePageSize = false; |
|||
|
|||
constructor(protected store: Store<AppState>, |
|||
private elementRef: ElementRef, |
|||
private overlay: Overlay, |
|||
private viewContainerRef: ViewContainerRef, |
|||
private utils: UtilsService, |
|||
private translate: TranslateService, |
|||
private dialogService: DialogService, |
|||
private deviceService: DeviceService, |
|||
private dialog: MatDialog, |
|||
private cd: ChangeDetectorRef) { |
|||
super(store); |
|||
} |
|||
|
|||
ngOnInit() { |
|||
this.ctx.$scope.persistentTableWidget = this; |
|||
this.settings = this.ctx.settings; |
|||
this.widgetConfig = this.ctx.widgetConfig; |
|||
this.subscription = this.ctx.defaultSubscription; |
|||
this.initializeConfig(); |
|||
this.ctx.updateWidgetParams(); |
|||
if (this.displayPagination) { |
|||
this.widgetResize$ = new ResizeObserver(() => { |
|||
const showHidePageSize = this.elementRef.nativeElement.offsetWidth < hidePageSizePixelValue; |
|||
if (showHidePageSize !== this.hidePageSize) { |
|||
this.hidePageSize = showHidePageSize; |
|||
this.cd.markForCheck(); |
|||
} |
|||
}); |
|||
this.widgetResize$.observe(this.elementRef.nativeElement); |
|||
} |
|||
} |
|||
|
|||
ngOnDestroy() { |
|||
if (this.widgetResize$) { |
|||
this.widgetResize$.disconnect(); |
|||
} |
|||
} |
|||
|
|||
ngAfterViewInit(): void { |
|||
if (this.displayPagination) { |
|||
this.sort.sortChange.subscribe(() => this.paginator.pageIndex = 0); |
|||
} |
|||
((this.displayPagination ? merge(this.sort.sortChange, this.paginator.page) : this.sort.sortChange) as Observable<any>) |
|||
.pipe( |
|||
tap(() => this.updateData()) |
|||
) |
|||
.subscribe(); |
|||
this.updateData(); |
|||
} |
|||
|
|||
private initializeConfig() { |
|||
|
|||
this.displayPagination = isDefined(this.settings.displayPagination) ? this.settings.displayPagination : true; |
|||
this.enableStickyHeader = isDefined(this.settings.enableStickyHeader) ? this.settings.enableStickyHeader : true; |
|||
this.displayTableColumns = isDefined(this.settings.displayColumns) ? this.settings.displayColumns : []; |
|||
this.enableStickyAction = isDefined(this.settings.enableStickyAction) ? this.settings.enableStickyAction : true; |
|||
this.enableFilterAction = isDefined(this.settings.enableFilter) ? this.settings.enableFilter : true; |
|||
this.displayDetails = isDefined(this.settings.displayDetails) ? this.settings.displayDetails : true; |
|||
this.allowDelete = isDefined(this.settings.allowDelete) ? this.settings.allowDelete : true; |
|||
this.allowSendRequest = isDefined(this.settings.allowSendRequest) ? this.settings.allowSendRequest : true; |
|||
|
|||
this.noDataDisplayMessageText = |
|||
noDataMessage(this.widgetConfig.noDataDisplayMessage, 'widgets.persistent-table.no-request-prompt', this.utils, this.translate); |
|||
|
|||
this.displayedColumns = [...this.displayTableColumns]; |
|||
|
|||
const pageSize = this.settings.defaultPageSize; |
|||
if (isDefined(pageSize) && isNumber(pageSize) && pageSize > 0) { |
|||
this.defaultPageSize = pageSize; |
|||
} |
|||
this.pageSizeOptions = [this.defaultPageSize, this.defaultPageSize * 2, this.defaultPageSize * 3]; |
|||
if (this.settings.defaultSortOrder && this.settings.defaultSortOrder.length) { |
|||
this.defaultSortOrder = this.settings.defaultSortOrder; |
|||
} |
|||
const sortOrder: SortOrder = sortOrderFromString(this.defaultSortOrder); |
|||
this.pageLink = new PageLink(this.defaultPageSize, 0, null, sortOrder); |
|||
this.pageLink.pageSize = this.displayPagination ? this.defaultPageSize : 1024; |
|||
|
|||
|
|||
this.ctx.widgetActions = [ |
|||
{ |
|||
name: 'widgets.persistent-table.add', |
|||
show: this.allowSendRequest, |
|||
icon: 'add', |
|||
onAction: $event => this.addPersistentRpcRequest($event) |
|||
}, |
|||
{ |
|||
name: 'widgets.persistent-table.refresh', |
|||
show: true, |
|||
icon: 'refresh', |
|||
onAction: () => this.reloadPersistentRequests() |
|||
}, |
|||
{ |
|||
name: 'widgets.persistent-table.filter', |
|||
show: this.enableFilterAction, |
|||
icon: 'filter_list', |
|||
onAction: $event => this.editFilter($event) |
|||
} |
|||
]; |
|||
|
|||
if (this.settings.displayDetails) { |
|||
this.actionCellButtonAction.push( |
|||
{ |
|||
displayName: this.translate.instant('widgets.persistent-table.details'), |
|||
icon: 'more_horiz', |
|||
details: true |
|||
} as PersistentTableWidgetActionDescriptor |
|||
); |
|||
} |
|||
if (this.settings.allowDelete) { |
|||
this.actionCellButtonAction.push( |
|||
{ |
|||
displayName: this.translate.instant('widgets.persistent-table.delete'), |
|||
icon: 'delete', |
|||
delete: true |
|||
} as PersistentTableWidgetActionDescriptor |
|||
); |
|||
} |
|||
if (this.actionCellButtonAction.length) { |
|||
this.displayedColumns.push('actions'); |
|||
} |
|||
|
|||
this.persistentDatasource = new PersistentDatasource(this.translate, this.subscription, this.ctx); |
|||
|
|||
const cssString = constructTableCssString(this.widgetConfig); |
|||
const cssParser = new cssjs(); |
|||
cssParser.testMode = false; |
|||
const namespace = 'persistent-table-' + hashCode(cssString); |
|||
cssParser.cssPreviewNamespace = namespace; |
|||
cssParser.createStyleElement(namespace, cssString); |
|||
$(this.elementRef.nativeElement).addClass(namespace); |
|||
} |
|||
|
|||
private updateData() { |
|||
if (this.displayPagination) { |
|||
this.pageLink.page = this.paginator.pageIndex; |
|||
this.pageLink.pageSize = this.paginator.pageSize; |
|||
} else { |
|||
this.pageLink.page = 0; |
|||
} |
|||
if (this.settings.defaultSortOrder && this.settings.defaultSortOrder.length) { |
|||
this.defaultSortOrder = this.utils.customTranslation(this.settings.defaultSortOrder, this.settings.defaultSortOrder); |
|||
} |
|||
this.pageLink.sortOrder.property = this.sort.active; |
|||
this.pageLink.sortOrder.direction = Direction[this.sort.direction.toUpperCase()]; |
|||
this.persistentDatasource.loadPersistent(this.pageLink, this.rpcStatusFilter); |
|||
this.ctx.detectChanges(); |
|||
} |
|||
|
|||
public onDataUpdated() { |
|||
this.ctx.detectChanges(); |
|||
} |
|||
|
|||
reloadPersistentRequests() { |
|||
if (this.displayPagination) { |
|||
this.paginator.pageIndex = 0; |
|||
} |
|||
this.updateData(); |
|||
} |
|||
|
|||
deleteRpcRequest($event: Event, persistentRpc: PersistentRpc) { |
|||
if ($event) { |
|||
$event.stopPropagation(); |
|||
} |
|||
if (persistentRpc && persistentRpc.id && persistentRpc.id.id !== NULL_UUID) { |
|||
this.dialogService.confirm( |
|||
this.translate.instant('widgets.persistent-table.delete-request-title'), |
|||
this.translate.instant('widgets.persistent-table.delete-request-text'), |
|||
this.translate.instant('action.no'), |
|||
this.translate.instant('action.yes') |
|||
).subscribe((res) => { |
|||
if (res) { |
|||
this.deviceService.deletePersistedRpc(persistentRpc.id.id).subscribe(() => { |
|||
this.reloadPersistentRequests(); |
|||
}); |
|||
} |
|||
}); |
|||
} |
|||
} |
|||
|
|||
openRequestDetails($event: Event, persistentRpc: PersistentRpc) { |
|||
if ($event) { |
|||
$event.stopPropagation(); |
|||
} |
|||
if (persistentRpc && persistentRpc.id && persistentRpc.id.id !== NULL_UUID) { |
|||
this.dialog.open<PersistentDetailsDialogComponent, PersistentDetailsDialogData, boolean> |
|||
(PersistentDetailsDialogComponent, |
|||
{ |
|||
disableClose: true, |
|||
panelClass: ['tb-dialog', 'tb-fullscreen-dialog'], |
|||
data: { |
|||
persistentRequest: persistentRpc, |
|||
allowDelete: this.allowDelete |
|||
} |
|||
}).afterClosed().subscribe( |
|||
(res) => { |
|||
if (res) { |
|||
this.reloadPersistentRequests(); |
|||
} |
|||
} |
|||
); |
|||
} |
|||
} |
|||
|
|||
addPersistentRpcRequest($event: Event){ |
|||
if ($event) { |
|||
$event.stopPropagation(); |
|||
} |
|||
this.dialog.open<PersistentAddDialogComponent, RequestData> |
|||
(PersistentAddDialogComponent, |
|||
{ |
|||
disableClose: true, |
|||
panelClass: ['tb-dialog', 'tb-fullscreen-dialog'] |
|||
}).afterClosed().subscribe( |
|||
(requestData) => { |
|||
if (requestData) { |
|||
this.sendRequests(requestData); |
|||
} |
|||
} |
|||
); |
|||
} |
|||
|
|||
private sendRequests(requestData: RequestData) { |
|||
let commandPromise; |
|||
if (requestData.oneWayElseTwoWay) { |
|||
commandPromise = this.ctx.controlApi.sendOneWayCommand( |
|||
requestData.method, |
|||
requestData.params, null, |
|||
true, null, |
|||
requestData.retries, |
|||
requestData.additionalInfo |
|||
); |
|||
} else { |
|||
commandPromise = this.ctx.controlApi.sendTwoWayCommand( |
|||
requestData.method, |
|||
requestData.params, |
|||
null, |
|||
true, null, |
|||
requestData.retries, |
|||
requestData.additionalInfo |
|||
); |
|||
} |
|||
commandPromise.subscribe( |
|||
() => { |
|||
this.reloadPersistentRequests(); |
|||
} |
|||
); |
|||
} |
|||
|
|||
public onActionButtonClick($event: Event, persistentRpc: PersistentRpc, actionDescriptor: PersistentTableWidgetActionDescriptor) { |
|||
if (actionDescriptor.details) { |
|||
this.openRequestDetails($event, persistentRpc); |
|||
} |
|||
if (actionDescriptor.delete) { |
|||
this.deleteRpcRequest($event, persistentRpc); |
|||
} |
|||
} |
|||
|
|||
private editFilter($event: Event) { |
|||
if ($event) { |
|||
$event.stopPropagation(); |
|||
} |
|||
const target = $event.target || $event.srcElement || $event.currentTarget; |
|||
const config = new OverlayConfig(); |
|||
config.backdropClass = 'cdk-overlay-transparent-backdrop'; |
|||
config.hasBackdrop = true; |
|||
const connectedPosition: ConnectedPosition = { |
|||
originX: 'end', |
|||
originY: 'bottom', |
|||
overlayX: 'end', |
|||
overlayY: 'top' |
|||
}; |
|||
config.positionStrategy = this.overlay.position().flexibleConnectedTo(target as HTMLElement) |
|||
.withPositions([connectedPosition]); |
|||
|
|||
const overlayRef = this.overlay.create(config); |
|||
overlayRef.backdropClick().subscribe(() => { |
|||
overlayRef.dispose(); |
|||
}); |
|||
const providers: StaticProvider[] = [ |
|||
{ |
|||
provide: PERSISTENT_FILTER_PANEL_DATA, |
|||
useValue: { |
|||
rpcStatus: this.rpcStatusFilter |
|||
} as PersistentFilterPanelData |
|||
}, |
|||
{ |
|||
provide: OverlayRef, |
|||
useValue: overlayRef |
|||
} |
|||
]; |
|||
const injector = Injector.create({parent: this.viewContainerRef.injector, providers}); |
|||
const componentRef = overlayRef.attach(new ComponentPortal(PersistentFilterPanelComponent, |
|||
this.viewContainerRef, injector)); |
|||
componentRef.onDestroy(() => { |
|||
if (componentRef.instance.result) { |
|||
const result = componentRef.instance.result; |
|||
this.rpcStatusFilter = result.rpcStatus; |
|||
this.reloadPersistentRequests(); |
|||
} |
|||
}); |
|||
this.ctx.detectChanges(); |
|||
} |
|||
} |
|||
|
|||
class PersistentDatasource implements DataSource<PersistentRpcData> { |
|||
|
|||
private persistentSubject = new BehaviorSubject<PersistentRpcData[]>([]); |
|||
private pageDataSubject = new BehaviorSubject<PageData<PersistentRpcData>>(emptyPageData<PersistentRpcData>()); |
|||
|
|||
private rpcErrorText: string; |
|||
private executingSubjects: Array<Subject<any>>; |
|||
private executingRpcRequest = false; |
|||
|
|||
public dataLoading = true; |
|||
public pageData$ = this.pageDataSubject.asObservable(); |
|||
|
|||
constructor(private translate: TranslateService, |
|||
private subscription: IWidgetSubscription, |
|||
private ctx: WidgetContext) { |
|||
} |
|||
|
|||
connect(collectionViewer: CollectionViewer): Observable<PersistentRpcData[] | ReadonlyArray<PersistentRpcData>> { |
|||
return this.persistentSubject.asObservable(); |
|||
} |
|||
|
|||
disconnect(collectionViewer: CollectionViewer): void { |
|||
this.persistentSubject.complete(); |
|||
this.pageDataSubject.complete(); |
|||
} |
|||
|
|||
reset() { |
|||
const pageData = emptyPageData<PersistentRpcData>(); |
|||
this.persistentSubject.next(pageData.data); |
|||
this.pageDataSubject.next(pageData); |
|||
} |
|||
|
|||
loadPersistent(pageLink: PageLink, rpcStatusFilter: RpcStatus) { |
|||
this.dataLoading = true; |
|||
|
|||
const result = new ReplaySubject<PageData<PersistentRpcData>>(); |
|||
this.fetchEntities(pageLink, rpcStatusFilter).pipe( |
|||
catchError(() => of(emptyPageData<PersistentRpcData>())), |
|||
).subscribe( |
|||
(pageData) => { |
|||
this.persistentSubject.next(pageData.data); |
|||
this.pageDataSubject.next(pageData); |
|||
result.next(pageData); |
|||
this.dataLoading = false; |
|||
} |
|||
); |
|||
return result; |
|||
} |
|||
|
|||
fetchEntities(pageLink: PageLink, rpcStatusFilter: RpcStatus): Observable<PageData<PersistentRpcData>> { |
|||
if (!this.subscription.rpcEnabled) { |
|||
return throwError(new Error('Rpc disabled!')); |
|||
} else if (!this.subscription.targetDeviceId) { |
|||
return throwError(new Error('Target device is not set!')); |
|||
} |
|||
const rpcSubject: Subject<any> = new Subject<any>(); |
|||
|
|||
this.ctx.deviceService.getPersistedRpcRequests(this.subscription.targetDeviceId, pageLink, rpcStatusFilter).subscribe( |
|||
(responseBody) => { |
|||
rpcSubject.next(responseBody); |
|||
rpcSubject.complete(); |
|||
}, |
|||
(rejection: HttpErrorResponse) => { |
|||
this.rpcErrorText = null; |
|||
this.executingSubjects = []; |
|||
|
|||
const index = this.executingSubjects.indexOf(rpcSubject); |
|||
if (index >= 0) { |
|||
this.executingSubjects.splice(index, 1); |
|||
} |
|||
this.executingRpcRequest = this.executingSubjects.length > 0; |
|||
this.subscription.options.callbacks.rpcStateChanged(this.subscription); |
|||
if (!this.executingRpcRequest || rejection.status === 504) { |
|||
this.subscription.rpcRejection = rejection; |
|||
if (rejection.status === 504) { |
|||
this.subscription.rpcErrorText = 'Request Timeout.'; |
|||
} else { |
|||
this.subscription.rpcErrorText = 'Error : ' + rejection.status + ' - ' + rejection.statusText; |
|||
const error = this.extractRejectionErrorText(rejection); |
|||
if (error) { |
|||
this.subscription.rpcErrorText += '</br>'; |
|||
this.subscription.rpcErrorText += error.message || ''; |
|||
} |
|||
} |
|||
this.subscription.callbacks.onRpcFailed(this.subscription); |
|||
} |
|||
rpcSubject.error(rejection); |
|||
} |
|||
); |
|||
return rpcSubject.asObservable(); |
|||
} |
|||
|
|||
extractRejectionErrorText(rejection: HttpErrorResponse) { |
|||
let error = null; |
|||
if (rejection.error) { |
|||
error = rejection.error; |
|||
try { |
|||
error = rejection.error ? JSON.parse(rejection.error) : null; |
|||
} catch (e) {} |
|||
} |
|||
if (error && !error.message) { |
|||
error = this.prepareMessageFromData(error); |
|||
} else if (error && error.message) { |
|||
error = error.message; |
|||
} |
|||
return error; |
|||
} |
|||
|
|||
prepareMessageFromData(data) { |
|||
if (typeof data === 'object' && data.constructor === ArrayBuffer) { |
|||
const msg = String.fromCharCode.apply(null, new Uint8Array(data)); |
|||
try { |
|||
const msgObj = JSON.parse(msg); |
|||
if (msgObj.message) { |
|||
return msgObj.message; |
|||
} else { |
|||
return msg; |
|||
} |
|||
} catch (e) { |
|||
return msg; |
|||
} |
|||
} else { |
|||
return data; |
|||
} |
|||
} |
|||
|
|||
isEmpty(): Observable<boolean> { |
|||
return this.persistentSubject.pipe( |
|||
map((requests) => !requests.length) |
|||
); |
|||
} |
|||
|
|||
total(): Observable<number> { |
|||
return this.pageDataSubject.pipe( |
|||
map((pageData) => pageData.totalElements) |
|||
); |
|||
} |
|||
} |
|||
@ -0,0 +1,22 @@ |
|||
<!-- |
|||
|
|||
Copyright © 2016-2021 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. |
|||
|
|||
--> |
|||
<div style="background: #fff;" [ngClass]="{'fill-height': fillHeight}"> |
|||
<label class="tb-title no-padding" *ngIf="label">{{ label }}</label> |
|||
<span fxFlex></span> |
|||
<div #jsonViewer id="tb-json-view" [ngClass]="{'fill-height': fillHeight}"></div> |
|||
</div> |
|||
@ -0,0 +1,27 @@ |
|||
/** |
|||
* Copyright © 2016-2021 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 { |
|||
#tb-json-view { |
|||
width: 100%; |
|||
height: 100%; |
|||
margin-bottom: 16px; |
|||
border: 1px solid #c0c0c0; |
|||
|
|||
&:not(.fill-height) { |
|||
min-height: 100px; |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,165 @@ |
|||
///
|
|||
/// Copyright © 2016-2021 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, forwardRef, Input, OnInit, Renderer2, ViewChild } from '@angular/core'; |
|||
import { NG_VALUE_ACCESSOR } from '@angular/forms'; |
|||
import { Ace } from 'ace-builds'; |
|||
import { coerceBooleanProperty } from '@angular/cdk/coercion'; |
|||
import { Store } from '@ngrx/store'; |
|||
import { AppState } from '@core/core.state'; |
|||
import { RafService } from '@core/services/raf.service'; |
|||
import { isDefinedAndNotNull, isUndefined } from '@core/utils'; |
|||
import { getAce } from '@shared/models/ace/ace.models'; |
|||
|
|||
@Component({ |
|||
selector: 'tb-json-object-view', |
|||
templateUrl: './json-object-view.component.html', |
|||
styleUrls: ['./json-object-view.component.scss'], |
|||
providers: [ |
|||
{ |
|||
provide: NG_VALUE_ACCESSOR, |
|||
useExisting: forwardRef(() => JsonObjectViewComponent), |
|||
multi: true |
|||
} |
|||
] |
|||
}) |
|||
export class JsonObjectViewComponent implements OnInit { |
|||
|
|||
@ViewChild('jsonViewer', {static: true}) |
|||
jsonViewerElmRef: ElementRef; |
|||
|
|||
private jsonViewer: Ace.Editor; |
|||
private viewerElement: Ace.Editor; |
|||
private propagateChange = null; |
|||
private modelValue: any; |
|||
private contentValue: string; |
|||
|
|||
@Input() label: string; |
|||
|
|||
@Input() fillHeight: boolean; |
|||
|
|||
@Input() editorStyle: { [klass: string]: any }; |
|||
|
|||
@Input() sort: (key: string, value: any) => any; |
|||
|
|||
private widthValue: boolean; |
|||
|
|||
get autoWidth(): boolean { |
|||
return this.widthValue; |
|||
} |
|||
|
|||
@Input() |
|||
set autoWidth(value: boolean) { |
|||
this.widthValue = coerceBooleanProperty(value); |
|||
} |
|||
|
|||
private heigthValue: boolean; |
|||
|
|||
get autoHeight(): boolean { |
|||
return this.heigthValue; |
|||
} |
|||
|
|||
@Input() |
|||
set autoHeight(value: boolean) { |
|||
this.heigthValue = coerceBooleanProperty(value); |
|||
} |
|||
|
|||
constructor(public elementRef: ElementRef, |
|||
protected store: Store<AppState>, |
|||
private raf: RafService, |
|||
private renderer: Renderer2) { |
|||
} |
|||
|
|||
ngOnInit(): void { |
|||
this.viewerElement = this.jsonViewerElmRef.nativeElement; |
|||
let editorOptions: Partial<Ace.EditorOptions> = { |
|||
mode: 'ace/mode/java', |
|||
theme: 'ace/theme/github', |
|||
showGutter: false, |
|||
showPrintMargin: false, |
|||
readOnly: true |
|||
}; |
|||
|
|||
const advancedOptions = { |
|||
enableSnippets: false, |
|||
enableBasicAutocompletion: false, |
|||
enableLiveAutocompletion: false |
|||
}; |
|||
|
|||
editorOptions = {...editorOptions, ...advancedOptions}; |
|||
getAce().subscribe( |
|||
(ace) => { |
|||
this.jsonViewer = ace.edit(this.viewerElement, editorOptions); |
|||
this.jsonViewer.session.setUseWrapMode(false); |
|||
this.jsonViewer.setValue(this.contentValue ? this.contentValue : '', -1); |
|||
if (this.contentValue && (this.widthValue || this.heigthValue)) { |
|||
this.updateEditorSize(this.viewerElement, this.contentValue, this.jsonViewer); |
|||
} |
|||
} |
|||
); |
|||
} |
|||
|
|||
updateEditorSize(editorElement: any, content: string, editor: Ace.Editor) { |
|||
let newHeight = 200; |
|||
let newWidth = 600; |
|||
if (content && content.length > 0) { |
|||
const lines = content.split('\n'); |
|||
newHeight = 17 * lines.length + 17; |
|||
let maxLineLength = 0; |
|||
lines.forEach((row) => { |
|||
const line = row.replace(/\t/g, ' ').replace(/\n/g, ''); |
|||
const lineLength = line.length; |
|||
maxLineLength = Math.max(maxLineLength, lineLength); |
|||
}); |
|||
newWidth = 8 * maxLineLength + 16; |
|||
} |
|||
if (this.heigthValue) { |
|||
this.renderer.setStyle(editorElement, 'height', newHeight.toString() + 'px'); |
|||
} |
|||
if (this.widthValue) { |
|||
this.renderer.setStyle(editorElement, 'width', newWidth.toString() + 'px'); |
|||
} |
|||
editor.resize(); |
|||
} |
|||
registerOnChange(fn: any): void { |
|||
this.propagateChange = fn; |
|||
} |
|||
|
|||
registerOnTouched(fn: any): void { |
|||
} |
|||
|
|||
writeValue(value: any): void { |
|||
this.modelValue = value; |
|||
this.contentValue = ''; |
|||
try { |
|||
if (isDefinedAndNotNull(this.modelValue)) { |
|||
this.contentValue = JSON.stringify(this.modelValue, isUndefined(this.sort) ? undefined : |
|||
(key, objectValue) => { |
|||
return this.sort(key, objectValue); |
|||
}, 2); |
|||
} |
|||
} catch (e) { |
|||
console.error(e); |
|||
} |
|||
if (this.jsonViewer) { |
|||
this.jsonViewer.setValue(this.contentValue ? this.contentValue : '', -1); |
|||
if (this.contentValue && (this.widthValue || this.heigthValue)) { |
|||
this.updateEditorSize(this.viewerElement, this.contentValue, this.jsonViewer); |
|||
} |
|||
} |
|||
} |
|||
|
|||
} |
|||
Loading…
Reference in new issue