tsai
/
thingsboard
mirror of https://github.com/thingsboard/thingsboard.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

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

pull/8938/head
Vladyslav_Prykhodko 3 years ago
parent
329a24c019
commit
b69f63660b
5 changed files with 100 additions and 118 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 168
      ui-ngx/src/app/modules/home/pages/device/device-check-connectivity-dialog.component.html
  2. 5
      ui-ngx/src/app/modules/home/pages/device/device-check-connectivity-dialog.component.scss
  3. 42
      ui-ngx/src/app/modules/home/pages/device/device-check-connectivity-dialog.component.ts
  4. 1
      ui-ngx/src/app/shared/models/device.models.ts
  5. 2
      ui-ngx/src/assets/locale/locale.constant-en_US.json

168
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 no-padding no-border tb-tab-body">
<div class="tb-form-panel stroked"> <div class="tb-form-panel stroked">
<div class="tb-form-panel-title" translate>device.connectivity.install-necessary-client-tools</div> <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> </div>
<ng-container <ng-container
*ngTemplateOutlet="executeCommand; context: {cmd: { *ngTemplateOutlet="executeCommand; context: {cmd: {
@ -129,92 +129,100 @@
</mat-tab-group> </mat-tab-group>
</ng-template> </ng-template>
<ng-template [ngSwitchCase]="DeviceTransportType.MQTT"> <ng-template [ngSwitchCase]="DeviceTransportType.MQTT">
<div class="tb-no-data-text" translate>device.connectivity.use-following-instructions</div> <div *ngIf="commands.mqtt.sparkplug; else mqttCommands" class="tb-form-panel stroked">
<mat-tab-group [(selectedIndex)]="mqttTabIndex"> <ng-container
<mat-tab> *ngTemplateOutlet="seeDocumentation; context:
<ng-template mat-tab-label> {doc: {text: 'device.connectivity.sparkplug-command', href: 'https://thingsboard.io/docs/reference/mqtt-sparkplug-api/'}}">
<mat-icon class="tabs-icon" svgIcon="windows"></mat-icon> </ng-container>
Windows </div>
</ng-template> <ng-template #mqttCommands>
<ng-template matTabContent> <div class="tb-no-data-text" translate>device.connectivity.use-following-instructions</div>
<div class="tb-form-panel no-padding no-border tb-tab-body"> <mat-tab-group [(selectedIndex)]="mqttTabIndex">
<div class="tb-form-panel stroked"> <mat-tab>
<div class="tb-form-panel-title" translate>device.connectivity.install-necessary-client-tools</div> <ng-template mat-tab-label>
<div class="tb-install-windows"> <mat-icon class="tabs-icon" svgIcon="windows"></mat-icon>
<ng-container *ngTemplateOutlet="seeDocumentation; context: Windows
</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-title" translate>device.connectivity.install-necessary-client-tools</div>
<div class="tb-install-instruction-text">
<ng-container *ngTemplateOutlet="seeDocumentation; context:
{doc: {text: 'device.connectivity.install-mqtt-windows', {doc: {text: 'device.connectivity.install-mqtt-windows',
href: 'https://thingsboard.io/docs/getting-started-guides/helloworld/?connectdevice=mqtt-windows#step-2-connect-device'}}"> href: 'https://thingsboard.io/docs/getting-started-guides/helloworld/?connectdevice=mqtt-windows#step-2-connect-device'}}">
</ng-container> </ng-container>
</div>
</div> </div>
</div> <ng-container
<ng-container *ngTemplateOutlet="executeCommand; context: {cmd: {
*ngTemplateOutlet="executeCommand; context: {cmd: {
noSecLabel: 'MQTT', noSec: commands.mqtt.mqtt, noSecLabel: 'MQTT', noSec: commands.mqtt.mqtt,
secLabel: 'MQTTs', sec: commands.mqtt.mqtts, secLabel: 'MQTTs', sec: commands.mqtt.mqtts,
doc: {text: 'device.connectivity.mqtts-x509-command', href: 'https://thingsboard.io/docs/user-guide/mqtt-over-ssl/'}}}"> doc: {text: 'device.connectivity.mqtts-x509-command', href: 'https://thingsboard.io/docs/user-guide/mqtt-over-ssl/'}}}">
</ng-container> </ng-container>
</div>
</ng-template>
</mat-tab>
<mat-tab>
<ng-template mat-tab-label>
<mat-icon class="tabs-icon" svgIcon="macos"></mat-icon>
MacOS
</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-title" translate>device.connectivity.install-necessary-client-tools</div>
<tb-markdown usePlainMarkdown containerClass="tb-command-code"
[data]='createMarkDownCommand("brew install mosquitto-clients")'></tb-markdown>
</div> </div>
<ng-container </ng-template>
*ngTemplateOutlet="executeCommand; context: {cmd: { </mat-tab>
<mat-tab>
<ng-template mat-tab-label>
<mat-icon class="tabs-icon" svgIcon="macos"></mat-icon>
MacOS
</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-title" translate>device.connectivity.install-necessary-client-tools</div>
<tb-markdown usePlainMarkdown containerClass="tb-command-code"
[data]='createMarkDownCommand("brew install mosquitto-clients")'></tb-markdown>
</div>
<ng-container
*ngTemplateOutlet="executeCommand; context: {cmd: {
noSecLabel: 'MQTT', noSec: commands.mqtt.mqtt, noSecLabel: 'MQTT', noSec: commands.mqtt.mqtt,
secLabel: 'MQTTs', sec: commands.mqtt.mqtts, secLabel: 'MQTTs', sec: commands.mqtt.mqtts,
doc: {text: 'device.connectivity.mqtts-x509-command', href: 'https://thingsboard.io/docs/user-guide/mqtt-over-ssl/'}}}"> doc: {text: 'device.connectivity.mqtts-x509-command', href: 'https://thingsboard.io/docs/user-guide/mqtt-over-ssl/'}}}">
</ng-container> </ng-container>
</div>
</ng-template>
</mat-tab>
<mat-tab>
<ng-template mat-tab-label>
<mat-icon class="tabs-icon" svgIcon="linux"></mat-icon>
Linux
</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-title" translate>device.connectivity.install-necessary-client-tools</div>
<tb-markdown usePlainMarkdown containerClass="tb-command-code"
[data]='createMarkDownCommand("sudo apt-get install curl mosquitto-clients")'></tb-markdown>
</div> </div>
<ng-container </ng-template>
*ngTemplateOutlet="executeCommand; context: {cmd: { </mat-tab>
<mat-tab>
<ng-template mat-tab-label>
<mat-icon class="tabs-icon" svgIcon="linux"></mat-icon>
Linux
</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-title" translate>device.connectivity.install-necessary-client-tools</div>
<tb-markdown usePlainMarkdown containerClass="tb-command-code"
[data]='createMarkDownCommand("sudo apt-get install curl mosquitto-clients")'></tb-markdown>
</div>
<ng-container
*ngTemplateOutlet="executeCommand; context: {cmd: {
noSecLabel: 'MQTT', noSec: commands.mqtt.mqtt, noSecLabel: 'MQTT', noSec: commands.mqtt.mqtt,
secLabel: 'MQTTs', sec: commands.mqtt.mqtts, secLabel: 'MQTTs', sec: commands.mqtt.mqtts,
doc: {text: 'device.connectivity.mqtts-x509-command', href: 'https://thingsboard.io/docs/user-guide/mqtt-over-ssl/'}}}"> doc: {text: 'device.connectivity.mqtts-x509-command', href: 'https://thingsboard.io/docs/user-guide/mqtt-over-ssl/'}}}">
</ng-container> </ng-container>
</div> </div>
</ng-template> </ng-template>
</mat-tab> </mat-tab>
<mat-tab *ngIf="!!commands.mqtt.docker"> <mat-tab *ngIf="!!commands.mqtt.docker">
<ng-template mat-tab-label> <ng-template mat-tab-label>
<mat-icon class="tabs-icon" svgIcon="docker"></mat-icon> <mat-icon class="tabs-icon" svgIcon="docker"></mat-icon>
Docker Docker
</ng-template> </ng-template>
<ng-template matTabContent> <ng-template matTabContent>
<div class="tb-form-panel no-padding no-border tb-tab-body"> <div class="tb-form-panel no-padding no-border tb-tab-body">
<ng-container <ng-container
*ngTemplateOutlet="executeCommand; context: {cmd: { *ngTemplateOutlet="executeCommand; context: {cmd: {
noSecLabel: 'MQTT', noSec: commands.mqtt.docker.mqtt, noSecLabel: 'MQTT', noSec: commands.mqtt.docker.mqtt,
secLabel: 'MQTTs', sec: commands.mqtt.docker.mqtts, secLabel: 'MQTTs', sec: commands.mqtt.docker.mqtts,
doc: {text: 'device.connectivity.mqtts-x509-command', href: 'https://thingsboard.io/docs/user-guide/mqtt-over-ssl/'}}}"> doc: {text: 'device.connectivity.mqtts-x509-command', href: 'https://thingsboard.io/docs/user-guide/mqtt-over-ssl/'}}}">
</ng-container> </ng-container>
</div> </div>
</ng-template> </ng-template>
</mat-tab> </mat-tab>
</mat-tab-group> </mat-tab-group>
</ng-template>
</ng-template> </ng-template>
<ng-template [ngSwitchCase]="DeviceTransportType.COAP"> <ng-template [ngSwitchCase]="DeviceTransportType.COAP">
<div class="tb-no-data-text" translate>device.connectivity.use-following-instructions</div> <div class="tb-no-data-text" translate>device.connectivity.use-following-instructions</div>
@ -226,10 +234,14 @@
</ng-template> </ng-template>
<ng-template matTabContent> <ng-template matTabContent>
<div class="tb-form-panel no-padding no-border tb-tab-body"> <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> <div class="tb-form-panel-title" translate>device.connectivity.install-necessary-client-tools</div>
<tb-markdown usePlainMarkdown containerClass="tb-command-code" <div class="tb-install-instruction-text">
[data]='installCoap'></tb-markdown> <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> </div>
<ng-container <ng-container
*ngTemplateOutlet="executeCommand; context: {cmd: { *ngTemplateOutlet="executeCommand; context: {cmd: {
@ -247,10 +259,14 @@
</ng-template> </ng-template>
<ng-template matTabContent> <ng-template matTabContent>
<div class="tb-form-panel no-padding no-border tb-tab-body"> <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> <div class="tb-form-panel-title" translate>device.connectivity.install-necessary-client-tools</div>
<tb-markdown usePlainMarkdown containerClass="tb-command-code" <div class="tb-install-instruction-text">
[data]='installCoap'></tb-markdown> <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> </div>
<ng-container <ng-container
*ngTemplateOutlet="executeCommand; context: {cmd: { *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 { .tb-form-table-body {
max-height: 88px; max-height: 108px;
min-height: 108px;
overflow-y: auto; overflow-y: auto;
scrollbar-gutter: stable; scrollbar-gutter: stable;
@ -88,7 +89,7 @@
} }
} }
.tb-install-windows { .tb-install-instruction-text {
min-height: 42px; 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 { Router } from '@angular/router';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog'; import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
import { DeviceService } from '@core/http/device.service'; import { DeviceService } from '@core/http/device.service';
import { FormBuilder } from '@angular/forms';
import { import {
AttributeData, AttributeData,
AttributeScope, AttributeScope,
@ -41,7 +40,6 @@ import {
NetworkTransportType, NetworkTransportType,
PublishTelemetryCommand PublishTelemetryCommand
} from '@shared/models/device.models'; } from '@shared/models/device.models';
import { UserSettingsService } from '@core/http/user-settings.service';
import { ActionPreferencesUpdateUserSettings } from '@core/auth/auth.actions'; import { ActionPreferencesUpdateUserSettings } from '@core/auth/auth.actions';
import { coerceBooleanProperty } from '@angular/cdk/coercion'; import { coerceBooleanProperty } from '@angular/cdk/coercion';
import { getOS } from '@core/utils'; import { getOS } from '@core/utils';
@ -84,41 +82,6 @@ export class DeviceCheckConnectivityDialogComponent extends
mqttTabIndex = 0; mqttTabIndex = 0;
coapTabIndex = 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 telemetrySubscriber: TelemetrySubscriber;
private currentTime = Date.now(); private currentTime = Date.now();
@ -129,10 +92,8 @@ export class DeviceCheckConnectivityDialogComponent extends
protected router: Router, protected router: Router,
@Inject(MAT_DIALOG_DATA) private data: DeviceCheckConnectivityDialogData, @Inject(MAT_DIALOG_DATA) private data: DeviceCheckConnectivityDialogData,
public dialogRef: MatDialogRef<DeviceCheckConnectivityDialogComponent>, public dialogRef: MatDialogRef<DeviceCheckConnectivityDialogComponent>,
private fb: FormBuilder,
private deviceService: DeviceService, private deviceService: DeviceService,
private telemetryWsService: TelemetryWebsocketService, private telemetryWsService: TelemetryWebsocketService,
private userSettingsService: UserSettingsService,
private zone: NgZone) { private zone: NgZone) {
super(store, router, dialogRef); super(store, router, dialogRef);
@ -220,7 +181,7 @@ export class DeviceCheckConnectivityDialogComponent extends
this.telemetrySubscriber.subscribe(); this.telemetrySubscriber.subscribe();
this.telemetrySubscriber.attributeData$().subscribe( this.telemetrySubscriber.attributeData$().subscribe(
(data) => { (data) => {
this.latestTelemetry = data.reduce<Array<AttributeData>>((accumulator, item) => { const telemetry = data.reduce<Array<AttributeData>>((accumulator, item) => {
if (item.key === 'active') { if (item.key === 'active') {
this.status = coerceBooleanProperty(item.value); this.status = coerceBooleanProperty(item.value);
} else if (item.lastUpdateTs > this.currentTime) { } else if (item.lastUpdateTs > this.currentTime) {
@ -228,6 +189,7 @@ export class DeviceCheckConnectivityDialogComponent extends
} }
return accumulator; 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; mqtt?: string;
mqtts?: string | Array<string>; mqtts?: string | Array<string>;
}; };
sparkplug?: string;
}; };
coap: { coap: {
coap?: string; 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", "execute-following-command": "Executive the following command",
"install-curl-windows": "Starting Windows 10 b17063, cURL is available by default", "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-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", "install-necessary-client-tools": "Install necessary client tools",
"mqtts-x509-command": "Use the following documentation to connect the device via MQTT with authorization X509", "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", "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.", "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." "lwm2m-command": "Use the following documentation to connect the device through the LWM2M."
} }
}, },

Write Preview
Loading…
Cancel
Save