UI: Angular 14 migration

4 years ago · 3aed9db82f
34 changed files with 950 additions and 346 deletions
--- a/pom.xml
+++ b/pom.xml
@ -818,8 +818,10 @@
                            <exclude>docker/haproxy/**</exclude>
                            <exclude>docker/tb-node/**</exclude>
                            <exclude>ui/**</exclude>
-                            <exclude>src/.browserslistrc</exclude>
+                            <exclude>**/.browserslistrc</exclude>
                            <exclude>**/yarn.lock</exclude>
+                            <exclude>**/.yarnrc</exclude>
+                            <exclude>**/.angular/**</exclude>
                            <exclude>**/*.raw</exclude>
                            <exclude>**/*.patch</exclude>
                            <exclude>**/apache/cassandra/io/**</exclude>
--- a/ui-ngx/.eslintrc.json
+++ b/ui-ngx/.eslintrc.json
@ -0,0 +1,67 @@
+{
+    "root": true,
+    "ignorePatterns": [
+        "projects/**/*"
+    ],
+    "overrides": [
+        {
+            "files": [
+                "*.ts"
+            ],
+            "parserOptions": {
+                "project": [
+                    "tsconfig.json",
+                    "e2e/tsconfig.json"
+                ],
+                "createDefaultProgram": true
+            },
+            "extends": [
+                "plugin:@angular-eslint/ng-cli-compat",
+                "plugin:@angular-eslint/ng-cli-compat--formatting-add-on",
+                "plugin:@angular-eslint/template/process-inline-templates"
+            ],
+            "rules": {
+                "@typescript-eslint/explicit-member-accessibility": [
+                    "off",
+                    {
+                        "accessibility": "explicit"
+                    }
+                ],
+                "arrow-parens": [
+                    "off",
+                    "always"
+                ],
+                "@angular-eslint/component-selector": [
+                    "error",
+                    {
+                        "prefix": [ "tb" ]
+                    }
+                ],
+                "id-blacklist": [
+                    "error",
+                    "any",
+                    "Number",
+                    "String",
+                    "string",
+                    "Boolean",
+                    "boolean",
+                    "Undefined",
+                    "undefined"
+                ],
+                "import/order": "off",
+                "@typescript-eslint/member-ordering": "off",
+                "no-underscore-dangle": "off",
+                "@typescript-eslint/naming-convention": "off"
+            }
+        },
+        {
+            "files": [
+                "*.html"
+            ],
+            "extends": [
+                "plugin:@angular-eslint/template/recommended"
+            ],
+            "rules": {}
+        }
+    ]
+}
--- a/ui-ngx/angular.json
+++ b/ui-ngx/angular.json
@ -220,6 +220,15 @@
              "src/assets"
            ]
          }
+        },
+        "lint": {
+          "builder": "@angular-eslint/builder:lint",
+          "options": {
+            "lintFilePatterns": [
+              "src/**/*.ts",
+              "src/**/*.html"
+            ]
+          }
        }
      }
    },
@ -245,6 +254,9 @@
  },
  "cli": {
    "packageManager": "yarn",
-    "analytics": false
+    "analytics": false,
+    "schematicCollections": [
+      "@angular-eslint/schematics"
+    ]
  }
 }
--- a/ui-ngx/package.json
+++ b/ui-ngx/package.json
@ -26,8 +26,8 @@
    "@angular/platform-browser-dynamic": "^14.2.12",
    "@angular/router": "^14.2.12",
    "@auth0/angular-jwt": "^5.1.2",
-    "@date-io/date-fns": "1.3.6",
    "@date-io/core": "1.3.6",
+    "@date-io/date-fns": "1.3.6",
    "@flowjs/flow.js": "^2.14.1",
    "@flowjs/ngx-flow": "~0.6.0",
    "@geoman-io/leaflet-geoman-free": "^2.13.0",
