Merge branch 'thingsboard:master' into fix/3656-unneccesssary-params-mqtt

application/src/main/data/json/tenant/dashboards/gateways.json

@@ -181,12 +181,12 @@
           "actions": {
             "actionCellButton": [
               {
-                "name": "Docker commands",
+                "name": "Launch command",
                 "icon": "terminal",
                 "useShowWidgetActionFunction": null,
                 "showWidgetActionFunction": "return true;",
                 "type": "customPretty",
-                "customHtml": "<div class=\"container\">\n    <mat-toolbar fxLayout=\"row\" color=\"primary\">\n        <h2>Docker commands</h2>\n        <span fxFlex></span>\n        <div [tb-help]=\"'gatewayInstall'\"></div>\n        <button mat-icon-button (click)=\"cancel()\" type=\"button\">\n            <mat-icon class=\"material-icons\">close</mat-icon>\n        </button>\n    </mat-toolbar>\n    <tb-gateway-command [deviceId]=\"entityId\"></tb-gateway-command>\n    <div mat-dialog-actions fxLayout=\"row\" fxLayoutAlign=\"end center\">\n        <button mat-button color=\"primary\"\n            type=\"button\"\n            (click)=\"cancel()\" cdkFocusInitial>\n            {{ 'action.close' | translate }}\n        </button>\n    </div>\n</div>\n",
+                "customHtml": "<div class=\"container\">\n    <mat-toolbar fxLayout=\"row\" color=\"primary\">\n        <h2>{{ 'gateway.launch-command' | translate }}</h2>\n        <span fxFlex></span>\n        <div [tb-help]=\"'gatewayInstall'\"></div>\n        <button mat-icon-button (click)=\"cancel()\" type=\"button\">\n            <mat-icon class=\"material-icons\">close</mat-icon>\n        </button>\n    </mat-toolbar>\n    <tb-gateway-command [deviceId]=\"entityId\"></tb-gateway-command>\n    <div mat-dialog-actions fxLayout=\"row\" fxLayoutAlign=\"end center\">\n        <button mat-button color=\"primary\"\n            type=\"button\"\n            (click)=\"cancel()\" cdkFocusInitial>\n            {{ 'action.close' | translate }}\n        </button>\n    </div>\n</div>\n",
                 "customCss": ".container {\n    display: grid;\n    grid-template-rows: min-content minmax(auto, 1fr) min-content;\n    height: 100%;\n    max-height: 100vh;\n    width: 600px;\n    max-width: 100%;\n}",
                 "customFunction": "let $injector = widgetContext.$scope.$injector;\nlet customDialog = $injector.get(widgetContext.servicesMap.get('customDialog'));\n\nopenCommands();\n\nfunction openCommands() {\n    customDialog.customDialog(htmlTemplate, CommandsDialogController, {panelClass: \"test\"}).subscribe();\n}\n\nfunction CommandsDialogController(instance) {\n    let vm = instance;\n    \n    vm.entityId = entityId.id;\n\n    vm.cancel = function() {\n        vm.dialogRef.close(null);\n    };\n}\n",
                 "customResources": [],
@@ -1861,7 +1861,7 @@
           "padding": "8px",
           "settings": {
             "useMarkdownTextFunction": false,
-            "markdownTextPattern": "<div class=\"action-buttons-container\">\r\n  <button mat-raised-button color=\"primary\"\r\n     (click)=\"ctx.actionsApi.handleWidgetAction($event, ctx.actionsApi.getActionDescriptors('elementClick')[0], ctx.datasources[0].entity.id)\"\r\n  >Launch command\r\n </button>\r\n</div>",
+            "markdownTextPattern": "<div class=\"action-buttons-container\">\r\n  <button mat-raised-button color=\"primary\"\r\n     (click)=\"ctx.actionsApi.handleWidgetAction($event, ctx.actionsApi.getActionDescriptors('elementClick')[0], ctx.datasources[0].entity.id)\"\r\n  >{{ 'gateway.launch-command' | translate }}\r\n </button>\r\n</div>",
             "applyDefaultMarkdownStyle": false,
             "markdownCss": ".action-buttons-container {\r\n    display: flex;\r\n    flex-wrap: wrap;\r\n    flex-direction: row;\r\n    height: 100%;\r\n    width: 100%;\r\n    align-content: center;\r\n}\r\n\r\nbutton {\r\n    flex-grow: 1;\r\n    margin: 10px;\r\n    min-width: 150px;\r\n    height: auto;\r\n}"
           },
@@ -1887,7 +1887,7 @@
                 "useShowWidgetActionFunction": null,
                 "showWidgetActionFunction": "return true;",
                 "type": "customPretty",
-                "customHtml": "<div class=\"container\">\n    <mat-toolbar fxLayout=\"row\" color=\"primary\">\n        <h2>Launch command</h2>\n        <span fxFlex></span>\n        <div [tb-help]=\"'gatewayInstall'\"></div>\n        <button mat-icon-button (click)=\"cancel()\" type=\"button\">\n            <mat-icon class=\"material-icons\">close</mat-icon>\n        </button>\n    </mat-toolbar>\n    <tb-gateway-command [deviceId]=\"entityId\"></tb-gateway-command>\n    <div mat-dialog-actions fxLayout=\"row\" fxLayoutAlign=\"end center\">\n        <button mat-button color=\"primary\"\n            type=\"button\"\n            (click)=\"cancel()\" cdkFocusInitial>\n            {{ 'action.close' | translate }}\n        </button>\n    </div>\n</div>\n",
+                "customHtml": "<div class=\"container\">\n    <mat-toolbar fxLayout=\"row\" color=\"primary\">\n        <h2>{{ 'gateway.launch-command' | translate }}</h2>\n        <span fxFlex></span>\n        <div [tb-help]=\"'gatewayInstall'\"></div>\n        <button mat-icon-button (click)=\"cancel()\" type=\"button\">\n            <mat-icon class=\"material-icons\">close</mat-icon>\n        </button>\n    </mat-toolbar>\n    <tb-gateway-command [deviceId]=\"entityId\"></tb-gateway-command>\n    <div mat-dialog-actions fxLayout=\"row\" fxLayoutAlign=\"end center\">\n        <button mat-button color=\"primary\"\n            type=\"button\"\n            (click)=\"cancel()\" cdkFocusInitial>\n            {{ 'action.close' | translate }}\n        </button>\n    </div>\n</div>\n",
                 "customCss": ".container {\n    display: grid;\n    grid-template-rows: min-content minmax(auto, 1fr) min-content;\n    height: 100%;\n    max-height: 100vh;\n    width: 600px;\n    max-width: 100%;\n}",
                 "customFunction": "let $injector = widgetContext.$scope.$injector;\nlet customDialog = $injector.get(widgetContext.servicesMap.get('customDialog'));\n\nopenCommands();\n\nfunction openCommands() {\n    customDialog.customDialog(htmlTemplate, CommandsDialogController, {panelClass: \"test\"}).subscribe();\n}\n\nfunction CommandsDialogController(instance) {\n    let vm = instance;\n    \n    vm.entityId = entityId.id;\n\n    vm.cancel = function() {\n        vm.dialogRef.close(null);\n    };\n}\n",
                 "customResources": [],

ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-service-rpc-connector.component.ts

@@ -387,11 +387,11 @@ export class GatewayServiceRPCConnectorComponent implements OnInit, ControlValue
       value = deepClone(value);
       switch (this.connectorType) {
         case ConnectorType.SNMP:
-          this.clearFromArrayByName("oids");
-          value.oids.forEach(value => {
+          this.clearFromArrayByName("oid");
+          value.oid.forEach(value => {
             this.addSNMPoid(value)
           })
-          delete value.oids;
+          delete value.oid;
           break;
         case ConnectorType.REQUEST:
           this.clearFromArrayByName("httpHeaders");

ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-range-list.component.ts

@@ -111,7 +111,7 @@ export class ColorRangeListComponent implements OnInit, ControlValueAccessor, On
     ).subscribe(() => this.updateModel());
     this.colorRangeListFormGroup.get('advancedMode').valueChanges.pipe(
       takeUntil(this.destroy$)
-    ).subscribe(() => Promise.resolve().then(() => this.popover?.updatePosition()));
+    ).subscribe(() => setTimeout(() => {this.popover?.updatePosition();}, 0));
   }
 
   ngOnDestroy() {
@@ -175,7 +175,7 @@ export class ColorRangeListComponent implements OnInit, ControlValueAccessor, On
 
   public removeAdvancedRange(index: number) {
     (this.colorRangeListFormGroup.get('rangeAdvanced') as UntypedFormArray).removeAt(index);
-    Promise.resolve().then(() => this.popover?.updatePosition());
+    setTimeout(() => {this.popover?.updatePosition();}, 0);
   }
 
   get advancedRangeFormArray(): UntypedFormArray {
@@ -189,7 +189,7 @@ export class ColorRangeListComponent implements OnInit, ControlValueAccessor, On
   removeRange(index: number) {
     this.rangeListFormArray.removeAt(index);
     this.colorRangeListFormGroup.markAsDirty();
-    Promise.resolve().then(() => this.popover?.updatePosition());
+    setTimeout(() => {this.popover?.updatePosition();}, 0);
   }
 
   rangeDrop(event: CdkDragDrop<string[]>, range: string) {
@@ -212,7 +212,7 @@ export class ColorRangeListComponent implements OnInit, ControlValueAccessor, On
     const advancedRangeColorsArray = this.colorRangeListFormGroup.get('rangeAdvanced') as UntypedFormArray;
     const advancedRangeColorControl = this.fb.control(advancedRange, [advancedRangeValidator]);
     advancedRangeColorsArray.push(advancedRangeColorControl);
-    Promise.resolve().then(() => this.popover?.updatePosition());
+    setTimeout(() => {this.popover?.updatePosition();}, 0);
   }
 
   addRange() {
@@ -224,7 +224,7 @@ export class ColorRangeListComponent implements OnInit, ControlValueAccessor, On
       };
       this.rangeListFormArray.push(this.colorRangeControl(newRange));
       this.colorRangeListFormGroup.markAsDirty();
-      Promise.resolve().then(() => this.popover?.updatePosition());
+      setTimeout(() => {this.popover?.updatePosition();}, 0);
     }
   }
 

ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-settings-panel.component.ts

@@ -106,7 +106,7 @@ export class ColorSettingsPanelComponent extends PageComponent implements OnInit
       }
     );
     this.colorSettingsFormGroup.get('type').valueChanges.subscribe(() => {
-      Promise.resolve().then(() => this.popover?.updatePosition());
+      setTimeout(() => {this.popover?.updatePosition();}, 0);
     });
   }
 

