From 26044fc0358e11de99ad9cededc5ef5e1f87adec Mon Sep 17 00:00:00 2001 From: Vladyslav_Prykhodko Date: Fri, 21 Jul 2023 17:53:21 +0300 Subject: [PATCH] UI: Updated show device connectivity commands and detect operating system from user --- ui-ngx/src/app/app.component.ts | 5 + ui-ngx/src/app/core/http/device.service.ts | 10 +- ui-ngx/src/app/core/utils.ts | 26 +- ...e-check-connectivity-dialog.component.html | 363 +++++++++++++----- ...e-check-connectivity-dialog.component.scss | 19 +- ...ice-check-connectivity-dialog.component.ts | 89 ++++- ui-ngx/src/app/shared/models/device.models.ts | 25 ++ ui-ngx/src/assets/docker.svg | 1 + .../help/en_US/device/install_coap_client.md | 40 -- .../assets/help/en_US/device/install_curl.md | 34 -- .../help/en_US/device/install_mqtt_client.md | 38 -- ui-ngx/src/assets/linux.svg | 1 + .../assets/locale/locale.constant-en_US.json | 15 +- ui-ngx/src/assets/macos.svg | 1 + ui-ngx/src/assets/windows.svg | 1 + ui-ngx/src/form.scss | 7 + 16 files changed, 435 insertions(+), 240 deletions(-) create mode 100644 ui-ngx/src/assets/docker.svg delete mode 100644 ui-ngx/src/assets/help/en_US/device/install_coap_client.md delete mode 100644 ui-ngx/src/assets/help/en_US/device/install_curl.md delete mode 100644 ui-ngx/src/assets/help/en_US/device/install_mqtt_client.md create mode 100644 ui-ngx/src/assets/linux.svg create mode 100644 ui-ngx/src/assets/macos.svg create mode 100644 ui-ngx/src/assets/windows.svg diff --git a/ui-ngx/src/app/app.component.ts b/ui-ngx/src/app/app.component.ts index 8f612da5a1..627fc53608 100644 --- a/ui-ngx/src/app/app.component.ts +++ b/ui-ngx/src/app/app.component.ts @@ -94,6 +94,11 @@ export class AppComponent implements OnInit { ) ); + this.matIconRegistry.addSvgIcon('windows', this.domSanitizer.bypassSecurityTrustResourceUrl('/assets/windows.svg')); + this.matIconRegistry.addSvgIcon('macos', this.domSanitizer.bypassSecurityTrustResourceUrl('/assets/macos.svg')); + this.matIconRegistry.addSvgIcon('linux', this.domSanitizer.bypassSecurityTrustResourceUrl('/assets/linux.svg')); + this.matIconRegistry.addSvgIcon('docker', this.domSanitizer.bypassSecurityTrustResourceUrl('/assets/docker.svg')); + this.storageService.testLocalStorage(); this.setupTranslate(); diff --git a/ui-ngx/src/app/core/http/device.service.ts b/ui-ngx/src/app/core/http/device.service.ts index 44e91e43f8..8dff1e7ebc 100644 --- a/ui-ngx/src/app/core/http/device.service.ts +++ b/ui-ngx/src/app/core/http/device.service.ts @@ -25,8 +25,10 @@ import { ClaimResult, Device, DeviceCredentials, - DeviceInfo, DeviceInfoQuery, - DeviceSearchQuery + DeviceInfo, + DeviceInfoQuery, + DeviceSearchQuery, + PublishTelemetryCommand } from '@app/shared/models/device.models'; import { EntitySubtype } from '@app/shared/models/entity-type.models'; import { AuthService } from '@core/auth/auth.service'; @@ -208,8 +210,8 @@ export class DeviceService { return this.http.post('/api/device/bulk_import', entitiesData, defaultHttpOptionsFromConfig(config)); } - public getDevicePublishTelemetryCommands(deviceId: string, config?: RequestConfig): Observable<{[key: string]: string}> { - return this.http.get<{[key: string]: string}>(`/api/device/${deviceId}/commands`, defaultHttpOptionsFromConfig(config)); + public getDevicePublishTelemetryCommands(deviceId: string, config?: RequestConfig): Observable { + return this.http.get(`/api/device-connectivity/${deviceId}`, defaultHttpOptionsFromConfig(config)); } } diff --git a/ui-ngx/src/app/core/utils.ts b/ui-ngx/src/app/core/utils.ts index d6a3c3c6e3..c823c2bfea 100644 --- a/ui-ngx/src/app/core/utils.ts +++ b/ui-ngx/src/app/core/utils.ts @@ -355,9 +355,7 @@ const SNAKE_CASE_REGEXP = /[A-Z]/g; export function snakeCase(name: string, separator: string): string { separator = separator || '_'; - return name.replace(SNAKE_CASE_REGEXP, (letter, pos) => { - return (pos ? separator : '') + letter.toLowerCase(); - }); + return name.replace(SNAKE_CASE_REGEXP, (letter, pos) => (pos ? separator : '') + letter.toLowerCase()); } export function getDescendantProp(obj: any, path: string): any { @@ -776,3 +774,25 @@ export function genNextLabel(name: string, datasources: Datasource[]): string { } return label; } + +export const getOS = (): string => { + const userAgent = window.navigator.userAgent.toLowerCase(); + const macosPlatforms = /(macintosh|macintel|macppc|mac68k|macos|mac_powerpc)/i; + const windowsPlatforms = /(win32|win64|windows|wince)/i; + const iosPlatforms = /(iphone|ipad|ipod|darwin|ios)/i; + let os = null; + + if (macosPlatforms.test(userAgent)) { + os = 'macos'; + } else if (iosPlatforms.test(userAgent)) { + os = 'ios'; + } else if (windowsPlatforms.test(userAgent)) { + os = 'windows'; + } else if (/android/.test(userAgent)) { + os = 'android'; + } else if (/linux/.test(userAgent)) { + os = 'linux'; + } + + return os; +}; 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 a0991570eb..a595487521 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 @@ -59,121 +59,235 @@ {{ deviceTransportTypeTranslationMap.get(DeviceTransportType.LWM2M) | translate }} -
+
-
device.connectivity.use-following-instructions
-
- device.connectivity.install-curl - -
-
-
device.connectivity.http-command
- -
-
-
device.connectivity.https-command
- -
+
device.connectivity.use-following-instructions
+ + + + + Windows + + +
+
+
device.connectivity.install-necessary-client-tools
+
device.connectivity.install-curl-windows
+
+ + +
+ + + + + + MacOS + + +
+
+
device.connectivity.install-necessary-client-tools
+ +
+ + +
+ + + + + + Linux + + +
+
+
device.connectivity.install-necessary-client-tools
+ +
+ + +
+ + + -
-
device.connectivity.use-following-instructions
-
- device.connectivity.install-mqtt-client - -
-
-
-
device.connectivity.mqtt-command
- -
-
-
-
device.connectivity.mqtts-command
- -
- -
device.connectivity.mqtts-x509-command
- - -
+
device.connectivity.use-following-instructions
+ + + + + Windows + + +
+
+
device.connectivity.install-necessary-client-tools
+
Coming Soon!!!!
+
+ + +
+ + + + + + MacOS + + +
+
+
device.connectivity.install-necessary-client-tools
+ +
+ + +
+ + + + + + Linux + + +
+
+
device.connectivity.install-necessary-client-tools
+ +
+ + +
+ + + + + + Docker + + +
+ + +
+ + + -
-
device.connectivity.use-following-instructions
-
- device.connectivity.install-coap-cli - -
-
-
-
device.connectivity.coap-command
- -
-
-
-
device.connectivity.coaps-command
- -
- -
device.connectivity.coaps-x509-command
- - -
+
device.connectivity.use-following-instructions
+ + + + + MacOS + + +
+
+
device.connectivity.install-necessary-client-tools
+ +
+ + +
+ + + + + + Linux + + +
+
+
device.connectivity.install-necessary-client-tools
+ +
+ + +
+ + + + + + Docker + + +
+ + +
+ + + -
device.connectivity.snmp-command
-
- - - {{ 'action.see-documentation' | translate }} - open_in_new - - +
+ +
-
device.connectivity.lwm2m-command
-
- - - {{ 'action.see-documentation' | translate }} - open_in_new - - +
+ +
@@ -224,3 +338,44 @@
attribute.no-latest-telemetry
 + + +
