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

Merge pull request #7863 from Terny22/improvments/dashboards

Browse Source 
Optimizations for dashboard-pages that open in popover or dialog.
This commit is contained in:
Igor Kulikov 2022-12-28 13:08:59 +02:00 committed by GitHub
commit aeaa70f96e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 61 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
ui-ngx/src/app/core/http/entity.service.ts
View File

@ -869,8 +869,38 @@ export class EntityService {
};
aliasInfo.currentEntity = null;
if (!aliasInfo.resolveMultiple && aliasInfo.entityFilter) {
return this.findSingleEntityInfoByEntityFilter(aliasInfo.entityFilter,
{ignoreLoading: true, ignoreErrors: true}).pipe(
let entityInfoObservable: Observable<EntityInfo>;
if (result.stateEntity && aliasInfo.entityFilter.type === AliasFilterType.singleEntity) {
let currentEntity: EntityInfo = null;
if (stateParams) {
if (result.entityParamName && result.entityParamName.length) {
const stateEntity = stateParams[result.entityParamName];
if (stateEntity) {
currentEntity = {
id: stateEntity.entityId.id,
entityType: stateEntity.entityId.entityType,
name: stateEntity.entityName,
label: stateEntity.entityLabel
};
}
} else {
if (stateParams.entityId) {
currentEntity = {
id: stateParams.entityId.id,
entityType: stateParams.entityId.entityType as EntityType,
name: stateParams.entityName,
label: stateParams.entityLabel
};
}
}
}
entityInfoObservable = currentEntity ? of(currentEntity) : this.findSingleEntityInfoByEntityFilter(aliasInfo.entityFilter,
{ignoreLoading: true, ignoreErrors: true});
} else {
entityInfoObservable = this.findSingleEntityInfoByEntityFilter(aliasInfo.entityFilter,
{ignoreLoading: true, ignoreErrors: true});
}
return entityInfoObservable.pipe(
map((entity) => {
aliasInfo.currentEntity = entity;
return aliasInfo;

2
ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.html
View File

@ -135,7 +135,7 @@
(click)="openDashboardSettings($event)">
<mat-icon>settings</mat-icon>
</button>
<tb-dashboard-select [fxShow]="!isEdit && !widgetEditMode && !embedded && displayDashboardsSelect()"
<tb-dashboard-select *ngIf="!isEdit && !widgetEditMode && !embedded && displayDashboardsSelect()"
[(ngModel)]="currentDashboardId"
(ngModelChange)="currentDashboardIdChanged(currentDashboardId)"
[customerId]="currentCustomerId"

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

@ -30,6 +30,7 @@ import {
Optional,
Renderer2,
StaticProvider,
Type,
ViewChild,
ViewContainerRef,
ViewEncapsulation
@ -148,6 +149,7 @@ import { TbPopoverService } from '@shared/components/popover.service';
import { tap } from 'rxjs/operators';
import { LayoutFixedSize, LayoutWidthType } from '@home/components/dashboard-page/layout/layout.models';
import { TbPopoverComponent } from '@shared/components/popover.component';
import { HOME_COMPONENTS_MODULE_TOKEN } from '@home/components/tokens';
// @dynamic
@Component({
@ -331,6 +333,7 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC
constructor(protected store: Store<AppState>,
@Inject(WINDOW) private window: Window,
@Inject(DOCUMENT) private document: Document,
@Inject(HOME_COMPONENTS_MODULE_TOKEN) private homeComponentsModule: Type<any>,
private breakpointObserver: BreakpointObserver,
private route: ActivatedRoute,
private router: Router,
@ -1112,7 +1115,8 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC
addWidgetFromType(widget: WidgetInfo) {
this.onAddWidgetClosed();
this.searchBundle = '';
this.widgetComponentService.getWidgetInfo(widget.bundleAlias, widget.typeAlias, widget.isSystemType).subscribe(
this.widgetComponentService.getWidgetInfo(widget.bundleAlias, widget.typeAlias, widget.isSystemType,
[this.homeComponentsModule]).subscribe(
(widgetTypeInfo) => {
const config: WidgetConfig = JSON.parse(widgetTypeInfo.defaultConfig);
config.title = 'New ' + widgetTypeInfo.widgetName;

2
ui-ngx/src/app/modules/home/components/home-components.module.ts
View File

@ -35,7 +35,6 @@ import { AddAttributeDialogComponent } from '@home/components/attribute/add-attr
import { EditAttributeValuePanelComponent } from '@home/components/attribute/edit-attribute-value-panel.component';
import { DashboardComponent } from '@home/components/dashboard/dashboard.component';
import { WidgetComponent } from '@home/components/widget/widget.component';
import { WidgetComponentService } from '@home/components/widget/widget-component.service';
import { LegendComponent } from '@home/components/widget/legend.component';
import { AliasesEntitySelectPanelComponent } from '@home/components/alias/aliases-entity-select-panel.component';
import { AliasesEntitySelectComponent } from '@home/components/alias/aliases-entity-select.component';
@ -456,7 +455,6 @@ import { AssetProfileAutocompleteComponent } from '@home/components/profile/asse
RateLimitsDetailsDialogComponent
],
providers: [
WidgetComponentService,
CustomDialogService,
ImportExportService,
{provide: EMBED_DASHBOARD_DIALOG_TOKEN, useValue: EmbedDashboardDialogComponent},

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

@ -45,13 +45,13 @@ import { MODULES_MAP } from '@shared/public-api';
import * as tinycolor_ from 'tinycolor2';
import moment from 'moment';
import { IModulesMap } from '@modules/common/modules-map.models';
import { HOME_COMPONENTS_MODULE_TOKEN } from '@home/components/tokens';
import { widgetSettingsComponentsMap } from '@home/components/widget/lib/settings/widget-settings.module';
const tinycolor = tinycolor_;
// @dynamic
@Injectable()
@Injectable({
providedIn: 'root'
})
export class WidgetComponentService {
private cssParser = new cssjs();
@ -68,7 +68,6 @@ export class WidgetComponentService {
constructor(@Inject(WINDOW) private window: Window,
@Optional() @Inject(MODULES_MAP) private modulesMap: IModulesMap,
@Inject(HOME_COMPONENTS_MODULE_TOKEN) private homeComponentsModule: Type<any>,
private dynamicComponentFactoryService: DynamicComponentFactoryService,
private widgetService: WidgetService,
private utils: UtilsService,
@ -185,9 +184,9 @@ export class WidgetComponentService {
() => {
const loadDefaultWidgetInfoTasks = [
this.loadWidgetResources(this.missingWidgetType, 'global-widget-missing-type',
[SharedModule, WidgetComponentsModule, this.homeComponentsModule]),
[SharedModule, WidgetComponentsModule]),
this.loadWidgetResources(this.errorWidgetType, 'global-widget-error-type',
[SharedModule, WidgetComponentsModule, this.homeComponentsModule]),
[SharedModule, WidgetComponentsModule]),
];
forkJoin(loadDefaultWidgetInfoTasks).subscribe(
() => {
@ -231,13 +230,14 @@ export class WidgetComponentService {
}
}
public getWidgetInfo(bundleAlias: string, widgetTypeAlias: string, isSystem: boolean): Observable<WidgetInfo> {
public getWidgetInfo(bundleAlias: string, widgetTypeAlias: string, isSystem: boolean, modules?: Type<any>[]): Observable<WidgetInfo> {
return this.init().pipe(
mergeMap(() => this.getWidgetInfoInternal(bundleAlias, widgetTypeAlias, isSystem))
mergeMap(() => this.getWidgetInfoInternal(bundleAlias, widgetTypeAlias, isSystem, modules))
);
}
private getWidgetInfoInternal(bundleAlias: string, widgetTypeAlias: string, isSystem: boolean): Observable<WidgetInfo> {
private getWidgetInfoInternal(bundleAlias: string, widgetTypeAlias: string, isSystem: boolean,
modules?: Type<any>[]): Observable<WidgetInfo> {
const widgetInfoSubject = new ReplaySubject<WidgetInfo>();
const widgetInfo = this.getWidgetInfoFromCache(bundleAlias, widgetTypeAlias, isSystem);
if (widgetInfo) {
@ -245,7 +245,7 @@ export class WidgetComponentService {
widgetInfoSubject.complete();
} else {
if (this.utils.widgetEditMode) {
this.loadWidget(this.editingWidgetType, bundleAlias, isSystem, widgetInfoSubject);
this.loadWidget(this.editingWidgetType, bundleAlias, isSystem, widgetInfoSubject, modules);
} else {
const key = this.createWidgetInfoCacheKey(bundleAlias, widgetTypeAlias, isSystem);
let fetchQueue = this.widgetsInfoFetchQueue.get(key);
@ -256,7 +256,7 @@ export class WidgetComponentService {
this.widgetsInfoFetchQueue.set(key, fetchQueue);
this.widgetService.getWidgetType(bundleAlias, widgetTypeAlias, isSystem, {ignoreErrors: true}).subscribe(
(widgetType) => {
this.loadWidget(widgetType, bundleAlias, isSystem, widgetInfoSubject);
this.loadWidget(widgetType, bundleAlias, isSystem, widgetInfoSubject, modules);
},
() => {
widgetInfoSubject.next(this.missingWidgetType);
@ -270,7 +270,8 @@ export class WidgetComponentService {
return widgetInfoSubject.asObservable();
}
private loadWidget(widgetType: WidgetType, bundleAlias: string, isSystem: boolean, widgetInfoSubject: Subject<WidgetInfo>) {
private loadWidget(widgetType: WidgetType, bundleAlias: string, isSystem: boolean, widgetInfoSubject: Subject<WidgetInfo>,
modules?: Type<any>[]) {
const widgetInfo = toWidgetInfo(widgetType);
const key = this.createWidgetInfoCacheKey(bundleAlias, widgetInfo.alias, isSystem);
let widgetControllerDescriptor: WidgetControllerDescriptor = null;
@ -283,7 +284,11 @@ export class WidgetComponentService {
}
if (widgetControllerDescriptor) {
const widgetNamespace = `widget-type-${(isSystem ? 'sys-' : '')}${bundleAlias}-${widgetInfo.alias}`;
this.loadWidgetResources(widgetInfo, widgetNamespace, [SharedModule, WidgetComponentsModule, this.homeComponentsModule]).subscribe(
const widgetModules = [SharedModule, WidgetComponentsModule];
if (modules) {
widgetModules.push(...modules);
}
this.loadWidgetResources(widgetInfo, widgetNamespace, widgetModules).subscribe(
() => {
if (widgetControllerDescriptor.settingsSchema) {
widgetInfo.typeSettingsSchema = widgetControllerDescriptor.settingsSchema;

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

@ -31,6 +31,7 @@ import {
OnInit,
Renderer2,
SimpleChanges,
Type,
ViewChild,
ViewContainerRef,
ViewEncapsulation
@ -114,7 +115,7 @@ import { MobileService } from '@core/services/mobile.service';
import { DialogService } from '@core/services/dialog.service';
import { PopoverPlacement } from '@shared/components/popover.models';
import { TbPopoverService } from '@shared/components/popover.service';
import { DASHBOARD_PAGE_COMPONENT_TOKEN } from '@home/components/tokens';
import { DASHBOARD_PAGE_COMPONENT_TOKEN, HOME_COMPONENTS_MODULE_TOKEN } from '@home/components/tokens';
@Component({
selector: 'tb-widget',
@ -190,6 +191,7 @@ export class WidgetComponent extends PageComponent implements OnInit, AfterViewI
private popoverService: TbPopoverService,
@Inject(EMBED_DASHBOARD_DIALOG_TOKEN) private embedDashboardDialogComponent: ComponentType<any>,
@Inject(DASHBOARD_PAGE_COMPONENT_TOKEN) private dashboardPageComponent: ComponentType<any>,
@Inject(HOME_COMPONENTS_MODULE_TOKEN) private homeComponentsModule: Type<any>,
private widgetService: WidgetService,
private resources: ResourcesService,
private timeService: TimeService,
@ -354,7 +356,8 @@ export class WidgetComponent extends PageComponent implements OnInit, AfterViewI
this.subscriptionContext.widgetUtils = this.widgetContext.utils;
this.subscriptionContext.getServerTimeDiff = this.dashboardService.getServerTimeDiff.bind(this.dashboardService);
this.widgetComponentService.getWidgetInfo(this.widget.bundleAlias, this.widget.typeAlias, this.widget.isSystemType).subscribe(
this.widgetComponentService.getWidgetInfo(this.widget.bundleAlias, this.widget.typeAlias, this.widget.isSystemType,
[this.homeComponentsModule]).subscribe(
(widgetInfo) => {
this.widgetInfo = widgetInfo;
this.loadFromWidgetInfo();