diff --git a/ui-ngx/src/app/modules/home/components/iot-hub/device-install-dialog/device-install-dialog.component.html b/ui-ngx/src/app/modules/home/components/iot-hub/device-install-dialog/device-install-dialog.component.html index 93a5f5ea19..82f8ea9a2b 100644 --- a/ui-ngx/src/app/modules/home/components/iot-hub/device-install-dialog/device-install-dialog.component.html +++ b/ui-ngx/src/app/modules/home/components/iot-hub/device-install-dialog/device-install-dialog.component.html @@ -21,6 +21,36 @@
@switch (ws.type) { + @case ('placeholder') { + + } + + @case ('connectivity') { +
+

{{ 'iot-hub.device-install-select-connectivity' | translate }}

+
+ @for (ct of availableInstallMethods; track ct) { + + } +
+
+ } + @case ('instruction') {
- @if (!wizardStarted && !showPeOnlyPanel) { - -
-
-

{{ 'iot-hub.device-install-select-connectivity' | translate }}

-
- @for (ct of availableInstallMethods; track ct) { - - } -
-
-
- - - - - - } @else if (showPeOnlyPanel) { - -
-
- workspace_premium -

- {{ 'iot-hub.device-install-pe-only-title' | translate }} -

-

- {{ 'iot-hub.device-install-pe-only-message' | translate:{ method: installMethodLabels.get(selectedInstallMethod) || selectedInstallMethod } }} -

- - {{ 'iot-hub.device-install-pe-only-learn-more' | translate }} - -
-
- - - - - } @else if (reviewMode) { + @if (reviewMode) {
@@ -335,6 +317,14 @@ @if (currentWizardStep; as step) { @switch (step.type) { + @case ('connectivity') { + + + } @case ('instruction') { @if (isLastWizardStep) { diff --git a/ui-ngx/src/app/modules/home/components/iot-hub/device-install-dialog/device-install-dialog.component.scss b/ui-ngx/src/app/modules/home/components/iot-hub/device-install-dialog/device-install-dialog.component.scss index ebdf5da07c..83f3642be1 100644 --- a/ui-ngx/src/app/modules/home/components/iot-hub/device-install-dialog/device-install-dialog.component.scss +++ b/ui-ngx/src/app/modules/home/components/iot-hub/device-install-dialog/device-install-dialog.component.scss @@ -86,18 +86,99 @@ .tb-device-install-connectivity { p { color: rgba(0, 0, 0, 0.54); - font-size: 14px; - line-height: 20px; + font-size: 16px; + line-height: 24px; margin: 0; } - .tb-connectivity-button { - min-width: 100px; + // Card grid — design uses 276px cards with 12px gap, wrapping into rows. + .tb-connectivity-cards { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); + gap: 12px; + } + + // Connection-card-vertical from the design: primary-tinted surface + // (4 % alpha), 6px radius, 1px subtle border that becomes primary on + // hover/select. + .tb-connectivity-card { + position: relative; + display: flex; + flex-direction: column; + align-items: center; + gap: 12px; + padding: 16px; + height: 116px; + background: rgba($tb-primary-color, 0.04); + border: 1px solid rgba(0, 0, 0, 0.12); + border-radius: 6px; + cursor: pointer; + text-align: left; + transition: border-color 0.12s ease-out, box-shadow 0.12s ease-out; + + &:hover, + &.selected { + border-color: $tb-primary-color; + } + + &.selected { + box-shadow: 0 0 0 1px $tb-primary-color inset; + } + } + + // 48×48 white icon container with subtle drop shadow + 4px radius, + // hosting a 40×40 mask-image rendered in the primary color. + .tb-connectivity-card-icon { + width: 48px; + height: 48px; + border-radius: 4px; + background: white; + display: flex; + align-items: center; + justify-content: center; + box-shadow: + 0 1px 2px 0 rgba(0, 0, 0, 0.06), + 0 1px 3px 0 rgba(0, 0, 0, 0.10); + } + + .tb-connectivity-card-icon-mask { + display: block; + width: 40px; + height: 40px; + background-color: $tb-primary-color; + -webkit-mask-image: var(--tb-icon-url); + mask-image: var(--tb-icon-url); + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; + -webkit-mask-position: center; + mask-position: center; + -webkit-mask-size: contain; + mask-size: contain; + } + + .tb-connectivity-card-name { + font-size: 16px; + font-weight: 500; + line-height: 24px; + letter-spacing: 0.15px; + color: rgba(0, 0, 0, 0.87); } - .tb-connectivity-button.selected { - background: #305680; - color: #fff; + // PE-Only pill — primary 1px border + primary text on white background. + .tb-connectivity-card-badge { + position: absolute; + top: 16px; + right: 16px; + height: 24px; + padding: 0 8px; + border: 1px solid $tb-primary-color; + border-radius: 4px; + background: white; + color: $tb-primary-color; + font-size: 12px; + font-weight: 500; + line-height: 22px; + letter-spacing: 0.4px; } } diff --git a/ui-ngx/src/app/modules/home/components/iot-hub/device-install-dialog/device-install-dialog.component.ts b/ui-ngx/src/app/modules/home/components/iot-hub/device-install-dialog/device-install-dialog.component.ts index 8c9f7b3662..a5f3867046 100644 --- a/ui-ngx/src/app/modules/home/components/iot-hub/device-install-dialog/device-install-dialog.component.ts +++ b/ui-ngx/src/app/modules/home/components/iot-hub/device-install-dialog/device-install-dialog.component.ts @@ -16,13 +16,18 @@ import { ChangeDetectorRef, Component, Inject, OnInit, Type, ViewChild } from '@angular/core'; import { Router } from '@angular/router'; -import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog'; +import { MAT_DIALOG_DATA, MatDialog, MatDialogRef } from '@angular/material/dialog'; +import { + PeConnectivityMethodPromptData, + TbPeConnectivityMethodPromptComponent +} from '@home/components/iot-hub/pe-connectivity-method-prompt.component'; import { Store } from '@ngrx/store'; import { AppState } from '@core/core.state'; import { DialogComponent } from '@shared/components/dialog.component'; import { UntypedFormControl, UntypedFormGroup, Validators } from '@angular/forms'; import { MatStepper } from '@angular/material/stepper'; import { firstValueFrom } from 'rxjs'; +import { TranslateService } from '@ngx-translate/core'; import { PageLink } from '@shared/models/page/page-link'; import { MpItemVersionView } from '@shared/models/iot-hub/iot-hub-version.models'; import { IotHubApiService } from '@core/http/iot-hub-api.service'; @@ -37,6 +42,7 @@ import { generateSecret } from '@core/utils'; import { IotHubItemLinkModule } from '../iot-hub-item-link-card/iot-hub-item-link.module'; import { ITEM_LINK_KEY_REGEX, itemLinkCardTag } from '../iot-hub-markdown.utils'; import { + installMethodIcons as INSTALL_METHOD_ICONS, installMethodLabels as INSTALL_METHOD_LABELS, peOnlyInstallMethods, DeviceInstallStep, @@ -59,7 +65,7 @@ export interface DeviceInstallDialogData { installState?: Record; } -export type WizardStepType = 'instruction' | 'form' | 'progress'; +export type WizardStepType = 'connectivity' | 'placeholder' | 'instruction' | 'form' | 'progress'; export interface WizardStep { type: WizardStepType; @@ -98,15 +104,11 @@ export class TbDeviceInstallDialogComponent extends DialogComponent(); // Connectivity - showConnectivitySelector = false; - showPeOnlyPanel = false; availableInstallMethods: string[] = []; selectedInstallMethod: string | null = null; installMethodLabels = INSTALL_METHOD_LABELS; - - get isSelectedPeOnly(): boolean { - return this.selectedInstallMethod !== null && peOnlyInstallMethods.has(this.selectedInstallMethod); - } + installMethodIcons = INSTALL_METHOD_ICONS; + peOnlyInstallMethods = peOnlyInstallMethods; // Wizard wizardSteps: WizardStep[] = []; @@ -131,7 +133,9 @@ export class TbDeviceInstallDialogComponent extends DialogComponent( + TbPeConnectivityMethodPromptComponent, + { + data: { connectorName: this.installMethodLabels.get(ct) || ct }, + autoFocus: false, + panelClass: ['tb-dialog'] + } + ); } onTabChanged(index: number): void { @@ -218,9 +249,22 @@ export class TbDeviceInstallDialogComponent extends DialogComponent { + this.stepper?.next(); + this.onStepActivated(); + }, 0); return; } this.startWizard(); @@ -550,8 +594,38 @@ export class TbDeviceInstallDialogComponent extends DialogComponent 1 && !this.selectedInstallMethod) { + // First step: connection method selector. Remaining steps are + // appended via appendInstallSteps() once a method is confirmed. + this.wizardSteps.push({ + type: 'connectivity', + label: this.translate.instant('iot-hub.connection-method'), + rawSteps: [], + completed: false + }); + // Dummy placeholder steps shown in the indicator until the user + // picks a method. They are replaced with real steps for the + // chosen connectivity in confirmConnectivity(). + for (const key of [ + 'iot-hub.step-prerequisites', + 'iot-hub.step-configuration', + 'iot-hub.step-provisioning' + ]) { + this.wizardSteps.push({ + type: 'placeholder', + label: this.translate.instant(key), + rawSteps: [], + completed: false + }); + } + return; + } + this.appendInstallSteps(); + } + + private appendInstallSteps(): void { + const rawSteps = this.packageInfo.installSteps[this.selectedInstallMethod] || []; let i = 0; while (i < rawSteps.length) { const step = rawSteps[i]; @@ -591,7 +665,7 @@ export class TbDeviceInstallDialogComponent extends DialogComponent +
+ + +

+ {{ data.connectorName }} + {{ 'iot-hub.pe-connectivity-prompt-title-suffix' | translate }} +

+
+ + {{ 'iot-hub.pe-connectivity-prompt-try-pe' | translate }} + + +
+
diff --git a/ui-ngx/src/app/modules/home/components/iot-hub/pe-connectivity-method-prompt.component.scss b/ui-ngx/src/app/modules/home/components/iot-hub/pe-connectivity-method-prompt.component.scss new file mode 100644 index 0000000000..a66a867374 --- /dev/null +++ b/ui-ngx/src/app/modules/home/components/iot-hub/pe-connectivity-method-prompt.component.scss @@ -0,0 +1,65 @@ +/** + * Copyright © 2016-2026 The Thingsboard Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +@import "../../../../../scss/constants"; + +:host { + display: block; + width: 500px; + max-width: 100%; +} + +.tb-pe-connectivity-prompt { + position: relative; + display: flex; + flex-direction: column; + align-items: center; + text-align: center; + gap: 20px; + padding: 40px; + background: white; + border-radius: 8px; +} + +.tb-pe-connectivity-prompt-close { + position: absolute; + top: 8px; + right: 8px; +} + +.tb-pe-connectivity-prompt-illustration { + width: 140px; + height: 140px; +} + +.tb-pe-connectivity-prompt-title { + font-size: 24px; + font-weight: 500; + line-height: 32px; + letter-spacing: 0.15px; + color: rgba(0, 0, 0, 0.87); + margin: 0; +} + +.tb-pe-connectivity-prompt-connector { + color: $tb-primary-color; +} + +.tb-pe-connectivity-prompt-actions { + display: flex; + align-items: center; + gap: 8px; +} diff --git a/ui-ngx/src/app/modules/home/components/iot-hub/pe-connectivity-method-prompt.component.ts b/ui-ngx/src/app/modules/home/components/iot-hub/pe-connectivity-method-prompt.component.ts new file mode 100644 index 0000000000..11173a21cb --- /dev/null +++ b/ui-ngx/src/app/modules/home/components/iot-hub/pe-connectivity-method-prompt.component.ts @@ -0,0 +1,48 @@ +/// +/// Copyright © 2016-2026 The Thingsboard Authors +/// +/// Licensed under the Apache License, Version 2.0 (the "License"); +/// you may not use this file except in compliance with the License. +/// You may obtain a copy of the License at +/// +/// http://www.apache.org/licenses/LICENSE-2.0 +/// +/// Unless required by applicable law or agreed to in writing, software +/// distributed under the License is distributed on an "AS IS" BASIS, +/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +/// See the License for the specific language governing permissions and +/// limitations under the License. +/// + +import { Component, Inject } from '@angular/core'; +import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog'; +import { Router } from '@angular/router'; +import { Store } from '@ngrx/store'; +import { AppState } from '@core/core.state'; +import { DialogComponent } from '@shared/components/dialog.component'; + +export interface PeConnectivityMethodPromptData { + connectorName: string; +} + +@Component({ + selector: 'tb-pe-connectivity-method-prompt', + standalone: false, + templateUrl: './pe-connectivity-method-prompt.component.html', + styleUrls: ['./pe-connectivity-method-prompt.component.scss'] +}) +export class TbPeConnectivityMethodPromptComponent extends DialogComponent { + + constructor( + protected store: Store, + protected router: Router, + protected dialogRef: MatDialogRef, + @Inject(MAT_DIALOG_DATA) public data: PeConnectivityMethodPromptData + ) { + super(store, router, dialogRef); + } + + close(): void { + this.dialogRef.close(); + } +} diff --git a/ui-ngx/src/app/shared/models/iot-hub/device-package.models.ts b/ui-ngx/src/app/shared/models/iot-hub/device-package.models.ts index 0e5ace4371..eebefbbdb4 100644 --- a/ui-ngx/src/app/shared/models/iot-hub/device-package.models.ts +++ b/ui-ngx/src/app/shared/models/iot-hub/device-package.models.ts @@ -130,6 +130,63 @@ export const installMethodLabels = new Map( ] ); +export const installMethodIcons = new Map( + [ + // Direct connect — assets/direct-connect-icon + [InstallMethod.DIRECT_HTTP, 'assets/direct-connect-icon/http.svg'], + [InstallMethod.DIRECT_MQTT, 'assets/direct-connect-icon/mqtt.svg'], + [InstallMethod.DIRECT_COAP, 'assets/direct-connect-icon/coap.svg'], + [InstallMethod.DIRECT_LWM2M, 'assets/direct-connect-icon/lwm2m.svg'], + [InstallMethod.DIRECT_SNMP, 'assets/direct-connect-icon/snmp.svg'], + // Gateway connectors — assets/gateway-connect-icon + [InstallMethod.GATEWAY_MQTT, 'assets/gateway-connect-icon/mqtt.svg'], + [InstallMethod.GATEWAY_MODBUS, 'assets/gateway-connect-icon/modbus.svg'], + [InstallMethod.GATEWAY_OPCUA, 'assets/gateway-connect-icon/opc-ua.svg'], + [InstallMethod.GATEWAY_BACNET, 'assets/gateway-connect-icon/bacnet.svg'], + [InstallMethod.GATEWAY_BLE, 'assets/gateway-connect-icon/ble.svg'], + [InstallMethod.GATEWAY_CAN, 'assets/gateway-connect-icon/can.svg'], + [InstallMethod.GATEWAY_FTP, 'assets/gateway-connect-icon/ftp.svg'], + [InstallMethod.GATEWAY_OCPP, 'assets/gateway-connect-icon/ocpp.svg'], + [InstallMethod.GATEWAY_ODBC, 'assets/gateway-connect-icon/odbc.svg'], + [InstallMethod.GATEWAY_REQUEST, 'assets/gateway-connect-icon/request.svg'], + [InstallMethod.GATEWAY_REST, 'assets/gateway-connect-icon/rest.svg'], + [InstallMethod.GATEWAY_SNMP, 'assets/gateway-connect-icon/snmp.svg'], + [InstallMethod.GATEWAY_SOCKET, 'assets/gateway-connect-icon/socket.svg'], + [InstallMethod.GATEWAY_XMPP, 'assets/gateway-connect-icon/xmpp.svg'], + // ChirpStack — reuses the integration icon + [InstallMethod.CHIRPSTACK, 'assets/integration-icon/chirpstack.svg'], + // PE integrations — assets/integration-icon + [InstallMethod.INTEGRATION_APACHE_PULSAR, 'assets/integration-icon/apache-pulsar.svg'], + [InstallMethod.INTEGRATION_AWS_IOT, 'assets/integration-icon/aws-iot.svg'], + [InstallMethod.INTEGRATION_AWS_KINESIS, 'assets/integration-icon/aws-kinesis.svg'], + [InstallMethod.INTEGRATION_AWS_SQS, 'assets/integration-icon/aws-sqs.svg'], + [InstallMethod.INTEGRATION_AZURE_EVENT_HUB, 'assets/integration-icon/azure-event-hub.svg'], + [InstallMethod.INTEGRATION_AZURE_IOT_HUB, 'assets/integration-icon/azure-iot-hub.svg'], + [InstallMethod.INTEGRATION_AZURE_SERVICE_BUS, 'assets/integration-icon/azure-service-bus.svg'], + [InstallMethod.INTEGRATION_CHIRPSTACK, 'assets/integration-icon/chirpstack.svg'], + [InstallMethod.INTEGRATION_COAP, 'assets/integration-icon/coap.svg'], + [InstallMethod.INTEGRATION_CUSTOM, 'assets/integration-icon/custom.svg'], + [InstallMethod.INTEGRATION_HTTP, 'assets/integration-icon/http.svg'], + [InstallMethod.INTEGRATION_IOT_CREATORS, 'assets/integration-icon/iotcreators.com.svg'], + [InstallMethod.INTEGRATION_KAFKA, 'assets/integration-icon/kafka.svg'], + [InstallMethod.INTEGRATION_KPN_THINGS, 'assets/integration-icon/kpn.svg'], + [InstallMethod.INTEGRATION_LORIOT, 'assets/integration-icon/loriot.svg'], + [InstallMethod.INTEGRATION_MQTT, 'assets/integration-icon/mqtt.svg'], + [InstallMethod.INTEGRATION_OPC_UA, 'assets/integration-icon/opc-ua.svg'], + [InstallMethod.INTEGRATION_PARTICLE, 'assets/integration-icon/particle.svg'], + [InstallMethod.INTEGRATION_PUB_SUB, 'assets/integration-icon/pub-sub.svg'], + [InstallMethod.INTEGRATION_RABBITMQ, 'assets/integration-icon/rabbitmq.svg'], + [InstallMethod.INTEGRATION_SIGFOX, 'assets/integration-icon/sigfox.svg'], + [InstallMethod.INTEGRATION_TCP, 'assets/integration-icon/tcp.svg'], + [InstallMethod.INTEGRATION_THINGPARK, 'assets/integration-icon/thingpark.svg'], + [InstallMethod.INTEGRATION_THINGPARK_ENTERPRISE, 'assets/integration-icon/thingpark-enterprise.svg'], + [InstallMethod.INTEGRATION_TTI, 'assets/integration-icon/things-stack-industries.svg'], + [InstallMethod.INTEGRATION_TTN, 'assets/integration-icon/things-stack-сommunity.svg'], + [InstallMethod.INTEGRATION_TUYA, 'assets/integration-icon/tuya.svg'], + [InstallMethod.INTEGRATION_UDP, 'assets/integration-icon/udp.svg'] + ] +); + export const peOnlyInstallMethods: ReadonlySet = new Set([ InstallMethod.INTEGRATION_APACHE_PULSAR, InstallMethod.INTEGRATION_AWS_IOT, diff --git a/ui-ngx/src/assets/direct-connect-icon/coap.svg b/ui-ngx/src/assets/direct-connect-icon/coap.svg new file mode 100644 index 0000000000..9405b5b791 --- /dev/null +++ b/ui-ngx/src/assets/direct-connect-icon/coap.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/ui-ngx/src/assets/direct-connect-icon/http.svg b/ui-ngx/src/assets/direct-connect-icon/http.svg new file mode 100644 index 0000000000..9e97fe918c --- /dev/null +++ b/ui-ngx/src/assets/direct-connect-icon/http.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/ui-ngx/src/assets/direct-connect-icon/lwm2m.svg b/ui-ngx/src/assets/direct-connect-icon/lwm2m.svg new file mode 100644 index 0000000000..6762a50a7c --- /dev/null +++ b/ui-ngx/src/assets/direct-connect-icon/lwm2m.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/ui-ngx/src/assets/direct-connect-icon/mqtt.svg b/ui-ngx/src/assets/direct-connect-icon/mqtt.svg new file mode 100644 index 0000000000..50ef36f2f7 --- /dev/null +++ b/ui-ngx/src/assets/direct-connect-icon/mqtt.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/ui-ngx/src/assets/direct-connect-icon/snmp.svg b/ui-ngx/src/assets/direct-connect-icon/snmp.svg new file mode 100644 index 0000000000..d11c791135 --- /dev/null +++ b/ui-ngx/src/assets/direct-connect-icon/snmp.svg @@ -0,0 +1,3 @@ + + + diff --git a/ui-ngx/src/assets/gateway-connect-icon/bacnet.svg b/ui-ngx/src/assets/gateway-connect-icon/bacnet.svg new file mode 100644 index 0000000000..a967a94c6c --- /dev/null +++ b/ui-ngx/src/assets/gateway-connect-icon/bacnet.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/ui-ngx/src/assets/gateway-connect-icon/ble.svg b/ui-ngx/src/assets/gateway-connect-icon/ble.svg new file mode 100644 index 0000000000..a8fbd84952 --- /dev/null +++ b/ui-ngx/src/assets/gateway-connect-icon/ble.svg @@ -0,0 +1,3 @@ + + + diff --git a/ui-ngx/src/assets/gateway-connect-icon/can.svg b/ui-ngx/src/assets/gateway-connect-icon/can.svg new file mode 100644 index 0000000000..d01d4b2d3a --- /dev/null +++ b/ui-ngx/src/assets/gateway-connect-icon/can.svg @@ -0,0 +1,3 @@ + + + diff --git a/ui-ngx/src/assets/gateway-connect-icon/ftp.svg b/ui-ngx/src/assets/gateway-connect-icon/ftp.svg new file mode 100644 index 0000000000..41f46d4f1c --- /dev/null +++ b/ui-ngx/src/assets/gateway-connect-icon/ftp.svg @@ -0,0 +1,3 @@ + + + diff --git a/ui-ngx/src/assets/gateway-connect-icon/modbus.svg b/ui-ngx/src/assets/gateway-connect-icon/modbus.svg new file mode 100644 index 0000000000..e93eb319ba --- /dev/null +++ b/ui-ngx/src/assets/gateway-connect-icon/modbus.svg @@ -0,0 +1,4 @@ + + + + diff --git a/ui-ngx/src/assets/gateway-connect-icon/mqtt.svg b/ui-ngx/src/assets/gateway-connect-icon/mqtt.svg new file mode 100644 index 0000000000..50ef36f2f7 --- /dev/null +++ b/ui-ngx/src/assets/gateway-connect-icon/mqtt.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/ui-ngx/src/assets/gateway-connect-icon/ocpp.svg b/ui-ngx/src/assets/gateway-connect-icon/ocpp.svg new file mode 100644 index 0000000000..218010ee50 --- /dev/null +++ b/ui-ngx/src/assets/gateway-connect-icon/ocpp.svg @@ -0,0 +1,3 @@ + + + diff --git a/ui-ngx/src/assets/gateway-connect-icon/odbc.svg b/ui-ngx/src/assets/gateway-connect-icon/odbc.svg new file mode 100644 index 0000000000..44dac5506c --- /dev/null +++ b/ui-ngx/src/assets/gateway-connect-icon/odbc.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/ui-ngx/src/assets/gateway-connect-icon/opc-ua.svg b/ui-ngx/src/assets/gateway-connect-icon/opc-ua.svg new file mode 100644 index 0000000000..a1eb4bf55c --- /dev/null +++ b/ui-ngx/src/assets/gateway-connect-icon/opc-ua.svg @@ -0,0 +1,3 @@ + + + diff --git a/ui-ngx/src/assets/gateway-connect-icon/request.svg b/ui-ngx/src/assets/gateway-connect-icon/request.svg new file mode 100644 index 0000000000..de4a5616f1 --- /dev/null +++ b/ui-ngx/src/assets/gateway-connect-icon/request.svg @@ -0,0 +1,3 @@ + + + diff --git a/ui-ngx/src/assets/gateway-connect-icon/rest.svg b/ui-ngx/src/assets/gateway-connect-icon/rest.svg new file mode 100644 index 0000000000..919462645b --- /dev/null +++ b/ui-ngx/src/assets/gateway-connect-icon/rest.svg @@ -0,0 +1,3 @@ + + + diff --git a/ui-ngx/src/assets/gateway-connect-icon/snmp.svg b/ui-ngx/src/assets/gateway-connect-icon/snmp.svg new file mode 100644 index 0000000000..d11c791135 --- /dev/null +++ b/ui-ngx/src/assets/gateway-connect-icon/snmp.svg @@ -0,0 +1,3 @@ + + + diff --git a/ui-ngx/src/assets/gateway-connect-icon/socket.svg b/ui-ngx/src/assets/gateway-connect-icon/socket.svg new file mode 100644 index 0000000000..636b022f2a --- /dev/null +++ b/ui-ngx/src/assets/gateway-connect-icon/socket.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/ui-ngx/src/assets/gateway-connect-icon/xmpp.svg b/ui-ngx/src/assets/gateway-connect-icon/xmpp.svg new file mode 100644 index 0000000000..236ae42abb --- /dev/null +++ b/ui-ngx/src/assets/gateway-connect-icon/xmpp.svg @@ -0,0 +1,3 @@ + + + diff --git a/ui-ngx/src/assets/integration-icon/apache-pulsar.svg b/ui-ngx/src/assets/integration-icon/apache-pulsar.svg new file mode 100644 index 0000000000..1ff16cb1ed --- /dev/null +++ b/ui-ngx/src/assets/integration-icon/apache-pulsar.svg @@ -0,0 +1,3 @@ + + + diff --git a/ui-ngx/src/assets/integration-icon/aws-iot.svg b/ui-ngx/src/assets/integration-icon/aws-iot.svg new file mode 100644 index 0000000000..ce93615737 --- /dev/null +++ b/ui-ngx/src/assets/integration-icon/aws-iot.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/ui-ngx/src/assets/integration-icon/aws-kinesis.svg b/ui-ngx/src/assets/integration-icon/aws-kinesis.svg new file mode 100644 index 0000000000..fdf672f1d4 --- /dev/null +++ b/ui-ngx/src/assets/integration-icon/aws-kinesis.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/ui-ngx/src/assets/integration-icon/aws-sqs.svg b/ui-ngx/src/assets/integration-icon/aws-sqs.svg new file mode 100644 index 0000000000..2b9fdbf1b5 --- /dev/null +++ b/ui-ngx/src/assets/integration-icon/aws-sqs.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/ui-ngx/src/assets/integration-icon/azure-event-hub.svg b/ui-ngx/src/assets/integration-icon/azure-event-hub.svg new file mode 100644 index 0000000000..fec9fd51a4 --- /dev/null +++ b/ui-ngx/src/assets/integration-icon/azure-event-hub.svg @@ -0,0 +1,3 @@ + + + diff --git a/ui-ngx/src/assets/integration-icon/azure-iot-hub.svg b/ui-ngx/src/assets/integration-icon/azure-iot-hub.svg new file mode 100644 index 0000000000..7f080283a8 --- /dev/null +++ b/ui-ngx/src/assets/integration-icon/azure-iot-hub.svg @@ -0,0 +1,3 @@ + + + diff --git a/ui-ngx/src/assets/integration-icon/azure-service-bus.svg b/ui-ngx/src/assets/integration-icon/azure-service-bus.svg new file mode 100644 index 0000000000..bdc50a6978 --- /dev/null +++ b/ui-ngx/src/assets/integration-icon/azure-service-bus.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/ui-ngx/src/assets/integration-icon/chirpstack.svg b/ui-ngx/src/assets/integration-icon/chirpstack.svg new file mode 100644 index 0000000000..d4cfc414cc --- /dev/null +++ b/ui-ngx/src/assets/integration-icon/chirpstack.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/ui-ngx/src/assets/integration-icon/coap.svg b/ui-ngx/src/assets/integration-icon/coap.svg new file mode 100644 index 0000000000..63d096c7d9 --- /dev/null +++ b/ui-ngx/src/assets/integration-icon/coap.svg @@ -0,0 +1,3 @@ + + + diff --git a/ui-ngx/src/assets/integration-icon/custom.svg b/ui-ngx/src/assets/integration-icon/custom.svg new file mode 100644 index 0000000000..ba1077e068 --- /dev/null +++ b/ui-ngx/src/assets/integration-icon/custom.svg @@ -0,0 +1,3 @@ + + + diff --git a/ui-ngx/src/assets/integration-icon/http.svg b/ui-ngx/src/assets/integration-icon/http.svg new file mode 100644 index 0000000000..d964e6b91c --- /dev/null +++ b/ui-ngx/src/assets/integration-icon/http.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/ui-ngx/src/assets/integration-icon/iotcreators.com.svg b/ui-ngx/src/assets/integration-icon/iotcreators.com.svg new file mode 100644 index 0000000000..64224848b6 --- /dev/null +++ b/ui-ngx/src/assets/integration-icon/iotcreators.com.svg @@ -0,0 +1,3 @@ + + + diff --git a/ui-ngx/src/assets/integration-icon/kafka.svg b/ui-ngx/src/assets/integration-icon/kafka.svg new file mode 100644 index 0000000000..2ff631845c --- /dev/null +++ b/ui-ngx/src/assets/integration-icon/kafka.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/ui-ngx/src/assets/integration-icon/kpn.svg b/ui-ngx/src/assets/integration-icon/kpn.svg new file mode 100644 index 0000000000..edc4afe28d --- /dev/null +++ b/ui-ngx/src/assets/integration-icon/kpn.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/ui-ngx/src/assets/integration-icon/loriot.svg b/ui-ngx/src/assets/integration-icon/loriot.svg new file mode 100644 index 0000000000..8c4f139439 --- /dev/null +++ b/ui-ngx/src/assets/integration-icon/loriot.svg @@ -0,0 +1,3 @@ + + + diff --git a/ui-ngx/src/assets/integration-icon/mqtt.svg b/ui-ngx/src/assets/integration-icon/mqtt.svg new file mode 100644 index 0000000000..05ed77deac --- /dev/null +++ b/ui-ngx/src/assets/integration-icon/mqtt.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/ui-ngx/src/assets/integration-icon/ocean-connect.svg b/ui-ngx/src/assets/integration-icon/ocean-connect.svg new file mode 100644 index 0000000000..97ff84f3fc --- /dev/null +++ b/ui-ngx/src/assets/integration-icon/ocean-connect.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/ui-ngx/src/assets/integration-icon/opc-ua.svg b/ui-ngx/src/assets/integration-icon/opc-ua.svg new file mode 100644 index 0000000000..53968794c6 --- /dev/null +++ b/ui-ngx/src/assets/integration-icon/opc-ua.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/ui-ngx/src/assets/integration-icon/particle.svg b/ui-ngx/src/assets/integration-icon/particle.svg new file mode 100644 index 0000000000..cc823fa6f8 --- /dev/null +++ b/ui-ngx/src/assets/integration-icon/particle.svg @@ -0,0 +1,4 @@ + + + + diff --git a/ui-ngx/src/assets/integration-icon/pub-sub.svg b/ui-ngx/src/assets/integration-icon/pub-sub.svg new file mode 100644 index 0000000000..7ed9730d64 --- /dev/null +++ b/ui-ngx/src/assets/integration-icon/pub-sub.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/ui-ngx/src/assets/integration-icon/rabbitmq.svg b/ui-ngx/src/assets/integration-icon/rabbitmq.svg new file mode 100644 index 0000000000..9b2d81160f --- /dev/null +++ b/ui-ngx/src/assets/integration-icon/rabbitmq.svg @@ -0,0 +1,3 @@ + + + diff --git a/ui-ngx/src/assets/integration-icon/sigfox.svg b/ui-ngx/src/assets/integration-icon/sigfox.svg new file mode 100644 index 0000000000..6bd29d8c56 --- /dev/null +++ b/ui-ngx/src/assets/integration-icon/sigfox.svg @@ -0,0 +1,4 @@ + + + + diff --git a/ui-ngx/src/assets/integration-icon/tcp.svg b/ui-ngx/src/assets/integration-icon/tcp.svg new file mode 100644 index 0000000000..5972d82f07 --- /dev/null +++ b/ui-ngx/src/assets/integration-icon/tcp.svg @@ -0,0 +1,3 @@ + + + diff --git a/ui-ngx/src/assets/integration-icon/thingpark-enterprise.svg b/ui-ngx/src/assets/integration-icon/thingpark-enterprise.svg new file mode 100644 index 0000000000..677421c7a3 --- /dev/null +++ b/ui-ngx/src/assets/integration-icon/thingpark-enterprise.svg @@ -0,0 +1,3 @@ + + + diff --git a/ui-ngx/src/assets/integration-icon/thingpark.svg b/ui-ngx/src/assets/integration-icon/thingpark.svg new file mode 100644 index 0000000000..2518cc273f --- /dev/null +++ b/ui-ngx/src/assets/integration-icon/thingpark.svg @@ -0,0 +1,3 @@ + + + diff --git a/ui-ngx/src/assets/integration-icon/things-stack-industries.svg b/ui-ngx/src/assets/integration-icon/things-stack-industries.svg new file mode 100644 index 0000000000..e85c828a24 --- /dev/null +++ b/ui-ngx/src/assets/integration-icon/things-stack-industries.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/ui-ngx/src/assets/integration-icon/things-stack-сommunity.svg b/ui-ngx/src/assets/integration-icon/things-stack-сommunity.svg new file mode 100644 index 0000000000..e85c828a24 --- /dev/null +++ b/ui-ngx/src/assets/integration-icon/things-stack-сommunity.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/ui-ngx/src/assets/integration-icon/ttn.svg b/ui-ngx/src/assets/integration-icon/ttn.svg new file mode 100644 index 0000000000..88a388db9d --- /dev/null +++ b/ui-ngx/src/assets/integration-icon/ttn.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/ui-ngx/src/assets/integration-icon/tuya.svg b/ui-ngx/src/assets/integration-icon/tuya.svg new file mode 100644 index 0000000000..3498d0a1c0 --- /dev/null +++ b/ui-ngx/src/assets/integration-icon/tuya.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/ui-ngx/src/assets/integration-icon/udp.svg b/ui-ngx/src/assets/integration-icon/udp.svg new file mode 100644 index 0000000000..e8f81f83db --- /dev/null +++ b/ui-ngx/src/assets/integration-icon/udp.svg @@ -0,0 +1,3 @@ + + + diff --git a/ui-ngx/src/assets/iot-hub/pe-only-illustration.svg b/ui-ngx/src/assets/iot-hub/pe-only-illustration.svg new file mode 100644 index 0000000000..c93239d290 --- /dev/null +++ b/ui-ngx/src/assets/iot-hub/pe-only-illustration.svg @@ -0,0 +1,44 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 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 b4a593abe6..f4cff624c1 100644 --- a/ui-ngx/src/assets/locale/locale.constant-en_US.json +++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json @@ -3863,10 +3863,14 @@ "review-device-instructions": "Review device instructions", "open-item-type": "Open {{type}}", "back-to-marketplace": "Back to Marketplace", - "device-install-select-connectivity": "Select your connection type:", - "device-install-pe-only-title": "ThingsBoard PE required", - "device-install-pe-only-message": "The {{method}} install method requires ThingsBoard Professional Edition. Upgrade your installation to use this device package.", - "device-install-pe-only-learn-more": "Learn about ThingsBoard PE", + "device-install-select-connectivity": "Choose a connection method for your device", + "pe-only": "PE Only", + "pe-connectivity-prompt-title-suffix": "available only in ThingsBoard Professional Edition", + "pe-connectivity-prompt-try-pe": "Try Professional Edition", + "connection-method": "Connection method", + "step-prerequisites": "Prerequisites", + "step-configuration": "Configuration", + "step-provisioning": "Provisioning", "device-install-step-error": "Failed", "device-install-step-pending": "Pending", "device-install-step-running": "Creating...",