From b69f63660b5e8a9e1b8c1a0e90d35d9a9253fe41 Mon Sep 17 00:00:00 2001
From: Vladyslav_Prykhodko <vprykhodko@thingsboard.io>
Date: Thu, 27 Jul 2023 16:59:26 +0300
Subject: [PATCH] UI: Device connectivity change coap install instruction and
 added support spartplug

---
 ...e-check-connectivity-dialog.component.html | 168 ++++++++++--------
 ...e-check-connectivity-dialog.component.scss |   5 +-
 ...ice-check-connectivity-dialog.component.ts |  42 +----
 ui-ngx/src/app/shared/models/device.models.ts |   1 +
 .../assets/locale/locale.constant-en_US.json  |   2 +
 5 files changed, 100 insertions(+), 118 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/pages/device/device-check-connectivity-dialog.component.html b/ui-ngx/src/app/modules/home/pages/device/device-check-connectivity-dialog.component.html
index 0f9c6dc055..71a8364134 100644
--- a/ui-ngx/src/app/modules/home/pages/device/device-check-connectivity-dialog.component.html
+++ b/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,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: {
diff --git a/ui-ngx/src/app/modules/home/pages/device/device-check-connectivity-dialog.component.scss b/ui-ngx/src/app/modules/home/pages/device/device-check-connectivity-dialog.component.scss
index fe1c24eb34..348fa01a26 100644
--- a/ui-ngx/src/app/modules/home/pages/device/device-check-connectivity-dialog.component.scss
+++ b/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;
   }
 
diff --git a/ui-ngx/src/app/modules/home/pages/device/device-check-connectivity-dialog.component.ts b/ui-ngx/src/app/modules/home/pages/device/device-check-connectivity-dialog.component.ts
index 07da1a43ed..2135a3aeea 100644
--- a/ui-ngx/src/app/modules/home/pages/device/device-check-connectivity-dialog.component.ts
+++ b/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);
         }
       );
     });
diff --git a/ui-ngx/src/app/shared/models/device.models.ts b/ui-ngx/src/app/shared/models/device.models.ts
index e5dd1e9efc..66419a10a8 100644
--- a/ui-ngx/src/app/shared/models/device.models.ts
+++ b/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;
diff --git a/ui-ngx/src/assets/locale/locale.constant-en_US.json b/ui-ngx/src/assets/locale/locale.constant-en_US.json
index 484f67158b..7e248e7e5b 100644
--- a/ui-ngx/src/assets/locale/locale.constant-en_US.json
+++ b/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."
         }
     },