[3.0] Minor fix (#2571)

* Fix breadcrumb and breakroint api to header

* Fix layout profile

* Clear code and fix layout (admin and profile pages)

* Improvements import

* Fix entity table

ui-ngx/src/app/modules/home/components/audit-log/audit-log-table-config.ts

@@ -25,17 +25,13 @@ import {
   AuditLog,
   AuditLogMode
 } from '@shared/models/audit-log.models';
-import {
+import { EntityTypeResource, entityTypeTranslations } from '@shared/models/entity-type.models';
-  EntityTypeResource,
-  EntityTypeTranslation,
-  entityTypeTranslations
-} from '@shared/models/entity-type.models';
 import { AuditLogService } from '@core/http/audit-log.service';
 import { TranslateService } from '@ngx-translate/core';
 import { DatePipe } from '@angular/common';
 import { Direction } from '@shared/models/page/sort-order';
 import { MatDialog } from '@angular/material/dialog';
-import { PageLink, TimePageLink } from '@shared/models/page/page-link';
+import { TimePageLink } from '@shared/models/page/page-link';
 import { Observable } from 'rxjs';
 import { PageData } from '@shared/models/page/page-data';
 import { EntityId } from '@shared/models/id/entity-id';

ui-ngx/src/app/modules/home/components/entity/entities-table.component.html

@@ -135,7 +135,7 @@
           </div>
         </mat-toolbar>
         <div fxFlex class="table-container">
-          <mat-table [dataSource]="dataSource" [trackBy]="trackByEntityId"
+          <table mat-table [dataSource]="dataSource" [trackBy]="trackByEntityId"
                      matSort [matSortActive]="pageLink.sortOrder.property" [matSortDirection]="pageLink.sortDirection()" matSortDisableClear>
             <ng-container matColumnDef="select" sticky>
               <mat-header-cell *matHeaderCellDef style="width: 30px;">
@@ -187,7 +187,7 @@
                                                                     maxWidth: (cellActionDescriptors.length * 40) + 'px',
                                                                     width: (cellActionDescriptors.length * 40) + 'px' }">
                 <div fxHide fxShow.gt-md fxFlex fxLayout="row" fxLayoutAlign="end">
-                  <button mat-button mat-icon-button [disabled]="isLoading$ | async"
+                  <button mat-icon-button [disabled]="isLoading$ | async"
                           [fxShow]="actionDescriptor.isEnabled(entity)" *ngFor="let actionDescriptor of cellActionDescriptors"
                           matTooltip="{{ actionDescriptor.nameFunction ? actionDescriptor.nameFunction(entity) : actionDescriptor.name }}"
                           matTooltipPosition="above"
@@ -197,7 +197,7 @@
                   </button>
                 </div>
                 <div fxHide fxShow.lt-lg *ngIf="cellActionDescriptors.length">
-                  <button mat-button mat-icon-button
+                  <button mat-icon-button
                           (click)="$event.stopPropagation()"
                           [matMenuTriggerFor]="cellActionsMenu">
                     <mat-icon class="material-icons">more_vert</mat-icon>
@@ -220,7 +220,7 @@
                                  'mat-selected': dataSource.selection.isSelected(entity),
                                  'tb-current-entity': dataSource.isCurrentEntity(entity)}"
                      *matRowDef="let entity; columns: displayedColumns;" (click)="onRowClick($event, entity)"></mat-row>
-          </mat-table>
+          </table>
           <span [fxShow]="!(isLoading$ | async) && (dataSource.isEmpty() | async)"
                 fxLayoutAlign="center center"
                 class="no-data-found" translate>{{ translations.noEntities }}</span>

ui-ngx/src/app/modules/home/home.component.html

@@ -35,17 +35,17 @@
   <mat-sidenav-content>
     <div fxLayout="column" role="main" style="height: 100%;">
       <mat-toolbar fxLayout="row" color="primary" class="mat-elevation-z1 tb-primary-toolbar">
-        <button [fxShow]="!forceFullscreen" mat-button mat-icon-button id="main"
+        <button [fxShow]="!forceFullscreen" mat-icon-button id="main"
                 [ngClass]="{'tb-invisible': displaySearchMode()}"
                 fxHide.gt-sm (click)="sidenav.toggle()">
           <mat-icon class="material-icons">menu</mat-icon>
         </button>
-        <button [fxShow]="forceFullscreen" mat-button mat-icon-button
+        <button [fxShow]="forceFullscreen" mat-icon-button
                 [ngClass]="{'tb-invisible': displaySearchMode()}"
                 (click)="goBack()">
           <mat-icon class="material-icons">arrow_back</mat-icon>
         </button>
-        <button mat-button mat-icon-button
+        <button mat-icon-button
                 [ngClass]="{'tb-invisible': !displaySearchMode()}"
                 (click)="closeSearch()">
           <mat-icon class="material-icons">arrow_back</mat-icon>
@@ -62,12 +62,11 @@
           </mat-form-field>
         </div>
         <button [fxShow]="searchEnabled"
-                mat-button mat-icon-button
+                mat-icon-button (click)="openSearch()">
-                (click)="openSearch()">
           <mat-icon class="material-icons">search</mat-icon>
         </button>
         <button *ngIf="fullscreenEnabled" [fxShow]="!displaySearchMode()"
-                mat-button mat-icon-button fxHide.xs fxHide.sm (click)="toggleFullscreen()">
+                mat-icon-button fxHide.lt-md (click)="toggleFullscreen()">
           <mat-icon class="material-icons">{{ isFullscreen() ? 'fullscreen_exit' : 'fullscreen' }}</mat-icon>
         </button>
         <tb-user-menu [displayUserInfo]="!displaySearchMode()"></tb-user-menu>

ui-ngx/src/app/modules/home/home.component.ts

@@ -17,24 +17,19 @@
 import { AfterViewInit, Component, ElementRef, Inject, OnInit, ViewChild } from '@angular/core';
 import { fromEvent, Observable } from 'rxjs';
 import { select, Store } from '@ngrx/store';
-import { debounceTime, distinctUntilChanged, map, mergeMap, take, tap } from 'rxjs/operators';
+import { debounceTime, distinctUntilChanged, map, tap } from 'rxjs/operators';
 
 import { BreakpointObserver, BreakpointState } from '@angular/cdk/layout';
 import { User } from '@shared/models/user.model';
 import { PageComponent } from '@shared/components/page.component';
 import { AppState } from '@core/core.state';
-import { AuthService } from '@core/auth/auth.service';
-import { UserService } from '@core/http/user.service';
-import { MenuService } from '@core/services/menu.service';
 import { getCurrentAuthState, selectAuthUser, selectUserDetails } from '@core/auth/auth.selectors';
 import { MediaBreakpoints } from '@shared/models/constants';
-import { ActionNotificationShow } from '@core/notification/notification.actions';
-import { Router } from '@angular/router';
 import * as _screenfull from 'screenfull';
 import { MatSidenav } from '@angular/material/sidenav';
 import { AuthState } from '@core/auth/auth.models';
 import { WINDOW } from '@core/services/window.service';
-import { ISearchableComponent, instanceOfSearchableComponent } from '@home/models/searchable-component.models';
+import { instanceOfSearchableComponent, ISearchableComponent } from '@home/models/searchable-component.models';
 
 const screenfull = _screenfull as _screenfull.Screenfull;
 
@@ -74,9 +69,6 @@ export class HomeComponent extends PageComponent implements AfterViewInit, OnIni
 
   constructor(protected store: Store<AppState>,
               @Inject(WINDOW) private window: Window,
-              private authService: AuthService,
-              private router: Router,
-              private userService: UserService, private menuService: MenuService,
               public breakpointObserver: BreakpointObserver) {
     super(store);
   }

ui-ngx/src/app/modules/home/pages/admin/admin-routing.module.ts

@@ -15,13 +15,13 @@
 ///
 
 import { NgModule } from '@angular/core';
-import { Routes, RouterModule } from '@angular/router';
+import { RouterModule, Routes } from '@angular/router';
 
 import { MailServerComponent } from '@modules/home/pages/admin/mail-server.component';
 import { ConfirmOnExitGuard } from '@core/guards/confirm-on-exit.guard';
 import { Authority } from '@shared/models/authority.enum';