+
+
device.connectivity.execute-following-command
+ + {{ cmd.noSecLabel }} + {{ cmd.secLabel }} + +
+ + + + + +
+ +
+ + + + + + +
+ + + +
+
{{ doc.text | translate }}
+ + description + {{ 'common.documentation' | translate }} + +
+ 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 e7c88bb2cb..1a95da0a14 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 @@ -68,6 +68,10 @@ font-size: 14px; } + .tb-flex-1 { + flex: 1; + } + .tb-form-table-body { max-height: 88px; overflow-y: auto; @@ -84,6 +88,10 @@ } } + .tb-install-windows { + min-height: 42px; + } + @media #{$mat-sm} { width: 470px; } @@ -112,12 +120,13 @@ .code-wrapper { padding: 0; pre[class*=language-] { + margin: 0; background: #F3F6FA; border-color: #305680; } } button.clipboard-btn { - right: 0; + right: -2px; p { color: #305680; } @@ -148,4 +157,12 @@ box-sizing: initial; } } + + .tabs-icon { + margin-right: 8px; + } + + .tb-form-panel.tb-tab-body { + padding: 16px 0 0; + } } 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 8a427512aa..f185d88c6a 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 @@ -38,16 +38,19 @@ import { BasicTransportType, DeviceTransportType, deviceTransportTypeTranslationMap, - NetworkTransportType + 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'; export interface DeviceCheckConnectivityDialogData { deviceId: EntityId; afterAdd: boolean; } + @Component({ selector: 'tb-device-check-connectivity-dialog', templateUrl: './device-check-connectivity-dialog.component.html', @@ -62,7 +65,7 @@ export class DeviceCheckConnectivityDialogComponent extends latestTelemetry: Array = []; - commands: {[key: string]: string}; + commands: PublishTelemetryCommand; allowTransportType = new Set(); selectTransportType: NetworkTransportType; @@ -77,6 +80,45 @@ export class DeviceCheckConnectivityDialogComponent extends notShowAgain = false; + httpTabIndex = 0; + mqttTabIndex = 0; + coapTabIndex = 0; + + readonly installCoap = '```bash\n' + + 'git clone https://github.com/obgm/libcoap --recursive\n' + + '{:copy-code}\n' + + '```\n' + + '
\n' + + '\n' + + '```bash\n' + + 'cd libcoap\n' + + '{:copy-code}\n' + + '```\n' + + '
\n' + + '\n' + + '```bash\n' + + './autogen.sh\n' + + '{:copy-code}\n' + + '```\n' + + '
\n' + + '\n' + + '```bash\n' + + './configure --with-openssl --disable-doxygen --disable-manpages --disable-shared\n' + + '{:copy-code}\n' + + '```\n' + + '
\n' + + '\n' + + '```bash\n' + + 'make\n' + + '{:copy-code}\n' + + '```\n' + + '
\n' + + '\n' + + '```bash\n' + + 'sudo make install\n' + + '{:copy-code}\n' + + '```'; + private telemetrySubscriber: TelemetrySubscriber; private currentTime = Date.now(); @@ -125,11 +167,21 @@ export class DeviceCheckConnectivityDialogComponent extends } } - createMarkDownCommand(command: string): string { + createMarkDownCommand(commands: string | string[]): string { + if (Array.isArray(commands)) { + const formatCommands: Array = []; + commands.forEach(command => formatCommands.push(this.createMarkDownSingleCommand(command))); + return formatCommands.join('
\n'); + } else { + return this.createMarkDownSingleCommand(commands); + } + } + + private createMarkDownSingleCommand(command: string): string { return '```bash\n' + - command + - '{:copy-code}\n' + - '```'; + command + + '{:copy-code}\n' + + '```'; } private loadCommands() { @@ -144,6 +196,7 @@ export class DeviceCheckConnectivityDialogComponent extends } }); this.selectTransportType = this.allowTransportType.values().next().value; + this.selectTabIndexForUserOS(); this.loadedCommand = true; } ); @@ -180,4 +233,28 @@ export class DeviceCheckConnectivityDialogComponent extends }); } + private selectTabIndexForUserOS() { + const currentOS = getOS(); + switch (currentOS) { + case 'linux': + case 'android': + this.httpTabIndex = 2; + this.mqttTabIndex = 2; + this.coapTabIndex = 1; + break; + case 'macos': + case 'ios': + this.httpTabIndex = 1; + this.mqttTabIndex = 1; + break; + case 'windows': + this.httpTabIndex = 0; + this.mqttTabIndex = 0; + break; + default: + this.mqttTabIndex = this.commands.mqtt?.docker ? 3 : 0; + this.coapTabIndex = this.commands.coap?.docker ? 2 : 1; + } + } + } diff --git a/ui-ngx/src/app/shared/models/device.models.ts b/ui-ngx/src/app/shared/models/device.models.ts index b371c131df..e5dd1e9efc 100644 --- a/ui-ngx/src/app/shared/models/device.models.ts +++ b/ui-ngx/src/app/shared/models/device.models.ts @@ -837,6 +837,31 @@ export interface ClaimResult { response: ClaimResponse; } +export interface PublishTelemetryCommand { + http?: { + http?: string; + https?: string; + }; + mqtt: { + mqtt?: string; + mqtts?: string | Array; + docker?: { + mqtt?: string; + mqtts?: string | Array; + }; + }; + coap: { + coap?: string; + coaps?: string | Array; + docker?: { + coap?: string; + coaps?: string | Array; + }; + }; + lwm2m?: string; + snmp?: string; +} + export const dayOfWeekTranslations = new Array( 'device-profile.schedule-day.monday', 'device-profile.schedule-day.tuesday', diff --git a/ui-ngx/src/assets/docker.svg b/ui-ngx/src/assets/docker.svg new file mode 100644 index 0000000000..f152739de6 --- /dev/null +++ b/ui-ngx/src/assets/docker.svg @@ -0,0 +1 @@ + diff --git a/ui-ngx/src/assets/help/en_US/device/install_coap_client.md b/ui-ngx/src/assets/help/en_US/device/install_coap_client.md deleted file mode 100644 index 0612acad26..0000000000 --- a/ui-ngx/src/assets/help/en_US/device/install_coap_client.md +++ /dev/null @@ -1,40 +0,0 @@ - #### CoAP installation instructions ---- -
- -Install coap client tool on your **Linux/macOS**: - -```bash -git clone https://github.com/obgm/libcoap --recursive -{:copy-code} -``` -
- -```bash -cd libcoap -{:copy-code} -``` -
- -```bash -./autogen.sh -{:copy-code} -``` -
- -```bash -./configure --with-openssl --disable-doxygen --disable-manpages --disable-shared -{:copy-code} -``` -
- -```bash -make -{:copy-code} -``` -
- -```bash -sudo make install -{:copy-code} -``` diff --git a/ui-ngx/src/assets/help/en_US/device/install_curl.md b/ui-ngx/src/assets/help/en_US/device/install_curl.md deleted file mode 100644 index 0ba60fc590..0000000000 --- a/ui-ngx/src/assets/help/en_US/device/install_curl.md +++ /dev/null @@ -1,34 +0,0 @@ -#### cURL installation instructions ---- -
-
- - Ubuntu - MacOS - Windows - -
- - -

