updates and improvements

application/src/main/data/json/demo/dashboards/gateway_list.json

@@ -160,12 +160,16 @@
                 "icon": "terminal",
                 "useShowWidgetActionFunction": null,
                 "showWidgetActionFunction": "return true;",
-                "type": "customPretty",
+                "type": "openDashboardState",
-                "customHtml": "<form style=\"min-width: 400px; max-width: 1000px; position: relative;\">\r\n  <mat-toolbar color=\"primary\">\r\n    <h2 translate>gateway.command</h2>\r\n    <span fxFlex></span>\r\n    <button mat-icon-button\r\n            (click)=\"close()\"\r\n            type=\"button\">\r\n      <mat-icon class=\"material-icons\">close</mat-icon>\r\n    </button>\r\n  </mat-toolbar>\r\n  <mat-progress-bar color=\"warn\" mode=\"indeterminate\" *ngIf=\"isLoading$ | async\">\r\n  </mat-progress-bar>\r\n  <div style=\"height: 4px;\" *ngIf=\"!(isLoading$ | async)\"></div>\r\n  <tb-gateway-command [token]=\"data.credentials.credentialsId\"></tb-gateway-command>\r\n  <div mat-dialog-actions fxLayoutAlign=\"end center\">\r\n    <button mat-button color=\"primary\"\r\n            type=\"button\"\r\n            cdkFocusInitial\r\n            [disabled]=\"(isLoading$ | async)\"\r\n            (click)=\"close()\">\r\n      {{ 'action.ok' | translate }}\r\n    </button>\r\n  </div>\r\n</form>",
+                "targetDashboardStateId": "launch_command",
-                "customCss": "/*=======================================================================*/\r\n/*==========  There are two examples: for edit and add entity  ==========*/\r\n/*=======================================================================*/\r\n/*========================  Edit entity example  ========================*/\r\n/*=======================================================================*/\r\n/*\r\n.edit-entity-form .boolean-value-input {\r\n    padding-left: 5px;\r\n}\r\n\r\n.edit-entity-form .boolean-value-input .checkbox-label {\r\n    margin-bottom: 8px;\r\n    color: rgba(0,0,0,0.54);\r\n    font-size: 12px;\r\n}\r\n\r\n.relations-list .header {\r\n    padding-right: 5px;\r\n    padding-bottom: 5px;\r\n    padding-left: 5px;\r\n}\r\n\r\n.relations-list .header .cell {\r\n    padding-right: 5px;\r\n    padding-left: 5px;\r\n    font-size: 12px;\r\n    font-weight: 700;\r\n    color: rgba(0, 0, 0, .54);\r\n    white-space: nowrap;\r\n}\r\n\r\n.relations-list .mat-form-field-infix {\r\n    width: auto !important;\r\n}\r\n\r\n.relations-list .body {\r\n    padding-right: 5px;\r\n    padding-bottom: 15px;\r\n    padding-left: 5px;\r\n}\r\n\r\n.relations-list .body .row {\r\n    padding-top: 5px;\r\n}\r\n\r\n.relations-list .body .cell {\r\n    padding-right: 5px;\r\n    padding-left: 5px;\r\n}\r\n\r\n.relations-list .body .md-button {\r\n    margin: 0;\r\n}\r\n*/\r\n/*========================================================================*/\r\n/*=========================  Add entity example  =========================*/\r\n/*========================================================================*/\r\n/*\r\n.add-entity-form .boolean-value-input {\r\n    padding-left: 5px;\r\n}\r\n\r\n.add-entity-form .boolean-value-input .checkbox-label {\r\n    margin-bottom: 8px;\r\n    color: rgba(0,0,0,0.54);\r\n    font-size: 12px;\r\n}\r\n\r\n.relations-list .header {\r\n    padding-right: 5px;\r\n    padding-bottom: 5px;\r\n    padding-left: 5px;\r\n}\r\n\r\n.relations-list .header .cell {\r\n    padding-right: 5px;\r\n    padding-left: 5px;\r\n    font-size: 12px;\r\n    font-weight: 700;\r\n    color: rgba(0, 0, 0, .54);\r\n    white-space: nowrap;\r\n}\r\n\r\n.relations-list .mat-form-field-infix {\r\n    width: auto !important;\r\n}\r\n\r\n.relations-list .body {\r\n    padding-right: 5px;\r\n    padding-bottom: 15px;\r\n    padding-left: 5px;\r\n}\r\n\r\n.relations-list .body .row {\r\n    padding-top: 5px;\r\n}\r\n\r\n.relations-list .body .cell {\r\n    padding-right: 5px;\r\n    padding-left: 5px;\r\n}\r\n\r\n.relations-list .body .md-button {\r\n    margin: 0;\r\n}\r\n*/\r\n",
+                "setEntityId": true,
-                "customFunction": "let $injector = widgetContext.$scope.$injector;\r\nlet customDialog = $injector.get(widgetContext.servicesMap.get('customDialog'));\r\nlet deviceService = $injector.get(widgetContext.servicesMap.get('deviceService'));\r\nlet data = {};\r\n\r\nopenEditEntityDialog();\r\n\r\nfunction openEditEntityDialog() {\r\n    deviceService.getDeviceCredentials(entityId.id).subscribe(credentials => {\r\n        data.credentials = credentials;\r\n        customDialog.customDialog(htmlTemplate, EditEntityDialogController).subscribe();\r\n    });\r\n}\r\n\r\nfunction EditEntityDialogController(instance) {\r\n    let vm = instance;\r\n    vm.data = data;\r\n\r\n    vm.close = function() {\r\n        vm.dialogRef.close(null);\r\n    };\r\n\r\n\r\n}",
+                "stateEntityParamName": null,
-                "customResources": [],
+                "openRightLayout": false,
-                "openInSeparateDialog": false,
+                "dialogTitle": "Docker commands",
+                "dialogHideDashboardToolbar": true,
+                "dialogWidth": null,
+                "dialogHeight": 40,
+                "openInSeparateDialog": true,
                 "openInPopover": false,
                 "id": "ae2e5995-505f-a241-5fb2-6cbaf08b1b55"
               },

