diff --git a/ui-ngx/src/app/modules/home/pages/admin/general-settings.component.html b/ui-ngx/src/app/modules/home/pages/admin/general-settings.component.html
index da0e9fede3..9703f99581 100644
--- a/ui-ngx/src/app/modules/home/pages/admin/general-settings.component.html
+++ b/ui-ngx/src/app/modules/home/pages/admin/general-settings.component.html
@@ -15,39 +15,206 @@
limitations under the License.
-->
-
-
-
-
-
- admin.general-settings
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+ admin.device-connectivity.device-connectivity
+
+
+
+
+
+
+
+ {{ "admin.device-connectivity.http-https" | translate }}
+ {{ 'admin.device-connectivity.mqtt-mqtts' | translate }}
+ {{ 'admin.device-connectivity.coap-coaps' | translate }}
+
+ {{ 'admin.device-connectivity.hint' | translate }}
+
+
+
diff --git a/ui-ngx/src/app/modules/home/pages/admin/general-settings.component.scss b/ui-ngx/src/app/modules/home/pages/admin/general-settings.component.scss
index 4b2d51d1e9..6740b496b2 100644
--- a/ui-ngx/src/app/modules/home/pages/admin/general-settings.component.scss
+++ b/ui-ngx/src/app/modules/home/pages/admin/general-settings.component.scss
@@ -14,6 +14,26 @@
* limitations under the License.
*/
:host {
+ .settings-card {
+ .toggle-group {
+ display: block;
+ margin-bottom: 12px;
+ }
+ .hint {
+ display: block;
+ }
+ .fields-group {
+ .slide {
+ padding: 16px 0;
+ }
+ .fields-row {
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+ gap: 12px;
+ }
+ }
+ }
}
:host ::ng-deep {
diff --git a/ui-ngx/src/app/modules/home/pages/admin/general-settings.component.ts b/ui-ngx/src/app/modules/home/pages/admin/general-settings.component.ts
index 9aee40d431..0ccc3eb75d 100644
--- a/ui-ngx/src/app/modules/home/pages/admin/general-settings.component.ts
+++ b/ui-ngx/src/app/modules/home/pages/admin/general-settings.component.ts
@@ -14,13 +14,13 @@
/// limitations under the License.
///
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
import { Store } from '@ngrx/store';
import { AppState } from '@core/core.state';
import { PageComponent } from '@shared/components/page.component';
import { Router } from '@angular/router';
import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
-import { AdminSettings, GeneralSettings } from '@shared/models/settings.models';
+import { AdminSettings, DeviceConnectivitySettings, GeneralSettings } from '@shared/models/settings.models';
import { AdminService } from '@core/http/admin.service';
import { HasConfirmForm } from '@core/guards/confirm-on-exit.guard';
@@ -29,26 +29,27 @@ import { HasConfirmForm } from '@core/guards/confirm-on-exit.guard';
templateUrl: './general-settings.component.html',
styleUrls: ['./general-settings.component.scss', './settings-card.scss']
})
-export class GeneralSettingsComponent extends PageComponent implements OnInit, HasConfirmForm {
+export class GeneralSettingsComponent extends PageComponent implements HasConfirmForm {
generalSettings: UntypedFormGroup;
- adminSettings: AdminSettings;
+ private adminSettings: AdminSettings;
+
+ deviceConnectivitySettingsForm: UntypedFormGroup;
+ private deviceConnectivitySettings: AdminSettings;
+
+ protocol = 'http';
constructor(protected store: Store,
private router: Router,
private adminService: AdminService,
public fb: UntypedFormBuilder) {
super(store);
- }
-
- ngOnInit() {
this.buildGeneralServerSettingsForm();
- this.adminService.getAdminSettings('general').subscribe(
- (adminSettings) => {
- this.adminSettings = adminSettings;
- this.generalSettings.reset(this.adminSettings.jsonValue);
- }
- );
+ this.adminService.getAdminSettings('general')
+ .subscribe(adminSettings => this.processGeneralSettings(adminSettings));
+ this.buildDeviceConnectivitySettingsForm();
+ this.adminService.getAdminSettings('connectivity')
+ .subscribe(deviceConnectivitySettings => this.processDeviceConnectivitySettings(deviceConnectivitySettings));
}
buildGeneralServerSettingsForm() {
@@ -58,18 +59,73 @@ export class GeneralSettingsComponent extends PageComponent implements OnInit, H
});
}
+ buildDeviceConnectivitySettingsForm() {
+ this.deviceConnectivitySettingsForm = this.fb.group({
+ http: this.fb.group({
+ enabled: [false, []],
+ host: ['', []],
+ port: [null, [Validators.min(1), Validators.max(65535), Validators.pattern('[0-9]*')]]
+ }),
+ https: this.fb.group({
+ enabled: [false, []],
+ host: ['', []],
+ port: [null, [Validators.min(1), Validators.max(65535), Validators.pattern('[0-9]*')]]
+ }),
+ mqtt: this.fb.group({
+ enabled: [false, []],
+ host: ['', []],
+ port: [null, [Validators.min(1), Validators.max(65535), Validators.pattern('[0-9]*')]]
+ }),
+ mqtts: this.fb.group({
+ enabled: [false, []],
+ host: ['', []],
+ port: [null, [Validators.min(1), Validators.max(65535), Validators.pattern('[0-9]*')]]
+ }),
+ coap: this.fb.group({
+ enabled: [false, []],
+ host: ['', []],
+ port: [null, [Validators.min(1), Validators.max(65535), Validators.pattern('[0-9]*')]]
+ }),
+ coaps: this.fb.group({
+ enabled: [false, []],
+ host: ['', []],
+ port: [null, [Validators.min(1), Validators.max(65535), Validators.pattern('[0-9]*')]]
+ }),
+ });
+ }
+
save(): void {
this.adminSettings.jsonValue = {...this.adminSettings.jsonValue, ...this.generalSettings.value};
- this.adminService.saveAdminSettings(this.adminSettings).subscribe(
- (adminSettings) => {
- this.adminSettings = adminSettings;
- this.generalSettings.reset(this.adminSettings.jsonValue);
- }
- );
+ this.adminService.saveAdminSettings(this.adminSettings)
+ .subscribe(adminSettings => this.processGeneralSettings(adminSettings));
+ }
+
+ saveDeviceConnectivitySettings(): void {
+ this.deviceConnectivitySettings.jsonValue = {...this.deviceConnectivitySettings.jsonValue, ...this.deviceConnectivitySettingsForm.value};
+ this.adminService.saveAdminSettings(this.deviceConnectivitySettings)
+ .subscribe(deviceConnectivitySettings => this.processDeviceConnectivitySettings(deviceConnectivitySettings));
+ }
+
+ discardGeneralSettings(): void {
+ this.generalSettings.reset(this.adminSettings.jsonValue);
+ }
+
+ discardDeviceConnectivitySettings(): void {
+ this.deviceConnectivitySettingsForm.reset(this.deviceConnectivitySettings.jsonValue);
+ }
+
+ private processGeneralSettings(generalSettings: AdminSettings): void {
+ this.adminSettings = generalSettings;
+ this.generalSettings.reset(this.adminSettings.jsonValue);
+ }
+
+ private processDeviceConnectivitySettings(deviceConnectivitySettings: AdminSettings): void {
+ this.deviceConnectivitySettings = deviceConnectivitySettings;
+ this.deviceConnectivitySettingsForm.reset(this.deviceConnectivitySettings.jsonValue);
}
confirmForm(): UntypedFormGroup {
- return this.generalSettings;
+ return this.generalSettings.dirty ? this.generalSettings : this.deviceConnectivitySettingsForm;
}
}
diff --git a/ui-ngx/src/app/shared/models/settings.models.ts b/ui-ngx/src/app/shared/models/settings.models.ts
index 14f601dbe4..3ac54cd28e 100644
--- a/ui-ngx/src/app/shared/models/settings.models.ts
+++ b/ui-ngx/src/app/shared/models/settings.models.ts
@@ -87,6 +87,39 @@ export interface GeneralSettings {
baseUrl: string;
}
+export interface DeviceConnectivitySettings {
+ http: {
+ enabled: boolean;
+ host: string;
+ port: number;
+ },
+ https: {
+ enabled: boolean;
+ host: string;
+ port: number;
+ },
+ mqtt: {
+ enabled: boolean;
+ host: string;
+ port: number;
+ },
+ mqtts: {
+ enabled: boolean;
+ host: string;
+ port: number;
+ },
+ coap: {
+ enabled: boolean;
+ host: string;
+ port: number;
+ },
+ coaps: {
+ enabled: boolean;
+ host: string;
+ port: number;
+ }
+}
+
export interface UserPasswordPolicy {
minimumLength: number;
minimumUppercaseLetters: number;
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 b4c0f07c85..eb797fbf58 100644
--- a/ui-ngx/src/assets/locale/locale.constant-en_US.json
+++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json
@@ -105,6 +105,23 @@
"base-url-required": "Base URL is required.",
"prohibit-different-url": "Prohibit to use hostname from the client request headers",
"prohibit-different-url-hint": "This setting should be enabled for production environments. May cause security issues when disabled",
+ "device-connectivity": {
+ "device-connectivity": "Device connectivity",
+ "http-https": "HTTP/HTTPS",
+ "mqtt-mqtts": "MQTT/MQTTS",
+ "coap-coaps": "COAP/COAPS",
+ "http": "HTPP",
+ "https": "HTTPS",
+ "mqtt": "MQTT",
+ "mqtts": "MQTTS",
+ "coap": "COAP",
+ "coaps": "COAPS",
+ "hint": "If host or port fields are empty will be used default protocol value.",
+ "host": "Host",
+ "port": "Port",
+ "port-pattern": "Port must be a positive integer.",
+ "port-range": "Port should be in a range from 1 to 65535."
+ },
"mail-from": "Mail From",
"mail-from-required": "Mail From is required.",
"smtp-protocol": "SMTP protocol",