1944 lines
67 KiB
TypeScript
1944 lines
67 KiB
TypeScript
///
|
|
/// Copyright © 2016-2025 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 {
|
|
AfterViewChecked,
|
|
AfterViewInit,
|
|
ChangeDetectorRef,
|
|
Component,
|
|
EventEmitter,
|
|
HostBinding,
|
|
Inject,
|
|
OnDestroy,
|
|
OnInit,
|
|
QueryList,
|
|
Renderer2,
|
|
SecurityContext,
|
|
SkipSelf,
|
|
ViewChild,
|
|
ViewChildren,
|
|
ViewContainerRef,
|
|
ViewEncapsulation
|
|
} from '@angular/core';
|
|
import { PageComponent } from '@shared/components/page.component';
|
|
import { Store } from '@ngrx/store';
|
|
import { AppState } from '@core/core.state';
|
|
import {
|
|
FormBuilder,
|
|
FormGroupDirective,
|
|
NgForm,
|
|
UntypedFormBuilder,
|
|
UntypedFormControl,
|
|
UntypedFormGroup,
|
|
Validators
|
|
} from '@angular/forms';
|
|
import { HasDirtyFlag } from '@core/guards/confirm-on-exit.guard';
|
|
import { TranslateService } from '@ngx-translate/core';
|
|
import { ErrorStateMatcher } from '@angular/material/core';
|
|
import { MAT_DIALOG_DATA, MatDialog, MatDialogRef } from '@angular/material/dialog';
|
|
import { MatExpansionPanel } from '@angular/material/expansion';
|
|
import { DialogService } from '@core/services/dialog.service';
|
|
import { AuthService } from '@core/auth/auth.service';
|
|
import { ActivatedRoute, Router } from '@angular/router';
|
|
import {
|
|
inputNodeComponent,
|
|
NodeConnectionInfo,
|
|
RuleChain,
|
|
RuleChainImport,
|
|
RuleChainMetaData,
|
|
RuleChainType
|
|
} from '@shared/models/rule-chain.models';
|
|
import { FcItemInfo, FlowchartConstants, NgxFlowchartComponent, UserCallbacks } from 'ngx-flowchart';
|
|
import {
|
|
FcRuleEdge,
|
|
FcRuleNode,
|
|
FcRuleNodeType,
|
|
getRuleNodeHelpLink,
|
|
LinkLabel,
|
|
outputNodeClazz,
|
|
ruleChainNodeClazz,
|
|
RuleNode,
|
|
RuleNodeComponentDescriptor,
|
|
RuleNodeType,
|
|
ruleNodeTypeDescriptors,
|
|
ruleNodeTypesLibrary
|
|
} from '@shared/models/rule-node.models';
|
|
import { FcRuleNodeModel, FcRuleNodeTypeModel, RuleChainMenuContextInfo } from './rulechain-page.models';
|
|
import { RuleChainService } from '@core/http/rule-chain.service';
|
|
import { NEVER, Observable, of, ReplaySubject, skip, startWith, Subject, throwError } from 'rxjs';
|
|
import { catchError, debounceTime, distinctUntilChanged, mergeMap, takeUntil, tap } from 'rxjs/operators';
|
|
import { ISearchableComponent } from '../../models/searchable-component.models';
|
|
import { deepClone, isDefinedAndNotNull } from '@core/utils';
|
|
import { RuleNodeDetailsComponent } from '@home/pages/rulechain/rule-node-details.component';
|
|
import { RuleNodeLinkComponent } from './rule-node-link.component';
|
|
import { DialogComponent } from '@shared/components/dialog.component';
|
|
import { MatMenuTrigger } from '@angular/material/menu';
|
|
import { ItemBufferService, RuleNodeConnection } from '@core/services/item-buffer.service';
|
|
import { Hotkey } from 'angular2-hotkeys';
|
|
import { DebugEventType, DebugRuleNodeEventBody, EventType } from '@shared/models/event.models';
|
|
import { MatMiniFabButton } from '@angular/material/button';
|
|
import { TbPopoverService } from '@shared/components/popover.service';
|
|
import { VersionControlComponent } from '@home/components/vc/version-control.component';
|
|
import { ComponentClusteringMode } from '@shared/models/component-descriptor.models';
|
|
import { MatDrawer } from '@angular/material/sidenav';
|
|
import { HttpStatusCode } from '@angular/common/http';
|
|
import { TbContextMenuEvent } from '@shared/models/jquery-event.models';
|
|
import { EntityDebugSettings } from '@shared/models/entity.models';
|
|
import Timeout = NodeJS.Timeout;
|
|
import { DomSanitizer } from '@angular/platform-browser';
|
|
|
|
@Component({
|
|
selector: 'tb-rulechain-page',
|
|
templateUrl: './rulechain-page.component.html',
|
|
styleUrls: ['./rulechain-page.component.scss'],
|
|
encapsulation: ViewEncapsulation.None
|
|
})
|
|
export class RuleChainPageComponent extends PageComponent
|
|
implements AfterViewInit, OnInit, OnDestroy, HasDirtyFlag, ISearchableComponent, AfterViewChecked {
|
|
|
|
get isDirty(): boolean {
|
|
return this.isDirtyValue || this.isImport;
|
|
}
|
|
|
|
set isDirty(value: boolean) {
|
|
this.isDirtyValue = value;
|
|
}
|
|
|
|
@HostBinding('style.width') width = '100%';
|
|
@HostBinding('style.height') height = '100%';
|
|
|
|
@ViewChild('ruleChainCanvas', {static: true}) ruleChainCanvas: NgxFlowchartComponent;
|
|
|
|
@ViewChildren('ruleNodeTypeExpansionPanels',
|
|
{read: MatExpansionPanel}) expansionPanels: QueryList<MatExpansionPanel>;
|
|
|
|
@ViewChild('ruleChainMenuTrigger', {static: true}) ruleChainMenuTrigger: MatMenuTrigger;
|
|
|
|
@ViewChild('drawer') drawer: MatDrawer;
|
|
|
|
eventTypes = EventType;
|
|
|
|
debugEventTypes = DebugEventType;
|
|
|
|
ruleChainMenuPosition = { x: '0px', y: '0px' };
|
|
|
|
contextMenuEvent: TbContextMenuEvent;
|
|
|
|
ruleNodeTypeDescriptorsMap = ruleNodeTypeDescriptors;
|
|
ruleNodeTypesLibraryArray = ruleNodeTypesLibrary;
|
|
|
|
isImport: boolean;
|
|
isDirtyValue: boolean;
|
|
isInvalid = false;
|
|
|
|
ruleChainType: RuleChainType;
|
|
|
|
errorTooltips: {[nodeId: string]: JQueryTooltipster.ITooltipsterInstance} = {};
|
|
isFullscreen = false;
|
|
|
|
selectedRuleNodeTabIndex = 0;
|
|
editingRuleNode: FcRuleNode = null;
|
|
isEditingRuleNode = false;
|
|
editingRuleNodeIndex = -1;
|
|
editingRuleNodeAllowCustomLabels = false;
|
|
editingRuleNodeLinkLabels: {[label: string]: LinkLabel};
|
|
editingRuleNodeSourceRuleChainId: string;
|
|
ruleNodeTestButtonLabel: string;
|
|
|
|
@ViewChild('tbRuleNode') ruleNodeComponent: RuleNodeDetailsComponent;
|
|
@ViewChild('tbRuleNodeLink') ruleNodeLinkComponent: RuleNodeLinkComponent;
|
|
|
|
editingRuleNodeLink: FcRuleEdge = null;
|
|
isEditingRuleNodeLink = false;
|
|
editingRuleNodeLinkIndex = -1;
|
|
|
|
hotKeys: Hotkey[] = [];
|
|
|
|
enableHotKeys = true;
|
|
|
|
ruleNodeSearch = '';
|
|
ruleNodeTypeSearch = this.fb.control('', {nonNullable: true});
|
|
|
|
ruleChain: RuleChain;
|
|
ruleChainMetaData: RuleChainMetaData;
|
|
|
|
ruleChainModel: FcRuleNodeModel = {
|
|
nodes: [],
|
|
edges: []
|
|
};
|
|
selectedObjects = [];
|
|
|
|
editCallbacks: UserCallbacks = {
|
|
edgeDoubleClick: (event, edge) => {
|
|
this.openLinkDetails(edge);
|
|
},
|
|
edgeEdit: (event, edge) => {
|
|
this.openLinkDetails(edge);
|
|
},
|
|
nodeCallbacks: {
|
|
doubleClick: (event, node: FcRuleNode) => {
|
|
this.openNodeDetails(node);
|
|
},
|
|
nodeEdit: (event, node: FcRuleNode) => {
|
|
this.openNodeDetails(node);
|
|
},
|
|
mouseEnter: this.displayNodeDescriptionTooltip.bind(this),
|
|
mouseLeave: this.destroyTooltips.bind(this),
|
|
mouseDown: this.destroyTooltips.bind(this)
|
|
},
|
|
isValidEdge: (source, destination) =>
|
|
source.type === FlowchartConstants.rightConnectorType && destination.type === FlowchartConstants.leftConnectorType,
|
|
createEdge: (event, edge: FcRuleEdge) => {
|
|
const sourceNode = this.ruleChainCanvas.modelService.nodes.getNodeByConnectorId(edge.source) as FcRuleNode;
|
|
if (sourceNode.component.type === RuleNodeType.INPUT) {
|
|
const found = this.ruleChainModel.edges.find(theEdge => theEdge.source === (this.inputConnectorId + ''));
|
|
if (found) {
|
|
this.ruleChainCanvas.modelService.edges.delete(found);
|
|
}
|
|
return of(edge);
|
|
} else {
|
|
if (edge.label) {
|
|
if (!edge.labels) {
|
|
edge.labels = edge.label.split(' / ');
|
|
}
|
|
return of(edge);
|
|
} else {
|
|
const labels = this.ruleChainService.getRuleNodeSupportedLinks(sourceNode.component);
|
|
const allowCustomLabels = this.ruleChainService.ruleNodeAllowCustomLinks(sourceNode.component);
|
|
const sourceRuleChainId = this.ruleChainService.ruleNodeSourceRuleChainId(sourceNode.component, sourceNode.configuration);
|
|
this.enableHotKeys = false;
|
|
return this.addRuleNodeLink(edge, labels, allowCustomLabels, sourceRuleChainId).pipe(
|
|
tap(() => {
|
|
this.enableHotKeys = true;
|
|
}),
|
|
mergeMap((res) => {
|
|
if (res) {
|
|
return of(res);
|
|
} else {
|
|
return NEVER;
|
|
}
|
|
})
|
|
);
|
|
}
|
|
}
|
|
},
|
|
dropNode: (event, node: FcRuleNode) => {
|
|
this.addRuleNode(node);
|
|
}
|
|
};
|
|
|
|
nextNodeID: number;
|
|
nextConnectorID: number;
|
|
inputConnectorId: number;
|
|
|
|
ruleNodeTypesModel: {[type: string]: {model: FcRuleNodeTypeModel; selectedObjects: any[]}} = {};
|
|
|
|
nodeLibCallbacks: UserCallbacks = {
|
|
nodeCallbacks: {
|
|
mouseEnter: this.displayLibNodeDescriptionTooltip.bind(this),
|
|
mouseLeave: this.destroyTooltips.bind(this),
|
|
mouseDown: this.destroyTooltips.bind(this)
|
|
}
|
|
};
|
|
|
|
ruleNodeComponents: Array<RuleNodeComponentDescriptor>;
|
|
|
|
flowchartConstants = FlowchartConstants;
|
|
|
|
updateBreadcrumbs = new EventEmitter();
|
|
|
|
private destroy$ = new Subject<void>();
|
|
|
|
private tooltipTimeout: Timeout;
|
|
|
|
constructor(protected store: Store<AppState>,
|
|
private route: ActivatedRoute,
|
|
private router: Router,
|
|
private ruleChainService: RuleChainService,
|
|
private authService: AuthService,
|
|
private translate: TranslateService,
|
|
private itembuffer: ItemBufferService,
|
|
private popoverService: TbPopoverService,
|
|
private renderer: Renderer2,
|
|
private viewContainerRef: ViewContainerRef,
|
|
private changeDetector: ChangeDetectorRef,
|
|
private sanitizer:DomSanitizer,
|
|
public dialog: MatDialog,
|
|
public dialogService: DialogService,
|
|
public fb: FormBuilder) {
|
|
super(store);
|
|
this.route.data.pipe(
|
|
takeUntil(this.destroy$)
|
|
).subscribe(
|
|
() => {
|
|
this.reset();
|
|
this.init();
|
|
}
|
|
);
|
|
}
|
|
|
|
ngOnInit() {
|
|
this.ruleNodeTypeSearch.valueChanges.pipe(
|
|
debounceTime(150),
|
|
startWith(''),
|
|
distinctUntilChanged((a: string, b: string) => a.trim() === b.trim()),
|
|
skip(1),
|
|
takeUntil(this.destroy$)
|
|
).subscribe(() => this.updateRuleChainLibrary());
|
|
}
|
|
|
|
ngAfterViewChecked(){
|
|
this.changeDetector.detectChanges();
|
|
}
|
|
|
|
ngAfterViewInit() {
|
|
this.ruleChainCanvas.adjustCanvasSize(true);
|
|
}
|
|
|
|
ngOnDestroy() {
|
|
super.ngOnDestroy();
|
|
this.destroy$.next();
|
|
this.destroy$.complete();
|
|
}
|
|
|
|
currentRuleChainIdChanged(ruleChainId: string) {
|
|
if (this.ruleChainType === RuleChainType.CORE) {
|
|
this.router.navigateByUrl(`ruleChains/${ruleChainId}`);
|
|
} else {
|
|
this.router.navigateByUrl(`edgeManagement/ruleChains/${ruleChainId}`);
|
|
}
|
|
}
|
|
|
|
onSearchTextUpdated(searchText: string) {
|
|
this.ruleNodeSearch = searchText;
|
|
this.updateRuleNodesHighlight();
|
|
}
|
|
|
|
private init() {
|
|
this.initHotKeys();
|
|
this.isImport = this.route.snapshot.data.import;
|
|
this.ruleChainType = this.route.snapshot.data.ruleChainType;
|
|
if (this.isImport) {
|
|
const ruleChainImport: RuleChainImport = this.itembuffer.getRuleChainImport();
|
|
this.ruleChain = ruleChainImport.ruleChain;
|
|
this.ruleChainMetaData = ruleChainImport.metadata;
|
|
} else {
|
|
this.ruleChain = this.route.snapshot.data.ruleChain;
|
|
this.ruleChainMetaData = this.route.snapshot.data.ruleChainMetaData;
|
|
}
|
|
this.ruleNodeComponents = this.route.snapshot.data.ruleNodeComponents;
|
|
for (const type of ruleNodeTypesLibrary) {
|
|
const desc = ruleNodeTypeDescriptors.get(type);
|
|
if (!desc.special) {
|
|
this.ruleNodeTypesModel[type] = {
|
|
model: {
|
|
nodes: [],
|
|
edges: []
|
|
},
|
|
selectedObjects: []
|
|
};
|
|
}
|
|
}
|
|
this.updateRuleChainLibrary();
|
|
this.createRuleChainModel();
|
|
}
|
|
|
|
private reset(): void {
|
|
this.selectedObjects = [];
|
|
this.ruleChainModel.nodes = [];
|
|
this.ruleChainModel.edges = [];
|
|
this.ruleNodeTypesModel = {};
|
|
if (this.ruleChainCanvas) {
|
|
this.ruleChainCanvas.adjustCanvasSize(true);
|
|
}
|
|
this.isEditingRuleNode = false;
|
|
this.isEditingRuleNodeLink = false;
|
|
this.updateRuleNodesHighlight();
|
|
}
|
|
|
|
private initHotKeys(): void {
|
|
if (!this.hotKeys.length) {
|
|
this.hotKeys.push(
|
|
new Hotkey(['ctrl+a', 'meta+a'], (event: KeyboardEvent) => {
|
|
if (this.enableHotKeys) {
|
|
event.preventDefault();
|
|
this.ruleChainCanvas.modelService.selectAll();
|
|
return false;
|
|
}
|
|
return true;
|
|
}, [],
|
|
this.translate.instant('rulenode.select-all-objects'))
|
|
);
|
|
this.hotKeys.push(
|
|
new Hotkey(['ctrl+c', 'meta+c'], (event: KeyboardEvent) => {
|
|
if (this.enableHotKeys) {
|
|
event.preventDefault();
|
|
this.copyRuleNodes();
|
|
return false;
|
|
}
|
|
return true;
|
|
}, [],
|
|
this.translate.instant('rulenode.copy-selected'))
|
|
);
|
|
this.hotKeys.push(
|
|
new Hotkey(['ctrl+v', 'meta+v'], (event: KeyboardEvent) => {
|
|
if (this.enableHotKeys) {
|
|
event.preventDefault();
|
|
if (this.itembuffer.hasRuleNodes()) {
|
|
this.pasteRuleNodes();
|
|
}
|
|
return false;
|
|
}
|
|
return true;
|
|
}, [],
|
|
this.translate.instant('action.paste'))
|
|
);
|
|
this.hotKeys.push(
|
|
new Hotkey('esc', (event: KeyboardEvent) => {
|
|
if (this.enableHotKeys) {
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
this.ruleChainCanvas.modelService.deselectAll();
|
|
return false;
|
|
}
|
|
return true;
|
|
}, ['INPUT', 'SELECT', 'TEXTAREA'],
|
|
this.translate.instant('rulenode.deselect-all-objects'))
|
|
);
|
|
this.hotKeys.push(
|
|
new Hotkey(['ctrl+s', 'meta+s'], (event: KeyboardEvent) => {
|
|
if (this.enableHotKeys) {
|
|
event.preventDefault();
|
|
this.saveRuleChain();
|
|
return false;
|
|
}
|
|
return true;
|
|
}, ['INPUT', 'SELECT', 'TEXTAREA'],
|
|
this.translate.instant('action.apply'))
|
|
);
|
|
this.hotKeys.push(
|
|
new Hotkey(['ctrl+z', 'meta+z'], (event: KeyboardEvent) => {
|
|
if (this.enableHotKeys) {
|
|
event.preventDefault();
|
|
this.revertRuleChain();
|
|
return false;
|
|
}
|
|
return true;
|
|
}, ['INPUT', 'SELECT', 'TEXTAREA'],
|
|
this.translate.instant('action.decline-changes'))
|
|
);
|
|
this.hotKeys.push(
|
|
new Hotkey('del', (event: KeyboardEvent) => {
|
|
if (this.enableHotKeys) {
|
|
event.preventDefault();
|
|
this.ruleChainCanvas.modelService.deleteSelected();
|
|
return false;
|
|
}
|
|
return true;
|
|
}, [],
|
|
this.translate.instant('rulenode.delete-selected-objects'))
|
|
);
|
|
this.hotKeys.push(
|
|
new Hotkey(['ctrl+r', 'meta+r'], (event: KeyboardEvent) => {
|
|
if (this.enableHotKeys && this.canCreateNestedRuleChain()) {
|
|
event.preventDefault();
|
|
this.createNestedRuleChain();
|
|
return false;
|
|
}
|
|
return true;
|
|
}, ['INPUT', 'SELECT', 'TEXTAREA'],
|
|
this.translate.instant('rulenode.create-nested-rulechain'))
|
|
);
|
|
}
|
|
}
|
|
|
|
updateRuleChainLibrary() {
|
|
const search = this.ruleNodeTypeSearch.value.trim().toUpperCase();
|
|
const res = this.ruleNodeComponents.filter(
|
|
(ruleNodeComponent) => ruleNodeComponent.name.toUpperCase().includes(search));
|
|
this.loadRuleChainLibrary(res);
|
|
}
|
|
|
|
private loadRuleChainLibrary(ruleNodeComponents: Array<RuleNodeComponentDescriptor>) {
|
|
for (const componentType of Object.keys(this.ruleNodeTypesModel)) {
|
|
this.ruleNodeTypesModel[componentType].model.nodes.length = 0;
|
|
}
|
|
ruleNodeComponents.forEach((ruleNodeComponent) => {
|
|
const componentType = ruleNodeComponent.type;
|
|
const model = this.ruleNodeTypesModel[componentType].model;
|
|
const desc = ruleNodeTypeDescriptors.get(RuleNodeType[componentType]);
|
|
let icon = desc.icon;
|
|
let iconUrl = null;
|
|
if (ruleNodeComponent.configurationDescriptor.nodeDefinition.icon) {
|
|
icon = ruleNodeComponent.configurationDescriptor.nodeDefinition.icon;
|
|
}
|
|
if (ruleNodeComponent.configurationDescriptor.nodeDefinition.iconUrl) {
|
|
iconUrl = ruleNodeComponent.configurationDescriptor.nodeDefinition.iconUrl;
|
|
}
|
|
const node: FcRuleNodeType = {
|
|
id: 'node-lib-' + componentType + '-' + model.nodes.length,
|
|
component: ruleNodeComponent,
|
|
name: '',
|
|
nodeClass: desc.nodeClass,
|
|
singletonMode: ruleNodeComponent.clusteringMode !== ComponentClusteringMode.ENABLED,
|
|
icon,
|
|
iconUrl,
|
|
x: 30,
|
|
y: 10 + 50 * model.nodes.length,
|
|
connectors: []
|
|
};
|
|
if (ruleNodeComponent.configurationDescriptor.nodeDefinition.inEnabled) {
|
|
node.connectors.push(
|
|
{
|
|
type: FlowchartConstants.leftConnectorType,
|
|
id: (model.nodes.length * 2) + ''
|
|
}
|
|
);
|
|
}
|
|
if (ruleNodeComponent.configurationDescriptor.nodeDefinition.outEnabled) {
|
|
node.connectors.push(
|
|
{
|
|
type: FlowchartConstants.rightConnectorType,
|
|
id: (model.nodes.length * 2 + 1) + ''
|
|
}
|
|
);
|
|
}
|
|
model.nodes.push(node);
|
|
});
|
|
if (this.expansionPanels) {
|
|
for (let i = 0; i < ruleNodeTypesLibrary.length; i++) {
|
|
const panel = this.expansionPanels.find((item, index) => index === i);
|
|
if (panel) {
|
|
const type = ruleNodeTypesLibrary[i];
|
|
if (!this.ruleNodeTypesModel[type].model.nodes.length) {
|
|
panel.close();
|
|
} else {
|
|
panel.open();
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
private createRuleChainModel() {
|
|
this.nextNodeID = 1;
|
|
this.nextConnectorID = 1;
|
|
|
|
this.selectedObjects = [];
|
|
this.ruleChainModel.nodes = [];
|
|
this.ruleChainModel.edges = [];
|
|
|
|
this.inputConnectorId = this.nextConnectorID++;
|
|
this.ruleChainModel.nodes.push(
|
|
{
|
|
id: 'rule-chain-node-' + this.nextNodeID++,
|
|
component: inputNodeComponent,
|
|
name: '',
|
|
nodeClass: ruleNodeTypeDescriptors.get(RuleNodeType.INPUT).nodeClass,
|
|
icon: ruleNodeTypeDescriptors.get(RuleNodeType.INPUT).icon,
|
|
readonly: true,
|
|
x: 50,
|
|
y: 150,
|
|
connectors: [
|
|
{
|
|
type: FlowchartConstants.rightConnectorType,
|
|
id: this.inputConnectorId + ''
|
|
},
|
|
]
|
|
|
|
}
|
|
);
|
|
const nodes: FcRuleNode[] = [];
|
|
this.ruleChainMetaData.nodes.forEach((ruleNode) => {
|
|
const component = this.ruleChainService.getRuleNodeComponentByClazz(this.ruleChainType, ruleNode.type);
|
|
const descriptor = ruleNodeTypeDescriptors.get(component.type);
|
|
let icon = descriptor.icon;
|
|
let iconUrl = null;
|
|
if (component.configurationDescriptor.nodeDefinition.icon) {
|
|
icon = component.configurationDescriptor.nodeDefinition.icon;
|
|
}
|
|
if (component.configurationDescriptor.nodeDefinition.iconUrl) {
|
|
iconUrl = component.configurationDescriptor.nodeDefinition.iconUrl;
|
|
}
|
|
const node: FcRuleNode = {
|
|
id: 'rule-chain-node-' + this.nextNodeID++,
|
|
ruleNodeId: ruleNode.id,
|
|
additionalInfo: ruleNode.additionalInfo,
|
|
configuration: ruleNode.configuration,
|
|
configurationVersion: isDefinedAndNotNull(ruleNode.configurationVersion) ? ruleNode.configurationVersion : 0,
|
|
debugSettings: ruleNode.debugSettings,
|
|
singletonMode: ruleNode.singletonMode,
|
|
queueName: ruleNode.queueName,
|
|
x: Math.round(ruleNode.additionalInfo.layoutX),
|
|
y: Math.round(ruleNode.additionalInfo.layoutY),
|
|
component,
|
|
name: ruleNode.name,
|
|
nodeClass: descriptor.nodeClass,
|
|
icon,
|
|
iconUrl,
|
|
connectors: [],
|
|
ruleChainType: this.ruleChainType
|
|
};
|
|
if (component.configurationDescriptor.nodeDefinition.inEnabled) {
|
|
node.connectors.push(
|
|
{
|
|
type: FlowchartConstants.leftConnectorType,
|
|
id: (this.nextConnectorID++) + ''
|
|
}
|
|
);
|
|
}
|
|
if (component.configurationDescriptor.nodeDefinition.outEnabled) {
|
|
node.connectors.push(
|
|
{
|
|
type: FlowchartConstants.rightConnectorType,
|
|
id: (this.nextConnectorID++) + ''
|
|
}
|
|
);
|
|
}
|
|
nodes.push(node);
|
|
this.ruleChainModel.nodes.push(node);
|
|
});
|
|
if (this.ruleChainMetaData.firstNodeIndex > -1) {
|
|
const destNode = nodes[this.ruleChainMetaData.firstNodeIndex];
|
|
if (destNode) {
|
|
const connectors = destNode.connectors.filter(connector => connector.type === FlowchartConstants.leftConnectorType);
|
|
if (connectors && connectors.length) {
|
|
const edge: FcRuleEdge = {
|
|
source: this.inputConnectorId + '',
|
|
destination: connectors[0].id
|
|
};
|
|
this.ruleChainModel.edges.push(edge);
|
|
}
|
|
}
|
|
}
|
|
if (this.ruleChainMetaData.connections) {
|
|
const edgeMap: {[edgeKey: string]: FcRuleEdge} = {};
|
|
this.ruleChainMetaData.connections.forEach((connection) => {
|
|
const sourceNode = nodes[connection.fromIndex];
|
|
const destNode = nodes[connection.toIndex];
|
|
if (sourceNode && destNode) {
|
|
const sourceConnectors = sourceNode.connectors.filter(connector => connector.type === FlowchartConstants.rightConnectorType);
|
|
const destConnectors = destNode.connectors.filter(connector => connector.type === FlowchartConstants.leftConnectorType);
|
|
if (sourceConnectors && sourceConnectors.length && destConnectors && destConnectors.length) {
|
|
const sourceId = sourceConnectors[0].id;
|
|
const destId = destConnectors[0].id;
|
|
const edgeKey = sourceId + '_' + destId;
|
|
let edge = edgeMap[edgeKey];
|
|
if (!edge) {
|
|
edge = {
|
|
source: sourceId,
|
|
destination: destId,
|
|
label: connection.type,
|
|
labels: [connection.type]
|
|
};
|
|
edgeMap[edgeKey] = edge;
|
|
this.ruleChainModel.edges.push(edge);
|
|
} else {
|
|
edge.label += ' / ' + connection.type;
|
|
edge.labels.push(connection.type);
|
|
}
|
|
}
|
|
}
|
|
});
|
|
}
|
|
if (this.ruleChainCanvas) {
|
|
this.ruleChainCanvas.adjustCanvasSize(true);
|
|
}
|
|
this.isDirtyValue = false;
|
|
this.updateRuleNodesHighlight();
|
|
this.validate();
|
|
}
|
|
|
|
openRuleChainContextMenu($event: TbContextMenuEvent) {
|
|
if (this.ruleChainCanvas.modelService && !$event.ctrlKey && !$event.metaKey) {
|
|
const x = $event.clientX;
|
|
const y = $event.clientY;
|
|
const item = this.ruleChainCanvas.modelService.getItemInfoAtPoint(x, y);
|
|
const contextInfo = this.prepareContextMenu(item);
|
|
if (contextInfo.menuItems && contextInfo.menuItems.length > 0) {
|
|
$event.preventDefault();
|
|
$event.stopPropagation();
|
|
this.contextMenuEvent = $event;
|
|
this.ruleChainMenuPosition.x = x + 'px';
|
|
this.ruleChainMenuPosition.y = y + 'px';
|
|
this.ruleChainMenuTrigger.menuData = { contextInfo };
|
|
this.ruleChainMenuTrigger.openMenu();
|
|
}
|
|
}
|
|
}
|
|
|
|
onRuleChainContextMenuMouseLeave() {
|
|
this.ruleChainMenuTrigger.closeMenu();
|
|
}
|
|
|
|
private prepareContextMenu(item: FcItemInfo): RuleChainMenuContextInfo {
|
|
if (this.objectsSelected() || (!item.node && !item.edge)) {
|
|
return this.prepareRuleChainContextMenu();
|
|
} else if (item.node) {
|
|
return this.prepareRuleNodeContextMenu(item.node);
|
|
} else if (item.edge) {
|
|
return this.prepareEdgeContextMenu(item.edge);
|
|
}
|
|
}
|
|
|
|
private prepareRuleChainContextMenu(): RuleChainMenuContextInfo {
|
|
const contextInfo: RuleChainMenuContextInfo = {
|
|
headerClass: 'tb-rulechain-header',
|
|
icon: 'settings_ethernet',
|
|
title: this.ruleChain.name,
|
|
subtitle: this.translate.instant('rulechain.rulechain'),
|
|
menuItems: []
|
|
};
|
|
if (this.ruleChainCanvas.modelService.nodes.getSelectedNodes().length) {
|
|
contextInfo.menuItems.push(
|
|
{
|
|
action: () => {
|
|
this.copyRuleNodes();
|
|
},
|
|
enabled: true,
|
|
value: 'rulenode.copy-selected',
|
|
icon: 'content_copy',
|
|
shortcut: 'M-C'
|
|
}
|
|
);
|
|
}
|
|
contextInfo.menuItems.push(
|
|
{
|
|
action: ($event) => {
|
|
this.pasteRuleNodes($event);
|
|
},
|
|
enabled: this.itembuffer.hasRuleNodes(),
|
|
value: 'action.paste',
|
|
icon: 'content_paste',
|
|
shortcut: 'M-V'
|
|
}
|
|
);
|
|
contextInfo.menuItems.push(
|
|
{
|
|
divider: true
|
|
}
|
|
);
|
|
if (this.objectsSelected()) {
|
|
contextInfo.menuItems.push(
|
|
{
|
|
action: () => {
|
|
this.ruleChainCanvas.modelService.deselectAll();
|
|
},
|
|
enabled: true,
|
|
value: 'rulenode.deselect-all',
|
|
icon: 'tab_unselected',
|
|
shortcut: 'Esc'
|
|
}
|
|
);
|
|
if (this.canCreateNestedRuleChain()) {
|
|
contextInfo.menuItems.push(
|
|
{
|
|
action: () => {
|
|
this.createNestedRuleChain();
|
|
},
|
|
enabled: true,
|
|
value: 'rulenode.create-nested-rulechain',
|
|
icon: 'settings_ethernet',
|
|
shortcut: 'M-R'
|
|
}
|
|
);
|
|
}
|
|
contextInfo.menuItems.push(
|
|
{
|
|
action: () => {
|
|
this.ruleChainCanvas.modelService.deleteSelected();
|
|
},
|
|
enabled: true,
|
|
value: 'rulenode.delete-selected',
|
|
icon: 'clear',
|
|
shortcut: 'Del'
|
|
}
|
|
);
|
|
} else {
|
|
contextInfo.menuItems.push(
|
|
{
|
|
action: () => {
|
|
this.ruleChainCanvas.modelService.selectAll();
|
|
},
|
|
enabled: true,
|
|
value: 'rulenode.select-all',
|
|
icon: 'select_all',
|
|
shortcut: 'M-A'
|
|
}
|
|
);
|
|
}
|
|
contextInfo.menuItems.push(
|
|
{
|
|
divider: true
|
|
}
|
|
);
|
|
contextInfo.menuItems.push(
|
|
{
|
|
action: () => {
|
|
this.saveRuleChain();
|
|
},
|
|
enabled: !(this.isInvalid || (!this.isDirty && !this.isImport)),
|
|
value: 'action.apply-changes',
|
|
icon: 'done',
|
|
shortcut: 'M-S'
|
|
}
|
|
);
|
|
contextInfo.menuItems.push(
|
|
{
|
|
action: () => {
|
|
this.revertRuleChain();
|
|
},
|
|
enabled: this.isDirty,
|
|
value: 'action.decline-changes',
|
|
icon: 'close',
|
|
shortcut: 'M-Z'
|
|
}
|
|
);
|
|
return contextInfo;
|
|
}
|
|
|
|
private prepareRuleNodeContextMenu(node: FcRuleNode): RuleChainMenuContextInfo {
|
|
const contextInfo: RuleChainMenuContextInfo = {
|
|
headerClass: node.nodeClass,
|
|
icon: node.icon,
|
|
iconUrl: node.iconUrl,
|
|
title: node.name,
|
|
subtitle: node.component.name,
|
|
menuItems: []
|
|
};
|
|
if (!node.readonly) {
|
|
contextInfo.menuItems.push(
|
|
{
|
|
action: () => {
|
|
this.openNodeDetails(node);
|
|
},
|
|
enabled: true,
|
|
value: 'rulenode.details',
|
|
icon: 'menu'
|
|
}
|
|
);
|
|
contextInfo.menuItems.push(
|
|
{
|
|
action: () => {
|
|
this.copyNode(node);
|
|
},
|
|
enabled: true,
|
|
value: 'action.copy',
|
|
icon: 'content_copy'
|
|
}
|
|
);
|
|
contextInfo.menuItems.push(
|
|
{
|
|
action: () => {
|
|
this.ruleChainCanvas.modelService.nodes.delete(node);
|
|
},
|
|
enabled: true,
|
|
value: 'action.delete',
|
|
icon: 'clear',
|
|
shortcut: 'M-X'
|
|
}
|
|
);
|
|
}
|
|
return contextInfo;
|
|
}
|
|
|
|
private prepareEdgeContextMenu(edge: FcRuleEdge): RuleChainMenuContextInfo {
|
|
const contextInfo: RuleChainMenuContextInfo = {
|
|
headerClass: 'tb-link-header',
|
|
icon: 'trending_flat',
|
|
title: edge.label,
|
|
subtitle: this.translate.instant('rulenode.link'),
|
|
menuItems: []
|
|
};
|
|
const sourceNode: FcRuleNode = this.ruleChainCanvas.modelService.nodes.getNodeByConnectorId(edge.source);
|
|
if (sourceNode.component.type !== RuleNodeType.INPUT) {
|
|
contextInfo.menuItems.push(
|
|
{
|
|
action: () => {
|
|
this.openLinkDetails(edge);
|
|
},
|
|
enabled: true,
|
|
value: 'rulenode.details',
|
|
icon: 'menu'
|
|
}
|
|
);
|
|
}
|
|
contextInfo.menuItems.push(
|
|
{
|
|
action: () => {
|
|
this.ruleChainCanvas.modelService.edges.delete(edge);
|
|
},
|
|
enabled: true,
|
|
value: 'action.delete',
|
|
icon: 'clear',
|
|
shortcut: 'M-X'
|
|
}
|
|
);
|
|
return contextInfo;
|
|
}
|
|
|
|
private canCreateNestedRuleChain(): boolean {
|
|
const selectedNodes = this.ruleChainCanvas.modelService.nodes.getSelectedNodes();
|
|
const selectedEdges = this.ruleChainCanvas.modelService.edges.getSelectedEdges();
|
|
if (selectedNodes.length > 1) {
|
|
const toIndexSet = new Set<number>();
|
|
selectedEdges.forEach((edge: FcRuleEdge) => {
|
|
const sourceNode = this.ruleChainCanvas.modelService.nodes.getNodeByConnectorId(edge.source);
|
|
const destNode = this.ruleChainCanvas.modelService.nodes.getNodeByConnectorId(edge.destination);
|
|
const fromIndex = selectedNodes.indexOf(sourceNode);
|
|
const toIndex = selectedNodes.indexOf(destNode);
|
|
if (fromIndex > -1 && toIndex > -1) {
|
|
toIndexSet.add(toIndex);
|
|
}
|
|
});
|
|
const noInputNodes = selectedNodes.filter((node, index) => !toIndexSet.has(index));
|
|
return noInputNodes.filter((node: FcRuleNode) => node.component.configurationDescriptor.nodeDefinition.inEnabled).length <= 1;
|
|
}
|
|
return false;
|
|
}
|
|
|
|
private createNestedRuleChain() {
|
|
const selectedNodes = this.ruleChainCanvas.modelService.nodes.getSelectedNodes();
|
|
const selectedEdges = this.ruleChainCanvas.modelService.edges.getSelectedEdges();
|
|
this.dialog.open<CreateNestedRuleChainDialogComponent, CreateNestedRuleChainDialogData,
|
|
RuleChain>(CreateNestedRuleChainDialogComponent, {
|
|
disableClose: true,
|
|
panelClass: ['tb-dialog', 'tb-fullscreen-dialog'],
|
|
data: {
|
|
ruleChainType: this.ruleChainType
|
|
}
|
|
}).afterClosed().subscribe((ruleChain) => {
|
|
if (ruleChain) {
|
|
this.ruleChainCanvas.modelService.deselectAll();
|
|
const ruleChainMetaData: RuleChainMetaData = {
|
|
ruleChainId: ruleChain.id,
|
|
nodes: [],
|
|
connections: []
|
|
};
|
|
let outputEdges: FcRuleEdge[] = [];
|
|
let minX: number = null;
|
|
let maxX = 0;
|
|
let minY = null;
|
|
let maxY = 0;
|
|
|
|
selectedNodes.forEach((node: FcRuleNode) => {
|
|
const ruleNode: RuleNode = {
|
|
type: node.component.clazz,
|
|
name: node.name,
|
|
configuration: deepClone(node.configuration),
|
|
additionalInfo: node.additionalInfo ? deepClone(node.additionalInfo) : {},
|
|
debugSettings: node.debugSettings,
|
|
singletonMode: node.singletonMode,
|
|
queueName: node.queueName
|
|
};
|
|
if (minX === null) {
|
|
minX = node.x;
|
|
} else {
|
|
minX = Math.min(minX, node.x);
|
|
}
|
|
if (minY === null) {
|
|
minY = node.y;
|
|
} else {
|
|
minY = Math.min(minY, node.y);
|
|
}
|
|
maxX = Math.max(maxX, node.x);
|
|
maxY = Math.max(maxY, node.y);
|
|
ruleNode.additionalInfo.layoutX = Math.round(node.x);
|
|
ruleNode.additionalInfo.layoutY = Math.round(node.y);
|
|
ruleChainMetaData.nodes.push(ruleNode);
|
|
const outputConnectors = this.ruleChainCanvas.modelService.nodes.getConnectorsByType(node, FlowchartConstants.rightConnectorType);
|
|
outputConnectors.forEach(connector => {
|
|
const nodeOutputEdges = this.ruleChainCanvas.modelService.model.edges.filter(edge => edge.source === connector.id);
|
|
const outerEdges = nodeOutputEdges.filter(edge => {
|
|
const destNode = this.ruleChainCanvas.modelService.nodes.getNodeByConnectorId(edge.destination);
|
|
return selectedNodes.indexOf(destNode) === -1;
|
|
});
|
|
outputEdges = outputEdges.concat(outerEdges);
|
|
});
|
|
});
|
|
const toIndexSet = new Set<number>();
|
|
selectedEdges.forEach((edge: FcRuleEdge) => {
|
|
const sourceNode = this.ruleChainCanvas.modelService.nodes.getNodeByConnectorId(edge.source);
|
|
const destNode = this.ruleChainCanvas.modelService.nodes.getNodeByConnectorId(edge.destination);
|
|
if (sourceNode.component.type !== RuleNodeType.INPUT) {
|
|
const fromIndex = selectedNodes.indexOf(sourceNode);
|
|
const toIndex = selectedNodes.indexOf(destNode);
|
|
if (fromIndex > -1 && toIndex > -1) {
|
|
const nodeConnection = {
|
|
fromIndex,
|
|
toIndex
|
|
} as NodeConnectionInfo;
|
|
edge.labels.forEach((label) => {
|
|
const newNodeConnection = deepClone(nodeConnection);
|
|
newNodeConnection.type = label;
|
|
ruleChainMetaData.connections.push(newNodeConnection);
|
|
});
|
|
toIndexSet.add(toIndex);
|
|
}
|
|
}
|
|
});
|
|
const noInputNodes = selectedNodes.filter((node, index) => !toIndexSet.has(index));
|
|
const possibleInputNodes = noInputNodes.filter((node: FcRuleNode) =>
|
|
node.component.configurationDescriptor.nodeDefinition.inEnabled);
|
|
let inputEdges: FcRuleEdge[] = [];
|
|
if (possibleInputNodes.length) {
|
|
const firstNode = possibleInputNodes[0];
|
|
const inputConnectors = this.ruleChainCanvas.modelService.nodes
|
|
.getConnectorsByType(firstNode, FlowchartConstants.leftConnectorType);
|
|
if (inputConnectors.length) {
|
|
const inputConnector = inputConnectors[0];
|
|
const nodeInputEdges = this.ruleChainCanvas.modelService.model.edges.filter(edge => edge.destination === inputConnector.id);
|
|
inputEdges = inputEdges.concat(nodeInputEdges);
|
|
}
|
|
ruleChainMetaData.firstNodeIndex = selectedNodes.indexOf(firstNode);
|
|
}
|
|
outputEdges.forEach((outputEdge) => {
|
|
const sourceNode = this.ruleChainCanvas.modelService.nodes.getNodeByConnectorId(outputEdge.source);
|
|
const destNode = this.ruleChainCanvas.modelService.nodes.getNodeByConnectorId(outputEdge.destination);
|
|
const outputNode: RuleNode = {
|
|
type: outputNodeClazz,
|
|
name: outputEdge.label,
|
|
configuration: {},
|
|
additionalInfo: {},
|
|
singletonMode: false
|
|
};
|
|
outputNode.additionalInfo.layoutX = Math.round(destNode.x);
|
|
outputNode.additionalInfo.layoutY = Math.round(destNode.y);
|
|
ruleChainMetaData.nodes.push(outputNode);
|
|
const fromIndex = selectedNodes.indexOf(sourceNode);
|
|
const toIndex = ruleChainMetaData.nodes.length - 1;
|
|
const nodeConnection = {
|
|
fromIndex,
|
|
toIndex
|
|
} as NodeConnectionInfo;
|
|
outputEdge.labels.forEach((label) => {
|
|
const newNodeConnection = deepClone(nodeConnection);
|
|
newNodeConnection.type = label;
|
|
ruleChainMetaData.connections.push(newNodeConnection);
|
|
});
|
|
});
|
|
const deltaX = Math.round(minX - 375);
|
|
const deltaY = Math.round(minY - 150);
|
|
ruleChainMetaData.nodes.forEach((node) => {
|
|
node.additionalInfo.layoutX -= deltaX;
|
|
node.additionalInfo.layoutY -= deltaY;
|
|
});
|
|
this.ruleChainService.saveRuleChainMetadata(ruleChainMetaData).subscribe(() => {
|
|
const component = this.ruleChainService.getRuleNodeComponentByClazz(this.ruleChainType, ruleChainNodeClazz);
|
|
const descriptor = ruleNodeTypeDescriptors.get(component.type);
|
|
let icon = descriptor.icon;
|
|
let iconUrl = null;
|
|
if (component.configurationDescriptor.nodeDefinition.icon) {
|
|
icon = component.configurationDescriptor.nodeDefinition.icon;
|
|
}
|
|
if (component.configurationDescriptor.nodeDefinition.iconUrl) {
|
|
iconUrl = component.configurationDescriptor.nodeDefinition.iconUrl;
|
|
}
|
|
const ruleChainNodeX = (minX + maxX) / 2;
|
|
const ruleChainNodeY = (minY + maxY) / 2;
|
|
const ruleChainInputId = (this.nextConnectorID++) + '';
|
|
const ruleChainOutputId = (this.nextConnectorID++) + '';
|
|
const ruleChainNode: FcRuleNode = {
|
|
name: ruleChain.name,
|
|
component,
|
|
id: 'rule-chain-node-' + this.nextNodeID++,
|
|
configuration: {
|
|
ruleChainId: ruleChain.id.id
|
|
},
|
|
singletonMode: false,
|
|
x: Math.round(ruleChainNodeX),
|
|
y: Math.round(ruleChainNodeY),
|
|
nodeClass: descriptor.nodeClass,
|
|
icon,
|
|
iconUrl,
|
|
ruleChainType: this.ruleChainType,
|
|
connectors: [
|
|
{
|
|
type: FlowchartConstants.leftConnectorType,
|
|
id: ruleChainInputId
|
|
},
|
|
{
|
|
type: FlowchartConstants.rightConnectorType,
|
|
id: ruleChainOutputId
|
|
}
|
|
]
|
|
};
|
|
this.ruleChainModel.nodes.push(ruleChainNode);
|
|
inputEdges.forEach((inputEdge) => {
|
|
inputEdge.destination = ruleChainInputId;
|
|
});
|
|
outputEdges.forEach((outputEdge) => {
|
|
outputEdge.source = ruleChainOutputId;
|
|
outputEdge.labels = [outputEdge.label];
|
|
});
|
|
selectedNodes.forEach((node) => {
|
|
this.ruleChainCanvas.modelService.nodes.delete(node);
|
|
});
|
|
this.onModelChanged();
|
|
this.updateRuleNodesHighlight();
|
|
});
|
|
}
|
|
});
|
|
}
|
|
|
|
onModelChanged() {
|
|
this.isDirtyValue = true;
|
|
this.validate();
|
|
}
|
|
|
|
helpLinkIdForRuleNodeType(): string {
|
|
let component: RuleNodeComponentDescriptor = null;
|
|
if (this.editingRuleNode) {
|
|
component = this.editingRuleNode.component;
|
|
}
|
|
return getRuleNodeHelpLink(component);
|
|
}
|
|
|
|
openNodeDetails(node: FcRuleNode) {
|
|
if (node.component.type !== RuleNodeType.INPUT) {
|
|
this.enableHotKeys = false;
|
|
this.updateErrorTooltips(true);
|
|
this.isEditingRuleNodeLink = false;
|
|
this.editingRuleNodeLink = null;
|
|
this.isEditingRuleNode = true;
|
|
this.editingRuleNodeIndex = this.ruleChainModel.nodes.indexOf(node);
|
|
this.editingRuleNode = deepClone(node, ['component']);
|
|
setTimeout(() => {
|
|
this.ruleNodeComponent.ruleNodeFormGroup.markAsPristine();
|
|
}, 0);
|
|
}
|
|
}
|
|
|
|
openLinkDetails(edge: FcRuleEdge) {
|
|
const sourceNode: FcRuleNode = this.ruleChainCanvas.modelService.nodes.getNodeByConnectorId(edge.source) as FcRuleNode;
|
|
if (sourceNode.component.type !== RuleNodeType.INPUT) {
|
|
this.enableHotKeys = false;
|
|
this.updateErrorTooltips(true);
|
|
this.isEditingRuleNode = false;
|
|
this.editingRuleNode = null;
|
|
this.editingRuleNodeLinkLabels = this.ruleChainService.getRuleNodeSupportedLinks(sourceNode.component);
|
|
this.editingRuleNodeAllowCustomLabels = this.ruleChainService.ruleNodeAllowCustomLinks(sourceNode.component);
|
|
this.editingRuleNodeSourceRuleChainId =
|
|
this.ruleChainService.ruleNodeSourceRuleChainId(sourceNode.component, sourceNode.configuration);
|
|
this.isEditingRuleNodeLink = true;
|
|
this.editingRuleNodeLinkIndex = this.ruleChainModel.edges.indexOf(edge);
|
|
this.editingRuleNodeLink = deepClone(edge);
|
|
setTimeout(() => {
|
|
this.ruleNodeLinkComponent.ruleNodeLinkFormGroup.markAsPristine();
|
|
}, 0);
|
|
}
|
|
}
|
|
|
|
private copyNode(node: FcRuleNode) {
|
|
this.itembuffer.copyRuleNodes([node], []);
|
|
}
|
|
|
|
private copyRuleNodes() {
|
|
const nodes: FcRuleNode[] = this.ruleChainCanvas.modelService.nodes.getSelectedNodes();
|
|
const edges: FcRuleEdge[] = this.ruleChainCanvas.modelService.edges.getSelectedEdges();
|
|
const connections: RuleNodeConnection[] = [];
|
|
edges.forEach((edge) => {
|
|
const sourceNode = this.ruleChainCanvas.modelService.nodes.getNodeByConnectorId(edge.source);
|
|
const destNode = this.ruleChainCanvas.modelService.nodes.getNodeByConnectorId(edge.destination);
|
|
const isInputSource = sourceNode.component.type === RuleNodeType.INPUT;
|
|
const fromIndex = nodes.indexOf(sourceNode);
|
|
const toIndex = nodes.indexOf(destNode);
|
|
if ( (isInputSource || fromIndex > -1) && toIndex > -1 ) {
|
|
const connection: RuleNodeConnection = {
|
|
isInputSource,
|
|
fromIndex,
|
|
toIndex,
|
|
label: edge.label,
|
|
labels: edge.labels
|
|
};
|
|
connections.push(connection);
|
|
}
|
|
});
|
|
this.itembuffer.copyRuleNodes(nodes, connections);
|
|
}
|
|
|
|
private pasteRuleNodes(event?: MouseEvent) {
|
|
const canvas = $(this.ruleChainCanvas.modelService.canvasHtmlElement);
|
|
let x: number;
|
|
let y: number;
|
|
if (event) {
|
|
const offset = canvas.offset();
|
|
x = Math.round(event.clientX - offset.left);
|
|
y = Math.round(event.clientY - offset.top);
|
|
} else {
|
|
const scrollParent = canvas.parent();
|
|
const scrollTop = scrollParent.scrollTop();
|
|
const scrollLeft = scrollParent.scrollLeft();
|
|
x = scrollLeft + scrollParent.width() / 2;
|
|
y = scrollTop + scrollParent.height() / 2;
|
|
}
|
|
const ruleNodes = this.itembuffer.pasteRuleNodes(x, y);
|
|
if (ruleNodes) {
|
|
this.ruleChainCanvas.modelService.deselectAll();
|
|
const nodes: FcRuleNode[] = [];
|
|
ruleNodes.nodes.forEach((node) => {
|
|
node.id = 'rule-chain-node-' + this.nextNodeID++;
|
|
const component = node.component;
|
|
if (component.configurationDescriptor.nodeDefinition.inEnabled) {
|
|
node.connectors.push(
|
|
{
|
|
type: FlowchartConstants.leftConnectorType,
|
|
id: (this.nextConnectorID++) + ''
|
|
}
|
|
);
|
|
}
|
|
if (component.configurationDescriptor.nodeDefinition.outEnabled) {
|
|
node.connectors.push(
|
|
{
|
|
type: FlowchartConstants.rightConnectorType,
|
|
id: (this.nextConnectorID++) + ''
|
|
}
|
|
);
|
|
}
|
|
nodes.push(node);
|
|
this.ruleChainModel.nodes.push(node);
|
|
this.ruleChainCanvas.modelService.nodes.select(node);
|
|
});
|
|
ruleNodes.connections.forEach((connection) => {
|
|
const sourceNode = nodes[connection.fromIndex];
|
|
const destNode = nodes[connection.toIndex];
|
|
if ( (connection.isInputSource || sourceNode) && destNode ) {
|
|
let source: string;
|
|
let destination: string;
|
|
if (connection.isInputSource) {
|
|
source = this.inputConnectorId + '';
|
|
const found = this.ruleChainModel.edges.find(theEdge => theEdge.source === (this.inputConnectorId + ''));
|
|
if (found) {
|
|
this.ruleChainCanvas.modelService.edges.delete(found);
|
|
}
|
|
} else {
|
|
const sourceConnectors = this.ruleChainCanvas.modelService.nodes
|
|
.getConnectorsByType(sourceNode, FlowchartConstants.rightConnectorType);
|
|
if (sourceConnectors && sourceConnectors.length) {
|
|
source = sourceConnectors[0].id;
|
|
}
|
|
}
|
|
const destConnectors = this.ruleChainCanvas.modelService.nodes
|
|
.getConnectorsByType(destNode, FlowchartConstants.leftConnectorType);
|
|
if (destConnectors && destConnectors.length) {
|
|
destination = destConnectors[0].id;
|
|
}
|
|
if (source && destination) {
|
|
const edge: FcRuleEdge = {
|
|
source,
|
|
destination,
|
|
label: connection.label,
|
|
labels: connection.labels
|
|
};
|
|
this.ruleChainModel.edges.push(edge);
|
|
this.ruleChainCanvas.modelService.edges.select(edge);
|
|
}
|
|
}
|
|
});
|
|
this.updateRuleNodesHighlight();
|
|
this.validate();
|
|
this.onModelChanged();
|
|
}
|
|
}
|
|
|
|
onDetailsDrawerClosed() {
|
|
this.onEditRuleNodeClosed();
|
|
this.onEditRuleNodeLinkClosed();
|
|
this.enableHotKeys = true;
|
|
this.updateErrorTooltips(false);
|
|
}
|
|
|
|
onEditRuleNodeClosed() {
|
|
this.editingRuleNode = null;
|
|
this.isEditingRuleNode = false;
|
|
}
|
|
|
|
onEditRuleNodeLinkClosed() {
|
|
this.editingRuleNodeLink = null;
|
|
this.isEditingRuleNodeLink = false;
|
|
}
|
|
|
|
onRevertRuleNodeEdit() {
|
|
this.ruleNodeComponent.ruleNodeFormGroup.markAsPristine();
|
|
const node = this.ruleChainModel.nodes[this.editingRuleNodeIndex];
|
|
this.editingRuleNode = deepClone(node, ['component']);
|
|
}
|
|
|
|
onRevertRuleNodeLinkEdit() {
|
|
this.ruleNodeLinkComponent.ruleNodeLinkFormGroup.markAsPristine();
|
|
const edge = this.ruleChainModel.edges[this.editingRuleNodeLinkIndex];
|
|
this.editingRuleNodeLink = deepClone(edge);
|
|
}
|
|
|
|
onDebugEventSelected(debugEventBody: DebugRuleNodeEventBody) {
|
|
const ruleNodeConfigComponent = this.ruleNodeComponent.ruleNodeConfigComponent;
|
|
const ruleNodeConfigDefinedComponent = ruleNodeConfigComponent.definedConfigComponent;
|
|
if (ruleNodeConfigComponent.useDefinedDirective()
|
|
&& ruleNodeConfigDefinedComponent.hasScript
|
|
&& ruleNodeConfigDefinedComponent.testScript) {
|
|
ruleNodeConfigDefinedComponent.testScript(debugEventBody);
|
|
}
|
|
}
|
|
|
|
onRuleNodeInit() {
|
|
const ruleNodeConfigDefinedComponent = this.ruleNodeComponent.ruleNodeConfigComponent.definedConfigComponent;
|
|
if (this.ruleNodeComponent.ruleNodeConfigComponent.useDefinedDirective() && ruleNodeConfigDefinedComponent.hasScript) {
|
|
this.ruleNodeTestButtonLabel = ruleNodeConfigDefinedComponent.testScriptLabel;
|
|
} else {
|
|
this.ruleNodeTestButtonLabel = '';
|
|
}
|
|
}
|
|
|
|
switchToFirstTab() {
|
|
this.selectedRuleNodeTabIndex = 0;
|
|
}
|
|
|
|
saveRuleNode() {
|
|
this.ruleNodeComponent.validate();
|
|
if (this.ruleNodeComponent.ruleNodeFormGroup.valid) {
|
|
this.ruleNodeComponent.ruleNodeFormGroup.markAsPristine();
|
|
if (this.editingRuleNode.error) {
|
|
delete this.editingRuleNode.error;
|
|
}
|
|
this.ruleChainModel.nodes[this.editingRuleNodeIndex] = this.editingRuleNode;
|
|
this.editingRuleNode = deepClone(this.editingRuleNode, ['component']);
|
|
this.onModelChanged();
|
|
this.updateRuleNodesHighlight();
|
|
}
|
|
}
|
|
|
|
saveRuleNodeLink() {
|
|
this.ruleNodeLinkComponent.ruleNodeLinkFormGroup.markAsPristine();
|
|
this.ruleChainModel.edges[this.editingRuleNodeLinkIndex] = this.editingRuleNodeLink;
|
|
this.editingRuleNodeLink = deepClone(this.editingRuleNodeLink);
|
|
this.onModelChanged();
|
|
}
|
|
|
|
typeHeaderMouseEnter(event: MouseEvent, ruleNodeType: RuleNodeType) {
|
|
const type = ruleNodeTypeDescriptors.get(ruleNodeType);
|
|
this.displayTooltip(event,
|
|
'<div class="tb-rule-node-tooltip tb-lib-tooltip">' +
|
|
'<div id="tb-node-content">' +
|
|
'<div class="tb-node-title">' + this.translate.instant(type.name) + '</div>' +
|
|
'<div class="tb-node-details">' + this.translate.instant(type.details) + '</div>' +
|
|
'</div>' +
|
|
'</div>'
|
|
);
|
|
}
|
|
|
|
displayLibNodeDescriptionTooltip(event: MouseEvent, node: FcRuleNodeType) {
|
|
this.displayTooltip(event,
|
|
'<div class="tb-rule-node-tooltip tb-lib-tooltip">' +
|
|
'<div id="tb-node-content">' +
|
|
'<div class="tb-node-title">' + node.component.name + '</div>' +
|
|
'<div class="tb-node-description">' + node.component.configurationDescriptor.nodeDefinition.description + '</div>' +
|
|
'<div class="tb-node-details">' + node.component.configurationDescriptor.nodeDefinition.details + '</div>' +
|
|
'</div>' +
|
|
'</div>'
|
|
);
|
|
}
|
|
|
|
displayNodeDescriptionTooltip(event: MouseEvent, node: FcRuleNode) {
|
|
if (!this.errorTooltips[node.id]) {
|
|
let name: string;
|
|
let desc: string;
|
|
let details: string;
|
|
if (node.component.type === RuleNodeType.INPUT) {
|
|
name = this.translate.instant(ruleNodeTypeDescriptors.get(RuleNodeType.INPUT).name);
|
|
desc = this.translate.instant(ruleNodeTypeDescriptors.get(RuleNodeType.INPUT).details);
|
|
} else {
|
|
name = node.name;
|
|
desc = this.translate.instant(ruleNodeTypeDescriptors.get(node.component.type).name) + ' - ' + node.component.name;
|
|
if (node.additionalInfo) {
|
|
details = this.sanitizer.sanitize(SecurityContext.HTML, node.additionalInfo.description);
|
|
}
|
|
}
|
|
|
|
name = this.sanitizer.sanitize(SecurityContext.HTML, name);
|
|
desc = this.sanitizer.sanitize(SecurityContext.HTML, desc);
|
|
|
|
let tooltipContent = '<div class="tb-rule-node-tooltip">' +
|
|
'<div id="tb-node-content">' +
|
|
'<div class="tb-node-title">' + name + '</div>' +
|
|
'<div class="tb-node-description">' + desc + '</div>';
|
|
if (details) {
|
|
tooltipContent += '<div class="tb-node-details">' + details + '</div>';
|
|
}
|
|
tooltipContent += '</div>' +
|
|
'</div>';
|
|
this.displayTooltip(event, tooltipContent);
|
|
}
|
|
}
|
|
|
|
destroyTooltips() {
|
|
if (this.tooltipTimeout) {
|
|
clearTimeout(this.tooltipTimeout);
|
|
this.tooltipTimeout = null;
|
|
}
|
|
const instances = $.tooltipster.instances();
|
|
instances.forEach((instance) => {
|
|
if (!instance.isErrorTooltip) {
|
|
instance.destroy();
|
|
}
|
|
});
|
|
}
|
|
|
|
private updateRuleNodesHighlight() {
|
|
for (const ruleNode of this.ruleChainModel.nodes) {
|
|
ruleNode.highlighted = false;
|
|
}
|
|
if (this.ruleNodeSearch) {
|
|
const search = this.ruleNodeSearch.toUpperCase();
|
|
const res = this.ruleChainModel.nodes.filter(node => node.name.toUpperCase().includes(search));
|
|
if (res) {
|
|
for (const ruleNode of res) {
|
|
ruleNode.highlighted = true;
|
|
}
|
|
}
|
|
}
|
|
if (this.ruleChainCanvas) {
|
|
this.ruleChainCanvas.modelService.detectChanges();
|
|
}
|
|
}
|
|
|
|
objectsSelected(): boolean {
|
|
return this.ruleChainCanvas.modelService.nodes.getSelectedNodes().length > 0 ||
|
|
this.ruleChainCanvas.modelService.edges.getSelectedEdges().length > 0;
|
|
}
|
|
|
|
deleteSelected() {
|
|
this.ruleChainCanvas.modelService.deleteSelected();
|
|
}
|
|
|
|
isDebugSettingsEnabled(): boolean {
|
|
const res = this.ruleChainModel.nodes.find((node) => node?.debugSettings && this.isDebugSettingsActive(node.debugSettings));
|
|
return typeof res !== 'undefined';
|
|
}
|
|
|
|
resetDebugSettingsInAllNodes(): void {
|
|
let changed = false;
|
|
this.ruleChainModel.nodes.forEach((node) => {
|
|
if (node.component.type !== RuleNodeType.INPUT) {
|
|
const nodeHasActiveDebugSettings = node?.debugSettings && this.isDebugSettingsActive(node.debugSettings);
|
|
changed = changed || nodeHasActiveDebugSettings;
|
|
if (nodeHasActiveDebugSettings) {
|
|
node.debugSettings = { allEnabled: false, failuresEnabled: false, allEnabledUntil: 0 };
|
|
}
|
|
}
|
|
});
|
|
if (changed) {
|
|
this.onModelChanged();
|
|
}
|
|
}
|
|
|
|
private isDebugSettingsActive(debugSettings: EntityDebugSettings): boolean {
|
|
return debugSettings.allEnabled || debugSettings.failuresEnabled || debugSettings.allEnabledUntil > new Date().getTime();
|
|
}
|
|
|
|
validate() {
|
|
setTimeout(() => {
|
|
this.isInvalid = false;
|
|
this.ruleChainModel.nodes.forEach((node) => {
|
|
if (node.error) {
|
|
this.isInvalid = true;
|
|
}
|
|
this.updateNodeErrorTooltip(node);
|
|
});
|
|
}, 0);
|
|
}
|
|
|
|
saveRuleChain(): Observable<any> {
|
|
const saveResult = new ReplaySubject<void>();
|
|
let saveRuleChainObservable: Observable<RuleChain>;
|
|
if (this.isImport) {
|
|
saveRuleChainObservable = this.ruleChainService.saveRuleChain(this.ruleChain);
|
|
} else {
|
|
saveRuleChainObservable = of(this.ruleChain);
|
|
}
|
|
saveRuleChainObservable.subscribe((ruleChain) => {
|
|
this.ruleChain = ruleChain;
|
|
const ruleChainMetaData: RuleChainMetaData = {
|
|
ruleChainId: this.ruleChain.id,
|
|
nodes: [],
|
|
connections: [],
|
|
version: ruleChain.version
|
|
};
|
|
const nodes: FcRuleNode[] = [];
|
|
this.ruleChainModel.nodes.forEach((node) => {
|
|
if (node.component.type !== RuleNodeType.INPUT) {
|
|
const ruleNode: RuleNode = {
|
|
id: node.ruleNodeId,
|
|
type: node.component.clazz,
|
|
name: node.name,
|
|
configurationVersion: isDefinedAndNotNull(node.configurationVersion)
|
|
? node.configurationVersion
|
|
: node.component.configurationVersion,
|
|
configuration: node.configuration,
|
|
additionalInfo: node.additionalInfo ? node.additionalInfo : {},
|
|
debugSettings: node.debugSettings,
|
|
singletonMode: node.singletonMode,
|
|
queueName: node.queueName
|
|
};
|
|
ruleNode.additionalInfo.layoutX = Math.round(node.x);
|
|
ruleNode.additionalInfo.layoutY = Math.round(node.y);
|
|
ruleChainMetaData.nodes.push(ruleNode);
|
|
nodes.push(node);
|
|
}
|
|
});
|
|
const firstNodeEdge = this.ruleChainModel.edges.find((edge) => edge.source === this.inputConnectorId + '');
|
|
if (firstNodeEdge) {
|
|
const firstNode = this.ruleChainCanvas.modelService.nodes.getNodeByConnectorId(firstNodeEdge.destination);
|
|
ruleChainMetaData.firstNodeIndex = nodes.indexOf(firstNode);
|
|
}
|
|
this.ruleChainModel.edges.forEach((edge) => {
|
|
const sourceNode = this.ruleChainCanvas.modelService.nodes.getNodeByConnectorId(edge.source);
|
|
const destNode = this.ruleChainCanvas.modelService.nodes.getNodeByConnectorId(edge.destination);
|
|
if (sourceNode.component.type !== RuleNodeType.INPUT) {
|
|
const fromIndex = nodes.indexOf(sourceNode);
|
|
const toIndex = nodes.indexOf(destNode);
|
|
const nodeConnection = {
|
|
fromIndex,
|
|
toIndex
|
|
} as NodeConnectionInfo;
|
|
edge.labels.forEach((label) => {
|
|
const newNodeConnection = deepClone(nodeConnection);
|
|
newNodeConnection.type = label;
|
|
ruleChainMetaData.connections.push(newNodeConnection);
|
|
});
|
|
}
|
|
});
|
|
this.ruleChainService.saveRuleChainMetadata(ruleChainMetaData)
|
|
.pipe(
|
|
catchError(err => {
|
|
if (err.status === HttpStatusCode.Conflict) {
|
|
return this.ruleChainService.getRuleChainMetadata(ruleChainMetaData.ruleChainId.id);
|
|
}
|
|
return throwError(() => err);
|
|
})
|
|
)
|
|
.subscribe((savedRuleChainMetaData) => {
|
|
this.ruleChain.version = savedRuleChainMetaData.version;
|
|
this.ruleChainMetaData = savedRuleChainMetaData;
|
|
if (this.isImport) {
|
|
this.isDirtyValue = false;
|
|
this.isImport = false;
|
|
if (this.ruleChainType !== RuleChainType.EDGE) {
|
|
this.router.navigateByUrl(`ruleChains/${this.ruleChain.id.id}`);
|
|
} else {
|
|
this.router.navigateByUrl(`edgeManagement/ruleChains/${this.ruleChain.id.id}`);
|
|
}
|
|
} else {
|
|
this.createRuleChainModel();
|
|
}
|
|
saveResult.next();
|
|
});
|
|
});
|
|
return saveResult;
|
|
}
|
|
|
|
reloadRuleChain() {
|
|
this.ruleChainService.getRuleChain(this.ruleChain.id.id).subscribe((ruleChain) => {
|
|
this.ruleChain = ruleChain;
|
|
this.updateBreadcrumbs.emit();
|
|
this.ruleChainService.getRuleChainMetadata(this.ruleChain.id.id).subscribe((ruleChainMetaData) => {
|
|
this.ruleChainMetaData = ruleChainMetaData;
|
|
this.isDirtyValue = false;
|
|
this.createRuleChainModel();
|
|
});
|
|
});
|
|
}
|
|
|
|
revertRuleChain() {
|
|
this.createRuleChainModel();
|
|
}
|
|
|
|
addRuleNode(ruleNode: FcRuleNode) {
|
|
ruleNode.configuration = deepClone(ruleNode.component.configurationDescriptor.nodeDefinition.defaultConfiguration);
|
|
const ruleChainId = this.ruleChain.id ? this.ruleChain.id.id : null;
|
|
this.enableHotKeys = false;
|
|
const ruleChainType = this.ruleChainType;
|
|
this.dialog.open<AddRuleNodeDialogComponent, AddRuleNodeDialogData,
|
|
FcRuleNode>(AddRuleNodeDialogComponent, {
|
|
disableClose: true,
|
|
panelClass: ['tb-dialog', 'tb-fullscreen-dialog'],
|
|
data: {
|
|
ruleNode,
|
|
ruleChainId,
|
|
ruleChainType
|
|
}
|
|
}).afterClosed().subscribe(
|
|
(addedRuleNode) => {
|
|
if (addedRuleNode) {
|
|
addedRuleNode.id = 'rule-chain-node-' + this.nextNodeID++;
|
|
addedRuleNode.connectors = [];
|
|
if (addedRuleNode.component.configurationDescriptor.nodeDefinition.inEnabled) {
|
|
addedRuleNode.connectors.push(
|
|
{
|
|
id: (this.nextConnectorID++) + '',
|
|
type: FlowchartConstants.leftConnectorType
|
|
}
|
|
);
|
|
}
|
|
if (addedRuleNode.component.configurationDescriptor.nodeDefinition.outEnabled) {
|
|
addedRuleNode.connectors.push(
|
|
{
|
|
id: (this.nextConnectorID++) + '',
|
|
type: FlowchartConstants.rightConnectorType
|
|
}
|
|
);
|
|
}
|
|
this.ruleChainModel.nodes.push(addedRuleNode);
|
|
this.onModelChanged();
|
|
this.updateRuleNodesHighlight();
|
|
}
|
|
this.enableHotKeys = true;
|
|
}
|
|
);
|
|
}
|
|
|
|
addRuleNodeLink(link: FcRuleEdge, labels: {[label: string]: LinkLabel},
|
|
allowCustomLabels: boolean, sourceRuleChainId: string): Observable<FcRuleEdge> {
|
|
return this.dialog.open<AddRuleNodeLinkDialogComponent, AddRuleNodeLinkDialogData,
|
|
FcRuleEdge>(AddRuleNodeLinkDialogComponent, {
|
|
disableClose: true,
|
|
panelClass: ['tb-dialog', 'tb-fullscreen-dialog'],
|
|
data: {
|
|
link,
|
|
labels,
|
|
allowCustomLabels,
|
|
sourceRuleChainId
|
|
}
|
|
}).afterClosed();
|
|
}
|
|
|
|
toggleVersionControl($event: Event, versionControlButton: MatMiniFabButton) {
|
|
if ($event) {
|
|
$event.stopPropagation();
|
|
}
|
|
const trigger = versionControlButton._elementRef.nativeElement;
|
|
if (this.popoverService.hasPopover(trigger)) {
|
|
this.popoverService.hidePopover(trigger);
|
|
} else {
|
|
const versionControlPopover = this.popoverService.displayPopover(trigger, this.renderer,
|
|
this.viewContainerRef, VersionControlComponent, 'leftTop', true, null,
|
|
{
|
|
detailsMode: true,
|
|
active: true,
|
|
singleEntityMode: true,
|
|
externalEntityId: this.ruleChain.externalId || this.ruleChain.id,
|
|
entityId: this.ruleChain.id,
|
|
entityName: this.ruleChain.name,
|
|
onBeforeCreateVersion: () => {
|
|
if (this.isDirty) {
|
|
return this.saveRuleChain();
|
|
} else {
|
|
return of(null);
|
|
}
|
|
}
|
|
}, {}, {}, {}, true);
|
|
versionControlPopover.tbComponentRef.instance.popoverComponent = versionControlPopover;
|
|
versionControlPopover.tbComponentRef.instance.versionRestored.subscribe(() => {
|
|
this.reloadRuleChain();
|
|
});
|
|
}
|
|
}
|
|
|
|
private updateNodeErrorTooltip(node: FcRuleNode) {
|
|
if (node.error) {
|
|
const element = $('#' + node.id);
|
|
let tooltip = this.errorTooltips[node.id];
|
|
if (!tooltip || !element.hasClass('tooltipstered')) {
|
|
element.tooltipster(
|
|
{
|
|
theme: 'tooltipster-shadow',
|
|
delay: 0,
|
|
animationDuration: 0,
|
|
trigger: 'custom',
|
|
triggerOpen: {
|
|
click: false,
|
|
tap: false
|
|
},
|
|
triggerClose: {
|
|
click: false,
|
|
tap: false,
|
|
scroll: false
|
|
},
|
|
side: 'top',
|
|
trackOrigin: true
|
|
}
|
|
);
|
|
const content = '<div class="tb-rule-node-error-tooltip">' +
|
|
'<div id="tooltip-content">' +
|
|
'<div class="tb-node-details">' + node.error + '</div>' +
|
|
'</div>' +
|
|
'</div>';
|
|
const contentElement = $(content);
|
|
tooltip = element.tooltipster('instance');
|
|
tooltip.isErrorTooltip = true;
|
|
tooltip.content(contentElement);
|
|
this.errorTooltips[node.id] = tooltip;
|
|
}
|
|
setTimeout(() => {
|
|
tooltip.open();
|
|
}, 0);
|
|
} else {
|
|
if (this.errorTooltips[node.id]) {
|
|
const tooltip = this.errorTooltips[node.id];
|
|
tooltip.destroy();
|
|
delete this.errorTooltips[node.id];
|
|
}
|
|
}
|
|
}
|
|
|
|
private updateErrorTooltips(hide: boolean) {
|
|
for (const nodeId of Object.keys(this.errorTooltips)) {
|
|
const tooltip = this.errorTooltips[nodeId];
|
|
if (hide) {
|
|
tooltip.close();
|
|
} else {
|
|
tooltip.open();
|
|
}
|
|
}
|
|
}
|
|
|
|
private displayTooltip(event: MouseEvent, content: string) {
|
|
this.destroyTooltips();
|
|
this.tooltipTimeout = setTimeout(() => {
|
|
const element = $(event.target);
|
|
element.tooltipster(
|
|
{
|
|
theme: 'tooltipster-shadow',
|
|
delay: 100,
|
|
trigger: 'custom',
|
|
triggerOpen: {
|
|
click: false,
|
|
tap: false
|
|
},
|
|
triggerClose: {
|
|
click: true,
|
|
tap: true,
|
|
scroll: true
|
|
},
|
|
side: 'right',
|
|
distance: 12,
|
|
trackOrigin: true
|
|
}
|
|
);
|
|
const contentElement = $(content);
|
|
const tooltip = element.tooltipster('instance');
|
|
tooltip.content(contentElement);
|
|
tooltip.open();
|
|
}, 500);
|
|
}
|
|
}
|
|
|
|
export interface AddRuleNodeLinkDialogData {
|
|
link: FcRuleEdge;
|
|
labels: {[label: string]: LinkLabel};
|
|
allowCustomLabels: boolean;
|
|
sourceRuleChainId: string;
|
|
}
|
|
|
|
@Component({
|
|
selector: 'tb-add-rule-node-link-dialog',
|
|
templateUrl: './add-rule-node-link-dialog.component.html',
|
|
providers: [{provide: ErrorStateMatcher, useExisting: AddRuleNodeLinkDialogComponent}],
|
|
styleUrls: ['./add-rule-node-link-dialog.component.scss']
|
|
})
|
|
export class AddRuleNodeLinkDialogComponent extends DialogComponent<AddRuleNodeLinkDialogComponent, FcRuleEdge>
|
|
implements OnInit, ErrorStateMatcher {
|
|
|
|
ruleNodeLinkFormGroup: UntypedFormGroup;
|
|
|
|
link: FcRuleEdge;
|
|
labels: {[label: string]: LinkLabel};
|
|
allowCustomLabels: boolean;
|
|
sourceRuleChainId: string;
|
|
|
|
submitted = false;
|
|
|
|
constructor(protected store: Store<AppState>,
|
|
protected router: Router,
|
|
@Inject(MAT_DIALOG_DATA) public data: AddRuleNodeLinkDialogData,
|
|
@SkipSelf() private errorStateMatcher: ErrorStateMatcher,
|
|
public dialogRef: MatDialogRef<AddRuleNodeLinkDialogComponent, FcRuleEdge>,
|
|
private fb: UntypedFormBuilder) {
|
|
super(store, router, dialogRef);
|
|
|
|
this.link = this.data.link;
|
|
this.labels = this.data.labels;
|
|
this.allowCustomLabels = this.data.allowCustomLabels;
|
|
this.sourceRuleChainId = this.data.sourceRuleChainId;
|
|
|
|
this.ruleNodeLinkFormGroup = this.fb.group({
|
|
link: [deepClone(this.link), [Validators.required]]
|
|
}
|
|
);
|
|
}
|
|
|
|
ngOnInit(): void {
|
|
}
|
|
|
|
isErrorState(control: UntypedFormControl | null, form: FormGroupDirective | NgForm | null): boolean {
|
|
const originalErrorState = this.errorStateMatcher.isErrorState(control, form);
|
|
const customErrorState = !!(control && control.invalid && this.submitted);
|
|
return originalErrorState || customErrorState;
|
|
}
|
|
|
|
cancel(): void {
|
|
this.dialogRef.close(null);
|
|
}
|
|
|
|
add(): void {
|
|
this.submitted = true;
|
|
const link: FcRuleEdge = this.ruleNodeLinkFormGroup.get('link').value;
|
|
this.link = {...this.link, ...link};
|
|
this.dialogRef.close(this.link);
|
|
}
|
|
}
|
|
|
|
export interface AddRuleNodeDialogData {
|
|
ruleNode: FcRuleNode;
|
|
ruleChainId: string;
|
|
ruleChainType: RuleChainType;
|
|
}
|
|
|
|
@Component({
|
|
selector: 'tb-add-rule-node-dialog',
|
|
templateUrl: './add-rule-node-dialog.component.html',
|
|
providers: [{provide: ErrorStateMatcher, useExisting: AddRuleNodeDialogComponent}],
|
|
styleUrls: ['./add-rule-node-dialog.component.scss']
|
|
})
|
|
export class AddRuleNodeDialogComponent extends DialogComponent<AddRuleNodeDialogComponent, FcRuleNode>
|
|
implements OnInit, ErrorStateMatcher {
|
|
|
|
@ViewChild('tbRuleNode', {static: true}) ruleNodeDetailsComponent: RuleNodeDetailsComponent;
|
|
|
|
ruleNode: FcRuleNode;
|
|
ruleChainId: string;
|
|
ruleChainType: RuleChainType;
|
|
|
|
submitted = false;
|
|
|
|
constructor(protected store: Store<AppState>,
|
|
protected router: Router,
|
|
@Inject(MAT_DIALOG_DATA) public data: AddRuleNodeDialogData,
|
|
@SkipSelf() private errorStateMatcher: ErrorStateMatcher,
|
|
public dialogRef: MatDialogRef<AddRuleNodeDialogComponent, FcRuleNode>) {
|
|
super(store, router, dialogRef);
|
|
|
|
this.ruleNode = this.data.ruleNode;
|
|
this.ruleChainId = this.data.ruleChainId;
|
|
this.ruleChainType = this.data.ruleChainType;
|
|
}
|
|
|
|
ngOnInit(): void {
|
|
}
|
|
|
|
isErrorState(control: UntypedFormControl | null, form: FormGroupDirective | NgForm | null): boolean {
|
|
const originalErrorState = this.errorStateMatcher.isErrorState(control, form);
|
|
const customErrorState = !!(control && control.invalid && this.submitted);
|
|
return originalErrorState || customErrorState;
|
|
}
|
|
|
|
helpLinkIdForRuleNodeType(): string {
|
|
return getRuleNodeHelpLink(this.ruleNode.component);
|
|
}
|
|
|
|
cancel(): void {
|
|
this.dialogRef.close(null);
|
|
}
|
|
|
|
add(): void {
|
|
this.submitted = true;
|
|
|
|
this.ruleNodeDetailsComponent.validate();
|
|
if (this.ruleNodeDetailsComponent.ruleNodeFormGroup.valid) {
|
|
this.dialogRef.close(this.ruleNode);
|
|
}
|
|
}
|
|
}
|
|
|
|
export interface CreateNestedRuleChainDialogData {
|
|
ruleChainType: RuleChainType;
|
|
}
|
|
|
|
@Component({
|
|
selector: 'tb-create-nested-rulechain-dialog',
|
|
templateUrl: './create-nested-rulechain-dialog.component.html',
|
|
providers: [{provide: ErrorStateMatcher, useExisting: CreateNestedRuleChainDialogComponent}],
|
|
styleUrls: []
|
|
})
|
|
export class CreateNestedRuleChainDialogComponent extends DialogComponent<CreateNestedRuleChainDialogComponent, RuleChain>
|
|
implements OnInit, ErrorStateMatcher {
|
|
|
|
createNestedRuleChainFormGroup: UntypedFormGroup;
|
|
|
|
submitted = false;
|
|
|
|
constructor(protected store: Store<AppState>,
|
|
protected router: Router,
|
|
@Inject(MAT_DIALOG_DATA) public data: CreateNestedRuleChainDialogData,
|
|
@SkipSelf() private errorStateMatcher: ErrorStateMatcher,
|
|
private fb: UntypedFormBuilder,
|
|
private ruleChainService: RuleChainService,
|
|
public dialogRef: MatDialogRef<CreateNestedRuleChainDialogComponent, RuleChain>) {
|
|
super(store, router, dialogRef);
|
|
|
|
}
|
|
|
|
ngOnInit(): void {
|
|
this.createNestedRuleChainFormGroup = this.fb.group(
|
|
{
|
|
name: ['', [Validators.required, Validators.maxLength(255)]],
|
|
additionalInfo: this.fb.group(
|
|
{
|
|
description: [''],
|
|
}
|
|
)
|
|
}
|
|
);
|
|
}
|
|
|
|
isErrorState(control: UntypedFormControl | null, form: FormGroupDirective | NgForm | null): boolean {
|
|
const originalErrorState = this.errorStateMatcher.isErrorState(control, form);
|
|
const customErrorState = !!(control && control.invalid && this.submitted);
|
|
return originalErrorState || customErrorState;
|
|
}
|
|
|
|
cancel(): void {
|
|
this.dialogRef.close(null);
|
|
}
|
|
|
|
add(): void {
|
|
this.submitted = true;
|
|
const ruleChain = {
|
|
name: this.createNestedRuleChainFormGroup.get('name').value,
|
|
debugMode: false,
|
|
type: this.data.ruleChainType,
|
|
additionalInfo: {
|
|
description: this.createNestedRuleChainFormGroup.get('additionalInfo').get('description').value
|
|
}
|
|
} as RuleChain;
|
|
this.ruleChainService.saveRuleChain(ruleChain).subscribe(
|
|
(savedRuleChain) => {
|
|
this.dialogRef.close(savedRuleChain);
|
|
}
|
|
);
|
|
}
|
|
}
|
|
|