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

UI: Add lazy-load rulechain page components

Browse Source
This commit is contained in:
Vladyslav_Prykhodko 2025-01-09 13:04:40 +02:00
parent f57d46af37
commit 0de0479177
7 changed files with 89 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
ui-ngx/src/app/core/http/rule-chain.service.ts
View File

@ -53,6 +53,7 @@ export class RuleChainService {
private ruleNodeComponentsMap: Map<RuleChainType, Array<RuleNodeComponentDescriptor>> =
new Map<RuleChainType, Array<RuleNodeComponentDescriptor>>();
private ruleNodeConfigComponents: {[directive: string]: Type<IRuleNodeConfigurationComponent>} = {};
private systemRuleNodeConfigComponents: {[directive: string]: Type<IRuleNodeConfigurationComponent>} = {};
constructor(
private http: HttpClient,
@ -128,7 +129,10 @@ export class RuleChainService {
}
}
public getRuleNodeConfigComponent(directive: string): Type<IRuleNodeConfigurationComponent> {
public getRuleNodeConfigComponent(directive: string, isSystemComponent = false): Type<IRuleNodeConfigurationComponent> {
if (isSystemComponent) {
return this.systemRuleNodeConfigComponents[directive];
}
return this.ruleNodeConfigComponents[directive];
}
@ -180,6 +184,10 @@ export class RuleChainService {
return this.http.post<TestScriptResult>(url, inputParams, defaultHttpOptionsFromConfig(config));
}
public registemSystemRuleNodeConfigComponent(componentMap: Record<string, Type<IRuleNodeConfigurationComponent>>) {
this.systemRuleNodeConfigComponents = componentMap;
}
private loadRuleNodeComponents(ruleChainType: RuleChainType, config?: RequestConfig): Observable<Array<RuleNodeComponentDescriptor>> {
return this.componentDescriptorService.getComponentDescriptorsByTypes(ruleNodeTypeComponentTypes, ruleChainType, config).pipe(
map((components) => {

12
ui-ngx/src/app/modules/home/components/rule-node/rule-node-config.module.ts
View File

@ -43,6 +43,7 @@ import {
FlowRuleNodeConfigModule
} from '@home/components/rule-node/flow/flow-rule-node-config.module';
import { IRuleNodeConfigurationComponent } from '@shared/models/rule-node.models';
import { RuleChainService } from '@core/http/rule-chain.service';
@NgModule({
declarations: [
@ -62,9 +63,9 @@ import { IRuleNodeConfigurationComponent } from '@shared/models/rule-node.models
EmptyConfigComponent
]
})
export class RuleNodeConfigModule {}
export const ruleNodeConfigComponentsMap: Record<string, Type<IRuleNodeConfigurationComponent>> = {
export class RuleNodeConfigModule {
constructor(private ruleChainService: RuleChainService) {
const ruleNodeConfigComponentsMap: Record<string, Type<IRuleNodeConfigurationComponent>> = {
...actionRuleNodeConfigComponentsMap,
...enrichmentRuleNodeConfigComponentsMap,
...externalRuleNodeConfigComponentsMap,
@ -72,4 +73,7 @@ export const ruleNodeConfigComponentsMap: Record<string, Type<IRuleNodeConfigura
...flowRuleNodeConfigComponentsMap,
...transformationRuleNodeConfigComponentsMap,
'tbNodeEmptyConfig': EmptyConfigComponent
};
};
this.ruleChainService.registemSystemRuleNodeConfigComponent(ruleNodeConfigComponentsMap);
}
}

3
ui-ngx/src/app/modules/home/pages/edge/edge-routing.module.ts
View File

@ -291,6 +291,7 @@ const routes: Routes = [
import: false,
ruleChainType: RuleChainType.EDGE
},
loadChildren: () => import('../rulechain/rulechain-page.module').then(m => m.RuleChainPageModule),
resolve: {
ruleChain: RuleChainResolver,
ruleChainMetaData: RuleChainMetaDataResolver,
@ -336,6 +337,7 @@ const routes: Routes = [
import: false,
ruleChainType: RuleChainType.EDGE
},
loadChildren: () => import('../rulechain/rulechain-page.module').then(m => m.RuleChainPageModule),
resolve: {
ruleChain: RuleChainResolver,
ruleChainMetaData: RuleChainMetaDataResolver,
@ -358,6 +360,7 @@ const routes: Routes = [
import: true,
ruleChainType: RuleChainType.EDGE
},
loadChildren: () => import('../rulechain/rulechain-page.module').then(m => m.RuleChainPageModule),
resolve: {
ruleNodeComponents: RuleNodeComponentsResolver,
tooltipster: TooltipsterResolver

10
ui-ngx/src/app/modules/home/pages/rulechain/rule-node-config.component.ts
View File

@ -21,7 +21,7 @@ import {
forwardRef,
Input,
OnDestroy,
Output, Type,
Output,
ViewChild,
ViewContainerRef
} from '@angular/core';
@ -43,7 +43,6 @@ import { coerceBooleanProperty } from '@angular/cdk/coercion';
import { JsonObjectEditComponent } from '@shared/components/json-object-edit.component';
import { deepClone } from '@core/utils';
import { RuleChainType } from '@shared/models/rule-chain.models';
import { ruleNodeConfigComponentsMap } from '@home/components/rule-node/rule-node-config.module';
@Component({
selector: 'tb-rule-node-config',
@ -213,12 +212,7 @@ export class RuleNodeConfigComponent implements ControlValueAccessor, OnDestroy
this.changeScriptSubscription = null;
}
this.definedConfigContainer.clear();
let component: Type<IRuleNodeConfigurationComponent>;
if (!this.nodeDefinition.uiResources?.length) {
component = ruleNodeConfigComponentsMap[this.nodeDefinition.configDirective];
} else {
component = this.ruleChainService.getRuleNodeConfigComponent(this.nodeDefinition.configDirective);
}
const component = this.ruleChainService.getRuleNodeConfigComponent(this.nodeDefinition.configDirective, !this.nodeDefinition.uiResources?.length);
this.definedConfigComponentRef = this.definedConfigContainer.createComponent(component);
this.definedConfigComponent = this.definedConfigComponentRef.instance;
this.definedConfigComponent.ruleNodeId = this.ruleNodeId;

57
ui-ngx/src/app/modules/home/pages/rulechain/rulechain-page.module.ts Normal file
View File

@ -0,0 +1,57 @@
///
/// Copyright © 2016-2024 The Thingsboard Authors
///
/// Licensed under the Apache License, Version 2.0 (the "License");
/// you may not use this file except in compliance with the License.
/// You may obtain a copy of the License at
///
/// http://www.apache.org/licenses/LICENSE-2.0
///
/// Unless required by applicable law or agreed to in writing, software
/// distributed under the License is distributed on an "AS IS" BASIS,
/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
/// See the License for the specific language governing permissions and
/// limitations under the License.
///
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SharedModule } from '@shared/shared.module';
import { HomeComponentsModule } from '@home/components/home-components.module';
import { DurationLeftPipe } from '@shared/pipe/duration-left.pipe';
import {
EntityDebugSettingsButtonComponent
} from '@home/components/entity/debug/entity-debug-settings-button.component';
import { RuleNodeConfigModule } from '@home/components/rule-node/rule-node-config.module';
import {
AddRuleNodeDialogComponent,
AddRuleNodeLinkDialogComponent,
CreateNestedRuleChainDialogComponent,
RuleChainPageComponent
} from '@home/pages/rulechain/rulechain-page.component';
import { RuleNodeDetailsComponent } from '@home/pages/rulechain/rule-node-details.component';
import { RuleNodeConfigComponent } from '@home/pages/rulechain/rule-node-config.component';
import { LinkLabelsComponent } from '@home/pages/rulechain/link-labels.component';
import { RuleNodeLinkComponent } from '@home/pages/rulechain/rule-node-link.component';
@NgModule({
declarations: [
RuleChainPageComponent,
RuleNodeDetailsComponent,
LinkLabelsComponent,
RuleNodeLinkComponent,
RuleNodeConfigComponent,
AddRuleNodeLinkDialogComponent,
AddRuleNodeDialogComponent,
CreateNestedRuleChainDialogComponent
],
imports: [
CommonModule,
SharedModule,
DurationLeftPipe,
EntityDebugSettingsButtonComponent,
RuleNodeConfigModule,
HomeComponentsModule,
]
})
export class RuleChainPageModule {}

2
ui-ngx/src/app/modules/home/pages/rulechain/rulechain-routing.module.ts
View File

@ -148,6 +148,7 @@ const routes: Routes = [
import: false,
ruleChainType: RuleChainType.CORE
},
loadChildren: () => import('./rulechain-page.module').then(m => m.RuleChainPageModule),
resolve: {
ruleChain: RuleChainResolver,
ruleChainMetaData: RuleChainMetaDataResolver,
@ -170,6 +171,7 @@ const routes: Routes = [
import: true,
ruleChainType: RuleChainType.CORE
},
loadChildren: () => import('./rulechain-page.module').then(m => m.RuleChainPageModule),
resolve: {
ruleNodeComponents: RuleNodeComponentsResolver,
tooltipster: TooltipsterResolver

25
ui-ngx/src/app/modules/home/pages/rulechain/rulechain.module.ts
View File

@ -21,34 +21,14 @@ import { RuleChainComponent } from '@modules/home/pages/rulechain/rulechain.comp
import { RuleChainRoutingModule } from '@modules/home/pages/rulechain/rulechain-routing.module';
import { HomeComponentsModule } from '@modules/home/components/home-components.module';
import { RuleChainTabsComponent } from '@home/pages/rulechain/rulechain-tabs.component';
import {
AddRuleNodeDialogComponent,
AddRuleNodeLinkDialogComponent, CreateNestedRuleChainDialogComponent,
RuleChainPageComponent
} from './rulechain-page.component';
import { RuleNodeComponent } from '@home/pages/rulechain/rulenode.component';
import { FC_NODE_COMPONENT_CONFIG } from 'ngx-flowchart';
import { RuleNodeDetailsComponent } from './rule-node-details.component';
import { RuleNodeLinkComponent } from './rule-node-link.component';
import { LinkLabelsComponent } from '@home/pages/rulechain/link-labels.component';
import { RuleNodeConfigComponent } from './rule-node-config.component';
import { DurationLeftPipe } from '@shared/pipe/duration-left.pipe';
import { EntityDebugSettingsButtonComponent } from '@home/components/entity/debug/entity-debug-settings-button.component';
import { RuleNodeConfigModule } from '@home/components/rule-node/rule-node-config.module';
@NgModule({
declarations: [
RuleChainComponent,
RuleChainTabsComponent,
RuleChainPageComponent,
RuleNodeComponent,
RuleNodeDetailsComponent,
RuleNodeConfigComponent,
LinkLabelsComponent,
RuleNodeLinkComponent,
AddRuleNodeLinkDialogComponent,
AddRuleNodeDialogComponent,
CreateNestedRuleChainDialogComponent
],
providers: [
{
@ -56,16 +36,13 @@ import { RuleNodeConfigModule } from '@home/components/rule-node/rule-node-confi
useValue: {
nodeComponentType: RuleNodeComponent
}
}
},
],
imports: [
CommonModule,
SharedModule,
HomeComponentsModule,
RuleChainRoutingModule,
DurationLeftPipe,
EntityDebugSettingsButtonComponent,
RuleNodeConfigModule,
]
})
export class RuleChainModule { }