Open rule chain from rule node link

ui-ngx/src/app/modules/home/pages/rulechain/rulechain-page.component.scss

@@ -171,12 +171,27 @@
 
     .fc-edit {
       .fc-nodeedit,
-      .fc-nodedelete {
+      .fc-nodedelete,
+      .fc-nodeopen {
         box-sizing: content-box;
         border: solid 2px #fff;
         background: #f83e05;
         outline: none;
       }
+
+      .fc-nodeopen{
+        top: 30px;
+        right: -14px;
+
+        mat-icon{
+          width: 20px;
+          min-width: 20px;
+          height: 20px;
+          min-height: 20px;
+          font-size: 18px;
+          line-height: 18px;
+        }
+      }
     }
 
     .fc-arrow-marker {

ui-ngx/src/app/modules/home/pages/rulechain/rulechain-page.component.ts

@@ -20,6 +20,7 @@ import {
   ElementRef,
   HostBinding,
   Inject,
+  OnDestroy,
   OnInit,
   QueryList,
   SkipSelf,
@@ -64,7 +65,7 @@ import {
 } from '@shared/models/rule-node.models';
 import { FcRuleNodeModel, FcRuleNodeTypeModel, RuleChainMenuContextInfo } from './rulechain-page.models';
 import { RuleChainService } from '@core/http/rule-chain.service';
-import { fromEvent, NEVER, Observable, of } from 'rxjs';
+import { fromEvent, NEVER, Observable, of, Subscription } from 'rxjs';
 import { debounceTime, distinctUntilChanged, mergeMap, tap } from 'rxjs/operators';
 import { ISearchableComponent } from '../../models/searchable-component.models';
 import { deepClone } from '@core/utils';
@@ -85,7 +86,7 @@ import Timeout = NodeJS.Timeout;
   encapsulation: ViewEncapsulation.None
 })
 export class RuleChainPageComponent extends PageComponent
-  implements AfterViewInit, OnInit, HasDirtyFlag, ISearchableComponent {
+  implements AfterViewInit, OnInit, OnDestroy, HasDirtyFlag, ISearchableComponent {
 
   get isDirty(): boolean {
     return this.isDirtyValue || this.isImport;
@@ -234,6 +235,8 @@ export class RuleChainPageComponent extends PageComponent
 
   flowchartConstants = FlowchartConstants;
 
+  private rxSubscription: Subscription;
+
   private tooltipTimeout: Timeout;
 
   constructor(protected store: Store<AppState>,
@@ -247,8 +250,14 @@ export class RuleChainPageComponent extends PageComponent
               public dialogService: DialogService,
               public fb: FormBuilder) {
     super(store);
+
+    this.rxSubscription = this.route.data.subscribe(
+      () => {
+        this.reset();
         this.init();
       }
+    );
+  }
 
   ngOnInit() {
   }
@@ -266,6 +275,11 @@ export class RuleChainPageComponent extends PageComponent
     this.ruleChainCanvas.adjustCanvasSize(true);
   }
 
+  ngOnDestroy() {
+    super.ngOnDestroy();
+    this.rxSubscription.unsubscribe();
+  }
+
   onSearchTextUpdated(searchText: string) {
     this.ruleNodeSearch = searchText;
     this.updateRuleNodesHighlight();
@@ -299,7 +313,19 @@ export class RuleChainPageComponent extends PageComponent
     this.createRuleChainModel();
   }
 
+  private reset(): void {
+    this.selectedObjects = [];
+    this.ruleChainModel.nodes = [];
+    this.ruleChainModel.edges = [];
+    this.ruleNodeTypesModel = {};
+    if (this.ruleChainCanvas) {
+      this.ruleChainCanvas.adjustCanvasSize(true);
+    }
+    this.updateRuleNodesHighlight();
+  }
+
   private initHotKeys(): void {
+    if (!this.hotKeys.length) {
       this.hotKeys.push(
         new Hotkey('ctrl+a', (event: KeyboardEvent) => {
             if (this.enableHotKeys) {
@@ -381,6 +407,7 @@ export class RuleChainPageComponent extends PageComponent
           this.translate.instant('rulenode.delete-selected-objects'))
       );
     }
+  }
 
   updateRuleChainLibrary() {
     const search = this.ruleNodeTypeSearch.toUpperCase();

ui-ngx/src/app/modules/home/pages/rulechain/rulenode.component.html

@@ -59,4 +59,9 @@
       ×
     </div>
   </section>
+  <section class="fc-edit" *ngIf="node.component.type === RuleNodeType.RULE_CHAIN">
+    <div class="fc-nodeedit fc-nodeopen" (click)="openRuleChain($event, node)">
+      <mat-icon class="material-icons" svgIcon="mdi:login"></mat-icon>
+    </div>
+  </section>
 </div>

ui-ngx/src/app/modules/home/pages/rulechain/rulenode.component.scss

@@ -40,7 +40,8 @@
 
   :host-context(.fc-edit) {
     .fc-nodeedit,
-    .fc-nodedelete {
+    .fc-nodedelete,
+    .fc-nodeopen {
       box-sizing: content-box;
       border: solid 2px #fff;
       background: #f83e05;

ui-ngx/src/app/modules/home/pages/rulechain/rulenode.component.ts

@@ -17,6 +17,8 @@
 import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
 import { Component, OnInit } from '@angular/core';
 import { FcNodeComponent } from 'ngx-flowchart/dist/ngx-flowchart';
+import { FcRuleNode, RuleNodeType } from '@shared/models/rule-node.models';
+import { Router } from '@angular/router';
 
 @Component({
   // tslint:disable-next-line:component-selector
@@ -27,8 +29,10 @@ import { FcNodeComponent } from 'ngx-flowchart/dist/ngx-flowchart';
 export class RuleNodeComponent extends FcNodeComponent implements OnInit {
 
   iconUrl: SafeResourceUrl;
+  RuleNodeType = RuleNodeType;
 
-  constructor(private sanitizer: DomSanitizer) {
+  constructor(private sanitizer: DomSanitizer,
+              private router: Router) {
     super();
   }
 
@@ -39,4 +43,12 @@ export class RuleNodeComponent extends FcNodeComponent implements OnInit {
     }
   }
 
+  openRuleChain($event: Event, node: FcRuleNode) {
+    if ($event) {
+      $event.stopPropagation();
+    }
+    if (node.targetRuleChainId) {
+      this.router.navigateByUrl(`/ruleChains/${node.targetRuleChainId}`);
+    }
+  }
 }