dendi-wang/thingsboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI: Device connectivity change coap install instruction and added support spartplug

Browse Source
This commit is contained in:
Vladyslav_Prykhodko 2023-07-27 16:59:26 +03:00
parent 329a24c019
commit b69f63660b
5 changed files with 100 additions and 118 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
ui-ngx/src/app/modules/home/pages/device/device-check-connectivity-dialog.component.html
View File

@ -73,7 +73,7 @@
<div class="tb-form-panel no-padding no-border tb-tab-body">
<div class="tb-form-panel stroked">
<div class="tb-form-panel-title" translate>device.connectivity.install-necessary-client-tools</div>
<div class="tb-install-windows" translate>device.connectivity.install-curl-windows</div>
<div class="tb-install-instruction-text" translate>device.connectivity.install-curl-windows</div>
</div>
<ng-container
*ngTemplateOutlet="executeCommand; context: {cmd: {
@ -129,6 +129,13 @@
</mat-tab-group>
</ng-template>
<ng-template [ngSwitchCase]="DeviceTransportType.MQTT">
<div *ngIf="commands.mqtt.sparkplug; else mqttCommands" class="tb-form-panel stroked">
<ng-container
*ngTemplateOutlet="seeDocumentation; context:
{doc: {text: 'device.connectivity.sparkplug-command', href: 'https://thingsboard.io/docs/reference/mqtt-sparkplug-api/'}}">
</ng-container>
</div>
<ng-template #mqttCommands>
<div class="tb-no-data-text" translate>device.connectivity.use-following-instructions</div>
<mat-tab-group [(selectedIndex)]="mqttTabIndex">
<mat-tab>
@ -140,7 +147,7 @@
<div class="tb-form-panel no-padding no-border tb-tab-body">
<div class="tb-form-panel stroked">
<div class="tb-form-panel-title" translate>device.connectivity.install-necessary-client-tools</div>
<div class="tb-install-windows">
<div class="tb-install-instruction-text">
<ng-container *ngTemplateOutlet="seeDocumentation; context:
{doc: {text: 'device.connectivity.install-mqtt-windows',
href: 'https://thingsboard.io/docs/getting-started-guides/helloworld/?connectdevice=mqtt-windows#step-2-connect-device'}}">
@ -216,6 +223,7 @@
</mat-tab>
</mat-tab-group>
</ng-template>
</ng-template>
<ng-template [ngSwitchCase]="DeviceTransportType.COAP">
<div class="tb-no-data-text" translate>device.connectivity.use-following-instructions</div>
<mat-tab-group [(selectedIndex)]="coapTabIndex">
@ -226,10 +234,14 @@
</ng-template>
<ng-template matTabContent>
<div class="tb-form-panel no-padding no-border tb-tab-body">
<div class="tb-form-panel stroked">
<div class="tb-form-panel stroked" *ngIf="commands.coap.coaps !== 'Check documentation'">
<div class="tb-form-panel-title" translate>device.connectivity.install-necessary-client-tools</div>
<tb-markdown usePlainMarkdown containerClass="tb-command-code"
[data]='installCoap'></tb-markdown>
<div class="tb-install-instruction-text">
<ng-container *ngTemplateOutlet="seeDocumentation; context:
{doc: {text: 'device.connectivity.install-coap-client',
href: 'https://thingsboard.io/docs/user-guide/ssl/coap-access-token/'}}">
</ng-container>
</div>
</div>
<ng-container
*ngTemplateOutlet="executeCommand; context: {cmd: {
@ -247,10 +259,14 @@
</ng-template>
<ng-template matTabContent>
<div class="tb-form-panel no-padding no-border tb-tab-body">
<div class="tb-form-panel stroked">
<div class="tb-form-panel stroked" *ngIf="commands.coap.coaps !== 'Check documentation'">
<div class="tb-form-panel-title" translate>device.connectivity.install-necessary-client-tools</div>
<tb-markdown usePlainMarkdown containerClass="tb-command-code"
[data]='installCoap'></tb-markdown>
<div class="tb-install-instruction-text">
<ng-container *ngTemplateOutlet="seeDocumentation; context:
{doc: {text: 'device.connectivity.install-coap-client',
href: 'https://thingsboard.io/docs/user-guide/ssl/coap-access-token/'}}">
</ng-container>
</div>
</div>
<ng-container
*ngTemplateOutlet="executeCommand; context: {cmd: {

5
ui-ngx/src/app/modules/home/pages/device/device-check-connectivity-dialog.component.scss
View File