-import {GeneralSettingsComponent} from '@modules/home/pages/admin/general-settings.component';
+import { GeneralSettingsComponent } from '@modules/home/pages/admin/general-settings.component';
-import {SecuritySettingsComponent} from '@modules/home/pages/admin/security-settings.component';
+import { SecuritySettingsComponent } from '@modules/home/pages/admin/security-settings.component';
 
 const routes: Routes = [
   {

ui-ngx/src/app/modules/home/pages/admin/admin.module.ts

@@ -20,9 +20,9 @@ import { CommonModule } from '@angular/common';
 import { AdminRoutingModule } from './admin-routing.module';
 import { SharedModule } from '@app/shared/shared.module';
 import { MailServerComponent } from '@modules/home/pages/admin/mail-server.component';
-import {GeneralSettingsComponent} from '@modules/home/pages/admin/general-settings.component';
+import { GeneralSettingsComponent } from '@modules/home/pages/admin/general-settings.component';
-import {SecuritySettingsComponent} from '@modules/home/pages/admin/security-settings.component';
+import { SecuritySettingsComponent } from '@modules/home/pages/admin/security-settings.component';
-import {HomeComponentsModule} from '@modules/home/components/home-components.module';
+import { HomeComponentsModule } from '@modules/home/components/home-components.module';
 
 @NgModule({
   declarations:

ui-ngx/src/app/modules/home/pages/admin/general-settings.component.ts

@@ -20,10 +20,8 @@ import { AppState } from '@core/core.state';
 import { PageComponent } from '@shared/components/page.component';
 import { Router } from '@angular/router';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
-import {AdminSettings, GeneralSettings} from '@shared/models/settings.models';
+import { AdminSettings, GeneralSettings } from '@shared/models/settings.models';
 import { AdminService } from '@core/http/admin.service';
-import { ActionNotificationShow } from '@core/notification/notification.actions';
-import { TranslateService } from '@ngx-translate/core';
 import { HasConfirmForm } from '@core/guards/confirm-on-exit.guard';
 
 @Component({
@@ -39,7 +37,6 @@ export class GeneralSettingsComponent extends PageComponent implements OnInit, H
   constructor(protected store: Store<AppState>,
               private router: Router,
               private adminService: AdminService,
-              private translate: TranslateService,
               public fb: FormBuilder) {
     super(store);
   }

ui-ngx/src/app/modules/home/pages/admin/mail-server.component.html

@@ -95,13 +95,12 @@
             <mat-label translate>common.password</mat-label>
             <input matInput formControlName="password" type="password" placeholder="{{ 'common.enter-password' | translate }}"/>
           </mat-form-field>
-          <div fxLayout="row" fxLayoutAlign="end center" style="width: 100%;" class="layout-wrap">
+          <div fxLayout="row" fxLayoutAlign="end center" fxLayout.xs="column" fxLayoutAlign.xs="end" fxLayoutGap="16px">
-            <button mat-button mat-raised-button
+            <button mat-raised-button type="button"
-                    type="button" style="margin-right: 16px;"
                     [disabled]="(isLoading$ | async) || mailSettingsForm.invalid" (click)="sendTestMail()">
               {{'admin.send-test-mail' | translate}}
             </button>
-            <button mat-button mat-raised-button color="primary" [disabled]="(isLoading$ | async) || mailSettingsForm.invalid || !mailSettingsForm.dirty"
+            <button mat-raised-button color="primary" [disabled]="(isLoading$ | async) || mailSettingsForm.invalid || !mailSettingsForm.dirty"
                     type="submit">{{'action.save' | translate}}
             </button>
           </div>

ui-ngx/src/app/modules/home/pages/admin/security-settings.component.ts

@@ -20,10 +20,8 @@ import { AppState } from '@core/core.state';
 import { PageComponent } from '@shared/components/page.component';
 import { Router } from '@angular/router';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
-import { SecuritySettings} from '@shared/models/settings.models';
+import { SecuritySettings } from '@shared/models/settings.models';
 import { AdminService } from '@core/http/admin.service';
-import { ActionNotificationShow } from '@core/notification/notification.actions';
-import { TranslateService } from '@ngx-translate/core';
 import { HasConfirmForm } from '@core/guards/confirm-on-exit.guard';
 
 @Component({
@@ -39,7 +37,6 @@ export class SecuritySettingsComponent extends PageComponent implements OnInit,
   constructor(protected store: Store<AppState>,
               private router: Router,
               private adminService: AdminService,
-              private translate: TranslateService,
               public fb: FormBuilder) {
     super(store);
   }

ui-ngx/src/app/modules/home/pages/customer/customer-routing.module.ts

@@ -14,16 +14,16 @@
 /// limitations under the License.
 ///
 
-import {NgModule} from '@angular/core';
+import { NgModule } from '@angular/core';
-import {RouterModule, Routes} from '@angular/router';
+import { RouterModule, Routes } from '@angular/router';
 
-import {EntitiesTableComponent} from '../../components/entity/entities-table.component';
+import { EntitiesTableComponent } from '../../components/entity/entities-table.component';
-import {Authority} from '@shared/models/authority.enum';
+import { Authority } from '@shared/models/authority.enum';
-import {UsersTableConfigResolver} from '../user/users-table-config.resolver';
+import { UsersTableConfigResolver } from '../user/users-table-config.resolver';
-import {CustomersTableConfigResolver} from './customers-table-config.resolver';
+import { CustomersTableConfigResolver } from './customers-table-config.resolver';
-import {DevicesTableConfigResolver} from '@modules/home/pages/device/devices-table-config.resolver';
+import { DevicesTableConfigResolver } from '@modules/home/pages/device/devices-table-config.resolver';
-import {AssetsTableConfigResolver} from '../asset/assets-table-config.resolver';
+import { AssetsTableConfigResolver } from '../asset/assets-table-config.resolver';
-import {DashboardsTableConfigResolver} from '@modules/home/pages/dashboard/dashboards-table-config.resolver';
+import { DashboardsTableConfigResolver } from '@modules/home/pages/dashboard/dashboards-table-config.resolver';
 import { DashboardPageComponent } from '@home/pages/dashboard/dashboard-page.component';
 import { BreadCrumbConfig } from '@shared/components/breadcrumb';
 import { dashboardBreadcumbLabelFunction, DashboardResolver } from '@home/pages/dashboard/dashboard-routing.module';

ui-ngx/src/app/modules/home/pages/customer/customer.module.ts

@@ -17,9 +17,9 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { SharedModule } from '@shared/shared.module';
-import {CustomerComponent} from '@modules/home/pages/customer/customer.component';
+import { CustomerComponent } from '@modules/home/pages/customer/customer.component';
-import {CustomerRoutingModule} from './customer-routing.module';
+import { CustomerRoutingModule } from './customer-routing.module';
-import {HomeComponentsModule} from '@modules/home/components/home-components.module';
+import { HomeComponentsModule } from '@modules/home/components/home-components.module';
 import { CustomerTabsComponent } from '@home/pages/customer/customer-tabs.component';
 
 @NgModule({

ui-ngx/src/app/modules/home/pages/customer/customers-table-config.resolver.ts

@@ -18,7 +18,6 @@ import { Injectable } from '@angular/core';
 
 import { Resolve, Router } from '@angular/router';
 
-import { Tenant } from '@shared/models/tenant.model';
 import {
   DateEntityTableColumn,
   EntityTableColumn,
@@ -26,15 +25,11 @@ import {
 } from '@home/models/entity/entities-table-config.models';
 import { TranslateService } from '@ngx-translate/core';
 import { DatePipe } from '@angular/common';
-import {
+import { EntityType, entityTypeResources, entityTypeTranslations } from '@shared/models/entity-type.models';
-  EntityType,
-  entityTypeResources,
-  entityTypeTranslations
-} from '@shared/models/entity-type.models';
 import { EntityAction } from '@home/models/entity/entity-component.models';
-import {Customer} from '@app/shared/models/customer.model';
+import { Customer } from '@app/shared/models/customer.model';
-import {CustomerService} from '@app/core/http/customer.service';
+import { CustomerService } from '@app/core/http/customer.service';
-import {CustomerComponent} from '@modules/home/pages/customer/customer.component';
+import { CustomerComponent } from '@modules/home/pages/customer/customer.component';
 import { CustomerTabsComponent } from '@home/pages/customer/customer-tabs.component';
 
 @Injectable()
@@ -54,7 +49,7 @@ export class CustomersTableConfigResolver implements Resolve<EntityTableConfig<C
     this.config.entityResources = entityTypeResources.get(EntityType.CUSTOMER);
 
     this.config.columns.push(
-      new DateEntityTableColumn<Customer>('createdTime', 'customer.created-time', this.datePipe, '150px'),
+      new DateEntityTableColumn<Customer>('createdTime', 'common.created-time', this.datePipe, '150px'),
       new EntityTableColumn<Customer>('title', 'customer.title', '25%'),
       new EntityTableColumn<Customer>('email', 'contact.email', '25%'),
       new EntityTableColumn<Customer>('country', 'contact.country', '25%'),

ui-ngx/src/app/modules/home/pages/dashboard/dashboard-page.component.ts

@@ -45,7 +45,7 @@ import {
 import { BreakpointObserver, BreakpointState } from '@angular/cdk/layout';
 import { MediaBreakpoints } from '@shared/models/constants';
 import { AuthUser } from '@shared/models/user.model';
-import { getCurrentAuthState, getCurrentAuthUser } from '@core/auth/auth.selectors';
+import { getCurrentAuthState } from '@core/auth/auth.selectors';
 import { Widget, WidgetConfig, WidgetPosition, widgetTypesData } from '@app/shared/models/widget.models';
 import { environment as env } from '@env/environment';
 import { Authority } from '@shared/models/authority.enum';

ui-ngx/src/app/modules/home/pages/dashboard/dashboard-page.models.ts

@@ -14,17 +14,12 @@
 /// limitations under the License.
 ///
 
-import { DashboardLayoutId, GridSettings, WidgetLayout, Dashboard, WidgetLayouts } from '@app/shared/models/dashboard.models';
+import { Dashboard, DashboardLayoutId, GridSettings, WidgetLayouts } from '@app/shared/models/dashboard.models';
 import { Widget, WidgetPosition } from '@app/shared/models/widget.models';
 import { Timewindow } from '@shared/models/time/time.models';
 import { IAliasController, IStateController } from '@core/api/widget-api.models';
 import { ILayoutController } from './layout/layout.models';
-import {
+import { DashboardContextMenuItem, WidgetContextMenuItem } from '@home/models/dashboard-component.models';
-  DashboardContextMenuItem,
-  WidgetContextMenuItem
-} from '@home/models/dashboard-component.models';
-import { Observable } from 'rxjs';
-import { ChangeDetectorRef } from '@angular/core';
 
 export declare type DashboardPageScope = 'tenant' | 'customer';
 

ui-ngx/src/app/modules/home/pages/dashboard/dashboard-routing.module.ts

@@ -17,14 +17,11 @@
 import { Injectable, NgModule } from '@angular/core';
 import { ActivatedRouteSnapshot, Resolve, RouterModule, Routes } from '@angular/router';
 
-import {EntitiesTableComponent} from '../../components/entity/entities-table.component';
+import { EntitiesTableComponent } from '../../components/entity/entities-table.component';
-import {Authority} from '@shared/models/authority.enum';
+import { Authority } from '@shared/models/authority.enum';
-import {DashboardsTableConfigResolver} from './dashboards-table-config.resolver';
+import { DashboardsTableConfigResolver } from './dashboards-table-config.resolver';
 import { DashboardPageComponent } from '@home/pages/dashboard/dashboard-page.component';
 import { BreadCrumbConfig, BreadCrumbLabelFunction } from '@shared/components/breadcrumb';
-import { widgetTypesBreadcumbLabelFunction } from '@home/pages/widget/widget-library-routing.module';
-import { WidgetsBundle } from '@shared/models/widgets-bundle.model';
-import { WidgetService } from '@core/http/widget.service';
 import { Observable } from 'rxjs';
 import { Dashboard } from '@app/shared/models/dashboard.models';
 import { DashboardService } from '@core/http/dashboard.service';

ui-ngx/src/app/modules/home/pages/dashboard/dashboards-table-config.resolver.ts

@@ -14,9 +14,9 @@
 /// limitations under the License.
 ///
 
-import {Injectable} from '@angular/core';
+import { Injectable } from '@angular/core';
 
-import {ActivatedRouteSnapshot, Resolve, Router} from '@angular/router';
+import { ActivatedRouteSnapshot, Resolve, Router } from '@angular/router';
 import {
   CellActionDescriptor,
   checkBoxCell,
@@ -26,20 +26,20 @@ import {
   GroupActionDescriptor,
   HeaderActionDescriptor
 } from '@home/models/entity/entities-table-config.models';
-import {TranslateService} from '@ngx-translate/core';
+import { TranslateService } from '@ngx-translate/core';
-import {DatePipe} from '@angular/common';
+import { DatePipe } from '@angular/common';
-import {EntityType, entityTypeResources, entityTypeTranslations} from '@shared/models/entity-type.models';
+import { EntityType, entityTypeResources, entityTypeTranslations } from '@shared/models/entity-type.models';
-import {EntityAction} from '@home/models/entity/entity-component.models';
+import { EntityAction } from '@home/models/entity/entity-component.models';
-import {forkJoin, Observable, of} from 'rxjs';
+import { forkJoin, Observable, of } from 'rxjs';
-import {select, Store} from '@ngrx/store';
+import { select, Store } from '@ngrx/store';
-import {selectAuthUser} from '@core/auth/auth.selectors';
+import { selectAuthUser } from '@core/auth/auth.selectors';
-import {map, mergeMap, take, tap} from 'rxjs/operators';
+import { map, mergeMap, take, tap } from 'rxjs/operators';
-import {AppState} from '@core/core.state';
+import { AppState } from '@core/core.state';
-import {Authority} from '@app/shared/models/authority.enum';
+import { Authority } from '@app/shared/models/authority.enum';
-import {CustomerService} from '@core/http/customer.service';
+import { CustomerService } from '@core/http/customer.service';
-import {Customer} from '@app/shared/models/customer.model';
+import { Customer } from '@app/shared/models/customer.model';
 import { MatDialog } from '@angular/material/dialog';
-import {DialogService} from '@core/services/dialog.service';
+import { DialogService } from '@core/services/dialog.service';
 import {
   AddEntitiesToCustomerDialogComponent,
   AddEntitiesToCustomerDialogData
@@ -51,8 +51,8 @@ import {
   isCurrentPublicDashboardCustomer,
   isPublicDashboard
 } from '@app/shared/models/dashboard.models';
-import {DashboardService} from '@app/core/http/dashboard.service';
+import { DashboardService } from '@app/core/http/dashboard.service';
-import {DashboardFormComponent} from '@modules/home/pages/dashboard/dashboard-form.component';
+import { DashboardFormComponent } from '@modules/home/pages/dashboard/dashboard-form.component';
 import {
   ManageDashboardCustomersActionType,
   ManageDashboardCustomersDialogComponent,
@@ -142,7 +142,7 @@ export class DashboardsTableConfigResolver implements Resolve<EntityTableConfig<
 
   configureColumns(dashboardScope: string): Array<EntityTableColumn<DashboardInfo>> {
     const columns: Array<EntityTableColumn<DashboardInfo>> = [
-      new DateEntityTableColumn<DashboardInfo>('createdTime', 'dashboard.created-time', this.datePipe, '150px'),
+      new DateEntityTableColumn<DashboardInfo>('createdTime', 'common.created-time', this.datePipe, '150px'),
       new EntityTableColumn<DashboardInfo>('title', 'dashboard.title', '50%')
     ];
     if (dashboardScope === 'tenant') {

ui-ngx/src/app/modules/home/pages/device/device-routing.module.ts

@@ -14,12 +14,12 @@
 /// limitations under the License.
 ///
 
-import {NgModule} from '@angular/core';
+import { NgModule } from '@angular/core';
-import {RouterModule, Routes} from '@angular/router';
+import { RouterModule, Routes } from '@angular/router';
 
-import {EntitiesTableComponent} from '../../components/entity/entities-table.component';
+import { EntitiesTableComponent } from '../../components/entity/entities-table.component';
-import {Authority} from '@shared/models/authority.enum';
+import { Authority } from '@shared/models/authority.enum';
-import {DevicesTableConfigResolver} from '@modules/home/pages/device/devices-table-config.resolver';
+import { DevicesTableConfigResolver } from '@modules/home/pages/device/devices-table-config.resolver';
 
 const routes: Routes = [
   {

ui-ngx/src/app/modules/home/pages/device/devices-table-config.resolver.ts

@@ -149,7 +149,7 @@ export class DevicesTableConfigResolver implements Resolve<EntityTableConfig<Dev
 
   configureColumns(deviceScope: string): Array<EntityTableColumn<DeviceInfo>> {
     const columns: Array<EntityTableColumn<DeviceInfo>> = [
-      new DateEntityTableColumn<DeviceInfo>('createdTime', 'device.created-time', this.datePipe, '150px'),
+      new DateEntityTableColumn<DeviceInfo>('createdTime', 'common.created-time', this.datePipe, '150px'),
       new EntityTableColumn<DeviceInfo>('name', 'device.name', '25%'),
       new EntityTableColumn<DeviceInfo>('type', 'device.device-type', '25%'),
       new EntityTableColumn<DeviceInfo>('label', 'device.label', '25%')

ui-ngx/src/app/modules/home/pages/entity-view/entity-view-routing.module.ts

@@ -14,12 +14,12 @@
 /// limitations under the License.
 ///
 
-import {NgModule} from '@angular/core';
+import { NgModule } from '@angular/core';
-import {RouterModule, Routes} from '@angular/router';
+import { RouterModule, Routes } from '@angular/router';
 
-import {EntitiesTableComponent} from '../../components/entity/entities-table.component';
+import { EntitiesTableComponent } from '../../components/entity/entities-table.component';
-import {Authority} from '@shared/models/authority.enum';
+import { Authority } from '@shared/models/authority.enum';
-import {EntityViewsTableConfigResolver} from '@modules/home/pages/entity-view/entity-views-table-config.resolver';
+import { EntityViewsTableConfigResolver } from '@modules/home/pages/entity-view/entity-views-table-config.resolver';
 
 const routes: Routes = [
   {

ui-ngx/src/app/modules/home/pages/entity-view/entity-view-table-header.component.ts

@@ -14,12 +14,12 @@
 /// limitations under the License.
 ///
 
-import {Component} from '@angular/core';
+import { Component } from '@angular/core';
-import {Store} from '@ngrx/store';
+import { Store } from '@ngrx/store';
-import {AppState} from '@core/core.state';
+import { AppState } from '@core/core.state';
-import {EntityTableHeaderComponent} from '../../components/entity/entity-table-header.component';
+import { EntityTableHeaderComponent } from '../../components/entity/entity-table-header.component';
-import {EntityType} from '@shared/models/entity-type.models';
+import { EntityType } from '@shared/models/entity-type.models';
-import {EntityViewInfo} from '@app/shared/models/entity-view.models';
+import { EntityViewInfo } from '@app/shared/models/entity-view.models';
 
 @Component({
   selector: 'tb-entity-view-table-header',

ui-ngx/src/app/modules/home/pages/entity-view/entity-view.component.ts

@@ -14,20 +14,19 @@
 /// limitations under the License.
 ///
 
-import {Component} from '@angular/core';
+import { Component } from '@angular/core';
-import {Store} from '@ngrx/store';
+import { Store } from '@ngrx/store';
-import {AppState} from '@core/core.state';
+import { AppState } from '@core/core.state';
-import {EntityComponent} from '../../components/entity/entity.component';
+import { EntityComponent } from '../../components/entity/entity.component';
-import {FormBuilder, FormGroup, Validators} from '@angular/forms';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
-import {EntityType} from '@shared/models/entity-type.models';
+import { EntityType } from '@shared/models/entity-type.models';
-import {NULL_UUID} from '@shared/models/id/has-uuid';
+import { NULL_UUID } from '@shared/models/id/has-uuid';
-import {ActionNotificationShow} from '@core/notification/notification.actions';
+import { ActionNotificationShow } from '@core/notification/notification.actions';
-import {TranslateService} from '@ngx-translate/core';
+import { TranslateService } from '@ngx-translate/core';
-import {EntityViewInfo} from '@app/shared/models/entity-view.models';
+import { EntityViewInfo } from '@app/shared/models/entity-view.models';
-import {Observable} from 'rxjs';
+import { Observable } from 'rxjs';
-import {map} from 'rxjs/operators';
+import { DataKeyType } from '@shared/models/telemetry/telemetry.models';
-import {DataKeyType} from '@shared/models/telemetry/telemetry.models';
+import { EntityId } from '@app/shared/models/id/entity-id';
-import {EntityId} from '@app/shared/models/id/entity-id';
 
 @Component({
   selector: 'tb-entity-view',

ui-ngx/src/app/modules/home/pages/entity-view/entity-view.module.ts

@@ -14,14 +14,14 @@
 /// limitations under the License.
 ///
 
-import {NgModule} from '@angular/core';
+import { NgModule } from '@angular/core';
-import {CommonModule} from '@angular/common';
+import { CommonModule } from '@angular/common';
-import {SharedModule} from '@shared/shared.module';
+import { SharedModule } from '@shared/shared.module';
-import {HomeDialogsModule} from '../../dialogs/home-dialogs.module';
+import { HomeDialogsModule } from '../../dialogs/home-dialogs.module';
-import {EntityViewComponent} from '@modules/home/pages/entity-view/entity-view.component';
+import { EntityViewComponent } from '@modules/home/pages/entity-view/entity-view.component';
-import {EntityViewTableHeaderComponent} from './entity-view-table-header.component';
+import { EntityViewTableHeaderComponent } from './entity-view-table-header.component';
-import {EntityViewRoutingModule} from './entity-view-routing.module';
+import { EntityViewRoutingModule } from './entity-view-routing.module';
-import {HomeComponentsModule} from '@modules/home/components/home-components.module';
+import { HomeComponentsModule } from '@modules/home/components/home-components.module';
 import { EntityViewTabsComponent } from '@home/pages/entity-view/entity-view-tabs.component';
 
 @NgModule({

ui-ngx/src/app/modules/home/pages/entity-view/entity-views-table-config.resolver.ts

@@ -14,9 +14,9 @@
 /// limitations under the License.
 ///
 
-import {Injectable} from '@angular/core';
+import { Injectable } from '@angular/core';
 
-import {ActivatedRouteSnapshot, Resolve, Router} from '@angular/router';
+import { ActivatedRouteSnapshot, Resolve, Router } from '@angular/router';
 import {
   CellActionDescriptor,
   checkBoxCell,
@@ -26,22 +26,22 @@ import {
   GroupActionDescriptor,
   HeaderActionDescriptor
 } from '@home/models/entity/entities-table-config.models';
-import {TranslateService} from '@ngx-translate/core';
+import { TranslateService } from '@ngx-translate/core';
-import {DatePipe} from '@angular/common';
+import { DatePipe } from '@angular/common';
-import {EntityType, entityTypeResources, entityTypeTranslations} from '@shared/models/entity-type.models';
+import { EntityType, entityTypeResources, entityTypeTranslations } from '@shared/models/entity-type.models';
-import {EntityAction} from '@home/models/entity/entity-component.models';
+import { EntityAction } from '@home/models/entity/entity-component.models';
-import {forkJoin, Observable, of} from 'rxjs';
+import { forkJoin, Observable, of } from 'rxjs';
-import {select, Store} from '@ngrx/store';
+import { select, Store } from '@ngrx/store';
-import {selectAuthUser} from '@core/auth/auth.selectors';
+import { selectAuthUser } from '@core/auth/auth.selectors';
-import {map, mergeMap, take, tap} from 'rxjs/operators';
+import { map, mergeMap, take, tap } from 'rxjs/operators';
-import {AppState} from '@core/core.state';
+import { AppState } from '@core/core.state';
-import {Authority} from '@app/shared/models/authority.enum';
+import { Authority } from '@app/shared/models/authority.enum';
-import {CustomerService} from '@core/http/customer.service';
+import { CustomerService } from '@core/http/customer.service';
-import {Customer} from '@app/shared/models/customer.model';
+import { Customer } from '@app/shared/models/customer.model';
-import {NULL_UUID} from '@shared/models/id/has-uuid';
+import { NULL_UUID } from '@shared/models/id/has-uuid';
-import {BroadcastService} from '@core/services/broadcast.service';
+import { BroadcastService } from '@core/services/broadcast.service';
 import { MatDialog } from '@angular/material/dialog';
-import {DialogService} from '@core/services/dialog.service';
+import { DialogService } from '@core/services/dialog.service';
 import {
   AssignToCustomerDialogComponent,
   AssignToCustomerDialogData
@@ -50,11 +50,11 @@ import {
   AddEntitiesToCustomerDialogComponent,
   AddEntitiesToCustomerDialogData
 } from '../../dialogs/add-entities-to-customer-dialog.component';
-import {EntityView, EntityViewInfo} from '@app/shared/models/entity-view.models';
+import { EntityView, EntityViewInfo } from '@app/shared/models/entity-view.models';
-import {EntityViewService} from '@core/http/entity-view.service';
+import { EntityViewService } from '@core/http/entity-view.service';
-import {EntityViewComponent} from '@modules/home/pages/entity-view/entity-view.component';
+import { EntityViewComponent } from '@modules/home/pages/entity-view/entity-view.component';
-import {EntityViewTableHeaderComponent} from '@modules/home/pages/entity-view/entity-view-table-header.component';
+import { EntityViewTableHeaderComponent } from '@modules/home/pages/entity-view/entity-view-table-header.component';
-import {EntityViewId} from '@shared/models/id/entity-view-id';
+import { EntityViewId } from '@shared/models/id/entity-view-id';
 import { EntityViewTabsComponent } from '@home/pages/entity-view/entity-view-tabs.component';
 
 @Injectable()
@@ -146,7 +146,7 @@ export class EntityViewsTableConfigResolver implements Resolve<EntityTableConfig
 
   configureColumns(entityViewScope: string): Array<EntityTableColumn<EntityViewInfo>> {
     const columns: Array<EntityTableColumn<EntityViewInfo>> = [
-      new DateEntityTableColumn<EntityViewInfo>('createdTime', 'entity-view.created-time', this.datePipe, '150px'),
+      new DateEntityTableColumn<EntityViewInfo>('createdTime', 'common.created-time', this.datePipe, '150px'),
       new EntityTableColumn<EntityViewInfo>('name', 'entity-view.name', '33%'),
       new EntityTableColumn<EntityViewInfo>('type', 'entity-view.entity-view-type', '33%'),
     ];

ui-ngx/src/app/modules/home/pages/profile/change-password-dialog.component.html

@@ -19,7 +19,7 @@
   <mat-toolbar fxLayout="row" color="primary">
     <h2 translate>profile.change-password</h2>
     <span fxFlex></span>
-    <button mat-button mat-icon-button
+    <button mat-icon-button
             [mat-dialog-close]="false"
             type="button">
       <mat-icon class="material-icons">close</mat-icon>
@@ -45,15 +45,13 @@
       <mat-icon class="material-icons" matPrefix>lock</mat-icon>
     </mat-form-field>
   </div>
-  <div mat-dialog-actions fxLayout="row">
+  <div mat-dialog-actions fxLayout="row" fxLayoutAlign="end center">
-    <span fxFlex></span>
+    <button mat-raised-button color="primary"
-    <button mat-button mat-raised-button color="primary"
             type="submit"
             [disabled]="(isLoading$ | async) || changePasswordForm.invalid">
       {{ 'profile.change-password' | translate }}
     </button>
     <button mat-button color="primary"
-            style="margin-right: 20px;"
             type="button"
             [disabled]="(isLoading$ | async)"
             [mat-dialog-close]="false" cdkFocusInitial>

ui-ngx/src/app/modules/home/pages/profile/change-password-dialog.component.ts

@@ -16,10 +16,9 @@
 
 import { Component, OnInit } from '@angular/core';
 import { MatDialogRef } from '@angular/material/dialog';
-import { PageComponent } from '@shared/components/page.component';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
-import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { FormBuilder, FormGroup } from '@angular/forms';
 import { ActionNotificationShow } from '@core/notification/notification.actions';
 import { TranslateService } from '@ngx-translate/core';
 import { AuthService } from '@core/auth/auth.service';

ui-ngx/src/app/modules/home/pages/profile/profile-routing.module.ts

@@ -14,18 +14,18 @@
 /// limitations under the License.
 ///
 
-import {Injectable, NgModule} from '@angular/core';
+import { Injectable, NgModule } from '@angular/core';
-import {Resolve, RouterModule, Routes} from '@angular/router';
+import { Resolve, RouterModule, Routes } from '@angular/router';
 
-import {ProfileComponent} from './profile.component';
+import { ProfileComponent } from './profile.component';
-import {ConfirmOnExitGuard} from '@core/guards/confirm-on-exit.guard';
+import { ConfirmOnExitGuard } from '@core/guards/confirm-on-exit.guard';
-import {Authority} from '@shared/models/authority.enum';
+import { Authority } from '@shared/models/authority.enum';
-import {User} from '@shared/models/user.model';
+import { User } from '@shared/models/user.model';
-import {Store} from '@ngrx/store';
+import { Store } from '@ngrx/store';
-import {AppState} from '@core/core.state';
+import { AppState } from '@core/core.state';
-import {UserService} from '@core/http/user.service';
+import { UserService } from '@core/http/user.service';
-import {getCurrentAuthUser} from '@core/auth/auth.selectors';
+import { getCurrentAuthUser } from '@core/auth/auth.selectors';
-import {Observable} from 'rxjs';
+import { Observable } from 'rxjs';
 
 @Injectable()
 export class UserProfileResolver implements Resolve<User> {

ui-ngx/src/app/modules/home/pages/profile/profile.component.html

@@ -18,7 +18,7 @@
 <div>
   <mat-card class="profile-card">
     <mat-card-title>
-      <div fxLayout="row">
+      <div fxLayout="row" fxLayout.xs="column" fxLayoutGap.xs="8px">
         <div fxFlex fxLayout="column">
           <span class="mat-headline" translate>profile.profile</span>
           <span class="profile-email" style='opacity: 0.7;'>{{ profile ? profile.get('email').value : '' }}</span>

ui-ngx/src/app/modules/home/pages/profile/profile.component.ts

@@ -14,24 +14,24 @@
 /// limitations under the License.
 ///
 
-import {Component, OnInit} from '@angular/core';
+import { Component, OnInit } from '@angular/core';
-import {UserService} from '@core/http/user.service';
+import { UserService } from '@core/http/user.service';
-import {User} from '@shared/models/user.model';
+import { User } from '@shared/models/user.model';
-import {Authority} from '@shared/models/authority.enum';
+import { Authority } from '@shared/models/authority.enum';
-import {PageComponent} from '@shared/components/page.component';
+import { PageComponent } from '@shared/components/page.component';
-import {Store} from '@ngrx/store';
+import { Store } from '@ngrx/store';
-import {AppState} from '@core/core.state';
+import { AppState } from '@core/core.state';
-import {FormBuilder, FormGroup, Validators} from '@angular/forms';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
-import {HasConfirmForm} from '@core/guards/confirm-on-exit.guard';
+import { HasConfirmForm } from '@core/guards/confirm-on-exit.guard';
-import {ActionAuthUpdateUserDetails} from '@core/auth/auth.actions';
+import { ActionAuthUpdateUserDetails } from '@core/auth/auth.actions';
-import {environment as env} from '@env/environment';
+import { environment as env } from '@env/environment';
-import {TranslateService} from '@ngx-translate/core';
+import { TranslateService } from '@ngx-translate/core';
-import {ActionSettingsChangeLanguage} from '@core/settings/settings.actions';
+import { ActionSettingsChangeLanguage } from '@core/settings/settings.actions';
-import {ChangePasswordDialogComponent} from '@modules/home/pages/profile/change-password-dialog.component';
+import { ChangePasswordDialogComponent } from '@modules/home/pages/profile/change-password-dialog.component';
 import { MatDialog } from '@angular/material/dialog';
-import {DialogService} from '@core/services/dialog.service';
+import { DialogService } from '@core/services/dialog.service';
-import {AuthService} from '@core/auth/auth.service';
+import { AuthService } from '@core/auth/auth.service';
-import {ActivatedRoute} from '@angular/router';
+import { ActivatedRoute } from '@angular/router';
 
 @Component({
   selector: 'tb-profile',

ui-ngx/src/app/modules/home/pages/rulechain/rulechain.component.ts

@@ -14,17 +14,14 @@
 /// limitations under the License.
 ///
 
-import {Component} from '@angular/core';
+import { Component } from '@angular/core';
-import {Store} from '@ngrx/store';
+import { Store } from '@ngrx/store';
-import {AppState} from '@core/core.state';
+import { AppState } from '@core/core.state';
-import {EntityComponent} from '../../components/entity/entity.component';
+import { EntityComponent } from '../../components/entity/entity.component';
-import {FormBuilder, FormGroup, Validators} from '@angular/forms';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
-import {EntityType} from '@shared/models/entity-type.models';
+import { ActionNotificationShow } from '@core/notification/notification.actions';
-import {NULL_UUID} from '@shared/models/id/has-uuid';
+import { TranslateService } from '@ngx-translate/core';
-import {ActionNotificationShow} from '@core/notification/notification.actions';
+import { RuleChain } from '@shared/models/rule-chain.models';
-import {TranslateService} from '@ngx-translate/core';
-import {AssetInfo} from '@app/shared/models/asset.models';
-import {RuleChain} from '@shared/models/rule-chain.models';
 
 @Component({
   selector: 'tb-rulechain',

ui-ngx/src/app/modules/home/pages/rulechain/rulechain.module.ts

@@ -14,14 +14,18 @@
 /// limitations under the License.
 ///
 
-import {NgModule} from '@angular/core';
+import { NgModule } from '@angular/core';
-import {CommonModule} from '@angular/common';
+import { CommonModule } from '@angular/common';
-import {SharedModule} from '@shared/shared.module';
+import { SharedModule } from '@shared/shared.module';
-import {RuleChainComponent} from '@modules/home/pages/rulechain/rulechain.component';
+import { RuleChainComponent } from '@modules/home/pages/rulechain/rulechain.component';
-import {RuleChainRoutingModule} from '@modules/home/pages/rulechain/rulechain-routing.module';
+import { RuleChainRoutingModule } from '@modules/home/pages/rulechain/rulechain-routing.module';
-import {HomeComponentsModule} from '@modules/home/components/home-components.module';
+import { HomeComponentsModule } from '@modules/home/components/home-components.module';
 import { RuleChainTabsComponent } from '@home/pages/rulechain/rulechain-tabs.component';
-import { RuleChainPageComponent, AddRuleNodeLinkDialogComponent, AddRuleNodeDialogComponent } from './rulechain-page.component';
+import {
+  AddRuleNodeDialogComponent,
+  AddRuleNodeLinkDialogComponent,
+  RuleChainPageComponent
+} from './rulechain-page.component';
 import { RuleNodeComponent } from '@home/pages/rulechain/rulenode.component';
 import { FC_NODE_COMPONENT_CONFIG } from 'ngx-flowchart/dist/ngx-flowchart';
 import { RuleNodeDetailsComponent } from './rule-node-details.component';

ui-ngx/src/app/modules/home/pages/rulechain/rulechains-table-config.resolver.ts

@@ -14,23 +14,23 @@
 /// limitations under the License.
 ///
 
-import {Injectable} from '@angular/core';
+import { Injectable } from '@angular/core';
 
-import {Resolve, Router} from '@angular/router';
+import { Resolve, Router } from '@angular/router';
 import {
   checkBoxCell,
   DateEntityTableColumn,
   EntityTableColumn,
   EntityTableConfig
 } from '@home/models/entity/entities-table-config.models';
-import {TranslateService} from '@ngx-translate/core';
+import { TranslateService } from '@ngx-translate/core';
-import {DatePipe} from '@angular/common';
+import { DatePipe } from '@angular/common';
-import {EntityType, entityTypeResources, entityTypeTranslations} from '@shared/models/entity-type.models';
+import { EntityType, entityTypeResources, entityTypeTranslations } from '@shared/models/entity-type.models';
-import {EntityAction} from '@home/models/entity/entity-component.models';
+import { EntityAction } from '@home/models/entity/entity-component.models';
-import {RuleChain} from '@shared/models/rule-chain.models';
+import { RuleChain } from '@shared/models/rule-chain.models';
-import {RuleChainService} from '@core/http/rule-chain.service';
+import { RuleChainService } from '@core/http/rule-chain.service';
-import {RuleChainComponent} from '@modules/home/pages/rulechain/rulechain.component';
+import { RuleChainComponent } from '@modules/home/pages/rulechain/rulechain.component';
-import {DialogService} from '@core/services/dialog.service';
+import { DialogService } from '@core/services/dialog.service';
 import { RuleChainTabsComponent } from '@home/pages/rulechain/rulechain-tabs.component';
 import { ImportExportService } from '@home/components/import-export/import-export.service';
 import { ItemBufferService } from '@core/services/item-buffer.service';
@@ -55,7 +55,7 @@ export class RuleChainsTableConfigResolver implements Resolve<EntityTableConfig<
     this.config.entityResources = entityTypeResources.get(EntityType.RULE_CHAIN);
 
     this.config.columns.push(
-      new DateEntityTableColumn<RuleChain>('createdTime', 'rulechain.created-time', this.datePipe, '150px'),
+      new DateEntityTableColumn<RuleChain>('createdTime', 'common.created-time', this.datePipe, '150px'),
       new EntityTableColumn<RuleChain>('name', 'rulechain.name', '100%'),
       new EntityTableColumn<RuleChain>('root', 'rulechain.root', '60px',
         entity => {

ui-ngx/src/app/modules/home/pages/tenant/tenant-routing.module.ts

@@ -14,21 +14,13 @@
 /// limitations under the License.
 ///
 
-import { Injectable, NgModule } from '@angular/core';
+import { NgModule } from '@angular/core';
-import { Resolve, RouterModule, Routes } from '@angular/router';
+import { RouterModule, Routes } from '@angular/router';
 
 import { EntitiesTableComponent } from '../../components/entity/entities-table.component';
 import { Authority } from '@shared/models/authority.enum';
 import { TenantsTableConfigResolver } from '@modules/home/pages/tenant/tenants-table-config.resolver';
-import { ProfileComponent } from '@modules/home/pages/profile/profile.component';
+import { UsersTableConfigResolver } from '../user/users-table-config.resolver';
-import { ConfirmOnExitGuard } from '@core/guards/confirm-on-exit.guard';
-import { Customer } from '@shared/models/customer.model';
-import { Store } from '@ngrx/store';
-import { AppState } from '@core/core.state';
-import { forkJoin, Observable, throwError } from 'rxjs';
-import { getCurrentAuthUser } from '@core/auth/auth.selectors';
-import { catchError, finalize, map, tap } from 'rxjs/operators';
-import {UsersTableConfigResolver} from '../user/users-table-config.resolver';
 
 const routes: Routes = [
   {

ui-ngx/src/app/modules/home/pages/tenant/tenants-table-config.resolver.ts

@@ -54,7 +54,7 @@ export class TenantsTableConfigResolver implements Resolve<EntityTableConfig<Ten
     this.config.entityResources = entityTypeResources.get(EntityType.TENANT);
 
     this.config.columns.push(
-      new DateEntityTableColumn<Tenant>('createdTime', 'tenant.created-time', this.datePipe, '150px'),
+      new DateEntityTableColumn<Tenant>('createdTime', 'common.created-time', this.datePipe, '150px'),
       new EntityTableColumn<Tenant>('title', 'tenant.title', '25%'),
       new EntityTableColumn<Tenant>('email', 'contact.email', '25%'),
       new EntityTableColumn<Tenant>('country', 'contact.country', '25%'),

ui-ngx/src/app/modules/home/pages/user/user-routing.module.ts

@@ -15,7 +15,7 @@
 ///
 
 import { NgModule } from '@angular/core';
-import { RouterModule, Routes } from '@angular/router';
+import { RouterModule } from '@angular/router';
 import { UsersTableConfigResolver } from '@modules/home/pages/user/users-table-config.resolver';
 
 @NgModule({

ui-ngx/src/app/modules/home/pages/user/users-table-config.resolver.ts

@@ -24,25 +24,18 @@ import {
 } from '@home/models/entity/entities-table-config.models';
 import { TranslateService } from '@ngx-translate/core';
 import { DatePipe } from '@angular/common';
-import {
+import { EntityType, entityTypeResources, entityTypeTranslations } from '@shared/models/entity-type.models';
-  EntityType,
-  entityTypeResources,
-  entityTypeTranslations
-} from '@shared/models/entity-type.models';
 import { User } from '@shared/models/user.model';
 import { UserService } from '@core/http/user.service';
 import { UserComponent } from '@modules/home/pages/user/user.component';
 import { CustomerService } from '@core/http/customer.service';
 import { map, mergeMap, take, tap } from 'rxjs/operators';
-import { forkJoin, noop, Observable, of } from 'rxjs';
+import { Observable } from 'rxjs';
 import { Authority } from '@shared/models/authority.enum';
 import { CustomerId } from '@shared/models/id/customer-id';
 import { MatDialog } from '@angular/material/dialog';
 import { EntityAction } from '@home/models/entity/entity-component.models';
-import {
+import { AddUserDialogComponent, AddUserDialogData } from '@modules/home/pages/user/add-user-dialog.component';
-  AddUserDialogComponent,
-  AddUserDialogData
-} from '@modules/home/pages/user/add-user-dialog.component';
 import { AuthState } from '@core/auth/auth.models';
 import { select, Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
@@ -54,9 +47,8 @@ import {
 } from '@modules/home/pages/user/activation-link-dialog.component';
 import { ActionNotificationShow } from '@core/notification/notification.actions';
 import { NULL_UUID } from '@shared/models/id/has-uuid';
-import { Customer } from '@shared/models/customer.model';
+import { TenantService } from '@app/core/http/tenant.service';
-import {TenantService} from '@app/core/http/tenant.service';
+import { TenantId } from '@app/shared/models/id/tenant-id';
-import {TenantId} from '@app/shared/models/id/tenant-id';
 import { UserTabsComponent } from '@home/pages/user/user-tabs.component';
 
 export interface UsersTableRouteData {
@@ -89,7 +81,7 @@ export class UsersTableConfigResolver implements Resolve<EntityTableConfig<User>
     this.config.entityResources = entityTypeResources.get(EntityType.USER);
 
     this.config.columns.push(
-      new DateEntityTableColumn<User>('createdTime', 'user.created-time', this.datePipe, '150px'),
+      new DateEntityTableColumn<User>('createdTime', 'common.created-time', this.datePipe, '150px'),
       new EntityTableColumn<User>('firstName', 'user.first-name', '33%'),
       new EntityTableColumn<User>('lastName', 'user.last-name', '33%'),
       new EntityTableColumn<User>('email', 'user.email', '33%')

ui-ngx/src/app/modules/home/pages/widget/widgets-bundles-table-config.resolver.ts

@@ -14,28 +14,28 @@
 /// limitations under the License.
 ///
 
-import {Injectable} from '@angular/core';
+import { Injectable } from '@angular/core';
 
-import {Resolve, Router} from '@angular/router';
+import { Resolve, Router } from '@angular/router';
 import {
   checkBoxCell,
   DateEntityTableColumn,
   EntityTableColumn,
   EntityTableConfig
 } from '@home/models/entity/entities-table-config.models';
-import {TranslateService} from '@ngx-translate/core';
+import { TranslateService } from '@ngx-translate/core';
-import {DatePipe} from '@angular/common';
+import { DatePipe } from '@angular/common';
-import {EntityType, entityTypeResources, entityTypeTranslations} from '@shared/models/entity-type.models';
+import { EntityType, entityTypeResources, entityTypeTranslations } from '@shared/models/entity-type.models';
-import {EntityAction} from '@home/models/entity/entity-component.models';
+import { EntityAction } from '@home/models/entity/entity-component.models';
-import {WidgetsBundle} from '@shared/models/widgets-bundle.model';
+import { WidgetsBundle } from '@shared/models/widgets-bundle.model';
-import {WidgetService} from '@app/core/http/widget.service';
+import { WidgetService } from '@app/core/http/widget.service';
-import {WidgetsBundleComponent} from '@modules/home/pages/widget/widgets-bundle.component';
+import { WidgetsBundleComponent } from '@modules/home/pages/widget/widgets-bundle.component';
-import {NULL_UUID} from '@shared/models/id/has-uuid';
+import { NULL_UUID } from '@shared/models/id/has-uuid';
-import {Store} from '@ngrx/store';
+import { Store } from '@ngrx/store';
-import {AppState} from '@core/core.state';
+import { AppState } from '@core/core.state';
-import {getCurrentAuthUser} from '@app/core/auth/auth.selectors';
+import { getCurrentAuthUser } from '@app/core/auth/auth.selectors';
-import {Authority} from '@shared/models/authority.enum';
+import { Authority } from '@shared/models/authority.enum';
-import {DialogService} from '@core/services/dialog.service';
+import { DialogService } from '@core/services/dialog.service';
 import { ImportExportService } from '@home/components/import-export/import-export.service';
 
 @Injectable()
@@ -57,7 +57,7 @@ export class WidgetsBundlesTableConfigResolver implements Resolve<EntityTableCon
     this.config.entityResources = entityTypeResources.get(EntityType.WIDGETS_BUNDLE);
 
     this.config.columns.push(
-      new DateEntityTableColumn<WidgetsBundle>('createdTime', 'widgets-bundle.created-time', this.datePipe, '150px'),
+      new DateEntityTableColumn<WidgetsBundle>('createdTime', 'common.created-time', this.datePipe, '150px'),
       new EntityTableColumn<WidgetsBundle>('title', 'widgets-bundle.title', '100%'),
       new EntityTableColumn<WidgetsBundle>('tenantId', 'widgets-bundle.system', '60px',
         entity => {

ui-ngx/src/app/shared/components/breadcrumb.component.html

@@ -19,7 +19,7 @@
   <h1 fxFlex fxHide.gt-sm *ngIf="lastBreadcrumb$ | async; let breadcrumb">
     {{ breadcrumb.ignoreTranslate ? (breadcrumb.labelFunction ? breadcrumb.labelFunction() : breadcrumb.label) : (breadcrumb.label | translate) }}
   </h1>
-  <span fxHide.xs fxHide.sm *ngFor="let breadcrumb of breadcrumbs$ | async; last as isLast;" [ngSwitch]="isLast">
+  <span fxHide.lt-md fxLayout="row" *ngFor="let breadcrumb of breadcrumbs$ | async; last as isLast;" [ngSwitch]="isLast">
 	    <a *ngSwitchCase="false" [routerLink]="breadcrumb.link" [queryParams]="breadcrumb.queryParams">
         <mat-icon *ngIf="breadcrumb.isMdiIcon" [svgIcon]="breadcrumb.icon">
 	    	</mat-icon>

ui-ngx/src/app/shared/components/breadcrumb.component.scss

@@ -14,28 +14,24 @@
  * limitations under the License.
  */
 :host {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
   min-width: 0;
-  flex: 1;
 
   .tb-breadcrumb {
-    font-size: 18px !important;
+    font-size: 18px;
-    font-weight: 400 !important;
+    font-weight: 400;
     overflow: hidden;
 
     h1,
     a,
-    span {
+    span:not(.divider) {
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
     }
 
     h1 {
-      font-size: 24px !important;
+      font-size: 24px;
-      font-weight: 400 !important;
+      font-weight: 400;
     }
 
     a {
@@ -44,6 +40,7 @@
       transition: opacity .35s;
       color: inherit;
       text-decoration: none;
+      outline: none;
     }
 
     a:hover,
@@ -54,7 +51,7 @@
     }
 
     .divider {
-      padding: 0 30px;
+      padding: 0 20px;
     }
   }
 }

ui-ngx/src/app/shared/components/user-menu.component.html

@@ -16,7 +16,7 @@
 
 -->
 <section fxLayout="row">
-  <div fxHide.xs fxHide.sm fxHide.md *ngIf="displayUserInfo" class="tb-user-info" fxLayout="row">
+  <div fxHide.lt-lg *ngIf="displayUserInfo" class="tb-user-info" fxLayout="row">
     <mat-icon class="material-icons tb-mini-avatar">account_circle</mat-icon>
     <div fxLayout="column" fxLayoutAlign="center">
       <span *ngIf="userDisplayName$ | async; let userDisplayName" class="tb-user-display-name">{{ userDisplayName }}</span>

ui-ngx/src/app/shared/components/user-menu.component.scss

@@ -18,7 +18,6 @@
     line-height: 1.5;
 
     span {
-      text-align: left;
       text-transform: none;
     }
 
@@ -42,6 +41,7 @@
     height: 36px;
     margin: auto 8px;
     font-size: 36px;
+    cursor: default;
   }
 }
 

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

@@ -336,7 +336,8 @@
         "password": "Heslo",
         "enter-username": "Zadejte uživatelské jméno",
         "enter-password": "Zadejte heslo",
-        "enter-search": "Zadejte hledaný řetězec"
+        "enter-search": "Zadejte hledaný řetězec",
+        "created-time": "Datum vytvoření"
     },
     "content-type": {
         "json": "JSON",

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

@@ -360,7 +360,8 @@
     "password": "Passwort",
     "enter-username": "Benutzername eingeben",
     "enter-password": "Passwort eingeben",
-    "enter-search": "Suche eingeben"
+    "enter-search": "Suche eingeben",
+    "created-time": "Erstellungszeit"
   },
   "content-type": {
     "json": "Json",

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

@@ -378,7 +378,8 @@
     "password": "Κωδικός πρόσβασης",
     "enter-username": "Εισάγετε Όνομα χρήστη",
     "enter-password": "Εισάγετε Κωδικό πρόσβασης",
-    "enter-search": "Αναζήτηση"
+    "enter-search": "Αναζήτηση",
+    "created-time": "Δημιουργήθηκε"
   },
   "converter": {
     "converter": "Μετατροπέας δεδομένων",

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

@@ -380,7 +380,8 @@
         "password": "Password",
         "enter-username": "Enter username",
         "enter-password": "Enter password",
-        "enter-search": "Enter search"
+        "enter-search": "Enter search",
+        "created-time": "Created time"
     },
     "content-type": {
         "json": "Json",
@@ -421,7 +422,6 @@
         "manage-assets": "Manage assets",
         "manage-devices": "Manage devices",
         "manage-dashboards": "Manage dashboards",
-        "created-time": "Created time",
         "title": "Title",
         "title-required": "Title is required.",
         "description": "Description",
@@ -466,7 +466,6 @@
         "no-dashboards-text": "No dashboards found",
         "no-widgets": "No widgets configured",
         "add-widget": "Add new widget",
-        "created-time": "Created time",
         "title": "Title",
         "select-widget-title": "Select widget",
         "select-widget-subtitle": "List of available widget types",
@@ -709,7 +708,6 @@
         "no-device-types-matching": "No device types matching '{{entitySubtype}}' were found.",
         "device-type-list-empty": "No device types selected.",
         "device-types": "Device types",
-        "created-time": "Created time",
         "name": "Name",
         "name-required": "Name is required.",
         "description": "Description",
@@ -1416,7 +1414,6 @@
         "rulechains": "Rule chains",
         "root": "Root",
         "delete": "Delete rule chain",
-        "created-time": "Created time",
         "name": "Name",
         "name-required": "Name is required.",
         "description": "Description",
@@ -1532,7 +1529,6 @@
         "delete-tenants-title": "Are you sure you want to delete { count, plural, 1 {1 tenant} other {# tenants} }?",
         "delete-tenants-action-title": "Delete { count, plural, 1 {1 tenant} other {# tenants} }",
         "delete-tenants-text": "Be careful, after the confirmation all selected tenants will be removed and all related data will become unrecoverable.",
-        "created-time": "Created time",
         "title": "Title",
         "title-required": "Title is required.",
         "description": "Description",
@@ -1593,7 +1589,6 @@
         "delete-users-text": "Be careful, after the confirmation all selected users will be removed and all related data will become unrecoverable.",
         "activation-email-sent-message": "Activation email was successfully sent!",
         "resend-activation": "Resend activation",
-        "created-time": "Created time",
         "email": "Email",
         "email-required": "Email is required.",
         "invalid-email-format": "Invalid email format.",
@@ -1715,7 +1710,6 @@
         "widgets-bundles": "Widgets Bundles",
         "add": "Add Widgets Bundle",
         "delete": "Delete widgets bundle",
-        "created-time": "Created time",
         "title": "Title",
         "title-required": "Title is required.",
         "add-widgets-bundle-text": "Add new widgets bundle",

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

@@ -364,7 +364,8 @@
         "password": "Contraseña",
         "enter-username": "Introduzca nombre de usuario",
         "enter-password": "Introduzca contraseña",
-        "enter-search": "Introduzca búsqueda"
+        "enter-search": "Introduzca búsqueda",
+        "created-time": "Tiempo de creación"
     },
     "content-type": {
         "json": "Json",

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

@@ -48,7 +48,7 @@
         "paste-reference": "رونوشت مرجع",
         "import": "وارد کردن",
         "export": "صدور",
-        "share-via": "{{provider}} اشتراک گذاري از طريق" 
+        "share-via": "{{provider}} اشتراک گذاري از طريق"
 	},
     "aggregation": {
         "aggregation": "تجميع",
@@ -336,7 +336,8 @@
         "password": "رمز عبور",
         "enter-username": "وارد کردن نام کاربري",
         "enter-password": "وارد کردن رمز عبور",
-        "enter-search": "وارد کردن جستجو"
+        "enter-search": "وارد کردن جستجو",
+        "created-time": "زمان ايجاد"
     },
     "content-type": {
         "json": "JSON",

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

@@ -347,7 +347,8 @@
         "enter-search": "Entrez la recherche",
         "enter-username": "Entrez le nom d'utilisateur",
         "password": "Mot de passe",
-        "username": "Nom d'utilisateur"
+        "username": "Nom d'utilisateur",
+        "created-time": "Heure de création"
     },
     "confirm-on-exit": {
         "html-message": "Vous avez des modifications non enregistrées. <br/> Êtes-vous sûr de vouloir quitter cette page?",

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

@@ -361,7 +361,8 @@
         "password": "Password",
         "enter-username": "Inserisci nome utente",
         "enter-password": "Inserisci password",
-        "enter-search": "Cerca ..."
+        "enter-search": "Cerca ...",
+        "created-time": "Orario di creazione"
     },
     "content-type": {
         "json": "Json",

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

@@ -326,8 +326,9 @@
 		"password": "パスワード",
 		"enter-username": "ユーザーネームを入力してください",
 		"enter-password": "パスワードを入力する",
-		"enter-search": "検索を入力"
+		"enter-search": "検索を入力",
-	},
+    "created-time": "作成時刻"
+  },
 	"content-type": {
 		"json": "Json",
 		"text": "テキスト",

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

@@ -337,7 +337,8 @@
         "password": "Parole",
         "enter-username": "Ievadiet lietotājvārdu",
         "enter-password": "Ievadiet paroli",
-        "enter-search": "Ievadiet meklēt"
+        "enter-search": "Ievadiet meklēt",
+        "created-time": "Izveidošanas laiks"
     },
     "content-type": {
         "json": "Json",

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

@@ -369,7 +369,8 @@
         "password": "Parola",
         "enter-username": "Introdu nume utilizator",
         "enter-password": "Introdu parola",
-        "enter-search": "Definește căutarea"
+        "enter-search": "Definește căutarea",
+        "created-time": "Data Creării"
     },
     "content-type": {
         "json": "Json",

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

@@ -371,7 +371,8 @@
         "password": "Пароль",
         "enter-username": "Введите имя пользователя",
         "enter-password": "Введите пароль",
-        "enter-search": "Введите условие поиска"
+        "enter-search": "Введите условие поиска",
+        "created-time": "Время создания"
     },
     "content-type": {
         "json": "Json",

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

@@ -326,7 +326,8 @@
         "password": "Parola",
         "enter-username": "Kullanıcı adı gir",
         "enter-password": "Parola gir",
-        "enter-search": "Arama gir"
+        "enter-search": "Arama gir",
+        "created-time": "Oluşma zamanı"
     },
     "content-type": {
         "json": "Json",

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

@@ -405,7 +405,8 @@
         "password": "Пароль",
         "enter-username": "Введіть ім'я користувача",
         "enter-password": "Введіть пароль",
-        "enter-search": "Введіть пошук"
+        "enter-search": "Введіть пошук",
+        "created-time": "Час створення"
     },
     "converter": {
         "converter": "Перетворювач даних",

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

@@ -326,7 +326,8 @@
         "password": "密码",
         "enter-username": "输入用户名",
         "enter-password": "输入密码",
-        "enter-search": "输入检索条件"
+        "enter-search": "输入检索条件",
+        "created-time": "创建时间"
     },
     "content-type": {
         "json": "Json",

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

@@ -326,7 +326,8 @@
     "password": "密碼",
     "enter-username": "輸入用戶名",
     "enter-password": "輸入密碼",
-    "enter-search": "輸入檢索條件"
+    "enter-search": "輸入檢索條件",
+    "created-time": "建立時間"
   },
   "content-type": {
     "json": "Json",

ui-ngx/src/styles.scss

@@ -477,7 +477,6 @@ mat-label {
 
   .mat-form-field{
     .mat-icon {
-      vertical-align: bottom;
       margin-right: 4px;
       margin-left: 4px;
     }
@@ -486,7 +485,6 @@ mat-label {
   button.mat-menu-item {
     overflow: hidden;
     fill: #737373;
-    display: block;
     .tb-alt-text {
       float: right;
     }
@@ -618,7 +616,7 @@ mat-label {
     display: table-cell;
     box-sizing: content-box;
     line-break: unset;
-    width: 0px;
+    width: 0;
     overflow: hidden;
     vertical-align: middle;
     border-width: 0;
@@ -626,6 +624,7 @@ mat-label {
     border-bottom-color: rgba(0, 0, 0, 0.12);
     border-style: solid;
     text-overflow: ellipsis;
+    touch-action: auto !important;
     &:last-child {
       padding: 0 12px 0 0;
     }
@@ -645,6 +644,7 @@ mat-label {
   .mat-header-cell {
     white-space: nowrap;
     button.mat-sort-header-button {
+      display: block;
       text-overflow: ellipsis;
       overflow: hidden;
       white-space: nowrap;
@@ -694,7 +694,7 @@ mat-label {
   }
 
   .mat-icon {
-    vertical-align: middle;
+    vertical-align: bottom;
     box-sizing: content-box;
     &.tb-mat-16 {
       @include tb-mat-icon-size(16);