dendi-wang/thingsboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Igor Kulikov 2025-04-08 20:12:13 +03:00
parent 2029b39a3d
commit 1b2ce0c74a
15 changed files with 75 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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;

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

@ -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',

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

@ -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() {

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

@ -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',

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

@ -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;

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

@ -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',

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

@ -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;

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

@ -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',

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

@ -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;

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

@ -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',

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

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

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

@ -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>

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

@ -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(',');

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

@ -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 {

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

@ -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 {