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

1 year ago · 1b2ce0c74a
15 changed files with 75 additions and 68 deletions
--- a/ui-ngx/src/app/modules/home/components/alarm/alarm-table-config.ts
+++ b/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;
--- a/ui-ngx/src/app/modules/home/components/attribute/attribute-table.component.ts
+++ b/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',
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.ts
+++ b/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(
-      (widgetTypeInfo) => {
+    this.widgetComponentService.getWidgetInfo(widget.typeFullFqn).subscribe({
+      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() {
--- a/ui-ngx/src/app/modules/home/components/event/event-table-config.ts
+++ b/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',
--- a/ui-ngx/src/app/modules/home/components/widget/lib/alarm/alarms-table-widget.component.ts
+++ b/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;
--- a/ui-ngx/src/app/modules/home/components/widget/lib/cards/unread-notification-widget.component.ts
+++ b/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',
--- a/ui-ngx/src/app/modules/home/components/widget/lib/date-range-navigator/date-range-navigator.component.ts
+++ b/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;
--- a/ui-ngx/src/app/modules/home/components/widget/lib/entity/entities-table-widget.component.ts
+++ b/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',
--- a/ui-ngx/src/app/modules/home/components/widget/lib/rpc/persistent-table.component.ts
+++ b/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;
--- a/ui-ngx/src/app/modules/home/components/widget/lib/timeseries-table-widget.component.ts
+++ b/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',
--- a/ui-ngx/src/app/modules/home/components/widget/widget-component.service.ts
+++ b/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;
    }
  }

--- a/ui-ngx/src/app/modules/home/components/widget/widget-config.component.html
+++ b/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>
--- a/ui-ngx/src/app/modules/home/components/widget/widget.component.ts
+++ b/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(
-      (widgetInfo) => {
+    this.widgetComponentService.getWidgetInfo(this.widget.typeFullFqn).subscribe({
+      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(
-      (subscription) => {
+    this.createSubscription(options, subscribe).subscribe({
+      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(
-        (subscription) => {
+      this.createSubscription(options).subscribe({
+        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(
-        (subscription) => {
+      this.createSubscription(options).subscribe({
+        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(',');
--- a/ui-ngx/src/app/shared/components/time/timewindow-config-dialog.component.ts
+++ b/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 {
--- a/ui-ngx/src/app/shared/components/time/timezone.component.ts
+++ b/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 {