ui-ngx/src/app/modules/home/components/widget/lib/settings/common/gradient.component.scss

@@ -23,7 +23,7 @@
 
   .gradient-preview {
     width: 100%;
-    padding: 40px 12px 0;
+    padding: 40px 15px 0;
     .gradient-background {
       position: relative;
       height: 56px;
@@ -120,11 +120,13 @@
         display: flex;
         align-items: center;
         justify-content: center;
-        width: 33px;
+        width: 38px;
         height: 24px;
         border-radius: 4px;
         background-color: rgba(0, 0, 0, 0.06);
         &-text {
+          text-overflow: ellipsis;
+          overflow: hidden;
           font-size: 14px;
           font-weight: 500;
         }

ui-ngx/src/app/modules/home/components/widget/lib/settings/common/gradient.component.ts

@@ -119,7 +119,7 @@ export class GradientComponent implements OnInit, ControlValueAccessor, OnDestro
     ).subscribe(() => this.updateModel());
     this.gradientFormGroup.get('advancedMode').valueChanges.pipe(
       takeUntil(this.destroy$)
-    ).subscribe(() => Promise.resolve().then(() => this.popover?.updatePosition()));
+    ).subscribe(() => setTimeout(() => {this.popover?.updatePosition();}, 0));
   }
 
   ngOnDestroy() {
@@ -167,8 +167,8 @@ export class GradientComponent implements OnInit, ControlValueAccessor, OnDestro
         this.advancedGradientListFormArray.value.map((v, i) => this.pointer(shift * (i + 1), i+1, null, true)).join('') +
         `<div class="pointer end"></div>`;
     } else {
-      const min = this.gradientFormGroup.get('minValue').value;
-      const max = this.gradientFormGroup.get('maxValue').value;
+      const min = this.gradientFormGroup.get('minValue').value || 0;
+      const max = this.gradientFormGroup.get('maxValue').value || 100;
       const point = (+max - +min) / (this.gradientListFormArray.value.length + 1);
       const shift = 100 / (this.gradientListFormArray.value.length + 1);
       return `<div class="pointer start"><div class="pointer-value"><span class="pointer-value-text">${min}</span></div></div>` +
@@ -236,7 +236,7 @@ export class GradientComponent implements OnInit, ControlValueAccessor, OnDestro
       this.gradientListFormArray.removeAt(index);
     }
     this.gradientFormGroup.markAsDirty();
-    Promise.resolve().then(() => this.popover?.updatePosition());
+    setTimeout(() => {this.popover?.updatePosition();}, 0);
   }
 
   gradientDrop(event: CdkDragDrop<string[]>, advanced = false) {
@@ -255,7 +255,7 @@ export class GradientComponent implements OnInit, ControlValueAccessor, OnDestro
       this.gradientListFormArray.push(this.colorGradientControl('rgba(0,0,0,0.87)'));
     }
     this.gradientFormGroup.markAsDirty();
-    Promise.resolve().then(() => this.popover?.updatePosition());
+    setTimeout(() => {this.popover?.updatePosition();}, 0);
   }
 
   updateModel() {

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

@@ -2836,6 +2836,7 @@
         "enable-remote-logging": "Enable remote logging",
         "ellipsis-chips-text": "+ {{count}} more",
         "launch-gateway": "Launch gateway",
+        "launch-command": "Launch command",
         "launch-docker-compose": "Start the gateway using the following command in the terminal from folder with docker-compose.yml file",
         "logs-configuration": "Logs configuration",
         "create-new-gateway": "Create a new gateway",