UI: Fix add/edit for invalid widget (not loaded due to errors). Minor style improvements.

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

@@ -243,7 +243,7 @@ export class AlarmTableConfig extends EntityTableConfig<AlarmInfo, TimePageLink>
     if ($event) {
       $event.stopPropagation();
     }
-    const target = $event.target || $event.srcElement || $event.currentTarget;
+    const target = $event.target || $event.currentTarget;
     const config = new OverlayConfig();
     config.backdropClass = 'cdk-overlay-transparent-backdrop';
     config.hasBackdrop = true;

ui-ngx/src/app/modules/home/components/attribute/attribute-table.component.ts

@@ -338,7 +338,7 @@ export class AttributeTableComponent extends PageComponent implements AfterViewI
     if (this.isClientSideTelemetryTypeMap.get(this.attributeScope)) {
       return;
     }
-    const target = $event.target || $event.srcElement || $event.currentTarget;
+    const target = $event.target || $event.currentTarget;
     const config = new OverlayConfig();
     config.backdropClass = 'cdk-overlay-transparent-backdrop';
     config.hasBackdrop = true;
@@ -389,7 +389,7 @@ export class AttributeTableComponent extends PageComponent implements AfterViewI
     if ($event) {
       $event.stopPropagation();
     }
-    const target = $event.target || $event.srcElement || $event.currentTarget;
+    const target = $event.target || $event.currentTarget;
     const config = new OverlayConfig({
       panelClass: 'tb-filter-panel',
       backdropClass: 'cdk-overlay-transparent-backdrop',

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

@@ -1335,8 +1335,8 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC
 
   addWidgetFromType(widget: WidgetInfo) {
     this.onAddWidgetClosed();
-    this.widgetComponentService.getWidgetInfo(widget.typeFullFqn).subscribe(
+    this.widgetComponentService.getWidgetInfo(widget.typeFullFqn).subscribe({
-      (widgetTypeInfo) => {
+      next: (widgetTypeInfo) => {
         const config: WidgetConfig = this.dashboardUtils.widgetConfigFromWidgetType(widgetTypeInfo);
         if (!config.title) {
           config.title = 'New ' + widgetTypeInfo.widgetName;
@@ -1389,8 +1389,13 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC
             }
           });
         }
+      },
+      error: (errorData) => {
+        const errorMessages: string[] = errorData.errorMessages;
+        this.dialogService.alert(this.translate.instant('widget.widget-type-load-error'),
+          errorMessages.join('<br>').replace(/\n/g, '<br>'));
       }
-    );
+    });
   }
 
   onRevertWidgetEdit() {

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

@@ -571,7 +571,7 @@ export class EventTableConfig extends EntityTableConfig<Event, TimePageLink> {
     if ($event) {
       $event.stopPropagation();
     }
-    const target = $event.target || $event.srcElement || $event.currentTarget;
+    const target = $event.target || $event.currentTarget;
     const config = new OverlayConfig({
       panelClass: 'tb-panel-container',
       backdropClass: 'cdk-overlay-transparent-backdrop',

ui-ngx/src/app/modules/home/components/widget/lib/alarm/alarms-table-widget.component.ts

@@ -550,7 +550,7 @@ export class AlarmsTableWidgetComponent extends PageComponent implements OnInit,
     if ($event) {
       $event.stopPropagation();
     }
-    const target = $event.target || $event.srcElement || $event.currentTarget;
+    const target = $event.target || $event.currentTarget;
     const config = new OverlayConfig({
       panelClass: 'tb-panel-container',
       backdropClass: 'cdk-overlay-transparent-backdrop',
@@ -621,7 +621,7 @@ export class AlarmsTableWidgetComponent extends PageComponent implements OnInit,
     if ($event) {
       $event.stopPropagation();
     }
-    const target = $event.target || $event.srcElement || $event.currentTarget;
+    const target = $event.target || $event.currentTarget;
     const config = new OverlayConfig({
       panelClass: 'tb-filter-panel',
       backdropClass: 'cdk-overlay-transparent-backdrop',
@@ -1189,7 +1189,7 @@ export class AlarmsTableWidgetComponent extends PageComponent implements OnInit,
     if ($event) {
       $event.stopPropagation();
     }
-    const target = $event.target || $event.srcElement || $event.currentTarget;
+    const target = $event.target || $event.currentTarget;
     const config = new OverlayConfig();
     config.backdropClass = 'cdk-overlay-transparent-backdrop';
     config.hasBackdrop = true;

ui-ngx/src/app/modules/home/components/widget/lib/cards/unread-notification-widget.component.ts

@@ -237,7 +237,7 @@ export class UnreadNotificationWidgetComponent implements OnInit, OnDestroy {
     if ($event) {
       $event.stopPropagation();
     }
-    const target = $event.target || $event.srcElement || $event.currentTarget;
+    const target = $event.target || $event.currentTarget;
     const config = new OverlayConfig({
       panelClass: 'tb-panel-container',
       backdropClass: 'cdk-overlay-transparent-backdrop',

ui-ngx/src/app/modules/home/components/widget/lib/date-range-navigator/date-range-navigator.component.ts

@@ -126,7 +126,7 @@ export class DateRangeNavigatorWidgetComponent extends PageComponent implements
       $event.stopPropagation();
     }
     this.datePickerSelect.close();
-    const target = $event.target || $event.srcElement || $event.currentTarget;
+    const target = $event.target || $event.currentTarget;
     const config = new OverlayConfig();
     config.backdropClass = 'cdk-overlay-transparent-backdrop';
     config.hasBackdrop = true;

ui-ngx/src/app/modules/home/components/widget/lib/entity/entities-table-widget.component.ts

@@ -513,7 +513,7 @@ export class EntitiesTableWidgetComponent extends PageComponent implements OnIni
     if ($event) {
       $event.stopPropagation();
     }
-    const target = $event.target || $event.srcElement || $event.currentTarget;
+    const target = $event.target || $event.currentTarget;
     const config = new OverlayConfig({
       panelClass: 'tb-panel-container',
       backdropClass: 'cdk-overlay-transparent-backdrop',

ui-ngx/src/app/modules/home/components/widget/lib/rpc/persistent-table.component.ts

@@ -418,7 +418,7 @@ export class PersistentTableComponent extends PageComponent implements OnInit, O
     if ($event) {
       $event.stopPropagation();
     }
-    const target = $event.target || $event.srcElement || $event.currentTarget;
+    const target = $event.target || $event.currentTarget;
     const config = new OverlayConfig();
     config.backdropClass = 'cdk-overlay-transparent-backdrop';
     config.hasBackdrop = true;

ui-ngx/src/app/modules/home/components/widget/lib/timeseries-table-widget.component.ts

@@ -455,7 +455,7 @@ export class TimeseriesTableWidgetComponent extends PageComponent implements OnI
       $event.stopPropagation();
     }
     if (this.sources.length) {
-      const target = $event.target || $event.srcElement || $event.currentTarget;
+      const target = $event.target || $event.currentTarget;
       const config = new OverlayConfig({
         panelClass: 'tb-panel-container',
         backdropClass: 'cdk-overlay-transparent-backdrop',

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

@@ -243,7 +243,11 @@ export class WidgetComponentService {
     if (widgetInfo) {
       return widgetInfo;
     } else {
-      return {} as WidgetInfo;
+      return {
+        typeParameters: {
+          hideDataTab: true
+        }
+      } as WidgetInfo;
     }
   }
 

ui-ngx/src/app/modules/home/components/widget/widget-config.component.html

@@ -165,7 +165,7 @@
           [widgetType] = "modelValue.widgetType"
           [defaultIconColor]="widgetSettings.get('color').value"
           [actionSources]="modelValue.actionSources"
-          [additionalWidgetActionTypes]="modelValue.typeParameters.additionalWidgetActionTypes"
+          [additionalWidgetActionTypes]="modelValue.typeParameters?.additionalWidgetActionTypes"
           formControlName="actions">
         </tb-manage-widget-actions>
       </div>

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

@@ -54,7 +54,6 @@ import {
 import { PageComponent } from '@shared/components/page.component';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
-import { WidgetService } from '@core/http/widget.service';
 import { UtilsService } from '@core/services/utils.service';
 import { forkJoin, Observable, of, ReplaySubject, Subscription, throwError } from 'rxjs';
 import {
@@ -205,7 +204,6 @@ export class WidgetComponent extends PageComponent implements OnInit, OnChanges,
               @Inject(EMBED_DASHBOARD_DIALOG_TOKEN) private embedDashboardDialogComponent: ComponentType<any>,
               @Inject(DASHBOARD_PAGE_COMPONENT_TOKEN) private dashboardPageComponent: ComponentType<any>,
               @Optional() @Inject(MODULES_MAP) private modulesMap: IModulesMap,
-              private widgetService: WidgetService,
               private resources: ResourcesService,
               private timeService: TimeService,
               private deviceService: DeviceService,
@@ -346,17 +344,17 @@ export class WidgetComponent extends PageComponent implements OnInit, OnChanges,
     this.subscriptionContext.widgetUtils = this.widgetContext.utils;
     this.subscriptionContext.getServerTimeDiff = this.dashboardService.getServerTimeDiff.bind(this.dashboardService);
 
-    this.widgetComponentService.getWidgetInfo(this.widget.typeFullFqn).subscribe(
+    this.widgetComponentService.getWidgetInfo(this.widget.typeFullFqn).subscribe({
-      (widgetInfo) => {
+      next: (widgetInfo) => {
         this.widgetInfo = widgetInfo;
         this.loadFromWidgetInfo();
       },
-      (errorData) => {
+      error: (errorData) => {
         this.widgetInfo = errorData.widgetInfo;
         this.errorMessages = errorData.errorMessages;
         this.loadFromWidgetInfo();
       }
-    );
+    });
 
     const noDataDisplayMessage = this.widget.config.noDataDisplayMessage;
     if (isNotEmptyStr(noDataDisplayMessage)) {
@@ -521,15 +519,15 @@ export class WidgetComponent extends PageComponent implements OnInit, OnChanges,
       this.widgetTypeInstance.onDestroy = () => {};
     }
 
-    this.initialize().subscribe(
+    this.initialize().subscribe({
-      () => {
+      next: () => {
         this.onInit();
       },
-      (err) => {
+      error: () => {
         this.widgetContext.inited = true;
         // console.log(err);
       }
-    );
+    });
   }
 
   private detectChanges(detectContainerChanges = false) {
@@ -681,8 +679,8 @@ export class WidgetComponent extends PageComponent implements OnInit, OnChanges,
   private reInitImpl() {
     this.onDestroy();
     if (!this.typeParameters.useCustomDatasources) {
-      this.createDefaultSubscription().subscribe(
+      this.createDefaultSubscription().subscribe({
-        () => {
+        next: () => {
           if (this.destroyed) {
             this.onDestroy();
           } else {
@@ -692,7 +690,7 @@ export class WidgetComponent extends PageComponent implements OnInit, OnChanges,
             this.onInit();
           }
         },
-        () => {
+        error: () => {
           if (this.destroyed) {
             this.onDestroy();
           } else {
@@ -701,7 +699,7 @@ export class WidgetComponent extends PageComponent implements OnInit, OnChanges,
             this.onInit();
           }
         }
-      );
+      });
     } else {
       this.widgetContext.reset();
       this.subscriptionInited = true;
@@ -751,8 +749,8 @@ export class WidgetComponent extends PageComponent implements OnInit, OnChanges,
       }
     ));
     if (!this.typeParameters.useCustomDatasources) {
-      this.createDefaultSubscription().subscribe(
+      this.createDefaultSubscription().subscribe({
-        () => {
+        next: () => {
           this.subscriptionInited = true;
           try {
             this.configureDynamicWidgetComponent();
@@ -762,11 +760,11 @@ export class WidgetComponent extends PageComponent implements OnInit, OnChanges,
             initSubject.error(err);
           }
         },
-        (err) => {
+        error: (err) => {
           this.subscriptionInited = true;
           initSubject.error(err);
         }
-      );
+      });
     } else {
       this.loadingData = false;
       this.subscriptionInited = true;
@@ -791,7 +789,7 @@ export class WidgetComponent extends PageComponent implements OnInit, OnChanges,
     }
   }
 
-  private handleWidgetException(e) {
+  private handleWidgetException(e: any) {
     console.error(e);
     this.widgetErrorData = this.utils.processWidgetException(e);
     this.detectChanges();
@@ -866,8 +864,8 @@ export class WidgetComponent extends PageComponent implements OnInit, OnChanges,
     const createSubscriptionSubject = new ReplaySubject<IWidgetSubscription>();
     options.dashboardTimewindow = this.widgetContext.dashboardTimewindow;
     const subscription: IWidgetSubscription = new WidgetSubscription(this.subscriptionContext, options);
-    subscription.init$.subscribe(
+    subscription.init$.subscribe({
-      () => {
+      next: () => {
         this.widgetContext.subscriptions[subscription.id] = subscription;
         if (subscribe) {
           subscription.subscribe();
@@ -875,10 +873,10 @@ export class WidgetComponent extends PageComponent implements OnInit, OnChanges,
         createSubscriptionSubject.next(subscription);
         createSubscriptionSubject.complete();
       },
-      (err) => {
+      error: (err) => {
         createSubscriptionSubject.error(err);
       }
-    );
+    });
     return createSubscriptionSubject.asObservable();
   }
 
@@ -900,15 +898,15 @@ export class WidgetComponent extends PageComponent implements OnInit, OnChanges,
     } else {
       options.datasources = this.entityService.createDatasourcesFromSubscriptionsInfo(subscriptionsInfo);
     }
-    this.createSubscription(options, subscribe).subscribe(
+    this.createSubscription(options, subscribe).subscribe({
-      (subscription) => {
+      next: (subscription) => {
         createSubscriptionSubject.next(subscription);
         createSubscriptionSubject.complete();
       },
-      (err) => {
+      error: (err) => {
         createSubscriptionSubject.error(err);
       }
-    );
+    });
     return createSubscriptionSubject.asObservable();
   }
 
@@ -937,7 +935,7 @@ export class WidgetComponent extends PageComponent implements OnInit, OnChanges,
               this.dataUpdatePending = true;
             }
           }
-        } catch (e){}
+        } catch (e){/**/}
       },
       onLatestDataUpdated: () => {
         try {
@@ -948,15 +946,15 @@ export class WidgetComponent extends PageComponent implements OnInit, OnChanges,
               this.latestDataUpdatePending = true;
             }
           }
-        } catch (e){}
+        } catch (e){/**/}
       },
-      onDataUpdateError: (subscription, e) => {
+      onDataUpdateError: (_subscription, e) => {
         this.handleWidgetException(e);
       },
-      onLatestDataUpdateError: (subscription, e) => {
+      onLatestDataUpdateError: (_subscription, e) => {
         this.handleWidgetException(e);
       },
-      onSubscriptionMessage: (subscription, message) => {
+      onSubscriptionMessage: (_subscription, message) => {
         if (this.displayWidgetInstance()) {
           if (this.widgetInstanceInited) {
             this.displayMessage(message.severity, message.message);
@@ -965,7 +963,7 @@ export class WidgetComponent extends PageComponent implements OnInit, OnChanges,
           }
         }
       },
-      onInitialPageDataChanged: (subscription, nextPageData) => {
+      onInitialPageDataChanged: (_subscription, _nextPageData) => {
         this.reInit();
       },
       forceReInit: () => {
@@ -977,12 +975,12 @@ export class WidgetComponent extends PageComponent implements OnInit, OnChanges,
           this.detectChanges();
         }
       },
-      legendDataUpdated: (subscription, detectChanges) => {
+      legendDataUpdated: (_subscription, detectChanges) => {
         if (detectChanges) {
           this.detectChanges();
         }
       },
-      timeWindowUpdated: (subscription, timeWindowConfig) => {
+      timeWindowUpdated: (_subscription, timeWindowConfig) => {
         this.ngZone.run(() => {
           this.widget.config.timewindow = timeWindowConfig;
           this.detectChanges(true);
@@ -1017,8 +1015,8 @@ export class WidgetComponent extends PageComponent implements OnInit, OnChanges,
 
       this.defaultComponentsOptions(options);
 
-      this.createSubscription(options).subscribe(
+      this.createSubscription(options).subscribe({
-        (subscription) => {
+        next: (subscription) => {
 
           // backward compatibility
           this.widgetContext.datasources = subscription.datasources;
@@ -1032,12 +1030,12 @@ export class WidgetComponent extends PageComponent implements OnInit, OnChanges,
             createSubscriptionSubject.complete();
           });
         },
-        (err) => {
+        error: (err) => {
           this.ngZone.run(() => {
             createSubscriptionSubject.error(err);
           });
         }
-      );
+      });
     } else if (this.widget.type === widgetType.rpc) {
       this.loadingData = false;
       options = {
@@ -1074,7 +1072,7 @@ export class WidgetComponent extends PageComponent implements OnInit, OnChanges,
             this.detectChanges();
           }
         },
-        onRpcErrorCleared: (subscription) => {
+        onRpcErrorCleared: (_subscription) => {
           if (this.dynamicWidgetComponent) {
             this.dynamicWidgetComponent.rpcErrorText = null;
             this.dynamicWidgetComponent.rpcRejection = null;
@@ -1085,20 +1083,20 @@ export class WidgetComponent extends PageComponent implements OnInit, OnChanges,
           }
         }
       };
-      this.createSubscription(options).subscribe(
+      this.createSubscription(options).subscribe({
-        (subscription) => {
+        next: (subscription) => {
           this.widgetContext.defaultSubscription = subscription;
           this.ngZone.run(() => {
             createSubscriptionSubject.next();
             createSubscriptionSubject.complete();
           });
         },
-        (err) => {
+        error: (err) => {
           this.ngZone.run(() => {
             createSubscriptionSubject.error(err);
           });
         }
-      );
+      });
       this.detectChanges();
     } else if (this.widget.type === widgetType.static) {
       this.loadingData = false;
@@ -1159,7 +1157,7 @@ export class WidgetComponent extends PageComponent implements OnInit, OnChanges,
         }
         const state = objToBase64URI([ stateObject ]);
         const isSinglePage = this.route.snapshot.data.singlePageMode;
-        let url;
+        let url: string;
         if (isSinglePage) {
           url = `/dashboard/${targetDashboardId}?state=${state}`;
         } else {
@@ -1168,7 +1166,7 @@ export class WidgetComponent extends PageComponent implements OnInit, OnChanges,
         if (descriptor.openNewBrowserTab) {
           window.open(url, '_blank');
         } else {
-          this.router.navigateByUrl(url);
+          this.router.navigateByUrl(url).then(() => {});
         }
         break;
       case WidgetActionType.openURL:
@@ -1467,7 +1465,7 @@ export class WidgetComponent extends PageComponent implements OnInit, OnChanges,
                                       popoverWidth = '25vw',
                                       popoverHeight = '25vh',
                                       popoverStyle: { [klass: string]: any } = {}) {
-    const trigger = ($event.target || $event.srcElement || $event.currentTarget) as Element;
+    const trigger = ($event.target || $event.currentTarget) as Element;
     if (this.popoverService.hasPopover(trigger)) {
       this.popoverService.hidePopover(trigger);
     } else {
@@ -1560,7 +1558,7 @@ export class WidgetComponent extends PageComponent implements OnInit, OnChanges,
   }
 
   private elementClick($event: Event) {
-    const elementClicked = ($event.target || $event.srcElement) as Element;
+    const elementClicked = ($event.target) as Element;
     const descriptors = this.getActionDescriptors('elementClick');
     if (descriptors.length) {
       const idsList = descriptors.map(descriptor => `#${descriptor.name}`).join(',');

ui-ngx/src/app/shared/components/time/timewindow-config-dialog.component.ts

@@ -554,7 +554,7 @@ export class TimewindowConfigDialogComponent extends PageComponent implements On
     if ($event) {
       $event.stopPropagation();
     }
-    const trigger = ($event.target || $event.srcElement || $event.currentTarget) as Element;
+    const trigger = ($event.target || $event.currentTarget) as Element;
     if (this.popoverService.hasPopover(trigger)) {
       this.popoverService.hidePopover(trigger);
     } else {
@@ -614,7 +614,7 @@ export class TimewindowConfigDialogComponent extends PageComponent implements On
     if ($event) {
       $event.stopPropagation();
     }
-    const trigger = ($event.target || $event.srcElement || $event.currentTarget) as Element;
+    const trigger = ($event.target || $event.currentTarget) as Element;
     if (this.popoverService.hasPopover(trigger)) {
       this.popoverService.hidePopover(trigger);
     } else {

ui-ngx/src/app/shared/components/time/timezone.component.ts

@@ -151,7 +151,7 @@ export class TimezoneComponent implements ControlValueAccessor, OnInit {
     if (this.disablePanel) {
       return;
     }
-    const trigger = ($event.target || $event.srcElement || $event.currentTarget) as Element;
+    const trigger = ($event.target || $event.currentTarget) as Element;
     if (this.popoverService.hasPopover(trigger)) {
       this.popoverService.hidePopover(trigger);
     } else {