ui-ngx/src/app/modules/home/components/widget/lib/gateway/device-gateway-command.component.html

@@ -42,32 +42,4 @@
                 "></tb-markdown>
     </ng-template>
   </ng-container>
-<!--  <div class="mat-content" fxLayout="column" *ngIf="selectedOSCControl.value !== osTypes.windows">-->
-<!--    <div fxLayout="row" fxLayoutAlign="start center">-->
-<!--      <pre class="tb-highlight" fxFlex><code style="white-space: pre-wrap;">{{ linuxCode }}</code></pre>-->
-<!--      <button mat-icon-button-->
-<!--              color="primary"-->
-<!--              ngxClipboard-->
-<!--              cbContent="{{ linuxCode }}"-->
-<!--              (cbOnSuccess)="onDockerCodeCopied()"-->
-<!--              matTooltip="{{ 'gateway.copy-command' | translate }}"-->
-<!--              matTooltipPosition="above">-->
-<!--        <mat-icon svgIcon="mdi:clipboard-arrow-left"></mat-icon>-->
-<!--      </button>-->
-<!--    </div>-->
-<!--  </div>-->
-<!--  <div class="mat-content" fxLayout="column" *ngIf="selectedOSCControl.value === osTypes.windows">-->
-<!--    <div fxLayout="row" fxLayoutAlign="start center">-->
-<!--      <pre class="tb-highlight" fxFlex><code style="white-space: pre-wrap;">{{ windowsCode }}</code></pre>-->
-<!--      <button mat-icon-button-->
-<!--              color="primary"-->
-<!--              ngxClipboard-->
-<!--              cbContent="{{ windowsCode }}"-->
-<!--              (cbOnSuccess)="onDockerCodeCopied()"-->
-<!--              matTooltip="{{ 'gateway.copy-command' | translate }}"-->
-<!--              matTooltipPosition="above">-->
-<!--        <mat-icon svgIcon="mdi:clipboard-arrow-left"></mat-icon>-->
-<!--      </button>-->
-<!--    </div>-->
-<!--  </div>-->
 </div>

ui-ngx/src/app/modules/home/components/widget/lib/gateway/device-gateway-command.component.scss

