Merge pull request #7863 from Terny22/improvments/dashboards

Optimizations for dashboard-pages that open in popover or dialog.

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

@@ -869,8 +869,38 @@ export class EntityService {
         };
         aliasInfo.currentEntity = null;
         if (!aliasInfo.resolveMultiple && aliasInfo.entityFilter) {
-          return this.findSingleEntityInfoByEntityFilter(aliasInfo.entityFilter,
+          let entityInfoObservable: Observable<EntityInfo>;
-            {ignoreLoading: true, ignoreErrors: true}).pipe(
+          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;

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

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

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

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

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

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

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

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

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

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