@ -105,6 +105,11 @@
  "devDependencies": {
    "@angular-builders/custom-webpack": "~14.1.0",
    "@angular-devkit/build-angular": "^14.2.10",
+    "@angular-eslint/builder": "14.4.0",
+    "@angular-eslint/eslint-plugin": "14.4.0",
+    "@angular-eslint/eslint-plugin-template": "14.4.0",
+    "@angular-eslint/schematics": "14.4.0",
+    "@angular-eslint/template-parser": "14.4.0",
    "@angular/cli": "^14.2.10",
    "@angular/compiler-cli": "^14.2.12",
    "@angular/language-service": "^14.2.12",
@ -132,9 +137,11 @@
    "@types/systemjs": "6.1.1",
    "@types/tinycolor2": "^1.4.3",
    "@types/tooltipster": "^0.0.31",
-    "codelyzer": "^6.0.2",
+    "@typescript-eslint/eslint-plugin": "5.43.0",
+    "@typescript-eslint/parser": "5.43.0",
    "compression-webpack-plugin": "^10.0.0",
    "directory-tree": "^3.5.1",
+    "eslint": "^8.28.0",
    "jasmine-core": "~3.10.1",
    "jasmine-spec-reporter": "~7.0.0",
    "karma": "~6.3.9",
@ -148,7 +155,6 @@
    "protractor": "~7.0.0",
    "raw-loader": "^4.0.2",
    "ts-node": "^10.9.1",
-    "tslint": "~6.1.3",
    "typescript": "~4.6.4",
    "webpack": "^5.75.0"
  },
@ -156,4 +162,4 @@
    "@types/react": "17.0.37",
    "ace-builds": "1.4.13"
  }
-}
+}
--- a/ui-ngx/src/app/core/services/utils.service.ts
+++ b/ui-ngx/src/app/core/services/utils.service.ts
@ -14,7 +14,7 @@
 /// limitations under the License.
 ///

-// tslint:disable-next-line:no-reference
+// eslint-disable-next-line @typescript-eslint/triple-slash-reference
 /// <reference path="../../../../src/typings/rawloader.typings.d.ts" />

 import { Inject, Injectable, NgZone } from '@angular/core';