@@ -18,78 +18,11 @@
   height: 100%;
   display: block;
 
-  ::ng-deep.tb-markdown-view {
+  ::ng-deep .tb-markdown-view .start-code code[class*="language-"],
-    .start-code {
+  ::ng-deep .tb-markdown-view .start-code pre[class*="language-"] {
-      .code-wrapper {
+    overflow: hidden;
-        padding: 0;
+    white-space: break-spaces;
-
+    word-break: break-all;
-        pre[class*=language-] {
-          margin: 0;
-          padding: 9px 38px 9px 16px;
-          background: rgba(0, 0, 0, 0.03);
-          border-radius: 6px;
-          border: none;
-        }
-
-        code[class*="language-"], pre[class*="language-"] {
-          font-family: 'Roboto';
-          font-style: normal;
-          font-weight: 400;
-          font-size: 12px;
-          line-height: 16px;
-          letter-spacing: 0.25px;
-          color: rgba(0, 0, 0, 0.38);
-          overflow: hidden;
-          white-space: break-spaces;
-          word-break: break-all;
-
-          & * {
-            color: rgba(0, 0, 0, 0.38);
-            cursor: inherit;
-            background: transparent;
-          }
-        }
-
-        button.clipboard-btn {
-          right: 0;
-          height: 34px;
-
-          p, div {
-            background: transparent;
-          }
-
-          p {
-            margin: 0;
-            padding: 7px;
-            color: #305680;
-          }
-
-          div {
-            top: 0;
-            padding: 8px;
-            height: 34px;
-            width: 34px;
-
-            img {
-              display: none;
-            }
-
-            &:after {
-              content: "";
-              position: initial;
-              display: block;
-              width: 18px;
-              height: 18px;
-              background: #305680;
-              -webkit-mask-image: url(/assets/copy-code-icon.svg);
-              -webkit-mask-repeat: no-repeat;
-              mask-image: url(/assets/copy-code-icon.svg);
-              mask-repeat: no-repeat;
-            }
-          }
-        }
-      }
     }
-  }
 }
 

ui-ngx/src/app/modules/home/components/widget/lib/gateway/device-gateway-command.component.ts

@@ -14,7 +14,7 @@
 /// limitations under the License.
 ///
 
-import { Component, Input, OnInit } from '@angular/core';
+import { ChangeDetectorRef, Component, Input, OnInit } from '@angular/core';
 import { FormControl } from '@angular/forms';
 import { Router } from '@angular/router';
 import { Store } from '@ngrx/store';
@@ -53,6 +53,7 @@ export class DeviceGatewayCommandComponent implements OnInit {
   constructor(protected router: Router,
               protected store: Store<AppState>,
               private translate: TranslateService,
+              private cd: ChangeDetectorRef,
               private deviceService: DeviceService) {
   }
 
@@ -63,6 +64,7 @@ export class DeviceGatewayCommandComponent implements OnInit {
       this.deviceService.getDeviceCredentials(this.deviceId).subscribe(credentials => {
         this.token = credentials.credentialsId;
         this.createRunCode(HOST);
+        this.cd.detectChanges()
       });
     }
     this.selectedOSCControl = new FormControl('');

ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-configuration.component.scss

@@ -64,10 +64,6 @@
   .security-toggle-group {
     margin-bottom: 15px;
     margin-right: auto;
-
-    ::ng-deep span {
-      padding: 0 25px;
-    }
   }
 
   .logs-label {
@@ -111,6 +107,10 @@
     z-index: 100;
   }
 
+  ::ng-deep.security-toggle-group span {
+    padding: 0 25px;
+  }
+
 
   mat-panel-title {
     display: block;

ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-connectors.component.scss

@@ -54,10 +54,6 @@
     //flex-shrink: 1;
   }
 
-  mat-expansion-panel {
-    border: 1px solid #305680;
-  }
-
   mat-card {
     padding-left: 10px;
     background: transparent;
@@ -75,10 +71,6 @@
     flex-grow: 1;
   }
 
-  .mat-accordion .mat-expansion-panel {
-    border-radius: 5px;
-  }
-
   .action-btns {
     margin: 10px 10px 0;
   }