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

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

@@ -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"
+                    <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>
                   <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"
+                    <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>
                   <ng-container
                     *ngTemplateOutlet="executeCommand; context: {cmd: {

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

@@ -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;
   }
 

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

@@ -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);
         }
       );
     });

ui-ngx/src/app/shared/models/device.models.ts

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

ui-ngx/src/assets/locale/locale.constant-en_US.json

@@ -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."
         }
     },