Install cURL tool:

- - - -

Install cURL tool:

- - - -
Starting Windows 10 b17063, cURL is available by default.
- - -
diff --git a/ui-ngx/src/assets/help/en_US/device/install_mqtt_client.md b/ui-ngx/src/assets/help/en_US/device/install_mqtt_client.md deleted file mode 100644 index 941dce7ab4..0000000000 --- a/ui-ngx/src/assets/help/en_US/device/install_mqtt_client.md +++ /dev/null @@ -1,38 +0,0 @@ - #### MQTT client tool installation instructions ---- -
-
- - Ubuntu - MacOS - Windows - -
- - -

Install mqtt client tool:

- - - -

Install mqtt client tool:

- - - -

Install mqtt client tool:

- - descriptionHow to install MQTT Box - - -
diff --git a/ui-ngx/src/assets/linux.svg b/ui-ngx/src/assets/linux.svg new file mode 100644 index 0000000000..66f505437f --- /dev/null +++ b/ui-ngx/src/assets/linux.svg @@ -0,0 +1 @@ + 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 3374338761..8e254a655c 100644 --- a/ui-ngx/src/assets/locale/locale.constant-en_US.json +++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json @@ -880,7 +880,8 @@ "loading": "Loading...", "proceed": "Proceed", "open-details-page": "Open details page", - "not-found": "Not found" + "not-found": "Not found", + "documentation": "Documentation" }, "content-type": { "json": "Json", @@ -1389,16 +1390,10 @@ "device-created-check-connectivity": "Device created. Let's check connectivity!", "loading-check-connectivity-command": "Loading check connectivity commands...", "use-following-instructions": "Use the following instructions for sending telemetry on behalf of the device using shell", - "install-curl": "Install cURL tool.", - "install-mqtt-client": "Install mgtt client tool.", - "install-coap-cli": "Install coap-cli tool.", - "http-command": "HTTP (Linux, macOS or Windows)", - "https-command": "HTTPS (Linux, macOS or Windows)", - "mqtt-command": "MQTT (Linux, macOS)", - "mqtts-command": "MQTT over SSL (Linux, macOS)", + "execute-following-command": "Executive the following command", + "install-curl-windows": "Starting Windows 10 b17063, cURL is available by default", + "install-necessary-client-tools": "Install necessary client tools", "mqtts-x509-command": "Use the following documentation to connect the device via MQTT with authorization X509", - "coap-command": "CoAP (Linux, macOS)", - "coaps-command": "CoAP over DTLS (Linux, macOS)", "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.", "lwm2m-command": "Use the following documentation to connect the device through the LWM2M." diff --git a/ui-ngx/src/assets/macos.svg b/ui-ngx/src/assets/macos.svg new file mode 100644 index 0000000000..c3bac982fb --- /dev/null +++ b/ui-ngx/src/assets/macos.svg @@ -0,0 +1 @@ + diff --git a/ui-ngx/src/assets/windows.svg b/ui-ngx/src/assets/windows.svg new file mode 100644 index 0000000000..1f168c099e --- /dev/null +++ b/ui-ngx/src/assets/windows.svg @@ -0,0 +1 @@ + diff --git a/ui-ngx/src/form.scss b/ui-ngx/src/form.scss index a01c157e4c..a0d09d42c4 100644 --- a/ui-ngx/src/form.scss +++ b/ui-ngx/src/form.scss @@ -144,6 +144,13 @@ &.space-between { justify-content: space-between; } + &.no-border { + border: none; + border-radius: 0; + } + &.no-padding { + padding: 0; + } .mat-divider-vertical { height: 56px; margin-top: -7px;