Merge branch '342-workflow-action-and-console-close' into development

nsacyber · Aug 21, 2019 · 1421740 · 1421740
2 parents d4ea999 + 2b38095
commit 1421740
Show file tree

Hide file tree

Showing 6 changed files with 47 additions and 67 deletions.
diff --git a/api_gateway/client/dist/walkoff/index.html b/api_gateway/client/dist/walkoff/index.html
@@ -14,5 +14,5 @@
 <link rel="stylesheet" href="client/dist/walkoff/styles.75e9067f07f100f4a70e.css"></head>
 <body>
     <main-component>Loading...</main-component>
-<script src="client/dist/walkoff/runtime.5978eebdd8411421365f.js"></script><script src="client/dist/walkoff/polyfills-es5.38ed56f75e7d87c23835.js" nomodule></script><script src="client/dist/walkoff/polyfills.425a354b82ebc224c491.js"></script><script src="client/dist/walkoff/scripts.dad7fdaf9a0a03a091ee.js"></script><script src="client/dist/walkoff/main.75f194436303abe371d3.js"></script></body>
+<script src="client/dist/walkoff/runtime.5978eebdd8411421365f.js"></script><script src="client/dist/walkoff/polyfills-es5.38ed56f75e7d87c23835.js" nomodule></script><script src="client/dist/walkoff/polyfills.425a354b82ebc224c491.js"></script><script src="client/dist/walkoff/scripts.dad7fdaf9a0a03a091ee.js"></script><script src="client/dist/walkoff/main.efc914494f19eebe1676.js"></script></body>
 </html>
diff --git a/api_gateway/client/dist/walkoff/main.75f194436303abe371d3.js b/api_gateway/client/dist/walkoff/main.75f194436303abe371d3.js
diff --git a/...dist/walkoff/main.f6e7741394ec12ade248.js → ...dist/walkoff/main.efc914494f19eebe1676.js b/...dist/walkoff/main.f6e7741394ec12ade248.js → ...dist/walkoff/main.efc914494f19eebe1676.js
diff --git a/api_gateway/client/package-lock.json b/api_gateway/client/package-lock.json
diff --git a/api_gateway/client/src/app/playbook/workflow.editor.component.ts b/api_gateway/client/src/app/playbook/workflow.editor.component.ts
@@ -3,7 +3,7 @@ import { Component, ViewEncapsulation, ViewChild, ElementRef, ChangeDetectorRef,
 import { ToastrService } from 'ngx-toastr';
 import { DatatableComponent } from '@swimlane/ngx-datatable';
 import { UUID } from 'angular2-uuid';
-import { Observable } from 'rxjs';
+import { Observable, interval, timer } from 'rxjs';
 import 'rxjs/Rx';
 import { plainToClass, classToClass } from 'class-transformer';
 import { NgbModal, NgbTabChangeEvent } from '@ng-bootstrap/ng-bootstrap';
@@ -852,6 +852,7 @@ export class WorkflowEditorComponent implements OnInit, AfterViewChecked, OnDest
 		this.cy.on('select', 'node', (e: any) => this.onNodeSelect(e));
 		this.cy.on('select', 'edge', (e: any) => this.onEdgeSelect(e));
 		this.cy.on('unselect', (e: any) => this.onUnselect(e));
+		this.cy.on('select unselect', (e: any) => this.triggerCanvasResize());
 
 		// Configure handlers when nodes/edges are added or removed
 		this.cy.on('add', 'node', (e: any) => this.onNodeAdded(e));
@@ -1570,19 +1571,15 @@ export class WorkflowEditorComponent implements OnInit, AfterViewChecked, OnDest
 
 	toggleConsole() {
 		this.showConsole = ! this.showConsole;
-		const options = { zoom: this.cy.zoom(), pan: this.cy.pan() }
-		setTimeout(() => this.setupGraph(options), 255);
+		this.triggerCanvasResize();
 	}
 
 	switchConsoleTabs($e: NgbTabChangeEvent) {
 		if ($e.nextId == 'menu-tab' ) return $e.preventDefault();
 
 		this.showConsole = true;
-		const options = { zoom: this.cy.zoom(), pan: this.cy.pan() }
-		setTimeout(() => {
-			this.setupGraph(options);
-			this.recalculateConsoleTable($e);
-		}, 255);
+		this.triggerCanvasResize();
+		setTimeout(() => this.recalculateConsoleTable($e), 255);
 	}
 
 	/**
@@ -1672,4 +1669,22 @@ export class WorkflowEditorComponent implements OnInit, AfterViewChecked, OnDest
 		modalRef.result.then(workflow => this.loadedWorkflow = workflow).catch(() => null)
 		return false;
 	}
+
+	closeActionSettingMenu() {
+		this.cy.$('this.selectedAction.id').unselect();
+		this.triggerCanvasResize();
+	}
+
+	triggerCanvasResize() {
+		// const options = { zoom: this.cy.zoom(), pan: this.cy.pan() }
+		// setTimeout(() => this.setupGraph(options), 255);
+		let height, width;
+		timer(0, 50).takeWhile(_ => height != this.cyRef.nativeElement.offsetHeight || width != this.cyRef.nativeElement.offsetWidth)
+		.do(_ => {
+			height = this.cyRef.nativeElement.offsetHeight
+			width = this.cyRef.nativeElement.offsetWidth
+		})
+		.last()
+		.subscribe(_ => window.dispatchEvent(new Event('resize')))	
+	}
 }
diff --git a/api_gateway/client/src/app/playbook/workflow.editor.html b/api_gateway/client/src/app/playbook/workflow.editor.html
@@ -148,20 +148,23 @@ <h5 class="card-title my-auto">{{app.name}}</h5>
         </div>
 
         <!-- Actual cytoscape graph editor -->
-        <div class="col-md-7 graphEditorColumn graphArea">
+        <div class="graphEditorColumn graphArea px-0 col">
             <div id="cy" #cyRef dnd-droppable (onDropSuccess)="handleDropEvent($event)" [hidden]="!loadedWorkflow"
                 tabindex="0"></div>
         </div>
 
         <!-- Parameter editors -->
-        <div class="col-md-3 graphEditorColumn">
-            <!-- Editor for Actions -->
+        <div [class.col-md-3]="selectedAction" class="graphEditorColumn shadow">
             <div *ngIf="!waitingOnData && selectedAction" class="parametersEditor">
                 <div class="d-flex justify-content-between my-2">
                     <h4 class="mb-0">Action Settings</h4>
-                    <button [disabled]="selectedAction.id === loadedWorkflow.start" class="btn btn-sm btn-primary"
-                        (click)="setStartNode(selectedAction.id)">Set Start Action</button>
-
+                    <div>
+                        <button [disabled]="selectedAction.id === loadedWorkflow.start" class="btn btn-sm btn-primary mr-2"
+                            (click)="setStartNode(selectedAction.id)">Set Start Action</button>
+                        <button class="btn btn-sm btn-danger" (click)="closeActionSettingMenu()" ngbTooltip="Close Settings">
+                            <i class="fa fa-times" aria-hidden="true"></i>
+                        </button>
+                    </div>
                 </div>
 
                 <div class="form-row">