@ -73,7 +73,8 @@
}
.tb-form-table-body {
max-height: 88px;
max-height: 108px;
min-height: 108px;
overflow-y: auto;
scrollbar-gutter: stable;
@ -88,7 +89,7 @@
}
}
.tb-install-windows {
.tb-install-instruction-text {
min-height: 42px;
}

42
ui-ngx/src/app/modules/home/pages/device/device-check-connectivity-dialog.component.ts
View File

@ -21,7 +21,6 @@ import { AppState } from '@core/core.state';
import { Router } from '@angular/router';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
import { DeviceService } from '@core/http/device.service';
import { FormBuilder } from '@angular/forms';
import {
AttributeData,
AttributeScope,
@ -41,7 +40,6 @@ import {
NetworkTransportType,
PublishTelemetryCommand
} from '@shared/models/device.models';
import { UserSettingsService } from '@core/http/user-settings.service';
import { ActionPreferencesUpdateUserSettings } from '@core/auth/auth.actions';
import { coerceBooleanProperty } from '@angular/cdk/coercion';
import { getOS } from '@core/utils';
@ -84,41 +82,6 @@ export class DeviceCheckConnectivityDialogComponent extends
mqttTabIndex = 0;
coapTabIndex = 0;
readonly installCoap = '```bash\n' +
'git clone https://github.com/obgm/libcoap --recursive\n' +
'{:copy-code}\n' +
'```\n' +
'<br />\n' +
'\n' +
'```bash\n' +
'cd libcoap\n' +
'{:copy-code}\n' +
'```\n' +
'<br />\n' +
'\n' +
'```bash\n' +
'./autogen.sh\n' +
'{:copy-code}\n' +
'```\n' +
'<br />\n' +
'\n' +
'```bash\n' +
'./configure --with-openssl --disable-doxygen --disable-manpages --disable-shared\n' +
'{:copy-code}\n' +
'```\n' +
'<br />\n' +
'\n' +
'```bash\n' +
'make\n' +
'{:copy-code}\n' +
'```\n' +
'<br />\n' +
'\n' +
'```bash\n' +
'sudo make install\n' +
'{:copy-code}\n' +
'```';
private telemetrySubscriber: TelemetrySubscriber;
private currentTime = Date.now();
@ -129,10 +92,8 @@ export class DeviceCheckConnectivityDialogComponent extends
protected router: Router,
@Inject(MAT_DIALOG_DATA) private data: DeviceCheckConnectivityDialogData,
public dialogRef: MatDialogRef<DeviceCheckConnectivityDialogComponent>,
private fb: FormBuilder,
private deviceService: DeviceService,
private telemetryWsService: TelemetryWebsocketService,
private userSettingsService: UserSettingsService,
private zone: NgZone) {
super(store, router, dialogRef);
@ -220,7 +181,7 @@ export class DeviceCheckConnectivityDialogComponent extends
this.telemetrySubscriber.subscribe();
this.telemetrySubscriber.attributeData$().subscribe(
(data) => {
this.latestTelemetry = data.reduce<Array<AttributeData>>((accumulator, item) => {
const telemetry = data.reduce<Array<AttributeData>>((accumulator, item) => {
if (item.key === 'active') {
this.status = coerceBooleanProperty(item.value);
} else if (item.lastUpdateTs > this.currentTime) {
@ -228,6 +189,7 @@ export class DeviceCheckConnectivityDialogComponent extends
}
return accumulator;
}, []);
this.latestTelemetry = telemetry.sort((a, b) => b.lastUpdateTs - a.lastUpdateTs);
}
);
});

1
ui-ngx/src/app/shared/models/device.models.ts
View File

@ -849,6 +849,7 @@ export interface PublishTelemetryCommand {
mqtt?: string;
mqtts?: string | Array<string>;
};
sparkplug?: string;
};
coap: {
coap?: string;

2
ui-ngx/src/assets/locale/locale.constant-en_US.json
View File

@ -1400,10 +1400,12 @@
"execute-following-command": "Executive the following command",
"install-curl-windows": "Starting Windows 10 b17063, cURL is available by default",
"install-mqtt-windows": "Use the instructions to download, install, setup and run mosquitto_pub",
"install-coap-client": "Use the instructions to download, install, setup and run coap-client",
"install-necessary-client-tools": "Install necessary client tools",
"mqtts-x509-command": "Use the following documentation to connect the device via MQTT with authorization X509",
"coaps-x509-command": "Use the following documentation to connect the device via CoAP over DTLS with authorization X509",
"snmp-command": "Use the following documentation to connect the device through the SNMP.",
"sparkplug-command": "Use the following documentation to connect the device through the MQTT Sparkplug.",
"lwm2m-command": "Use the following documentation to connect the device through the LWM2M."
}
},