Merge branch 'feature/ui/angular-optimization' into develop/ui

ui-ngx/package.json

@@ -52,6 +52,7 @@
         "dayjs": "1.11.13",
         "flot": "https://github.com/thingsboard/flot.git#0.9-work",
         "flot.curvedlines": "https://github.com/MichaelZinsmaier/CurvedLines.git#master",
+        "font-awesome": "^4.7.0",
         "html2canvas": "^1.4.1",
         "jquery": "^3.7.1",
         "jquery.terminal": "^2.43.1",

ui-ngx/src/app/modules/home/components/session-subscriptions/subscriptions.component.ts

@@ -16,26 +16,22 @@
 
 import { Component, forwardRef, Input, OnInit, OnDestroy } from '@angular/core';
 import { AbstractControl, ControlValueAccessor, UntypedFormArray, UntypedFormBuilder, UntypedFormGroup, NG_VALIDATORS, NG_VALUE_ACCESSOR, ValidationErrors, Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { PageComponent } from '@shared/components/page.component';
-import { Subscription } from 'rxjs';
-import { AppState } from '@core/core.state';
-import { Store } from '@ngrx/store';
 import { DEFAULT_QOS, QoS  } from '@shared/models/session.model';
-import { TranslateService, TranslateModule } from '@ngx-translate/core';
+import { TranslateModule } from '@ngx-translate/core';
 import { TopicSubscription } from '@shared/models/ws-client.model';
 import { FlexModule } from '@angular/flex-layout/flex';
 import { MatLabel, MatFormField, MatSuffix, MatError } from '@angular/material/form-field';
-import { NgFor, NgIf, AsyncPipe } from '@angular/common';
+import { NgFor, NgIf } from '@angular/common';
 import { MatInput } from '@angular/material/input';
 import { CopyButtonComponent } from '@shared/components/button/copy-button.component';
 import { ExtendedModule } from '@angular/flex-layout/extended';
-import { MatSelect } from '@angular/material/select';
-import { MatOption } from '@angular/material/core';
 import { SubscriptionOptionsComponent } from './subscription-options.component';
 import { MatIconButton, MatButton } from '@angular/material/button';
 import { MatTooltip } from '@angular/material/tooltip';
 import { MatIcon } from '@angular/material/icon';
+import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
+import { QosSelectComponent } from '@shared/components/qos-select.component';
 
 @Component({
     selector: 'tb-session-subscriptions',
@@ -51,15 +47,14 @@ import { takeUntil } from 'rxjs/operators';
             useExisting: forwardRef(() => SubscriptionsComponent),
             multi: true
         }],
-    standalone: true,
-    imports: [TranslateModule, FlexModule, MatLabel, NgFor, FormsModule, ReactiveFormsModule, MatFormField, MatInput, CopyButtonComponent, MatSuffix, ExtendedModule, NgIf, MatError, MatSelect, MatOption, SubscriptionOptionsComponent, MatIconButton, MatTooltip, MatIcon, MatButton, AsyncPipe]
+  standalone: true,
+  imports: [TranslateModule, FlexModule, MatLabel, NgFor, FormsModule, ReactiveFormsModule, MatFormField, MatInput, CopyButtonComponent, QosSelectComponent, MatSuffix, ExtendedModule, NgIf, MatError, SubscriptionOptionsComponent, MatIconButton, MatTooltip, MatIcon, MatButton]
 })
 export class SubscriptionsComponent implements ControlValueAccessor, OnInit, OnDestroy {
 
   @Input() disabled: boolean;
 
   topicListFormGroup: UntypedFormGroup;
-  mqttQoSTypes = mqttQoSTypes;
 
   private propagateChange = (v: any) => {};
   private destroy$ = new Subject<void>();

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

@@ -18,7 +18,6 @@ import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 import { Authority } from '@shared/models/authority.enum';
 
-
 const routes: Routes = [
   {
     path: 'home',

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

@@ -18,9 +18,6 @@ import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 import { Authority } from '@shared/models/authority.enum';
 
-
-
-
 const routes: Routes = [
   {
     path: 'kafka',

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

@@ -17,7 +17,6 @@
 import { inject, NgModule } from '@angular/core';
 import { ResolveFn, RouterModule, Routes } from '@angular/router';
 import { Authority } from '@shared/models/authority.enum';
-
 import { of } from 'rxjs';
 import { ConfigService } from '@core/http/config.service';
 import { TOTAL_KEY } from '@shared/models/chart.model';

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

@@ -0,0 +1,16 @@
+///
+/// Copyright © 2016-2024 The Thingsboard Authors
+///
+/// Licensed under the Apache License, Version 2.0 (the "License");
+/// you may not use this file except in compliance with the License.
+/// You may obtain a copy of the License at
+///
+///     http://www.apache.org/licenses/LICENSE-2.0
+///
+/// Unless required by applicable law or agreed to in writing, software
+/// distributed under the License is distributed on an "AS IS" BASIS,
+/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+/// See the License for the specific language governing permissions and
+/// limitations under the License.
+///
+

ui-ngx/src/app/modules/home/pages/subscriptions/subscriptions-filter-config.component.ts

@@ -32,7 +32,6 @@ import { ControlValueAccessor, NG_VALUE_ACCESSOR, UntypedFormBuilder, UntypedFor
 import { coerceBoolean } from '@shared/decorators/coercion';
 import { Overlay, OverlayConfig, OverlayRef } from '@angular/cdk/overlay';
 import { TemplatePortal } from '@angular/cdk/portal';
-
 import { TranslateService, TranslateModule } from '@ngx-translate/core';
 import { deepClone, isNumber } from '@core/utils';
 import { EntityType } from '@shared/models/entity-type.models';

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

@@ -18,7 +18,6 @@ import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 import { Authority } from '@shared/models/authority.enum';
 
-
 const routes: Routes = [
   {
     path: 'subscriptions',

ui-ngx/src/app/modules/home/pages/subscriptions/subscriptions-table-config.ts

@@ -110,10 +110,7 @@ export class SubscriptionsTableConfig extends EntityTableConfig<ClientSubscripti
       new EntityTableColumn<ClientSubscription>('noLocal', 'subscription.nl', '120px', entity => checkBoxCell(entity.subscription?.options?.noLocal)),
       new EntityTableColumn<ClientSubscription>('retainAsPublish', 'subscription.rap', '120px', entity => checkBoxCell(entity.subscription?.options?.retainAsPublish)),
       new EntityTableColumn<ClientSubscription>('retainHandling', 'subscription.rh', '120px', entity => entity.subscription?.options?.retainHandling.toString(),
-        undefined, undefined, undefined, entity => {
-          const rh = this.rhOptions.find(el => el.value === entity.subscription?.options.retainHandling).name;
-          return this.translate.instant(rh);
-        }),
+        undefined, undefined, undefined, entity => this.rhOptions.find(el => el.value === entity.subscription?.options.retainHandling).name),
       new EntityTableColumn<ClientSubscription>('subscriptionId', 'subscription.subscription-id', '120px',
           entity => entity.subscription.subscriptionId ? entity.subscription.subscriptionId.toString() : ''),
     );

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

@@ -23,7 +23,6 @@ import { BreadCrumbConfig } from '@shared/components/breadcrumb';
 import { entityDetailsPageBreadcrumbLabelFunction } from '@home/pages/home-pages.models';
 import { UsersTableConfigResolver } from '@home/pages/users/users-table-config.resolver';
 
-
 const routes: Routes = [
   {
     path: 'users',

ui-ngx/src/app/modules/home/pages/ws-client/connections/last-will.component.ts

@@ -16,9 +16,13 @@
 
 import { Component, forwardRef, Input, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core';
 import { ControlValueAccessor, FormBuilder, NG_VALIDATORS, NG_VALUE_ACCESSOR, UntypedFormGroup, ValidationErrors, Validator, FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { Subject, Subscription } from 'rxjs';
-import { WsMqttQoSType, WsQoSTranslationMap, WsQoSTypes } from '@shared/models/session.model';
-import { TimeUnitTypeTranslationMap, WebSocketConnection, WebSocketTimeUnit } from '@shared/models/ws-client.model';
+import { Subject } from 'rxjs';
+import {
+  LastWillMsg,
+  TimeUnitTypeTranslationMap,
+  WebSocketConnection,
+  WebSocketTimeUnit
+} from '@shared/models/ws-client.model';
 import { FlexModule } from '@angular/flex-layout/flex';
 import { MatFormField, MatLabel, MatSuffix } from '@angular/material/form-field';
 import { TranslateModule } from '@ngx-translate/core';
@@ -34,6 +38,8 @@ import { MatIcon } from '@angular/material/icon';
 import { MatTooltip } from '@angular/material/tooltip';
 import { DEFAULT_QOS } from '@shared/models/session.model';
 import { takeUntil } from 'rxjs/operators';
+import { isDefinedAndNotNull } from '@core/utils';
+import { QosSelectComponent } from '@shared/components/qos-select.component';
 
 @Component({
     selector: 'tb-last-will',
@@ -52,7 +58,7 @@ import { takeUntil } from 'rxjs/operators';
     ],
     styleUrls: ['./last-will.component.scss'],
     standalone: true,
-    imports: [FormsModule, ReactiveFormsModule, FlexModule, MatFormField, MatLabel, TranslateModule, MatInput, CopyButtonComponent, MatSuffix, ExtendedModule, MatSelect, NgFor, MatOption, ValueInputComponent, MatSlideToggle, MatIcon, MatTooltip]
+  imports: [FormsModule, ReactiveFormsModule, FlexModule, MatFormField, MatLabel, TranslateModule, MatInput, CopyButtonComponent, MatSuffix, ExtendedModule, MatSelect, NgFor, MatOption, ValueInputComponent, MatSlideToggle, MatIcon, MatTooltip, QosSelectComponent]
 })
 export class LastWillComponent implements OnInit, ControlValueAccessor, Validator, OnDestroy, OnChanges {
 

ui-ngx/src/app/modules/home/pages/ws-client/messages/message-filter-config.component.ts

@@ -32,11 +32,8 @@ import { ControlValueAccessor, NG_VALUE_ACCESSOR, UntypedFormBuilder, UntypedFor
 import { coerceBoolean } from '@shared/decorators/coercion';
 import { Overlay, OverlayConfig, OverlayRef } from '@angular/cdk/overlay';
 import { TemplatePortal } from '@angular/cdk/portal';
-import { TranslateService } from '@ngx-translate/core';
 import { deepClone, isNumber } from '@core/utils';
-
 import { TranslateService, TranslateModule } from '@ngx-translate/core';
-import { deepClone } from '@core/utils';
 import { EntityType } from '@shared/models/entity-type.models';
 import { fromEvent, Subject, Subscription } from 'rxjs';
 import { QoS, QosTranslation } from '@shared/models/session.model';

ui-ngx/src/app/modules/home/pages/ws-client/messages/messages.component.ts

@@ -22,7 +22,7 @@ import { MessagesTableConfig } from '@home/pages/ws-client/messages/messages-tab
 import { MatDialog } from '@angular/material/dialog';
 import { DatePipe } from '@angular/common';
 import { BreakpointObserver } from '@angular/cdk/layout';
-import { EntitiesTableWsComponent } from '../../../components/entity/entities-table-ws.component';
+import { EntitiesTableWsComponent } from '@home/components/entity/entities-table-ws.component';
 
 @Component({
     selector: 'tb-messages',

ui-ngx/src/app/modules/home/pages/ws-client/messages/messanger.component.ts

@@ -18,7 +18,6 @@ import { Component, OnInit } from '@angular/core';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import { FormBuilder, FormControl, UntypedFormGroup, Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { WsMqttQoSType, WsQoSTranslationMap, WsQoSTypes } from '@shared/models/session.model';
 import { MqttJsClientService } from '@core/http/mqtt-js-client.service';
 import { isDefinedAndNotNull } from '@core/utils';
 import { MatDialog } from '@angular/material/dialog';
@@ -55,13 +54,14 @@ import { MatTooltip } from '@angular/material/tooltip';
 import { WsJsonObjectEditComponent } from './ws-json-object-edit.component';
 import { MatIcon } from '@angular/material/icon';
 import { DEFAULT_QOS } from '@shared/models/session.model';
+import { QosSelectComponent } from '@shared/components/qos-select.component';
 
 @Component({
     selector: 'tb-messanger',
     templateUrl: './messanger.component.html',
     styleUrls: ['./messanger.component.scss'],
     standalone: true,
-    imports: [TranslateModule, ToggleSelectComponent, FormsModule, FlexModule, MessageFilterConfigComponent, MatButton, NgClass, ExtendedModule, MessagesComponent, ReactiveFormsModule, MatFormField, MatLabel, MatInput, NgIf, MatError, ColorInputComponent, MatSuffix, MatSelect, NgFor, MatOption, MatSlideToggle, MatTooltip, WsJsonObjectEditComponent, MatIconButton, MatIcon, AsyncPipe]
+  imports: [TranslateModule, ToggleSelectComponent, FormsModule, FlexModule, MessageFilterConfigComponent, MatButton, NgClass, ExtendedModule, MessagesComponent, ReactiveFormsModule, MatFormField, MatLabel, MatInput, NgIf, MatError, ColorInputComponent, MatSuffix, MatSelect, NgFor, MatOption, MatSlideToggle, MatTooltip, WsJsonObjectEditComponent, MatIconButton, MatIcon, AsyncPipe, QosSelectComponent]
 })
 export class MessangerComponent implements OnInit {
 

ui-ngx/src/app/modules/home/pages/ws-client/subscriptions/subscription-dialog.component.ts

@@ -17,7 +17,7 @@
 import { AfterContentChecked, ChangeDetectorRef, Component, Inject, OnDestroy, OnInit } from '@angular/core';
 import { FormBuilder, UntypedFormGroup, Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { Subject } from 'rxjs';
-import { WsMqttQoSType, WsQoSTypes, WsQoSTranslationMap, DEFAULT_QOS } from '@shared/models/session.model';
+import { DEFAULT_QOS } from '@shared/models/session.model';
 import { DialogComponent } from '@shared/components/dialog.component';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
@@ -44,6 +44,7 @@ import { MatOption } from '@angular/material/core';
 import { MatAccordion, MatExpansionPanel, MatExpansionPanelHeader, MatExpansionPanelTitle, MatExpansionPanelContent } from '@angular/material/expansion';
 import { MatSlideToggle } from '@angular/material/slide-toggle';
 import { takeUntil } from 'rxjs/operators';
+import { QosSelectComponent } from '@shared/components/qos-select.component';
 
 export interface AddWsClientSubscriptionDialogData {
   mqttVersion: number;
@@ -56,7 +57,7 @@ export interface AddWsClientSubscriptionDialogData {
     templateUrl: './subscription-dialog.component.html',
     styleUrls: ['./subscription-dialog.component.scss'],
     standalone: true,
-    imports: [FormsModule, ReactiveFormsModule, MatToolbar, FlexModule, TranslateModule, MatIconButton, MatDialogClose, MatTooltip, MatIcon, NgIf, MatProgressBar, CdkScrollable, MatDialogContent, MatFormField, MatLabel, MatInput, CopyButtonComponent, MatSuffix, ExtendedModule, MatError, ColorInputComponent, MatSelect, NgFor, MatOption, MatAccordion, MatExpansionPanel, MatExpansionPanelHeader, MatExpansionPanelTitle, MatExpansionPanelContent, MatSlideToggle, MatDialogActions, MatButton, AsyncPipe]
+  imports: [FormsModule, ReactiveFormsModule, MatToolbar, FlexModule, TranslateModule, MatIconButton, MatDialogClose, MatTooltip, MatIcon, NgIf, MatProgressBar, CdkScrollable, MatDialogContent, MatFormField, MatLabel, MatInput, CopyButtonComponent, MatSuffix, ExtendedModule, MatError, ColorInputComponent, MatSelect, NgFor, MatOption, MatAccordion, MatExpansionPanel, MatExpansionPanelHeader, MatExpansionPanelTitle, MatExpansionPanelContent, MatSlideToggle, MatDialogActions, MatButton, AsyncPipe, QosSelectComponent]
 })
 export class SubscriptionDialogComponent extends DialogComponent<SubscriptionDialogComponent>
   implements OnInit, OnDestroy, AfterContentChecked {

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

@@ -18,7 +18,6 @@ import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 import { Authority } from '@shared/models/authority.enum';
 
-
 const routes: Routes = [
   {
     path: 'ws-client',

ui-ngx/src/app/shared/components/entity/entity-subtype-list.component.ts

@@ -14,10 +14,8 @@
 /// limitations under the License.
 ///
 
-import { AfterViewInit, Component, ElementRef, forwardRef, Input, OnDestroy, OnInit, ViewChild } from '@angular/core';
-import { ControlValueAccessor, FormBuilder, FormGroup, NG_VALUE_ACCESSOR, Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { Component, ElementRef, forwardRef, Input, OnInit, ViewChild } from '@angular/core';
-import { ControlValueAccessor, FormBuilder, FormGroup, NG_VALUE_ACCESSOR, Validators } from '@angular/forms';
+import { ControlValueAccessor, FormBuilder, FormGroup, NG_VALUE_ACCESSOR, Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { Observable, ReplaySubject, throwError } from 'rxjs';
 import { debounceTime, map, mergeMap, share } from 'rxjs/operators';
 import { TranslateService, TranslateModule } from '@ngx-translate/core';

ui-ngx/src/app/shared/components/footer-fab-buttons.component.ts

@@ -14,12 +14,12 @@
 /// limitations under the License.
 ///
 
-import {Component, HostListener, Input} from '@angular/core';
-import {PageComponent} from '@shared/components/page.component';
-import {Store} from '@ngrx/store';
-import {AppState} from '@core/core.state';
-import {speedDialFabAnimations} from '@shared/animations/speed-dial-fab.animations';
-import {coerceBooleanProperty} from '@angular/cdk/coercion';
+import { Component, HostListener, Input } from '@angular/core';
+import { PageComponent } from '@shared/components/page.component';
+import { Store } from '@ngrx/store';
+import { AppState } from '@core/core.state';
+import { speedDialFabAnimations } from '@shared/animations/speed-dial-fab.animations';
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import { FlexModule } from '@angular/flex-layout/flex';
 import { NgClass, NgFor, AsyncPipe } from '@angular/common';
 import { ExtendedModule } from '@angular/flex-layout/extended';

ui-ngx/src/app/shared/components/help.component.ts

@@ -14,8 +14,8 @@
 /// limitations under the License.
 ///
 
-import {Component, Input} from '@angular/core';
-import {HelpLinks} from '@shared/models/constants';
+import { Component, Input } from '@angular/core';
+import { HelpLinks } from '@shared/models/constants';
 import { MatIconButton } from '@angular/material/button';
 import { MatTooltip } from '@angular/material/tooltip';
 import { MatIcon } from '@angular/material/icon';

ui-ngx/src/app/shared/components/qos-select.component.ts

@@ -16,19 +16,27 @@
 
 import { Component, forwardRef, Input, OnDestroy } from '@angular/core';
 import {
-  ControlValueAccessor,
-  NG_VALUE_ACCESSOR,
+  ControlValueAccessor, FormsModule,
+  NG_VALUE_ACCESSOR, ReactiveFormsModule,
   UntypedFormBuilder,
   UntypedFormControl,
   Validators
 } from '@angular/forms';
-import { MatFormFieldAppearance, SubscriptSizing } from '@angular/material/form-field';
+import {
+  MatFormField,
+  MatFormFieldAppearance,
+  MatLabel,
+  SubscriptSizing
+} from '@angular/material/form-field';
 import { coerceBoolean } from '@shared/decorators/coercion';
-import { TranslateService } from '@ngx-translate/core';
+import { TranslateModule, TranslateService } from '@ngx-translate/core';
 import { DEFAULT_QOS, QoS, QosTranslation } from '../models/session.model';
 import { isDefinedAndNotNull, isNumber } from '@core/utils';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
+import { NgFor, NgIf } from '@angular/common';
+import { ExtendedModule } from '@angular/flex-layout/extended';
+import { MatOption, MatSelect } from '@angular/material/select';
 
 @Component({
   selector: 'tb-qos-select',
@@ -40,7 +48,9 @@ import { takeUntil } from 'rxjs/operators';
       useExisting: forwardRef(() => QosSelectComponent),
       multi: true
     }
-  ]
+  ],
+  standalone: true,
+  imports: [TranslateModule, MatLabel, NgFor, FormsModule, ReactiveFormsModule, MatFormField, ExtendedModule, NgIf, MatSelect, MatOption]
 })
 export class QosSelectComponent implements ControlValueAccessor, OnDestroy  {