UI: Improved view gateway dashboard and updated gateway widget types

ui-ngx/src/app/modules/home/components/widget/dialog/custom-dialog.service.ts

@@ -17,8 +17,6 @@
 import { Inject, Injectable, Type } from '@angular/core';
 import { Observable } from 'rxjs';
 import { MatDialog, MatDialogConfig } from '@angular/material/dialog';
-import { TranslateService } from '@ngx-translate/core';
-import { AuthService } from '@core/auth/auth.service';
 import { DynamicComponentFactoryService } from '@core/services/dynamic-component-factory.service';
 import { CommonModule } from '@angular/common';
 import { mergeMap, tap } from 'rxjs/operators';
@@ -28,7 +26,11 @@ import {
   CustomDialogContainerData
 } from '@home/components/widget/dialog/custom-dialog-container.component';
 import { SHARED_MODULE_TOKEN } from '@shared/components/tokens';
-import { HOME_COMPONENTS_MODULE_TOKEN, SHARED_HOME_COMPONENTS_MODULE_TOKEN } from '@home/components/tokens';
+import {
+  HOME_COMPONENTS_MODULE_TOKEN,
+  SHARED_HOME_COMPONENTS_MODULE_TOKEN,
+  WIDGET_COMPONENTS_MODULE_TOKEN
+} from '@home/components/tokens';
 
 @Injectable()
 export class CustomDialogService {
@@ -36,12 +38,11 @@ export class CustomDialogService {
   private customModules: Array<Type<any>>;
 
   constructor(
-    private translate: TranslateService,
-    private authService: AuthService,
     private dynamicComponentFactoryService: DynamicComponentFactoryService,
     @Inject(SHARED_MODULE_TOKEN) private sharedModule: Type<any>,
     @Inject(SHARED_HOME_COMPONENTS_MODULE_TOKEN) private sharedHomeComponentsModule: Type<any>,
     @Inject(HOME_COMPONENTS_MODULE_TOKEN) private homeComponentsModule: Type<any>,
+    @Inject(WIDGET_COMPONENTS_MODULE_TOKEN) private widgetComponentsModule: Type<any>,
     public dialog: MatDialog
   ) {
   }
@@ -52,7 +53,8 @@ export class CustomDialogService {
 
   customDialog(template: string, controller: (instance: CustomDialogComponent) => void, data?: any,
                config?: MatDialogConfig): Observable<any> {
-    const modules = [this.sharedModule, CommonModule, this.sharedHomeComponentsModule, this.homeComponentsModule];
+    const modules = [this.sharedModule, CommonModule, this.sharedHomeComponentsModule, this.homeComponentsModule,
+      this.widgetComponentsModule];
     if (Array.isArray(this.customModules)) {
       modules.push(...this.customModules);
     }

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

@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<div mat-dialog-content fxLayout="column" style="padding: 0">
+<div mat-dialog-content fxLayout="column" style="padding: 0 8px 8px">
   <div fxLayout="row" fxLayoutAlign="space-between center">
     <span class="tb-no-data-text">{{ 'gateway.docker-label' | translate }}</span>
     <div fxFlexAlign="end" class="tb-help" [tb-help]="helpLink"></div>
@@ -60,7 +60,8 @@
 </div>
 
 <ng-template #commandsExample let-command="command">
-  <div class="tb-form-panel no-padding no-border tb-tab-body">
+  <div class="tb-form-panel stroked tb-tab-body">
+    <div class="tb-form-panel-title" translate>device.connectivity.execute-following-command</div>
     <tb-markdown usePlainMarkdown containerClass="start-code"
        data="
           ```bash

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

@@ -26,12 +26,44 @@
         overflow: hidden;
         white-space: break-spaces;
         word-break: break-all;
+        background: #F3F6FA;
+        border-color: #305680;
       }
 
       .code-wrapper {
         padding: 0;
       }
+
+      button.clipboard-btn {
+        right: 0;
+        p {
+          color: #305680;
+        }
+        p, div {
+          background-color: #F3F6FA;
+        }
+        div {
+          img {
+            display: none;
+          }
+
+          &:after {
+            content: "";
+            position: initial;
+            display: block;
+            width: 18px;
+            height: 18px;
+            background: #305680;
+            mask-image: url(/assets/copy-code-icon.svg);
+            mask-repeat: no-repeat;
+          }
+        }
       }
     }
   }
 
+  .tb-form-panel.tb-tab-body {
+    margin-top: 16px;
+  }
+}
+

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

@@ -15,17 +15,10 @@
     limitations under the License.
 
 -->
-<mat-toolbar color="primary">
+<mat-toolbar color="primary" *ngIf="!dialogRef">
   <h2 translate>gateway.gateway-configuration</h2>
-  <span fxFlex></span>
-  <button mat-icon-button
-          type="button"
-          (click)="cancel()"
-          *ngIf="dialogRef">
-    <mat-icon class="material-icons" style="color:#000;">close</mat-icon>
-  </button>
 </mat-toolbar>
-<mat-tab-group style="max-height: calc(100% - 117px); height: 100%;" [formGroup]="gatewayConfigGroup">
+<mat-tab-group class="tab-group-block" [formGroup]="gatewayConfigGroup">
   <mat-tab label="{{ 'gateway.thingsboard-general' | translate }}">
     <div formGroupName="thingsboard" class="mat-content mat-padding configuration-block">
       <div class="tb-form-panel no-padding-bottom">
@@ -713,7 +706,7 @@
     </div>
   </mat-tab>
 </mat-tab-group>
-<div mat-dialog-actions fxLayoutAlign="start center">
+<div class="actions">
   <button mat-button color="primary"
           type="button"
           *ngIf="dialogRef"

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

@@ -16,8 +16,8 @@
 :host {
   width: 100%;
   height: 100%;
-  display: flex;
+  display: grid;
-  flex-direction: column;
+  grid-template-rows: min-content minmax(auto, 1fr) min-content;
 
   .configuration-block {
     display: flex;
@@ -26,10 +26,18 @@
   }
 
   .mat-toolbar {
+    grid-row: 1;
     background: transparent;
     color: rgba(0, 0, 0, .87) !important;
   }
 
+  .tab-group-block {
+    min-width: 0;
+    height: 100%;
+    min-height: 0;
+    grid-row: 2;
+  }
+
   .toggle-group {
     margin-right: auto;
   }
@@ -45,6 +53,15 @@
   .saving-period {
     flex: 1;
   }
+
+  .actions {
+    grid-row: 3;
+    padding: 8px;
+    display: flex;
+    gap: 8px;
+    justify-content: flex-end;
+    flex: 1;
+  }
 }
 
 :host ::ng-deep {

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

@@ -16,7 +16,7 @@
 
 -->
 <div class="connector-container tb-form-panel no-border">
-  <section class="table-container tb-form-panel stroked no-padding flex">
+  <section class="table-section tb-form-panel no-padding flex section-container">
     <mat-toolbar class="mat-mdc-table-toolbar">
       <h2>{{ 'gateway.connectors' | translate }}</h2>
       <span fxFlex></span>
@@ -28,6 +28,7 @@
         <mat-icon>add</mat-icon>
       </button>
     </mat-toolbar>
+    <div class="table-container">
       <table mat-table [dataSource]="dataSource"
              matSort [matSortActive]="pageLink.sortOrder.property" [matSortDirection]="pageLink.sortDirection()"
              matSortDisableClear>
@@ -138,9 +139,11 @@
         <mat-row class="mat-row-select" [class]="{'tb-current-entity': isSameConnector(attribute)}"
                  *matRowDef="let attribute; columns: displayedColumns;" (click)="selectConnector(attribute)"></mat-row>
       </table>
+    </div>
   </section>
   <section [formGroup]="connectorForm" class="tb-form-panel no-border no-padding flex">
-    <section class="tb-form-row tb-not-inline-field same-padding input-container">
+    <section class="tb-form-panel input-container section-container">
+      <section class="tb-form-row tb-not-inline-field no-padding no-border column-lt-md input-container">
         <mat-form-field class="flex" subscriptSizing="dynamic">
           <mat-label>{{ 'gateway.connectors-table-name' | translate }}</mat-label>
           <input matInput formControlName="name" #nameInput/>
@@ -167,17 +170,18 @@
           </mat-select>
         </mat-form-field>
       </section>
-    <section class="tb-form-panel stroked flex">
+    </section>
+    <section class="tb-form-panel flex section-container">
       <tb-json-object-edit
+        fillHeight="true"
         class="flex"
         fxLayout="column"
         required
         label="{{ 'gateway.configuration' | translate }}"
         formControlName="configurationJson">
       </tb-json-object-edit>
-      <div fxLayoutAlign="start center">
+      <div fxLayoutAlign="end center">
         <button mat-raised-button color="primary"
-                class="action-button"
                 type="button"
                 [disabled]="!connectorForm.dirty || connectorForm.invalid"
                 (click)="saveConnector()">

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

@@ -30,9 +30,13 @@
       flex-direction: column;
     }
 
+    .table-section {
+      min-height: 35vh;
+      overflow: hidden;
+
       .table-container {
         overflow: auto;
-      min-height: 35vh;
+      }
     }
 
     .flex {
@@ -42,6 +46,10 @@
     .input-container {
       height: auto;
     }
+
+    .section-container {
+      background-color: #fff;
+    }
   }
 
   .mat-toolbar {
@@ -69,10 +77,6 @@
     }
   }
 
-  .action-button {
-    margin: 0 15px;
-  }
-
   mat-row {
     cursor: pointer;
   }