--- a/ui-ngx/src/app/core/translate/translate-default-parser.ts
+++ b/ui-ngx/src/app/core/translate/translate-default-parser.ts
@ -22,7 +22,7 @@ import { isDefinedAndNotNull } from '@core/utils';
 export class TranslateDefaultParser extends TranslateParser {
  templateMatcher: RegExp = /{{\s?([^{}\s]*)\s?}}/g;

-  // tslint:disable-next-line:ban-types
+  // eslint-disable-next-line @typescript-eslint/ban-types
  public interpolate(expr: string | Function, params?: any): string {
    let result: string;

@ -58,7 +58,7 @@ export class TranslateDefaultParser extends TranslateParser {
    return target;
  }

-  // tslint:disable-next-line:ban-types
+  // eslint-disable-next-line @typescript-eslint/ban-types
  private interpolateFunction(fn: Function, params?: any) {
    return fn(params);
  }
--- a/ui-ngx/src/app/core/utils.ts
+++ b/ui-ngx/src/app/core/utils.ts
@ -258,9 +258,9 @@ export function hashCode(str: string): number {
  }
  for (i = 0; i < str.length; i++) {
    char = str.charCodeAt(i);
-    // tslint:disable-next-line:no-bitwise
+    // eslint-disable-next-line no-bitwise
    hash = ((hash << 5) - hash) + char;
-    // tslint:disable-next-line:no-bitwise
+    // eslint-disable-next-line no-bitwise
    hash = hash & hash; // Convert to 32bit integer
  }
  return hash;
--- a/ui-ngx/src/app/modules/common/modules-map.ts
+++ b/ui-ngx/src/app/modules/common/modules-map.ts
@ -241,7 +241,7 @@ import * as FilterPredicateValueComponent from '@home/components/filter/filter-p
 import * as TenantProfileComponent from '@home/components/profile/tenant-profile.component';
 import * as TenantProfileDialogComponent from '@home/components/profile/tenant-profile-dialog.component';
 import * as TenantProfileDataComponent from '@home/components/profile/tenant-profile-data.component';
-// tslint:disable-next-line:max-line-length
+// eslint-disable-next-line max-len
 import * as DefaultDeviceProfileConfigurationComponent from '@home/components/profile/device/default-device-profile-configuration.component';
 import * as DeviceProfileConfigurationComponent from '@home/components/profile/device/device-profile-configuration.component';
 import * as DeviceProfileComponent from '@home/components/profile/device-profile.component';
@ -266,7 +266,7 @@ import * as AlarmScheduleInfoComponent from '@home/components/profile/alarm/alar
 import * as AlarmScheduleDialogComponent from '@home/components/profile/alarm/alarm-schedule-dialog.component';
 import * as EditAlarmDetailsDialogComponent from '@home/components/profile/alarm/edit-alarm-details-dialog.component';
 import * as AlarmRuleConditionDialogComponent from '@home/components/profile/alarm/alarm-rule-condition-dialog.component';
-// tslint:disable-next-line:max-line-length
+// eslint-disable-next-line max-len
 import * as DefaultTenantProfileConfigurationComponent from '@home/components/profile/tenant/default-tenant-profile-configuration.component';
 import * as TenantProfileConfigurationComponent from '@home/components/profile/tenant/tenant-profile-configuration.component';
 import * as SmsProviderConfigurationComponent from '@home/components/sms/sms-provider-configuration.component';
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/states/states-component.directive.ts
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/states/states-component.directive.ts
@ -31,7 +31,7 @@ import { IStateControllerComponent } from '@home/components/dashboard-page/state
 import { Subject } from 'rxjs';

@Directive({
-  // tslint:disable-next-line:directive-selector
+  // eslint-disable-next-line @angular-eslint/directive-selector
  selector: 'tb-states-component'
 })
 export class StatesComponentDirective implements OnInit, OnDestroy, OnChanges {
--- a/ui-ngx/src/app/modules/home/components/entity/entity-table-header.component.ts
+++ b/ui-ngx/src/app/modules/home/components/entity/entity-table-header.component.ts
@ -23,7 +23,7 @@ import { EntityTableConfig } from '@home/models/entity/entities-table-config.mod
 import { PageLink } from '@shared/models/page/page-link';

@Directive()
-// tslint:disable-next-line:directive-class-suffix
+// eslint-disable-next-line @angular-eslint/directive-class-suffix
 export abstract class EntityTableHeaderComponent<T extends BaseData<HasId>,
  P extends PageLink = PageLink,
  L extends BaseData<HasId> = T,
--- a/ui-ngx/src/app/modules/home/components/entity/entity-tabs.component.ts
+++ b/ui-ngx/src/app/modules/home/components/entity/entity-tabs.component.ts
@ -34,7 +34,7 @@ import { UntypedFormGroup } from '@angular/forms';
 import { PageLink } from '@shared/models/page/page-link';

@Directive()
-// tslint:disable-next-line:directive-class-suffix
+// eslint-disable-next-line @angular-eslint/directive-class-suffix
 export abstract class EntityTabsComponent<T extends BaseData<HasId>,
  P extends PageLink = PageLink,
  L extends BaseData<HasId> = T,
--- a/ui-ngx/src/app/modules/home/components/entity/entity.component.ts
+++ b/ui-ngx/src/app/modules/home/components/entity/entity.component.ts
@ -27,7 +27,7 @@ import { deepTrim } from '@core/utils';

 // @dynamic
@Directive()
-// tslint:disable-next-line:directive-class-suffix
+// eslint-disable-next-line @angular-eslint/directive-class-suffix
 export abstract class EntityComponent<T extends BaseData<HasId>,
  P extends PageLink = PageLink,
  L extends BaseData<HasId> = T,
--- a/ui-ngx/src/app/modules/home/components/widget/action/custom-action-pretty-editor.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/action/custom-action-pretty-editor.component.ts
@ -14,7 +14,7 @@
 /// limitations under the License.
 ///

-// tslint:disable-next-line:no-reference
+// eslint-disable-next-line @typescript-eslint/triple-slash-reference
 /// <reference path="../../../../../../../src/typings/split.js.typings.d.ts" />

 import {
--- a/ui-ngx/src/app/modules/home/components/widget/dialog/custom-dialog.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/dialog/custom-dialog.component.ts
@ -32,7 +32,7 @@ export interface CustomDialogData {
 }

@Directive()
-// tslint:disable-next-line:directive-class-suffix
+// eslint-disable-next-line @angular-eslint/directive-class-suffix
 export class CustomDialogComponent extends PageComponent {

  [key: string]: any;
--- a/ui-ngx/src/app/modules/home/components/widget/dynamic-widget.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/dynamic-widget.component.ts
@ -49,7 +49,7 @@ import { TbInject } from '@shared/decorators/tb-inject';
 import { MillisecondsToTimeStringPipe } from '@shared/pipe/milliseconds-to-time-string.pipe';

@Directive()
-// tslint:disable-next-line:directive-class-suffix
+// eslint-disable-next-line @angular-eslint/directive-class-suffix
 export class DynamicWidgetComponent extends PageComponent implements IDynamicWidgetComponent, OnInit, OnDestroy {

  executingRpcRequest: boolean;
--- a/ui-ngx/src/app/modules/home/components/widget/lib/canvas-digital-gauge.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/canvas-digital-gauge.ts
@ -651,10 +651,10 @@ function barDimensions(context: DigitalGaugeCanvasRenderingContext2D,
    }
    let dashCount = Math.floor(circumference / (options.dashThickness * bd.fontSizeFactor));
    if (options.gaugeType === 'donut') {
-      // tslint:disable-next-line:no-bitwise
+      // eslint-disable-next-line no-bitwise
      dashCount = (dashCount | 1) - 1;
    } else {
-      // tslint:disable-next-line:no-bitwise
+      // eslint-disable-next-line no-bitwise
      dashCount = (dashCount - 1) | 1;
    }
    bd.dashLength = Math.ceil(circumference / dashCount);
--- a/ui-ngx/src/app/modules/home/components/widget/lib/flot-widget.models.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/flot-widget.models.ts
@ -14,7 +14,7 @@
 /// limitations under the License.
 ///

-// tslint:disable-next-line:no-reference
+// eslint-disable-next-line @typescript-eslint/triple-slash-reference
 /// <reference path="../../../../../../../src/typings/jquery.flot.typings.d.ts" />

 import { DataKey, Datasource, DatasourceData, FormattedData, JsonSettingsSchema } from '@shared/models/widget.models';
--- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/leaflet-map.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/leaflet-map.ts
@ -91,9 +91,9 @@ export default abstract class LeafletMap {
    selectedEntity: FormattedData;
    ignoreUpdateBounds = false;
    initDragModeIgnoreUpdateBoundsSet = false;
-  // tslint:disable-next-line:no-string-literal
+  // eslint-disable-next-line @typescript-eslint/dot-notation
    southWest = new L.LatLng(-Projection.SphericalMercator['MAX_LATITUDE'], -180);
-  // tslint:disable-next-line:no-string-literal
+  // eslint-disable-next-line @typescript-eslint/dot-notation
    northEast = new L.LatLng(Projection.SphericalMercator['MAX_LATITUDE'], 180);
    saveLocation: (e: FormattedData, values: {[key: string]: any}) => Observable<any>;
    saveMarkerLocation: (e: FormattedData, lat?: number, lng?: number) => Observable<any>;
--- a/ui-ngx/src/app/modules/home/components/widget/trip-animation/trip-animation.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/trip-animation/trip-animation.component.ts
@ -59,7 +59,7 @@ interface DataMap {
 }

@Component({
-  // tslint:disable-next-line:component-selector
+  // eslint-disable-next-line @angular-eslint/component-selector
  selector: 'trip-animation',
  templateUrl: './trip-animation.component.html',
  styleUrls: ['./trip-animation.component.scss']
--- a/ui-ngx/src/app/modules/home/models/contact.models.ts
+++ b/ui-ngx/src/app/modules/home/models/contact.models.ts
@ -266,7 +266,7 @@ export const COUNTRIES = [
  'Zimbabwe'
 ];

-/* tslint:disable */
+/* eslint-disable */
 export const POSTAL_CODE_PATTERNS = {
  'United States': '(\\d{5}([\\-]\\d{4})?)',
  'Australia': '[0-9]{4}',
@ -287,5 +287,5 @@ export const POSTAL_CODE_PATTERNS = {
  'Sweden': '\\d{3}\\s?\\d{2}',
  'United Kingdom': '[A-Za-z]{1,2}[0-9Rr][0-9A-Za-z]? [0-9][ABD-HJLNP-UW-Zabd-hjlnp-uw-z]{2}'
 };
-/* tslint:enable */
+/* eslint-enable */

--- a/ui-ngx/src/app/modules/home/pages/rulechain/rulenode.component.ts
+++ b/ui-ngx/src/app/modules/home/pages/rulechain/rulenode.component.ts
@ -23,7 +23,7 @@ import { RuleChainType } from '@app/shared/models/rule-chain.models';
 import { TranslateService } from '@ngx-translate/core';

@Component({
-  // tslint:disable-next-line:component-selector
+  // eslint-disable-next-line @angular-eslint/component-selector
  selector: 'rule-node',
  templateUrl: './rulenode.component.html',
  styleUrls: ['./rulenode.component.scss']
--- a/ui-ngx/src/app/shared/components/directives/component-outlet.directive.ts
+++ b/ui-ngx/src/app/shared/components/directives/component-outlet.directive.ts
@ -26,7 +26,7 @@ import {
 } from '@angular/core';

@Directive({
-  // tslint:disable-next-line:directive-selector
+  // eslint-disable-next-line @angular-eslint/directive-selector
  selector: '[tbComponentOutlet]',
  exportAs: 'tbComponentOutlet'
 })
@ -40,9 +40,9 @@ export class TbComponentOutletDirective<_T = unknown> implements OnChanges {
  @Output() componentChange = new EventEmitter<ComponentRef<any>>();

  static ngTemplateContextGuard<T>(
-    // tslint:disable-next-line:variable-name
+    // eslint-disable-next-line @typescript-eslint/naming-convention,no-underscore-dangle,id-blacklist,id-match
    _dir: TbComponentOutletDirective<T>,
-    // tslint:disable-next-line:variable-name
+    // eslint-disable-next-line @typescript-eslint/naming-convention, no-underscore-dangle, id-blacklist, id-match
    _ctx: any
  ): _ctx is TbComponentOutletContext {
    return true;
--- a/ui-ngx/src/app/shared/components/directives/sring-template-outlet.directive.ts
+++ b/ui-ngx/src/app/shared/components/directives/sring-template-outlet.directive.ts
@ -26,7 +26,7 @@ import {
 } from '@angular/core';

@Directive({
-  // tslint:disable-next-line:directive-selector
+  // eslint-disable-next-line @angular-eslint/directive-selector
  selector: '[tbStringTemplateOutlet]',
  exportAs: 'tbStringTemplateOutlet'
 })
@ -37,9 +37,9 @@ export class TbStringTemplateOutletDirective<_T = unknown> implements OnChanges
  @Input() tbStringTemplateOutlet: any | TemplateRef<any> = null;

  static ngTemplateContextGuard<T>(
-    // tslint:disable-next-line:variable-name
+    // eslint-disable-next-line @typescript-eslint/naming-convention,no-underscore-dangle,id-blacklist,id-match
    _dir: TbStringTemplateOutletDirective<T>,
-    // tslint:disable-next-line:variable-name
+    // eslint-disable-next-line @typescript-eslint/naming-convention, no-underscore-dangle, id-blacklist, id-match
    _ctx: any
  ): _ctx is TbStringTemplateOutletContext {
    return true;
--- a/ui-ngx/src/app/shared/components/fab-toolbar.component.ts
+++ b/ui-ngx/src/app/shared/components/fab-toolbar.component.ts
@ -34,13 +34,13 @@ import { ResizeObserver } from '@juggle/resize-observer';
 export declare type FabToolbarDirection = 'left' | 'right';

 class MatFabToolbarBase {
-  // tslint:disable-next-line:variable-name
+  // eslint-disable-next-line @typescript-eslint/naming-convention, no-underscore-dangle, id-blacklist, id-match
  constructor(public _elementRef: ElementRef) {}
 }
 const MatFabToolbarMixinBase: CanColorCtor & typeof MatFabToolbarBase = mixinColor(MatFabToolbarBase);

@Directive({
-  // tslint:disable-next-line:directive-selector
+  // eslint-disable-next-line @angular-eslint/directive-selector
  selector: 'mat-fab-trigger'
 })
 export class FabTriggerDirective {
@ -51,7 +51,7 @@ export class FabTriggerDirective {
 }

@Directive({
-  // tslint:disable-next-line:directive-selector
+  // eslint-disable-next-line @angular-eslint/directive-selector
  selector: 'mat-fab-actions'
 })
 export class FabActionsDirective implements OnInit {
@ -69,7 +69,7 @@ export class FabActionsDirective implements OnInit {

 // @dynamic
@Component({
-  // tslint:disable-next-line:component-selector
+  // eslint-disable-next-line @angular-eslint/component-selector
  selector: 'mat-fab-toolbar',
  templateUrl: './fab-toolbar.component.html',
  styleUrls: ['./fab-toolbar.component.scss'],
--- a/ui-ngx/src/app/shared/components/help-popup.component.ts
+++ b/ui-ngx/src/app/shared/components/help-popup.component.ts
@ -30,7 +30,7 @@ import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
 import { isDefinedAndNotNull } from '@core/utils';

@Component({
-  // tslint:disable-next-line:component-selector
+  // eslint-disable-next-line @angular-eslint/component-selector
  selector: '[tb-help-popup], [tb-help-popup-content]',
  templateUrl: './help-popup.component.html',
  styleUrls: ['./help-popup.component.scss'],
@ -41,22 +41,22 @@ export class HelpPopupComponent implements OnChanges, OnDestroy {
  @ViewChild('toggleHelpButton', {read: ElementRef, static: false}) toggleHelpButton: ElementRef;
  @ViewChild('toggleHelpTextButton', {read: ElementRef, static: false}) toggleHelpTextButton: ElementRef;

-  // tslint:disable-next-line:no-input-rename
+  // eslint-disable-next-line @angular-eslint/no-input-rename
  @Input('tb-help-popup') helpId: string;

-  // tslint:disable-next-line:no-input-rename
+  // eslint-disable-next-line @angular-eslint/no-input-rename
  @Input('tb-help-popup-content') helpContent: string;

-  // tslint:disable-next-line:no-input-rename
+  // eslint-disable-next-line @angular-eslint/no-input-rename
  @Input('trigger-text') triggerText: string;

-  // tslint:disable-next-line:no-input-rename
+  // eslint-disable-next-line @angular-eslint/no-input-rename
  @Input('trigger-style') triggerStyle: string;

-  // tslint:disable-next-line:no-input-rename
+  // eslint-disable-next-line @angular-eslint/no-input-rename
  @Input('tb-help-popup-placement') helpPopupPlacement: PopoverPlacement;

-  // tslint:disable-next-line:no-input-rename
+  // eslint-disable-next-line @angular-eslint/no-input-rename
  @Input('tb-help-popup-style') helpPopupStyle: { [klass: string]: any } = {};

  popoverVisible = false;
--- a/ui-ngx/src/app/shared/components/help.component.ts
+++ b/ui-ngx/src/app/shared/components/help.component.ts
@ -18,13 +18,13 @@ import { Component, Input } from '@angular/core';
 import { HelpLinks } from '@shared/models/constants';

@Component({
-  // tslint:disable-next-line:component-selector
+  // eslint-disable-next-line @angular-eslint/component-selector
  selector: '[tb-help]',
  templateUrl: './help.component.html'
 })
 export class HelpComponent {

-  // tslint:disable-next-line:no-input-rename
+  // eslint-disable-next-line @angular-eslint/no-input-rename
  @Input('tb-help') helpLinkId: string;

  gotoHelpPage(): void {
--- a/ui-ngx/src/app/shared/components/popover.component.ts
+++ b/ui-ngx/src/app/shared/components/popover.component.ts
@ -70,7 +70,7 @@ export type TbPopoverTrigger = 'click' | 'focus' | 'hover' | null;
 })
 export class TbPopoverDirective implements OnChanges, OnDestroy, AfterViewInit {

-  // tslint:disable:no-input-rename
+  /* eslint-disable @angular-eslint/no-input-rename */
  @Input('tbPopoverContent') content?: string | TemplateRef<void>;
  @Input('tbPopoverTrigger') trigger?: TbPopoverTrigger = 'hover';
  @Input('tbPopoverPlacement') placement?: string | string[] = 'top';
@ -82,7 +82,7 @@ export class TbPopoverDirective implements OnChanges, OnDestroy, AfterViewInit {
  @Input('tbPopoverOverlayStyle') overlayStyle?: { [klass: string]: any };
  @Input() tbPopoverBackdrop = false;

-  // tslint:disable-next-line:no-output-rename
+  // eslint-disable-next-line @angular-eslint/no-output-rename
  @Output('tbPopoverVisibleChange') readonly visibleChange = new EventEmitter<boolean>();

  componentFactory: ComponentFactory<TbPopoverComponent> = this.resolver.resolveComponentFactory(TbPopoverComponent);
--- a/ui-ngx/src/app/shared/models/alias.models.ts
+++ b/ui-ngx/src/app/shared/models/alias.models.ts
@ -127,7 +127,7 @@ export interface EntitySearchQueryFilter {
  fetchLastLevelOnly?: boolean;
 }

-// tslint:disable-next-line:no-empty-interface
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
 export interface ApiUsageStateFilter {

 }
--- a/ui-ngx/src/app/shared/models/rule-node.models.ts
+++ b/ui-ngx/src/app/shared/models/rule-node.models.ts
@ -77,7 +77,7 @@ export interface IRuleNodeConfigurationComponent {
 }

@Directive()
-// tslint:disable-next-line:directive-class-suffix
+// eslint-disable-next-line @angular-eslint/directive-class-suffix
 export abstract class RuleNodeConfigurationComponent extends PageComponent implements
  IRuleNodeConfigurationComponent, OnInit, AfterViewInit {

--- a/ui-ngx/src/app/shared/models/widget.models.ts
+++ b/ui-ngx/src/app/shared/models/widget.models.ts
@ -706,7 +706,7 @@ function removeEmptyWidgetSettings(settings: WidgetSettings): WidgetSettings {
 }

@Directive()
-// tslint:disable-next-line:directive-class-suffix
+// eslint-disable-next-line @angular-eslint/directive-class-suffix
 export abstract class WidgetSettingsComponent extends PageComponent implements
  IWidgetSettingsComponent, OnInit, AfterViewInit {

--- a/ui-ngx/src/theme.scss
+++ b/ui-ngx/src/theme.scss
@ -14,7 +14,7 @@
 * limitations under the License.
 */
@use '@angular/material' as mat;
-@import '~@mat-datetimepicker/core/datetimepicker/datetimepicker-theme.scss';
+@import '@mat-datetimepicker/core/datetimepicker/datetimepicker-theme';
@import './scss/constants';

@include mat.core();
--- a/ui-ngx/src/typings/leaflet-geoman-extend.d.ts
+++ b/ui-ngx/src/typings/leaflet-geoman-extend.d.ts
@ -14,7 +14,7 @@
 /// limitations under the License.
 ///

-/* tslint:disable:adjacent-overload-signatures unified-signatures */
+/* eslint-disable @typescript-eslint/adjacent-overload-signatures, @typescript-eslint/unified-signatures */

 import * as L from 'leaflet';

--- a/ui-ngx/tslint.json
+++ b/ui-ngx/tslint.json
@ -1,139 +0,0 @@
-{
-  "extends": "tslint:recommended",
-  "rulesDirectory": [
-    "codelyzer"
-  ],
-  "rules": {
-    "align": {
-      "options": [
-        "parameters",
-        "statements"
-      ]
-    },
-    "array-type": false,
-    "arrow-parens": false,
-    "arrow-return-shorthand": true,
-    "curly": true,
-    "deprecation": {
-      "severity": "warn"
-    },
-    "eofline": true,
-    "import-blacklist": [
-      true,
-      "rxjs/Rx",
-      "^.*/public-api$"
-    ],
-    "import-spacing": true,
-    "indent": {
-      "options": [
-        "spaces"
-      ]
-    },
-    "interface-name": false,
-    "max-classes-per-file": false,
-    "max-line-length": [
-      true,
-      140
-    ],
-    "member-access": false,
-    "member-ordering": [
-      true,
-      {
-        "order": [
-          "static-field",
-          "instance-field",
-          "static-method",
-          "instance-method"
-        ]
-      }
-    ],
-    "no-consecutive-blank-lines": false,
-    "no-console": [
-      true,
-      "debug",
-      "info",
-      "time",
-      "timeEnd",
-      "trace"
-    ],
-    "no-empty": false,
-    "no-inferrable-types": [
-      true,
-      "ignore-params"
-    ],
-    "no-non-null-assertion": true,
-    "no-redundant-jsdoc": true,
-    "no-switch-case-fall-through": true,
-    "no-var-requires": false,
-    "object-literal-key-quotes": [
-      true,
-      "as-needed"
-    ],
-    "object-literal-sort-keys": false,
-    "ordered-imports": false,
-    "quotemark": [
-      true,
-      "single"
-    ],
-    "semicolon": {
-      "options": [
-        "always"
-      ]
-    },
-    "space-before-function-paren": {
-      "options": {
-        "anonymous": "never",
-        "asyncArrow": "always",
-        "constructor": "never",
-        "method": "never",
-        "named": "never"
-      }
-    },
-    "trailing-comma": false,
-    "no-output-on-prefix": true,
-    "typedef-whitespace": {
-      "options": [
-        {
-          "call-signature": "nospace",
-          "index-signature": "nospace",
-          "parameter": "nospace",
-          "property-declaration": "nospace",
-          "variable-declaration": "nospace"
-        },
-        {
-          "call-signature": "onespace",
-          "index-signature": "onespace",
-          "parameter": "onespace",
-          "property-declaration": "onespace",
-          "variable-declaration": "onespace"
-        }
-      ]
-    },
-    "use-input-property-decorator": true,
-    "use-output-property-decorator": true,
-    "use-host-property-decorator": true,
-    "no-input-rename": true,
-    "no-output-rename": true,
-    "use-life-cycle-interface": true,
-    "use-pipe-transform-interface": true,
-    "component-class-suffix": true,
-    "directive-class-suffix": true
-  ,    "variable-name": {
-      "options": [
-        "ban-keywords",
-        "check-format",
-        "allow-pascal-case"
-      ]
-    },
-    "whitespace": {
-      "options": [
-        "check-branch",
-        "check-decl",
-        "check-operator",
-        "check-separator",
-        "check-type",
-        "check-typecast"
-      ]
-    }
-}
-}
--- a/ui-ngx/yarn.lock
+++ b/ui-ngx/yarn.lock