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
Split 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 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,92 +129,100 @@
</mat-tab-group>
</ng-template>
<ng-template [ngSwitchCase]="DeviceTransportType.MQTT">
<div class="tb-no-data-text" translate>device.connectivity.use-following-instructions</div>
<mat-tab-group [(selectedIndex)]="mqttTabIndex">
<mat-tab>
<ng-template mat-tab-label>
<mat-icon class="tabs-icon" svgIcon="windows"></mat-icon>
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-windows">
<ng-container *ngTemplateOutlet="seeDocumentation; context:
<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>
<ng-template mat-tab-label>
<mat-icon class="tabs-icon" svgIcon="windows"></mat-icon>
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',
href: 'https://thingsboard.io/docs/getting-started-guides/helloworld/?connectdevice=mqtt-windows#step-2-connect-device'}}">
</ng-container>
</ng-container>
</div>
</div>
</div>
<ng-container
*ngTemplateOutlet="executeCommand; context: {cmd: {
<ng-container
*ngTemplateOutlet="executeCommand; context: {cmd: {
noSecLabel: 'MQTT', noSec: commands.mqtt.mqtt,
secLabel: 'MQTTs', sec: commands.mqtt.mqtts,
doc: {text: 'device.connectivity.mqtts-x509-command', href: 'https://thingsboard.io/docs/user-guide/mqtt-over-ssl/'}}}">
</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>
</ng-container>
</div>
<ng-container
*ngTemplateOutlet="executeCommand; context: {cmd: {
</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>
<ng-container
*ngTemplateOutlet="executeCommand; context: {cmd: {
noSecLabel: 'MQTT', noSec: commands.mqtt.mqtt,
secLabel: 'MQTTs', sec: commands.mqtt.mqtts,
doc: {text: 'device.connectivity.mqtts-x509-command', href: 'https://thingsboard.io/docs/user-guide/mqtt-over-ssl/'}}}">
</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>
</ng-container>
</div>
<ng-container
*ngTemplateOutlet="executeCommand; context: {cmd: {
</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>
<ng-container
*ngTemplateOutlet="executeCommand; context: {cmd: {
noSecLabel: 'MQTT', noSec: commands.mqtt.mqtt,
secLabel: 'MQTTs', sec: commands.mqtt.mqtts,
doc: {text: 'device.connectivity.mqtts-x509-command', href: 'https://thingsboard.io/docs/user-guide/mqtt-over-ssl/'}}}">
</ng-container>
</div>
</ng-template>
</mat-tab>
<mat-tab *ngIf="!!commands.mqtt.docker">
<ng-template mat-tab-label>
<mat-icon class="tabs-icon" svgIcon="docker"></mat-icon>
Docker
</ng-template>
<ng-template matTabContent>
<div class="tb-form-panel no-padding no-border tb-tab-body">
<ng-container
*ngTemplateOutlet="executeCommand; context: {cmd: {
</ng-container>
</div>
</ng-template>
</mat-tab>
<mat-tab *ngIf="!!commands.mqtt.docker">
<ng-template mat-tab-label>
<mat-icon class="tabs-icon" svgIcon="docker"></mat-icon>
Docker
</ng-template>
<ng-template matTabContent>
<div class="tb-form-panel no-padding no-border tb-tab-body">
<ng-container
*ngTemplateOutlet="executeCommand; context: {cmd: {
noSecLabel: 'MQTT', noSec: commands.mqtt.docker.mqtt,
secLabel: 'MQTTs', sec: commands.mqtt.docker.mqtts,
doc: {text: 'device.connectivity.mqtts-x509-command', href: 'https://thingsboard.io/docs/user-guide/mqtt-over-ssl/'}}}">
</ng-container>
</div>
</ng-template>
</mat-tab>
</mat-tab-group>
</ng-container>
</div>
</ng-template>
</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>
@ -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."
}
},

Write Preview
Loading…
Cancel
Save